Better markdown editor preview

This commit is contained in:
Nick O'Leary
2018-10-07 14:24:32 +01:00
parent e24c22f9be
commit 6bd0682e8c
3 changed files with 43 additions and 22 deletions

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