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: optimistic-hoover-5uuy2 - CodeSandbox

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


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

Same link: optimistic-hoover-5uuy2 - CodeSandbox

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.){
  changes: { from: change.from, 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.