Problems when binding with codemirror6

Hi, marijn:

Thanks for all your great projects, especially prosemirror and codemirror.:clap:

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.

delete-lost-focus


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

cursor-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… :disappointed:

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

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.