Feat/codemirror v6 - #173
Conversation
Replace the CodeMirror 5 based editor with a CodeMirror 6 EditorView wrapped in a CM5-compatible facade (EditorFacade/DocFacade). The SPARQL tokenizer is exposed as a StreamLanguage, autocompletion is bridged to @codemirror/autocomplete, and gutters, folding, key bindings and themes are re-implemented as CM6 extensions while keeping the existing CSS class names. BREAKING CHANGE: Yasqe no longer extends the CodeMirror class; CodeMirror 5 addons, modes and theme stylesheets are no longer available.
Use a read-only CodeMirror 6 EditorView with lang-json, lang-xml and the legacy Turtle mode instead of CodeMirror 5.
Update Ctrl/Cmd-click IRI navigation and theme handling to the new editor API and reduce the editor theme picker to the bundled default and github-dark themes. BREAKING CHANGE: the CodeMirror 5 theme catalogue is no longer shipped.
…hlighting features
There was a problem hiding this comment.
🔵 Needs a closer look
It replaces the entire editor engine across all packages via a hand-written CM5-compatibility facade whose behavioral parity (events, tokenizer state caching, folding, keymaps, autocompletion) can only be responsibly validated by a human with the full test suite.
Pull request overview
This PR migrates the entire editor stack from CodeMirror 5 to CodeMirror 6, closing #96 (CM6 upgrade) and #111 (response scrollbar). Because YASQE/YASGUI were written against the CM5 API, the migration introduces a CM5-compatible facade (EditorFacade/DocFacade) that wraps a CM6 EditorView, plus dedicated CM6 building blocks (language/tokenizer bridge, folding, gutters, keymap, autocompletion). The YASR Response plugin and the YASGUI theming/settings are adapted to the CM6 DOM, and the old CM5 theme catalogue is replaced by a small set of bundled cm-s-* themes.
Changes:
- Replace CM5 with CM6 in
@matdata/yasqe:Yasqenow wraps anEditorViewbehind a CM5-style facade; SPARQL grammar exposed as aStreamLanguagewith a custom tokenizer runner; folding/gutters/keymap/autocompletion reimplemented for CM6. - Migrate the YASR Response plugin to a read-only CM6 view and add scrollbar/overflow handling (issue #111).
- Update YASGUI theming (
cm-s-*classes, neweditor-themes.scss), trim the theme picker, refresh docs, dependencies, lockfile, and the puppeteer autocompletion test selectors.
File summaries
| File | Description |
|---|---|
| packages/yasqe/src/index.ts | Yasqe now extends EditorFacade; rewires events, autocompletion, folding, syntax-error highlighting, and statics. |
| packages/yasqe/src/editor/facade.ts | New CM5-compatible editor facade over EditorView (options, gutters, commands, layout). |
| packages/yasqe/src/editor/doc.ts | CM5 Doc-style API on top of CM6 state. |
| packages/yasqe/src/editor/tokenizerRunner.ts | Runs the SPARQL stream tokenizer over CM6 docs with per-line state caching. |
| packages/yasqe/src/editor/language.ts | StreamLanguage/highlight-style bridging the SPARQL tokenizer to CM6 tags. |
| packages/yasqe/src/editor/folding.ts | Brace + PREFIX-block folding via a foldService (replaces prefixFold.ts/CM5 fold addons). |
| packages/yasqe/src/editor/gutters.ts | Error/warning marker gutters replacing CM5 setGutterMarker/clearGutter. |
| packages/yasqe/src/editor/keymap.ts | Converts CM5 key names/extraKeys to CM6 keymaps. |
| packages/yasqe/src/editor/autocompletion.ts | Bridges YASQE HintFn completers to @codemirror/autocomplete. |
| packages/yasqe/grammar/tokenizer.ts | Tokenizer becomes a CM6 StreamParser; adds copyState, TOKEN_STYLES, indent context. |
| packages/yasqe/src/autocompleters/index.ts, variables.ts | Completers return hint functions; variables collected via runMode instead of DOM. |
| packages/yasqe/src/CodeMirror.ts, prefixFold.ts | Deleted CM5 wrapper/fold helper. |
| packages/yasqe/src/defaults.ts, tooltip.ts, scss/* | Config/tooltip/styling updated for CM6 DOM. |
| packages/yasr/src/plugins/response/index.ts, index.scss, main.scss | Response plugin rendered with read-only CM6 view; scrollbar/overflow handling. |
| packages/yasgui/src/* (themes, editor-themes, github-dark, Tab, TabSettingsModal, index) | Theme classes, theme picker, and layout adapted to CM6. |
| packages/*/package.json, package-lock.json | Swap codemirror/@types/codemirror for @codemirror/* + @lezer/*. |
| docs/, .changeset/ | Documentation and changelog for the CM6 migration. |
| test/run.ts | Puppeteer autocompletion popup selectors updated for CM6 hints markup. |
Review details
- Files reviewed: 36/38 changed files
- Comments generated: 1
- Review effort level: Balanced
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
Should close #96 and #111