Problems when binding with codemirror6

2

Ah, come back to fill the holes.:dog:

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.:clap:

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.

2 Likes