Skip to content

Split View

A split editor shows the same document in two side-by-side panes. Each pane is a KodeMirror composable sharing the same EditorSession.

Synchronizing two editors

The demo creates two separate editor sessions (with different themes) and uses a syncDispatch callback to forward changes between them via an annotation guard:

        fun syncDispatch(tr: Transaction, otherIndex: Int) {
            val other = sessions[otherIndex] ?: return
            if (!tr.changes.empty && tr.annotation(syncAnnotation) == null) {
                val annotations = buildList {
                    add(syncAnnotation.of(true))
                    tr.annotation(Transaction.userEvent)?.let {
                        add(Transaction.userEvent.of(it))
                    }
                }
                other.dispatch(
                    TransactionSpec(
                        changes = ChangeSpec.Set(tr.changes),
                        annotations = annotations
                    )
                )
            }
        }

Each editor registers this callback so that edits in one pane are replicated to the other, while the syncAnnotation prevents infinite dispatch loops.

Note

For true shared-document editing with cursor awareness, the :collab module is a better fit. The sync-dispatch pattern shown here is simpler but does not handle concurrent edits from multiple users.

Based on the CodeMirror Split View example.