Problems when binding with codemirror6

[percy507]

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.

@percy507

At the start of the code block , press delete, the editor lost focus.

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.)

@percy507

In code editor, redo and undo action will make the cursor at wrong position.

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.

@percy507

use the history stack and keymap of codemirror

Don’t use.