frodovdr/node-red
1
0
Fork 0
mirror of https://github.com/node-red/node-red.git synced 2023-10-10 13:36:53 +02:00
Code Issues Releases Wiki Activity

Better markdown editor preview

Browse Source
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

20
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">'+
'<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);

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

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

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

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