@quadrats/react 0.6.7 → 0.7.1

package/image/hooks/useImageResizer.js

@@ -1,95 +1,95 @@
 import { useRef, useState, useEffect } from 'react';
 import { useSlateStatic, useFocused, useSelected, ReactEditor } from '@quadrats/react';
 
-function isTouchEvent(event) {
-    const { touches } = event;
-    return !!(touches && touches.length);
-}
-function getEditorWidth(editor) {
-    const el = ReactEditor.toDOMNode(editor, editor);
-    const computedStyle = window.getComputedStyle(el);
-    const paddingX = parseFloat(computedStyle.paddingLeft) + parseFloat(computedStyle.paddingRight);
-    const borderX = parseFloat(computedStyle.borderLeftWidth) + parseFloat(computedStyle.borderRightWidth);
-    return el.clientWidth - paddingX - borderX;
-}
-const moveEvents = ['mousemove', 'touchmove'];
-const endEvents = ['mouseup', 'touchend'];
-function useImageResizer(element, resizeImage) {
-    const editor = useSlateStatic();
-    const focused = useFocused();
-    const selected = useSelected();
-    const focusedAndSelected = focused && selected;
-    const imageRef = useRef(null);
-    const [startPoint, setStartPoint] = useState(undefined);
-    const onResizeStart = (event) => {
-        const imageEl = imageRef.current;
-        if (!imageEl) {
-            return;
-        }
-        const { clientWidth: width, clientHeight: height } = imageEl;
-        let x;
-        let y;
-        if (isTouchEvent(event)) {
-            x = event.touches[0].clientX;
-            y = event.touches[0].clientY;
-        }
-        else {
-            x = event.clientX;
-            y = event.clientY;
-        }
-        setStartPoint({
-            x,
-            y,
-            width,
-            height,
-            ratio: width / height,
-        });
-    };
-    useEffect(() => {
-        if (!focusedAndSelected || !startPoint) {
-            return;
-        }
-        function onResize(event) {
-            if (!startPoint) {
-                return;
-            }
-            const { x, y, width, height, ratio, } = startPoint;
-            let left;
-            let top;
-            if (isTouchEvent(event)) {
-                left = event.touches[0].clientX - x;
-                top = event.touches[0].clientY - y;
-            }
-            else {
-                left = event.clientX - x;
-                top = event.clientY - y;
-            }
-            let newWidth;
-            if (Math.abs(left) >= Math.abs(top)) {
-                newWidth = width + left;
-            }
-            else {
-                const newHeight = height + top;
-                newWidth = newHeight * ratio;
-            }
-            const percentage = Math.round((newWidth / getEditorWidth(editor)) * 100);
-            resizeImage(editor, [element, ReactEditor.findPath(editor, element)], percentage);
-        }
-        function onCancelResize() {
-            setStartPoint(undefined);
-        }
-        moveEvents.forEach(moveEvent => document.addEventListener(moveEvent, onResize));
-        endEvents.forEach(endEvent => document.addEventListener(endEvent, onCancelResize));
-        return () => {
-            moveEvents.forEach(moveEvent => document.removeEventListener(moveEvent, onResize));
-            endEvents.forEach(endEvent => document.removeEventListener(endEvent, onCancelResize));
-        };
-    }, [editor, element, focusedAndSelected, resizeImage, startPoint]);
-    return {
-        imageRef,
-        focusedAndSelected,
-        onResizeStart,
-    };
+function isTouchEvent(event) {
+    const { touches } = event;
+    return !!(touches && touches.length);
+}
+function getEditorWidth(editor) {
+    const el = ReactEditor.toDOMNode(editor, editor);
+    const computedStyle = window.getComputedStyle(el);
+    const paddingX = parseFloat(computedStyle.paddingLeft) + parseFloat(computedStyle.paddingRight);
+    const borderX = parseFloat(computedStyle.borderLeftWidth) + parseFloat(computedStyle.borderRightWidth);
+    return el.clientWidth - paddingX - borderX;
+}
+const moveEvents = ['mousemove', 'touchmove'];
+const endEvents = ['mouseup', 'touchend'];
+function useImageResizer(element, resizeImage) {
+    const editor = useSlateStatic();
+    const focused = useFocused();
+    const selected = useSelected();
+    const focusedAndSelected = focused && selected;
+    const imageRef = useRef(null);
+    const [startPoint, setStartPoint] = useState(undefined);
+    const onResizeStart = (event) => {
+        const imageEl = imageRef.current;
+        if (!imageEl) {
+            return;
+        }
+        const { clientWidth: width, clientHeight: height } = imageEl;
+        let x;
+        let y;
+        if (isTouchEvent(event)) {
+            x = event.touches[0].clientX;
+            y = event.touches[0].clientY;
+        }
+        else {
+            x = event.clientX;
+            y = event.clientY;
+        }
+        setStartPoint({
+            x,
+            y,
+            width,
+            height,
+            ratio: width / height,
+        });
+    };
+    useEffect(() => {
+        if (!focusedAndSelected || !startPoint) {
+            return;
+        }
+        function onResize(event) {
+            if (!startPoint) {
+                return;
+            }
+            const { x, y, width, height, ratio, } = startPoint;
+            let left;
+            let top;
+            if (isTouchEvent(event)) {
+                left = event.touches[0].clientX - x;
+                top = event.touches[0].clientY - y;
+            }
+            else {
+                left = event.clientX - x;
+                top = event.clientY - y;
+            }
+            let newWidth;
+            if (Math.abs(left) >= Math.abs(top)) {
+                newWidth = width + left;
+            }
+            else {
+                const newHeight = height + top;
+                newWidth = newHeight * ratio;
+            }
+            const percentage = Math.round((newWidth / getEditorWidth(editor)) * 100);
+            resizeImage(editor, [element, ReactEditor.findPath(editor, element)], percentage);
+        }
+        function onCancelResize() {
+            setStartPoint(undefined);
+        }
+        moveEvents.forEach(moveEvent => document.addEventListener(moveEvent, onResize));
+        endEvents.forEach(endEvent => document.addEventListener(endEvent, onCancelResize));
+        return () => {
+            moveEvents.forEach(moveEvent => document.removeEventListener(moveEvent, onResize));
+            endEvents.forEach(endEvent => document.removeEventListener(endEvent, onCancelResize));
+        };
+    }, [editor, element, focusedAndSelected, resizeImage, startPoint]);
+    return {
+        imageRef,
+        focusedAndSelected,
+        onResizeStart,
+    };
 }
 
 export { useImageResizer };

package/image/image.css

@@ -1 +1 @@
-.qdr-image{position:relative;user-select:none}.qdr-image__spacer{position:absolute;top:0;left:50%;height:0;color:transparent;outline:none;caret-color:transparent}.qdr-image img{display:block;width:100%;user-select:none}.qdr-image__boundary,.qdr-image__resizer{position:absolute;border:2px solid var(--qdr-primary);right:0;bottom:0}.qdr-image__boundary{top:0;left:0}.qdr-image__resizer{width:6px;height:6px;background:var(--qdr-surface);transform:translate3d(50%, 50%, 0);cursor:nwse-resize}.qdr-image__caption{margin-top:6px}.qdr-image__caption-placeholder{display:inline-block;color:var(--qdr-placeholder);width:0;max-width:100%;white-space:nowrap;vertical-align:text-top;pointer-events:none}.qdr-image__figure--blurred .qdr-image__caption--empty{height:0;margin:0;opacity:0;user-select:none}
+.qdr-image{position:relative;user-select:none}.qdr-image__spacer{position:absolute;top:0;left:50%;height:0;color:rgba(0,0,0,0);outline:none;caret-color:rgba(0,0,0,0)}.qdr-image img{display:block;width:100%;user-select:none}.qdr-image__boundary,.qdr-image__resizer{position:absolute;border:2px solid var(--qdr-primary);right:0;bottom:0}.qdr-image__boundary{top:0;left:0}.qdr-image__resizer{width:6px;height:6px;background:var(--qdr-surface);transform:translate3d(50%, 50%, 0);cursor:nwse-resize}.qdr-image__caption{margin-top:6px}.qdr-image__caption-placeholder{display:inline-block;color:var(--qdr-placeholder);width:0;max-width:100%;white-space:nowrap;vertical-align:text-top;pointer-events:none}.qdr-image__figure--blurred .qdr-image__caption--empty{height:0;margin:0;opacity:0;user-select:none}

package/image/index.cjs.js

@@ -1,7 +1,5 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var React = require('react');
 var clsx = require('clsx');
 var react = require('@quadrats/react');
@@ -11,241 +9,235 @@ var isHotkey = require('is-hotkey');
 var utils = require('@quadrats/utils');
 var image = require('@quadrats/common/image');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e["default"] : e; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var clsx__default = /*#__PURE__*/_interopDefaultLegacy(clsx);
-var isHotkey__default = /*#__PURE__*/_interopDefaultLegacy(isHotkey);
-
-function ImageFigure(props) {
-    const { attributes, children, style } = props;
-    const focused = react.useFocused();
-    const selected = react.useSelected();
-    const blurred = !focused || !selected;
-    return (React__default.createElement("figure", Object.assign({}, attributes, { className: clsx__default('qdr-image__figure', {
-            'qdr-image__figure--blurred': blurred,
-        }), style: style }), children));
+function ImageFigure(props) {
+    const { attributes, children, style } = props;
+    const focused = react.useFocused();
+    const selected = react.useSelected();
+    const blurred = !focused || !selected;
+    return (React.createElement("figure", Object.assign({}, attributes, { className: clsx('qdr-image__figure', {
+            'qdr-image__figure--blurred': blurred,
+        }), style: style }), children));
 }
 
-function isTouchEvent(event) {
-    const { touches } = event;
-    return !!(touches && touches.length);
-}
-function getEditorWidth(editor) {
-    const el = react.ReactEditor.toDOMNode(editor, editor);
-    const computedStyle = window.getComputedStyle(el);
-    const paddingX = parseFloat(computedStyle.paddingLeft) + parseFloat(computedStyle.paddingRight);
-    const borderX = parseFloat(computedStyle.borderLeftWidth) + parseFloat(computedStyle.borderRightWidth);
-    return el.clientWidth - paddingX - borderX;
-}
-const moveEvents = ['mousemove', 'touchmove'];
-const endEvents = ['mouseup', 'touchend'];
-function useImageResizer(element, resizeImage) {
-    const editor = react.useSlateStatic();
-    const focused = react.useFocused();
-    const selected = react.useSelected();
-    const focusedAndSelected = focused && selected;
-    const imageRef = React.useRef(null);
-    const [startPoint, setStartPoint] = React.useState(undefined);
-    const onResizeStart = (event) => {
-        const imageEl = imageRef.current;
-        if (!imageEl) {
-            return;
-        }
-        const { clientWidth: width, clientHeight: height } = imageEl;
-        let x;
-        let y;
-        if (isTouchEvent(event)) {
-            x = event.touches[0].clientX;
-            y = event.touches[0].clientY;
-        }
-        else {
-            x = event.clientX;
-            y = event.clientY;
-        }
-        setStartPoint({
-            x,
-            y,
-            width,
-            height,
-            ratio: width / height,
-        });
-    };
-    React.useEffect(() => {
-        if (!focusedAndSelected || !startPoint) {
-            return;
-        }
-        function onResize(event) {
-            if (!startPoint) {
-                return;
-            }
-            const { x, y, width, height, ratio, } = startPoint;
-            let left;
-            let top;
-            if (isTouchEvent(event)) {
-                left = event.touches[0].clientX - x;
-                top = event.touches[0].clientY - y;
-            }
-            else {
-                left = event.clientX - x;
-                top = event.clientY - y;
-            }
-            let newWidth;
-            if (Math.abs(left) >= Math.abs(top)) {
-                newWidth = width + left;
-            }
-            else {
-                const newHeight = height + top;
-                newWidth = newHeight * ratio;
-            }
-            const percentage = Math.round((newWidth / getEditorWidth(editor)) * 100);
-            resizeImage(editor, [element, react.ReactEditor.findPath(editor, element)], percentage);
-        }
-        function onCancelResize() {
-            setStartPoint(undefined);
-        }
-        moveEvents.forEach(moveEvent => document.addEventListener(moveEvent, onResize));
-        endEvents.forEach(endEvent => document.addEventListener(endEvent, onCancelResize));
-        return () => {
-            moveEvents.forEach(moveEvent => document.removeEventListener(moveEvent, onResize));
-            endEvents.forEach(endEvent => document.removeEventListener(endEvent, onCancelResize));
-        };
-    }, [editor, element, focusedAndSelected, resizeImage, startPoint]);
-    return {
-        imageRef,
-        focusedAndSelected,
-        onResizeStart,
-    };
+function isTouchEvent(event) {
+    const { touches } = event;
+    return !!(touches && touches.length);
+}
+function getEditorWidth(editor) {
+    const el = react.ReactEditor.toDOMNode(editor, editor);
+    const computedStyle = window.getComputedStyle(el);
+    const paddingX = parseFloat(computedStyle.paddingLeft) + parseFloat(computedStyle.paddingRight);
+    const borderX = parseFloat(computedStyle.borderLeftWidth) + parseFloat(computedStyle.borderRightWidth);
+    return el.clientWidth - paddingX - borderX;
+}
+const moveEvents = ['mousemove', 'touchmove'];
+const endEvents = ['mouseup', 'touchend'];
+function useImageResizer(element, resizeImage) {
+    const editor = react.useSlateStatic();
+    const focused = react.useFocused();
+    const selected = react.useSelected();
+    const focusedAndSelected = focused && selected;
+    const imageRef = React.useRef(null);
+    const [startPoint, setStartPoint] = React.useState(undefined);
+    const onResizeStart = (event) => {
+        const imageEl = imageRef.current;
+        if (!imageEl) {
+            return;
+        }
+        const { clientWidth: width, clientHeight: height } = imageEl;
+        let x;
+        let y;
+        if (isTouchEvent(event)) {
+            x = event.touches[0].clientX;
+            y = event.touches[0].clientY;
+        }
+        else {
+            x = event.clientX;
+            y = event.clientY;
+        }
+        setStartPoint({
+            x,
+            y,
+            width,
+            height,
+            ratio: width / height,
+        });
+    };
+    React.useEffect(() => {
+        if (!focusedAndSelected || !startPoint) {
+            return;
+        }
+        function onResize(event) {
+            if (!startPoint) {
+                return;
+            }
+            const { x, y, width, height, ratio, } = startPoint;
+            let left;
+            let top;
+            if (isTouchEvent(event)) {
+                left = event.touches[0].clientX - x;
+                top = event.touches[0].clientY - y;
+            }
+            else {
+                left = event.clientX - x;
+                top = event.clientY - y;
+            }
+            let newWidth;
+            if (Math.abs(left) >= Math.abs(top)) {
+                newWidth = width + left;
+            }
+            else {
+                const newHeight = height + top;
+                newWidth = newHeight * ratio;
+            }
+            const percentage = Math.round((newWidth / getEditorWidth(editor)) * 100);
+            resizeImage(editor, [element, react.ReactEditor.findPath(editor, element)], percentage);
+        }
+        function onCancelResize() {
+            setStartPoint(undefined);
+        }
+        moveEvents.forEach(moveEvent => document.addEventListener(moveEvent, onResize));
+        endEvents.forEach(endEvent => document.addEventListener(endEvent, onCancelResize));
+        return () => {
+            moveEvents.forEach(moveEvent => document.removeEventListener(moveEvent, onResize));
+            endEvents.forEach(endEvent => document.removeEventListener(endEvent, onCancelResize));
+        };
+    }, [editor, element, focusedAndSelected, resizeImage, startPoint]);
+    return {
+        imageRef,
+        focusedAndSelected,
+        onResizeStart,
+    };
 }
 
-function Image(props) {
-    const { attributes, children, element, resizeImage, src, } = props;
-    const editor = react.useSlateStatic();
-    const { focusedAndSelected, imageRef, onResizeStart } = useImageResizer(element, resizeImage);
-    return (React__default.createElement("div", Object.assign({}, attributes, { className: "qdr-image", onClick: () => core.Transforms.select(editor, react.ReactEditor.findPath(editor, element)), onMouseDown: event => event.preventDefault(), role: "img" }),
-        React__default.createElement("div", { className: "qdr-image__spacer" }, children),
-        React__default.createElement("div", { contentEditable: false },
-            focusedAndSelected && (React__default.createElement(React__default.Fragment, null,
-                React__default.createElement("span", { className: "qdr-image__boundary" }),
-                React__default.createElement("span", { "aria-label": "resize image", className: "qdr-image__resizer", onMouseDown: onResizeStart, onTouchStart: onResizeStart, role: "button", tabIndex: -1 }))),
-            React__default.createElement("img", { ref: imageRef, src: src, alt: src }))));
+function Image(props) {
+    const { attributes, children, element, resizeImage, src, } = props;
+    const editor = react.useSlateStatic();
+    const { focusedAndSelected, imageRef, onResizeStart } = useImageResizer(element, resizeImage);
+    return (React.createElement("div", Object.assign({}, attributes, { className: "qdr-image", onClick: () => core.Transforms.select(editor, react.ReactEditor.findPath(editor, element)), onMouseDown: event => event.preventDefault(), role: "img" }),
+        React.createElement("div", { className: "qdr-image__spacer" }, children),
+        React.createElement("div", { contentEditable: false },
+            focusedAndSelected && (React.createElement(React.Fragment, null,
+                React.createElement("span", { className: "qdr-image__boundary" }),
+                React.createElement("span", { "aria-label": "resize image", className: "qdr-image__resizer", onMouseDown: onResizeStart, onTouchStart: onResizeStart, role: "button", tabIndex: -1 }))),
+            React.createElement("img", { ref: imageRef, src: src, alt: src }))));
 }
 
-function ImageCaption(props) {
-    const { attributes, children, element } = props;
-    const editor = react.useSlateStatic();
-    const path = react.ReactEditor.findPath(editor, element);
-    const text = core.Editor.string(editor, path);
-    const isEmpty = !text;
-    const locale = react.useLocale();
-    const placeholder = locale.editor.image.captionInputPlaceholder;
-    return (React__default.createElement("figcaption", Object.assign({}, attributes, { className: clsx__default('qdr-image__caption', {
-            'qdr-image__caption--empty': isEmpty,
-        }) }),
-        isEmpty && (React__default.createElement("span", { className: "qdr-image__caption-placeholder", contentEditable: false }, placeholder)),
-        children));
+function ImageCaption(props) {
+    const { attributes, children, element } = props;
+    const editor = react.useSlateStatic();
+    const path = react.ReactEditor.findPath(editor, element);
+    const text = core.Editor.string(editor, path);
+    const isEmpty = !text;
+    const locale = react.useLocale();
+    const placeholder = locale.editor.image.captionInputPlaceholder;
+    return (React.createElement("figcaption", Object.assign({}, attributes, { className: clsx('qdr-image__caption', {
+            'qdr-image__caption--empty': isEmpty,
+        }) }),
+        isEmpty && (React.createElement("span", { className: "qdr-image__caption-placeholder", contentEditable: false }, placeholder)),
+        children));
 }
 
-const defaultRenderImageElements = {
-    figure: props => React__default.createElement(ImageFigure, Object.assign({}, props)),
-    image: props => React__default.createElement(Image, Object.assign({}, props)),
-    caption: props => React__default.createElement(ImageCaption, Object.assign({}, props)),
+const defaultRenderImageElements = {
+    figure: props => React.createElement(ImageFigure, Object.assign({}, props)),
+    image: props => React.createElement(Image, Object.assign({}, props)),
+    caption: props => React.createElement(ImageCaption, Object.assign({}, props)),
 };
 
-function createReactImage(options = {}) {
-    const core$1 = image.createImage(options);
-    const { types } = core$1;
-    return Object.assign(Object.assign({}, core$1), { createHandlers: () => ({
-            onKeyDown(event, editor, next) {
-                if ((event.key === 'Backspace' || event.key === 'Delete') && core$1.isCollapsedOnImage(editor)) {
-                    const [, figurePath] = core$1.getAboveImageFigure(editor) || [];
-                    if (figurePath) {
-                        core.Transforms.removeNodes(editor, { at: figurePath });
-                        return;
-                    }
-                }
-                const [, captionPath] = core$1.getAboveImageCaption(editor) || [];
-                if (captionPath) {
-                    /**
-                     * Override original behavior of select all.
-                     * Only select the text in image caption if current selection is in image caption.
-                     */
-                    if (isHotkey__default('mod+a', event)) {
-                        event.preventDefault();
-                        core.Transforms.select(editor, captionPath);
-                        return;
-                    }
-                }
-                next();
-            },
-        }), createRenderElement: (options = {}) => {
-            const renderFigure = options.figure || defaultRenderImageElements.figure;
-            const renderImage = options.image || defaultRenderImageElements.image;
-            const renderCaption = options.caption || defaultRenderImageElements.caption;
-            return react.createRenderElements([
-                {
-                    type: types.figure,
-                    render: (props) => {
-                        const { attributes, children, element } = props;
-                        return renderFigure(Object.assign(Object.assign({}, image.getImageFigureElementCommonProps(element)), { attributes,
-                            element,
-                            children }));
-                    },
-                },
-                {
-                    type: types.image,
-                    render: (props) => {
-                        const { attributes, children, element } = props;
-                        return renderImage(Object.assign(Object.assign({}, image.getImageElementCommonProps(element, core$1.hostingResolvers)), { attributes,
-                            element,
-                            children, resizeImage: core$1.resizeImage }));
-                    },
-                },
-                {
-                    type: types.caption,
-                    render: renderCaption,
-                },
-            ]);
-        }, with(editor) {
-            const { insertData } = editor;
-            editor.insertData = (data) => {
-                const text = data.getData('text');
-                const { files } = data;
-                /**
-                 * Insert image if inserted text is image url.
-                 */
-                if (text) {
-                    if (core$1.isImageUrl(text)) {
-                        core$1.insertImage(editor, text);
-                        return;
-                    }
-                }
-                /**
-                 * Insert each image which is image.
-                 */
-                if (files.length) {
-                    [...files]
-                        .filter((file) => {
-                        const [mime] = file.type.split('/');
-                        return mime === 'image';
-                    })
-                        .reduce((prev, imageFile) => tslib.__awaiter(this, void 0, void 0, function* () {
-                        yield prev;
-                        return utils.readFileAsDataURL(imageFile).then(dataURL => core$1.insertImage(editor, dataURL));
-                    }), Promise.resolve());
-                    return;
-                }
-                const inCaption = core$1.isSelectionInImageCaption(editor);
-                if (inCaption) {
-                    const inlineData = new DataTransfer();
-                    inlineData.setData('text', data.getData('text').replace(/\r?\n/g, ''));
-                    insertData(inlineData);
-                    return;
-                }
-                insertData(data);
-            };
-            return core$1.with(editor);
-        } });
+function createReactImage(options = {}) {
+    const core$1 = image.createImage(options);
+    const { types } = core$1;
+    return Object.assign(Object.assign({}, core$1), { createHandlers: () => ({
+            onKeyDown(event, editor, next) {
+                if ((event.key === 'Backspace' || event.key === 'Delete') && core$1.isCollapsedOnImage(editor)) {
+                    const [, figurePath] = core$1.getAboveImageFigure(editor) || [];
+                    if (figurePath) {
+                        core.Transforms.removeNodes(editor, { at: figurePath });
+                        return;
+                    }
+                }
+                const [, captionPath] = core$1.getAboveImageCaption(editor) || [];
+                if (captionPath) {
+                    /**
+                     * Override original behavior of select all.
+                     * Only select the text in image caption if current selection is in image caption.
+                     */
+                    if (isHotkey('mod+a', event)) {
+                        event.preventDefault();
+                        core.Transforms.select(editor, captionPath);
+                        return;
+                    }
+                }
+                next();
+            },
+        }), createRenderElement: (options = {}) => {
+            const renderFigure = options.figure || defaultRenderImageElements.figure;
+            const renderImage = options.image || defaultRenderImageElements.image;
+            const renderCaption = options.caption || defaultRenderImageElements.caption;
+            return react.createRenderElements([
+                {
+                    type: types.figure,
+                    render: (props) => {
+                        const { attributes, children, element } = props;
+                        return renderFigure(Object.assign(Object.assign({}, image.getImageFigureElementCommonProps(element)), { attributes,
+                            element,
+                            children }));
+                    },
+                },
+                {
+                    type: types.image,
+                    render: (props) => {
+                        const { attributes, children, element } = props;
+                        return renderImage(Object.assign(Object.assign({}, image.getImageElementCommonProps(element, core$1.hostingResolvers)), { attributes,
+                            element,
+                            children, resizeImage: core$1.resizeImage }));
+                    },
+                },
+                {
+                    type: types.caption,
+                    render: renderCaption,
+                },
+            ]);
+        }, with(editor) {
+            const { insertData } = editor;
+            editor.insertData = (data) => {
+                const text = data.getData('text');
+                const { files } = data;
+                /**
+                 * Insert image if inserted text is image url.
+                 */
+                if (text) {
+                    if (core$1.isImageUrl(text)) {
+                        core$1.insertImage(editor, text);
+                        return;
+                    }
+                }
+                /**
+                 * Insert each image which is image.
+                 */
+                if (files.length) {
+                    [...files]
+                        .filter((file) => {
+                        const [mime] = file.type.split('/');
+                        return mime === 'image';
+                    })
+                        .reduce((prev, imageFile) => tslib.__awaiter(this, void 0, void 0, function* () {
+                        yield prev;
+                        return utils.readFileAsDataURL(imageFile).then(dataURL => core$1.insertImage(editor, dataURL));
+                    }), Promise.resolve());
+                    return;
+                }
+                const inCaption = core$1.isSelectionInImageCaption(editor);
+                if (inCaption) {
+                    const inlineData = new DataTransfer();
+                    inlineData.setData('text', data.getData('text').replace(/\r?\n/g, ''));
+                    insertData(inlineData);
+                    return;
+                }
+                insertData(data);
+            };
+            return core$1.with(editor);
+        } });
 }
 
 exports.Image = Image;