Prevent dropping of external files onto editor

We now detect whether a file is being dropped by a user (by checking `event.dataTransfer.files.length`) and prevent the remaining drop behavior if this is the case. Otherwise, drop happens like normal (so a user can still drop text into the editor, or even an image that has been uploaded already via normal means and rendered in the editor).
This commit is contained in:
Darius Kazemi 2022-03-03 10:25:47 -08:00
parent 46bb8e65a1
commit dd88083b2a
1 changed files with 8 additions and 0 deletions

View File

@ -83,6 +83,14 @@ class ProseMirrorView {
typingTimer = setTimeout(doneTyping, doneTypingInterval); typingTimer = setTimeout(doneTyping, doneTypingInterval);
this.updateState(newState); this.updateState(newState);
}, },
handleDOMEvents: {
drop: (view, event) => {
// If a file is dropped externally into the editor, do not insert anything. This will not trigger if an image has been inserted after upload and is dragged and dropped internally to change its position.
if (event.dataTransfer.files.length > 0) {
event.preventDefault();
}
}
},
}); });
// Editor is focused to the last position. This is a workaround for a bug: // Editor is focused to the last position. This is a workaround for a bug:
// 1. 1 type something in an existing entry // 1. 1 type something in an existing entry