Drag and drop images in the editor to import and insert (#5699)

* Merge

* Clean up

* More clean up

* Ensure image import works when type is not set, clean up post import actions

* Removed spurious new line

* For non image files insert a tiddler link

* Added documentation for new settings and features
This commit is contained in:
Saq Imtiaz
2021-05-19 22:52:43 +02:00
committed by GitHub
parent c7f6cedc43
commit 05d38054c8
19 changed files with 301 additions and 28 deletions

View File

@@ -124,8 +124,11 @@ function CodeMirrorEngine(options) {
self.widget.invokeActionString(self.widget.editInputActions);
}
});
this.cm.on("drop",function(cm,event) {
event.stopPropagation(); // Otherwise TW's dropzone widget sees the drop event
if(!self.widget.isFileDropEnabled) {
event.stopPropagation(); // Otherwise TW's dropzone widget sees the drop event
}
return false;
});
this.cm.on("keydown",function(cm,event) {
@@ -136,6 +139,32 @@ function CodeMirrorEngine(options) {
$tw.popup.cancel(0);
}
});
// Add drag and drop event listeners if fileDrop is enabled
if(this.widget.isFileDropEnabled) {
// If the drag event contains Files, prevent the default CodeMirror handling
this.cm.on("dragenter",function(cm,event) {
if($tw.utils.dragEventContainsFiles(event)) {
event.preventDefault();
}
return true;
});
this.cm.on("dragleave",function(cm,event) {
event.preventDefault();
});
this.cm.on("dragover",function(cm,event) {
if($tw.utils.dragEventContainsFiles(event)) {
event.preventDefault();
}
});
this.cm.on("drop",function(cm,event) {
if($tw.utils.dragEventContainsFiles(event)) {
event.preventDefault();
}
});
this.cm.on("paste",function(cm,event) {
self.widget.handlePasteEvent.call(self.widget,event);
});
}
}
/*