UPDATE: 1-May-2021 - use monaco2 branch
- git clone https://github.com/Steve-Mcl/node-red.git
- cd node-red
-
git checkout monacouse monaco2 branch - git checkout monaco2
- npm install
- npm run build
- npm start
notes: you can chose which editor to use by modifying your settings.js to include editorTheme.codeEditor.lib
= "monaco" like this...
// Customising the editor
editorTheme: {
projects: {
// To enable the Projects feature, set this value to true
enabled: false,
workflow: {
// Set the default projects workflow mode.
// - manual - you must manually commit changes
// - auto - changes are automatically committed
// This can be overridden per-user from the 'Git config'
// section of 'User Settings' within the editor
mode: "manual"
}
},
codeEditor: {
lib: "ace", //can be "monaco" or "ace"
options: {
//// theme - must match the file name of a theme in
//// packages/node_modules/@node-red/editor-client/src/vendor/monaco/dist/theme
//// e.g. "tomorrow-night", "upstream-sunburst", "github", "my-theme"
theme: "vs",
//// other overrides can be set e.g. fontSize, fontFamily, fontLigatures etc.
//// for the full list, see https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.istandaloneeditorconstructionoptions.html
//fontSize: 14,
//fontFamily: "Cascadia Code, Fira Code, Consolas, 'Courier New', monospace"
//fontFamily: "Cascadia Code, Fira Code, Consolas, 'Courier New', monospace"
//fontLigatures: true,
}
},
}
Hi all,
I'm certain people will ask why etc - I'll just start by saying I dislike the key bindings of ACE (i've developed strong muscle memory in vscode) & I just really prefer the feel of Monaco over ACE. The pallet, the minimap, the feel, & more (though I am certain ACE can do some of these things too)
Anyhow...
On a new node I am developing, I wanted the rich editing experience i'm used to in VSCode so I started playing with the monaco editor. More of an experiment than anything at first but I was pleased with the outcome.
I added a few snippets of things we all use often in function nodes (like node.send(), node.warn(), node.error(), etc) and I wanted to demo that and a couple of other things.
So, from this, i wondered how difficult it would be to replace the built in ACE editor so its available everywhere in node-red?
I did try simply overriding the RED.editor.createEditor
function & it partially worked (function node loaded etc) but as I am not familiar with the internals of node-red, there were issues with instancing, calls to getSession(), resize() etc. I'd need to create proxies to these in order to maintain compatibility with ACE.
If anyone can provide some pointers as to where I would need to start in replacing ACE for Monaco - I'll give it a go - if only to satisfy curiosity.
So far, I cant even find the require
for "ace" haha.