Transfer ProseMirror selection to CodeMirror

1

Hello,

I’m trying to build a source code editor for ProseMirror. One requirement is that when the user selects some text in ProseMirror and then opens CodeMirror (in a separate modal), the selection is retained. I also need to do the reverse.

The best solution I have found so far is to grab the $from and $to positions from ProseMirror and create an HTML fragment that I can indexOf in the CodeMirror. However, it’s flaky as it doesn’t always work, for example if the user selects only part of the text in a node, the fragment created will be of valid HTML, which means the HTML code produced in the fragment won’t be present in the actual source code.

For example if the original code is: <p>Hello how are you</p> The selected text is: how are you</p> The fragment will end up being <p>how are you</p>

Which obviously won’t match when I’m going to search for it in the original source code.

And I haven’t tackled yet the other way around, which I’m kinda dreading now.

Is there any official doc or anyone who has solved this so I can have a look at how to do it?

Thank you

2

You didn’t mention in which format CodeMirror shows the document. Markdown? HTML source? Plain text?

In any case, I think the only way to really tackle this is to write a function that can take a position in the ProseMirror document and compute the offset into the text document that it corresponds to. For complicated encodings like Markdown this can get pretty complicated.

1 Like
3

Apologies, it’s HTML.