JSON Typed into with schema validation

Developing Nodes
1

Has anyone found a good way to allow the user to edit a JSON document that enforce schema validation?

Currently I use the JSON TypedInput, but the only way I found to implement the schema validation to return false on validation error. It does not give the best user experience that they have to close the editor to see the validation error.

2

Good question :thinking:

If the JSON is in unexpanded input form, a tooltip may appear below with an error message. However, if the input is expanded (editor), I believe there is nothing (apart JSON correction with Monaco).

Validation is done on input, switching to an editor does not trigger validation until the editor is closed.

I don't think we can extend validation to the editor :confused:

returns String to show an error message

Note that the current version of NR may prevent you from seeing the tooltip
See the FR and actual work here

3

Is that true, I seem to remember seeing a red outline to the editor if the JSON isn't valid?

But in any case, if you could add a schema validation extension to the Monaco editor, it should be possible to tie into its validation. Dynamic display should then be possible anyway as long as there is some event to tie into. I'm not familiar with the internals of Monaco but as it is specifically built with live Linting in mind, I would expect there to be something that can be used.

Not quite the same but shows that it should be possible: reactjs - React monaco editor json schema validation event - Stack Overflow

And this:

4

This is Monaco editor validation - not input validation

Have to ask Steve if it’s possible.

5

Yes, but as long as the Monaco validations creates an event, then the Node-RED Editor can respond to it. The REACT example I shared is a very similar parallel. There is nothing special about the Editor, it is a web page when all is said and done.

:slight_smile:

Looks like JSON Schema validation is available in Monaco itself?

https://codesandbox.io/p/sandbox/monaco-editor-json-validation-example-gue0q?file=%2Fsrc%2Findex.js

6

Yes, it is. A call to monaco.languages.json.jsonDefaults would do it. However, the user would need to first duplicate the json model (i.e. as json_my_node model) and apply it to THAT model as all the the models are shared (i.e. we would now want all JSON inputs to be validated with the schema this node adds)

7

And is it possible to link it to typedInput?
Wouldn't it be simpler for the developer to use RED.editor.editJSON with schema property?

8

Not without some forethought but creating duplicate model, setting the schema and then opening the editor through ctrateEditor (providing the name of the new model) should surface any schema errors.

Untested and written from phone on a metro on the way to Newcastle :beers: :joy:

9

This is to avoid that but I think we have to recreate it?

Tkt :wink: :beers:

10

Thanks for all the replies. It sounds like Monaco editor is the way to go! Next step is to browse the function node source code, to see if I can learn how to integrate Monaco in my UI..

11

RED.editor.createEditor

E.g.
Create:

Destroy:

1 Like
12

@Thomassorensen Hello. I am learning Sparkplug B protocol with your node-red-contrib-mqtt-sparkplug-plus (node). Do you know why metric data "is_historical" does not work with node "mqtt sparkplug device"? It works with a "the mqtt sparkplug out" in the ignition scada. It would be nice if it worked with a "mqtt sparkplug device" also. I only found where to reach you in this discussion, so I am sorry that this topic is not complied with disscution here. Thank you for your answer.