From 473b93f497f39cd35f3af48caa2e23b5b42b940c Mon Sep 17 00:00:00 2001 From: Gerrit Riessen Date: Thu, 20 Feb 2025 09:30:50 +0100 Subject: [PATCH] Support text drag & drop into markdown editor Along with image drop, this change adds text drop into the editor. This is useful for highlighting text and then drag that text into the description of a node. Similar creating a mermaid diagram using a third-party tool and then drag the text into the description. Also drop text files is also supported for longer texts. --- .../src/js/ui/editors/markdown.js | 32 ++++++++++++++++++- 1 file changed, 31 insertions(+), 1 deletion(-) 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 c4d7bf26d..6a6c9eb69 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 @@ -27,6 +27,12 @@ reader.readAsDataURL(file); } + function file2Text(file,cb) { + file.arrayBuffer().then(d => { + cb( new TextDecoder().decode(d) ) + }).catch(ex => { cb(`error: ${ex}`) }) + } + var initialized = false; var currentEditor = null; /** @@ -52,7 +58,8 @@ if (files.length === 1) { var file = files[0]; var name = file.name.toLowerCase(); - + var fileType = file.type.toLowerCase(); + if (name.match(/\.(apng|avif|gif|jpeg|png|svg|webp)$/)) { file2base64Image(file, function (image) { var session = currentEditor.getSession(); @@ -63,7 +70,30 @@ }); return; } + + if ( fileType.startsWith("text/") ) { + file2Text(file, function (txt) { + var session = currentEditor.getSession(); + var pos = session.getCursorPosition(); + session.insert(pos, txt); + $("#red-ui-image-drop-target").hide(); + }); + return; + } + } + } else if ($.inArray("text/plain", ev.originalEvent.dataTransfer.types) != -1) { + let item = Object.values(ev.originalEvent.dataTransfer.items).filter(d => d.type == "text/plain")[0] + + if (item) { + item.getAsString(txt => { + var session = currentEditor.getSession(); + var pos = session.getCursorPosition(); + session.insert(pos, txt); + $("#red-ui-image-drop-target").hide(); + }) + return + } } $("#red-ui-image-drop-target").hide(); });