CodeMirror 6 Editor & Syntax Rules
Relevant source files
The following files were used as context for generating this wiki page:
The CodeMirror 6 editor provides a high-performance text editing interface within the Zephyr desktop application. It manages YAML and JavaScript configurations, specifically supporting the Prism Domain Specific Language (DSL) used for Mihomo rule patches. The system integrates syntax highlighting, autocompletion, and custom themes to ensure a seamless editing experience for proxy rules and scripts.
Sources: README_en.md:143-143, apps/desktop/src/ui/editor/prism-editor.js:1-8
Core Architecture
The editor architecture relies on a pre-configured factory that generates EditorView instances. These instances utilize a bundle of CodeMirror 6 modules, including state management, view components, and language-specific extensions. The application uses a central entry point to export necessary components from @codemirror packages, which are then bundled for use in the frontend.
Sources: apps/desktop/src/ui/editor/cm6-entry.js:1-12, apps/desktop/src/ui/editor/prism-editor.js:10-27
Editor Initialization Flow
When the application requires an editor (e.g., in the Rule Library), it calls the createEditor factory. The factory assembles a list of extensions based on the requested language and whether Prism DSL support is needed.
Editor Configuration & Customization
The createEditor function accepts a CreateEditorOptions object to define the editor's behavior and appearance.
| Option | Type | Description |
|---|---|---|
parent | HTMLElement | The DOM element where the editor is mounted. |
content | string | The initial text content of the document. |
language | 'yaml' | 'javascript' | The language mode for syntax rules. |
prismDsl | boolean | Enables Prism DSL highlighting and autocompletion (YAML only). |
readOnly | boolean | Sets the editor to a non-editable state. |
onChange | function | Callback triggered when the document content changes. |
lineHeight | number | Optional custom line height in pixels. |
Sources: apps/desktop/src/ui/editor/prism-editor.js:115-126
Zephyr Theme Integration
The editor uses a custom theme that integrates with the application's CSS variables. It supports both light and dark modes, utilizing backdrop-filter for blur effects in autocomplete tooltips and SF Mono as the primary font family.
- Syntax Colors: Keywords in Prism DSL use
var(--accent-primary), while meta-information usesvar(--text-secondary). - UI Components: Tooltips for autocompletion feature a
0.75remborder radius and a shadow effect. - Gutters: Line numbers and fold gutters are transparent with colors derived from
var(--text-muted).
Sources: apps/desktop/src/ui/editor/prism-editor.js:34-97
Prism DSL & Language Support
The editor provides specialized support for the Prism Engine's declarative rule patches. This includes highlighting specific keywords and offering smart completion for Mihomo rule types.
Extension Loading Logic
- Standard Extensions: Always includes
lineNumbers(),bracketMatching(), andhighlightActiveLine(). - YAML Mode: Applied for
.prism.yamlfiles. IfprismDslis active, it injects theprismHighlightPlugin. - JavaScript Mode: Applied for script sandbox editing, including basic JS autocompletion.
- Update Listeners: If an
onChangecallback is provided, the editor adds aViewUpdatelistener to monitordocChangedevents.
Sources: apps/desktop/src/ui/editor/prism-editor.js:141-177
Rule Library Integration
The Rule Library uses the editor to allow users to modify .prism.yaml files. Users can toggle between a visual editor and the CodeMirror text editor.
Build and Implementation Details
The CodeMirror 6 implementation is delivered as a minified bundle (cm6.bundle.js). This bundle is generated using esbuild from the cm6-entry.js source file.
- Bundle Command:
esbuild src/ui/editor/cm6-entry.js --bundle --format=esm --outfile=src/cm6.bundle.js --minify - Type Definitions: The project includes
cm6.bundle.d.tsto provide TypeScript-compatible declarations for the bundled classes likeEditorView,EditorState, andDecorationSet.
Sources: apps/desktop/package.json:16-16, apps/desktop/src/cm6.bundle.d.ts:7-45, apps/desktop/src/ui/editor/cm6-entry.js:1-12
Summary
The CodeMirror 6 editor & syntax rules module provides a specialized environment for managing Zephyr's proxy configurations. By combining standard language support for YAML and JavaScript with custom Prism DSL extensions, the system enables precise control over Mihomo rule sets while maintaining visual consistency with the application's design tokens.