feat: adds Codelens and code folding support

src/components/widgets/filesystem/FileEditor.vue

@@ -19,6 +19,7 @@
 <script lang="ts">
 import { Vue, Component, Prop, Ref } from 'vue-property-decorator'
 import type * as Monaco from 'monaco-editor/esm/vs/editor/editor.api'
+import getReferenceSection from '@/util/get-reference-section'
 let monaco: typeof Monaco // dynamically imported
 
 @Component({})
@@ -69,6 +70,63 @@ export default class FileEditor extends Vue {
         './setupMonaco'
       )
       monaco = await promise
+
+      monaco.editor.registerCommand('fluidd_open_docs', (_, isMoonrakerConfig, hash) => {
+        if (isMoonrakerConfig) {
+          const url = this.$t('app.file_system.url.moonraker_config', { hash }).toString()
+          window.open(url)
+        } else {
+          const url = this.$t('app.file_system.url.klipper_config', { hash }).toString()
+          window.open(url)
+        }
+      })
+
+      monaco.languages.registerCodeLensProvider('klipper-config', {
+        provideCodeLenses: (model) => {
+          const isMoonrakerConfig = model.uri.path.toLowerCase().endsWith('/moonraker.conf')
+          const title = isMoonrakerConfig
+            ? this.$t('app.file_system.label.open_moonraker_config').toString()
+            : this.$t('app.file_system.label.open_klipper_config').toString()
+
+          const linesContent = model.getLinesContent()
+
+          const sections = linesContent.reduce((ranges, lineContent, index) => {
+            const section = /^\[([^\]]+)\]/.exec(lineContent)
+            if (section) {
+              const [sectionName] = section[1].split(' ')
+
+              const referenceSection = getReferenceSection(sectionName)
+
+              return ranges.concat({
+                referenceSection,
+                range: {
+                  startLineNumber: index + 1,
+                  startColumn: model.getLineFirstNonWhitespaceColumn(index + 1),
+                  endLineNumber: index + 1,
+                  endColumn: model.getLineLastNonWhitespaceColumn(index + 1)
+                }
+              })
+            }
+            return ranges
+          }, [] as { referenceSection: string, range: Monaco.IRange }[])
+
+          return {
+            lenses: sections.map((section, index) =>
+              ({
+                range: section.range,
+                id: `docs${index}`,
+                command: {
+                  id: 'fluidd_open_docs',
+                  title,
+                  arguments: [isMoonrakerConfig, section.referenceSection]
+                }
+              })
+            ),
+            dispose: () => undefined
+          }
+        },
+        resolveCodeLens: (_model, codeLens) => codeLens
+      })
     }
 
     // Set the correct theme.

src/locales/cn.yaml

@@ -88,6 +88,8 @@ app:
     tooltip:
       low_on_space: 磁盘空间不足
       root_disabled: '{root} G代码文件目录不可用，请首先连接打印机或者检查G代码存放目录的路径与读权限'
+    url:
+      klipper_config: 'https://www.klipper3d.org/zh/Config_Reference.html#%{hash}'
   gcode:
     btn:
       load_current_file: 载入当前文件

src/locales/en.yaml

@@ -82,6 +82,8 @@ app:
       file_name: Filename
       transfer_rate: Transfer rate
       uploaded: Uploaded
+      open_klipper_config: Open Klipper config
+      open_moonraker_config: Open Moonraker config
     msg:
       confirm: Are you sure? This will delete all files and folders.
       not_found: No files found
@@ -99,6 +101,9 @@ app:
     tooltip:
       low_on_space: Low on disk space
       root_disabled: '{root} root is not available. Please check your logs.'
+    url:
+      klipper_config: 'https://www.klipper3d.org/Config_Reference.html#%{hash}'
+      moonraker_config: 'https://moonraker.readthedocs.io/en/latest/configuration/#%{hash}'
   gcode:
     btn:
       load_current_file: Load Current File

src/util/get-reference-section.ts

@@ -0,0 +1,15 @@
+const extruderRegExp = /^extruder[0-9]+$/
+
+const getReferenceSection = (sectionName: string) => {
+  if (sectionName.startsWith('stepper_')) {
+    return 'stepper'
+  }
+
+  if (extruderRegExp.test(sectionName)) {
+    return 'extruder'
+  }
+
+  return sectionName
+}
+
+export default getReferenceSection

vue.config.js

@@ -43,7 +43,6 @@ module.exports = defineConfig({
         languages: ['markdown'],
         features: [
           '!codeAction',
-          '!codelens',
           '!colorPicker',
           '!contextmenu',
           '!folding',