Inserting content through an extension causes a duplication issue. about draft-js

[grzeczko]

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.

[hellendag]

Making changes to the DOM in this way may break React reconciliation, which can put the component into an uncertain state. Note that this can happen with any extension that modifies DOM rendered by a React component, not just the Draft editor.

What is the nature of your extension? Perhaps there is a way to make this work.

[JohnCoates]

Thanks for the reply @hellendag!

It's an open emoji extension. We just launched last week: http://emojione.com/chrome/
We'd love to make this work somehow! Is there a sanctioned method for inputting programmatically?

[hellendag]

Only if you have access to the EditorState, which I think it's safe to say your extension won't. :)

Are you always inserting characters? Or arbitrary HTML?

[hellendag]

If you're able to access the clipboard within your extension and are just pasting plaintext emoji characters, then you might be able to use document.execCommand('paste').

[JohnCoates]

That's a good solution, but because the code run as a content script, it unfortunately doesn't have access to paste unless it's triggered by a user action. Since the action happens in the panel which is in the extension's sandbox, the user action can't be passed to the content script.

I've found that this code works well:

var inputEvent = document.createEvent('TextEvent');
inputEvent.initTextEvent('textInput', true, true, window, text);

Still having an issue with the caret not moving forward after the first insertion though.

[hellendag]

Oh, that's an interesting approach. Is that text event cancelable?

[grzeczko]

Hi @JohnCoates,
I'm having exactly the same issue! I'm writing a Firefox extension to add Polish characters to any text field using keyboard shortcuts. It's working for all text fields, except for Facebook. I'm getting the same issue as you are describing. I've done lots of research and it's hard to find a solution. Did you find a fix yet for this issue? I'm still working on it, so if you haven't yet, I'll post a solution as soon as I figure it out.

Thanks,
Gregory

[grzeczko]

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!

[tylercraft]

Looks like a workaround was found, so I'm going to close this out.