Custom Edit Panes

[knolleary]

With node-red/node-red#3130 the way edit dialogs are structured has changed. Each tab within the dialog (eg properties, description, appearance) is provided by a separate 'edit pane' component.

This allows for much cleaner code reuse between different edit dialog types.

It also allows for a new feature to be exposed - allowing a plugin to add a custom edit pane to any dialog.

The immediate use case we have for this is the Flow Testing plugin that wants to add a testing tab to the edit dialog for any node/flow.

The proposed API is the following:

    RED.editor.registerEditPane( id, definition, [ filter ] );

• id is a string id for the pane. The built-in panes are editor-tab-properties editor-tab-description (although as an internal implementation detail, they are likely the change).
• definition is a function the returns the edit pane definition for a given node
• filter is a function that returns true/false whether this edit pane should be displayed for a given node

The Edit pane definition returned by the definition function should be an object with the following properties:

• label : the title of the edit pane (should be i18n'd)
• name : the name of the edit pane (should be i18n'd)
• iconClass : the class to apply to the tab icon - should be fa fa-something
• create: a function that is passed a DOM element in to which the edit pane should be created
• resize: an optional function that is called when the dialog is resized
• close: an optional function called when the dialog is closed (regardless of whether it was cancelled or confirmed)
• show : an optional function called whenever this edit pane is shown
• apply : an optional function called when the dialog is confirmed and should do the work to apply any changes to the node object. It is also provided an editState object that must be updated to ensure edit history is maintained.

All of the functions are called with a common this context. So if the create function generates an UI element that resize needs to refer to, create could do this.myInput = .... for the resize function to be able to access it as this.myInput.

Here's a skeleton example of an edit pane:

    RED.editor.registerEditPane(
        "editor-tab-testing",
        function(node) {
            return {
                label: "Testing",
                name: "Testing",
                iconClass: "fa fa-paper-plane",
                create: function(container) { },
                resize: function(size) { },
                close: function() { },
                show: function() { },
                apply: function(editState) { }
            }
        },
        function(node) {
            // Return true if this edit pane should be shown for 'node'
            // For example, to display only on inject nodes:
            if (node.type === "inject") {
                return true;
            }
        }
    );

apply editState

The apply callback is passed an editState object. This contains two properties:

• changes : object
• changed : boolean.

If the edit pane makes any modifications to the node, it must:

1. store the existing value in the changes object.
2. set changed to true

It must not make any other modifications to the editState.