Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.

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

Avatar

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

Avatar

Level 10

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

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>

Avatar

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

Avatar

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.

Avatar

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

Avatar

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>



Arun Patidar

Avatar

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