Fix library/clipboard import/export issues

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

@@ -26,6 +26,7 @@ RED.clipboard = (function() {
     var currentPopoverError;
     var activeTab;
     var libraryBrowser;
+    var examplesBrowser;
 
     function setupDialogs() {
         dialog = $('<div id="red-ui-clipboard-dialog" class="hide"><form class="dialog-form form-horizontal"></form></div>')
@@ -139,10 +140,15 @@ RED.clipboard = (function() {
                         text: RED._("common.label.import"),
                         click: function() {
                             var addNewFlow = ($("#red-ui-clipboard-dialog-import-opt > a.selected").attr('id') === 'red-ui-clipboard-dialog-import-opt-new');
-                            if (activeTab === "red-ui-clipboard-dialog-red-ui-clipboard-dialog-import-opt-clipboard") {
+                            if (activeTab === "red-ui-clipboard-dialog-import-tab-clipboard") {
                                 RED.view.importNodes($("#red-ui-clipboard-dialog-import-text").val(),addNewFlow);
                             } else {
-                                var selectedPath = libraryBrowser.getSelected();
+                                var selectedPath;
+                                if (activeTab === "red-ui-clipboard-dialog-import-tab-library") {
+                                    selectedPath = libraryBrowser.getSelected();
+                                } else {
+                                    selectedPath = examplesBrowser.getSelected();
+                                }
                                 if (selectedPath.path) {
                                     $.get('library/'+selectedPath.library+'/'+selectedPath.type+'/'+selectedPath.path, function(data) {
                                         RED.view.importNodes(data,addNewFlow);
@@ -214,9 +220,8 @@ RED.clipboard = (function() {
                             '<textarea id="red-ui-clipboard-dialog-import-text"></textarea>'+
                         '</div>'+
                     '</div>'+
-                    '<div id="red-ui-clipboard-dialog-import-tab-library" class="red-ui-clipboard-dialog-tab-library">'+
+                    '<div id="red-ui-clipboard-dialog-import-tab-library" class="red-ui-clipboard-dialog-tab-library"></div>'+
-                        '<div id="red-ui-clipboard-dialog-import-tab-library-browser"></div>'+
+                    '<div id="red-ui-clipboard-dialog-import-tab-examples" class="red-ui-clipboard-dialog-tab-library"></div>'+
-                    '</div>'+
                 '</div>'+
             '</div>'+
             '<div class="form-row">'+
@@ -386,6 +391,10 @@ RED.clipboard = (function() {
             id: "red-ui-clipboard-dialog-import-tab-library",
             label: RED._("library.library")
         });
+        tabs.addTab({
+            id: "red-ui-clipboard-dialog-import-tab-examples",
+            label: RED._("library.types.examples")
+        });
 
         tabs.activateTab("red-ui-clipboard-dialog-import-tab-"+mode);
         if (mode === 'clipboard') {
@@ -400,16 +409,39 @@ RED.clipboard = (function() {
         $("#red-ui-clipboard-dialog-export").button("enable");
 
         libraryBrowser = RED.library.createBrowser({
-            container: $("#red-ui-clipboard-dialog-import-tab-library-browser"),
+            container: $("#red-ui-clipboard-dialog-import-tab-library"),
             onselect: function(file) {
                 if (file && file.label && !file.children) {
                     $("#red-ui-clipboard-dialog-ok").button("enable");
                 } else {
                     $("#red-ui-clipboard-dialog-ok").button("disable");
                 }
+            },
+            onconfirm: function(item) {
+                if (item && item.label && !item.children) {
+                    $("#red-ui-clipboard-dialog-ok").trigger("click");
+                }
             }
         })
-        loadFlowLibrary(libraryBrowser,true);
+        loadFlowLibrary(libraryBrowser,"local",RED._("library.types.local"));
+
+        examplesBrowser = RED.library.createBrowser({
+            container: $("#red-ui-clipboard-dialog-import-tab-examples"),
+            onselect: function(file) {
+                if (file && file.label && !file.children) {
+                    $("#red-ui-clipboard-dialog-ok").button("enable");
+                } else {
+                    $("#red-ui-clipboard-dialog-ok").button("disable");
+                }
+            },
+            onconfirm: function(item) {
+                if (item && item.label && !item.children) {
+                    $("#red-ui-clipboard-dialog-ok").trigger("click");
+                }
+            }
+        })
+        loadFlowLibrary(examplesBrowser,"_examples_",RED._("library.types.examples"));
+
 
         dialogContainer.i18n();
 
@@ -504,7 +536,7 @@ RED.clipboard = (function() {
                 }
             }
         })
-        loadFlowLibrary(libraryBrowser,false);
+        loadFlowLibrary(libraryBrowser,"local",RED._("library.types.local"));
 
         $("#red-ui-clipboard-dialog-tab-library-name").val("flows.json").select();
 
@@ -615,38 +647,36 @@ RED.clipboard = (function() {
 
     }
 
-    function loadFlowLibrary(browser,includeExamples) {
+    function loadFlowLibrary(browser,library,label) {
-        var listing = [];
+        // if (includeExamples) {
-        if (includeExamples) {
+        //     listing.push({
-            listing.push({
+        //         library: "_examples_",
-                library: "_examples_",
+        //         type: "flows",
+        //         icon: 'fa fa-hdd-o',
+        //         label: RED._("library.types.examples"),
+        //         path: "",
+        //         children: function(item,done) {
+        //             RED.library.loadLibraryFolder("_examples_","flows","",function(children) {
+        //                 item.children = children;
+        //                 done(children);
+        //             })
+        //         }
+        //     })
+        // }
+        browser.data([{
+            library: library,
             type: "flows",
             icon: 'fa fa-hdd-o',
-                label: RED._("library.types.examples"),
+            label: label,
-                path: "",
-                children: function(item,done) {
-                    RED.library.loadLibraryFolder("_examples_","flows","",function(children) {
-                        item.children = children;
-                        done(children);
-                    })
-                }
-            })
-        }
-        listing.push({
-            library: "local",
-            type: "flows",
-            icon: 'fa fa-hdd-o',
-            label: RED._("library.types.local"),
             path: "",
             expanded: true,
             children: function(item,done) {
-                RED.library.loadLibraryFolder("local","flows","",function(children) {
+                RED.library.loadLibraryFolder(library,"flows","",function(children) {
                     item.children = children;
                     done(children);
                 })
             }
-        })
+        }]);
-        browser.data(listing);
     }
 
     function hideDropTarget() {

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

@@ -24,7 +24,7 @@
  *
  * events:
  *   - treelistselect : function(event, item) {}
- *
+ *   - treelistconfirm : function(event,item) {}
  *
  * data:
  * [
@@ -61,6 +61,18 @@
                 }
                 var target;
                 switch(evt.keyCode) {
+                    case 13: // ENTER
+                        if (selected.children) {
+                            if (selected.treeList.container.hasClass("expanded")) {
+                                selected.treeList.collapse()
+                            } else {
+                                selected.treeList.expand()
+                            }
+                        } else {
+                            that._trigger("confirm",null,selected)
+                        }
+
+                    break;
                     case 37: // LEFT
                         if (selected.children&& selected.treeList.container.hasClass("expanded")) {
                             selected.treeList.collapse()
@@ -290,6 +302,11 @@
                     label.addClass("selected");
                     that._trigger("select",e,item)
                 })
+                label.on("dblclick", function(e) {
+                    if (!item.children) {
+                        that._trigger("confirm",e,item);
+                    }
+                })
             }
             if (item.icon) {
                 $('<span class="red-ui-treeList-icon"><i class="'+item.icon+'" /></span>').appendTo(label);

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

@@ -225,14 +225,19 @@ RED.library = (function() {
                             expanded: true,
                             writable: false,
                             children: [{
+                                library: "local",
+                                type: options.url,
                                 icon: 'fa fa-cube',
                                 label: options.type,
-                                path: options.type+"/",
+                                path: "",
                                 expanded: true,
                                 children: items
                             }]
                         }]
                         loadLibraryBrowser.data(listing);
+                        setTimeout(function() {
+                            loadLibraryBrowser.select(listing[0].children[0]);
+                        },200);
                     });
                     libraryEditor = ace.edit('red-ui-library-dialog-load-preview-text',{
                         useWorker: false
@@ -262,24 +267,31 @@ RED.library = (function() {
                     if (filename === "") {
                         filename = "unnamed-"+options.type;
                     }
-                    $("#red-ui-library-dialog-save-filename").attr("value",filename+".js");
+                    $("#red-ui-library-dialog-save-filename").attr("value",filename+"."+(options.ext||"txt"));
 
                     loadLibraryFolder("local",options.url, "", function(items) {
                         var listing = [{
-                            icon: 'fa fa-archive',
+                            library: "local",
+                            type: options.url,
+                            icon: 'fa fa-hdd-o',
                             label: RED._("library.types.local"),
                             path: "",
                             expanded: true,
                             writable: false,
                             children: [{
+                                library: "local",
+                                type: options.url,
                                 icon: 'fa fa-cube',
                                 label: options.type,
-                                path: options.type+"/",
+                                path: "",
                                 expanded: true,
                                 children: items
                             }]
                         }]
                         saveLibraryBrowser.data(listing);
+                        setTimeout(function() {
+                            saveLibraryBrowser.select(listing[0].children[0]);
+                        },200);
                     });
                     $( "#red-ui-library-dialog-save" ).dialog( "open" );
                 }
@@ -299,6 +311,10 @@ RED.library = (function() {
                 if (options.onselect) {
                     options.onselect(item);
                 }
+            }).on('treelistconfirm', function(event, item) {
+                if (options.onconfirm) {
+                    options.onconfirm(item);
+                }
             });
         var itemTools = $("<div>").css({position: "absolute",bottom:"6px",right:"8px"});
         var menuButton = $('<button class="red-ui-button red-ui-button-small" type="button"><i class="fa fa-ellipsis-h"></i></button>')
@@ -406,6 +422,9 @@ RED.library = (function() {
         }
 
         return {
+            select: function(item) {
+                dirList.treeList('select',item);
+            },
             getSelected: function() {
                 return dirList.treeList('selected');
             },
@@ -424,8 +443,8 @@ RED.library = (function() {
     return {
         init: function() {
 
-            $(_librarySave).appendTo("#red-ui-editor");
+            $(_librarySave).appendTo("#red-ui-editor").i18n();
-            $(_libraryLookup).appendTo("#red-ui-editor");
+            $(_libraryLookup).appendTo("#red-ui-editor").i18n();
 
             $( "#red-ui-library-dialog-save" ).dialog({
                 title: RED._("library.saveToLibrary"),
@@ -459,7 +478,7 @@ RED.library = (function() {
 
             saveLibraryBrowser = RED.library.createBrowser({
                 container: $("#red-ui-library-dialog-save-browser"),
-                addFolderButton: true,
+                folderTools: true,
                 onselect: function(item) {
                     if (item.label) {
                         if (!item.children) {
@@ -482,6 +501,11 @@ RED.library = (function() {
                 autoOpen: false,
                 width: 800,
                 resizable: false,
+                classes: {
+                    "ui-dialog": "red-ui-editor-dialog",
+                    "ui-dialog-titlebar-close": "hide",
+                    "ui-widget-overlay": "red-ui-editor-dialog"
+                },
                 buttons: [
                     {
                         text: RED._("common.label.cancel"),
@@ -545,11 +569,17 @@ RED.library = (function() {
             });
             RED.panels.create({
                 container:$("#red-ui-library-dialog-load-panes"),
-                dir: "horizontal"
+                dir: "horizontal",
+                resize: function() {
+                    libraryEditor.resize();
+                }
             });
             RED.panels.create({
                 container:$("#red-ui-library-dialog-load-preview"),
-                dir: "vertical"
+                dir: "vertical",
+                resize: function() {
+                    libraryEditor.resize();
+                }
             });
         },
         create: createUI,

packages/node_modules/@node-red/editor-client/src/sass/library.scss

@@ -61,7 +61,7 @@
     padding: 0;
     background: $form-input-background;
     &>div {
-        height: calc(100% - 20px)
+        height: 100%;
     }
 }
 .red-ui-clipboard-dialog-box {
@@ -88,14 +88,11 @@
     width: calc(100% - 120px);
 }
 #red-ui-clipboard-dialog-export-tab-library-browser {
-    height: calc(100% - 40px);
+    height: calc(100% - 60px);
-    margin-bottom: 10px;
+    margin-bottom: 13px;
     border-bottom: 1px solid $primary-border-color;
     box-sizing: border-box;
 }
-#red-ui-clipboard-dialog-import-tab-library {
-    height: 100%;
-}
 #red-ui-clipboard-dialog-import-tab-library-browser {
     height: 100%;
     box-sizing: border-box;

packages/node_modules/@node-red/nodes/core/core/80-function.html

@@ -75,7 +75,8 @@
                 type:"function", // the type of object the library is for
                 editor:this.editor, // the field name the main text body goes to
                 mode:"ace/mode/nrjavascript",
-                fields:['name','outputs']
+                fields:['name','outputs'],
+                ext:"js"
             });
             this.editor.focus();
 

packages/node_modules/@node-red/nodes/core/core/80-template.html

@@ -95,10 +95,11 @@
                 value: $("#node-input-template").val()
             });
             RED.library.create({
-                url:"functions", // where to get the data from
+                url:"templates", // where to get the data from
-                type:"function", // the type of object the library is for
+                type:"template", // the type of object the library is for
                 editor:that.editor, // the field name the main text body goes to
-                fields:['name','outputs']
+                fields:['name','format','output','syntax'],
+                ext: "txt"
             });
             this.editor.focus();
 

packages/node_modules/@node-red/runtime/lib/storage/localfilesystem/library.js

@@ -77,9 +77,6 @@ function getFileBody(root,path) {
                     body += parts[i]+"\n";
                 }
             }
-            if (! /^\/\/ \w+: /.test(remaining)) {
-                scanning = false;
-            }
             if (!scanning) {
                 body += remaining;
             }