Hooking into other content-editables

I am looking for creating a browser extension that checks for grammar in real-time (similar to Grammarly extension). That requires to draw rectangles on a virtual layer and keeping them up-to-date, which is basically handled in vanilla JS. However, when it comes to creating steps, I would like to use Prosemirror’s transform logic and send to the websocket server only new accumulated steps. Is it possible not to touch any client’s DOM and simulate EditorView?

You could create a view and not add it to the DOM. But it’s probably more practical to leave out the view and just work with an editor state if you don’t want to display the editor.

Hm, I didn’t quite understand. Let’s assume the user wants to write a comment in some website, they focus on some [contenteditable] div and start typing. What I need is not to manipulate the source website’s DOM; moreover, I must capture InputEvents from the client editable as if it was a prosemirror view. Creating a prosemirror view with null didn’t yield any result. Apparently, I have to pass somehow the events from non-prosemirror editable to my prosemirror view. I tried to use dispatchEvent and pass InputEvent, seems like it is used differently.

I thought about creating EditorState and comparing old and new docs using recreate-steps library. But I wonder if there are any native solutions.

No, attaching ProseMirror to a bit of DOM without being allowed to update that DOM really doesn’t sound like something that is viable.

Okay. I had to make sure it’s not viable to avoid reinventing the wheel. Thanks for answers, it was very helpful)