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 + }) +}