Issue #1013Opened April 7, 2018by tommedema5 reactions

[Feature] 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)

mipierceFebruary 4, 20213 reactions
// 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);
tommedemaApril 15, 20182 reactions

@artf <gjs-text-node> seems like a good solution!

artfApril 9, 20180 reactions

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.

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...

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.