# Pasting into Monaco Editor Query

**URL:** <https://discourse.nodered.org/t/pasting-into-monaco-editor-query/52235>\
**Category:** General\
**Tags:** monaco\
**Created:** [14 October 2021 23:53 UTC](https://discourse.nodered.org/t/pasting-into-monaco-editor-query/52235 "2021-10-14T23:53:59Z")\
**Posts on this page:** 20\
**Page:** 1

<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:** [14 October 2021 23:53 UTC](https://discourse.nodered.org/t/pasting-into-monaco-editor-query/52235/1 "2021-10-14T23:53:59Z")

</div>

I have undoubtedly missed something somewhere but whenever I paste JavaScript into the Monaco editor any formatting is lost. What should I be doing to retain any format?

---

<div class="post-metadata">

**Author:** ![UnborN](https://avatars.discourse-cdn.com/v4/letter/u/4491bb/32.png) [@UnborN](https://discourse.nodered.org/u/UnborN)\
**Post date:** [15 October 2021 00:46 UTC](https://discourse.nodered.org/t/pasting-into-monaco-editor-query/52235/2 "2021-10-15T00:46:21Z")

</div>

In your .node-red folder there is the `settings.js` file  
where you can configure some [options for the Monaco Editor](https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.ieditorconstructionoptions.html#formatonpaste)

**Example:**

```auto
editorTheme: {
    page: {
      css: "/Users/User/.node-red/myCustom.css",
    },
    codeEditor: {
      lib: "monaco",
      options: {
        theme: "vs-dark",
        formatOnType: false,
        formatOnPaste: false,
        useTabStops: true,
        colorDecorators: true,
        fontSize: 14,
        "bracketPairColorization.enabled": true,
        minimap: {
          enabled: false,
        },
      },
    },
    projects: {
      // To enable the Projects feature, set this value to true
      enabled: false,
    },
  },

```

I believe if you set these two options to `false` it should stop any auto formatting

```auto
formatOnType: false,
formatOnPaste: false,

```

---

<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:** [15 October 2021 06:55 UTC](https://discourse.nodered.org/t/pasting-into-monaco-editor-query/52235/3 "2021-10-15T06:55:59Z")

</div>

> [@UnborN](#):
>
> ```auto
> minimap: {
> enabled: false,
> },
> 
> ```

Whhhhhhy 😉

I find the minimap incredibly useful - I can spot code patterns and move straight to the area of interest

> [@UnborN](#):
>
> `"bracketPairColorization.enabled": true,`

I use this too - great feature.

> [@UnborN](#):
>
> ```auto
> formatOnPaste: false,
> 
> ```

I leave this on too - sometimes it does mess up the format - BUT - you simply press undo (CTRL+Z) immediately after pasting & it undoes the auto formatting. I find in JS it works well but sometimes in the template node pasting code between script tags or style tags is where it messes up.

---

<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:** [15 October 2021 10:40 UTC](https://discourse.nodered.org/t/pasting-into-monaco-editor-query/52235/4 "2021-10-15T10:40:40Z")

</div>

> [@Steve-Mcl](#):
>
> Whhhhhhy

It just gets in the way!

As we are sharing - here are my settings:

```js
        codeEditor: {
            /** Select the text editor component used by the editor.
             * Defaults to "ace", but can be set to "ace" or "monaco"
             */
            lib: 'monaco', // 'ace',
            options: {
                /** The follow options only apply if the editor is set to "monaco"
                 *
                 * 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-theme"
                 */
                theme: 'vs-dark', // 'vs',
                /** other overrides can be set e.g. fontSize, fontFamily, fontLigatures etc.
                 * for the full list, see https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.istandaloneeditorconstructionoptions.html
                 */
                fontSize: 14,
                //fontFamily: "Cascadia Code, Fira Code, Consolas, 'Courier New', monospace",
                fontFamily: 'Consolas, "Courier New", monospace',
                fontLigatures: false,
                colorDecorators: true,
                dragAndDrop: true,
                linkedEditing: true,
                minimap: {
                    enabled: false,
                },
                mouseWheelZoom: true,
                showFoldingControls: 'always',
                useTabStops: true,
            },
        },

```

🙂

---

<div class="post-metadata">

**Author:** ![UnborN](https://avatars.discourse-cdn.com/v4/letter/u/4491bb/32.png) [@UnborN](https://discourse.nodered.org/u/UnborN)\
**Post date:** [15 October 2021 11:45 UTC](https://discourse.nodered.org/t/pasting-into-monaco-editor-query/52235/5 "2021-10-15T11:45:23Z")

</div>

regarding the `minimap` .. for the same reason as Julian .. to much info .. besides my code is not hundred of lines in order to need it 😉

`"bracketPairColorization.enabled": true,` this is a nice addition with the new version. i saw that the monaco version was bumped in the new NR beta and read in monaco changelog that they added this option and tested it out. it makes the code more readable.

`formatOnPaste: false,` me too i have it to true. i just edited it as an example for @Buckskin

---

<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:** [15 October 2021 13:55 UTC](https://discourse.nodered.org/t/pasting-into-monaco-editor-query/52235/6 "2021-10-15T13:55:38Z")

</div>

Thank you everyone I have set `formatOnPaste: false,` and it sorted out my issues with pasting. What is annoying is that I knew about CTRL+Z because I use it all the time when editing. It was just that when I pasted a lot of Javascript code into a `ui_template` and the whole thing looked so totally messed up, it never occurred to me to try it. Since neither of you use `formatOnPaste: false,` I will keep it in and see if it causes any issues.

I have set `"bracketPairColorization.enabled": true,` but so far I haven't seen any effect. Is there anything else that should be set?

Sorry Steve, but I also dumped the minimap, it was just cluttering up my workspace. 😀

---

<div class="post-metadata">

**Author:** ![UnborN](https://avatars.discourse-cdn.com/v4/letter/u/4491bb/32.png) [@UnborN](https://discourse.nodered.org/u/UnborN)\
**Post date:** [15 October 2021 14:20 UTC](https://discourse.nodered.org/t/pasting-into-monaco-editor-query/52235/7 "2021-10-15T14:20:06Z")

</div>

> [@Buckskin](#):
>
> I have set `"bracketPairColorization.enabled": true,` but so far I haven't seen any effect. Is there anything else that should be set?

As mentioned, its an option for the new version of Monaco.  
Only available in the [Node-red 2.1.0-beta](https://discourse.nodered.org/t/node-red-2-1-0-beta-2-released/52212/6) for now.

---

<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:** [15 October 2021 14:24 UTC](https://discourse.nodered.org/t/pasting-into-monaco-editor-query/52235/8 "2021-10-15T14:24:07Z")

</div>

Then I still have a problem because I am trialling this on Node-red 2.1.0-beta.2

---

<div class="post-metadata">

**Author:** ![UnborN](https://avatars.discourse-cdn.com/v4/letter/u/4491bb/32.png) [@UnborN](https://discourse.nodered.org/u/UnborN)\
**Post date:** [15 October 2021 14:32 UTC](https://discourse.nodered.org/t/pasting-into-monaco-editor-query/52235/9 "2021-10-15T14:32:11Z")

</div>

hmm strange  
1.can you show us that part of you settings.js file.  
2. have you restarted node-red  
3. have you refreshed / cleared cache of your browser ?

ps. just noticed that you mentioned that the js you have is in **ui\_template**.  
embedded script coloring may not work for Monaco at the moment. Check if `bracketPairColorization` works in a Function node.

---

<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:** [15 October 2021 14:58 UTC](https://discourse.nodered.org/t/pasting-into-monaco-editor-query/52235/10 "2021-10-15T14:58:35Z")

</div>

Tried all that and have now noticed that {} & () have all turned colours. So probably WAS working, just not as I was expecting.

Is there an easy way to change the colours as I like a light theme and the blue, green etc do not show up that well?

Thank you for your help.

---

<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:** [15 October 2021 15:10 UTC](https://discourse.nodered.org/t/pasting-into-monaco-editor-query/52235/11 "2021-10-15T15:10:51Z")

</div>

There are a lot of Monaco themes bundled. You can even create your own.

---

<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:** [15 October 2021 15:29 UTC](https://discourse.nodered.org/t/pasting-into-monaco-editor-query/52235/12 "2021-10-15T15:29:25Z")

</div>

For reference, here a list of all themes available: [node-red/packages/node\_modules/@node-red/editor-client/src/vendor/monaco/dist/theme at master · node-red/node-red · GitHub](https://github.com/node-red/node-red/tree/master/packages/node_modules/@node-red/editor-client/src/vendor/monaco/dist/theme)

---

<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:** [15 October 2021 19:04 UTC](https://discourse.nodered.org/t/pasting-into-monaco-editor-query/52235/13 "2021-10-15T19:04:43Z")

</div>

> [@Buckskin](#):
>
> bracketPairColorization.enabled

Can't wait until the new coloured alignment lines make it into live and then into Monaco. I'm trying them on VScode and I really like them

---

<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:** [15 October 2021 19:24 UTC](https://discourse.nodered.org/t/pasting-into-monaco-editor-query/52235/14 "2021-10-15T19:24:09Z")

</div>

Yeah, its pretty sweet...

![kiYvI1NhqQ](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/9/2975641dcc027062494dd8fd1a5277ae44bb1afd.gif)

---

<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:** [15 October 2021 22:11 UTC](https://discourse.nodered.org/t/pasting-into-monaco-editor-query/52235/15 "2021-10-15T22:11:36Z")

</div>

OK, looked through a bunch of themes but cannot find any that change the bracket colours. Apparently it is done like so;

```auto
"editor.bracketPairColorization.enabled": true,
"workbench.colorCustomizations": {
    "editorBracketHighlight.foreground1": "#B48EAD",
    "editorBracketHighlight.foreground2": "#A3BE8C",
    "editorBracketHighlight.foreground3": "#EBCB8B",
    "editorBracketHighlight.foreground4": "#D08770",
    "editorBracketHighlight.foreground5": "#BF616A",
    "editorBracketHighlight.foreground6": "#abb2c0",
    "editorBracketHighlight.unexpectedBracket.foreground": "#db6165"
},

```

But how do I apply that to the node-red version?

---

<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:** [15 October 2021 22:32 UTC](https://discourse.nodered.org/t/pasting-into-monaco-editor-query/52235/16 "2021-10-15T22:32:29Z")

</div>

where did you get this info from? (link please)

I suspect these are VSCode specific

---

<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:** [15 October 2021 22:51 UTC](https://discourse.nodered.org/t/pasting-into-monaco-editor-query/52235/17 "2021-10-15T22:51:57Z")

</div>

What you can do instead is...

Pick a theme you like, edit it & add `bold` font style to the brackets e.g...

- in `settings.js`, set the theme to `dawn`
- Open `packages/node_modules/@node-red/editor-client/public/vendor/monaco/dist/theme/dawn.json` and add the following entries...

```json
    {
      "fontStyle": "bold",
      "token": "delimiter.parenthesis.js"
    },
    {
      "fontStyle": "bold",
      "token": "delimiter.bracket.js"
    },

```

Result...  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/1/0123bdb26a5718f1f29d51e62736d908ec444bfe.png)

  

* * *
  

If you want to style anything in monaco, you need to find the token then update (or add) it to the JSON theme like i did above ↑  
 ![EIgJs8mH0x](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/a/aa967e60ce45c9cde4a58a644f9fad0e511cf83f.gif)

---

<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:** [15 October 2021 23:13 UTC](https://discourse.nodered.org/t/pasting-into-monaco-editor-query/52235/18 "2021-10-15T23:13:54Z")

</div>

> [@Steve-Mcl](#):
>
> I suspect these are VSCode specific

@Buckskin I stand corrected.

You can adjust bracket colours by adding those entries to the theme colors

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/a/cad2eba8c910a6381c9d40d08425663dd0e68f92.png)

---

<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:** [16 October 2021 13:39 UTC](https://discourse.nodered.org/t/pasting-into-monaco-editor-query/52235/20 "2021-10-16T13:39:00Z")

</div>

Steve, they were from the VSCode info site.

I am quite happy with the `vs` theme so I would like to add the changes as shown, only - where is the  
`vs` theme file located? I have search my Pi for` packages/node_modules/@node-red/editor-client/src/vendor/monaco/dist/theme` and have been unable to locate it

---

<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:** [16 October 2021 13:51 UTC](https://discourse.nodered.org/t/pasting-into-monaco-editor-query/52235/21 "2021-10-16T13:51:16Z")

</div>

Sorry, that was my src tree.

Its usually here on linux / pi

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/2/027e319af621d4500f80e4fb3ec7f98bbd0fded2.png)

> [@Buckskin](#):
>
> where is the  
> `vs` theme file located?

Thats built in. You simply create a new theme that inherits `vs` with your tweaks

e.g...

**my-theme.json**

```json
{
    "base": "vs",
    "inherit": true,
    "rules": [
        {
            "fontStyle": "bold",
            "token": "delimiter.parenthesis.js"
        },
        {
            "fontStyle": "bold",
            "token": "delimiter.bracket.js"
        }
    ],
    "colors": {
        "editorBracketHighlight.foreground1": "#B48EAD",
        "editorBracketHighlight.foreground2": "#A3BE8C",
        "editorBracketHighlight.foreground3": "#EBCB8B",
        "editorBracketHighlight.foreground4": "#D08770",
        "editorBracketHighlight.foreground5": "#BF616A",
        "editorBracketHighlight.foreground6": "#abb2c0",
        "editorBracketHighlight.unexpectedBracket.foreground": "#db6165"
    }
}

```

**settings.js**

```json
        codeEditor: {
            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-theme"
                // */
                theme: "my-theme",
        }

```

[Next page](https://discourse.nodered.org/t/pasting-into-monaco-editor-query/52235.md?page=2)