Multiple Editable Columns with CodeMirror 6

I’m currently working on a PoC for an Obsidian Plugin, it using CodeMirror under the hood leads me here.

My north star goal is to provide a Layout experience similar to that of Confluence/Notion, where you’re able to create an N-column layout and each of the columns allows content entry.

Screen_Recording_2024-08-03_at_11.02.55 (1)

Now, I realise that CodeMirror inherently solves a very different task so it’ll involve a certain amount of hackery, especially since, as I understand, CM expects lines to follow each other, and to provide a clean experience with cursor and undo I’d have to handle a few cases, as touched on here.

My principal question is: what’s the best approach to take here?

My initial thoughts after a few hours with the docs and PoCs:

  1. If I want to try and extend it via CM’s more “intended” features I should be looking at Widgets and Decorators. Granted, it seems like I’ll run into a lot of issues keeping cursor at the same position between re-renders and it overall can be a challenging and likely dead-end approach.
  2. I can try and use some of the nested/linked editors logic, showcases in the Split View demo and manage the undo/redo state of these, merging the state with the main document. This could also potentially allow me to implement “synced blocks” from Notion/Confluence Excerpt functionality down the line.

Would be grateful for all & any direction, as I’m rather new to CM’s way of doing things and this particular usecase is certainly far off the beaten path.

1 Like

I had a very positive experience with just replacing decoration widgets (width:100%). One can make them mutable (they can change the content on the covered ranges using basic transactions) and provide a transaction filter or something similar so that if a cursor goes into the region of the widget, it will move the focus into the nested codemirror editor.

There is no need to rerender the nested editor, if you provide updateDom method to a widget

UPD: here is an example with even ~10 nested editor, which can perfectly work with all updates and mutations and cursor movements

3 Likes