Inserting text with execCommand causes a duplication issue

Question

I'm working on a Firefox extension that inserts Polish characters to any text field using keyboard shortcuts. It's working for all text fields, except for Facebook, Draft.js, and any React contentEditable DIV.

Steps to reproduce:

1. Load http://facebook.github.io/draft-js/
2. Open Chrome Dev Tools
3. Select the Draft.js input box so that the input caret is present
4. execute document.execCommand("insertHTML", false, "X"); in the dev tools console

Result expected: X is added to the input box

Actual result: X is added to the input box twice. You're able to delete one of the instances, but the other one is undeletable but is selectable.

Note: Once at least one character has been typed into the Draft.js input the command works as expected.

Answer 1

I figured it out. Before you execute document.execCommand("insertHTML", false, "X");, check to see if the length of <span data-text="true"></span> is 0. If it is, just run document.execCommand("undo", false); following the insertHTML execCommand, and Voila! it works!

Here's the code:

if (document.querySelectorAll('span[data-text="true"]').length === 0) {
    document.execCommand("insertHTML", false, "X");
    document.execCommand("undo", false);
} else {
    document.execCommand("insertHTML", false, "X");
}

It will check to see if you have entered the first character. If you did, it'll do the undo execCommand and remove the extra X. The else will just insertHTML since it won't insert any extras once characters have been entered.