Issue #576✓ SolvedOpened November 28, 2017by ryandeba5 reactions

Text content not always editable

Quick answerby artf3

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

Read full answer below ↓

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)

👍 Most helpfulartfDecember 1, 2017

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>
duskhackerNovember 28, 2017

I'm running into this too.

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.