frodovdr/node-red
1
0
Fork 0
mirror of https://github.com/node-red/node-red.git synced 2025-03-01 10:36:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

Tidy up markdown toolbar handling across all editors

Browse Source 
Any editor for the markdown mode will now automatically get
the markdown toolbar added.

The comment node has been updated to handle this properly and
to not add two copies of its content to the sidebar.
This commit is contained in:
Nick O'Leary
2018-12-10 15:23:02 +00:00
parent cf3b4e9e63
commit 6201247875
12 changed files with 83 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
packages/node_modules/@node-red/editor-client/src/js/ui/common/popover.js vendored
View File

@@ -38,7 +38,7 @@ RED.popover = (function() {
var direction = options.direction || "right";
var trigger = options.trigger;
var content = options.content;
var delay = options.delay;
var delay = options.delay || { show: 750, hide: 50 };
var autoClose = options.autoClose;
var width = options.width||"auto";
var size = options.size||"default";
@@ -172,6 +172,18 @@ RED.popover = (function() {
openPopup();
}
});
if (autoClose) {
target.on('mouseleave disabled', function(e) {
if (timer) {
clearTimeout(timer);
}
if (active) {
active = false;
setTimeout(closePopup,autoClose);
}
});
}
} else if (trigger === 'modal') {
$(document).on('mousedown.modal-popover-close', function (event) {
var target = event.target;

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

@@ -929,7 +929,7 @@ RED.editor = (function() {
function buildDescriptionForm(container,node) {
var dialogForm = $('<form class="dialog-form form-horizontal" autocomplete="off"></form>').appendTo(container);
var toolbarRow = $('<div></div>').appendTo(dialogForm);
var row = $('<div class="form-row node-text-editor-row" style="position:relative; padding-top: 4px; height: calc(100% - 36px);"></div>').appendTo(dialogForm);
var row = $('<div class="form-row node-text-editor-row" style="position:relative; padding-top: 4px; height: 100%"></div>').appendTo(dialogForm);
$('<div style="height: 100%" class="node-text-editor" id="node-info-input-info-editor" ></div>').appendTo(row);
var nodeInfoEditor = RED.editor.createEditor({
id: "node-info-input-info-editor",
@@ -939,26 +939,6 @@ RED.editor = (function() {
if (node.info) {
nodeInfoEditor.getSession().setValue(node.info, -1);
}
var toolbar = RED.editor.types._markdown.buildToolbar(toolbarRow,nodeInfoEditor);
$('<button id="node-info-input-info-expand" class="editor-button" style="float: right;"><i class="fa fa-expand"></i></button>').appendTo(toolbar);
$('#node-info-input-info-expand').click(function(e) {
e.preventDefault();
var value = nodeInfoEditor.getValue();
RED.editor.editMarkdown({
value: value,
width: "Infinity",
cursor: nodeInfoEditor.getCursorPosition(),
complete: function(v,cursor) {
nodeInfoEditor.setValue(v, -1);
nodeInfoEditor.gotoLine(cursor.row+1,cursor.column,false);
setTimeout(function() {
nodeInfoEditor.focus();
},300);
}
})
});
return nodeInfoEditor;
}
@@ -2206,7 +2186,10 @@ RED.editor = (function() {
createEditor: function(options) {
var editor = ace.edit(options.id||options.element);
var el = options.element || $("#"+options.id)[0];
var toolbarRow = $("<div>").appendTo(el);
el = $("<div>").appendTo(el).addClass("node-text-editor-container")[0];
var editor = ace.edit(el);
editor.setTheme("ace/theme/tomorrow");
var session = editor.getSession();
session.on("changeAnnotation", function () {
@@ -2254,6 +2237,39 @@ RED.editor = (function() {
}
},100);
}
if (options.mode === 'ace/mode/markdown') {
$(el).addClass("node-text-editor-container-toolbar");
editor.toolbar = RED.editor.types._markdown.buildToolbar(toolbarRow,editor);
if (options.expandable !== false) {
var expandButton = $('<button class="editor-button" style="float: right;"><i class="fa fa-expand"></i></button>').appendTo(editor.toolbar);
expandButton.click(function(e) {
e.preventDefault();
var value = editor.getValue();
RED.editor.editMarkdown({
value: value,
width: "Infinity",
cursor: editor.getCursorPosition(),
complete: function(v,cursor) {
editor.setValue(v, -1);
editor.gotoLine(cursor.row+1,cursor.column,false);
setTimeout(function() {
editor.focus();
},300);
}
})
});
}
var helpButton = $('<button class="node-text-editor-help editor-button editor-button-small"><i class="fa fa-question"></i></button>').appendTo($(el).parent());
RED.popover.create({
target: helpButton,
trigger: 'click',
size: "small",
direction: "left",
content: RED._("markdownEditor.format"),
autoClose: 50
});
}
return editor;
}
}

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

@@ -41,7 +41,7 @@ RED.editor.types._markdown = (function() {
'<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 class="node-text-editor" style="height: calc(100% - 50px)" id="node-input-markdown"></div>'+
'<div class="node-text-editor" style="height: 100%" id="node-input-markdown"></div>'+
'</div>'+
'</div>'+
'<div class="red-ui-panel">'+
@@ -112,7 +112,8 @@ RED.editor.types._markdown = (function() {
expressionEditor = RED.editor.createEditor({
id: 'node-input-markdown',
value: value,
mode:"ace/mode/markdown"
mode:"ace/mode/markdown",
expandable: false
});
var changeTimer;
expressionEditor.getSession().on("change", function() {
@@ -138,11 +139,10 @@ RED.editor.types._markdown = (function() {
}
});
panels.ratio(1);
var toolbar = RED.editor.types._markdown.buildToolbar($("#node-input-markdown-toolbar"), expressionEditor);
$('<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);
'</span>').appendTo(expressionEditor.toolbar);
$("#node-btn-markdown-preview").click(function(e) {
e.preventDefault();

6
packages/node_modules/@node-red/editor-client/src/js/ui/workspaces.js vendored
View File

@@ -146,7 +146,6 @@ RED.workspaces = (function() {
height -= $(rows[i]).outerHeight(true);
}
height -= (parseInt($("#dialog-form").css("marginTop"))+parseInt($("#dialog-form").css("marginBottom")));
height -= 28;
$(".node-text-editor").css("height",height+"px");
tabflowEditor.resize();
},
@@ -166,7 +165,6 @@ RED.workspaces = (function() {
var row = $('<div class="form-row node-text-editor-row">'+
'<label for="node-input-info" data-i18n="editor:workspace.info" style="width:300px;"></label>'+
'<div class="node-text-editor-toolbar"></div>'+
'<div style="min-height:250px;" class="node-text-editor" id="node-input-info"></div>'+
'</div>').appendTo(dialogForm);
tabflowEditor = RED.editor.createEditor({
@@ -175,10 +173,6 @@ RED.workspaces = (function() {
value: ""
});
var toolbar = RED.editor.types._markdown.buildToolbar(row.find(".node-text-editor-toolbar"),tabflowEditor);
$('<button id="node-info-input-info-expand" class="editor-button" style="float: right;"><i class="fa fa-expand"></i></button>').appendTo(toolbar);
$('#node-info-input-info-expand').click(function(e) {
e.preventDefault();
var value = tabflowEditor.getValue();

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

@@ -209,11 +209,28 @@
}
.node-text-editor {
position: relative;
.node-text-editor-help {
position: absolute;
bottom: 0px;
right: 1px;
border-bottom-right-radius: 5px;
z-Index: 8;
border-bottom: none;
border-right: none;
}
}
.node-text-editor-container {
border:1px solid #ccc;
border-radius:5px;
overflow: hidden;
font-size: 14px !important;
font-family: Menlo, Consolas, 'DejaVu Sans Mono', Courier, monospace !important;
height: 100%;
&.node-text-editor-container-toolbar {
height: calc(100% - 40px);
}
}
.editor-button {
@@ -333,7 +350,7 @@
padding: 10px;
border:1px solid #ccc;
border-radius:5px;
height: calc(100% - 31px);
height: calc(100% - 21px);
overflow-y: scroll;
background: #fff;
}