Using Monaco editor - monaco branch now in fork (PR#2971)

[ristomatti]

@Steve-Mcl

I'm aware of this one - its to fix - but doesnt stop it all working.

I think this is the main culprit in the browser console log:

vendor.js:527 GET http://localhost:1880/monaco/min/vs/editor/editor.main.js net::ERR_ABORTED 404 (Not Found)

Under which name should Monaco be in package.json? I can't see anything "monaco" there?

I seem to have it here:

$ find . -name editor.main.js
./packages/node_modules/@node-red/editor-client/src/vendor/monaco/min/vs/editor/editor.main.js
./packages/node_modules/@node-red/editor-client/public/vendor/monaco/min/vs/editor/editor.main.js

[Steve-Mcl]

@ristomatti

Under which name should Monaco be in package.json ? I can't see anything "monaco" there?

its not - same as ACE isnt. It gets "baked in" by grunt.

on my machine I get...

I'll clear my browser cache in case i'm getting a cache copy (and since broke it haha)

5 mins

EDIT - i think i know whats going on.

I'll try to get this fixed and pushed ASAP - will be good to get feedback.

Thanks for your patience @ristomatti & @gemini86

[ristomatti]

Your debug print on NR startup in case it helps:

20 May 21:43:48 - [info] Server now running at http://127.0.0.1:1880/
runtime.settings.exportNodeSettings(safeSettings) - safeSettings: { httpNodeRoot: '/',
  version: '1.1.0',
  context: { default: 'memory', stores: [ 'memory' ] },
  editor: { lib: 'MONACO', theme: 'vs-dark' },
  flowEncryptionType: 'system' }

[Steve-Mcl]

@ristomatti @gemini86 Thanks for your patience

I have found the issue (on my machine, monaco was cached from an early first attempt).

I have since pushed an update & tested it on a new Linux VM - now working. Phew!

to update simply...

cd your-node-red-src-folder
git checkout monaco
git pull
npm run build
npm start

Please let me know how you get on.

[gemini86]

Works on my windows machine! I'll check again on my linux machine later

[ristomatti]

Quick retest again from my tablet, success with some quirks (likely Android related)!

The issues I noticed:

• function node opens with only single tap instead of long press & edit from the pop-up menu, so moving/deleting the node cannot be done
• first test using Swift Keyboard somehow froze the text input after selecting a completion, no issues with a second test using Hacker's Keyboard (= no predictive input)

Great work!

[Steve-Mcl]

Good(ish) to hear.

This work was done atop the dev branch which is undergoing a lot of change at the moment (i've noticed) - some things are not quite ready it seems.

@ristomatti

function node opens with only single tap instead of long press

I didnt change anything at all in any of the nodes (that was deliberate as the modification had to be transparent to the core + contrib nodes) - so my guess - its a dev thing.

@ristomatti

first test using Swift Keyboard somehow froze the text input after selecting a completion, no issues with a second test using Hacker's Keyboard (= no predictive input)

That is a concern - how does the ACE editor handle Swift keyboard?
Would you be willing to try the GBoard keyboard from google? (I find it to be excellent & it is default on a lot of andriod devices - would be a great test).

Thanks for doing some tests either way.

[ristomatti]

@Steve-Mcl

I didnt change anything at all in any of the nodes (that was deliberate as the modification had to be transparent to the core + contrib nodes) - so my guess - its a dev thing.

Ah didn't realise that. Yes it seems the edit dialog now opens on initial tap. Dragging and menu still work with a long press but it seems to require doing it in a specific way.

@Steve-Mcl

Would you be willing to try the GBoard keyboard from google? (I find it to be excellent & it is default on a lot of andriod devices - would be a great test).

My device is too full to install new apps at the moment but I tested with Samsung keyboard with predictions enabled. I wasn't able to reproduce the issue with a quick test at least. I also retested Swift Keyboard and it indeed doesn't work too well but I remember it having occasional issues with ACE also so I wouldn't worry about that too much.

Aside - I would say the minimap preview takes too much space an a small by default edit window, what do you think? Also I think there's a space in the margin for debug markers to the left of line numbers so it looks unnecessarily wide. Small details but worth mentioning still.

[Steve-Mcl]

@ristomatti

Aside - I would say the minimap preview takes too much space an a small by default edit window, what do you think? Also I think there's a space in the margin for debug markers to the left of line numbers so it looks unnecessarily wide. Small details but worth mentioning still.

Absolutely worth mentioning.

I an busy adding the ability to have custom options in the settings.js that will map directly to the monaco.editor.ieditoroptions meaning you can adjust minimap size, switch off things like folding, line numbers etc

[ristomatti]

@Steve-Mcl

I an busy adding the ability to have custom options in the settings.js that will map directly to the monaco.editor.ieditoroptions meaning you can adjust minimap size, switch off things like folding, line numbers etc

Very cool! Any chance of a custom color theme setting? I don't know about the compatibility but since I've created one for VSCode it'd be great. I've themed the ACE editor already to match my NR theme.

[Steve-Mcl]

Add your own theme eyy?

OK - it wasnt as easy as it should be but here goes...

Demo...

To add a theme - place the json file in packages/node_modules/@node-red\editor-client/src/vendor/monaco/min/vs/theme then npm build so they get added to the package.

I've added a whole bunch that i borrowed from https://github.com/brijeshb42/monaco-themes/tree/master/themes (reminder to self, include a nod to this lib as a thank you)

To set the theme - I have adjusted the settings.editor arrangement slightly so that you can take advantage of the numerous options in monaco.editor.ieditoroptions (in the example below I shrink the minimap and set font to 10

editor: {
        lib: "MONACO", //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/min/vs/theme
             * e.g. "tomorrow-night", "upstream-sunburst", "github", "my-own-lushtastic-theme"
             */
            theme: "birds-of-paradise",
            minimap: {
                enabled: true,
                maxColumn: 30,
                scale: 1,
                showSlider : "mouseover",
                renderCharacters: true
            },
            fontSize: 10
        }
    }

Will push these changes to github shortly.

[ristomatti]

Most impressive, thank you!

Edit: I'll post a screenshot if I'll get it working (later on)

[Steve-Mcl]

Updates are now in github.

As before, pull, build, run.

Thanks for testing.

[ristomatti]

Now finally testing on my laptop. Themes work great! The file format is unfortunately not the same as for VSCode themes. Not that reimplementing my custom theme on this format would be that big of a deal. Excellent that you also exposed a bunch of other settings as well.

I'll definitely play more with this after my ongoing project of migrating my Node-RED flows from an Odroid C2 into two SSD booted Raspberry Pi 4's. My plan is to split home and summer cottage flows, so all the summer cottage stuff could run locally and not rely on a VPN connection to my home. Amazingly this setup has run with only minor issues over two years now. But my luck cannot last forever.

[jamesnw]

Guys, I didn't find this thread in any google search, so I just went ahead and integrated the Monaco editor on my own, but has a few minor issues still:

Using Monaco editor - monaco branch now in fork (PR#2971)

UPDATE: 1-May-2021 - use monaco2 branch git clone https://github.com/Steve-Mcl/node-red.git cd node-red git checkout monaco use 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: …

It's a rough draft. I just started playing with node red yesterday and built it the same day, so it still needs work.

I mainly edited the function node and the editor template file. It supports JS, but when TS exists, the JS is read-only. It does not yet have any code completion for msg and other objects yet, as this was only a POC, but the one in this post seems much better, and seems more integrated properly, so I'll probably stop.

[Steve-Mcl]

Feel free to carry on.

I did it to prove Monaco can seamlessly replace ace. Which i did.

I created the necessary proxies & stubs so that not only node-red but all contrib nodes also worked transparently and without modification - which would be the major hurdle in adoption.

Lastly, Monaco doesn't work 100% on IE11 (ms dropped its own browser - I wish corporate would too) and is not fully mobile/tablet ready (yet)

Ps. Your search skills need honing - guess what the first search result for "node-red Monaco" points to

[jamesnw]

I searched for node-red typescript, not monaco, lol.

[Steve-Mcl]

It's a good point mind. If Monaco gets adoption, then I can see a day we have a choice of writing functions in TS or JS

[jamesnw]

My approach was to keep ACE and just have Monaco feed into it (and a switch to go back and forth). So far the idea shows it can work great, but until this thread, I didn't know how everything really fit together.

Are there any issues still not resolved for your implementation? You are much farther with this, so I may just help yours along instead.

[ristomatti]

@Steve-Mcl

It's a good point mind. If Monaco gets adoption, then I can see a day we have a choice of writing functions in TS or JS

There's TypeScript support in ACE also (although very basic). I think the biggest obstacle there would be to make function nodes support it. I wonder if ts-node could somehow facilitate that? But it goes off topic.