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

ristomatti · 18 May 2020 22:00

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

BartButenaers · 19 May 2020 11:16

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

Steve-Mcl · 19 May 2020 11:20

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

pax · 19 May 2020 11:54

Greetings,

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

Steve-Mcl · 19 May 2020 12:05

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

Any pointers?

TotallyInformation · 19 May 2020 13:25

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.

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

Steve-Mcl · 19 May 2020 13:33

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.

TotallyInformation · 19 May 2020 14:31

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.

gemini86 · 20 May 2020 13:46

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

Steve-Mcl · 20 May 2020 13:52

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?

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

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)

gemini86 · 20 May 2020 14:40

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:

Steve-Mcl · 20 May 2020 15:03

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?

gemini86 · 20 May 2020 15:22

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.

Steve-Mcl · 20 May 2020 15:33

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)

gemini86 · 20 May 2020 17:05

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?

ristomatti · 20 May 2020 18:11

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...

Steve-Mcl · 20 May 2020 18:15

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.

ristomatti · 20 May 2020 18:27

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

ristomatti · 20 May 2020 18:33

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.

Steve-Mcl · 20 May 2020 18:36

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

Topic		Replies	Views
How to use themes with Monaco editor General	10	4808	7 August 2021
Getting the monaco editor to work in NR 2.x General	34	1403	22 July 2022
Node-Red 2.01 Editor theme General	38	3631	3 October 2021
Add Monaco Editor - how? General	14	2886	25 September 2021
Monaco editor read-only (can't type in function node) General	3	1445	15 December 2021

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

Related topics