feat: improved config file handling in monaco

CLAUDE.md

@@ -135,9 +135,9 @@ src/
 ### Monaco Editor
 
 - Setup in `src/components/widgets/filesystem/setupMonaco.ts` (includes worker environment setup)
-- Monarch tokenizers for `gcode`, `klipper-config`, `log` languages (in `src/monaco/language/*.monarch.ts`)
-- Custom CodeLens providers (links to Klipper docs from config sections)
-- Document symbol provider for `klipper-config`; folding range provider for `klipper-config` and `gcode`
+- Monarch tokenizers for `gcode`, `klipper-config`, `moonraker-config`, `log` languages (in `src/monaco/language/*.monarch.ts`)
+- Custom CodeLens providers (links to Klipper/Moonraker docs from config sections)
+- CodeLens and document symbol providers for `klipper-config` and `moonraker-config`; folding range provider for `klipper-config`, `moonraker-config`, and `gcode`
 - Language providers run in dedicated Web Workers (`monacoCodeLensWorker`, `monacoDocumentSymbolsWorker`, `monacoFoldingRangesWorker`)
 
 ## Integration Points

docs/docs/features/file-editor.md

@@ -17,23 +17,23 @@ directly from your browser.
 
 ## Syntax highlighting
 
-Rich, TextMate grammar-based syntax highlighting is provided for the following
-file types:
-
-| File Type                                                 | Highlighted Elements                                                                                                                                                                             |
-|-----------------------------------------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
-| **Klipper config** (`.cfg`, `.conf`)                      | Section headers, keys and values, pin references, sensor and thermistor types, driver types, serial paths, booleans, numbers, and embedded G-code within macros including Jinja2 template blocks |
-| **G-code** (`.gcode`, `.g`, `.gc`, `.gco`, `.ufp`, `.nc`) | G/M/T commands, coordinates, feed rates, tool and offset registers, math functions, macro variables, and control keywords                                                                        |
-| **Log files** (`.log`)                                    | Log-level colorization (debug, info, warning, error, critical), timestamps, URLs, UUIDs, git SHAs, exception names, and stack traces                                                             |
-| **JSON**                                                  | Full validation and IntelliSense via a dedicated language worker                                                                                                                                 |
-| **CSS, SCSS, Less**                                       | Property completion, hover, and validation via a dedicated language worker                                                                                                                       |
-| **Markdown**                                              | Basic syntax highlighting                                                                                                                                                                        |
+Syntax highlighting is provided for the following file types:
+
+| File Type                                                 | Highlighted Elements                                                                                                                     |
+|-----------------------------------------------------------|------------------------------------------------------------------------------------------------------------------------------------------|
+| **Klipper config** (`.cfg`)                               | Section headers, key names, values, boolean constants, comments, and SAVE_CONFIG block markers                                           |
+| **Moonraker config** (`.conf`)                            | Section headers, key names, values, boolean constants, space-prefixed escaped comment sigils (`\#`, `\;`), inline comments, and comments |
+| **G-code** (`.gcode`, `.g`, `.gc`, `.gco`, `.ufp`, `.nc`) | G/M/T commands, coordinates, feed rates, tool and offset registers, math functions, macro variables, and control keywords                |
+| **Log files** (`.log`)                                    | Log-level colorization (debug, info, warning, error, critical), timestamps, URLs, UUIDs, git SHAs, exception names, and stack traces     |
+| **JSON**                                                  | Full validation and IntelliSense via a dedicated language worker                                                                         |
+| **CSS, SCSS, Less**                                       | Property completion, hover, and validation via a dedicated language worker                                                               |
+| **Markdown**                                              | Basic syntax highlighting                                                                                                                |
 
 ## Documentation links
 
-When editing Klipper config files, clickable **CodeLens** links appear above
-each `[section]` header — linking directly to the relevant documentation page
-for:
+When editing Klipper or Moonraker config files, clickable **CodeLens** links
+appear above each `[section]` header — linking directly to the relevant
+documentation page for:
 
 - [Klipper](https://www.klipper3d.org/Config_Reference.html)
 - [Kalico](https://docs.kalico.gg/Config_Reference.html)
@@ -47,7 +47,7 @@ being edited. This feature can be disabled in the editor settings.
 
 ## Outline and navigation
 
-Klipper config files provide a two-level document outline:
+Klipper and Moonraker config files provide a two-level document outline:
 
 - **Sections** — each `[section_name]` block
 - **Properties** — each `key: value` or `key = value` within a section
@@ -57,14 +57,19 @@ property, or browse the outline panel.
 
 ## Code folding
 
-Collapsible regions are supported for both Klipper config and G-code files.
+Collapsible regions are supported for Klipper config, Moonraker config, and
+G-code files.
 
-**Klipper config:**
+**Klipper and Moonraker config:**
 
 - Section blocks — collapse an entire `[section]` and its contents
 - Comment blocks — consecutive comment lines fold together
 - Named regions — `#region` / `#endregion` markers for custom foldable areas
 
+**Klipper config only:**
+
+- SAVE_CONFIG blocks — the auto-generated `#*# ...` section folds as a unit
+
 **G-code:**
 
 - Print layers — each `SET_PRINT_STATS_INFO ... CURRENT_LAYER=N` starts a

package.json

@@ -25,8 +25,7 @@
     "test": "npm run test:unit",
     "test:unit": "vitest --environment jsdom --config ./vitest.config.ts",
     "type-check": "vue-tsc --build --noEmit",
-    "circular-check": "skott --displayMode=file-tree --showCircularDependencies --no-trackTypeOnlyDependencies --tsconfig=./tsconfig.app.json",
-    "theme:convert": "cd tools; node convertTheme.mjs"
+    "circular-check": "skott --displayMode=file-tree --showCircularDependencies --no-trackTypeOnlyDependencies --tsconfig=./tsconfig.app.json"
   },
   "main": "index.js",
   "dependencies": {
@@ -93,7 +92,6 @@
     "husky": "^9.1.7",
     "jsdom": "^29.0.2",
     "mockdate": "^3.0.5",
-    "monaco-vscode-textmate-theme-converter": "^0.1.7",
     "neostandard": "^0.13.0",
     "rollup": "^4.60.2",
     "sass-embedded": "^1.99.0",

src/components/widgets/filesystem/monacoProviders.ts

@@ -91,7 +91,7 @@ abstract class MonacoProviderBase<T> {
   }
 
   protected _createCacheKey (model: monaco.editor.ITextModel): string {
-    return `${model.uri.toString()}@${model.getVersionId()}`
+    return `${model.uri.toString()}@${model.getVersionId()}@${model.getLanguageId()}`
   }
 }
 
@@ -100,7 +100,7 @@ export class MonacoDocumentSymbolProvider extends MonacoProviderBase<monaco.lang
     const cacheKey = this._createCacheKey(model)
 
     if (this._lastCacheKey !== cacheKey) {
-      const result = await this._workerWrapper<MonacoDocumentSymbolsWorkerResponseMessage>(MonacoDocumentSymbolsWorker, 'klipper-config', model.getValue(), token)
+      const result = await this._workerWrapper<MonacoDocumentSymbolsWorkerResponseMessage>(MonacoDocumentSymbolsWorker, model.getLanguageId(), model.getValue(), token)
 
       if (result == null) {
         return []
@@ -163,7 +163,7 @@ export class MonacoCodeLensProvider extends MonacoProviderBase<monaco.languages.
         ? this._klippyApp.name
         : service
 
-      const result = await this._workerWrapper<MonacoCodeLensWorkerResponseMessage>(MonacoCodeLensWorker, 'klipper-config', model.getValue(), token)
+      const result = await this._workerWrapper<MonacoCodeLensWorkerResponseMessage>(MonacoCodeLensWorker, model.getLanguageId(), model.getValue(), token)
 
       if (result == null) {
         return []

src/components/widgets/filesystem/setupMonaco.ts

@@ -18,13 +18,12 @@ import CssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker'
 import * as monaco from 'monaco-editor/esm/vs/editor/editor.api'
 
 import getVueApp from '@/util/get-vue-app'
-import themeDark from '@/monaco/theme/editor.dark.theme.json'
-import themeLight from '@/monaco/theme/editor.light.theme.json'
 
 import type { KlippyApp } from '@/store/printer/types'
 
 import gcodeMonarchLanguage from '@/monaco/language/gcode.monarch'
-import klipperConfigMonarchLanguage from '@/monaco/language/klipper-config.monarch'
+import * as klipperConfigMonarchLanguage from '@/monaco/language/klipper-config.monarch'
+import * as moonrakerConfigMonarchLanguage from '@/monaco/language/moonraker-config.monarch'
 import logMonarchLanguage from '@/monaco/language/log.monarch'
 import { type CodeLensSupportedService, MonacoCodeLensProvider, MonacoDocumentSymbolProvider, MonacoFoldingRangeProvider } from './monacoProviders'
 
@@ -45,22 +44,21 @@ self.MonacoEnvironment = {
 
 async function setupMonaco () {
   monaco.languages.register({ id: 'gcode', extensions: ['gcode', 'g', 'gc', 'gco', 'ufp', 'nc'] })
-  monaco.languages.register({ id: 'klipper-config', extensions: ['cfg', 'conf'] })
+  monaco.languages.register({ id: 'klipper-config', extensions: ['cfg'] })
+  monaco.languages.register({ id: 'moonraker-config', extensions: ['conf'] })
   monaco.languages.register({ id: 'log', extensions: ['log'] })
 
   monaco.languages.setLanguageConfiguration('gcode', {
     comments: {
       lineComment: ';'
     }
   })
-  monaco.languages.setLanguageConfiguration('klipper-config', {
-    comments: {
-      lineComment: '#'
-    }
-  })
+  monaco.languages.setLanguageConfiguration('klipper-config', klipperConfigMonarchLanguage.conf)
+  monaco.languages.setLanguageConfiguration('moonraker-config', moonrakerConfigMonarchLanguage.conf)
 
   monaco.languages.setMonarchTokensProvider('gcode', gcodeMonarchLanguage)
-  monaco.languages.setMonarchTokensProvider('klipper-config', klipperConfigMonarchLanguage)
+  monaco.languages.setMonarchTokensProvider('klipper-config', klipperConfigMonarchLanguage.language)
+  monaco.languages.setMonarchTokensProvider('moonraker-config', moonrakerConfigMonarchLanguage.language)
   monaco.languages.setMonarchTokensProvider('log', logMonarchLanguage)
 
   const app = getVueApp()
@@ -77,14 +75,44 @@ async function setupMonaco () {
     window.open(url)
   })
 
-  monaco.languages.registerDocumentSymbolProvider('klipper-config', new MonacoDocumentSymbolProvider())
-
-  monaco.languages.registerCodeLensProvider('klipper-config', new MonacoCodeLensProvider())
-
-  monaco.languages.registerFoldingRangeProvider(['klipper-config', 'gcode'], new MonacoFoldingRangeProvider())
-
-  monaco.editor.defineTheme('dark-converted', themeDark as monaco.editor.IStandaloneThemeData)
-  monaco.editor.defineTheme('light-converted', themeLight as monaco.editor.IStandaloneThemeData)
+  monaco.languages.registerDocumentSymbolProvider(['klipper-config', 'moonraker-config'], new MonacoDocumentSymbolProvider())
+
+  monaco.languages.registerCodeLensProvider(['klipper-config', 'moonraker-config'], new MonacoCodeLensProvider())
+
+  monaco.languages.registerFoldingRangeProvider(['klipper-config', 'moonraker-config', 'gcode'], new MonacoFoldingRangeProvider())
+
+  monaco.editor.defineTheme('light-converted', {
+    base: 'vs',
+    inherit: true,
+    rules: [
+      { token: 'comment.control.save-config', foreground: '7b2fbe', fontStyle: 'italic' },
+      { token: 'entity.name.section', foreground: '267f99', fontStyle: 'bold' },
+      { token: 'variable.name', foreground: '0070c1' },
+      { token: 'delimiter', foreground: '666666' },
+      { token: 'constant.language', foreground: '0000ff' },
+      { token: 'string', foreground: 'a31515' },
+      { token: 'comment', foreground: '008000', fontStyle: 'italic' },
+    ],
+    colors: {},
+  })
+  monaco.editor.defineTheme('dark-converted', {
+    base: 'vs-dark',
+    inherit: true,
+    rules: [
+      { token: 'comment.control.save-config', foreground: 'c586c0', fontStyle: 'italic' },
+      { token: 'entity.name.section', foreground: '4ec9b0', fontStyle: 'bold' },
+      { token: 'variable.name', foreground: '9cdcfe' },
+      { token: 'delimiter', foreground: '808080' },
+      { token: 'constant.language', foreground: '569cd6' },
+      { token: 'string', foreground: 'ce9178' },
+      { token: 'comment', foreground: '6a9955', fontStyle: 'italic' },
+    ],
+    colors: {
+      'editor.background': '#28282b',
+      'editor.lineHighlightBackground': '#3a3a3e',
+      'minimap.background': '#28282b'
+    },
+  })
 
   return monaco
 }