diff --git a/packages/node_modules/@node-red/editor-client/locales/en-US/editor.json b/packages/node_modules/@node-red/editor-client/locales/en-US/editor.json
index ccab81cf0..27ccb1658 100755
--- a/packages/node_modules/@node-red/editor-client/locales/en-US/editor.json
+++ b/packages/node_modules/@node-red/editor-client/locales/en-US/editor.json
@@ -53,6 +53,7 @@
"confirmDelete": "Confirm delete",
"delete": "Are you sure you want to delete '__label__'?",
"dropFlowHere": "Drop the flow here",
+ "dropImageHere": "Drop the image here",
"addFlow": "Add flow",
"addFlowToRight": "Add flow to the right",
"closeFlow": "Close flow",
diff --git a/packages/node_modules/@node-red/editor-client/locales/ja/editor.json b/packages/node_modules/@node-red/editor-client/locales/ja/editor.json
index 5117e10e1..c7b58b27f 100644
--- a/packages/node_modules/@node-red/editor-client/locales/ja/editor.json
+++ b/packages/node_modules/@node-red/editor-client/locales/ja/editor.json
@@ -53,6 +53,7 @@
"confirmDelete": "削除の確認",
"delete": "本当に '__label__' を削除しますか？",
"dropFlowHere": "ここにフローをドロップしてください",
+ "dropImageHere": "ここに画像ファイルをドロップしてください",
"addFlow": "フローの追加",
"addFlowToRight": "右側にフローを追加",
"closeFlow": "フローを閉じる",
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/editors/code-editor.js b/packages/node_modules/@node-red/editor-client/src/js/ui/editors/code-editor.js
index 7cee2026b..b92881764 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/editors/code-editor.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/editors/code-editor.js
@@ -45,6 +45,9 @@
selectedCodeEditor = RED.editor.codeEditor[defaultEditor];
initialised = selectedCodeEditor.init();
}
+
+ $('').appendTo('#red-ui-editor');
+ $("#red-ui-image-drop-target").hide();
}
function create(options) {
@@ -64,6 +67,7 @@
options = {};
}
+ var editor = null;
if (this.editor.type === MONACO) {
// compatibility (see above note)
if (!options.element && !options.id) {
@@ -74,10 +78,14 @@
console.warn("createEditor() options.element or options.id is not valid", options);
$("#dialog-form").append('');
}
- return this.editor.create(options);
+ editor = this.editor.create(options);
} else {
- return this.editor.create(options);//fallback to ACE
+ editor = this.editor.create(options);//fallback to ACE
}
+ if (options.mode === "ace/mode/markdown") {
+ RED.editor.customEditTypes['_markdown'].postInit(editor, options);
+ }
+ return editor;
}
return {
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/editors/markdown.js b/packages/node_modules/@node-red/editor-client/src/js/ui/editors/markdown.js
index eeb8519e6..2d5368e96 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/editors/markdown.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/editors/markdown.js
@@ -14,6 +14,61 @@
* limitations under the License.
**/
(function() {
+ /**
+ * Converts dropped image file to date URL
+ */
+ function file2base64Image(file, cb) {
+ var reader = new FileReader();
+ reader.onload = (function (fd) {
+ return function (e) {
+ cb(e.target.result);
+ };
+ })(file);
+ reader.readAsDataURL(file);
+ }
+
+ var initialized = false;
+ var currentEditor = null;
+ /**
+ * Initialize handler for image file drag events
+ */
+ function initImageDrag(elem, editor) {
+ $(elem).on("dragenter", function (ev) {
+ ev.preventDefault();
+ $("#red-ui-image-drop-target").css({display:'table'}).focus();
+ currentEditor = editor;
+ });
+
+ if (!initialized) {
+ initialized = true;
+ $("#red-ui-image-drop-target").on("dragover", function (ev) {
+ ev.preventDefault();
+ }).on("dragleave", function (ev) {
+ $("#red-ui-image-drop-target").hide();
+ }).on("drop", function (ev) {
+ ev.preventDefault();
+ if ($.inArray("Files",ev.originalEvent.dataTransfer.types) != -1) {
+ var files = ev.originalEvent.dataTransfer.files;
+ if (files.length === 1) {
+ var file = files[0];
+ var name = file.name.toLowerCase();
+
+ if (name.match(/\.(apng|avif|gif|jpeg|png|svg|webp)$/)) {
+ file2base64Image(file, function (image) {
+ var session = currentEditor.getSession();
+ var img = `
\n`;
+ var pos = session.getCursorPosition();
+ session.insert(pos, img);
+ $("#red-ui-image-drop-target").hide();
+ });
+ return;
+ }
+ }
+ }
+ $("#red-ui-image-drop-target").hide();
+ });
+ }
+ }
var toolbarTemplate = ''+
''+
@@ -148,10 +203,14 @@
});
RED.popover.tooltip($("#node-btn-markdown-preview"), RED._("markdownEditor.toggle-preview"));
- if (options.cursor && !expressionEditor._initState) {
- expressionEditor.gotoLine(options.cursor.row+1,options.cursor.column,false);
- }
-
+ if(!expressionEditor._initState) {
+ if (options.cursor) {
+ expressionEditor.gotoLine(options.cursor.row+1,options.cursor.column,false);
+ }
+ else {
+ expressionEditor.gotoLine(0, 0, false);
+ }
+ }
dialogForm.i18n();
},
close: function() {
@@ -215,7 +274,11 @@
}
})
return toolbar;
- }
+ },
+ postInit: function (editor, options) {
+ var elem = $("#"+options.id);
+ initImageDrag(elem, editor);
+ }
}
RED.editor.registerTypeEditor("_markdown", definition);
})();
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/dragdrop.scss b/packages/node_modules/@node-red/editor-client/src/sass/dragdrop.scss
index 78646e0e7..3d4b2253a 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/dragdrop.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/dragdrop.scss
@@ -37,3 +37,27 @@
}
}
}
+
+#red-ui-image-drop-target {
+ position: absolute;
+ top: 0; bottom: 0;
+ left: 0; right: 0;
+ background: var(--red-ui-dnd-background);
+ display:table;
+ width: 100%;
+ height: 100%;
+ display: none;
+ z-index:100;
+ div {
+ pointer-events: none;
+ display: table-cell;
+ vertical-align: middle;
+ text-align: center;
+ font-size: 40px;
+ color: var(--red-ui-dnd-color);
+ i {
+ pointer-events: none;
+ font-size: 80px;
+ }
+ }
+}