From 19813f0a3e4dd14f11005ffd0bd4e9f717cc6682 Mon Sep 17 00:00:00 2001 From: Bob Long Date: Wed, 15 Jan 2020 12:34:54 -0500 Subject: [PATCH 1/2] Fix pasting URLs --- .../slate-drop-or-paste-images/src/index.js | 19 ++++++++++++------- 1 file changed, 12 insertions(+), 7 deletions(-) diff --git a/packages/slate-drop-or-paste-images/src/index.js b/packages/slate-drop-or-paste-images/src/index.js index a2d3cb1..9e30204 100644 --- a/packages/slate-drop-or-paste-images/src/index.js +++ b/packages/slate-drop-or-paste-images/src/index.js @@ -47,6 +47,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 +79,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 +166,7 @@ function DropOrPasteImages(options = {}) { } /** - * On drop or paste text. + * On drop or paste url to image. * * @param {Event} event * @param {Change} change @@ -169,11 +176,9 @@ 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() loadImageFile(text, (err, file) => { if (err) return @@ -183,7 +188,7 @@ function DropOrPasteImages(options = {}) { c.select(range) } - asyncApplyChange(c, editor, file) + asyncApplyChange(c, file) }) }) } From 80b51430dde17910e3662be9676853ac8b50322b Mon Sep 17 00:00:00 2001 From: Bob Long Date: Wed, 15 Jan 2020 12:40:45 -0500 Subject: [PATCH 2/2] Add convertUrlsToImages config items --- packages/slate-drop-or-paste-images/Readme.md | 1 + packages/slate-drop-or-paste-images/src/index.js | 4 ++++ 2 files changed, 5 insertions(+) diff --git a/packages/slate-drop-or-paste-images/Readme.md b/packages/slate-drop-or-paste-images/Readme.md index 48ba8b5..4d82eff 100644 --- a/packages/slate-drop-or-paste-images/Readme.md +++ b/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`).| \ No newline at end of file diff --git a/packages/slate-drop-or-paste-images/src/index.js b/packages/slate-drop-or-paste-images/src/index.js index 9e30204..67f67bf 100644 --- a/packages/slate-drop-or-paste-images/src/index.js +++ b/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( @@ -179,6 +182,7 @@ function DropOrPasteImages(options = {}) { function onInsertImageUrl(event, change, next, transfer, range) { const { editor } = change const { text } = transfer + if (!convertUrlsToImages) return next() loadImageFile(text, (err, file) => { if (err) return