frodovdr
/
node-red
mirror of https://github.com/node-red/node-red.git
1
0
Fork 0
Code Issues Releases Wiki Activity

Better markdown editor preview

This commit is contained in:
Nick O'Leary 2018-10-07 14:24:32 +01:00
parent e24c22f9be
commit 6bd0682e8c
No known key found for this signature in database
GPG Key ID: 4F2157149161A6C9
3 changed files with 43 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
packages/node_modules/@node-red/editor-client/src/js/ui/editors/markdown.js vendored
View File

@ -39,11 +39,13 @@ RED.editor.types._markdown = (function() {
var template = '<script type="text/x-red" data-template-name="_markdown">'+ var template = '<script type="text/x-red" data-template-name="_markdown">'+
'<div id="node-input-markdown-panels">'+ '<div id="node-input-markdown-panels">'+
'<div id="node-input-markdown-panel-editor" class="red-ui-panel">'+ '<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 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: calc(100% - 50px)" id="node-input-markdown"></div>'+
'</div>'+ '</div>'+
'</div>'+
'<div class="red-ui-panel">'+ '<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>'+ '</div>'+
'</script>'; '</script>';
@ -116,9 +118,9 @@ RED.editor.types._markdown = (function() {
expressionEditor.getSession().on("change", function() { expressionEditor.getSession().on("change", function() {
clearTimeout(changeTimer); clearTimeout(changeTimer);
changeTimer = setTimeout(function() { changeTimer = setTimeout(function() {
var currentScrollTop = $("#node-input-markdown-panel-preview").scrollTop(); var currentScrollTop = $(".node-input-markdown-panel-preview").scrollTop();
$("#node-input-markdown-panel-preview").html(marked(expressionEditor.getValue())); $(".node-input-markdown-panel-preview").html(marked(expressionEditor.getValue()));
$("#node-input-markdown-panel-preview").scrollTop(currentScrollTop); $(".node-input-markdown-panel-preview").scrollTop(currentScrollTop);
},200); },200);
}) })
if (options.header) { if (options.header) {
@ -126,7 +128,7 @@ RED.editor.types._markdown = (function() {
} }
if (value) { if (value) {
$("#node-input-markdown-panel-preview").html(marked(expressionEditor.getValue())); $(".node-input-markdown-panel-preview").html(marked(expressionEditor.getValue()));
} }
panels = RED.panels.create({ panels = RED.panels.create({
id:"node-input-markdown-panels", id:"node-input-markdown-panels",
@ -138,7 +140,7 @@ RED.editor.types._markdown = (function() {
panels.ratio(1); panels.ratio(1);
var toolbar = RED.editor.types._markdown.buildToolbar($("#node-input-markdown-toolbar"), expressionEditor); 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>'+ '<button id="node-btn-markdown-preview" class="editor-button toggle single"><i class="fa fa-eye"></i></button>'+
'</span>').appendTo(toolbar); '</span>').appendTo(toolbar);
@ -152,7 +154,7 @@ RED.editor.types._markdown = (function() {
panels.ratio(0.5); panels.ratio(0.5);
} }
}); });
RED.popover.tooltip($("#node-btn-markdown-preview"),"Toggle preview");
if (options.cursor) { if (options.cursor) {
expressionEditor.gotoLine(options.cursor.row+1,options.cursor.column,false); expressionEditor.gotoLine(options.cursor.row+1,options.cursor.column,false);

17
packages/node_modules/@node-red/editor-client/src/sass/editor.scss vendored
View File

@ -321,14 +321,23 @@
margin: 0; margin: 0;
height: 100%; height: 100%;
.red-ui-panel { .red-ui-panel {
&:first-child { padding: 20px 20px 10px;
padding: 20px 20px 0;
}
&:last-child { &: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 { #clipboard-hidden {
position: absolute; position: absolute;
top: -3000px; top: -3000px;

12
packages/node_modules/@node-red/editor-client/src/sass/mixins.scss vendored
View File

@ -131,6 +131,17 @@
@mixin workspace-button-toggle { @mixin workspace-button-toggle {
@include workspace-button; @include workspace-button;
&.single {
color: $workspace-button-color !important;
background: $workspace-button-background;
&.selected:not(.disabled):not(:disabled) {
color: $workspace-button-toggle-color !important;
background: $workspace-button-background-active;
}
}
&:not(.single) {
color: $workspace-button-toggle-color !important; color: $workspace-button-toggle-color !important;
background:$workspace-button-background-active; background:$workspace-button-background-active;
margin-bottom: 1px; margin-bottom: 1px;
@ -141,7 +152,6 @@
border-bottom-width: 2px; border-bottom-width: 2px;
border-bottom-color: $form-input-border-selected-color; border-bottom-color: $form-input-border-selected-color;
margin-bottom: 0; margin-bottom: 0;
&:not(.single) {
cursor: default; cursor: default;
} }
} }