Show errors in ACE and Monaco editor

Developing Nodes
1

Hi folks,

When javascript syntax errors are generated in the blockly node (which shouldn't happen...):

image

Then I would like the editor to show those errors. But I'm not sure how to do that at the moment...
@Steve-Mcl has working hard to integrate the Monaco editor in Node-RED, but now Node-RED supports both the Monaco and Ace editor. So how can I support both editors? Is it a common API perhaps?

I had a quick look at the function node (here), but I don't see where it is achieved...

And to get hold of the errors, I assume I can use getAnnotations (see here) for both editors?

Thanks for the clarification!!
Bart

2

Not 100% sure what you are asking Bart?

Monaco simply emulates the most common ace functions. Whether ace or Monaco is used it should be transparent.

Correct.

3

Ah ok, I assumed it where completely different editors. Each with its own API...

4

There isn't really an API (there probably should be to simplify transplanting the code editor) but as ace was exposed to node creators from the start (and many node creators accessed ace functionally directly) there was little option but to emulate ace functionally.

Saying that, I did break parts of the code up for easier future editor replacements.

5

Oops, sorry! :grinning:

6

Hey Steve,

I'm back at home ...j
The getAnnotations already works file.
But when I copy the javascript code from the blockly node (see screenshot above) to a function node, then the errors are underlined and I get information about it in a popup:

image

It is not clear to me why I don't get those error indicators in the blockly node editor.
Could that be because our editor is readonly perhaps?

For sure it wasn't me :lying_face:

7

Bart, are you saying the Monaco errors are not shown in the blocky nodes js editor (but obviously you want them?)

I'm not sure if it is a feature or if there is a flag to not validate read-only code.

8

Yes seems so. When I set readonly to false, then the errors are displayed in the blockly node:

image

Will need to start googling ...

9

I see here someone with the same request as me. So it seems this is not supported. Case closed...

10

@BartButenaers later in that same thread is this comment that shows they have added an option to show validation errors in read-only mode - Markers are not shown in readonly models · Issue #311 · microsoft/monaco-editor · GitHub

So it is supported, just needs enabling. Would need @Steve-Mcl to advise if we expose the right things to get to that setting.

11

@knolleary Thanks for having a look at that thread!!!!!

12

Good find.

@BartButenaers can you try setting your instantiation of the editor to ...

            node.aceEditor = RED.editor.createEditor({
                id: 'aceDiv',
                mode: 'ace/mode/nrjavascript',
                value: node.func,
                readOnly: true,
                renderValidationDecorations: "on" 
            });
13

That works fine!
The errors are marked, even in readonly mode.

Thanks a lot guys for your help!!!!!!
Bart