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

Awesome! I hope I'll find time to try it out tomorrow. :slightly_smiling_face:

1 Like

Don't forget to tell your sales department, that they need to start lobbying to get this integrated into the Node-RED core. And when you want to create a pull request for Node-RED version 1.1 beta, tell the sales they need send a nice lady with lots of presents to the Node-RED core team. Otherwise I'm afraid you won't get it approved anymore :rofl:

2 Likes

I think I know where you're coming from Bart (I think you're referring to cake right? haha)
PS, you're my sales team - so get cracking :wink:

1 Like

Greetings,

Is there any chance you have a Docker Container with your changes?

I'd be willing to try setting one up - if i had a clue where to start.

Any pointers?

Step 1: Learn Docker.
Step 2: Tear hair out when Docker doesn't work as expected because there are 25 more steps than you understood when first trying it.
Step 3: Sit in corner wimpering - preferably while eating cake.

:rofl:

And in case I have just offended any Docker experts out there - sorry!

7 Likes

Julian believe it or not, over the last coupe of years, I've already done steps 1 ~ 3. Twice!

To me, its kinda like JSONata - just doesn't stick haha.

1 Like

Oh I believe it all right. Though it was tongue-in-cheek, it is based in experience too. I've started using Docker several times and thrown it away quite quickly most times. I guess that for what I do (at least outside the office), Docker is just too complex to make it worth the effort.

1 Like

I'm eager to try this out. I followed your install instruction on a windows machine as well as ubuntu but it looks like the editors aren't loading correctly. I cannot edit any of the nodes. If I use the ctrl+enter keybinding, I can open the editor window of a funciton node, but there's not editor pane. Only the name field, number of outputs field and the enable button. This is the case for setting either MONACO or ACE libs in the settings.js file.

Browser console shows

JQMIGRATE: Migrate is installed, version 3.0.1
:8888/monaco/min/vs/editor/editor.main.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)
red.min.js:16 Node-RED: 1.1.0
red.min.js:16 Versions
red.min.js:16 Projects disabled
DevTools failed to load SourceMap: Could not load content for http://10.191.25.3:8888/min-maps/vs/loader.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE

When did you clone the repo?

changes have been made since I posted above info.

If you dont mind, could you try again once more please?

if that doesnt work let me know & I'll try on a fresh machine.

So I tried the instructions & it works on Win10 machine.

Not being at work, i dont have immediate access to a linux box ATM (need to get that remedied but I've only had 62 days in furlough)

Yes, followed that install instruction to the letter.

So I tried it again on the same linux VM after deleting the node-red folder. same result. I tried on my windows 10 enterprise machine (which already had node-red installed) and got the same issue. I'll try again later on a fresh VM, both linux and windows 10.

screenshot of the editor:

I just tried too. It worked on a fresh git clone.
PS, do you have windows build tools installed?
cant remember if there are other pre-reqs for linux.

PS, that screenshot looks like the npm run build failed. Can you show the last part of terminal output after npm run build?

user@linuxVM:~/node-red$ npm run build

> node-red@1.1.0 build /home/monaco-test/node-red
> grunt build

Running "clean:build" (clean) task
>> 3 paths cleaned.

Running "jsonlint:messages" (jsonlint) task
>> 30 files lint free.

Running "jsonlint:keymaps" (jsonlint) task
>> 1 file lint free.

Running "concat:build" (concat) task

Running "concat:vendor" (concat) task

Running "copy:build" (copy) task
Created 91 directories, copied 179 files

Running "uglify:build" (uglify) task
>> 4 files created 1.86 MB → 725.15 kB

Running "sass:build" (sass) task

Running "attachCopyright:js" (attachCopyright) task
Attached copyright to packages/node_modules/@node-red/editor-client/public/red/red.min.js
Attached copyright to packages/node_modules/@node-red/editor-client/public/red/main.min.js

Running "attachCopyright:css" (attachCopyright) task
Attached copyright to packages/node_modules/@node-red/editor-client/public/red/style.min.css

Done.
user@linuxVM:~/node-red$

I get a lot of errors on install, before build, mostly bcrypt stuff, but I could wrap the whole install into a log file if that helps. Honestly I would wait until I get a chance to run up a new linux box, this one has a lot going on (so does my windows machine)

Will report back after.

I wonder if its related to a contrib node you have installed?

Would you be willing to try something?

Make a new folder c:/temp/nr2

add a line in grunt.js "start2": "node packages/node_modules/node-red/red.js -u c:/temp/nr2", ...

then start it like this npm run start2

you should get a clean environment (no contrib nodes - all running from a new folder)

I tried your start2 method on my windows machine, still the same issue. I also am having a bunch of failures installing on a fresh ubuntu VM. I cannot install the windows-build-tools package, since it's only for windows. I did check that windows-build-tools is install on my windows machine, which it is.

Has anyone else successfully installed?

I did a quick test now. No immediate success here either. I'm on my tablet and just ssh'd to my Linux laptop so I cannot give much useful info. But in short:

  • I'm running node 10.x (remnant of a previous work project, should upgrade)
  • npm install log had a node-gyp build error for dep levelup
  • npm build ran without errors and so did npm start
  • when connected from Android Chrome, I was unable to open any node for editing as nothing happened on edit. There's likely some JS error but can't see it as there's no devtools on Android
  • no error in NR console

But did I read earlier on the thread node 12.x was required?

Edit: I forgot to edit settings.js but I guess there's no point in testing that with my limited debugging capability right now...

:sob:
Not a good start - I must have something you dont. I dont understand as I litterally followed my own instructions.

I dont remember stating that - but I am using node 12.


So, I'm almost done setting up a brand new ubuntu VM - will see what happens.

I'll properly test on my laptop and report back with more info. :slightly_smiling_face:

Sorry misread on my tablet. The node-gyp error is for snappy:

binding.target.mk:108: recipe for target 'Release/obj.target/binding/src/binding.o' failed
make: *** [Release/obj.target/binding/src/binding.o] Error 1
make: Leaving directory '/home/ristomatti/Projects/node-red/node-red-monaco/node_modules/snappy/build'
gyp ERR! build error 
gyp ERR! stack Error: `make` failed with exit code: 2
gyp ERR! stack     at ChildProcess.onExit (/home/ristomatti/.npm-global/lib/node_modules/npm/node_modules/node-gyp/lib/build.js:262:23)
gyp ERR! stack     at ChildProcess.emit (events.js:198:13)
gyp ERR! stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:248:12)
gyp ERR! System Linux 5.0.0-36-generic
gyp ERR! command "/usr/bin/node" "/home/ristomatti/.npm-global/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "rebuild"
gyp ERR! cwd /home/ristomatti/Projects/node-red/node-red-monaco/node_modules/snappy
gyp ERR! node -v v10.20.0
gyp ERR! node-gyp -v v3.8.0
gyp ERR! not ok 

Browser console shows this right after loading:

vendor.js:527 GET http://localhost:1880/monaco/min/vs/editor/editor.main.js net::ERR_ABORTED 404 (Not Found)
e.load @ vendor.js:527
e.load @ vendor.js:526
i @ vendor.js:542
s._loadModule @ vendor.js:542
s._resolve @ vendor.js:543
s.defineModule @ vendor.js:538
i @ vendor.js:545
(anonymous) @ red.min.js:16
(anonymous) @ red.min.js:16
(anonymous) @ red.min.js:16
(anonymous) @ red.min.js:16
red.min.js:16 Node-RED: 1.1.0
red.min.js:16 Versions
red.min.js:16 Projects disabled
vendor.js:2 GET http://localhost:1880/theme/css/images/grip.png 404 (Not Found)
_e @ vendor.js:2
css @ vendor.js:2
(anonymous) @ vendor.js:2
_ @ vendor.js:2
css @ vendor.js:2
_setPositionRelative @ vendor.js:225
(anonymous) @ vendor.js:222
_create @ vendor.js:225
(anonymous) @ vendor.js:222
_createWidget @ vendor.js:222
t.<computed>.<computed> @ vendor.js:222
(anonymous) @ vendor.js:222
each @ vendor.js:2
each @ vendor.js:2
t.fn.<computed> @ vendor.js:222
create @ red.min.js:16
init @ red.min.js:16
a @ red.min.js:16
success @ red.min.js:16
c @ vendor.js:2
fireWith @ vendor.js:2
l @ vendor.js:2
(anonymous) @ vendor.js:2
load (async)
send @ vendor.js:2
ajax @ vendor.js:2
e.ajax @ vendor.js:82
t @ red.min.js:16
success @ red.min.js:16
c @ vendor.js:2
fireWith @ vendor.js:2
l @ vendor.js:2
(anonymous) @ vendor.js:2
load (async)
send @ vendor.js:2
ajax @ vendor.js:2
e.ajax @ vendor.js:82
a @ red.min.js:16
init @ red.min.js:16
(anonymous) @ red.min.js:16
(anonymous) @ red.min.js:16
(anonymous) @ vendor.js:253
(anonymous) @ vendor.js:253
g @ vendor.js:253
success @ vendor.js:253
c @ vendor.js:2
fireWith @ vendor.js:2
l @ vendor.js:2
(anonymous) @ vendor.js:2
load (async)
send @ vendor.js:2
ajax @ vendor.js:2
e.ajax @ vendor.js:82
_fetchOne @ vendor.js:253
(anonymous) @ vendor.js:253
each @ vendor.js:2
(anonymous) @ vendor.js:253
each @ vendor.js:2
_fetch @ vendor.js:253
load @ vendor.js:253
g @ vendor.js:253
init @ red.min.js:16
init @ red.min.js:16
(anonymous) @ main.min.js:16
e @ vendor.js:2
t @ vendor.js:2
setTimeout (async)
(anonymous) @ vendor.js:2
c @ vendor.js:2
fireWith @ vendor.js:2
fire @ vendor.js:2
c @ vendor.js:2
fireWith @ vendor.js:2
ready @ vendor.js:2
B @ vendor.js:2
red.min.js:16 RED.events.emit error: [registry:node-type-added] InvalidCharacterError: Failed to execute 'createElement' on 'Document': The tag name provided ('div"') is not a valid name.
red.min.js:16 DOMException: Failed to execute 'createElement' on 'Document': The tag name provided ('div"') is not a valid name.
    at HTMLDocument.createElement (<anonymous>:1:1536)
    at Function.k.parseHTML (http://localhost:1880/vendor/vendor.js:2:83541)
    at e.fn.init.k.fn.init (http://localhost:1880/vendor/vendor.js:2:25047)
    at new e.fn.init (http://localhost:1880/vendor/vendor.js:45:23)
    at k (http://localhost:1880/vendor/vendor.js:2:950)
    at Object.onpaletteadd (<anonymous>:377:17)
    at http://localhost:1880/red/red.min.js:16:344290
    at Object.emit (http://localhost:1880/red/red.min.js:16:14938)
    at Object.registerNodeType [as registerType] (http://localhost:1880/red/red.min.js:16:43317)
    at <anonymous>:31:15
vendor.js:537 Uncaught Error: Can only have one anonymous define call per script file
    at s.enqueueDefineAnonymousModule (vendor.js:537)
    at n (vendor.js:545)
    at tinycolor-min.js:4
    at tinycolor-min.js:4

I'll configure settings.js and see what happens then.

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

I'm nearly done setting up a fresh VM - will see how that goes