bartbutenaers / node-red-contrib-blockly

A Node Red node for visual programming a function using Blockly
Apache License 2.0
89 stars 22 forks source link

node-red v2 Monaco compatability #72

Closed Steve-Mcl closed 3 years ago

Steve-Mcl commented 3 years ago

Hi Bart, your blockly node calls direct operations on ace editor & as there is no error handling, form initialisation is not completed - braking the UI of your node when monaco is the chosen editor.

This code calls textInput.setReadOnly ...

        node.aceEditor = RED.editor.createEditor({
                id: 'aceDiv',
                mode: 'ace/mode/javascript',
                value: node.func,
                globals: { 
                    msg:true,
                    context:true,
                    RED: true,
                    util: true,
                    flow: true,
                    global: true,
                    console: true,
                    Buffer: true,
                    setTimeout: true,
                    clearTimeout: true,
                    setInterval: true,
                    clearInterval: true
                }
            });

            node.aceEditor.setFontSize(14); 

            // It is not allowed to change the generated Javascript code.
            // Indeed we cannot generate an updated Blockly workspace, starting from the updated Javascript code.
            // By having a read-only Javascript editor, we can make sure that the workspace and Js code are always in sync ...
            node.aceEditor.textInput.setReadOnly(true);

node.aceEditor.textInput.setReadOnly(true); is not supported.

I will see if Nick will permit the addition of editor.setReadOnly (as the ACE API defines) but not the textInput object (I have no idea even what that is?)

NOTE: The normal initialisation of the node-red code editor is done by setting the readOnly option when initialising the editor & for serverside functionality, use ace/mode/nrjavascript (no need for all the globals)

E.g., replace all the above code with just this...

        node.aceEditor = RED.editor.createEditor({
                id: 'aceDiv',
                mode: 'ace/mode/nrjavascript', //<<tell editor this is serverside NodeRed editor
                value: node.func,
                readOnly: true //<< tell editor to be readonly
            });
        node.aceEditor.setFontSize(14); 

I have tested this ↑ modification and it fixes blockly for NR2... image

Would you be kind enough to update and re-publish?

PS I have not tested this in ACE mode yet, but it should work fine.

bartbutenaers commented 3 years ago

Hey Steve, Thanks for your detailed analysis! Only the timing is a bit bad... I have neglected this node for 3 years, and the master branch is not production ready anymore... But we are finalizing a major 2.0.0 beta release. Is it ok if we fix it in that beta, which will be released soon? Because the Node-RED 2.0.0 is also a beta... Bart

Steve-Mcl commented 3 years ago

Of course Bart. Thanks.

bartbutenaers commented 3 years ago

The fix is implemented for both the Javascript and XML editors in the "release-1.1.0" branch. The Monaco xml editor in Node-RED 2.0 beta 1 looks much better:

image

Thanks for the quick intervention Steve!