Feat/codemirror v6

.changeset/codemirror-v6-migration.md

@@ -0,0 +1,23 @@
+---
+"@matdata/yasqe": major
+"@matdata/yasr": major
+"@matdata/yasgui": major
+---
+
+Migrate the editor stack from CodeMirror 5 to CodeMirror 6.
+
+**@matdata/yasqe**
+
+- The query editor now runs on CodeMirror 6 (`@codemirror/state`, `@codemirror/view`, `@codemirror/language`, `@codemirror/autocomplete`, `@codemirror/search`, `@codemirror/commands`).
+- `Yasqe` no longer extends the CodeMirror class. It wraps an `EditorView` and exposes a CodeMirror 5–compatible facade (`getValue`, `setValue`, `getCursor`, `setCursor`, `getTokenAt`, `getDoc`, `markText`, `on('change' | 'cursorActivity' | ...)`, `addKeyMap`, ...). Code relying on CodeMirror 5 internals (`yasqe.display`, `CodeMirror.defineMode`, addons, `codemirror/theme/*.css`) must be updated.
+- The underlying `EditorView` is available for advanced integrations that want to use CodeMirror 6 extensions directly.
+- Syntax highlighting, error/warning gutter markers, PREFIX/brace folding, autocompletion popups (`.CodeMirror-hints`), formatting, comment toggling and all keyboard shortcuts keep their previous behaviour. Token CSS classes keep the CodeMirror 5 names (`cm-keyword`, `cm-variable-3`, ...), and the editor root still carries the `CodeMirror cm-s-<theme>` classes so existing theme stylesheets continue to apply.
+
+**@matdata/yasr**
+
+- The Response plugin renders raw responses with a read-only CodeMirror 6 view (`@codemirror/lang-json`, `@codemirror/lang-xml`, legacy Turtle mode) instead of CodeMirror 5.
+
+**@matdata/yasgui**
+
+- Adapted to the new editor API (Ctrl/Cmd-click IRI navigation, theme handling).
+- The editor theme picker now offers the bundled `default` and `github-dark` themes; the CodeMirror 5 theme catalogue (`material-palenight`, `dracula`, ...) is no longer shipped. Custom themes can be added by styling the `cm-s-<name>` class.

docs/developer-guide.md

@@ -244,7 +244,7 @@ YASGUI is built as a monorepo with four main packages, each serving a specific p
 
 #### @matdata/yasqe (SPARQL Query Editor)
 
-**Purpose**: Rich SPARQL query editor built on CodeMirror.
+**Purpose**: Rich SPARQL query editor built on CodeMirror 6.
 
 **Key Features:**
 - SPARQL syntax highlighting
@@ -257,12 +257,29 @@ YASGUI is built as a monorepo with four main packages, each serving a specific p
 - Keyboard shortcuts
 
 **Core Components:**
-- CodeMirror editor with SPARQL mode
-- SPARQL tokenizer/grammar
-- Autocomplete system (extensible)
+- CodeMirror 6 `EditorView` wrapped by a CodeMirror 5-compatible facade (`packages/yasqe/src/editor/`)
+- SPARQL tokenizer/grammar exposed as a `StreamLanguage` (`packages/yasqe/grammar/tokenizer.ts`)
+- Autocomplete system (extensible, bridged to `@codemirror/autocomplete`)
 - HTTP request handler
 - Prefix utilities
 
+**Editor architecture (CodeMirror 6):**
+
+`Yasqe` no longer extends the CodeMirror class. It owns a CodeMirror 6 `EditorView` and exposes the familiar
+CodeMirror 5-style API (`getValue`, `setValue`, `getCursor`, `setCursor`, `getTokenAt`, `getDoc`, `markText`,
+`on('change'|'cursorActivity'|...)`, `addKeyMap`, etc.) through the `EditorFacade`/`DocFacade` classes. The
+`editor/` folder contains the CM6 building blocks:
+
+- `facade.ts` / `doc.ts` – CM5-compatible editor and document API on top of `EditorView`/`EditorState`
+- `language.ts` / `tokenizerRunner.ts` – `StreamLanguage` for the SPARQL grammar emitting `cm-<style>` classes, plus `getTokenAt` emulation
+- `autocompletion.ts` – bridges Yasqe completers (`HintFn`) to `@codemirror/autocomplete`, rendering into a `.CodeMirror-hints` list
+- `gutters.ts` – line-number gutter and error/warning marker gutter
+- `folding.ts` – brace and PREFIX-block folding via a `foldService`
+- `keymap.ts` – converts CM5 key names (`Ctrl-Enter`, `Shift-Ctrl-K`, ...) to CM6 keymaps
+
+Themes are applied as `CodeMirror cm-s-<theme>` classes on the editor root, so existing `.cm-s-*` stylesheets and
+`.CodeMirror`-based selectors keep working. Token classes follow the CM5 naming (`cm-keyword`, `cm-variable-3`, ...).
+
 #### @matdata/yasr (SPARQL Results Viewer)
 
 **Purpose**: Flexible results visualization with plugin system.
@@ -782,7 +799,7 @@ SELECT ?label WHERE {
   ?s rdfs:label ?label
 } LIMIT 10`,
 
-  theme: 'material-palenight',
+  theme: 'github-dark',
   lineNumbers: true,
   lineWrapping: false,
   showQueryButton: true,
@@ -2483,7 +2500,7 @@ yasqe.on('resize', (instance, newSize) => {
   console.log('Editor resized to:', newSize);
 });
 
-// CodeMirror events (yasqe extends CodeMirror)
+// Editor events (Yasqe wraps a CodeMirror 6 EditorView and re-emits CodeMirror 5-style events)
 yasqe.on('change', (instance, changeObj) => {
   console.log('Editor content changed');
 });
@@ -4090,7 +4107,7 @@ Releases are managed using Changesets:
 - **Issue Tracker**: [https://github.com/Matdata-eu/Yasgui/issues](https://github.com/Matdata-eu/Yasgui/issues)
 - **User Guide**: See `docs/user-guide.md`
 - **SPARQL Specification**: [https://www.w3.org/TR/sparql11-query/](https://www.w3.org/TR/sparql11-query/)
-- **CodeMirror Documentation**: [https://codemirror.net/5/](https://codemirror.net/5/)
+- **CodeMirror 6 Documentation**: [https://codemirror.net/docs/](https://codemirror.net/docs/)
 - **Table Plugin**: [https://github.com/Matdata-eu/yasgui-table-plugin](https://github.com/Matdata-eu/yasgui-table-plugin)
 - **Graph Plugin**: [https://github.com/Matdata-eu/yasgui-graph-plugin](https://github.com/Matdata-eu/yasgui-graph-plugin)
 - **Geo Plugin**: [https://github.com/Matdata-eu/yasgui-geo-plugin](https://github.com/Matdata-eu/yasgui-geo-plugin)

docs/user-guide.md

@@ -367,19 +367,12 @@ You can customize the syntax highlighting theme separately for light and dark mo
 5. Click "Save" to apply your changes
 
 **Available Themes:**
-YASGUI supports 35+ CodeMirror themes including:
+The editor is built on CodeMirror 6 and ships with the following syntax highlighting themes:
 
+- **Default**: Light theme that follows the application's color variables
 - **GitHub Dark**: Custom theme matching GitHub's dark default colors
-- Material themes (Darker, Palenight, Ocean)
-- Dracula
-- Monokai
-- Solarized (Light/Dark)
-- Nord
-- Tomorrow Night
-- Zenburn
-- And many more...
 
-You can preview all available themes at [CodeMirror's theme demo page](https://codemirror.net/5/demo/theme.html).
+Both themes adapt automatically to the light/dark application theme through CSS custom properties. Additional themes can be added by styling the `cm-s-<name>` class on the editor (see the Developer Guide).
 
 Your theme preferences are stored separately for light and dark modes, so switching between app themes (light/dark) will automatically apply the appropriate editor theme.
 
@@ -798,7 +791,7 @@ Access comprehensive configuration options through the Settings modal.
 
 - Select CodeMirror theme for light mode
 - Select CodeMirror theme for dark mode
-- Test themes at [CodeMirror Theme Demo](https://codemirror.net/5/demo/theme.html)
+- Switch between the Default and GitHub Dark editor themes in the Settings → Editor tab
 - Includes custom "GitHub Dark" theme matching GitHub's dark default colors
 
 All settings are saved automatically to local storage.