CodeMirror 6 code_block in ProseMirror focus bug

1

Hey Marijn,

I’m trying to implement a plugin which would replace the ProseMirror code_block with a CodeMirror instance, using CodeMirror 6. My starting point was the example in the ProseMirror examples section, I’m using a little bit different style though:

Then:

  • The editor loses focus after i propagate the changes to ProseMirror, and does not get it back, even though I’m calling .focus() on the CodeMirror instance.
  • As far as I understand CodeMirror should lose focus, but get it back after the setSelection method is called from ProseMirror. setSelection isn’t called here for some reason.

Related: I don’t think CM.refresh, updating, incomingChanges are necessary here. I’ve added updating it could be removed IMO.

Thanks for the help, CodeMirror 6 looks amazing, the typings are great and coming from ProseMirror it’s a very smooth switch!

2

Hey! Just bumping this too.

3

Hey Marijn, did some more investigation. After the CodeMirror transaction gets forwarded to ProseMirror then another transaction comes into ProseMirror which originates from the DOMObserver of PM, even though I set ignoreMutation to always return false. That transaction has a selection which points after the CodeMirror block.

Even if I discard that transaction in prosemirror ( by just not updating the editorView ) CodeMirror loses focus and I can’t get it back by calling focus() on the CodeMirror view ( I’ve tried some brutal hacks, for example I’ve created a button which calls focus() on the CodeMirror editor. If I click it by hand then it focuses, if I call click() it from code then it doesn’t get the focus back.

Do you have any pointers? I’ve linked the CodeMirror state/view for debugging, I didn’t see anything weird there.

We’re stranded here: using YJS the nodeviews are re-created all the time ( we insert a drag handler decoration which also triggers a re-draw ), and CM5 takes time to load, which causes a flicker. I’m out of ideas.

I’ve updated the codesandbox above so it has the stack traces if you want to check them out.

4

I try to bind codemirror6 with prosemirror two month ago. And I make some updates recently. Hope it can give you some hints.

Problems when binding with codemirror6

For your focus bug, add the update method of NodeView will fix it. But you still need to do some extra jobs in update method.

image
image2450×1378 339 KB

1 Like
5

I have no idea why I forgot to add that part there. Makes total sense. Thank you!

6

This looks very gnarly, and I don’t really expect to have time to look into it in the near future, so your best bet is probably to continue reducing and debugging it yourself.