From d7a2fc2be4645afe28ab024c4352f0d761380bd3 Mon Sep 17 00:00:00 2001 From: Steve-Mcl Date: Sun, 25 Jul 2021 15:16:49 +0100 Subject: [PATCH 1/4] use them plugin theme `monacoTheme` if present --- .../@node-red/editor-api/lib/editor/theme.js | 1 + .../src/js/ui/editors/code-editors/monaco.js | 40 ++++++++++++++++++- 2 files changed, 39 insertions(+), 2 deletions(-) diff --git a/packages/node_modules/@node-red/editor-api/lib/editor/theme.js b/packages/node_modules/@node-red/editor-api/lib/editor/theme.js index 2651660bf..f2edf1059 100644 --- a/packages/node_modules/@node-red/editor-api/lib/editor/theme.js +++ b/packages/node_modules/@node-red/editor-api/lib/editor/theme.js @@ -246,6 +246,7 @@ module.exports = { theme.page = theme.page || {_:{}} theme.page._.scripts = scriptFiles.concat(theme.page._.scripts || []) } + themeSettings.monacoTheme = themePlugin.monacoTheme; } activeThemeInitialised = true; } diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/editors/code-editors/monaco.js b/packages/node_modules/@node-red/editor-client/src/js/ui/editors/code-editors/monaco.js index edde36373..2a4da0e21 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/editors/code-editors/monaco.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/editors/code-editors/monaco.js @@ -54,6 +54,7 @@ RED.editor.codeEditor.monaco = (function() { var initialised = false; const type = "monaco"; const monacoThemes = ["vs","vs-dark","hc-black"]; //TODO: consider setting hc-black autmatically based on acessability? + let userSelectedTheme; //TODO: get from externalModules.js For now this is enough for feature parity with ACE (and then some). const knownModules = { @@ -181,14 +182,42 @@ RED.editor.codeEditor.monaco = (function() { var editorSettings = RED.editor.codeEditor.settings || {}; var editorOptions = editorSettings.options || {}; + //if a theme is set and the plugin has a property monacoTheme, it should be the name of a pre-set theme or a monaco theme object + try { + if(RED.settings.editorTheme.theme && RED.settings.editorTheme.monacoTheme) { + if (typeof RED.settings.editorTheme.monacoTheme == "object") { + let themeThemeName = RED.settings.editorTheme.theme; + monacoThemes.push(themeThemeName);//add to list of loaded themes + monaco.editor.defineTheme(themeThemeName, RED.settings.editorTheme.monacoTheme); + monaco.editor.setTheme(themeThemeName); + userSelectedTheme = themeThemeName; + } else if (typeof RED.settings.editorTheme.monacoTheme == "string") { + let themeThemeName = RED.settings.editorTheme.monacoTheme; + let customTheme = 'vendor/monaco/dist/theme/' + editorOptions.theme + '.json'; + $.get(customTheme, function (theme) { + monacoThemes.push(themeThemeName);//add to list of loaded themes + if ((theme.rules && Array.isArray(theme.rules)) || theme.colors) { + monaco.editor.defineTheme(themeThemeName, theme); + monaco.editor.setTheme(themeThemeName); + userSelectedTheme = themeThemeName; + } + }); + } + } + } catch (error) { + console.warn(error); + } + + //if a theme is explicitally set, load & choose that if (editorOptions.theme) { if (!monacoThemes.includes(editorOptions.theme)) { - var customTheme = 'vendor/monaco/dist/theme/' + editorOptions.theme + '.json'; + let customTheme = 'vendor/monaco/dist/theme/' + editorOptions.theme + '.json'; $.get(customTheme, function (theme) { monacoThemes.push(editorOptions.theme);//add to list of loaded themes if ((theme.rules && Array.isArray(theme.rules)) || theme.colors) { monaco.editor.defineTheme(editorOptions.theme, theme); monaco.editor.setTheme(editorOptions.theme); + userSelectedTheme = editorOptions.theme; } }); } @@ -742,6 +771,10 @@ RED.editor.codeEditor.monaco = (function() { var editorOptions = $.extend({}, editorSettings.options, options); editorOptions.language = convertAceModeToMonacoLang(options.mode); + if(userSelectedTheme) { + editorOptions.theme = userSelectedTheme;//use user selected theme for this session + } + //by default, set javascript editors to text mode. //when element becomes visible, it will be (re) set to javascript mode //this is to ensure multiple editors sharing the model dont present its @@ -1158,7 +1191,10 @@ RED.editor.codeEditor.monaco = (function() { return { row: p.lineNumber-1, column: p.column-1 }; } - ed.setTheme = monaco.editor.setTheme; + ed.setTheme = function(theme) { + monaco.editor.setTheme(theme); + userSelectedTheme = theme;//remember users choice for this session + } ed.on = function (name, cb) { switch (name) { From 8a1d81989b16787d73e645a29f681ac9a29bbcc6 Mon Sep 17 00:00:00 2001 From: Steve-Mcl Date: Mon, 26 Jul 2021 21:02:11 +0100 Subject: [PATCH 2/4] use codeEditor.options.theme --- .../@node-red/editor-api/lib/editor/theme.js | 5 +- .../src/js/ui/editors/code-editors/monaco.js | 50 +++++++------------ 2 files changed, 23 insertions(+), 32 deletions(-) diff --git a/packages/node_modules/@node-red/editor-api/lib/editor/theme.js b/packages/node_modules/@node-red/editor-api/lib/editor/theme.js index f2edf1059..918fed420 100644 --- a/packages/node_modules/@node-red/editor-api/lib/editor/theme.js +++ b/packages/node_modules/@node-red/editor-api/lib/editor/theme.js @@ -246,7 +246,10 @@ module.exports = { theme.page = theme.page || {_:{}} theme.page._.scripts = scriptFiles.concat(theme.page._.scripts || []) } - themeSettings.monacoTheme = themePlugin.monacoTheme; + if(theme.codeEditor) { + theme.codeEditor.options = theme.codeEditor.options || {}; + theme.codeEditor.options.theme = themePlugin.monacoTheme; + } } activeThemeInitialised = true; } diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/editors/code-editors/monaco.js b/packages/node_modules/@node-red/editor-client/src/js/ui/editors/code-editors/monaco.js index 2a4da0e21..fbd9e7e06 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/editors/code-editors/monaco.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/editors/code-editors/monaco.js @@ -182,46 +182,34 @@ RED.editor.codeEditor.monaco = (function() { var editorSettings = RED.editor.codeEditor.settings || {}; var editorOptions = editorSettings.options || {}; - //if a theme is set and the plugin has a property monacoTheme, it should be the name of a pre-set theme or a monaco theme object + //if editorOptions.theme is an object (set in theme.js context()), use the plugin theme name as the monaco theme name + //if editorOptions.theme is a string, it should be the name of a pre-set theme, load that try { - if(RED.settings.editorTheme.theme && RED.settings.editorTheme.monacoTheme) { - if (typeof RED.settings.editorTheme.monacoTheme == "object") { - let themeThemeName = RED.settings.editorTheme.theme; - monacoThemes.push(themeThemeName);//add to list of loaded themes - monaco.editor.defineTheme(themeThemeName, RED.settings.editorTheme.monacoTheme); + const addTheme = function (themeThemeName, theme) { + if ((theme.rules && Array.isArray(theme.rules)) || theme.colors) { + monacoThemes.push(themeThemeName); //add to list of loaded themes + monaco.editor.defineTheme(themeThemeName, theme); monaco.editor.setTheme(themeThemeName); userSelectedTheme = themeThemeName; - } else if (typeof RED.settings.editorTheme.monacoTheme == "string") { - let themeThemeName = RED.settings.editorTheme.monacoTheme; - let customTheme = 'vendor/monaco/dist/theme/' + editorOptions.theme + '.json'; - $.get(customTheme, function (theme) { - monacoThemes.push(themeThemeName);//add to list of loaded themes - if ((theme.rules && Array.isArray(theme.rules)) || theme.colors) { - monaco.editor.defineTheme(themeThemeName, theme); - monaco.editor.setTheme(themeThemeName); - userSelectedTheme = themeThemeName; - } - }); + } + }; + if (editorOptions.theme) { + if (typeof editorOptions.theme == "object" && RED.settings.editorTheme.theme) { + let themeThemeName = editorOptions.theme.name || RED.settings.editorTheme.theme; + addTheme(themeThemeName, editorOptions.theme); + } else if (typeof editorOptions.theme == "string") { + let themeThemeName = editorOptions.theme; + if (!monacoThemes.includes(themeThemeName)) { + $.get('vendor/monaco/dist/theme/' + themeThemeName + '.json', function (theme) { + addTheme(themeThemeName, theme); + }); + } } } } catch (error) { console.warn(error); } - //if a theme is explicitally set, load & choose that - if (editorOptions.theme) { - if (!monacoThemes.includes(editorOptions.theme)) { - let customTheme = 'vendor/monaco/dist/theme/' + editorOptions.theme + '.json'; - $.get(customTheme, function (theme) { - monacoThemes.push(editorOptions.theme);//add to list of loaded themes - if ((theme.rules && Array.isArray(theme.rules)) || theme.colors) { - monaco.editor.defineTheme(editorOptions.theme, theme); - monaco.editor.setTheme(editorOptions.theme); - userSelectedTheme = editorOptions.theme; - } - }); - } - } //Helper function to simplify snippet setup function createMonacoCompletionItem(label, insertText, documentation, range, kind) { From 08049252f21221955dc6d391a9375967287e3423 Mon Sep 17 00:00:00 2001 From: Steve-Mcl Date: Sat, 31 Jul 2021 10:24:48 +0100 Subject: [PATCH 3/4] permit plugin theme to change other monaco options --- packages/node_modules/@node-red/editor-api/lib/editor/theme.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/node_modules/@node-red/editor-api/lib/editor/theme.js b/packages/node_modules/@node-red/editor-api/lib/editor/theme.js index 918fed420..69c9345a0 100644 --- a/packages/node_modules/@node-red/editor-api/lib/editor/theme.js +++ b/packages/node_modules/@node-red/editor-api/lib/editor/theme.js @@ -247,8 +247,7 @@ module.exports = { theme.page._.scripts = scriptFiles.concat(theme.page._.scripts || []) } if(theme.codeEditor) { - theme.codeEditor.options = theme.codeEditor.options || {}; - theme.codeEditor.options.theme = themePlugin.monacoTheme; + theme.codeEditor.options = Object.assign({}, theme.codeEditor.options, themePlugin.monacoOptions); } } activeThemeInitialised = true; From c20ca3399ed036913c17461c0173fee5505a6d67 Mon Sep 17 00:00:00 2001 From: Steve-Mcl Date: Tue, 21 Sep 2021 14:12:21 +0100 Subject: [PATCH 4/4] codeEditor.options should take precedence - over plugins monacoOptions --- packages/node_modules/@node-red/editor-api/lib/editor/theme.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/node_modules/@node-red/editor-api/lib/editor/theme.js b/packages/node_modules/@node-red/editor-api/lib/editor/theme.js index f926af253..6ffc2fc01 100644 --- a/packages/node_modules/@node-red/editor-api/lib/editor/theme.js +++ b/packages/node_modules/@node-red/editor-api/lib/editor/theme.js @@ -254,7 +254,7 @@ module.exports = { theme.page._.scripts = scriptFiles.concat(theme.page._.scripts || []) } if(theme.codeEditor) { - theme.codeEditor.options = Object.assign({}, theme.codeEditor.options, themePlugin.monacoOptions); + theme.codeEditor.options = Object.assign({}, themePlugin.monacoOptions, theme.codeEditor.options); } } activeThemeInitialised = true;