SOLVED: Displaying variables in editor mode on the component container

[anasustic]

I have a use case where I have to show only on the editor instance (not preview and not publish) the component name and a field that I retrieve from the model.

This is what I have done (code below) but that creates a new div whereas I would like to display the variable "on" the component container box just like now Articles and Drag component here shows. End result should be  Article :${model.blogTag} in the container box slighly grayed out.

<sly data-sly-use.model="xxx.component.content.ArticlesModel"
     data-sly-use.template="core/wcm/components/commons/v1/templates.html"></sly>
<sly data-sly-call="${template.placeholder @ isEmpty=!model.tagDefined}"></sly>

<sly data-sly-test="${wcmmode.edit}">
    <div data-sly-test="${model.tagDefined && model.authorInstance}">
        Article :${model.blogTag}
    </div>
</sly>

[kirthim]

@anasustic can you try removing this div tag and add a sly instead from here?

<div data-sly-test="${model.tagDefined && model.authorInstance}">

[Rohit_Utreja]

@anasustic 

Please use data-sly-unwrap within html element to avoid these.

<p data-sly-use.nav="abc.js" data-sly-unwrap>Hello World</p>

produces

Hello world

[anasustic]

Thanks for your reply @kirthim and @Rohit_Utreja 

It renders correctly (the rendering logic is correct) but it does not center nicely like the "Drop your component here" renders in the editor.

This is what I have done:

<sly data-sly-test="${wcmmode.edit}">
    <div data-sly-test="${model.tagDefined && model.authorInstance}" class="l-horizontal l-horizontal--align-center" data-sly-unwrap>
        Article :${model.blogTag}
    </div>
</sly>

[krishna_sai]

@anasustic Can you check if the css related to those classes are loading in author mode or not

Thanks,
Krishna

[Rohit_Utreja]

Can you try modifying the syntax to below.

<sly data-sly-call="${template.placeholder @ isEmpty=!model.tagDefined, classAppend='some-custom-class'}"></sly>

[DPrakashRaj]

may be try this. it won't create a separate div

<div data-sly-test="${WCMMode.edit}" data-sly-unwrap>
<div class="clear"></div>
<div data-emptytext="

 Article :${model.blogTag}

" class="cq-placeholder"></div>
</div>