diff --git a/src/components/inputs/Codemirror.vue b/src/components/inputs/Codemirror.vue
index 9c54459ec..64fe110d4 100644
--- a/src/components/inputs/Codemirror.vue
+++ b/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
+ }
}
diff --git a/src/components/settings/SettingsEditorTab.vue b/src/components/settings/SettingsEditorTab.vue
index f4b507eda..43afcb8b8 100644
--- a/src/components/settings/SettingsEditorTab.vue
+++ b/src/components/settings/SettingsEditorTab.vue
@@ -16,6 +16,13 @@
+
+
+
+
{
+ 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 = `\
+
+ View documentation for [${word}]
+ `;
+
+ return { dom: div }
+ }
+ }
+ })
+}