Text component converted to Box after saving
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...
Read full answer below ↓Question
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
Answers (3)
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 :)
@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
do you define your custom type inside a plugin?
Related Questions and Answers
Continue research with similar issue discussions.
Issue #3579
RTE misplaced when opened right after dropping `activeOnRender` component
Version: 0.17.4 Are you able to reproduce the bug from the demo?[x] Yes[ ] No Steps to reproduce:Go to the demoDrop a "Text" block inside t...
Issue #6152
CSS added via custom code persists after custom code component is removed
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? any Reproducible demo link https://grapesj...
Issue #3832
The css classes are removed and the autogenerated ids for each html tags gets changed ( Example : ivj5m-2) after each reload
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome Reproducible demo link Not there De...
Issue #3139
FEAT: Disable <table> being auto amended during save
I'm getting an issue, when saving a custom HTML component (just a table), grapes JS will modify it. before save after save. So I want to be...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.
Browse free plugins →Premium plugins ship with support, regular updates, and production-ready features — save days of integration work.
Browse premium plugins →Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.