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 = '';
@@ -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);
- $(''+
+ $(''+
''+
'').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;
}
}