Fix some issues with pasting image urls

packages/slate-drop-or-paste-images/Readme.md

@@ -44,3 +44,4 @@ const plugins = [
 | ----------------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **`insertImage`** | `Function` | A transforming function that is passed a Slate `Change` and a `File` object representing an image. It should apply the proper transform that inserts the image into Slate based on your schema. It can return a promise resolved with the resulting Slate `Change`. |
 | **`extensions`**  | `Array`    | An array of allowed extensions.                                                                                                                                                                                                                                     |
+| **`convertUrlsToImages`**  | `Boolean`    | Whether dropped or pasted URLs should be converted into images (defaults to `true`).|

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

@@ -17,6 +17,9 @@ import { getEventTransfer, getEventRange } from 'slate-react'
 
 function DropOrPasteImages(options = {}) {
   let { insertImage, extensions } = options
+  const convertUrlsToImages = [undefined, true].includes(
+    options.convertUrlsToImages
+  )
 
   if (options.applyTransform) {
     logger.deprecate(
@@ -47,6 +50,10 @@ function DropOrPasteImages(options = {}) {
     return accepted
   }
 
+  function isImageUrl(text) {
+    return isUrl(text) && isImage(text)
+  }
+
   /**
    * Apply the change for a given file and update the editor with the result.
    *
@@ -75,15 +82,18 @@ function DropOrPasteImages(options = {}) {
   function onInsert(event, change, next) {
     const { editor } = change
     const transfer = getEventTransfer(event)
+    const { text } = transfer
     const range = getEventRange(event, editor)
 
+    if (isImageUrl(text)) {
+      return onInsertImageUrl(event, change, next, transfer, range)
+    }
+
     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()
     }
@@ -159,7 +169,7 @@ function DropOrPasteImages(options = {}) {
   }
 
   /**
-   * On drop or paste text.
+   * On drop or paste url to image.
    *
    * @param {Event} event
    * @param {Change} change
@@ -169,11 +179,10 @@ function DropOrPasteImages(options = {}) {
    * @return {Boolean}
    */
 
-  function onInsertText(event, change, next, transfer, range) {
+  function onInsertImageUrl(event, change, next, transfer, range) {
     const { editor } = change
     const { text } = transfer
-    if (!isUrl(text)) return next()
-    if (!isImage(text)) return next()
+    if (!convertUrlsToImages) return next()
 
     loadImageFile(text, (err, file) => {
       if (err) return
@@ -183,7 +192,7 @@ function DropOrPasteImages(options = {}) {
           c.select(range)
         }
 
-        asyncApplyChange(c, editor, file)
+        asyncApplyChange(c, file)
       })
     })
   }