Text content not always editable
Question
Hi @artf,
I've noticed that if I add a component that contains a combination of text and an <a> tag, the text is not editable like it normally is. If I replace the <a> tag with a <span>, then I can edit the text just fine. Here's something to illustrate what I mean (note the last 2 lines of code to toggle between a broken example and a working example): https://jsfiddle.net/wycrpkay/3/. This may be happening with tags other than <a>, but that's the only one I've noticed to be problematic so far.
It looks to me like the component is getting parsed as the default component type instead of a text component, but I cannot figure out why the presence of the <a> tag (and not other tags) would cause this to happen. I saw that ComponentText.js does not have an isComponent function, so I'm not quite understanding how that distinction is made. I'm going to keep looking into this, but would appreciate any thoughts you may have on why this would be happening.
Thanks!
EDIT: So I found ParserHtml.parseNode()...adding comp.type != 'link' to the if statement starting on line 183 seems to do what I want:
if(comp.type != 'text' && comp.type != 'textnode' && comp.type != 'link' && c.textTags.indexOf(comp.tagName) < 0 ){
I don't feel great about that change though. I feel like I want those checks to just see if all of the children are editable (comp.get("editable")) instead of all the text/textnode/link checks, but that doesn't seem possible here since we just have simple component objects (looks like it's just whatever is returned from the isComponent functions). Not sure what to do...
Answers (3)
Thanks Daniel, I agree with you and will take care of your suggestions. I just would like to point out, for the 4th case, that you can also indicate explicitly to the editor where is a text component
<div data-gjs-type="text">
Some textnode
<div>Text to edit</div>
<ul>...</ul>
</div>
Should be fixed https://github.com/artf/grapesjs/releases/tag/v0.12.50
I'm running into this too.
Related Questions and Answers
Continue research with similar issue discussions.
Issue #460
When the component's view modifies the HTML, text components are no longer editable
I'm trying to build a custom component that contains some lorem ipsum text in the content, for editing once it's on the canvas. But I also...
Issue #511
Cannot edit the content after update it via block manager API
Hello @artf sorry for my last issue, I must create a new issue, my problem is got error like this EDIT : sorry i just fixed my last issue w...
Issue #774
Mimic customRTE behavior when parsing content
Hi @artf, I'd like to replicate this behavior when calling editor.setComponents("<div>This is a text component. <span style='font-size: 20p...
Issue #1297
[QUESTION] Is Multiple trait possible to do editable img and <a> tag in the table component?
Hi Artur, I had forgot to say i am using latest version, i am sorry for that. I want to add a plugin for editable social media icons, image...
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.