Issue #4576๐Ÿ’ฌ AnsweredOpened Sep 12, 2022by benryanwilliams1 reactions

Clicking 'wrap for style' button affects the inner components of other components inside the same text box

Quick answerby artfโค 1

RTE relies on the DOM content during the editing so if you remove it deliberately with something like inner components will be removed once the editing is finished.

Read full answer below โ†“

Question

GrapesJS version[X] I confirm to use the latest version of GrapesJSWhat browser are you using? Chrome 104.0.5112.101 Reproducible demo link https://jsfiddle.net/7cLr0xt2/3/Describe the bug How to reproduce the bug? For some reason I'm unable to reproduce the bug inside the fiddle linked above, since line 34 selectedComponent.components('<span liquid="if contact.id">jhbjhhgjjh</span> <span liquid="else">qwewqeqwe</span>') doesn't replace the inner components of the component, so I'll have to share a video of what happens with my project instead, but the steps are as follows:Double click on the...

Answers (4)

artfโ€ข Sep 13, 2022

RTE relies on the DOM content during the editing so if you remove it deliberately with something like

onRender() {
  this.el.innerHTML = this.model.get("displayedText")
},

inner components will be removed once the editing is finished.

benryanwilliamsโ€ข Sep 13, 2022

Ok thanks @artf, that makes sense. However, those lines of code, along with are required to render the correct selected state inside the canvas as follows (both upon the component initially being rendered and when the user selects a different 'if' state, thus changing displayedText): https://user-i...

benryanwilliamsโ€ข Sep 13, 2022

I need to do some more testing but it looks like I've got around this behaviour by saving the inner components inside the component itself when first creating it / editing it, then using the rte:disable hook as follows: It seems a bit hacky so if you can think of a better way then please let me kno...

GJSBlockโ€ข May 17, 2026

Thanks for reporting this, @benryanwilliams. Great question about Clicking 'wrap for style' button affects the inner components of other components inside the same text box. The recommended approach with ProseMirror is to use the event-driven API. Start here: Check the GrapesJS documentation for yo...

Related Questions and Answers

Continue research with similar issue discussions.

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 โ†’

Related tutorials

In-depth guides on the same topic.

All tutorials โ†’

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.