Using Monaco editor - monaco branch now in fork

Hi Nick, thanks for chiming in & casting an eye over.

I did mean on a users local clone - not the real deal haha (note to self, be more explicit :slight_smile: )


I'm not certain if you have looked at the implementation but this is the approach I took.
In the settings file, you have to set the editor to "monaco" to use it.


One thing that might wish to be considered leading to this (or any other editor for that matter) is to abstract the ACE interface and discipline ourselves NOT to call anything other than the functions offered in editor.js - that would make any editor more of a drop in replacement instead of shimming the ACE functions (not quite a plugin - but approaching that level of integration).

So, how could we proceed Nick?

Shall I raise a PR for discussion? I am certain there are better ways to achieve the integration than what I have done (I just dont know core as well as you guys) so there will be some leg work - and i know your time is tight (mine too) - but it would be a shame to not explore this?

Let me know either way. Cheers.

The only way to get me to look and review code is a PR. That then gets it somewhere where it can be put into a plan and prioritised against everything else.

Just chiming in to encourage you to submit this PR at your earliest convenience :slight_smile:

I'm working on a (phenomenally talented) team that doesn't have much experience writing enterprise-level software outside of myself, and an improved editing environment would be extremely helpful. We're building a fairly complex system, and even just auto-formatting on save (let alone everything else) would make the change worth it. The ACE editor truly leaves a lot to be desired...

Really impressed by the effort here!

4 Likes

This would be a very welcome upgrade from ACE

@csml, @emes, I will soon. Just a bit busy right now. Thanks for the nudge.

1 Like

I have already seen the monaco editor in action in other projects and can hardly wait for a possibility to use it regularly in Node-red.

1 Like

Hi all, I have updated my fork to latest monaco editor V0.21.2 (released 2 days ago)

I have pulled latest node-red from github and merged that into this repo.

I had to make some extensive changes to how it integrates due to issues with the AMD loader it uses.

I ended up compiling the ESM code using parcel and adding it manually to avoid the dreaded Uncaught Error: Can only have one anonymous define call per script file

I will try to get a PR raised soon.

In the mean time, I would appreciate it if anyone wants to evaluate - would give me confidence to raise PR...

git clone https://github.com/Steve-Mcl/node-red.git
cd node-red
git checkout monaco
npm install
npm run build
npm start

then edit your settings.js - add this ...

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/dist/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: 11
        }
    }
4 Likes

Works for me. Would love to see a PR