Infra-Mirrors/BookStack
1
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2024-10-01 01:36:00 -04:00
Code Issues Packages Projects Releases Wiki Activity

Attachments: Fixed drag into editor in Chrome

Browse Source 
Seemed to be chrome specific from testing.
Required editors to have preventDefault called on dragover.
Tested in Chrome, FF, & Safari.
Tested in both editors, and re-tested text/image drop to ensure still
works.

Fixed #4975
This commit is contained in:
Dan Brown 2024-04-29 19:21:13 +01:00
parent 06bb55184c
commit 493d8027cd
No known key found for this signature in database
GPG Key ID: 46D9F943C24A2EF9
2 changed files with 19 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
resources/js/markdown/codemirror.js
View File

@ -44,6 +44,10 @@ export async function init(editor) {
editor.actions.insertClipboardImages(clipboardImages, event.pageX, event.pageY);
}
},
// Handle dragover event to allow as drop-target in chrome
dragover: event => {
event.preventDefault();
},
// Handle image paste
paste: event => {
const clipboard = new Clipboard(event.clipboardData || event.dataTransfer);

15
resources/js/wysiwyg/drop-paste-handling.js
View File

@ -149,11 +149,26 @@ function drop(editor, options, event) {
wrap = null;
}
/**
* @param {Editor} editor
* @param {DragEvent} event
*/
function dragOver(editor, event) {
// This custom handling essentially emulates the default TinyMCE behaviour while allowing us
// to specifically call preventDefault on the event to allow the drop of custom elements.
event.preventDefault();
editor.focus();
const rangeUtils = window.tinymce.dom.RangeUtils;
const range = rangeUtils.getCaretRangeFromPoint(event.clientX ?? 0, event.clientY ?? 0, editor.getDoc());
editor.selection.setRng(range);
}
/**
* @param {Editor} editor
* @param {WysiwygConfigOptions} options
*/
export function listenForDragAndPaste(editor, options) {
editor.on('dragover', event => dragOver(editor, event));
editor.on('dragstart', () => dragStart(editor));
editor.on('drop', event => drop(editor, options, event));
editor.on('paste', event => paste(editor, options, event));