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.
This commit is contained in:
Gerrit Riessen 2025-02-20 09:30:50 +01:00 committed by GitHub
parent ff565bacb4
commit 473b93f497
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -27,6 +27,12 @@
reader.readAsDataURL(file); 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 initialized = false;
var currentEditor = null; var currentEditor = null;
/** /**
@ -52,6 +58,7 @@
if (files.length === 1) { if (files.length === 1) {
var file = files[0]; var file = files[0];
var name = file.name.toLowerCase(); var name = file.name.toLowerCase();
var fileType = file.type.toLowerCase();
if (name.match(/\.(apng|avif|gif|jpeg|png|svg|webp)$/)) { if (name.match(/\.(apng|avif|gif|jpeg|png|svg|webp)$/)) {
file2base64Image(file, function (image) { file2base64Image(file, function (image) {
@ -63,6 +70,29 @@
}); });
return; 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(); $("#red-ui-image-drop-target").hide();