0

I'm looking to mash up Chrome Extension's ability to inject scripts with Draft.js's ability to add content to the editor.

Would it be possible to inject a script like this into a React/Draft.js page, pass it a string (from the Chrome Extension), and have the script update the page?

Many thanks for any thoughts/guidance...

11teenth
  • 1,853
  • 1
  • 15
  • 28
  • Not a good idea to interact with the DOM since React has Shadow DOM and it could interfere – Sergey Aug 14 '18 at 16:12
  • Can you 'talk' to the shadow DOM? – 11teenth Aug 14 '18 at 16:16
  • Any `contenteditable` element is able to accept document.execCommand('insertText', false, 'some text') when it's focused, which works in Chrome at least. – wOxxOm Aug 14 '18 at 16:53
  • Thanks for taking a look...execCommand can make text appear, but it the React state is not updated so the page throws an error when you keep typing... Need to somehow trigger an event through an injected script...to make React think the text was typed into the editor not added programmatically. – 11teenth Aug 14 '18 at 17:39
  • Apparently the editor performs an additional check like maybe keydown event (you can investigate it in devtools). In the worst case you'll have to send synthetic keyboard events for every character, for which an existing library may already be out there. – wOxxOm Aug 16 '18 at 05:12
  • The only way you can get anything into the editor is by either simulating keyboard events or by adding it through the Draft.js API. Manipulating the DOM will *not* work. – mzedeler Sep 12 '18 at 19:26
  • I ran into the same problem. I dug through the issue page on the git repo and found a couple of issues related. The only workaround that works is dispatching a clipboard paste event, but of course that only works with plaintext. https://github.com/facebook/draft-js/issues/616#issuecomment-426047799 – qwerty Mar 10 '19 at 19:26

0 Answers0