drop-images: update for 0.43

packages/slate-drop-or-paste-images/src/index.js

@@ -47,60 +47,38 @@ function DropOrPasteImages(options = {}) {
     return accepted
   }
 
-  /**
-   * Apply the change for a given file and update the editor with the result.
-   *
-   * @param {Change} change
-   * @param {Blob} file
-   * @return {Promise}
-   */
-
-  function asyncApplyChange(change, file) {
-    const { editor } = change
-
-    return Promise.resolve(insertImage(change, file)).then(() => {
-      editor.onChange(change)
-    })
-  }
+  const insertFn = {files: onInsertFiles, html: onInsertHtml, text: onInsertText}
 
   /**
    * On drop or paste.
    *
    * @param {Event} event
-   * @param {Change} change
+   * @param {Editor} editor
    * @param {Function} next
    * @return {State}
    */
 
-  function onInsert(event, change, next) {
-    const { editor } = change
+  function onInsert(event, editor, next) {
     const transfer = getEventTransfer(event)
-    const range = getEventRange(event, editor)
+    const fn = insertFn[transfer.type]
+    if (!fn) return next()
 
-    switch (transfer.type) {
-      case 'files':
-        return onInsertFiles(event, change, next, transfer, range)
-      case 'html':
-        return onInsertHtml(event, change, next, transfer, range)
-      case 'text':
-        return onInsertText(event, change, next, transfer, range)
-      default:
-        return next()
-    }
+    const range = getEventRange(event, editor)
+    return fn(event, editor, next, transfer, range)
   }
 
   /**
    * On drop or paste files.
    *
    * @param {Event} event
-   * @param {Change} change
+   * @param {Editor} editor
    * @param {Function} next
    * @param {Object} transfer
    * @param {Range} range
-   * @return {Boolean}
+   * @return undefined
    */
 
-  function onInsertFiles(event, change, next, transfer, range) {
+  function onInsertFiles(event, editor, next, transfer, range) {
     const { files } = transfer
 
     for (const file of files) {
@@ -110,27 +88,24 @@ function DropOrPasteImages(options = {}) {
         if (!matchExt(ext)) continue
       }
 
-      if (range) {
-        change.select(range)
-      }
+      if (range) editor.select(range)
 
-      asyncApplyChange(change, file)
+      insertImage(editor, file)
     }
   }
 
   /**
    * On drop or paste html.
    *
    * @param {Event} event
-   * @param {Change} change
+   * @param {Editor} editor
    * @param {Function} next
    * @param {Object} transfer
    * @param {Range} range
-   * @return {Boolean}
+   * @return undefined
    */
 
-  function onInsertHtml(event, change, next, transfer, range) {
-    const { editor } = change
+  function onInsertHtml(event, editor, next, transfer, range) {
     const { html } = transfer
     const parser = new DOMParser()
     const doc = parser.parseFromString(html, 'text/html')
@@ -148,43 +123,34 @@ function DropOrPasteImages(options = {}) {
     loadImageFile(src, (err, file) => {
       if (err) return
 
-      editor.change(c => {
-        if (range) {
-          c.select(range)
-        }
+      if (range) editor.select(range)
 
-        asyncApplyChange(c, file)
-      })
+      insertImage(editor, file)
     })
   }
 
   /**
    * On drop or paste text.
    *
    * @param {Event} event
-   * @param {Change} change
+   * @param {Editor} editor
    * @param {Function} next
    * @param {Object} transfer
    * @param {Range} range
-   * @return {Boolean}
+   * @return undefined
    */
 
-  function onInsertText(event, change, next, transfer, range) {
-    const { editor } = change
+  function onInsertText(event, editor, next, transfer, range) {
     const { text } = transfer
     if (!isUrl(text)) return next()
     if (!isImage(text)) return next()
 
     loadImageFile(text, (err, file) => {
       if (err) return
 
-      editor.change(c => {
-        if (range) {
-          c.select(range)
-        }
+      if (range) editor.select(range)
 
-        asyncApplyChange(c, editor, file)
-      })
+      insertImage(editor, file)
     })
   }