feat: CodeMirror plugin for Klipper Documentation tooltip links in editor

src/components/inputs/Codemirror.vue

@@ -16,6 +16,7 @@ import { vscodeDark } from '@uiw/codemirror-theme-vscode'
 import { StreamLanguage } from '@codemirror/language'
 import { klipper_config } from '@/plugins/StreamParserKlipperConfig'
 import { gcode } from '@/plugins/StreamParserGcode'
+import { KlipperDocsTooltipPlugin } from '@/plugins/CodeMirrorPluginKlipperDocsTooltips'
 import { indentWithTab } from '@codemirror/commands'
 import { json } from '@codemirror/lang-json'
 import { css } from '@codemirror/lang-css'
@@ -95,6 +96,8 @@ export default class Codemirror extends Mixins(BaseMixin) {
             }),
         ]
 
+        if (this.tooltipsPluginEnabled) extensions.push(KlipperDocsTooltipPlugin())
+
         if (['cfg', 'conf'].includes(this.fileExtension)) extensions.push(StreamLanguage.define(klipper_config))
         else if (['gcode'].includes(this.fileExtension)) extensions.push(StreamLanguage.define(gcode))
         else if (['json'].includes(this.fileExtension)) extensions.push(json())
@@ -110,5 +113,9 @@ export default class Codemirror extends Mixins(BaseMixin) {
     get tabSize() {
         return this.$store.state.gui.editor.tabSize || 2
     }
+
+    get tooltipsPluginEnabled() {
+        return this.$store.state.gui.editor.tooltipsEnabled || false
+    }
 }
 </script>

src/components/settings/SettingsEditorTab.vue

@@ -16,6 +16,13 @@
                     <v-switch v-model="confirmUnsavedChanges" hide-details class="mt-0" />
                 </settings-row>
                 <v-divider class="my-2" />
+                <settings-row
+                    :title="$t('Settings.EditorTab.ToggleDocumentationTooltips')"
+                    :sub-title="$t('Settings.EditorTab.ToggleDocumentationTooltipsDescription')"
+                    :dynamic-slot-width="true">
+                    <v-switch v-model="toggleTooltips" hide-details class="mt-0" />
+                </settings-row>
+                <v-divider class="my-2" />
                 <settings-row
                     :title="$t('Settings.EditorTab.TabSize')"
                     :sub-title="$t('Settings.EditorTab.TabSizeDescription')"
@@ -75,6 +82,14 @@ export default class SettingsEditorTab extends Mixins(BaseMixin) {
         this.$store.dispatch('gui/saveSetting', { name: 'editor.escToClose', value: newVal })
     }
 
+    get toggleTooltips() {
+        return this.$store.state.gui.editor.tooltipsEnabled
+    }
+
+    set toggleTooltips(newVal) {
+        this.$store.dispatch('gui/saveSetting', { name: 'editor.tooltipsEnabled', value: newVal })
+    }
+
     get confirmUnsavedChanges() {
         return this.$store.state.gui.editor.confirmUnsavedChanges
     }

src/locales/en.json

@@ -946,6 +946,8 @@
             "Spaces": "Spaces: {count}",
             "TabSize": "TAB Size",
             "TabSizeDescription": "Adjusts how many spaces should be indented for TAB",
+            "ToggleDocumentationTooltips": "Enable tooltips to Klipper Docs",
+            "ToggleDocumentationTooltipsDescription": "When enabled, you can hover over config section headers and get a link to the documentation.",
             "UseEscToClose": "Use ESC to close editor",
             "UseEscToCloseDescription": "Allows the ESC key to close the editor"
         },

src/plugins/CodeMirrorPluginKlipperDocsTooltips.ts

@@ -0,0 +1,58 @@
+import { hoverTooltip } from '@codemirror/view'
+
+const DOCUMENTATION_URL_BASE = 'https://www.klipper3d.org/Config_Reference.html'
+
+/**
+ * @link https://codemirror.net/examples/tooltip/
+ */
+export function KlipperDocsTooltipPlugin() {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    return hoverTooltip((view, pos, _side) => {
+        const { from, to, text } = view.state.doc.lineAt(pos)
+
+        let start = pos,
+            end = pos
+
+        while (start > from && text[start - from - 1] !== '[') start--
+        while (end < to && text[end - from] !== ']') end++
+
+        if (text[start - from - 1] !== '[' || text[end - from] !== ']') {
+            return null
+        }
+
+        const content = text.slice(start - from, end - from).trim()
+        const words = content.split(/\s+/)
+
+        for (const word of words) {
+            const wordStart = text.indexOf(word, start - from) + from
+            const wordEnd = wordStart + word.length
+
+            if (pos >= wordStart && pos <= wordEnd) {
+                return {
+                    pos: wordStart,
+                    end: wordEnd,
+                    above: true,
+                    create() {
+                        const div = document.createElement('div')
+
+                        Object.assign(div.style, {
+                            padding: '3px 10px',
+                            borderRadius: '5px',
+                            color: "#000",
+                            backgroundColor: '#FFF',
+                        })
+
+                        div.innerHTML = `\
+                        View<a style="text-decoration: none;" href="${DOCUMENTATION_URL_BASE}#${word}" rel="noopener" target="_blank">
+                         <strong>${word}</strong>
+                        </a>documentation`
+
+                        return { dom: div }
+                    },
+                }
+            }
+        }
+
+        return null
+    })
+}