Add markdown toolbar to node description editor

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

@@ -63,45 +63,47 @@ RED.tabs = (function() {
 
             var collapsedButtonsRow = $('<div class="red-ui-tab-link-buttons"></div>').appendTo(wrapper);
 
-            var selectButton = $('<a href="#"><i class="fa fa-caret-down"></i></a>').appendTo(collapsedButtonsRow);
+            if (options.menu !== false) {
-            selectButton.addClass("red-ui-tab-link-button-menu")
+                var selectButton = $('<a href="#"><i class="fa fa-caret-down"></i></a>').appendTo(collapsedButtonsRow);
-            selectButton.click(function(evt) {
+                selectButton.addClass("red-ui-tab-link-button-menu")
-                evt.preventDefault();
+                selectButton.click(function(evt) {
-                if (!collapsibleMenu) {
+                    evt.preventDefault();
-                    var pinnedOptions = [];
+                    if (!collapsibleMenu) {
-                    var options = [];
+                        var pinnedOptions = [];
-                    ul.children().each(function(i,el) {
+                        var options = [];
-                        var id = $(el).data('tabId');
+                        ul.children().each(function(i,el) {
-                        var opt = {
+                            var id = $(el).data('tabId');
-                            id:"red-ui-tabs-menu-option-"+id,
+                            var opt = {
-                            icon: tabs[id].iconClass || defaultTabIcon,
+                                id:"red-ui-tabs-menu-option-"+id,
-                            label: tabs[id].name,
+                                icon: tabs[id].iconClass || defaultTabIcon,
-                            onselect: function() {
+                                label: tabs[id].name,
-                                activateTab(id);
+                                onselect: function() {
+                                    activateTab(id);
+                                }
+                            };
+                            if (tabs[id].pinned) {
+                                pinnedOptions.push(opt);
+                            } else {
+                                options.push(opt);
                             }
-                        };
+                        });
-                        if (tabs[id].pinned) {
+                        options = pinnedOptions.concat(options);
-                            pinnedOptions.push(opt);
+                        collapsibleMenu = RED.menu.init({id:"debug-message-option-menu",options: options});
-                        } else {
+                        collapsibleMenu.css({
-                            options.push(opt);
+                            position: "absolute"
-                        }
+                        })
-                    });
+                        collapsibleMenu.on('mouseleave', function(){ $(this).hide() });
-                    options = pinnedOptions.concat(options);
+                        collapsibleMenu.on('mouseup', function() { $(this).hide() });
-                    collapsibleMenu = RED.menu.init({id:"debug-message-option-menu",options: options});
+                        collapsibleMenu.appendTo("body");
+                    }
+                    var elementPos = selectButton.offset();
                     collapsibleMenu.css({
-                        position: "absolute"
+                        top: (elementPos.top+selectButton.height()-20)+"px",
+                        left: (elementPos.left - collapsibleMenu.width() + selectButton.width())+"px"
                     })
-                    collapsibleMenu.on('mouseleave', function(){ $(this).hide() });
+                    collapsibleMenu.toggle();
-                    collapsibleMenu.on('mouseup', function() { $(this).hide() });
-                    collapsibleMenu.appendTo("body");
-                }
-                var elementPos = selectButton.offset();
-                collapsibleMenu.css({
-                    top: (elementPos.top+selectButton.height()-20)+"px",
-                    left: (elementPos.left - collapsibleMenu.width() + selectButton.width())+"px"
                 })
-                collapsibleMenu.toggle();
+            }
-            })
 
         }
 
@@ -336,7 +338,11 @@ RED.tabs = (function() {
                             pinnedLink.insertAfter(collapsedButtonsRow.find("a.red-ui-tab-link-button-pinned:last"));
                         }
                     } else {
-                        pinnedLink.insertBefore(collapsedButtonsRow.find("a:last"));
+                        if (options.menu !== false) {
+                            pinnedLink.insertBefore(collapsedButtonsRow.find("a:last"));
+                        } else {
+                            pinnedLink.appendTo(collapsedButtonsRow);
+                        }
                     }
 
                     pinnedLink.attr('id',li.attr('id')+"-link-button");

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

@@ -884,9 +884,9 @@ RED.editor = (function() {
 
     function buildDescriptionForm(container,node) {
         var dialogForm = $('<form class="dialog-form form-horizontal" autocomplete="off"></form>').appendTo(container);
-        var row = $('<div class="form-row node-text-editor-row" style="position:relative; padding-top: 4px; height: 100%"></div>').appendTo(dialogForm);
+        var toolbarRow = $('<div></div>').appendTo(dialogForm);
-        $('<div style="position: absolute; right:0; bottom:100%;"><button id="node-info-input-info-expand" class="editor-button editor-button-small"><i class="fa fa-expand"></i></button></div>').appendTo(row);
+        var row = $('<div class="form-row node-text-editor-row" style="position:relative; padding-top: 4px; height: calc(100% - 36px);"></div>').appendTo(dialogForm);
-        $('<div style="height: 100%;" class="node-text-editor" id="node-info-input-info-editor" ></div>').appendTo(row);
+        $('<div style="height: 100%" class="node-text-editor" id="node-info-input-info-editor" ></div>').appendTo(row);
         var nodeInfoEditor = RED.editor.createEditor({
             id: "node-info-input-info-editor",
             mode: 'ace/mode/markdown',
@@ -895,6 +895,9 @@ RED.editor = (function() {
         if (node.info) {
             nodeInfoEditor.getSession().setValue(node.info, -1);
         }
+        var toolbar = RED.editor.types._markdown.buildToolbar(toolbarRow,nodeInfoEditor);
+
+        $('<button id="node-info-input-info-expand" class="editor-button" style="float: right;"><i class="fa fa-expand"></i></button>').appendTo(toolbar);
 
         $('#node-info-input-info-expand').click(function(e) {
             e.preventDefault();
@@ -1267,7 +1270,8 @@ RED.editor = (function() {
                             RED.tray.resize();
                         }
                     },
-                    collapsible: true
+                    collapsible: true,
+                    menu: false
                 });
                 if (editing_node) {
                     RED.sidebar.info.refresh(editing_node);

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

@@ -16,37 +16,36 @@
 RED.editor.types._markdown = (function() {
 
 
+    var toolbarTemplate = '<div style="margin-bottom: 5px">'+
+        '<span class="button-group">'+
+        '<button class="editor-button" data-style="h1" style="font-size:1.1em; font-weight: bold">h1</button>'+
+        '<button class="editor-button" data-style="h2" style="font-size:1.0em; font-weight: bold">h2</button>'+
+        '<button class="editor-button" data-style="h3" style="font-size:0.9em; font-weight: bold">h3</button>'+
+        '</span>'+
+        '<span class="button-group">'+
+            '<button class="editor-button" data-style="b"><i class="fa fa-bold"></i></button>'+
+            '<button class="editor-button" data-style="i"><i class="fa fa-italic"></i></button>'+
+            '<button class="editor-button" data-style="code"><i class="fa fa-code"></i></button>'+
+        '</span>'+
+        '<span class="button-group">'+
+            '<button class="editor-button" data-style="ol"><i class="fa fa-list-ol"></i></button>'+
+            '<button class="editor-button" data-style="ul"><i class="fa fa-list-ul"></i></button>'+
+            '<button class="editor-button" data-style="bq"><i class="fa fa-quote-left"></i></button>'+
+            '<button class="editor-button" data-style="hr"><i class="fa fa-minus"></i></button>'+
+            '<button class="editor-button" data-style="link"><i class="fa fa-link"></i></button>'+
+        '</span>'
+    '</div>';
+
     var template = '<script type="text/x-red" data-template-name="_markdown">'+
-    '<div id="node-input-markdown-panels">'+
+        '<div id="node-input-markdown-panels">'+
-    '<div id="node-input-markdown-panel-editor" class="red-ui-panel">'+
+        '<div id="node-input-markdown-panel-editor" class="red-ui-panel">'+
-        '<div id="node-input-markdown-toolbar" style="margin-bottom: 5px">'+
+            '<div id="node-input-markdown-toolbar"></div>'+
-            '<span class="button-group">'+
+            '<div class="node-text-editor" style="height: calc(100% - 50px)" id="node-input-markdown"></div>'+
-            '<button class="editor-button" data-style="h1" style="font-size:1.1em; font-weight: bold">h1</button>'+
-            '<button class="editor-button" data-style="h2" style="font-size:1.0em; font-weight: bold">h2</button>'+
-            '<button class="editor-button" data-style="h3" style="font-size:0.9em; font-weight: bold">h3</button>'+
-            '</span>'+
-            '<span class="button-group">'+
-                '<button class="editor-button" data-style="b"><i class="fa fa-bold"></i></button>'+
-                '<button class="editor-button" data-style="i"><i class="fa fa-italic"></i></button>'+
-                '<button class="editor-button" data-style="code"><i class="fa fa-code"></i></button>'+
-            '</span>'+
-            '<span class="button-group">'+
-                '<button class="editor-button" data-style="ol"><i class="fa fa-list-ol"></i></button>'+
-                '<button class="editor-button" data-style="ul"><i class="fa fa-list-ul"></i></button>'+
-                '<button class="editor-button" data-style="bq"><i class="fa fa-quote-left"></i></button>'+
-                '<button class="editor-button" data-style="hr"><i class="fa fa-minus"></i></button>'+
-                '<button class="editor-button" data-style="link"><i class="fa fa-link"></i></button>'+
-            '</span>'+
-            '<span class="button-group">'+
-                '<button id="node-btn-markdown-preview" class="editor-button toggle single"><i class="fa fa-eye"></i></button>'+
-            '</span>'+
         '</div>'+
-        '<div class="node-text-editor" style="height: calc(100% - 50px)" id="node-input-markdown"></div>'+
+        '<div class="red-ui-panel">'+
-    '</div>'+
+            '<div id="node-input-markdown-panel-preview" style="padding: 20px;" class="node-help"></div>'+
-    '<div class="red-ui-panel">'+
+        '</div>'+
-        '<div id="node-input-markdown-panel-preview" style="padding: 20px;" class="node-help"></div>'+
+        '</script>';
-    '</div>'+
-    '</script>';
 
 
     var panels;
@@ -137,6 +136,11 @@ RED.editor.types._markdown = (function() {
                         }
                     });
                     panels.ratio(1);
+                    var toolbar = RED.editor.types._markdown.buildToolbar($("#node-input-markdown-toolbar"), expressionEditor);
+
+                    $('<span class="button-group">'+
+                        '<button id="node-btn-markdown-preview" class="editor-button toggle single"><i class="fa fa-eye"></i></button>'+
+                    '</span>').appendTo(toolbar);
 
                     $("#node-btn-markdown-preview").click(function(e) {
                         e.preventDefault();
@@ -149,38 +153,6 @@ RED.editor.types._markdown = (function() {
                         }
                     });
 
-                    $('#node-input-markdown-toolbar').find('button[data-style]').each(function(el) {
-                        var style = styleActions[$(this).data('style')];
-                        $(this).click(function(e) {
-                            e.preventDefault();
-                            var current = expressionEditor.getSelectedText();
-                            var range = expressionEditor.selection.getRange();
-                            if (style.newline) {
-                                var offset = 0;
-                                var beforeOffset = ((style.before||"").match(/\n/g)||[]).length;
-                                var afterOffset = ((style.after||"").match(/\n/g)||[]).length;
-                                for (var i = range.start.row; i<= range.end.row+offset; i++) {
-                                    if (style.before) {
-                                        expressionEditor.session.insert({row:i, column:0},style.before);
-                                        offset += beforeOffset;
-                                        i += beforeOffset;
-                                    }
-                                    if (style.after) {
-                                        expressionEditor.session.insert({row:i, column:Infinity},style.after);
-                                        offset += afterOffset;
-                                        i += afterOffset;
-                                    }
-                                }
-                            } else {
-                                expressionEditor.session.replace(expressionEditor.selection.getRange(), (style.before||"")+current+(style.after||""));
-                            }
-                            expressionEditor.focus();
-                        });
-                        if (style.tooltip) {
-                            RED.popover.tooltip($(this),style.tooltip);
-                        }
-
-                    })
 
                     if (options.cursor) {
                         expressionEditor.gotoLine(options.cursor.row+1,options.cursor.column,false);
@@ -197,7 +169,42 @@ RED.editor.types._markdown = (function() {
                 show: function() {}
             }
             RED.tray.show(trayOptions);
+        },
 
+        buildToolbar: function(container, editor) {
+            var toolbar = $(toolbarTemplate).appendTo(container);
+            toolbar.find('button[data-style]').each(function(el) {
+                var style = styleActions[$(this).data('style')];
+                $(this).click(function(e) {
+                    e.preventDefault();
+                    var current = editor.getSelectedText();
+                    var range = editor.selection.getRange();
+                    if (style.newline) {
+                        var offset = 0;
+                        var beforeOffset = ((style.before||"").match(/\n/g)||[]).length;
+                        var afterOffset = ((style.after||"").match(/\n/g)||[]).length;
+                        for (var i = range.start.row; i<= range.end.row+offset; i++) {
+                            if (style.before) {
+                                editor.session.insert({row:i, column:0},style.before);
+                                offset += beforeOffset;
+                                i += beforeOffset;
+                            }
+                            if (style.after) {
+                                editor.session.insert({row:i, column:Infinity},style.after);
+                                offset += afterOffset;
+                                i += afterOffset;
+                            }
+                        }
+                    } else {
+                        editor.session.replace(editor.selection.getRange(), (style.before||"")+current+(style.after||""));
+                    }
+                    editor.focus();
+                });
+                if (style.tooltip) {
+                    RED.popover.tooltip($(this),style.tooltip);
+                }
+            })
+            return toolbar;
         }
     }
 })();

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

@@ -17,7 +17,6 @@
         <label for="node-input-outputs"><i class="fa fa-random"></i> <span data-i18n="function.label.outputs"></span></label>
         <input id="node-input-outputs" style="width: 60px;" value="1">
     </div>
-    <div class="form-tips"><span data-i18n="function.tip"></span></div>
 </script>
 
 <script type="text/x-red" data-help-name="function">

packages/node_modules/@node-red/nodes/locales/en-US/messages.json

@@ -196,8 +196,7 @@
         "error": {
             "inputListener":"Cannot add listener to 'input' event within Function",
             "non-message-returned":"Function tried to send a message of type __type__"
-        },
+        }
-        "tip": "See the Info tab for help writing functions."
     },
     "template": {
         "template": "template",

packages/node_modules/@node-red/nodes/locales/ja/messages.json

@@ -196,8 +196,7 @@
         "error": {
             "inputListener": "コード内で'input'イベントのリスナを設定できません",
             "non-message-returned": "Functionノードが __type__ 型のメッセージ送信を試みました"
-        },
+        }
-        "tip": "コードの記述方法はノードの「情報」を参照してください。"
     },
     "template": {
         "template": "template",

packages/node_modules/@node-red/nodes/locales/zh-CN/messages.json

@@ -191,8 +191,7 @@
         "error": {
             "inputListener":"无法在函数中监听对'注入'事件",
             "non-message-returned":"函数节点尝试返回类型为 __type__ 的信息"
-        },
+        }
-        "tip": "可从信息页面查看更多关于如何编写函数的帮助"
     },
     "template": {
         "label": {