Add markdown-preview to expandable editor for ndoe descriptions

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

@@ -23,53 +23,74 @@ RED.panels = (function() {
         if (children.length !== 2) {
             throw new Error("Container must have exactly two children");
         }
-
+        var vertical = (!options.dir || options.dir === "vertical");
         container.addClass("red-ui-panels");
+        if (!vertical) {
+            container.addClass("red-ui-panels-horizontal");
+        }
         var separator = $('<div class="red-ui-panels-separator"></div>').insertAfter(children[0]);
         var startPosition;
-        var panelHeights = [];
+        var panelSizes = [];
-        var modifiedHeights = false;
+        var modifiedSizes = false;
         var panelRatio;
 
         separator.draggable({
-                axis: "y",
+                axis: vertical?"y":"x",
                 containment: container,
                 scroll: false,
                 start:function(event,ui) {
-                    var height = container.height();
+                    startPosition = vertical?ui.position.top:ui.position.left;
-                    startPosition = ui.position.top;
+
-                    panelHeights = [$(children[0]).height(),$(children[1]).height()];
+                    panelSizes = [
+                        vertical?$(children[0]).height():$(children[0]).width(),
+                        vertical?$(children[1]).height():$(children[1]).width()
+                    ];
                 },
                 drag: function(event,ui) {
-                    var height = container.height();
+                    var size = vertical?container.height():container.width();
-                    var delta = ui.position.top-startPosition;
+                    var delta = (vertical?ui.position.top:ui.position.left)-startPosition;
-                    var newHeights = [panelHeights[0]+delta,panelHeights[1]-delta];
+                    var newSizes = [panelSizes[0]+delta,panelSizes[1]-delta];
-                    $(children[0]).height(newHeights[0]);
+                    if (vertical) {
-                    $(children[1]).height(newHeights[1]);
+                        $(children[0]).height(newSizes[0]);
-                    if (options.resize) {
+                        $(children[1]).height(newSizes[1]);
-                        options.resize(newHeights[0],newHeights[1]);
-                    }
                         ui.position.top -= delta;
-                    panelRatio = newHeights[0]/height;
+                    } else {
+                        $(children[0]).width(newSizes[0]);
+                        $(children[1]).width(newSizes[1]);
+                        ui.position.left -= delta;
+                    }
+                    if (options.resize) {
+                        options.resize(newSizes[0],newSizes[1]);
+                    }
+                    panelRatio = newSizes[0]/size;
                 },
                 stop:function(event,ui) {
-                    modifiedHeights = true;
+                    modifiedSizes = true;
                 }
         });
 
         return {
-            resize: function(height) {
+            resize: function(size) {
-                var panelHeights = [$(children[0]).height(),$(children[1]).height()];
+                var panelSizes = [$(children[0]).height(),$(children[1]).height()];
-                container.height(height);
+                if (vertical) {
-                if (modifiedHeights) {
+                    container.height(size);
-                    var topPanelHeight = panelRatio*height;
+                } else {
-                    var bottomPanelHeight = height - topPanelHeight - 48;
+                    container.width(size);
-                    panelHeights = [topPanelHeight,bottomPanelHeight];
+                }
-                    $(children[0]).height(panelHeights[0]);
+                if (modifiedSizes) {
-                    $(children[1]).height(panelHeights[1]);
+                    var topPanelSize = panelRatio*size;
+                    var bottomPanelSize = size - topPanelSize - 48;
+                    panelSizes = [topPanelSize,bottomPanelSize];
+                    if (vertical) {
+                        $(children[0]).height(panelSizes[0]);
+                        $(children[1]).height(panelSizes[1]);
+                    } else {
+                        $(children[0]).width(panelSizes[0]);
+                        $(children[1]).width(panelSizes[1]);
+                    }
                 }
                 if (options.resize) {
-                    options.resize(panelHeights[0],panelHeights[1]);
+                    options.resize(panelSizes[0],panelSizes[1]);
                 }
             }
         }

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

@@ -884,7 +884,9 @@ RED.editor = (function() {
 
     function buildDescriptionForm(container,node) {
         var dialogForm = $('<form class="dialog-form form-horizontal" autocomplete="off"></form>').appendTo(container);
-        $('<div style="height: 100%;" class="node-text-editor" id="node-info-input-info-editor" ></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="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);
+        $('<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',
@@ -893,6 +895,23 @@ RED.editor = (function() {
         if (node.info) {
             nodeInfoEditor.getSession().setValue(node.info, -1);
         }
+
+        $('#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;
     }
 

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

@@ -16,7 +16,34 @@
 RED.editor.types._expression = (function() {
 
 
-    var template = '<script type="text/x-red" data-template-name="_expression"><div id="node-input-expression-panels"><div id="node-input-expression-panel-expr" class="red-ui-panel"><div class="form-row" style="margin-bottom: 3px; text-align: right;"><span class="node-input-expression-legacy"><i class="fa fa-exclamation-circle"></i> <span data-i18n="expressionEditor.compatMode"></span></span><button id="node-input-expression-reformat" class="editor-button editor-button-small"><span data-i18n="expressionEditor.format"></span></button></div><div class="form-row node-text-editor-row"><div class="node-text-editor" id="node-input-expression"></div></div></div><div id="node-input-expression-panel-info" class="red-ui-panel"><div class="form-row"><ul id="node-input-expression-tabs"></ul><div id="node-input-expression-tab-help" class="node-input-expression-tab-content hide"><div><select id="node-input-expression-func"></select><button id="node-input-expression-func-insert" class="editor-button" data-i18n="expressionEditor.insert"></button></div><div id="node-input-expression-help"></div></div><div id="node-input-expression-tab-test" class="node-input-expression-tab-content hide"><div><span style="display: inline-block; width: calc(50% - 5px);"><span data-i18n="expressionEditor.data"></span><button style="float: right; margin-right: 5px;" id="node-input-example-reformat" class="editor-button editor-button-small"><span data-i18n="jsonEditor.format"></span></button></span><span style="display: inline-block; width: calc(50% - 5px);" data-i18n="expressionEditor.result"></span></div><div style="display: inline-block; width: calc(50% - 5px);" class="node-text-editor" id="node-input-expression-test-data"></div><div style="display: inline-block; width: calc(50% - 5px);" class="node-text-editor" id="node-input-expression-test-result"></div></div></div></div></div></script>';
+    var template = '<script type="text/x-red" data-template-name="_expression">'+
+    '<div id="node-input-expression-panels">'+
+        '<div id="node-input-expression-panel-expr" class="red-ui-panel">'+
+            '<div class="form-row" style="margin-bottom: 3px; text-align: right;"><span class="node-input-expression-legacy"><i class="fa fa-exclamation-circle"></i> <span data-i18n="expressionEditor.compatMode"></span></span><button id="node-input-expression-reformat" class="editor-button editor-button-small"><span data-i18n="expressionEditor.format"></span></button></div>'+
+            '<div class="form-row node-text-editor-row"><div class="node-text-editor" id="node-input-expression"></div></div>'+
+        '</div>'+
+        '<div id="node-input-expression-panel-info" class="red-ui-panel">'+
+            '<div class="form-row">'+
+                '<ul id="node-input-expression-tabs"></ul>'+
+                '<div id="node-input-expression-tab-help" class="node-input-expression-tab-content hide">'+
+                    '<div>'+
+                        '<select id="node-input-expression-func"></select>'+
+                        '<button id="node-input-expression-func-insert" class="editor-button" data-i18n="expressionEditor.insert"></button>'+
+                    '</div>'+
+                    '<div id="node-input-expression-help"></div>'+
+                '</div>'+
+                '<div id="node-input-expression-tab-test" class="node-input-expression-tab-content hide">'+
+                    '<div>'+
+                        '<span style="display: inline-block; width: calc(50% - 5px);"><span data-i18n="expressionEditor.data"></span><button style="float: right; margin-right: 5px;" id="node-input-example-reformat" class="editor-button editor-button-small"><span data-i18n="jsonEditor.format"></span></button></span>'+
+                        '<span style="display: inline-block; width: calc(50% - 5px);" data-i18n="expressionEditor.result"></span>'+
+                    '</div>'+
+                    '<div style="display: inline-block; width: calc(50% - 5px);" class="node-text-editor" id="node-input-expression-test-data"></div>'+
+                    '<div style="display: inline-block; width: calc(50% - 5px);" class="node-text-editor" id="node-input-expression-test-result"></div>'+
+                '</div>'+
+            '</div>'+
+        '</div>'+
+    '</div>'+
+    '</script>';
     var expressionTestCache = {};
 
     return {

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

@@ -16,7 +16,18 @@
 RED.editor.types._markdown = (function() {
 
 
-    var template = '<script type="text/x-red" data-template-name="_markdown"><div class="form-row" id="node-input-markdown-title" style="margin-bottom: 3px; text-align: right;"></div><div class="form-row node-text-editor-row"><div style="height: 200px;min-height: 150px;" class="node-text-editor" id="node-input-markdown"></div></div></script>';
+    var template = '<script type="text/x-red" data-template-name="_markdown">'+
+    '<div id="node-input-markdown-panels">'+
+    '<div id="node-input-markdown-panel-editor" class="red-ui-panel">'+
+        '<div class="node-text-editor" style="height: calc(100% - 20px)" id="node-input-markdown"></div>'+
+    '</div>'+
+    '<div class="red-ui-panel">'+
+        '<div id="node-input-markdown-panel-preview" style="padding: 20px;" class="node-help"></div>'+
+    '</div>'+
+    '</script>';
+
+
+    var panels;
 
     return {
         init: function() {
@@ -31,7 +42,7 @@ RED.editor.types._markdown = (function() {
 
             var trayOptions = {
                 title: options.title,
-                width: "inherit",
+                width: options.width||Infinity,
                 buttons: [
                     {
                         id: "node-dialog-cancel",
@@ -45,34 +56,55 @@ RED.editor.types._markdown = (function() {
                         text: RED._("common.label.done"),
                         class: "primary",
                         click: function() {
-                            onComplete(expressionEditor.getValue());
+                            onComplete(expressionEditor.getValue(),expressionEditor.getCursorPosition());
                             RED.tray.close();
                         }
                     }
                 ],
                 resize: function(dimensions) {
-                    var rows = $("#dialog-form>div:not(.node-text-editor-row)");
+                    var width = $("#dialog-form").width();
-                    var editorRow = $("#dialog-form>div.node-text-editor-row");
+                    if (panels) {
-                    var height = $("#dialog-form").height();
+                        panels.resize(width);
-                    for (var i=0;i<rows.size();i++) {
-                        height -= $(rows[i]).outerHeight(true);
                     }
-                    height -= (parseInt($("#dialog-form").css("marginTop"))+parseInt($("#dialog-form").css("marginBottom")));
+
-                    $(".node-text-editor").css("height",height+"px");
-                    expressionEditor.resize();
                 },
                 open: function(tray) {
                     var trayBody = tray.find('.editor-tray-body');
+                    trayBody.addClass("node-input-markdown-editor")
                     var dialogForm = RED.editor.buildEditForm(tray.find('.editor-tray-body'),'dialog-form',type,'editor');
                     expressionEditor = RED.editor.createEditor({
                         id: 'node-input-markdown',
                         value: value,
                         mode:"ace/mode/markdown"
                     });
+                    var changeTimer;
+                    expressionEditor.getSession().on("change", function() {
+                        clearTimeout(changeTimer);
+                        changeTimer = setTimeout(function() {
+                            var currentScrollTop = $("#node-input-markdown-panel-preview").scrollTop();
+                            $("#node-input-markdown-panel-preview").html(marked(expressionEditor.getValue()));
+                            $("#node-input-markdown-panel-preview").scrollTop(currentScrollTop);
+                        },200);
+                    })
                     if (options.header) {
                         options.header.appendTo(tray.find('#node-input-markdown-title'));
                     }
 
+                    if (value) {
+                        $("#node-input-markdown-panel-preview").html(marked(expressionEditor.getValue()));
+                    }
+                    panels = RED.panels.create({
+                        id:"node-input-markdown-panels",
+                        dir: "horizontal",
+                        resize: function(p1Width,p2Width) {
+                            expressionEditor.resize();
+                        }
+                    });
+
+                    if (options.cursor) {
+                        expressionEditor.gotoLine(options.cursor.row+1,options.cursor.column,false);
+                    }
+
                     dialogForm.i18n();
                 },
                 close: function() {

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

@@ -56,6 +56,7 @@
 }
 .editor-tray-content {
     overflow: auto;
+    position: relative;
 }
 .editor-tray-header {
     @include disable-selection;
@@ -312,7 +313,18 @@
     float: none;
     text-align: right;
 }
-
+.node-input-markdown-editor #dialog-form {
+    margin: 0;
+    height: 100%;
+    .red-ui-panel {
+        &:first-child {
+            padding: 20px 20px 0;
+        }
+        &:last-child {
+            padding-bottom: 20px;
+        }
+    }
+}
 #clipboard-hidden {
     position: absolute;
     top: -3000px;

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

@@ -17,7 +17,7 @@
 
 .red-ui-panels {
     position: relative;
-
+    overflow: hidden;
     & > div {
         // border: 1px solid red;
         box-sizing: border-box;
@@ -38,3 +38,22 @@
     overflow: auto;
     height: calc(50% - 4px);
 }
+
+.red-ui-panels.red-ui-panels-horizontal {
+    height: 100%;
+    .red-ui-panel {
+        display: inline-block;
+        height: 100%;
+        width: calc(50% - 4px);
+    }
+    .red-ui-panels-separator {
+        border-top: none;
+        border-bottom: none;
+        border-left: 1px solid $secondary-border-color;
+        border-right: 1px solid $secondary-border-color;
+        height: 100%;
+        width: 7px;
+        display: inline-block;
+        cursor: ew-resize;
+    }
+}