mirror of
https://github.com/node-red/node-red.git
synced 2023-10-10 13:36:53 +02:00
Add markdown toolbar to node description editor
This commit is contained in:
Nick O'Leary
parent
bcc7834650
commit
422109868d
@ -63,45 +63,47 @@ RED.tabs = (function() {
|
||||
|
||||
var collapsedButtonsRow = $('<div class="red-ui-tab-link-buttons"></div>').appendTo(wrapper);
|
||||
|
||||
var selectButton = $('<a href="#"><i class="fa fa-caret-down"></i></a>').appendTo(collapsedButtonsRow);
|
||||
selectButton.addClass("red-ui-tab-link-button-menu")
|
||||
selectButton.click(function(evt) {
|
||||
evt.preventDefault();
|
||||
if (!collapsibleMenu) {
|
||||
var pinnedOptions = [];
|
||||
var options = [];
|
||||
ul.children().each(function(i,el) {
|
||||
var id = $(el).data('tabId');
|
||||
var opt = {
|
||||
id:"red-ui-tabs-menu-option-"+id,
|
||||
icon: tabs[id].iconClass || defaultTabIcon,
|
||||
label: tabs[id].name,
|
||||
onselect: function() {
|
||||
activateTab(id);
|
||||
if (options.menu !== false) {
|
||||
var selectButton = $('<a href="#"><i class="fa fa-caret-down"></i></a>').appendTo(collapsedButtonsRow);
|
||||
selectButton.addClass("red-ui-tab-link-button-menu")
|
||||
selectButton.click(function(evt) {
|
||||
evt.preventDefault();
|
||||
if (!collapsibleMenu) {
|
||||
var pinnedOptions = [];
|
||||
var options = [];
|
||||
ul.children().each(function(i,el) {
|
||||
var id = $(el).data('tabId');
|
||||
var opt = {
|
||||
id:"red-ui-tabs-menu-option-"+id,
|
||||
icon: tabs[id].iconClass || defaultTabIcon,
|
||||
label: tabs[id].name,
|
||||
onselect: function() {
|
||||
activateTab(id);
|
||||
}
|
||||
};
|
||||
if (tabs[id].pinned) {
|
||||
pinnedOptions.push(opt);
|
||||
} else {
|
||||
options.push(opt);
|
||||
}
|
||||
};
|
||||
if (tabs[id].pinned) {
|
||||
pinnedOptions.push(opt);
|
||||
} else {
|
||||
options.push(opt);
|
||||
}
|
||||
});
|
||||
options = pinnedOptions.concat(options);
|
||||
collapsibleMenu = RED.menu.init({id:"debug-message-option-menu",options: options});
|
||||
});
|
||||
options = pinnedOptions.concat(options);
|
||||
collapsibleMenu = RED.menu.init({id:"debug-message-option-menu",options: options});
|
||||
collapsibleMenu.css({
|
||||
position: "absolute"
|
||||
})
|
||||
collapsibleMenu.on('mouseleave', function(){ $(this).hide() });
|
||||
collapsibleMenu.on('mouseup', function() { $(this).hide() });
|
||||
collapsibleMenu.appendTo("body");
|
||||
}
|
||||
var elementPos = selectButton.offset();
|
||||
collapsibleMenu.css({
|
||||
position: "absolute"
|
||||
top: (elementPos.top+selectButton.height()-20)+"px",
|
||||
left: (elementPos.left - collapsibleMenu.width() + selectButton.width())+"px"
|
||||
})
|
||||
collapsibleMenu.on('mouseleave', function(){ $(this).hide() });
|
||||
collapsibleMenu.on('mouseup', function() { $(this).hide() });
|
||||
collapsibleMenu.appendTo("body");
|
||||
}
|
||||
var elementPos = selectButton.offset();
|
||||
collapsibleMenu.css({
|
||||
top: (elementPos.top+selectButton.height()-20)+"px",
|
||||
left: (elementPos.left - collapsibleMenu.width() + selectButton.width())+"px"
|
||||
collapsibleMenu.toggle();
|
||||
})
|
||||
collapsibleMenu.toggle();
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -336,7 +338,11 @@ RED.tabs = (function() {
|
||||
pinnedLink.insertAfter(collapsedButtonsRow.find("a.red-ui-tab-link-button-pinned:last"));
|
||||
}
|
||||
} else {
|
||||
pinnedLink.insertBefore(collapsedButtonsRow.find("a:last"));
|
||||
if (options.menu !== false) {
|
||||
pinnedLink.insertBefore(collapsedButtonsRow.find("a:last"));
|
||||
} else {
|
||||
pinnedLink.appendTo(collapsedButtonsRow);
|
||||
}
|
||||
}
|
||||
|
||||
pinnedLink.attr('id',li.attr('id')+"-link-button");
|
||||
|
||||
@ -884,9 +884,9 @@ RED.editor = (function() {
|
||||
|
||||
function buildDescriptionForm(container,node) {
|
||||
var dialogForm = $('<form class="dialog-form form-horizontal" autocomplete="off"></form>').appendTo(container);
|
||||
var row = $('<div class="form-row node-text-editor-row" style="position:relative; padding-top: 4px; height: 100%"></div>').appendTo(dialogForm);
|
||||
$('<div style="position: absolute; right:0; bottom:100%;"><button id="node-info-input-info-expand" class="editor-button editor-button-small"><i class="fa fa-expand"></i></button></div>').appendTo(row);
|
||||
$('<div style="height: 100%;" class="node-text-editor" id="node-info-input-info-editor" ></div>').appendTo(row);
|
||||
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);
|
||||
$('<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",
|
||||
mode: 'ace/mode/markdown',
|
||||
@ -895,6 +895,9 @@ 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();
|
||||
@ -1267,7 +1270,8 @@ RED.editor = (function() {
|
||||
RED.tray.resize();
|
||||
}
|
||||
},
|
||||
collapsible: true
|
||||
collapsible: true,
|
||||
menu: false
|
||||
});
|
||||
if (editing_node) {
|
||||
RED.sidebar.info.refresh(editing_node);
|
||||
|
||||
@ -16,37 +16,36 @@
|
||||
RED.editor.types._markdown = (function() {
|
||||
|
||||
|
||||
var toolbarTemplate = '<div style="margin-bottom: 5px">'+
|
||||
'<span class="button-group">'+
|
||||
'<button class="editor-button" data-style="h1" style="font-size:1.1em; font-weight: bold">h1</button>'+
|
||||
'<button class="editor-button" data-style="h2" style="font-size:1.0em; font-weight: bold">h2</button>'+
|
||||
'<button class="editor-button" data-style="h3" style="font-size:0.9em; font-weight: bold">h3</button>'+
|
||||
'</span>'+
|
||||
'<span class="button-group">'+
|
||||
'<button class="editor-button" data-style="b"><i class="fa fa-bold"></i></button>'+
|
||||
'<button class="editor-button" data-style="i"><i class="fa fa-italic"></i></button>'+
|
||||
'<button class="editor-button" data-style="code"><i class="fa fa-code"></i></button>'+
|
||||
'</span>'+
|
||||
'<span class="button-group">'+
|
||||
'<button class="editor-button" data-style="ol"><i class="fa fa-list-ol"></i></button>'+
|
||||
'<button class="editor-button" data-style="ul"><i class="fa fa-list-ul"></i></button>'+
|
||||
'<button class="editor-button" data-style="bq"><i class="fa fa-quote-left"></i></button>'+
|
||||
'<button class="editor-button" data-style="hr"><i class="fa fa-minus"></i></button>'+
|
||||
'<button class="editor-button" data-style="link"><i class="fa fa-link"></i></button>'+
|
||||
'</span>'
|
||||
'</div>';
|
||||
|
||||
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" style="margin-bottom: 5px">'+
|
||||
'<span class="button-group">'+
|
||||
'<button class="editor-button" data-style="h1" style="font-size:1.1em; font-weight: bold">h1</button>'+
|
||||
'<button class="editor-button" data-style="h2" style="font-size:1.0em; font-weight: bold">h2</button>'+
|
||||
'<button class="editor-button" data-style="h3" style="font-size:0.9em; font-weight: bold">h3</button>'+
|
||||
'</span>'+
|
||||
'<span class="button-group">'+
|
||||
'<button class="editor-button" data-style="b"><i class="fa fa-bold"></i></button>'+
|
||||
'<button class="editor-button" data-style="i"><i class="fa fa-italic"></i></button>'+
|
||||
'<button class="editor-button" data-style="code"><i class="fa fa-code"></i></button>'+
|
||||
'</span>'+
|
||||
'<span class="button-group">'+
|
||||
'<button class="editor-button" data-style="ol"><i class="fa fa-list-ol"></i></button>'+
|
||||
'<button class="editor-button" data-style="ul"><i class="fa fa-list-ul"></i></button>'+
|
||||
'<button class="editor-button" data-style="bq"><i class="fa fa-quote-left"></i></button>'+
|
||||
'<button class="editor-button" data-style="hr"><i class="fa fa-minus"></i></button>'+
|
||||
'<button class="editor-button" data-style="link"><i class="fa fa-link"></i></button>'+
|
||||
'</span>'+
|
||||
'<span class="button-group">'+
|
||||
'<button id="node-btn-markdown-preview" class="editor-button toggle single"><i class="fa fa-eye"></i></button>'+
|
||||
'</span>'+
|
||||
'<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>'+
|
||||
'<div class="node-text-editor" style="height: calc(100% - 50px)" id="node-input-markdown"></div>'+
|
||||
'</div>'+
|
||||
'<div class="red-ui-panel">'+
|
||||
'<div id="node-input-markdown-panel-preview" style="padding: 20px;" class="node-help"></div>'+
|
||||
'</div>'+
|
||||
'</script>';
|
||||
'<div class="red-ui-panel">'+
|
||||
'<div id="node-input-markdown-panel-preview" style="padding: 20px;" class="node-help"></div>'+
|
||||
'</div>'+
|
||||
'</script>';
|
||||
|
||||
|
||||
var panels;
|
||||
@ -137,6 +136,11 @@ RED.editor.types._markdown = (function() {
|
||||
}
|
||||
});
|
||||
panels.ratio(1);
|
||||
var toolbar = RED.editor.types._markdown.buildToolbar($("#node-input-markdown-toolbar"), expressionEditor);
|
||||
|
||||
$('<span class="button-group">'+
|
||||
'<button id="node-btn-markdown-preview" class="editor-button toggle single"><i class="fa fa-eye"></i></button>'+
|
||||
'</span>').appendTo(toolbar);
|
||||
|
||||
$("#node-btn-markdown-preview").click(function(e) {
|
||||
e.preventDefault();
|
||||
@ -149,38 +153,6 @@ RED.editor.types._markdown = (function() {
|
||||
}
|
||||
});
|
||||
|
||||
$('#node-input-markdown-toolbar').find('button[data-style]').each(function(el) {
|
||||
var style = styleActions[$(this).data('style')];
|
||||
$(this).click(function(e) {
|
||||
e.preventDefault();
|
||||
var current = expressionEditor.getSelectedText();
|
||||
var range = expressionEditor.selection.getRange();
|
||||
if (style.newline) {
|
||||
var offset = 0;
|
||||
var beforeOffset = ((style.before||"").match(/\n/g)||[]).length;
|
||||
var afterOffset = ((style.after||"").match(/\n/g)||[]).length;
|
||||
for (var i = range.start.row; i<= range.end.row+offset; i++) {
|
||||
if (style.before) {
|
||||
expressionEditor.session.insert({row:i, column:0},style.before);
|
||||
offset += beforeOffset;
|
||||
i += beforeOffset;
|
||||
}
|
||||
if (style.after) {
|
||||
expressionEditor.session.insert({row:i, column:Infinity},style.after);
|
||||
offset += afterOffset;
|
||||
i += afterOffset;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
expressionEditor.session.replace(expressionEditor.selection.getRange(), (style.before||"")+current+(style.after||""));
|
||||
}
|
||||
expressionEditor.focus();
|
||||
});
|
||||
if (style.tooltip) {
|
||||
RED.popover.tooltip($(this),style.tooltip);
|
||||
}
|
||||
|
||||
})
|
||||
|
||||
if (options.cursor) {
|
||||
expressionEditor.gotoLine(options.cursor.row+1,options.cursor.column,false);
|
||||
@ -197,7 +169,42 @@ RED.editor.types._markdown = (function() {
|
||||
show: function() {}
|
||||
}
|
||||
RED.tray.show(trayOptions);
|
||||
},
|
||||
|
||||
buildToolbar: function(container, editor) {
|
||||
var toolbar = $(toolbarTemplate).appendTo(container);
|
||||
toolbar.find('button[data-style]').each(function(el) {
|
||||
var style = styleActions[$(this).data('style')];
|
||||
$(this).click(function(e) {
|
||||
e.preventDefault();
|
||||
var current = editor.getSelectedText();
|
||||
var range = editor.selection.getRange();
|
||||
if (style.newline) {
|
||||
var offset = 0;
|
||||
var beforeOffset = ((style.before||"").match(/\n/g)||[]).length;
|
||||
var afterOffset = ((style.after||"").match(/\n/g)||[]).length;
|
||||
for (var i = range.start.row; i<= range.end.row+offset; i++) {
|
||||
if (style.before) {
|
||||
editor.session.insert({row:i, column:0},style.before);
|
||||
offset += beforeOffset;
|
||||
i += beforeOffset;
|
||||
}
|
||||
if (style.after) {
|
||||
editor.session.insert({row:i, column:Infinity},style.after);
|
||||
offset += afterOffset;
|
||||
i += afterOffset;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
editor.session.replace(editor.selection.getRange(), (style.before||"")+current+(style.after||""));
|
||||
}
|
||||
editor.focus();
|
||||
});
|
||||
if (style.tooltip) {
|
||||
RED.popover.tooltip($(this),style.tooltip);
|
||||
}
|
||||
})
|
||||
return toolbar;
|
||||
}
|
||||
}
|
||||
})();
|
||||
|
||||
@ -17,7 +17,6 @@
|
||||
<label for="node-input-outputs"><i class="fa fa-random"></i> <span data-i18n="function.label.outputs"></span></label>
|
||||
<input id="node-input-outputs" style="width: 60px;" value="1">
|
||||
</div>
|
||||
<div class="form-tips"><span data-i18n="function.tip"></span></div>
|
||||
</script>
|
||||
|
||||
<script type="text/x-red" data-help-name="function">
|
||||
|
||||
@ -196,8 +196,7 @@
|
||||
"error": {
|
||||
"inputListener":"Cannot add listener to 'input' event within Function",
|
||||
"non-message-returned":"Function tried to send a message of type __type__"
|
||||
},
|
||||
"tip": "See the Info tab for help writing functions."
|
||||
}
|
||||
},
|
||||
"template": {
|
||||
"template": "template",
|
||||
|
||||
@ -196,8 +196,7 @@
|
||||
"error": {
|
||||
"inputListener": "コード内で'input'イベントのリスナを設定できません",
|
||||
"non-message-returned": "Functionノードが __type__ 型のメッセージ送信を試みました"
|
||||
},
|
||||
"tip": "コードの記述方法はノードの「情報」を参照してください。"
|
||||
}
|
||||
},
|
||||
"template": {
|
||||
"template": "template",
|
||||
|
||||
@ -191,8 +191,7 @@
|
||||
"error": {
|
||||
"inputListener":"无法在函数中监听对'注入'事件",
|
||||
"non-message-returned":"函数节点尝试返回类型为 __type__ 的信息"
|
||||
},
|
||||
"tip": "可从信息页面查看更多关于如何编写函数的帮助"
|
||||
}
|
||||
},
|
||||
"template": {
|
||||
"label": {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user