BUG: 0.18.3 text editing not triggering for link > text components
Question
GrapesJS version
- I confirm to use the latest version of GrapesJS
What browser are you using?
Chrome 99
Reproducible demo link
https://codesandbox.io/s/distracted-archimedes-fhmnpg
Describe the bug
How to reproduce the bug?
- open the demo
- double click "I am text" component.
What is the current behavior?
Double clicking text elements (span, i...) inside a switches focus to the parent a element instead of opening rte for the selected element. This works correctly in 0.18.2.
From the template here https://codesandbox.io/s/1r0w2pk1vl minimal reproduction is to patch index.html from
<div id="gjs">
<div style="padding: 25px">Hello World!!!</div>
</div>
to
<div id="gjs">
<div style="padding: 25px">
<ul>
<li>
<a href="#">
<i>I am icon</i> <-- rte doesn't work on these two elements in 0.18.3
<span>I am text</span> <-- rte doesn't work on these two elements in 0.18.3
</a>
</li>
</ul>
</div>
</div>
Code of Conduct
- I agree to follow this project's Code of Conduct
Answers (1)
Yeah, I see the problem.
Double clicking text elements (span, i...) inside a switches focus to the parent a element instead of opening rte for the selected element
With the new logic implemented for the text components view, this is intentional. The idea was to prevent having nested RTEs by passing editing to the closest component with RTE.
Unfortunately, links have also their own logic applied during parsing in order to prevent RTE with links as blocks.
<a href="...">
<img .../>
<h3>Block title</h3>
<p>Block description</p>
</a>
I'll try to fix it, unfortunately, some opinions are necessary by default here, but at least you should always be able to suppress them by extending components.
Related Questions and Answers
Continue research with similar issue discussions.
Issue #6685
BUG: Custom component styles are not applied after deletion and re-addition
GrapesJS version [x] I confirm to use the latest version of GrapesJS What browser are you using? Chrome v143.0.7499.193 Reproducible demo l...
Issue #6590
BUG: Able to access/delete/drag the locked components in layermanager
GrapesJS version [x] I confirm to use the latest version of GrapesJS What browser are you using? chrome Reproducible demo link https://code...
Issue #5888
BUG: Cannot edit component content even with editable property set to true
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome V124 Reproducible demo link https:/...
Issue #5729
BUG: editing/replacing the text inside of a link
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome v122 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.