X-Git-Url: http://source.bookstackapp.com/bookstack/blobdiff_plain/ee24635e06a8c01d751f80caba47c57f76e8989d..refs/pull/4313/head:/resources/js/wysiwyg/drop-paste-handling.js diff --git a/resources/js/wysiwyg/drop-paste-handling.js b/resources/js/wysiwyg/drop-paste-handling.js index 866d25a24..33078cd1d 100644 --- a/resources/js/wysiwyg/drop-paste-handling.js +++ b/resources/js/wysiwyg/drop-paste-handling.js @@ -1,4 +1,4 @@ -import Clipboard from "../services/clipboard"; +import {Clipboard} from '../services/clipboard'; let wrap; let draggedContentEditable; @@ -7,6 +7,25 @@ function hasTextContent(node) { return node && !!(node.textContent || node.innerText); } +/** + * Upload an image file to the server + * @param {File} file + * @param {int} pageId + */ +async function uploadImageFile(file, pageId) { + if (file === null || file.type.indexOf('image') !== 0) { + throw new Error('Not an image file'); + } + + const remoteFilename = file.name || `image-${Date.now()}.png`; + const formData = new FormData(); + formData.append('file', file, remoteFilename); + formData.append('uploaded_to', pageId); + + const resp = await window.$http.post(window.baseUrl('/images/gallery'), formData); + return resp.data; +} + /** * Handle pasting images from clipboard. * @param {Editor} editor @@ -23,8 +42,7 @@ function paste(editor, options, event) { const images = clipboard.getImages(); for (const imageFile of images) { - - const id = "image-" + Math.random().toString(16).slice(2); + const id = `image-${Math.random().toString(16).slice(2)}`; const loadingImage = window.baseUrl('/loading.gif'); event.preventDefault(); @@ -44,37 +62,17 @@ function paste(editor, options, event) { }).catch(err => { editor.dom.remove(id); window.$events.emit('error', options.translations.imageUploadErrorText); - console.log(err); + console.error(err); }); }, 10); } } -/** - * Upload an image file to the server - * @param {File} file - * @param {int} pageId - */ -async function uploadImageFile(file, pageId) { - if (file === null || file.type.indexOf('image') !== 0) { - throw new Error(`Not an image file`); - } - - const remoteFilename = file.name || `image-${Date.now()}.png`; - const formData = new FormData(); - formData.append('file', file, remoteFilename); - formData.append('uploaded_to', pageId); - - const resp = await window.$http.post(window.baseUrl('/images/gallery'), formData); - return resp.data; -} - /** * @param {Editor} editor - * @param {WysiwygConfigOptions} options */ -function dragStart(editor, options) { - let node = editor.selection.getNode(); +function dragStart(editor) { + const node = editor.selection.getNode(); if (node.nodeName === 'IMG') { wrap = editor.dom.getParent(node, '.mceTemp'); @@ -96,8 +94,12 @@ function dragStart(editor, options) { * @param {DragEvent} event */ function drop(editor, options, event) { - let dom = editor.dom, - rng = tinymce.dom.RangeUtils.getCaretRangeFromPoint(event.clientX, event.clientY, editor.getDoc()); + const {dom} = editor; + const rng = window.tinymce.dom.RangeUtils.getCaretRangeFromPoint( + event.clientX, + event.clientY, + editor.getDoc(), + ); // Template insertion const templateId = event.dataTransfer && event.dataTransfer.getData('bookstack/template'); @@ -105,7 +107,7 @@ function drop(editor, options, event) { event.preventDefault(); window.$http.get(`/templates/${templateId}`).then(resp => { editor.selection.setRng(rng); - editor.undoManager.transact(function () { + editor.undoManager.transact(() => { editor.execCommand('mceInsertContent', false, resp.data.html); }); }); @@ -117,7 +119,7 @@ function drop(editor, options, event) { } else if (wrap) { event.preventDefault(); - editor.undoManager.transact(function () { + editor.undoManager.transact(() => { editor.selection.setRng(rng); editor.selection.setNode(wrap); dom.remove(wrap); @@ -127,7 +129,7 @@ function drop(editor, options, event) { // Handle contenteditable section drop if (!event.isDefaultPrevented() && draggedContentEditable) { event.preventDefault(); - editor.undoManager.transact(function () { + editor.undoManager.transact(() => { const selectedNode = editor.selection.getNode(); const range = editor.selection.getRng(); const selectedNodeRoot = selectedNode.closest('body > *'); @@ -152,7 +154,7 @@ function drop(editor, options, event) { * @param {WysiwygConfigOptions} options */ export function listenForDragAndPaste(editor, options) { - editor.on('dragstart', () => dragStart(editor, options)); - editor.on('drop', event => drop(editor, options, event)); + editor.on('dragstart', () => dragStart(editor)); + editor.on('drop', event => drop(editor, options, event)); editor.on('paste', event => paste(editor, options, event)); -} \ No newline at end of file +}