Add markdown toolbar to node description editor

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

@@ -63,6 +63,7 @@ RED.tabs = (function() {
 
             var collapsedButtonsRow = $('<div class="red-ui-tab-link-buttons"></div>').appendTo(wrapper);
 
+            if (options.menu !== false) {
                 var selectButton = $('<a href="#"><i class="fa fa-caret-down"></i></a>').appendTo(collapsedButtonsRow);
                 selectButton.addClass("red-ui-tab-link-button-menu")
                 selectButton.click(function(evt) {
@@ -102,6 +103,7 @@ RED.tabs = (function() {
                     })
                     collapsibleMenu.toggle();
                 })
+            }
 
         }
 
@@ -336,7 +338,11 @@ RED.tabs = (function() {
                             pinnedLink.insertAfter(collapsedButtonsRow.find("a.red-ui-tab-link-button-pinned:last"));
                         }
                     } else {
+                        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,10 +16,7 @@
 RED.editor.types._markdown = (function() {
 
 
-    var template = '<script type="text/x-red" data-template-name="_markdown">'+
+    var toolbarTemplate = '<div style="margin-bottom: 5px">'+
-    '<div id="node-input-markdown-panels">'+
-    '<div id="node-input-markdown-panel-editor" class="red-ui-panel">'+
-        '<div id="node-input-markdown-toolbar" 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>'+
@@ -36,11 +33,13 @@ RED.editor.types._markdown = (function() {
             '<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>'
-            '<span class="button-group">'+
+    '</div>';
-                '<button id="node-btn-markdown-preview" class="editor-button toggle single"><i class="fa fa-eye"></i></button>'+
+
-            '</span>'+
+    var template = '<script type="text/x-red" data-template-name="_markdown">'+
-        '</div>'+
+        '<div id="node-input-markdown-panels">'+
+        '<div id="node-input-markdown-panel-editor" class="red-ui-panel">'+
+            '<div id="node-input-markdown-toolbar"></div>'+
             '<div class="node-text-editor" style="height: calc(100% - 50px)" id="node-input-markdown"></div>'+
         '</div>'+
         '<div class="red-ui-panel">'+
@@ -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": {