1
0
mirror of https://github.com/node-red/node-red.git synced 2023-10-10 13:36:53 +02:00

use them plugin theme monacoTheme if present

This commit is contained in:
Steve-Mcl 2021-07-25 15:16:49 +01:00
parent 142176f194
commit d7a2fc2be4
2 changed files with 39 additions and 2 deletions

View File

@ -246,6 +246,7 @@ module.exports = {
theme.page = theme.page || {_:{}} theme.page = theme.page || {_:{}}
theme.page._.scripts = scriptFiles.concat(theme.page._.scripts || []) theme.page._.scripts = scriptFiles.concat(theme.page._.scripts || [])
} }
themeSettings.monacoTheme = themePlugin.monacoTheme;
} }
activeThemeInitialised = true; activeThemeInitialised = true;
} }

View File

@ -54,6 +54,7 @@ RED.editor.codeEditor.monaco = (function() {
var initialised = false; var initialised = false;
const type = "monaco"; const type = "monaco";
const monacoThemes = ["vs","vs-dark","hc-black"]; //TODO: consider setting hc-black autmatically based on acessability? 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). //TODO: get from externalModules.js For now this is enough for feature parity with ACE (and then some).
const knownModules = { const knownModules = {
@ -181,14 +182,42 @@ RED.editor.codeEditor.monaco = (function() {
var editorSettings = RED.editor.codeEditor.settings || {}; var editorSettings = RED.editor.codeEditor.settings || {};
var editorOptions = editorSettings.options || {}; 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 (editorOptions.theme) {
if (!monacoThemes.includes(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) { $.get(customTheme, function (theme) {
monacoThemes.push(editorOptions.theme);//add to list of loaded themes monacoThemes.push(editorOptions.theme);//add to list of loaded themes
if ((theme.rules && Array.isArray(theme.rules)) || theme.colors) { if ((theme.rules && Array.isArray(theme.rules)) || theme.colors) {
monaco.editor.defineTheme(editorOptions.theme, theme); monaco.editor.defineTheme(editorOptions.theme, theme);
monaco.editor.setTheme(editorOptions.theme); monaco.editor.setTheme(editorOptions.theme);
userSelectedTheme = editorOptions.theme;
} }
}); });
} }
@ -742,6 +771,10 @@ RED.editor.codeEditor.monaco = (function() {
var editorOptions = $.extend({}, editorSettings.options, options); var editorOptions = $.extend({}, editorSettings.options, options);
editorOptions.language = convertAceModeToMonacoLang(options.mode); 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. //by default, set javascript editors to text mode.
//when element becomes visible, it will be (re) set to javascript 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 //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 }; 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) { ed.on = function (name, cb) {
switch (name) { switch (name) {