0

I'm building a Chrome extension that corrects the users' typings. Upon correction, the corrected word is changed in the input field. The code currently works on textareas, and contenteditables, but I'm facing issues with Draft.js, like Facebook's main post field "What's on your mind": the changed part is reverted when the user sets back the focus on the input field.

Running the following snippet in any page with a Draft.js editor will change the text of the first line, and then set back focus. When that happens, Draft reverts the changed content.

document.querySelector('[data-text=true]').innerHTML='replacement';
setTimeout(function(){
  document.querySelector('[contenteditable=true]').focus();
},1000);

JsFiddle Example: https://jsfiddle.net/m6z0xn4r/161/

I would like to find a solution where the changed text would stay there after focus is set back on the input field.

I'm looking for a non-intrusive way to make the text stay as edited. I tried triggering events on the textfield, but nothing worked. I sense that using javascript textselection / range manipulation might be a good way, but no luck so far with that either.

Any help is appreciated!

Mihaly KR
  • 2,363
  • 2
  • 19
  • 20
  • `draftjs` use `React`. So the DOM is a reflection of the React props and state. You can not change the DOM directly, or React will overwrite it when doing vDOM patching. I don't know a way to access the React internal state from outside. Maybe you can refer the React debug addon, who can access all React component instances. – Jiang YD Feb 23 '17 at 02:53
  • Thanks @JiangYD, I tried to look for ways to access React contents, but I didn't find anything reliable. Cut the gordian knot by triggering "paste" event on the thing. Thanks for your input! – Mihaly KR Feb 23 '17 at 14:25
  • Look like Paste event is not the answer. When focus is set back on the field, the text is still reverted. – Mihaly KR Mar 07 '17 at 13:21
  • I know `draftjs` will handle `onPaste` event and change the state from clipboard. So triggering a 'paste' should work, if your 'paste' can trigger `onPaste` DOM event and prepare the text in the clipboard before. – Jiang YD Mar 08 '17 at 02:16

0 Answers0