I’m having some trouble managing selections when it comes to using CodeMirror as a
I have a demo of this integration mostly working here on Glitch.
But I have a problem in that selections in the CodeMirror
nodeView aren’t stable.
tl;dr: The problem is that immediately after
forwardSelectionruns, CodeMirror modifies the DOM which causes
prosemirror-viewto observe the DOM change and reset the selection to the first character before the
(Read on for details and demo).
Here’s a couple of screenshots to make it easier to visualize what we’re going for:
What actually happens:
This nearly works!
forwardSelection runs properly and “notifies” ProseMirror of the CodeMirror selection. We can see this if we use the excellent
If we investigate the stack trace of this second event, we get the following:
What the above stacktrace shows is that:
- CodeMirror is trying to show the new selection and in doing so…
- CodeMirror modifies the DOM causing…
- Prosemirror’s DOMObserver to notice the DOM change
prosemirror-viewdecides it needs to check if it should update the selection and calls
selectionFromDOMdoesn’t recognize the CodeMirror DOM selection and it resets the selection to the first character of the
It seems to me that my options are either to:
- Set the DOM selection in such a way that
prosemirror-viewwill recognize it in step 5
forwardSelectiononly after CodeMirror handled it’s own focus action and “settled”
But I’ll admit I’m not sure how to do either.
Any thoughts? Is this the right approach? I’d love any guidance you have.
You can find the code demo of full running Glitch code demo that shows the “bug” here.
This demo is a minimal merge of the “tooltip” and “CodeMirror” demos.