Allow editing text nodes
Question
Issue: text nodes that do not have a parent are not editable. Text nodes that have a parent but also have a sibling (e.g. a span), are also not editable. Support for raw text nodes is necessary.
Example that doesn't work:
<div id="gjs">
<div class="glyphicon glyphicon-asterisk"></div> Try to edit me
</div>
Expected behavior is that the text node Try to edit me can be edited. Actual behavior is that it cannot be edited.
JSFiddle to reproduce: https://jsfiddle.net/szLp8h4n/107/
Answers (3)
// This is to fix text that isn't wrapped in a span to make the component editable
const updateLooseTextComponents = function(components: [any]) {
for (const component of components) {
if (component.type === 'textnode') {
component.type = 'text';
component.tagName = 'span';
}
if (component.components) {
updateLooseTextComponents(component.components);
}
}
};
updateLooseTextComponents(components);
const td = template.template_data as any;
td['gjs-components'] = JSON.stringify(components);
@artf <gjs-text-node> seems like a good solution!
Aware and agree, the question is just How?. Text nodes don't have contentEditable property, so probably we need to try to wrap them all inside <span>s (only in its View) and see how all is handled
Related Questions and Answers
Continue research with similar issue discussions.
Issue #1902
[QUESTIONS] Disable/change build-in components behavior
Hey, Trying to get GrapesJs work for a project I'm currently working on. But is there a way to disable the built-in components that convert...
Issue #3608
FEAT: Disable Dragging
What are you trying to add to GrapesJS? I have implemented an alternative text editing component (not based on RTE). I want people to be ab...
Issue #2210
Editing text in Safari doesn't work
When you open the demo page in Safari, you cannot edit the text.
Issue #890
[Question]: I cannot get the simple example working
I am not new to Javascript but when I try the example: I get a blank page. That is with adding the CSS and Javascript library. Any suggesti...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.
Browse free plugins →Premium plugins ship with support, regular updates, and production-ready features — save days of integration work.
Browse premium plugins →Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.