Edit panes should not need to create own tray content div

packages/node_modules/@node-red/editor-client/src/js/ui/editor.js

@@ -26,7 +26,7 @@ RED.editor = (function() {
 
     var customEditTypes = {};
     var editPanes = {};
-    var filteredEditPanes = [];
+    var filteredEditPanes = {};
 
     var editTrayWidthCache = {};
 
@@ -414,10 +414,10 @@ RED.editor = (function() {
                 element:editorTabEl,
                 onchange:function(tab) {
                     editorContent.children().hide();
+                    tab.content.show();
                     if (tab.onchange) {
                         tab.onchange.call(tab);
                     }
-                    tab.content.show();
                     if (finishedBuilding) {
                         RED.tray.resize();
                     }
@@ -427,6 +427,16 @@ RED.editor = (function() {
             });
 
             var activeEditPanes = [];
+
+            nodeEditPanes = nodeEditPanes.slice();
+            for (var i in filteredEditPanes) {
+                if (filteredEditPanes.hasOwnProperty(i)) {
+                    if (filteredEditPanes[i](node)) {
+                        nodeEditPanes.push(i);
+                    }
+                }
+            }
+
             nodeEditPanes.forEach(function(id) {
                 try {
                     var editPaneDefinition = editPanes[id];
@@ -434,15 +444,17 @@ RED.editor = (function() {
                         if (typeof editPaneDefinition === 'function') {
                             editPaneDefinition = editPaneDefinition.call(editPaneDefinition);
                         }
+                        var editPaneContent = $('<div>', {class:"red-ui-tray-content"}).appendTo(editorContent).hide();
+                        editPaneDefinition.create.call(editPaneDefinition,editPaneContent,node);
                         var editTab = {
                             id: id,
                             label: editPaneDefinition.label,
                             name: editPaneDefinition.name,
                             iconClass: editPaneDefinition.iconClass,
-                            content: editPaneDefinition.create.call(editPaneDefinition,editorContent,node).hide(),
+                            content: editPaneContent,
                             onchange: function() {
-                                if (editPaneDefinition.onchange) {
+                                if (editPaneDefinition.show) {
-                                    editPaneDefinition.onchange.call(editPaneDefinition,node)
+                                    editPaneDefinition.show.call(editPaneDefinition,node)
                                 }
                             }
                         }
@@ -1901,10 +1913,9 @@ RED.editor = (function() {
 
         registerEditorPane: function(type, definition, filter) {
             if (filter) {
-                filteredEditPanes.push({type, definition, filter})
+                filteredEditPanes[type] = filter
-            } else {
-                editPanes[type] = definition;
             }
+            editPanes[type] = definition;
         }
     }
 })();

packages/node_modules/@node-red/editor-client/src/js/ui/editors/panes/appearance.js

@@ -6,7 +6,7 @@
             name: RED._("editor-tab.appearance"),
             iconClass: "fa fa-object-group",
             create: function(container, node) {
-                this.content = $('<div>', {class:"red-ui-tray-content"}).appendTo(container);
+                this.content = container;
                 buildAppearanceForm(this.content,node);
 
                 if (node.type === 'subflow') {
@@ -20,7 +20,6 @@
                         this.isDefaultIcon = true;
                     }
                 }
-                return this.content;
             },
             resize: function(node, size) {
 

packages/node_modules/@node-red/editor-client/src/js/ui/editors/panes/description.js

@@ -7,9 +7,8 @@
             iconClass: "fa fa-file-text-o",
 
             create: function(container, node) {
-                var content = $('<div>', {class:"red-ui-tray-content"}).appendTo(container);
+                this.editor = buildDescriptionForm(container,node);
-                this.editor = buildDescriptionForm(content,node);
+                RED.e = this.editor;
-                return content;
             },
             resize: function(node, size) {
                 this.editor.resize();

packages/node_modules/@node-red/editor-client/src/js/ui/editors/panes/envVarProperties.js

@@ -6,12 +6,10 @@
             name: RED._("editor-tab.envProperties"),
             iconClass: "fa fa-list",
             create: function(container, node) {
-                var content = $('<div>', {class:"red-ui-tray-content"}).appendTo(container);
+                var form = $('<form class="dialog-form form-horizontal"></form>').appendTo(container);
-                var form = $('<form class="dialog-form form-horizontal"></form>').appendTo(content);
                 var listContainer = $('<div class="form-row node-input-env-container-row"></div>').appendTo(form);
                 this.list = $('<ol></ol>').appendTo(listContainer);
                 RED.editor.envVarList.create(this.list, node);
-                return content;
             },
             resize: function(node, size) {
                 this.list.editableList('height',size.height);

packages/node_modules/@node-red/editor-client/src/js/ui/editors/panes/flowProperties.js

@@ -6,9 +6,7 @@
             name: RED._("editor-tab.properties"),
             iconClass: "fa fa-cog",
             create: function(container, node) {
-                var content = $('<div>', {class:"red-ui-tray-content"}).appendTo(container);
+                var dialogForm = $('<form id="dialog-form" class="form-horizontal"></form>').appendTo(container);
-
-                var dialogForm = $('<form id="dialog-form" class="form-horizontal"></form>').appendTo(content);
                 $('<div class="form-row">'+
                   '<label for="node-input-name" data-i18n="[append]editor:common.label.name"><i class="fa fa-tag"></i> </label>'+
                   '<input type="text" id="node-input-name" data-i18n="[placeholder]common.label.name">'+
@@ -30,7 +28,6 @@
                 $("#node-input-name").val(node.label);
                 RED.text.bidi.prepareInput($("#node-input-name"));
                 this.tabflowEditor.getSession().setValue(node.info || "", -1);
-                return content;
             },
             resize: function(node, size) {
                 $("#node-input-info").css("height", (size.height-70)+"px");

packages/node_modules/@node-red/editor-client/src/js/ui/editors/panes/properties.js

@@ -6,7 +6,6 @@
             name: RED._("editor-tab.properties"),
             iconClass: "fa fa-cog",
             create: function(container, node) {
-                var content = $('<div>', {class:"red-ui-tray-content"}).appendTo(container);
 
                 var nodeType = node.type;
                 if (node.type === "subflow") {
@@ -28,9 +27,7 @@
                     this.inputClass = "node-config-input";
                     formStyle = "node-config-dialog-edit-form";
                 }
-                RED.editor.buildEditForm(content,formStyle,nodeType,i18nNamespace,node);
+                RED.editor.buildEditForm(container,formStyle,nodeType,i18nNamespace,node);
-
-                return content;
             },
             resize: function(node, size) {
                 if (node && node._def.oneditresize) {

packages/node_modules/@node-red/editor-client/src/js/ui/editors/panes/subflowModule.js

@@ -36,9 +36,7 @@
             name: RED._("editor-tab.module"),
             iconClass: "fa fa-cube",
             create: function(container, node) {
-                var content = $('<div>', {class:"red-ui-tray-content"}).appendTo(container);
+                buildModuleForm(container, node);
-                buildModuleForm(content, node);
-                return content;
             },
             resize: function(node, size) {
             },

packages/node_modules/@node-red/editor-client/src/js/ui/editors/panes/subflowProperties.js

@@ -6,9 +6,7 @@
             name: RED._("editor-tab.properties"),
             iconClass: "fa fa-cog",
             create: function(container, node) {
-                var content = $('<div>', {class:"red-ui-tray-content"}).appendTo(container);
+                var dialogForm = $('<form id="dialog-form" class="form-horizontal"></form>').appendTo(container);
-
-                var dialogForm = $('<form id="dialog-form" class="form-horizontal"></form>').appendTo(content);
                 $('<div class="form-row">'+
                   '<label for="node-input-name" data-i18n="[append]editor:common.label.name"><i class="fa fa-tag"></i> </label>'+
                   '<input type="text" id="node-input-name" data-i18n="[placeholder]common.label.name">'+
@@ -30,7 +28,6 @@
                 $("#node-input-name").val(node.label);
                 RED.text.bidi.prepareInput($("#node-input-name"));
                 this.tabflowEditor.getSession().setValue(node.info || "", -1);
-                return content;
             },
             resize: function(node, size) {
                 $("#node-input-info").css("height", (size.height-70)+"px");