# Monaco clarification

**URL:** <https://discourse.nodered.org/t/monaco-clarification/47004>\
**Category:** General\
**Created:** [11 June 2021 01:41 UTC](https://discourse.nodered.org/t/monaco-clarification/47004 "2021-06-11T01:41:29Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![gerry](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gerry/32/21604_2.png) [@gerry](https://discourse.nodered.org/u/gerry)\
**Post date:** [11 June 2021 01:41 UTC](https://discourse.nodered.org/t/monaco-clarification/47004/1 "2021-06-11T01:41:29Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [11 June 2021 06:09 UTC](https://discourse.nodered.org/t/monaco-clarification/47004/2 "2021-06-11T06:09:47Z")

</div>

Yes, it is the [Monaco editor](https://microsoft.github.io/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?

---

<div class="post-metadata">

**Author:** ![gerry](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gerry/32/21604_2.png) [@gerry](https://discourse.nodered.org/u/gerry)\
**Post date:** [11 June 2021 13:05 UTC](https://discourse.nodered.org/t/monaco-clarification/47004/3 "2021-06-11T13:05:40Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [11 June 2021 13:29 UTC](https://discourse.nodered.org/t/monaco-clarification/47004/4 "2021-06-11T13:29:18Z")

</div>

## How to use its features

it is (almost) the same editor as in VSCode so [this tips-and-tricks page](https://code.visualstudio.com/docs/getstarted/tips-and-tricks) 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](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/5/550cf8d06b461933b331c81ee34f439d6f71caa5.gif)

- CTRL + D - select next occurrence - multi line editing  
 ![E6gBzOQ7WN](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/9/491570b4a380145d2fb9f423fac537e9a66fec88.gif)

- CTRL + SPACE - show completion items

- CTRL + SHIFT + SPACE - show function parameters  
 ![i0vMbRIUUi](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/7/17125dcc97d1b56c059ce297d6f118827e7ec1ae.gif)

* * *

### 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](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/9/f9f9f6df182fe781b2a495491a1dbb299df66746.png)

And provide you with rich tips...

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/1/f13c07f3fec798bf520a288097fcae44f275e005.png)

And snippets to help you when you are unsure of the syntax...  
 ![MqPjeAEFE0](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/d/6d933247626f8f4e4067b90aa0e1a6ebb5ec4c1d.gif)

* * *

### how to add Monaco to an application/website

See the playground and API [here](https://microsoft.github.io/monaco-editor/playground.html#extending-language-services-configure-javascript-defaults)

---

<div class="post-metadata">

**Author:** ![gerry](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gerry/32/21604_2.png) [@gerry](https://discourse.nodered.org/u/gerry)\
**Post date:** [11 June 2021 14:00 UTC](https://discourse.nodered.org/t/monaco-clarification/47004/5 "2021-06-11T14:00:40Z")

</div>

Thank you muchly

---

<div class="post-metadata">

**Author:** ![Buckskin](https://avatars.discourse-cdn.com/v4/letter/b/b9e5f3/32.png) [@Buckskin](https://discourse.nodered.org/u/Buckskin)\
**Post date:** [11 June 2021 15:08 UTC](https://discourse.nodered.org/t/monaco-clarification/47004/6 "2021-06-11T15:08:08Z")

</div>

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 😌)

Regards

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [11 June 2021 15:26 UTC](https://discourse.nodered.org/t/monaco-clarification/47004/7 "2021-06-11T15:26:10Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![Buckskin](https://avatars.discourse-cdn.com/v4/letter/b/b9e5f3/32.png) [@Buckskin](https://discourse.nodered.org/u/Buckskin)\
**Post date:** [11 June 2021 15:52 UTC](https://discourse.nodered.org/t/monaco-clarification/47004/8 "2021-06-11T15:52:59Z")

</div>

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

```auto
    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

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [11 June 2021 15:58 UTC](https://discourse.nodered.org/t/monaco-clarification/47004/9 "2021-06-11T15:58:32Z")

</div>

> [@Steve-Mcl](#):
>
> The pallet is raised by F1

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?

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [11 June 2021 16:08 UTC](https://discourse.nodered.org/t/monaco-clarification/47004/10 "2021-06-11T16:08:17Z")

</div>

> [@Buckskin](#):
>
> 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

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?

---

<div class="post-metadata">

**Author:** ![Paul-Reed](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/paul-reed/32/66906_2.png) [@Paul-Reed](https://discourse.nodered.org/u/Paul-Reed)\
**Post date:** [11 June 2021 16:09 UTC](https://discourse.nodered.org/t/monaco-clarification/47004/11 "2021-06-11T16:09:06Z")

</div>

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](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/8/58169edcfa76fcc9736f6c89c74bf1ef99ef8cd8.jpeg)

---

<div class="post-metadata">

**Author:** ![knolleary](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/knolleary/32/3_2.png) [@knolleary](https://discourse.nodered.org/u/knolleary)\
**Post date:** [11 June 2021 16:12 UTC](https://discourse.nodered.org/t/monaco-clarification/47004/12 "2021-06-11T16:12:47Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Buckskin](https://avatars.discourse-cdn.com/v4/letter/b/b9e5f3/32.png) [@Buckskin](https://discourse.nodered.org/u/Buckskin)\
**Post date:** [11 June 2021 16:15 UTC](https://discourse.nodered.org/t/monaco-clarification/47004/13 "2021-06-11T16:15:21Z")

</div>

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

```auto
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

```auto
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

```

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [11 June 2021 16:35 UTC](https://discourse.nodered.org/t/monaco-clarification/47004/14 "2021-06-11T16:35:39Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [11 June 2021 16:36 UTC](https://discourse.nodered.org/t/monaco-clarification/47004/15 "2021-06-11T16:36:52Z")

</div>

> [@knolleary](#):
>
> looks like it doesn't know to allow a string message rather than a full status object

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

I'll add that to the PR.

---

<div class="post-metadata">

**Author:** ![Buckskin](https://avatars.discourse-cdn.com/v4/letter/b/b9e5f3/32.png) [@Buckskin](https://discourse.nodered.org/u/Buckskin)\
**Post date:** [11 June 2021 16:42 UTC](https://discourse.nodered.org/t/monaco-clarification/47004/16 "2021-06-11T16:42:21Z")

</div>

1. 

```auto
Microsoft Edge
Version 91.0.864.41 (Official build) (64-bit)

```

1. 

Adblock Plus, LastPass, uBlock Origin

1. 

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 ?

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [11 June 2021 16:53 UTC](https://discourse.nodered.org/t/monaco-clarification/47004/17 "2021-06-11T16:53:12Z")

</div>

> [@Buckskin](#):
>
> Firefox v88.0.1 - Same results

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`)

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [11 June 2021 17:01 UTC](https://discourse.nodered.org/t/monaco-clarification/47004/18 "2021-06-11T17:01:44Z")

</div>

> [@Buckskin](#):
>
> `Version 91.0.864.41 (Official build) (64-bit)`

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.

---

<div class="post-metadata">

**Author:** ![Buckskin](https://avatars.discourse-cdn.com/v4/letter/b/b9e5f3/32.png) [@Buckskin](https://discourse.nodered.org/u/Buckskin)\
**Post date:** [11 June 2021 19:10 UTC](https://discourse.nodered.org/t/monaco-clarification/47004/19 "2021-06-11T19:10:05Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [11 June 2021 19:24 UTC](https://discourse.nodered.org/t/monaco-clarification/47004/20 "2021-06-11T19:24:18Z")

</div>

> [@Buckskin](#):
>
> Just tried it on a Pi using the official upgrade command with the same result

Did you try edge without loading extensions?

> [@Steve-Mcl](#):
>
> from CMD line `msedge --disable-extensions`

This is quite odd.

[Next page](https://discourse.nodered.org/t/monaco-clarification/47004.md?page=2)