arnauorriols / node-red-contrib-python-function

Write Python functions in Node-RED!
MIT License
41 stars 23 forks source link

Support for monaco in node-red 2.0.0 #15

Open Steve-Mcl opened 3 years ago

Steve-Mcl commented 3 years ago

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 commented 2 years ago

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

Steve-Mcl commented 2 years ago

@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)