Monaco clarification

General
1

Trying to find documentation on the monaco editor and google turned up a number of hits. The most promising was on monaco editor by Microsoft. Is this where I should be looking?

2

Yes, it is the Monaco editor by Microsoft.

What in particular is it you are looking for? How to use its features? Or how to develop JavaScript? Or how to add Monaco to an application/website?

3

Yes, to all three. I read the forum daily and been reading about the addition and decided it was time to explore further what it was what it could do and just maybe learn a little more coding in the process.

4

How to use its features

it is (almost) the same editor as in VSCode so this tips-and-tricks page will help somewhat (there are many differences to full blown VSCode but much is the same).
NOTE: The pallet is raised by F1 (not CTRL+SHIFT+P) - or right click in the text for context menu.

My favourites that I use ALL THE TIME...

  • F1 - Palette menu - where most commands can be access (if you delete the > and type @ you can also navigate your variables and function)
    z6EgNV1Xnt

  • CTRL + D - select next occurrence - multi line editing
    E6gBzOQ7WN

  • CTRL + SPACE - show completion items

  • CTRL + SHIFT + SPACE - show function parameters
    i0vMbRIUUi

How to develop JavaScript

There are lots of resources around the net - but monaco will help here as it can aid you when there is an error in your code

image

And provide you with rich tips...
image

And snippets to help you when you are unsure of the syntax...
MqPjeAEFE0

how to add Monaco to an application/website

See the playground and API here

5 Likes
5

Thank you muchly

6

If I press F1 all I get is Edge help. If I right click I get the menu with F1 as an option but it doesn't do anything.

What do I need to do to get the pallet to work? (undoubtedly something stupidly simple :relaxed:)

Regards

7

Have you enabled Monaco in settings, restarted node-red and refreshed the browser? Are you using new edge (chromium based)? Are you pressing F1 while the cursor is inside the code editor?

8

Unfortunately 'yes' to all. I have also discovered that the keyboard doesn't work. I also have a little graphic of the contents of the function editor in the top right corner.

Contents of setting.js related to editor

    editorTheme: {

        projects: {
            /** To enable the Projects feature, set this value to true */
            enabled: false,

        },
        codeEditor: {
            lib: "monaco",
            options: {
                theme: "vs",

            },
        },
    },

Oh I should probably also mention that I am running under NR 2.0. No warnings or errors in NR start-up log either

9

That works on VScode as well of course and I've always found it a lot easier than the alternative that everyone seems to tout. Maybe because not all Mac's have Function keys?

10

If you mean the minimap on the right then yes, Monaco is loading.

Can you check the browser console log for errors?

And by keyboard doesn't work, do you mean nothing types when you type?

11

Noticed that when I open some of my function nodes, the node is then marked with a red triangle, signifying a problem.
I don't think that there is an actual code problem, and it wasn't identified as such with the ace editor.
I realize that I can select 'ignore the error message', but should it be recognised as an error in the first place?

monaco2
monaco2753Ă—173 25.9 KB

12

@Paul-Reed that'll be a bug with the node.status type - looks like it doesn't know to allow a string message rather than a full status object.

1 Like
13

Keyboard issue; yes nothing happens when I type. Right mouse works OK

6 errors in browser console - all the same as far as I can see

Uncaught TypeError: e[Symbol.iterator] is not a function
    at Object.e.first (editor.js:1)
    at Object.getCommand (editor.js:5)
    at Rn.executeCommand (editor.js:5)
    at Mn._doDispatch (editor.js:5)
    at Mn._dispatch (editor.js:5)
    at HTMLDivElement.<anonymous> (editor.js:5)

and 1 warning

DevTools failed to load source map: Could not load content for http://192.168.1.80:1880/vendor/purify.min.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE
14

Ok thanks. I'll investigate.

Few more questions...

  1. Can you get details of edge version (about screen)
  2. Do you have add-ons?
  3. Can you try chrome or Firefox?
15

Is the status function supposed to permit string? I never knew.

I'll add that to the PR.

2 Likes
16 
Microsoft Edge
Version 91.0.864.41 (Official build) (64-bit)

Adblock Plus, LastPass, uBlock Origin

Firefox v88.0.1 - Same results (do not have Chrome)

Before we get too far down the rabbit hole is there something I should have installed other than NR 2.0 ?

17

Hmmmm. A bit telling.

Did you do npm global install as instructed in release thread?

Lastly, just in case, could you start edge without extensions (from CMD line msedge --disable-extensions)

18

Just tested using exactly the same version (no add-ins) working for me.

Since you also have issue on FF I suspect it is something at your end i'm afraid.

19

Errm no;

Running on Ubuntu 20.04 in a VM on Windows 10. Used TotallyInformation's alternate-node-red-installer to load

Just tried it on a Pi using the official upgrade command with the same result

20

Did you try edge without loading extensions?

This is quite odd.