From 6201247875ade2f793b733434e5c9a3f2bfbd1ab Mon Sep 17 00:00:00 2001
From: Nick O'Leary <nick.oleary@gmail.com>
Date: Mon, 10 Dec 2018 15:23:02 +0000
Subject: [PATCH] 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.
---
 .../editor-client/locales/en-US/editor.json   |  7 +--
 .../editor-client/locales/ja/editor.json      |  4 +-
 .../editor-client/locales/zh-CN/editor.json   |  4 +-
 .../editor-client/src/js/ui/common/popover.js | 14 ++++-
 .../editor-client/src/js/ui/editor.js         | 60 ++++++++++++-------
 .../src/js/ui/editors/markdown.js             |  8 +--
 .../editor-client/src/js/ui/workspaces.js     |  6 --
 .../editor-client/src/sass/editor.scss        | 19 +++++-
 .../@node-red/nodes/core/core/90-comment.html | 10 +---
 .../nodes/locales/en-US/messages.json         |  7 +--
 .../@node-red/nodes/locales/ja/messages.json  |  7 +--
 .../nodes/locales/zh-CN/messages.json         |  5 --
 12 files changed, 83 insertions(+), 68 deletions(-)

diff --git a/packages/node_modules/@node-red/editor-client/locales/en-US/editor.json b/packages/node_modules/@node-red/editor-client/locales/en-US/editor.json
index e618c18a0..769fcaa44 100644
--- a/packages/node_modules/@node-red/editor-client/locales/en-US/editor.json
+++ b/packages/node_modules/@node-red/editor-client/locales/en-US/editor.json
@@ -27,8 +27,7 @@
         "status": "Status",
         "enabled": "Enabled",
         "disabled":"Disabled",
-        "info": "Description",
-        "tip": "Description accepts Markdown and will appear in the Info tab."
+        "info": "Description"
     },
     "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",
diff --git a/packages/node_modules/@node-red/editor-client/locales/ja/editor.json b/packages/node_modules/@node-red/editor-client/locales/ja/editor.json
index 2b9df9e45..bf5e98520 100644
--- a/packages/node_modules/@node-red/editor-client/locales/ja/editor.json
+++ b/packages/node_modules/@node-red/editor-client/locales/ja/editor.json
@@ -27,8 +27,7 @@
         "status": "状態",
         "enabled": "有効",
         "disabled": "無効",
-        "info": "詳細",
-        "tip": "マークダウン形式で記述した「詳細」は「情報タブ」に表示されます。"
+        "info": "詳細"
     },
     "menu": {
         "label": {
@@ -278,7 +277,6 @@
         "deleteSubflow": "サブフローを削除",
         "info": "詳細",
         "category": "カテゴリ",
-        "format": "マークダウン形式",
         "errors": {
             "noNodesSelected": "<strong>サブフローを作成できません</strong>: ノードが選択されていません",
             "multipleInputsToSelection": "<strong>サブフローを作成できません</strong>: 複数の入力が選択されています"
diff --git a/packages/node_modules/@node-red/editor-client/locales/zh-CN/editor.json b/packages/node_modules/@node-red/editor-client/locales/zh-CN/editor.json
index 93cf323ea..975a20448 100644
--- a/packages/node_modules/@node-red/editor-client/locales/zh-CN/editor.json
+++ b/packages/node_modules/@node-red/editor-client/locales/zh-CN/editor.json
@@ -22,8 +22,7 @@
         "status": "状态",
         "enabled": "有效",
         "disabled": "无效",
-        "info": "详细描述",
-        "tip": "详细描述支持Markdown轻量级标记语言，并将出现在信息标签中。"
+        "info": "详细描述"
     },
     "menu": {
         "label": {
@@ -191,7 +190,6 @@
         "output": "输出:",
         "deleteSubflow": "删除子流程",
         "info": "详细描述",
-        "format": "标记格式",
         "errors": {
             "noNodesSelected": "<strong>无法创建子流程</strong>: 未选择节点",
             "multipleInputsToSelection": "<strong>无法创建子流程</strong>: 多个输入到了选择"
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/common/popover.js b/packages/node_modules/@node-red/editor-client/src/js/ui/common/popover.js
index 5b5057666..50aa5eb83 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/common/popover.js
+++ b/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;
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/editor.js b/packages/node_modules/@node-red/editor-client/src/js/ui/editor.js
index e261fefd4..86d37761e 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/editor.js
+++ b/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;
         }
     }
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/editors/markdown.js b/packages/node_modules/@node-red/editor-client/src/js/ui/editors/markdown.js
index e75e1b617..4e3f8a125 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/editors/markdown.js
+++ b/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();
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/workspaces.js b/packages/node_modules/@node-red/editor-client/src/js/ui/workspaces.js
index 7a8da060e..ca2a88f9c 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/workspaces.js
+++ b/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();
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/editor.scss b/packages/node_modules/@node-red/editor-client/src/sass/editor.scss
index 8563c2f12..2d39cc108 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/editor.scss
+++ b/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;
 }
diff --git a/packages/node_modules/@node-red/nodes/core/core/90-comment.html b/packages/node_modules/@node-red/nodes/core/core/90-comment.html
index dd390f120..5cb4e9ea5 100644
--- a/packages/node_modules/@node-red/nodes/core/core/90-comment.html
+++ b/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;
diff --git a/packages/node_modules/@node-red/nodes/locales/en-US/messages.json b/packages/node_modules/@node-red/nodes/locales/en-US/messages.json
index 006cd5799..59bfe6988 100644
--- a/packages/node_modules/@node-red/nodes/locales/en-US/messages.json
+++ b/packages/node_modules/@node-red/nodes/locales/en-US/messages.json
@@ -307,12 +307,7 @@
         }
     },
     "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>"
+        "comment": "comment"
     },
     "unknown": {
         "label": {
diff --git a/packages/node_modules/@node-red/nodes/locales/ja/messages.json b/packages/node_modules/@node-red/nodes/locales/ja/messages.json
index 61fa0b603..51edcc642 100644
--- a/packages/node_modules/@node-red/nodes/locales/ja/messages.json
+++ b/packages/node_modules/@node-red/nodes/locales/ja/messages.json
@@ -307,12 +307,7 @@
         }
     },
     "comment": {
-        "comment": "comment",
-        "label": {
-            "title": "タイトル",
-            "body": "本文"
-        },
-        "tip": "注釈: 本文は<a href=\"https://help.github.com/articles/markdown-basics/\" target=\"_blank\">GitHubのMarkdown形式</a>として整形されます。"
+        "comment": "comment"
     },
     "unknown": {
         "label": {
diff --git a/packages/node_modules/@node-red/nodes/locales/zh-CN/messages.json b/packages/node_modules/@node-red/nodes/locales/zh-CN/messages.json
index c946d6529..b61400e8e 100644
--- a/packages/node_modules/@node-red/nodes/locales/zh-CN/messages.json
+++ b/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": {