diff --git a/src/components/inputs/Codemirror.vue b/src/components/inputs/Codemirror.vue
index 9c54459ec..dfd81427e 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'
@@ -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
+ }
}
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 && 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
+ ${word}
+ documentation`
+
+ return { dom: div }
+ },
+ }
+ }
+ }
+
+ return null
+ })
+}