frodovdr
/
node-red
mirror of https://github.com/node-red/node-red.git
1
0
Fork 0
Code Issues Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
packages/node_modules/@node-red/editor-api/lib/editor/theme.js vendored
View File

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

40
packages/node_modules/@node-red/editor-client/src/js/ui/editors/code-editors/monaco.js vendored
View File

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