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) {