From 107207cc0e17256f07273858300de400710fccf4 Mon Sep 17 00:00:00 2001 From: Steve-Mcl Date: Wed, 14 Oct 2026 17:29:51 +0100 Subject: [PATCH 1/2] feat: support vue-sfc language in ui-template editor The ui-template code editor uses a "vue-sfc" Monaco language when the dashboard provides its Vue SFC editor. Register the ui-template CodeLens and inline completions for vue-sfc alongside html, use the html indentation rules for it, and treat it like html when checking for comments. --- index.html | 17 +++++++++++++---- 1 file changed, 13 insertions(+), 4 deletions(-) diff --git a/index.html b/index.html index eef009c..9ff3ebd 100644 --- a/index.html +++ b/index.html @@ -374,7 +374,8 @@ } }) - monaco.languages.registerCodeLensProvider('html', { + // ui-template uses 'html', or 'vue-sfc' when the dashboard provides its Vue SFC editor language + const db2uiTemplateCodeLensProvider = { provideCodeLenses: function (model, token) { if (!assistantOptions.enabled) { return @@ -417,7 +418,9 @@ } return codeLens } - }) + } + monaco.languages.registerCodeLensProvider('html', db2uiTemplateCodeLensProvider) + monaco.languages.registerCodeLensProvider('vue-sfc', db2uiTemplateCodeLensProvider) assistantOptions.tablesEnabled && monaco.languages.registerCodeLensProvider('sql', { provideCodeLenses: function (model, token) { @@ -820,6 +823,11 @@ nodeType: 'ui-template', nodeModule: '@flowfuse/node-red-dashboard' }, + { + languageId: 'vue-sfc', + nodeType: 'ui-template', + nodeModule: '@flowfuse/node-red-dashboard' + }, { languageId: 'sql', nodeType: 'tables-query', @@ -903,6 +911,7 @@ } } } + languageStrategies['vue-sfc'] = languageStrategies.html // #region "Inline Completion Helper Functions" const computeInlineCompletionRange = (model, position, suggestionText) => { @@ -1829,7 +1838,7 @@ : model.getLanguageId?.() || 'javascript' const line = model.getLineContent(lineNumber) - const supportedLanguages = ['javascript', 'css', 'sql', 'html'] + const supportedLanguages = ['javascript', 'css', 'sql', 'html', 'vue-sfc'] if (!supportedLanguages.includes(languageId)) { return null // Not supported } @@ -1856,7 +1865,7 @@ if (lineBeforeCursor.lastIndexOf('--') !== -1) return true // SQL block comment `/* */` if (isWithinBlockComment()) return true - } else if (languageId === 'html') { + } else if (languageId === 'html' || languageId === 'vue-sfc') { // HTML comment markers: if (isWithinBlockComment('')) return true } From 4b41b217654d8e8eb9f9fa7d733f9a476001c976 Mon Sep 17 00:00:00 2001 From: Steve-Mcl Date: Wed, 14 Oct 2026 19:14:05 +0100 Subject: [PATCH 2/2] feat: tell Dashboard 2 that vue-sfc is supported Dashboard keeps ui-template on html unless nr-assistant says it can handle vue-sfc, so older nr-assistant installs don't lose Expert completions and the CodeLens. Set supportsVueSfc on the plugin so Dashboard can switch to vue-sfc. --- index.html | 2 ++ 1 file changed, 2 insertions(+) diff --git a/index.html b/index.html index 9ff3ebd..0ee8628 100644 --- a/index.html +++ b/index.html @@ -66,6 +66,8 @@ type: 'assistant', name: 'Node-RED Assistant Plugin', icon: 'font-awesome/fa-magic', + // Lets Dashboard 2 know it can give ui-template the vue-sfc language without losing Expert support + supportsVueSfc: true, onadd: async function () { if (!window.FFAssistantUtils) { console.warn('FFAssistantUtils lib is not loaded. Completions might not work as expected.')