# Ui template monaco editor

**URL:** <https://discourse.nodered.org/t/ui-template-monaco-editor/75666>\
**Category:** Dashboard\
**Created:** [24 February 2023 06:35 UTC](https://discourse.nodered.org/t/ui-template-monaco-editor/75666 "2023-02-24T06:35:59Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![nileio](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/nileio/32/9444_2.png) [@nileio](https://discourse.nodered.org/u/nileio)\
**Post date:** [24 February 2023 06:35 UTC](https://discourse.nodered.org/t/ui-template-monaco-editor/75666/1 "2023-02-24T06:35:59Z")

</div>

Hi All,  
I am facing an issue with UI template where monaco editor does not format the code properly leading to linting problems and broke my code. this is happening in version 3.3.1

I originally thought it is a global issue but I confirmed that other nodes such as Function node does not have this problem.

I sometimes have to go through long lines to fix the code.  
The unformatted code has no rules, so for example you can see long lines, same line having multiple function declarations, etc.  
When i copy the code from my editor to UI Template , it jungles the code and I have to go fix it line by line...

Anyone have seen similar issue ? is it something to do with some config I am missing ?  
node-red-dashboard v 3.3.1  
Node-RED version 3.0.2  
Node.js version: v16.17.1

Thank you

---

<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:** [24 February 2023 11:57 UTC](https://discourse.nodered.org/t/ui-template-monaco-editor/75666/2 "2023-02-24T11:57:30Z")

</div>

> [@nileio](#):
>
> issue with UI template where monaco editor does not format the code properly

I was wondering about this also. From what i read on github its a monaco issue  
[https://github.com/microsoft/monaco-editor/issues/2550](https://github.com/microsoft/monaco-editor/issues/2550)

> [@nileio](#):
>
> When i copy the code from my editor to UI Template , it jungles the code and I have to go fix it line by line...

A workaround would be to disable auto-formating on paste `formatOnPaste: false,` ?  
(In your editorTheme codeEditor options section in settings.js)

```javascript
codeEditor: {
      /** Select the text editor component used by the editor.
       * As of Node-RED V3, this defaults to "monaco", but can be set to "ace" if desired
       */
      lib: "monaco",
      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",
        /** 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",
        //fontLigatures: true,
        theme: "vs-dark",
        formatOnType: true,
        formatOnPaste: false,
        useTabStops: true,
        colorDecorators: true,
        fontSize: 14,
        //hover: false,
        "bracketPairColorization.enabled": true,
        minimap: {
          enabled: 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:** [24 February 2023 11:59 UTC](https://discourse.nodered.org/t/ui-template-monaco-editor/75666/3 "2023-02-24T11:59:24Z")

</div>

> [@UnborN](#):
>
> > [@nileio](#):
> >
> > When i copy the code from my editor to UI Template , it jungles the code and I have to go fix it line by line...
> 
> A workaround would be to disable auto-formating on paste `formatOnPaste: false,` ?  
> (In you editorTheme codeEditor options section in settings.js)

It is a known issue in monaco - just press UNDO ctrl+Z after pasting.

---

<div class="post-metadata">

**Author:** ![nileio](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/nileio/32/9444_2.png) [@nileio](https://discourse.nodered.org/u/nileio)\
**Post date:** [24 February 2023 12:02 UTC](https://discourse.nodered.org/t/ui-template-monaco-editor/75666/4 "2023-02-24T12:02:49Z")

</div>

thank you!! indeed it is.. yes I realised the trick of just undo but the real issue is that making modifications in the code becomes really a pain.. copy and paste from editor every change etc.  
Anyway, gotta live with it I suppose until monaco is fixed!!  
Thanks

---

<div class="post-metadata">

**Author:** ![nileio](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/nileio/32/9444_2.png) [@nileio](https://discourse.nodered.org/u/nileio)\
**Post date:** [24 February 2023 12:03 UTC](https://discourse.nodered.org/t/ui-template-monaco-editor/75666/5 "2023-02-24T12:03:43Z")

</div>

I need automatic formatting to work on Function node so I think the Undo option works best for me just with UI Template !  
Thank you for taking the time and providing the references

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [10 March 2023 12:04 UTC](https://discourse.nodered.org/t/ui-template-monaco-editor/75666/6 "2023-03-10T12:04:28Z")

</div>

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.