miztroh-zz/wysiwyg-e

Update editor value when inserting node through range0

Closed this issue · 9 comments

lastmjs commented

When I insert a node into the editor through the range API, the value property of the editor is not updated. This is causing me to have to go straight to the shadow root of the editor and grab the editable element and its innerHTML. This is fragile and it would be much preferred to keep the value property in sync:

For example:

const textEditor = this.shadowRoot.querySelector('#textEditor');
const newTextNode = document.createTextNode('some text to add');
textEditor.range0.insertNode(newTextNode);
console.log(textEditor.value); // this will not show the `some text to add`

const text = textEditor.shadowRoot.querySelector('#editable').innerHTML;
console.log(text); // this will show the `some text to add`
miztroh-zz commented

I can't seem to replicate this issue in the master branch or the 3.0-preview branch. Can you test this without wysiwyg-e being inside of shadow root and see if it makes a difference?

https://raw-dot-custom-elements.appspot.com/miztroh/wysiwyg-e/v2.0.6/wysiwyg-e/demo/index.html

miztroh-zz commented

It's only undefined if you've never made a selection within the editor's target node.

lastmjs commented

It works outside of the shadow root! Using this example: https://raw-dot-custom-elements.appspot.com/miztroh/wysiwyg-e/v2.0.6/wysiwyg-e/demo/index.html, everything checks out fine:

const textEditor = document.getElementById('wysiwygE')
const newTextNode = document.createTextNode('some text to add');
textEditor.range0.insertNode(newTextNode)
textEditor.value //some text to add is present
miztroh-zz commented

OK. Can you put together a JSBin or something showing your example inside of a shadow root? I'll be happy to troubleshoot that.

  • 👍1
miztroh-zz commented

@lastmjs: Any progress on putting together a JSBin for this issue?

lastmjs commented

I'll try to get something up today or tomorrow, it's not a blocking issue for me so it fell to the wayside

lastmjs commented

https://focused-jones-b157fb.netlify.com/

Click the Run Test button, and it will try to add some text to the editor and then print the editor's value to the console.

miztroh-zz commented

Due to the nature of the MutationObserver and the sanitize function, you'll need to add a small timeout before checking the value. Let me know if that doesn't fix it for you.

class TestElement extends Polymer.Element {
    static get is() { return 'test-element'; }

    runTest() {
        const textEditor = this.shadowRoot.getElementById('wysiwyg');
        const newTextNode = document.createTextNode('some text to add');
        textEditor.range0.insertNode(newTextNode);
        setTimeout(function () {console.log(textEditor.value)},10);
    }
}

window.customElements.define(TestElement.is, TestElement);
  • 👍1