BUG: Can't edit text node inside div, if div has inside tag p > span.
Question
GrapesJS version
- I confirm to use the latest version of GrapesJS
What browser are you using?
Chrome Version 108.0.5359.125, Mozilla 107.0
Reproducible demo link
https://jsfiddle.net/stanislavdimitrenko/d61cm4yg/14/
Describe the bug
So, that strange behavior of grapes js.
If you have that struct
<div>
Some text without the wrapper
<p><span>Text</span></p>
</div>
"Some text without the wrapper" - you can't edit that text. Grapes don't do it editable...
If change that, then you can.
<div>
Some text without the wrapper
<p>Text</p>
</div>
Or, if you add a wrapper to the text, the same makes it editable.
<div>
<span>Some text with wraper</span>
<p><span>Text</span></p>
</div>
Maybe need somehow set up grapesjs or that limit of script work?
Code of Conduct
- I agree to follow this project's Code of Conduct
Answers (1)
Yeah right now this is an expected behaviour for parsed text nodes without proper wrappers and not textable components as siblings. So in order to make those nodes editable you have to properly wrap them in a tag like span.
Related Questions and Answers
Continue research with similar issue discussions.
Issue #4576
BUG: Clicking 'wrap for style' button affects the inner components of other components inside the same text box
GrapesJS version[X] I confirm to use the latest version of GrapesJSWhat browser are you using? Chrome 104.0.5112.101 Reproducible demo link...
Issue #5657
BUG: HTML Comment Tags disable text edit
GrapesJS version[X] I confirm to use the latest version of GrapesJSWhat browser are you using? Chrome 120Reproducible demo link https://jsf...
Issue #4851
BUG: this.on('change:attributes:type', this.handleTypeChange) do not support array type
GrapesJS version[X] I confirm to use the latest version of GrapesJSWhat browser are you using? Chrome 108.0.5359.125Reproducible demo link...
Issue #3779
BUG: editor.getSelected().toHTML() encodes inline javascript
GrapesJS version[X] I confirm to use the latest version of GrapesJSWhat browser are you using? latest (chrome)Reproducible demo link https:...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.