[Feature]: Allow editing text nodes

[tommedema]

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/

[artf]

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

[tommedema]

@artf could we just make the parent contentEditable, even though the text node has siblings? At the end of the day, any text node will have at least 1 parent (the body).

This seems preferred over adding spans because you don't know how such span would render since we do not have full control over its CSS (the user may be using a stylesheet that renders spans differently).

[artf]

could we just make the parent contentEditable

No, we can't do that, precisely due to the possibility to break/delete its siblings.

This seems preferred over adding spans because you don't know how such span would render since we do not have full control over its CSS (the user may be using a stylesheet that renders spans differently).

We can use a custom tag (eg. <gjs-text-node>) :)

[tommedema]

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

[neon12345]

There is a special case with text nodes as direct children of the wrapper. They are not properly removed with the component.

[mipierce]

// 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);

[JoshuaDeanEssium]

How is this still not fixed? If i do the above recommendation, the getHTML() doesnt have the changes in it. To replicate just double click into the element (you dont even need to edit it) then try to look at code/or do editor.toHTML... it will no longer show the content that is visually in the editor. I am using version 0.16.34 with newsletter plugin. As you can see in the image the content is no longer there. Since toHTML seems to use "content" and the content is converted into a component on edit it no longer gets all of the content. I have been trying to get this to work for 3 days please help. The code goes in as so:

content here

double clicked it... the toHTML shows in the export that it is not exported properly