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

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
No known key found for this signature in database
GPG Key ID: 4F2157149161A6C9
12 changed files with 83 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
packages/node_modules/@node-red/editor-client/locales/en-US/editor.json vendored
View File

@ -27,8 +27,7 @@
"status": "Status",
"enabled": "Enabled",
"disabled":"Disabled",
"info": "Description",
"tip": "Description accepts Markdown and will appear in the Info tab."
"info": "Description"
},
"menu": {
"label": {
@ -279,7 +278,6 @@
"deleteSubflow": "delete subflow",
"info": "Description",
"category": "Category",
"format":"markdown format",
"errors": {
"noNodesSelected": "<strong>Cannot create subflow</strong>: no nodes selected",
"multipleInputsToSelection": "<strong>Cannot create subflow</strong>: multiple inputs to selection"
@ -719,7 +717,8 @@
"format": "format JSON"
},
"markdownEditor": {
"title": "Markdown editor"
"title": "Markdown editor",
"format": "Formatted with markdown"
},
"bufferEditor": {
"title": "Buffer editor",

4
packages/node_modules/@node-red/editor-client/locales/ja/editor.json vendored
View File

@ -27,8 +27,7 @@
"status": "状態",
"enabled": "有効",
"disabled": "無効",
"info": "詳細",
"tip": "マークダウン形式で記述した「詳細」は「情報タブ」に表示されます。"
"info": "詳細"
},
"menu": {
"label": {
@ -278,7 +277,6 @@
"deleteSubflow": "サブフローを削除",
"info": "詳細",
"category": "カテゴリ",
"format": "マークダウン形式",
"errors": {
"noNodesSelected": "<strong>サブフローを作成できません</strong>: ノードが選択されていません",
"multipleInputsToSelection": "<strong>サブフローを作成できません</strong>: 複数の入力が選択されています"

4
packages/node_modules/@node-red/editor-client/locales/zh-CN/editor.json vendored
View File

@ -22,8 +22,7 @@
"status": "状态",
"enabled": "有效",
"disabled": "无效",
"info": "详细描述",
"tip": "详细描述支持Markdown轻量级标记语言，并将出现在信息标签中。"
"info": "详细描述"
},
"menu": {
"label": {
@ -191,7 +190,6 @@
"output": "输出:",
"deleteSubflow": "删除子流程",
"info": "详细描述",
"format": "标记格式",
"errors": {
"noNodesSelected": "<strong>无法创建子流程</strong>: 未选择节点",
"multipleInputsToSelection": "<strong>无法创建子流程</strong>: 多个输入到了选择"

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

10
packages/node_modules/@node-red/nodes/core/core/90-comment.html vendored
View File

@ -1,17 +1,13 @@
<script type="text/x-red" data-template-name="comment">
<div class="form-row">
<label for="node-input-name"><i class="fa fa-comment"></i> <span data-i18n="comment.label.title"></span></label>
<label for="node-input-name"><i class="fa fa-tag"></i> <span data-i18n="common.label.name"></span></label>
<input type="text" id="node-input-name">
</div>
<div class="form-row" style="margin-bottom: 0px;">
<label for="node-input-info" style="width: 100% !important;"><i class="fa fa-comments"></i> <span data-i18n="comment.label.body"></span></label>
<input type="hidden" id="node-input-info" autofocus="autofocus">
</div>
<div class="form-row node-text-editor-row">
<input type="hidden" id="node-input-info" autofocus="autofocus">
<div style="height: 250px; min-height:150px;" class="node-text-editor" id="node-input-info-editor"></div>
</div>
<div class="form-tips" data-i18n="[html]comment.tip"></div>
</script>
<script type="text/javascript">
@ -32,7 +28,7 @@
return this.name?"node_label_italic":"";
},
info: function() {
return (this.name?"# "+this.name+"\n":"")+(this.info||"");
return this.name?"# "+this.name+"\n\n---\n\n":"";
},
oneditprepare: function() {
var that = this;

7
packages/node_modules/@node-red/nodes/locales/en-US/messages.json vendored
View File

@ -307,12 +307,7 @@
}
},
"comment": {
"comment": "comment",
"label": {
"title": "Title",
"body": "Body"
},
"tip": "Tip: The body text can be styled as <a href=\"https://help.github.com/articles/markdown-basics/\" target=\"_blank\">GitHub flavoured Markdown</a>"
"comment": "comment"
},
"unknown": {
"label": {

7
packages/node_modules/@node-red/nodes/locales/ja/messages.json vendored
View File

@ -307,12 +307,7 @@
}
},
"comment": {
"comment": "comment",
"label": {
"title": "タイトル",
"body": "本文"
},
"tip": "注釈: 本文は<a href=\"https://help.github.com/articles/markdown-basics/\" target=\"_blank\">GitHubのMarkdown形式</a>として整形されます。"
"comment": "comment"
},
"unknown": {
"label": {

5
packages/node_modules/@node-red/nodes/locales/zh-CN/messages.json vendored
View File

@ -297,11 +297,6 @@
}
},
"comment": {
"label": {
"title": "标题",
"body": "主体"
},
"tip": "提示: 主题内容可被格式化为 <a href=\"https://help.github.com/articles/markdown-basics/\" target=\"_blank\">GitHub风格的Markdown</a>"
},
"unknown": {
"label": {