Initialize editor from native contenteditable on click


I’m trying to determine whether it would be possible to use ProseMirror in the following situation. On a page, there could be dozens/hundreds of possible editor targets. Only one editor should be active at one time. I would like to render these targets as native contenteditable’s and only replace them with a ProseMirror editor on user interaction.

Importantly, if a user focuses the contenteditable with a click, the editor should initialize with the correct selection.

Is this possible to do with ProseMirror? Thank you!

I have a need for something similar, although I haven’t got to it yet.

Is it necessary that they be contenteditable already? My first idea is to just catch the click event and get the mouse x/y, replace the appropriate element with a PM instance, and use view.posAtCoords to figure out where the selection needs to be and then view.setSelection⁠. Should be possible to do all that without the user noticing anything janky.

The idea was to use contenteditable to be able to leverage window.getSelection() for selection initialization. But it sounds like that won’t be necessary. Thanks for the idea, I’ll try it out.

What might be tricker is if the user clicks and drags to select some text in the not-yet-editable element, but I think it’s solvable. Probably with getSelection as you suggest.

Good point!

I wonder whether all of this is necessary – maybe it would be ok to just have multiple (dozens/hundreds) PM instances on a page?