using data-sly-element and data-sly-unwrap creates malfromed html

[#1]

Hi all, does any one else have this problem?

doing this:

<div data-sly-unwrap="${true}" data-sly-element="${'span'}">

    TEST

    </div>

creates this:

<span

    TEST

    </span>

[#2]

For proper syntax for HTL - please consult the HTL Spec here -- htl-spec/SPECIFICATION.md at master · adobe/htl-spec · GitHub

[#3]

I can reproduce this with both sly or div tags, it generates malformed structure, probably because 'editor' also uses <span> tags internally -

<sly data-sly-unwrap="${true}" data-sly-element="${'span'}">

    TEST

    </sly>

<span    // missing closing brace

    TEST

    </span>

You should open a bug for this..

[#4]

this happens to any tag you use

    <whatyousayin data-sly-unwrap="${'false'}" data-sly-element="${'div'}">

    TEST

    </whatyousayin>

    <whatyousayin data-sly-unwrap="${'true'}" data-sly-element="${'div'}">

    TEST

    </whatyousayin>

    <whatyousayin data-sly-unwrap="${''}" data-sly-element="${'div'}">

    TEST

    </whatyousayin>

    <whatyousayin data-sly-unwrap="${}" data-sly-element="${'div'}">

    TEST

    </whatyousayin>

as soon as you remove unwrap works fine

    <whatyousayin  data-sly-element="${'div'}">

    TEST

    </whatyousayin>

[#5]

Hi Max

  I know the above issue is persisting and might need a bug ticket to fix the same, I was wondering , why you need to do

<div data-sly-unwrap="${true}" data-sly-element="${'span'}">

    TEST

    </div>

  when

<span data-sly-unwrap="${true}" >

    TEST

    </span> will work in your case.

Thanks

Veena

[#6]

Hi,

If you want text without tag you can use below:

<span data-sly-unwrap="${true}">

    Text

    </span>

if you want Text within span, simply use like below:

<span> Text </span>

[#7]

So if I refer to the:

Block Statements Priority

When used on the same element, the following priority list defines how block statements are evaluated:

1. data-sly-template
2. data-sly-set, data-sly-test, data-sly-use
3. data-sly-call
4. data-sly-text
5. data-sly-element, data-sly-include, data-sly-resource
6. data-sly-unwrap
7. data-sly-list, data-sly-repeat
8. data-sly-attribute

When two block statements have the same priority, their evaluation order is from left to right.

This would mean that when this is evaluated:

<thisdoesnotwork data-sly-unwrap="${true}" data-sly-element="${'div'}">TEST</thisdoesnotwork>

Then data-sly-element will convert this line into :

<div data-sly-unwrap="${true}" >TEST</div>

Then the unwarp should change it into

TEST

Desired outcome.

Obviously right now I had to do it the long way.

Also please note that the first line also has a wierd tab characted output when this happens, I am sure people would have noticed this as well, when they tested this.

{TAB}<span    // missing closing brace

{space}{space}{space}{space}TEST

{space}{space}</span>

https://github.com/adobe/htl-spec/blob/master/SPECIFICATION.md#3-special-html-tags

[#8]

Ive only provided that example as a reference that can be easily reproduced by anyone, its not how i use it.

I did this so that I can demonstrate the problem in its simplest reproducable form.

[#9]

Ok .

[#10]

As mentioned in this thread - Gaurav and Veena - can reproduce this issue and asked you to open a support ticket so this issue can be fixed.

Thanks