JSON-Editor in UI

Developing Nodes
1

Hello,

I am trying to build a node which allows the user to edit a JSON in the UI. To provide the user some visual clues about the structure of the JSON, I wanted to use the same IDE that is used in the node-red function editor: Ace

As starting-point, I wanted to include the editor in a template node:

<div id="editor">some text</div>
<script src="src/ace.js" type="text/javascript" charset="utf-8"></script>
<script>
    var editor = ace.edit("editor");
</script>

I am currently struggling what the correct path for ace.js is.

Furthermore, afterall, is this the correct approach? Did I miss any existing node which allows the user to edit a JSON in the UI?

Thanks

2

The inject node and change node both allow you to edit json to be send as a payload. So maybe look at their code as the json editor there includes automatic formatting and a visual json builder.

image
image1003Ă—605 66.4 KB
image
image1029Ă—629 66.9 KB

1 Like
3

this is basically what I want to have as a regular ui-node.

If I am not mistaken, the corresponding file is this:

However, I am completly at a loss where the JSON editor is to be found...

4

Rather than directly calling ace.edit, the Node-RED core has pre-existing editors available. One worthwhile to take a look at how it works, and how to expand it to a full width editor, is the Template node from the functions category: node-red/packages/node_modules/@node-red/nodes/core/function/80-template.html at master · node-red/node-red · GitHub

The way this works is that in onEditPrepare a call is placed to RED.editors.createEditor, which puts the editor in place.

 this.editor = RED.editor.createEditor({
    id: 'node-input-template-editor',
    mode: 'ace/mode/html',
    value: $("#node-input-template").val()
});

What you set as mode is the format used by default, as the template node includes a list of options to provide highlighting for. For json you would use mode: 'ace/mode/json'.

The difference with the code you're seeing here for expanding is that rather than call editText you have to call editJson, which leads to this part of code: node-red/packages/node_modules/@node-red/editor-client/src/js/ui/editors/json.js at master · node-red/node-red · GitHub

Within the RED.editors.createEditor function, the call to ace.edit is made:

Then, on showTypeEditor handles the logic for displaying the exact type editor, which is what happens behind the scenes when calling editJson:

As the JSON part of the inject node is handled as part of the TypedInput, it sadly isn't found within the inject node's code. For showing this view, you could combine the knowledge from the template node as shown above, with what it shows there for the expand button function, but if you don't set the width to infinity and use editJSON rather than editText, you get the same overlay as the inject node.

I hope this helps, I'm currently working in putting something similar in place for uibuilder, rather than have it use the regular ace.edit calls as using those will mean the expanding won't work on all devices.

Here's the specific code for expanding in the inject node by the way, through the typedInput:

4 Likes
5

hi @deme,
I've seen your message in DM, but I'm not interested in doing the development on your node for you. I've other projects eating up most of my time. For future readers of this topic, the author has seen my response and has considered this too difficult to implement. He's looking for people to instead implement it for him in his node, potentially paid through a donation.
Maybe someone else is interested in picking this up.

6

to add to this: the required know-how to implement this exceeds my current knowledge, hence I will not be able to develop this on my own.

If somebody is interested in the functionality above, I would be willing to "kickstart" the development (no strings attached, ideally you will publish the code as open-source). Please contact me if you are interested.

7

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.