Hi, marijn:
Thanks for all your great projects, especially prosemirror
and codemirror
.
I am trying to bind codemirror6 to prosemirror and I’ve had some complicated problems!
Refer to your example which use the old version of codemirror, I made a demo for codemirror6.
demo link: https://codesandbox.io/s/optimistic-hoover-5uuy2?file=/src/CodemirrorView.js
Then let me explain problems!
Case one: without using the history stack and keymap of codemirror
- At the start of the code block , press delete, the editor lost focus.
- In code editor,
redo
and undo
action will make the cursor at wrong position.
Case two: use the history stack and keymap of codemirror
-
Delete at code start place also make outer editor lost focus.
-
When undo
or redo
, outer editor history lost…
By the way, in the official codemirror example, when clear all content of the code editor, then press delete, the code block can not delete.I think it’s bad for user experience.
Ah, come back to fill the holes.
Same link: https://codesandbox.io/s/optimistic-hoover-5uuy2?file=/src/CodemirrorView.js
Welcome to test it.
If you find a bug or have some good ideas to improve the interaction, welcome to share it.
Some points when I try to bind codemirror6 with prosemirror.
- Don’t use history stack of codemirror. So we can’t directly use
@codemirror/basic-setup
.
- When the content or selection of codemirror change, synchronize them to prosemirror. Check the
forwardSelection
and handleValueChange
function.
- When the codemirror lose focus, reset its selection to zero position.
- When execute
redo
or undo
, the changes will synchronize to codemirror through the update
method of CodemirrorView.
For this problem, we use a custom logic for press Backspace key. My logic is: set the codemirror node to paragraph node, then focus the view of prosemirror. (Check the backspace
method.)
Fixed by adding selection data to the changes.(Check the update
method.)
this.cm.dispatch({
changes: { from: change.from, to: change.to, insert: change.text },
// add selection
selection: { anchor: change.from + change.text.length }
});
But there are some limits. eg: The multiple selection can’t recover by undo
action, because we use the history stack of prosemirror.
Don’t use.