Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support for monaco in node-red 2.0.0 #15

Open
Steve-Mcl opened this issue Jun 13, 2021 · 2 comments
Open

Support for monaco in node-red 2.0.0 #15

Steve-Mcl opened this issue Jun 13, 2021 · 2 comments

Comments

@Steve-Mcl
Copy link

Hi,

node-red 2.0.0 has a new additional editor - see here : https://discourse.nodered.org/t/node-red-2-0-0-beta-1-released/46990

It can be enabled in settings.js as described in the post.

However, as your node does not use the built in API to build the code editor, your node continues to use the ACE editor.

If you wish to support the users choice, you can fix this up be doing the following...

in oneditprepare, replace all of this...

            var langTools = ace.require('ace/ext/language_tools');
            this.editor = ace.edit('node-input-func-editor');
            this.editor.setTheme('ace/theme/tomorrow');
            this.editor.getSession().setMode('ace/mode/python');
            this.editor.setValue($("#node-input-func").val(), -1);
            this.editor.setOptions({
                    enableBasicAutocompletion: true,
                    enableLiveAutocompletion: true,
                    highlightSelectedWord: true,
                    useSoftTabs: true,
                    tabSize: 4,
            });
            var noderedKeywords = [
                'msg', 'msg.payload', 'node', 'node.send',
                'node.log', 'node.warn', 'node.error', 'node.status'
            ];
            this.editor.completers.push({
                getCompletions: function (state, session, pos, prefix, callback) {
                    callback(null, noderedKeywords.map(function (word) {
                        return {
                            name: word,
                            value: word,
                            score: 0,
                            meta: 'Node-RED'
                        };
                    }));
                }
            });
            this.editor = RED.editor.createEditor({
                id: 'node-input-func-editor',
                mode: 'ace/mode/python',
                value: $("#node-input-func").val()
            });

and in oneditsave change the line delete this.editor; to this.editor.destroy();


NOTES:
At present, the Monaco editor only does syntax highlighting for python (same as ACE editor) but I will eventually be adding python snippets like this...
OHlvtdO17c

@YAMLcase
Copy link

@Steve-Mcl Have you made any progress on switching to monaco? I'd like to try it out

@Steve-Mcl
Copy link
Author

@YAMLcase Monaco is now the default in Node-RED v3.

I have been running node-red with monaco for over 1 year (as have many others)

I'd like to try it out

Then enable as described in the link above OR better still, upgrade to node-red v3.0.0


The issue raised here is to request the author to fix their node as it currently does NOT use the provided node-red APIs when building the edit panel in node-red (essentially, this node is stuck on ACE and come node-red V4 will completely fail as we will be deleting ACE completely)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants