mirror of https://github.com/node-red/node-red.git
123 lines
4.8 KiB
JavaScript
123 lines
4.8 KiB
JavaScript
/**
|
|
* Copyright JS Foundation and other contributors, http://js.foundation
|
|
*
|
|
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
* you may not use this file except in compliance with the License.
|
|
* You may obtain a copy of the License at
|
|
*
|
|
* http://www.apache.org/licenses/LICENSE-2.0
|
|
*
|
|
* Unless required by applicable law or agreed to in writing, software
|
|
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
* See the License for the specific language governing permissions and
|
|
* limitations under the License.
|
|
**/
|
|
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 class="node-text-editor" style="height: calc(100% - 20px)" 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>';
|
|
|
|
|
|
var panels;
|
|
|
|
return {
|
|
init: function() {
|
|
$(template).appendTo(document.body);
|
|
},
|
|
show: function(options) {
|
|
var value = options.value;
|
|
var onComplete = options.complete;
|
|
var type = "_markdown"
|
|
RED.view.state(RED.state.EDITING);
|
|
var expressionEditor;
|
|
|
|
var trayOptions = {
|
|
title: options.title,
|
|
width: options.width||Infinity,
|
|
buttons: [
|
|
{
|
|
id: "node-dialog-cancel",
|
|
text: RED._("common.label.cancel"),
|
|
click: function() {
|
|
RED.tray.close();
|
|
}
|
|
},
|
|
{
|
|
id: "node-dialog-ok",
|
|
text: RED._("common.label.done"),
|
|
class: "primary",
|
|
click: function() {
|
|
onComplete(expressionEditor.getValue(),expressionEditor.getCursorPosition());
|
|
RED.tray.close();
|
|
}
|
|
}
|
|
],
|
|
resize: function(dimensions) {
|
|
var width = $("#dialog-form").width();
|
|
if (panels) {
|
|
panels.resize(width);
|
|
}
|
|
|
|
},
|
|
open: function(tray) {
|
|
var trayBody = tray.find('.editor-tray-body');
|
|
trayBody.addClass("node-input-markdown-editor")
|
|
var dialogForm = RED.editor.buildEditForm(tray.find('.editor-tray-body'),'dialog-form',type,'editor');
|
|
expressionEditor = RED.editor.createEditor({
|
|
id: 'node-input-markdown',
|
|
value: value,
|
|
mode:"ace/mode/markdown"
|
|
});
|
|
var changeTimer;
|
|
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);
|
|
},200);
|
|
})
|
|
if (options.header) {
|
|
options.header.appendTo(tray.find('#node-input-markdown-title'));
|
|
}
|
|
|
|
if (value) {
|
|
$("#node-input-markdown-panel-preview").html(marked(expressionEditor.getValue()));
|
|
}
|
|
panels = RED.panels.create({
|
|
id:"node-input-markdown-panels",
|
|
dir: "horizontal",
|
|
resize: function(p1Width,p2Width) {
|
|
expressionEditor.resize();
|
|
}
|
|
});
|
|
|
|
if (options.cursor) {
|
|
expressionEditor.gotoLine(options.cursor.row+1,options.cursor.column,false);
|
|
}
|
|
|
|
dialogForm.i18n();
|
|
},
|
|
close: function() {
|
|
expressionEditor.destroy();
|
|
if (options.onclose) {
|
|
options.onclose();
|
|
}
|
|
},
|
|
show: function() {}
|
|
}
|
|
RED.tray.show(trayOptions);
|
|
|
|
}
|
|
}
|
|
})();
|