Issue #3069💬 AnsweredOpened October 9, 2020by orosl0 reactions

Style gone on link or nested text elements after exiting edit

快速解答by artf

Hi @orosl, thanks for the report. I was able to find and fix the bug so, it'll be available in the next release.

Question

Hello,

I am editing legacy HTML with version 0.16.3 + newsleter-plugin. The style is stored inline (since the tool is used for authoring emails) and I use the feature componentFirst: true .

I am facing a problem when trying to edit Component Text that has other text elements inside.

<div  style="font-size: 20px;" class="my-class" > 
            A text component  
           <span style="font-size: 35px;">---and a text inside---</span>
</div>

Once I edit the text from the parent div, the styling of the nested element disappears at blur. The inline style is stored on the id and the id of the subnode is completely removed.
How can I stop this from happening?

The behavior is presented in this JSFiddle: https://jsfiddle.net/jsh8yv4p/

I have read about including the text inside the parent div in a span or another text element, but since the HTML that is loaded in the editor is legacy I do not want to alter its structure in this manner.

Is there any way I can edit text(that might have subnodes) and not alter the subnodes?

Thank you in advance, Lavinia

Answers (3)

artf• October 13, 2020

Hi @orosl, thanks for the report. I was able to find and fix the bug so, it'll be available in the next release.

orosl• October 29, 2020

Hi @artf, thank you very much for your prompt response and release. I upgraded with the latest version 0.16.27. However I still encounter the problem, but with a slightly different behavior.

I am not sure if I should open a new issue since it is partially solved but nonetheless, I will explain the behavior here.

Given a similar configuration as above and presented in this demo: https://jsfiddle.net/x5srzpvk/5

If I change the styling of the link(or any other such element) in the nested span element, after an edit, the styling is lost since the id is altered (styling is kept on the id).

So, id: jp365 transforms into jp365-2 and continues to be added -2-2 after each edit. I encountered this behavior in multiple similar situations. Also, the HTML gets difficult to read after many edits, as the ids increase in size.

Is there any way I can stop the process of altering ids of subnodes if text is edited?

Thank you and much appreciation, Lavinia

artf• November 15, 2020

Thanks @orosl actually the fix was working with inner components but not with nested ones. I'll fix it in the next release

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Free option

Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.

Browse free plugins →

Premium option

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.

预设插件组成部分方块资产指挥 I18n 层次风格存储 RTE 通讯网页场地建设者

Style gone on link or nested text elements after exiting edit

Question

Answers (3)

Related Questions and Answers

The css classes are removed and the autogenerated ids for each html tags gets changed ( Example : ivj5m-2) after each reload

HTML elements ids are incremented on different pages loaded in projectData

editing/replacing the text inside of a link

Component content is set to empty string after inline editing

Paid Plugins That Match This Issue

Related tutorials

How to Build a Production GrapesJS Editor: The Complete Walkthrough of Brief, Preset, Plugins, and Services

GrapesJS Inline RTE Plugins Update: CKEditor 5 v0.1.4 and Froala Inline Text Editor

Embed GrapesJS in Your SaaS: A Weekend Guide

Browse Plugin Categories