feat(editor): Shiki syntax highlighting in the file editor (CodeMirror)
Bring the CodeMirror file editor up to the same rich highlighting as the Shiki
file view, so toggling edit <-> view is visually consistent. lezer collapses far
more tokens than TextMate (import/from/const are all "keyword"), so a theme
remap can't reach parity — instead, project real Shiki tokens onto decorations.
- Worker: add highlightTokens — tokenize with an arbitrary registered TextMate
theme and return per-line styled runs with offsets. The theme object ships to
the worker once per name; later calls send only the name.
- New shikiHighlight CodeMirror extension: a StateField of mark decorations
built from worker tokens. Re-tokenizes on a short idle (off the keystroke
path) and maps decorations through edits so colors persist while typing.
- flexokiTheme: add { syntaxColors: false } to keep only the editor UI theme,
so the lezer highlighter doesn't compete with the Shiki decorations.
- FilesView: enable Shiki highlighting (same language resolver as the file view
→ identical language) and drop lezer token colors when it's active. lezer
language stays on for indentation/folding/brackets.
This commit is contained in:
@@ -6,7 +6,13 @@ import { classHighlighter, tags as t } from '@lezer/highlight';
|
||||
|
||||
import type { Theme } from '@/types/theme';
|
||||
|
||||
export function createFlexokiCodeMirrorTheme(theme: Theme): Extension {
|
||||
export function createFlexokiCodeMirrorTheme(
|
||||
theme: Theme,
|
||||
// When syntax colors are provided elsewhere (e.g. the Shiki decoration
|
||||
// extension), pass `{ syntaxColors: false }` to keep only the editor UI theme
|
||||
// (gutters, selection, cursor) and avoid a competing token color source.
|
||||
options?: { syntaxColors?: boolean },
|
||||
): Extension {
|
||||
const isDark = theme.metadata.variant === 'dark';
|
||||
|
||||
const monoFont = theme.config?.fonts?.mono || 'monospace';
|
||||
@@ -554,6 +560,10 @@ export function createFlexokiCodeMirrorTheme(theme: Theme): Extension {
|
||||
},
|
||||
]);
|
||||
|
||||
if (options?.syntaxColors === false) {
|
||||
return [ui];
|
||||
}
|
||||
|
||||
return [
|
||||
ui,
|
||||
syntaxHighlighting(defaultHighlightStyle, { fallback: true }),
|
||||
|
||||
Reference in New Issue
Block a user