[QUESTION] Text component converted to Box after saving

I have a custom component when dropped inside a Text component (I am using a custom text component that extends the original text component) after saving and reloading the HTML/CSS I am experiencing the same problem - the text component converts to a Box. I use a custom attribute, but no matter the attribute the type of the component converts from Text to Default. P.S.: The custom component becomes editable on double click.

Before saving:

<div data-gjs-type="text" data-highlightable="1" data-text-extended="Text">Insert <span data-gjs-type="custom-type" contenteditable="false" data-gjs-textable="true" >Custom comp test</span>your text here</div>

On loading already saved content:

<div data-gjs-type="default" data-highlightable="1" data-text-extended="Text">Insert <span data-gjs-type="custom-type" contenteditable="false" data-gjs-textable="true" >Custom comp test</span>your text here</div>

Related issues: https://github.com/artf/grapesjs/issues/761

[inaLar]

@pouyamiralayi, yes, I have done exactly the same and it is working, but also I’ve managed to use tagName (div, p, … ) in the isComponent of an extended text component and this also works in my case. I will close the question now.

Thank you very much for all the inside!

Cheers

[inaLar]

Hi! This is very useful information - about accessing the model this way instead the DOM. I will explore it. I still don’t understand why the gjs-comp-selected class is stored in the innerHTML precisely when I drop the custom component inside a text component. Maybe this is just uncovered behavior.

Also I am exploring the option to remove the class attribute (gjs-comp-selected) from the custom component inside its model, onRender(). But still determining the parent from child model is a new territory for me 😃