diff --git a/packages/slate-drop-or-paste-images/package.json b/packages/slate-drop-or-paste-images/package.json index 1d508ed..1502f88 100644 --- a/packages/slate-drop-or-paste-images/package.json +++ b/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" diff --git a/packages/slate-drop-or-paste-images/src/index.js b/packages/slate-drop-or-paste-images/src/index.js index a2d3cb1..0fd3e0e 100644 --- a/packages/slate-drop-or-paste-images/src/index.js +++ b/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,16 +50,14 @@ 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() }) } @@ -67,23 +65,22 @@ function DropOrPasteImages(options = {}) { * 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,10 +108,10 @@ function DropOrPasteImages(options = {}) { } if (range) { - change.select(range) + editor.select(range) } - asyncApplyChange(change, file) + asyncApplyChange(editor, file) } } @@ -122,15 +119,14 @@ function DropOrPasteImages(options = {}) { * 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,15 +158,14 @@ 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() @@ -178,7 +173,7 @@ function DropOrPasteImages(options = {}) { loadImageFile(text, (err, file) => { if (err) return - editor.change(c => { + editor.onChange(c => { if (range) { c.select(range) }