change function to support Slate v0.47.x

packages/slate-drop-or-paste-images/package.json

@@ -1,7 +1,7 @@
 {
   "name": "slate-drop-or-paste-images",
   "description": "A Slate plugin that inserts images on drop or paste.",
-  "version": "0.9.1",
+  "version": "0.9.2",
   "license": "MIT",
   "repository": "git://github.com/ianstormtaylor/slate-plugins.git",
   "main": "lib/slate-drop-or-paste-images.js",
@@ -21,8 +21,8 @@
     "slate-dev-logger": "^0.1.0"
   },
   "peerDependencies": {
-    "slate": ">=0.42.2",
-    "slate-react": ">=0.19.3"
+    "slate": ">=0.47.0",
+    "slate-react": ">=0.22.0"
   },
   "keywords": [
     "slate"

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

@@ -4,7 +4,7 @@ import isUrl from 'is-url'
 import logger from 'slate-dev-logger'
 import loadImageFile from './load-image-file'
 import { extname } from 'path'
-import { getEventTransfer, getEventRange } from 'slate-react'
+import { getEventTransfer } from 'slate-react'
 
 /**
  * Insert images on drop or paste.
@@ -50,40 +50,37 @@ function DropOrPasteImages(options = {}) {
   /**
    * Apply the change for a given file and update the editor with the result.
    *
-   * @param {Change} change
+   * @param {Editor} editor
    * @param {Blob} file
    * @return {Promise}
    */
 
-  function asyncApplyChange(change, file) {
-    const { editor } = change
-
-    return Promise.resolve(insertImage(change, file)).then(() => {
-      editor.onChange(change)
+  function asyncApplyChange(editor, file) {
+    return Promise.resolve(editor.insertImage(file)).then(() => {
+      editor.onChange()
     })
   }
 
   /**
    * 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 range = editor.findEventRange(event)
 
     switch (transfer.type) {
       case 'files':
-        return onInsertFiles(event, change, next, transfer, range)
+        return onInsertFiles(event, editor, next, transfer, range)
       case 'html':
-        return onInsertHtml(event, change, next, transfer, range)
+        return onInsertHtml(event, editor, next, transfer, range)
       case 'text':
-        return onInsertText(event, change, next, transfer, range)
+        return onInsertText(event, editor, next, transfer, range)
       default:
         return next()
     }
@@ -93,14 +90,14 @@ function DropOrPasteImages(options = {}) {
    * 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}
    */
 
-  function onInsertFiles(event, change, next, transfer, range) {
+  function onInsertFiles(event, editor, next, transfer, range) {
     const { files } = transfer
 
     for (const file of files) {
@@ -111,26 +108,25 @@ function DropOrPasteImages(options = {}) {
       }
 
       if (range) {
-        change.select(range)
+          editor.select(range)
       }
 
-      asyncApplyChange(change, file)
+      asyncApplyChange(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}
    */
 
-  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,7 +144,7 @@ function DropOrPasteImages(options = {}) {
     loadImageFile(src, (err, file) => {
       if (err) return
 
-      editor.change(c => {
+      editor.onChange(c => {
         if (range) {
           c.select(range)
         }
@@ -162,23 +158,22 @@ function DropOrPasteImages(options = {}) {
    * 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}
    */
 
-  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 => {
+      editor.onChange(c => {
         if (range) {
           c.select(range)
         }