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 12d5e3628..5a74b62c2 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 @@ -253,6 +253,9 @@ module.exports = { theme.page = theme.page || {_:{}} theme.page._.scripts = scriptFiles.concat(theme.page._.scripts || []) } + if(theme.codeEditor) { + theme.codeEditor.options = Object.assign({}, themePlugin.monacoOptions, theme.codeEditor.options); + } } 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 3e04105ed..35ca607a0 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,19 +182,35 @@ RED.editor.codeEditor.monaco = (function() { var editorSettings = RED.editor.codeEditor.settings || {}; var editorOptions = editorSettings.options || {}; - if (editorOptions.theme) { - if (!monacoThemes.includes(editorOptions.theme)) { - var 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); + //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 { + 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; + } + }; + 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); } + //Helper function to simplify snippet setup function createMonacoCompletionItem(label, insertText, documentation, range, kind) { if (Array.isArray(documentation)) { documentation = documentation.join("\n"); } @@ -744,6 +761,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 @@ -1169,7 +1190,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) {