Ui template monaco editor

Dashboard
1

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

2

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

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

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,
        }
      },
    },
3

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

4

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

5

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

1 Like
6

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