What I'm trying to do is edit some text on Reddit.com using browser console. I'm creating an extension that appends some text to the comment. Reddit uses Draft.js as its text editor. When I try to make some changes using DOM, the moment the editor detects any changes from the keyboard, it reverts to its previous state.
Draft.js allows string manipulation using its methods, but they're not available to me on the console. And I don't want to make this thing too complex. My code is like this:
const textEditor = document.querySelector('.DraftEditor-root')
const text = textEditor.querySelector('span')
text.textContent = '\n\nSome other text'
Now if I make any changes to the text editor, such as backspacing, or pressing any key. It'll revert everything to its previous state. I spent hours reading the documentation and turns out, I'll have to create a new EditorState
and replace the previous one with it. Not sure, how to replicate this in simple ways.
I tried basic string manipulation. But like I said, the moment I try to even touch the editor again, I lose the changes instantly.
I also installed React, and Draft.js on my machine. Read the documentation, and I can manually set the state of editorState
to get the desired result. But it's a bit too complex for a simple extension I'm trying to create.