Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

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

MaxBarrass
Level 3
Level 3

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>

9 Replies
Gaurav-Behl
Community Advisor
Community Advisor

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

MaxBarrass
Level 3
Level 3

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>

Veena_Vikram
Community Advisor
Community Advisor

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

MaxBarrass
Level 3
Level 3

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.

smacdonald2008
Level 10
Level 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

Arun_Patidar
Community Advisor
Community Advisor

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>

MaxBarrass
Level 3
Level 3

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