Unable to manipulate values in Editor control via oneditsave()

Developing Nodes
1

With a custom node's parameter configuration editor, I'd like to convert a multi-line textarea's content from a single string to a list of strings, one per line.

Here is how I tried it with mynode.html

        oneditsave: function() {
            var node = this;
            var nameText = $("#node-input-names").val();
            var names = nameText.split('\n');
            console.log(`node: ${Array.isArray(names)}`);
            node.names = names;
        }

....

    <div class="form-tips"><i class="fa fa-hand-o-down"></i> user names</div>
    <div class="form-row">
    	<label for="node-input-names"><i class="fa fa-list"></i>Names</label>
        <textarea id="node-input-names" name="names">john smith</textarea>
    </div>

When saving the node in the editor, I can see the print out "node: true", meaning the text extracted from textarea has been converted to an array of strings.

However, in mynode.js, I plugged

function myNode(this, config) {
    ...
    console.log(`config.names is array: ${Array.isArray(config.names)}`);
    ...

This time I got

config.names is array: false

where I expect it to be

config.names is array: true

I also tried to set the textarea content in oneditsave() and that works as long as I provide a string to it.
What am I missing? Is it that I'm not allowed to convert variable types there?

2

The reason why I don't use an EditableList widget is because the lists in our cases are usually too big to fill in one by one by hand using the "add" button. I'd love to ask my users to use a plaintext format with one item per line, then convert it back to a list automatically using a parser on saving the configuration.

3

As you have given the textarea an id of node-input-names, the editor will be using it's value when saving the values.

As you want to save a custom type, then give the textarea a different id - eg node-input-names-raw

Add code to oneditprepare that turns the array back to a block of text and set the value of the textarea.

The code you have for oneditsave should then work (once you change it to use the new textarea id)

4

Thanks @knolleary for answering during the holidays!

Just to be sure I understand:

By renaming the textarea to node-input-names-raw, you mean I should make my html ui code look like this

    <div class="form-tips"><i class="fa fa-hand-o-down"></i> user names</div>
    <div class="form-row">
    	<label for="node-input-names-raw"><i class="fa fa-list"></i>Names</label>
        <textarea id="node-input-names-raw" name="names">john smith</textarea>
    </div>

This will not affect the way how node.names is parsed by JS as the config, correct?

5

As long as you use oneditprepare and oneditsave to get/set the value of this.names as I described, then it should just work.