Updated coding window node-red editor

General
1

Hi, when I install node-red on a raspberry pi, or some other devices I get a neat code editor with autocomplete, code hints etc, kind of like a Visual Studio environment. However on my main machine I only have a older looking more simple editor. What do I need to update in order to get this to be the new editor?
My old looking editor:

image
image648×652 26.7 KB

The newer looking editor

image
image765×743 34.3 KB

My node-red version is 3.1.9, NodeJs: 20.12.2 and npm: 10.6.0.

Thanks in advance!

2

In your machines with the older ACE editor, your node-red version is either v2.x or there is a setting in settings.js forcing the old editor to be used.

See this: Getting the monaco editor to work in NR 2.x - #33 by Steve-Mcl

Ps: did you also update Node-RED on the main machine?

3

Thanks, my editor lib in settings.js was indeed set to "ace". Setting it to "monaco" gave me the new editor.

codeEditor: {
            /** Select the text editor component used by the editor.
             * Defaults to "ace", but can be set to "ace" or "monaco"
             */
            lib: "monaco",
            options: {
                /** The follow options only apply if the editor is set to "monaco"
                 *
                 * 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",
                //fontLigatures: true,
            }