From 6bd0682e8c04cb59becfedef21460f266f81dc58 Mon Sep 17 00:00:00 2001
From: Nick O'Leary <nick.oleary@gmail.com>
Date: Sun, 7 Oct 2018 14:24:32 +0100
Subject: [PATCH] Better markdown editor preview

---
 .../src/js/ui/editors/markdown.js             | 20 +++++++------
 .../editor-client/src/sass/editor.scss        | 17 ++++++++---
 .../editor-client/src/sass/mixins.scss        | 28 +++++++++++++------
 3 files changed, 43 insertions(+), 22 deletions(-)

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 fb7f141d9..dd020e780 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
@@ -39,11 +39,13 @@ RED.editor.types._markdown = (function() {
     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 id="node-input-markdown-toolbar"></div>'+
-            '<div class="node-text-editor" style="height: calc(100% - 50px)" id="node-input-markdown"></div>'+
+            '<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>'+
         '</div>'+
         '<div class="red-ui-panel">'+
-            '<div id="node-input-markdown-panel-preview" style="padding: 20px;" class="node-help"></div>'+
+            '<div class="node-input-markdown-panel-preview node-help"></div>'+
         '</div>'+
         '</script>';
 
@@ -116,9 +118,9 @@ RED.editor.types._markdown = (function() {
                     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);
+                            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) {
@@ -126,7 +128,7 @@ RED.editor.types._markdown = (function() {
                     }
 
                     if (value) {
-                        $("#node-input-markdown-panel-preview").html(marked(expressionEditor.getValue()));
+                        $(".node-input-markdown-panel-preview").html(marked(expressionEditor.getValue()));
                     }
                     panels = RED.panels.create({
                         id:"node-input-markdown-panels",
@@ -138,7 +140,7 @@ RED.editor.types._markdown = (function() {
                     panels.ratio(1);
                     var toolbar = RED.editor.types._markdown.buildToolbar($("#node-input-markdown-toolbar"), expressionEditor);
 
-                    $('<span class="button-group">'+
+                    $('<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);
 
@@ -152,7 +154,7 @@ RED.editor.types._markdown = (function() {
                             panels.ratio(0.5);
                         }
                     });
-
+                    RED.popover.tooltip($("#node-btn-markdown-preview"),"Toggle preview");
 
                     if (options.cursor) {
                         expressionEditor.gotoLine(options.cursor.row+1,options.cursor.column,false);
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 616fcb916..4699a9a22 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
@@ -321,14 +321,23 @@
     margin: 0;
     height: 100%;
     .red-ui-panel {
-        &:first-child {
-            padding: 20px 20px 0;
-        }
+        padding: 20px 20px 10px;
         &:last-child {
-            padding-bottom: 20px;
+            padding-top: 60px;
+            background: #f9f9f9;
+
         }
     }
 }
+.node-input-markdown-panel-preview {
+    padding: 10px;
+    border:1px solid #ccc;
+    border-radius:5px;
+    height: calc(100% - 31px);
+    overflow-y: scroll;
+    background: #fff;
+}
+
 #clipboard-hidden {
     position: absolute;
     top: -3000px;
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/mixins.scss b/packages/node_modules/@node-red/editor-client/src/sass/mixins.scss
index bdef0ebc4..2b283a1af 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/mixins.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/mixins.scss
@@ -131,17 +131,27 @@
 
 @mixin workspace-button-toggle {
     @include workspace-button;
-    color: $workspace-button-toggle-color !important;
-    background:$workspace-button-background-active;
-    margin-bottom: 1px;
 
-    &.selected:not(.disabled):not(:disabled) {
-        color: $workspace-button-toggle-color-selected !important;
+    &.single {
+        color: $workspace-button-color !important;
         background: $workspace-button-background;
-        border-bottom-width: 2px;
-        border-bottom-color: $form-input-border-selected-color;
-        margin-bottom: 0;
-        &:not(.single) {
+        
+        &.selected:not(.disabled):not(:disabled) {
+            color: $workspace-button-toggle-color !important;
+            background: $workspace-button-background-active;
+        }
+    }
+    &:not(.single) {
+        color: $workspace-button-toggle-color !important;
+        background:$workspace-button-background-active;
+        margin-bottom: 1px;
+
+        &.selected:not(.disabled):not(:disabled) {
+            color: $workspace-button-toggle-color-selected !important;
+            background: $workspace-button-background;
+            border-bottom-width: 2px;
+            border-bottom-color: $form-input-border-selected-color;
+            margin-bottom: 0;
             cursor: default;
         }
     }