Bug in multi-line editor docs

Developing Nodes
1

There's a bug in the multiline editor doc Node edit dialog : Node-RED, specifically, it shows:

oneditsave: function() {
    this.exampleText = this.editor.getValue();
    this.editor.destroy();
    delete this.editor;
},

As far as I can tell, this.exampleText = this.editor.getValue(); is a no-op. It should be

$('#node-input-example-editor').val(this.editor.getValue())

It would also have been great to provide a hint about vertical auto-sizing. I gathered the following from looking at the function node source:

    oneditresize(size) {
      const rows = $("#dialog-form>div:not(.node-text-editor-row)");
      let height = $("#dialog-form").height();
      for (var i=0; i<rows.length; i++) {
          height -= $(rows[i]).outerHeight(true);
      }
      var editorRow = $("#dialog-form>div.node-text-editor-row");
      height -= (parseInt(editorRow.css("marginTop"))+parseInt(editorRow.css("marginBottom")));
      $("#dialog-form .node-text-editor").css("height", height+"px");

      this.editor.resize();
    },
2

Can you show me the code that creates node.editor in your oneditprepare? It should not be a no-op function, it should call to the ACE or MONACO internal equivalent function.

3 
    oneditprepare() {
      this.editor = RED.editor.createEditor({
        id: 'node-input-source',
        mode: 'ace/mode/text',
        value: this.source
      })
    },

Full source: node-red-fd-testnodes/testcustom.html at main · flexdash/node-red-fd-testnodes · GitHub

4

Your variable (in the defaults) is different to the example so you should write

this.source = this.editor.getValue();
5

Yup, that's what I tried and it's a no-op. You don't end up with the modified editor content.

6

Could you add console.log("editor", this.editor, this.editor.getValue())
Restart node-red
Edit your node (change the text)
Press "Done"
Check the console?

7

I can, but this.editor.getValue() is not the problem, it does return the modified content. The problem is that the assignment to this.source doesn't do anything.

8

Could that be because you have no (hidden) html element with id "node-input-source"?

9

OK, that is the distinction I was trying to make.

As for why the sample & my suggestion it doesnt work for you but does work for me, the only difference i see is the default var setup.

In MSSQL-PLUS the default is

 query: {
                value: ''
            }

and the oneditsave is this.query = this.editor.getValue();

Could you try that?

10

Let's try something else... Do you know of any simple node that uses multi-line editor? I looked at the function node) and that's where I got the

$('#node-input-example-editor').val(this.editor.getValue())

phrase from.

I'm wondering whether the after the oneditsave the editor itself copies the values from the input fields into this, thereby overwriting this.source. Either way, what's in the docs doesn't work.

11

Can you paste your complete node or point to it?

12

Actually, it is BECAUSE you have set the id of the div to node-input-source : node-red-fd-testnodes/testcustom.html at 2908532360a7e7b0e5f37b7118c0f4033e436ee8 · flexdash/node-red-fd-testnodes · GitHub

change that to node-input-source-editor (or something else) & also change the id: in oneditprepare--> this.editor = RED.editor.createEditor to match

then you can use this.source = this.editor.getValue();

2 Likes
13

I see, ughhh. Thanks for the help!!

Part of the problem is that the docs don't describe at all in what context the onedit* functions run. What is this bound to? What happens in the editor itself before & after each one of these callbacks?

14

https://nodered.org/docs/creating-nodes/properties

The node. Typically, at the start of oneditprepare and oneditsave I put const node = this then everywhere in the code i write node.query = xxx; This way, i need not worry about scope or callbacks affecting this

Lots. Too much to describe & not (completely) documented but in simple terms, it generates the form, links up the variables to ids and hooks up events.

Is your issue fixed? Please mark the solution if so.

2 Likes
15

Ah yes of course. Good catch! I remembered that I had similar issues in the past with the blockly node, but it had become a bit blurred in my head...

1 Like
16

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