feat(editor): CodeMirror live-cursor description editor (ADR 0011, 2/2)#74
Merged
Conversation
Completes live cursors. With NEXT_PUBLIC_FEATURE_LIVE_CURSORS="true"
the description field becomes a CRDT-aware CodeMirror 6 editor bound to
the same card Y.Text, rendering remote collaborators' carets +
selections via y-codemirror.next over the encrypted cursor channel
from part 1.
- description-editor.tsx: CodeMirror 6 + yCollab(yText, cursorAwareness)
+ markdown() + line wrapping + an MSK dark theme + a11y content
attributes (role=textbox, aria-multiline, aria-label). Spins up a
CardCursorProvider for the card and tears it down on unmount.
- card-drawer.tsx: renders <DescriptionEditor> when the flag is on,
else the existing textarea. Dynamically imported (ssr:false) so the
CodeMirror bundle never lands in the initial page load.
- Markdown-source model unchanged: the editor writes the same Y.Text
the drawer mirrors into `description`, so Save/PATCH/export/encryption
are all untouched.
- Deps: @codemirror/{state,view,commands,lang-markdown} +
y-codemirror.next.
Default off; falls back to the textarea. Requires a WS relay redeploy
from the part-1 version. Validated with `pnpm build` (bundles + dynamic
import OK); the testable transport logic was unit-tested in part 1.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Signed-off-by: Moritz Kohm <moritz.kohm@gmail.com>
Signed-off-by: Musiker15 <info@musiker15.de>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Part 2 of 2 — completes live cursors (ADR 0011). With
NEXT_PUBLIC_FEATURE_LIVE_CURSORS="true", the card description field becomes a CRDT-aware CodeMirror 6 editor rendering remote collaborators' carets + selections, consuming the encrypted cursor channel from #73.How it fits the existing model
The editor binds CodeMirror to the same card
Y.Textthe drawer already mirrors into itsdescriptionstate. So:Y.Textmutates → the drawer's existing observer updatesdescription→ Save / PATCH / export / encryption are all unchanged;yCollab(yText, cursorAwareness)renders remote carets in each peer's presence colour.Markdown-source model preserved — no rich-text migration, exactly as the ADR decided.
Changes
description-editor.tsx(new): CodeMirror 6 +yCollab+markdown()+ line-wrapping + an MSK dark theme + a11y content attributes (role=textbox,aria-multiline,aria-label). Creates aCardCursorProviderfor the card and destroys it on unmount (the shared Y.Doc / doc-sync provider are left alone — they're cached).card-drawer.tsx: renders<DescriptionEditor>when the flag is on, else the existing textarea. Dynamically imported (ssr:false) so the CodeMirror bundle never lands in the initial page load.@codemirror/{state,view,commands,lang-markdown}+y-codemirror.next.Validation
pnpm build✅ (CodeMirror + y-codemirror.next bundle; dynamic import resolves)pnpm typecheck+pnpm lintclean; full unit suite 171 greenTest plan
mskanban-ws.service(for the part-1awarenessrelay) + setNEXT_PUBLIC_FEATURE_LIVE_CURSORS="true"+ rebuild🤖 Generated with Claude Code