github-mirror/BookStack
2
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2025-05-22 06:40:01 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Better standardised and fixes areas of image pasting

Browse Source 
- Extracted logic to get images from paste/drop event into own file to
align usage in both events for both editors.
- Fixed non-ability to drag+drop into WYSIWYG editor.
- Updated check for table data to look for table specific rich-text
instead of just any text since some the old check was too general and
was preventing some legitimate image paste events.

Tested on Chrome and FireFox on Ubuntu.
Attempted to test on Safari via browserstack but environment was
unreliable and could not access folders to test drag/drop of files.

Relates to #1651 and #1697
This commit is contained in:
Dan Brown
2019-12-21 15:48:03 +00:00
parent 5491bd62a2
commit a83a7f34f4
3 changed files with 89 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
resources/js/components/wysiwyg-editor.js
View File

@ -1,5 +1,6 @@
import Code from "../services/code";
import DrawIO from "../services/drawio";
import Clipboard from "../services/clipboard";
/**
* Handle pasting images from clipboard.
@ -8,30 +9,33 @@ import DrawIO from "../services/drawio";
* @param editor
*/
function editorPaste(event, editor, wysiwygComponent) {
const clipboardItems = event.clipboardData.items;
if (!event.clipboardData || !clipboardItems) return;
const clipboard = new Clipboard(event.clipboardData || event.dataTransfer);
// Don't handle if clipboard includes text content
for (let clipboardItem of clipboardItems) {
if (clipboardItem.type.includes('text/')) {
return;
}
// Don't handle the event ourselves if no items exist of contains table-looking data
if (!clipboard.hasItems() || clipboard.containsTabularData()) {
return;
}
for (let clipboardItem of clipboardItems) {
if (!clipboardItem.type.includes("image")) {
continue;
}
const images = clipboard.getImages();
for (const imageFile of images) {
const id = "image-" + Math.random().toString(16).slice(2);
const loadingImage = window.baseUrl('/loading.gif');
const file = clipboardItem.getAsFile();
event.preventDefault();
setTimeout(() => {
editor.insertContent(`<p><img src="${loadingImage}" id="${id}"></p>`);
uploadImageFile(file, wysiwygComponent).then(resp => {
editor.dom.setAttrib(id, 'src', resp.thumbs.display);
uploadImageFile(imageFile, wysiwygComponent).then(resp => {
const safeName = resp.name.replace(/"/g, '');
const newImageHtml = `<img src="${resp.thumbs.display}" alt="${safeName}" />`;
const newEl = editor.dom.create('a', {
target: '_blank',
href: resp.url,
}, newImageHtml);
editor.dom.replace(newEl, id);
}).catch(err => {
editor.dom.remove(id);
window.$events.emit('error', trans('errors.image_upload_error'));
@ -634,6 +638,10 @@ class WysiwygEditor {
});
}
if (!event.isDefaultPrevented()) {
editorPaste(event, editor, context);
}
wrap = null;
});