Tidy up markdown toolbar handling across all editors

Any editor for the markdown mode will now automatically get
the markdown toolbar added.

The comment node has been updated to handle this properly and
to not add two copies of its content to the sidebar.

packages/node_modules/@node-red/editor-client/locales/en-US/editor.json

@@ -27,8 +27,7 @@
         "status": "Status",
         "enabled": "Enabled",
         "disabled":"Disabled",
-        "info": "Description",
+        "info": "Description"
-        "tip": "Description accepts Markdown and will appear in the Info tab."
     },
     "menu": {
         "label": {
@@ -279,7 +278,6 @@
         "deleteSubflow": "delete subflow",
         "info": "Description",
         "category": "Category",
-        "format":"markdown format",
         "errors": {
             "noNodesSelected": "<strong>Cannot create subflow</strong>: no nodes selected",
             "multipleInputsToSelection": "<strong>Cannot create subflow</strong>: multiple inputs to selection"
@@ -719,7 +717,8 @@
         "format": "format JSON"
     },
     "markdownEditor": {
-        "title": "Markdown editor"
+        "title": "Markdown editor",
+        "format": "Formatted with markdown"
     },
     "bufferEditor": {
         "title": "Buffer editor",

packages/node_modules/@node-red/editor-client/locales/ja/editor.json

@@ -27,8 +27,7 @@
         "status": "状態",
         "enabled": "有効",
         "disabled": "無効",
-        "info": "詳細",
+        "info": "詳細"
-        "tip": "マークダウン形式で記述した「詳細」は「情報タブ」に表示されます。"
     },
     "menu": {
         "label": {
@@ -278,7 +277,6 @@
         "deleteSubflow": "サブフローを削除",
         "info": "詳細",
         "category": "カテゴリ",
-        "format": "マークダウン形式",
         "errors": {
             "noNodesSelected": "<strong>サブフローを作成できません</strong>: ノードが選択されていません",
             "multipleInputsToSelection": "<strong>サブフローを作成できません</strong>: 複数の入力が選択されています"

packages/node_modules/@node-red/editor-client/locales/zh-CN/editor.json

@@ -22,8 +22,7 @@
         "status": "状态",
         "enabled": "有效",
         "disabled": "无效",
-        "info": "详细描述",
+        "info": "详细描述"
-        "tip": "详细描述支持Markdown轻量级标记语言，并将出现在信息标签中。"
     },
     "menu": {
         "label": {
@@ -191,7 +190,6 @@
         "output": "输出:",
         "deleteSubflow": "删除子流程",
         "info": "详细描述",
-        "format": "标记格式",
         "errors": {
             "noNodesSelected": "<strong>无法创建子流程</strong>: 未选择节点",
             "multipleInputsToSelection": "<strong>无法创建子流程</strong>: 多个输入到了选择"

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

@@ -38,7 +38,7 @@ RED.popover = (function() {
         var direction = options.direction || "right";
         var trigger = options.trigger;
         var content = options.content;
-        var delay = options.delay;
+        var delay = options.delay ||  { show: 750, hide: 50 };
         var autoClose = options.autoClose;
         var width = options.width||"auto";
         var size = options.size||"default";
@@ -172,6 +172,18 @@ RED.popover = (function() {
                     openPopup();
                 }
             });
+            if (autoClose) {
+                target.on('mouseleave disabled', function(e) {
+                    if (timer) {
+                        clearTimeout(timer);
+                    }
+                    if (active) {
+                        active = false;
+                        setTimeout(closePopup,autoClose);
+                    }
+                });
+            }
+
         } else if (trigger === 'modal') {
             $(document).on('mousedown.modal-popover-close', function (event) {
                 var target = event.target;

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

@@ -929,7 +929,7 @@ RED.editor = (function() {
     function buildDescriptionForm(container,node) {
         var dialogForm = $('<form class="dialog-form form-horizontal" autocomplete="off"></form>').appendTo(container);
         var toolbarRow = $('<div></div>').appendTo(dialogForm);
-        var row = $('<div class="form-row node-text-editor-row" style="position:relative; padding-top: 4px; height: calc(100% - 36px);"></div>').appendTo(dialogForm);
+        var row = $('<div class="form-row node-text-editor-row" style="position:relative; padding-top: 4px; height: 100%"></div>').appendTo(dialogForm);
         $('<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",
@@ -939,26 +939,6 @@ 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();
-            var value = nodeInfoEditor.getValue();
-            RED.editor.editMarkdown({
-                value: value,
-                width: "Infinity",
-                cursor: nodeInfoEditor.getCursorPosition(),
-                complete: function(v,cursor) {
-                    nodeInfoEditor.setValue(v, -1);
-                    nodeInfoEditor.gotoLine(cursor.row+1,cursor.column,false);
-                    setTimeout(function() {
-                        nodeInfoEditor.focus();
-                    },300);
-                }
-            })
-        });
         return nodeInfoEditor;
     }
 
@@ -2206,7 +2186,10 @@ RED.editor = (function() {
 
 
         createEditor: function(options) {
-            var editor = ace.edit(options.id||options.element);
+            var el = options.element || $("#"+options.id)[0];
+            var toolbarRow = $("<div>").appendTo(el);
+            el = $("<div>").appendTo(el).addClass("node-text-editor-container")[0];
+            var editor = ace.edit(el);
             editor.setTheme("ace/theme/tomorrow");
             var session = editor.getSession();
             session.on("changeAnnotation", function () {
@@ -2254,6 +2237,39 @@ RED.editor = (function() {
                     }
                 },100);
             }
+            if (options.mode === 'ace/mode/markdown') {
+                $(el).addClass("node-text-editor-container-toolbar");
+                editor.toolbar = RED.editor.types._markdown.buildToolbar(toolbarRow,editor);
+                if (options.expandable !== false) {
+                    var expandButton = $('<button class="editor-button" style="float: right;"><i class="fa fa-expand"></i></button>').appendTo(editor.toolbar);
+
+                    expandButton.click(function(e) {
+                        e.preventDefault();
+                        var value = editor.getValue();
+                        RED.editor.editMarkdown({
+                            value: value,
+                            width: "Infinity",
+                            cursor: editor.getCursorPosition(),
+                            complete: function(v,cursor) {
+                                editor.setValue(v, -1);
+                                editor.gotoLine(cursor.row+1,cursor.column,false);
+                                setTimeout(function() {
+                                    editor.focus();
+                                },300);
+                            }
+                        })
+                    });
+                }
+                var helpButton = $('<button class="node-text-editor-help editor-button editor-button-small"><i class="fa fa-question"></i></button>').appendTo($(el).parent());
+                RED.popover.create({
+                    target: helpButton,
+                    trigger: 'click',
+                    size: "small",
+                    direction: "left",
+                    content: RED._("markdownEditor.format"),
+                    autoClose: 50
+                });
+            }
             return editor;
         }
     }

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

@@ -41,7 +41,7 @@ RED.editor.types._markdown = (function() {
         '<div id="node-input-markdown-panel-editor" class="red-ui-panel">'+
             '<div style="height: 100%; margin: auto; max-width: 1000px;">'+
                 '<div id="node-input-markdown-toolbar"></div>'+
-                '<div class="node-text-editor" style="height: calc(100% - 50px)" id="node-input-markdown"></div>'+
+                '<div class="node-text-editor" style="height: 100%" id="node-input-markdown"></div>'+
             '</div>'+
         '</div>'+
         '<div class="red-ui-panel">'+
@@ -112,7 +112,8 @@ RED.editor.types._markdown = (function() {
                     expressionEditor = RED.editor.createEditor({
                         id: 'node-input-markdown',
                         value: value,
-                        mode:"ace/mode/markdown"
+                        mode:"ace/mode/markdown",
+                        expandable: false
                     });
                     var changeTimer;
                     expressionEditor.getSession().on("change", function() {
@@ -138,11 +139,10 @@ RED.editor.types._markdown = (function() {
                         }
                     });
                     panels.ratio(1);
-                    var toolbar = RED.editor.types._markdown.buildToolbar($("#node-input-markdown-toolbar"), expressionEditor);
 
                     $('<span class="button-group" style="float:right">'+
                         '<button id="node-btn-markdown-preview" class="editor-button toggle single"><i class="fa fa-eye"></i></button>'+
-                    '</span>').appendTo(toolbar);
+                    '</span>').appendTo(expressionEditor.toolbar);
 
                     $("#node-btn-markdown-preview").click(function(e) {
                         e.preventDefault();

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

@@ -146,7 +146,6 @@ RED.workspaces = (function() {
                     height -= $(rows[i]).outerHeight(true);
                 }
                 height -= (parseInt($("#dialog-form").css("marginTop"))+parseInt($("#dialog-form").css("marginBottom")));
-                height -= 28;
                 $(".node-text-editor").css("height",height+"px");
                 tabflowEditor.resize();
             },
@@ -166,7 +165,6 @@ RED.workspaces = (function() {
 
                 var row = $('<div class="form-row node-text-editor-row">'+
                     '<label for="node-input-info" data-i18n="editor:workspace.info" style="width:300px;"></label>'+
-                    '<div class="node-text-editor-toolbar"></div>'+
                     '<div style="min-height:250px;" class="node-text-editor" id="node-input-info"></div>'+
                 '</div>').appendTo(dialogForm);
                 tabflowEditor = RED.editor.createEditor({
@@ -175,10 +173,6 @@ RED.workspaces = (function() {
                     value: ""
                 });
 
-                var toolbar = RED.editor.types._markdown.buildToolbar(row.find(".node-text-editor-toolbar"),tabflowEditor);
-
-                $('<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();
                     var value = tabflowEditor.getValue();

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

@@ -209,11 +209,28 @@
 }
 
 .node-text-editor {
+    position: relative;
+    .node-text-editor-help {
+        position: absolute;
+        bottom: 0px;
+        right: 1px;
+        border-bottom-right-radius: 5px;
+        z-Index: 8;
+        border-bottom: none;
+        border-right: none;
+    }
+}
+.node-text-editor-container {
     border:1px solid #ccc;
     border-radius:5px;
     overflow: hidden;
     font-size: 14px !important;
     font-family: Menlo, Consolas, 'DejaVu Sans Mono', Courier, monospace !important;
+    height: 100%;
+
+    &.node-text-editor-container-toolbar {
+        height: calc(100% - 40px);
+    }
 }
 
 .editor-button {
@@ -333,7 +350,7 @@
     padding: 10px;
     border:1px solid #ccc;
     border-radius:5px;
-    height: calc(100% - 31px);
+    height: calc(100% - 21px);
     overflow-y: scroll;
     background: #fff;
 }

packages/node_modules/@node-red/nodes/core/core/90-comment.html

@@ -1,17 +1,13 @@
 
 <script type="text/x-red" data-template-name="comment">
     <div class="form-row">
-        <label for="node-input-name"><i class="fa fa-comment"></i> <span data-i18n="comment.label.title"></span></label>
+        <label for="node-input-name"><i class="fa fa-tag"></i> <span data-i18n="common.label.name"></span></label>
         <input type="text" id="node-input-name">
     </div>
-    <div class="form-row" style="margin-bottom: 0px;">
-        <label for="node-input-info" style="width: 100% !important;"><i class="fa fa-comments"></i> <span data-i18n="comment.label.body"></span></label>
-        <input type="hidden" id="node-input-info" autofocus="autofocus">
-    </div>
     <div class="form-row node-text-editor-row">
+        <input type="hidden" id="node-input-info" autofocus="autofocus">
         <div style="height: 250px; min-height:150px;" class="node-text-editor" id="node-input-info-editor"></div>
     </div>
-    <div class="form-tips" data-i18n="[html]comment.tip"></div>
 </script>
 
 <script type="text/javascript">
@@ -32,7 +28,7 @@
             return this.name?"node_label_italic":"";
         },
         info: function() {
-            return (this.name?"# "+this.name+"\n":"")+(this.info||"");
+            return this.name?"# "+this.name+"\n\n---\n\n":"";
         },
         oneditprepare: function() {
             var that = this;

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

@@ -307,12 +307,7 @@
         }
     },
     "comment": {
-        "comment": "comment",
+        "comment": "comment"
-        "label": {
-            "title": "Title",
-            "body": "Body"
-        },
-        "tip": "Tip: The body text can be styled as <a href=\"https://help.github.com/articles/markdown-basics/\" target=\"_blank\">GitHub flavoured Markdown</a>"
     },
     "unknown": {
         "label": {

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

@@ -307,12 +307,7 @@
         }
     },
     "comment": {
-        "comment": "comment",
+        "comment": "comment"
-        "label": {
-            "title": "タイトル",
-            "body": "本文"
-        },
-        "tip": "注釈: 本文は<a href=\"https://help.github.com/articles/markdown-basics/\" target=\"_blank\">GitHubのMarkdown形式</a>として整形されます。"
     },
     "unknown": {
         "label": {

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

@@ -297,11 +297,6 @@
         }
     },
     "comment": {
-        "label": {
-            "title": "标题",
-            "body": "主体"
-        },
-        "tip": "提示: 主题内容可被格式化为 <a href=\"https://help.github.com/articles/markdown-basics/\" target=\"_blank\">GitHub风格的Markdown</a>"
     },
     "unknown": {
         "label": {