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

Avatar

Avatar
Boost 5
Level 3
MaxBarrass
Level 3

Likes

18 likes

Total Posts

42 posts

Correct reply

4 solutions
Top badges earned
Boost 5
Boost 3
Boost 10
Boost 1
Affirm 3
View profile

Avatar
Boost 5
Level 3
MaxBarrass
Level 3

Likes

18 likes

Total Posts

42 posts

Correct reply

4 solutions
Top badges earned
Boost 5
Boost 3
Boost 10
Boost 1
Affirm 3
View profile
MaxBarrass
Level 3

16-02-2019

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>

Replies

Avatar

Avatar
Validate 25
Level 10
smacdonald2008
Level 10

Likes

1,409 likes

Total Posts

12,671 posts

Correct reply

2,278 solutions
Top badges earned
Validate 25
Validate 10
Validate 1
Give back 900
Give back 600
View profile

Avatar
Validate 25
Level 10
smacdonald2008
Level 10

Likes

1,409 likes

Total Posts

12,671 posts

Correct reply

2,278 solutions
Top badges earned
Validate 25
Validate 10
Validate 1
Give back 900
Give back 600
View profile
smacdonald2008
Level 10

16-02-2019

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

Avatar

Avatar
Boost 250
MVP
Gaurav-Behl
MVP

Likes

250 likes

Total Posts

1,147 posts

Correct reply

283 solutions
Top badges earned
Boost 250
Establish
Give back 300
Give Back 50
Give Back 5
View profile

Avatar
Boost 250
MVP
Gaurav-Behl
MVP

Likes

250 likes

Total Posts

1,147 posts

Correct reply

283 solutions
Top badges earned
Boost 250
Establish
Give back 300
Give Back 50
Give Back 5
View profile
Gaurav-Behl
MVP

16-02-2019

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..

Avatar

Avatar
Boost 5
Level 3
MaxBarrass
Level 3

Likes

18 likes

Total Posts

42 posts

Correct reply

4 solutions
Top badges earned
Boost 5
Boost 3
Boost 10
Boost 1
Affirm 3
View profile

Avatar
Boost 5
Level 3
MaxBarrass
Level 3

Likes

18 likes

Total Posts

42 posts

Correct reply

4 solutions
Top badges earned
Boost 5
Boost 3
Boost 10
Boost 1
Affirm 3
View profile
MaxBarrass
Level 3

16-02-2019

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>

Avatar

Avatar
Establish
MVP
Veena_Vikram
MVP

Likes

484 likes

Total Posts

1,048 posts

Correct reply

121 solutions
Top badges earned
Establish
Coach
Contributor 2
Seeker
Ignite 5
View profile

Avatar
Establish
MVP
Veena_Vikram
MVP

Likes

484 likes

Total Posts

1,048 posts

Correct reply

121 solutions
Top badges earned
Establish
Coach
Contributor 2
Seeker
Ignite 5
View profile
Veena_Vikram
MVP

17-02-2019

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

Avatar

Avatar
Coach
MVP
Arun_Patidar
MVP

Likes

1,442 likes

Total Posts

3,314 posts

Correct reply

941 solutions
Top badges earned
Coach
Contributor 2
Ignite 10
Give Back 700
Boost 1000
View profile

Avatar
Coach
MVP
Arun_Patidar
MVP

Likes

1,442 likes

Total Posts

3,314 posts

Correct reply

941 solutions
Top badges earned
Coach
Contributor 2
Ignite 10
Give Back 700
Boost 1000
View profile
Arun_Patidar
MVP

18-02-2019

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>

Avatar

Avatar
Boost 5
Level 3
MaxBarrass
Level 3

Likes

18 likes

Total Posts

42 posts

Correct reply

4 solutions
Top badges earned
Boost 5
Boost 3
Boost 10
Boost 1
Affirm 3
View profile

Avatar
Boost 5
Level 3
MaxBarrass
Level 3

Likes

18 likes

Total Posts

42 posts

Correct reply

4 solutions
Top badges earned
Boost 5
Boost 3
Boost 10
Boost 1
Affirm 3
View profile
MaxBarrass
Level 3

18-02-2019

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

Avatar

Avatar
Boost 5
Level 3
MaxBarrass
Level 3

Likes

18 likes

Total Posts

42 posts

Correct reply

4 solutions
Top badges earned
Boost 5
Boost 3
Boost 10
Boost 1
Affirm 3
View profile

Avatar
Boost 5
Level 3
MaxBarrass
Level 3

Likes

18 likes

Total Posts

42 posts

Correct reply

4 solutions
Top badges earned
Boost 5
Boost 3
Boost 10
Boost 1
Affirm 3
View profile
MaxBarrass
Level 3

18-02-2019

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.

Avatar

Avatar
Establish
MVP
Veena_Vikram
MVP

Likes

484 likes

Total Posts

1,048 posts

Correct reply

121 solutions
Top badges earned
Establish
Coach
Contributor 2
Seeker
Ignite 5
View profile

Avatar
Establish
MVP
Veena_Vikram
MVP

Likes

484 likes

Total Posts

1,048 posts

Correct reply

121 solutions
Top badges earned
Establish
Coach
Contributor 2
Seeker
Ignite 5
View profile
Veena_Vikram
MVP

19-02-2019

Ok .

Avatar

Avatar
Validate 25
Level 10
smacdonald2008
Level 10

Likes

1,409 likes

Total Posts

12,671 posts

Correct reply

2,278 solutions
Top badges earned
Validate 25
Validate 10
Validate 1
Give back 900
Give back 600
View profile

Avatar
Validate 25
Level 10
smacdonald2008
Level 10

Likes

1,409 likes

Total Posts

12,671 posts

Correct reply

2,278 solutions
Top badges earned
Validate 25
Validate 10
Validate 1
Give back 900
Give back 600
View profile
smacdonald2008
Level 10

24-02-2019

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