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; } }