Missing inline styles used by CKEditor when adding raw html components

+1

Hey I've been having similar issues. I think it's quite serious as both newsletter and mjml demo are affected. (Both use CKeditor as RTE)

When I import a content that has a text (mj-text) that has styled elements (span) the imported content gets parsed and the styling elements are recognized as individual components and not as contents of the wrapping text element.

example (This is valid according to mjml.io):

<mjml>
  <mj-body>
    <mj-section>
      <mj-column>
        <mj-image width="100px" src="/assets/img/logo-small.png"></mj-image>
        <mj-divider border-color="#F45E43"></mj-divider>
        <mj-text font-size="20px" font-family="helvetica"><strong>Hello</strong> <span style="color: #F45E43;">World</span></mj-text>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

Expected result:

Result:

The problem is that due to nested texts are parsed into components, their style attributes gets stripped and the result code does't contain it anymore:

<mjml>
  <mj-body>
    <mj-section>
      <mj-column>
        <mj-image width="100px" src="/assets/img/logo-small.png">
        </mj-image>
        <mj-divider border-color="#F45E43">
        </mj-divider>
        <mj-text font-size="20px" font-family="helvetica">
          <strong>Hello</strong> 
          <span id="io1ak">World</span>
        </mj-text>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

The style must be there under the hood somewhere. Because when I doubleclick on the text, the CKEditor loads and somehow "restores" the style attribute. But unless I open every text for editing on each content edit, the style gets lost.

Not all GrapesJS versions are affected. 0.21.1, and 0.21.1 are But 0.16.3 - 0.19.5 behaves as expected.

I checked changes from 0.19.5 to 0.20.1 and I couldn't clearly trace back what could have casued the change in this behaviour. But probably has something to do with Support textable for extended Text components

Now I know that nested texts are native to grapesJS, since this is the default way of styling them. But is there a way to disable nested text feature?

ckeditor output: <div>some rich text from <span style="color:blue">ckeditor</span></div> after parsing into editor, become like: <div data-gjs-type="text">some rich text from <span style="color:blue" data-gjs-type="default">ckeditor</span></div> Basically every dom become components.

Maybe give a choice to developer to decide whether a component should stop add child nodes as components. Can add a new flag property in component's model, eg: 'stopProcessChildren'

Inside ./parser/mode/ParserHtml.ts::parseNode() function, right before going into the recurisve parseNode() and assigning child components model.components = this.parseNode(node, {/*...*/});

• Add an else-if condition: if model's 'stopProcessChildren' is true, do not do the parseNode() on children nodes.
• next, need to set the current dom node's innerHtml to model's 'content' or do this in component definition

From the default ./dom_components/model/Component.ts::toHTML() and ./dom_components/model/Component.ts::getInnerHTML(), the html output should return model's 'content' if there are no child components.

Proposed component definition can be like:

editor.DomComponents.addType('my-rich-text', {
  isComponent: el => {
    if (allChildText(el)) {  //check if all text node or tagname in textTags
      return { 
		type: 'my-rich-text',	// or can do 'text' here? not sure.
		editable: true,
		content: el.innerHtml,
		components: false,
		stopProcessChildren: true,		//new property
	  };
    }
  },
  // ...
});

Concerns: XXS

Thanks for reporting this, @gustavohleal.

Great suggestion about Missing inline styles used by CKEditor when adding raw html components! While this specific feature isn't yet in the core API, there are several ways to achieve similar behavior.

Using the event system:

editor.on('component:update', (component) => {
  // your logic here
});

Alternative approaches:

• Listen to selector:add for CSS selector changes
• Use selector:custom for custom rules
• Tap into the change:* events for fine-grained tracking
• Build a plugin that extends the editor with this capability

Making it official: If this feature would benefit many users, consider opening a formal Feature Request on the GrapesJS repo with:

• A detailed use case
• Code example showing the desired behavior
• Why this matters for your workflow

The core team is receptive to well-motivated feature requests backed by real use cases.