Initial commit of working plugin with settings toggle

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'
@@ -92,9 +93,11 @@ export default class Codemirror extends Mixins(BaseMixin) {
                 if (this.$emit) {
                     this.$emit('input', this.content)
                 }
-            }),
+            })
         ]
 
+        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,143 @@
+/**
+ * @link https://codemirror.net/examples/tooltip/
+ */
+import { hoverTooltip } from "@codemirror/view"
+
+const DOCUMENTATION_URL_BASE = "https://www.klipper3d.org/Config_Reference.html"
+
+const CONFIG_SECTIONS: readonly string[] = [
+  "ad5206",
+  "adc_scaled",
+  "adc_temperature",
+  "adxl345",
+  "angle",
+  "axis_twist_compensation",
+  "bed_mesh",
+  "bed_screws",
+  "bed_tilt",
+  "bltouch",
+  "board_pins",
+  "controller_fan",
+  "delayed_gcode",
+  "display",
+  "display_data",
+  "display_glyph",
+  "display_template",
+  "dotstar",
+  "dual_carriage",
+  "duplicate_pin_override",
+  "endstop_phase",
+  "exclude_object",
+  "extruder",
+  "extruder1",
+  "extruder_stepper",
+  "fan",
+  "fan_generic",
+  "filament_motion_sensor",
+  "filament_switch_sensor",
+  "firmware_retraction",
+  "force_move",
+  "gcode_arcs",
+  "gcode_button",
+  "gcode_macro",
+  "hall_filament_width_sensor",
+  "heater_bed",
+  "heater_fan",
+  "heater_generic",
+  "homing_heaters",
+  "homing_override",
+  "idle_timeout",
+  "include",
+  "input_shaper",
+  "led",
+  "lis2dw",
+  "manual_stepper",
+  "mcp4018",
+  "mcp4451",
+  "mcp4728",
+  "mcu",
+  "menu",
+  "mpu9250",
+  "multi_pin",
+  "neopixel",
+  "output_pin",
+  "palette2",
+  "pause_resume",
+  "pca9533",
+  "pca9632",
+  "printer",
+  "probe",
+  "probe_eddy_current",
+  "pwm_cycle_time",
+  "pwm_tool",
+  "quad_gantry_level",
+  "replicape",
+  "resonance_tester",
+  "respond",
+  "safe_z_home",
+  "samd_sercom",
+  "save_variables",
+  "screws_tilt_adjust",
+  "sdcard_loop",
+  "servo",
+  "skew_correction",
+  "smart_effector",
+  "static_digital_output",
+  "stepper",
+  "stepper_x",
+  "stepper_y",
+  "stepper_z",
+  "stepper_z1",
+  "sx1509",
+  "temperature_fan",
+  "temperature_sensor",
+  "thermistor",
+  "tmc2130",
+  "tmc2208",
+  "tmc2209",
+  "tmc2240",
+  "tmc2660",
+  "tmc5160",
+  "tsl1401cl_filament_width_sensor",
+  "verify_heater",
+  "virtual_sdcard",
+  "z_thermal_adjust",
+  "z_tilt"
+]
+
+export function KlipperDocsTooltipPlugin() {
+    return hoverTooltip((view, pos, side) => {
+        const { from, to, text } = view.state.doc.lineAt(pos)
+
+        let start = pos, end = pos
+        while (start > from && /\w/.test(text[start - from - 1])) start--
+        while (end < to && /\w/.test(text[end - from])) end++
+
+        const word = text.slice(start - from, end - from)
+        if (start === pos && side < 0 || end === pos && side > 0 || !CONFIG_SECTIONS.includes(word)) {
+            return null;
+        }
+
+        return {
+            pos: start,
+            end,
+            above: true,
+            create() {
+                const div = document.createElement("div")
+
+                Object.assign(div.style, {
+                    padding: "3px 10px",
+                    borderRadius: "5px",
+                    backgroundColor: "#FFF",
+                })
+
+                div.innerHTML = `\
+                <a style="text-decoration: none;" href="${DOCUMENTATION_URL_BASE}#${word}" rel="noopener" target="_blank">
+                    View documentation for [${word}]
+                </a>`;
+
+                return { dom: div }
+            }
+        }
+    })
+}