Expand my Community achievements bar.

Don’t miss the AEM Skill Exchange in SF on Nov 14—hear from industry leaders, learn best practices, and enhance your AEM strategy with practical tips.

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