Editor: Enable line wrapping of long lines

It would be great to enable line wrapping of long lines in the editor.
The editor pane is slim compared to a "real" editor, and the Monaco editor supports that out of the box. Just need the option to enable it.

You can add that in your settings file.

        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: "vs-dark",
                wordWrap: true,
                fontSize: 14,
                fontLigatures: true,
                fontFamily: "Cascadia Code, Fira Code, Consolas, 'Courier New', monospace"
            }
        }

Yes, but should be in the F1 menu, since it (at least for me) is something you toggle often (wrapping enables you too see everything without scrolling all the time, but wrapping also can make the code view ugly).

Although programmatically, it is possible to add to the menu, this seems like something that should be requested on the monaco repository.

If you feel strongly enough about it, we'd be happy to consider a pull request.

Not sure if I know enough, but in VSCode the "View: Toggle Word Wrap" is part of the F1 menu. Whether that is then a Monaco or VSCode only thing, I'm not sure, since all the "View:xxx" items are not availabile in node-red

Lets put it this way, I dont remove anything from Monaco default f1 menu. So I would suggest VSCode pragmatically added "View: Toggle Word Wrap"

Might be worth asking why "View: Toggle Word Wrap" is not in monaco on the monaco repo? It may be just be some existing (obscure) option to setup.

I think you can call editor.updateOptions({ wordWrap: "on" }) (and off) to toggle it... so maybe that can be bound to a key inside the monaco scope... I've no idea how to just add to the existing F1 list.

Here is how I did it for themes...

@Steve-Mcl, quick question as I'm not super familiar with the backend of Node Red, what is the path+filename of the settings file you mentioned? Thanks in advance.

From the docs...

If you are not sure which settings file Node-RED is using, you should check the log output when Node-RED starts up. It will log the full path to the file:

22 Jun 12:34:56 - [info] Settings file : /Users/nol/.node-red/settings.js

Thank you, sometimes it's just easier to AAFQ than RTFM :wink::+1:

1 Like