Inserting text in an canvas element is not updated on the HTML content after saving it.

Hi @jvillena. Would you mind sharing some of your code please? I'm attempting to do the same thing but I just can't figure it out. I keep adding <span> tags as "placeholders" to insert the variable values, but they are always added to the front of the string and not at cursor position. Else if I do it another way, then the cursor keeps adding text into the span tag instead of behind it. In short I can't figure out how to insert the text at cursor position.

@artf You're right I updated the code only triggering on the event change in the component selected and then it was working fine.

I don't understand how did you change it to trigger on the event change in component select?

The issue is when saving the HTML content the changes are not reflected on it. I also have the same issue.

This is what I tried:

    rte.add('mergefield', {
        icon: '<b>{ # }</b>',
        name: 'merge-field',
        attributes: { title: 'Merge-field'},
        result: rte => {
            const anchor = rte.selection().anchorNode;
            const nextSibling = anchor && anchor.nextSibling;
            if (nextSibling && nextSibling.nodeName == 'span') {
                rte.exec('unlink');
            } else {
                var tag = '<span data-gjs-type="mergefield" data-gjs-editable="false" data-gjs-stylable="false" data-highlightable="1" readonly="true"> {{ merge-field }} </span>'; //class="gjs-mergefield"
                rte.insertHTML(tag);
            }
        }
    });
    domComps.addType('mergefield', {
        model: dModel.extend({
            toolbar: [{
                    attributes: { class: 'fa fa-arrows' },
                    //command: 'tlb-move',
            }],
            defaults: Object.assign({}, dModel.prototype.defaults, {
                'custom-name': "Merge field",
                tagName: 'span',
                class: 'merge-field',
                badgable: true,
                highlightable: true,
                editable: false,
                droppable: false,
                draggable: true,
                removable: true,
                traits: [{
                    label: "mergefield",
                    type: 'select',
                    name: 'value',
                    options: [
                      { value: 'user.firstname', name: "user.firstname" },
                      { value: 'user.lastname', name: "user.lastname" },
                      { value: 'company.name', name: "company.name" },
                      { value: 'company.business_regnr', name: "company.business_regnr1" },
                      { value: 'system.date', name: "system.date" },
                    ]
                }], 
                style: {
                    display: 'inline-block',
                    border: '1px dashed #455699',
                    'text-align': 'center',
                    'background-color': '#BDCDF4',
                    'padding': '3px',
                    'border-radius': '5px',
                    'color': 'black'
                },
            }),
        }, {
            toolbar: [{
                    attributes: { class: 'fa fa-arrows' },
                    command: 'tlb-move',
                }],
            isComponent(el) {
                if (el.tagName == 'SPAN' && el.dataset.mergefield == "1") {
                    return { type: 'mergefield' };
                }
            },
        }),
        view: dView.extend({
            events: {
                'click': function (e) { console.log("click"); },
                'keydown': function (e) {
                    if (e.key == 'Backspace') {
                        e.target.parentNode.removeChild(e.target);
                    }
                }
            },
        }),
    });

I've just solved. I had to render the DomComponents after applying the changes. The solution was:

             // First we apply the new text in the selection
              editor.getSelected().set('content', value.trim());
             // To update the HTML DOM we need to use render function.
              editorRTE.DomComponents.render();

No, with this editorRTE.DomComponents.render() you're triggering the render of all component, please read carefully about Components, by looking at stuff like this editorRTE.getSelected().view.$el[0].innerHTML = value I think you just didn't get how really components work