JSON-Editor in UI

deme · 27 June 2020 14:22

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

JGKK · 27 June 2020 14:26

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.

deme · 27 June 2020 14:48

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

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

github.com

node-red/node-red/blob/master/packages/node_modules/@node-red/nodes/core/common/20-inject.html

<!--
  Copyright JS Foundation and other contributors, http://js.foundation

  Licensed under the Apache License, Version 2.0 (the "License");
  you may not use this file except in compliance with the License.
  You may obtain a copy of the License at

  http://www.apache.org/licenses/LICENSE-2.0

  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS,
  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  See the License for the specific language governing permissions and
  limitations under the License.
-->

<script type="text/x-red" data-template-name="inject">
    <div class="form-row">
        <label for="node-input-payload"><i class="fa fa-envelope"></i> <span data-i18n="common.label.payload"></span></label>
        <input type="text" id="node-input-payload" style="width:70%">

This file has been truncated. show original

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

afelix · 27 June 2020 14:51

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:

github.com

node-red/node-red/blob/708620f929199b392c5a30cae502b540f94546d0/packages/node_modules/@node-red/editor-client/src/js/ui/editor.js#L2437


      
                  customEditTypes[type].show(options);
              } else {
                  console.log("Unknown type editor:",type);
              }
          }
          
          function createEditor(options) {
              var el = options.element || $("#"+options.id)[0];
              var toolbarRow = $("<div>").appendTo(el);
              el = $("<div>").appendTo(el).addClass("red-ui-editor-text-container")[0];
              var editor = ace.edit(el);
              editor.setTheme("ace/theme/tomorrow");
              var session = editor.getSession();
              session.on("changeAnnotation", function () {
                  var annotations = session.getAnnotations() || [];
                  var i = annotations.length;
                  var len = annotations.length;
                  while (i--) {
                      if (/doctype first\. Expected/.test(annotations[i].text)) { annotations.splice(i, 1); }
                      else if (/Unexpected End of file\. Expected/.test(annotations[i].text)) { annotations.splice(i, 1); }
                  }

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

github.com

node-red/node-red/blob/708620f929199b392c5a30cae502b540f94546d0/packages/node_modules/@node-red/editor-client/src/js/ui/editor.js#L2417


      
                      subflowEditor = null;
                      editStack.pop();
                      editing_node = null;
                  },
                  show: function() {
                  }
              }
              RED.tray.show(trayOptions);
          }
          
          function showTypeEditor(type, options) {
              if (customEditTypes.hasOwnProperty(type)) {
                  if (editStack.length > 0) {
                      options.parent = editStack[editStack.length-1].id;
                  }
                  editStack.push({type:type});
                  options.title = options.title || getEditStackTitle();
                  options.onclose = function() {
                      editStack.pop();
                  }
                  customEditTypes[type].show(options);

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:

github.com

node-red/node-red/blob/708620f929199b392c5a30cae502b540f94546d0/packages/node_modules/@node-red/editor-client/src/js/ui/common/typedInput.js#L63-L81


      
          expand: function() {
              var that = this;
              var value = this.value();
              try {
                  value = JSON.stringify(JSON.parse(value),null,4);
              } catch(err) {
              }
              RED.editor.editJSON({
                  value: value,
                  complete: function(v) {
                      var value = v;
                      try {
                          value = JSON.stringify(JSON.parse(v));
                      } catch(err) {
                      }
                      that.value(value);
                  }
              })
          }

afelix · 30 June 2020 12:22

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.

deme · 30 June 2020 13:41

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.

system · 29 August 2020 13:41

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

Topic		Replies	Views
Have an "out of the box" editor for inputs Developing Nodes	3	646	22 October 2019
Expandable code editor for ui_template node Feature Requests	6	1021	7 April 2019
Full node appearance General	9	795	30 October 2019
Better way to edit template node Dashboard	6	1373	26 February 2019
Using a rich text editor in the edit dialog Developing Nodes	3	814	28 September 2020

JSON-Editor in UI

Related Topics