@quadrats/react 1.1.7 → 1.1.8

package/index.cjs.js

@@ -1,709 +0,0 @@
-'use strict';
-
-var configs = require('@quadrats/react/configs');
-var slateReact = require('slate-react');
-var core = require('@quadrats/core');
-var tslib = require('tslib');
-var React = require('react');
-var slate = require('slate');
-var clsx = require('clsx');
-var reactDnd = require('react-dnd');
-var reactDndHtml5Backend = require('react-dnd-html5-backend');
-var components = require('@quadrats/react/components');
-var icons = require('@quadrats/icons');
-var utils = require('@quadrats/react/utils');
-var _internal = require('@quadrats/react/_internal');
-
-const PLACEHOLDER_KEY = '__quadrats-placeholder__';
-
-const DefaultLeaf = ({ attributes, children }) => React.createElement("span", Object.assign({}, attributes), children);
-
-const CompositionContext = React.createContext({
-    compositionType: '',
-    compositionPath: [],
-});
-function useComposition() {
-    return React.useContext(CompositionContext);
-}
-
-const CompositionProvider = ({ compositionType, compositionPath, children }) => {
-    return (React.createElement(CompositionContext.Provider, { value: { compositionType, compositionPath } }, children));
-};
-
-function Editable(props) {
-    const locale = configs.useLocale();
-    const { className, decorate: decorateProp, onCompositionEnd: onCompositionEndProp, onCompositionStart: onCompositionStartProp, placeholder = locale.editor.placeholder, renderLeaf: renderLeafProp, style } = props, slateEditableProps = tslib.__rest(props, ["className", "decorate", "onCompositionEnd", "onCompositionStart", "placeholder", "renderLeaf", "style"]);
-    const { props: themeProps } = configs.useTheme();
-    const editor = slateReact.useSlate();
-    const isEditorEmpty = core.isAncestorEmpty(editor);
-    const [placeholderShowable, setPlaceholderShowable] = React.useState(isEditorEmpty);
-    const [compositionType, setCompositionType] = React.useState('');
-    const [compositionPath, setCompositionPath] = React.useState([]);
-    const decorate = React.useCallback((entry) => {
-        const result = decorateProp ? decorateProp(entry) : [];
-        const [node] = entry;
-        if (isEditorEmpty && core.Editor.isEditor(node)) {
-            const start = core.Editor.start(node, []);
-            result.push({
-                [PLACEHOLDER_KEY]: true,
-                anchor: start,
-                focus: start,
-            });
-        }
-        return result;
-    }, [decorateProp, isEditorEmpty]);
-    const onCompositionEnd = React.useCallback((event) => {
-        setCompositionType('');
-        setCompositionPath([]);
-        onCompositionEndProp === null || onCompositionEndProp === void 0 ? void 0 : onCompositionEndProp(event);
-        setPlaceholderShowable(true);
-    }, [onCompositionEndProp]);
-    const onCompositionStart = React.useCallback((event) => {
-        if (editor.selection) {
-            const [, path] = core.Editor.node(editor, editor.selection);
-            const match = core.Editor.above(editor, {
-                at: path,
-                match: (n) => slate.Element.isElement(n),
-                mode: 'lowest',
-            });
-            if (match) {
-                setCompositionPath(match[1]);
-                setCompositionType(match[0].type);
-            }
-        }
-        onCompositionStartProp === null || onCompositionStartProp === void 0 ? void 0 : onCompositionStartProp(event);
-        if (isEditorEmpty) {
-            setPlaceholderShowable(false);
-        }
-    }, [editor, onCompositionStartProp, isEditorEmpty]);
-    const renderLeaf = React.useCallback((props) => {
-        const children = renderLeafProp ? renderLeafProp(props) : React.createElement(DefaultLeaf, Object.assign({}, props));
-        if (placeholderShowable && props.leaf[PLACEHOLDER_KEY]) {
-            return (React.createElement(React.Fragment, null,
-                React.createElement("span", { className: "qdr-editable__placeholder", contentEditable: false }, placeholder),
-                children));
-        }
-        return children;
-    }, [renderLeafProp, placeholder, placeholderShowable]);
-    return (React.createElement(CompositionProvider, { compositionType: compositionType, compositionPath: compositionPath },
-        React.createElement(slateReact.Editable, Object.assign({}, slateEditableProps, { className: clsx('qdr-editable', themeProps.className, className), decorate: decorate, onCompositionStart: onCompositionStart, onCompositionEnd: onCompositionEnd, renderLeaf: renderLeaf, style: Object.assign(Object.assign({}, themeProps.style), style) }))));
-}
-
-const DefaultElement = ({ attributes, children }) => React.createElement("div", Object.assign({}, attributes), children);
-
-const EmbedModal = ({ isOpen, close, placeholder, confirmText, hint, type, onConfirm }) => {
-    const [value, setValue] = React.useState('');
-    const locale = configs.useLocale();
-    const textareaRef = React.useRef(null);
-    const inputRef = React.useRef(null);
-    React.useEffect(() => {
-        var _a, _b;
-        if (isOpen) {
-            (_a = textareaRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-            (_b = inputRef.current) === null || _b === void 0 ? void 0 : _b.focus();
-        }
-    }, [isOpen]);
-    return (React.createElement(components.Modal, { isOpen: isOpen, title: locale.editor.embedTitle, confirmText: confirmText, onClose: () => {
-            close();
-            setValue('');
-        }, onConfirm: () => {
-            close();
-            setValue('');
-            onConfirm(value);
-        } }, type === 'textarea' ? (React.createElement(components.Textarea, { textareaRef: textareaRef, value: value, onChange: setValue, placeholder: placeholder, hint: hint, height: 86 })) : (React.createElement(components.Input, { inputRef: inputRef, value: value, onChange: setValue, placeholder: placeholder, hint: hint }))));
-};
-
-const MessageContext = React.createContext({
-    message: () => { },
-});
-function useMessage() {
-    return React.useContext(MessageContext);
-}
-
-const FilesDropZone = ({ isDragging, setIsDragging, children, isOverMaxLength, controller, uploadFiles, }) => {
-    const { message } = useMessage();
-    const validateFile = React.useCallback((file) => {
-        if (!(controller === null || controller === void 0 ? void 0 : controller.accept.find((a) => a === file.type))) {
-            return false;
-        }
-        return true;
-    }, [controller === null || controller === void 0 ? void 0 : controller.accept]);
-    const validateFiles = React.useCallback((event) => {
-        const files = Array.from(event.dataTransfer.files);
-        if (!files || isOverMaxLength) {
-            if (isOverMaxLength) {
-                message({ type: 'error', content: '超過數量上限，請刪除已存在圖片' });
-            }
-            return false;
-        }
-        return true;
-    }, [isOverMaxLength, message]);
-    const handleDrop = React.useCallback((event) => tslib.__awaiter(void 0, void 0, void 0, function* () {
-        var _a, _b;
-        if ((_b = (_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.types) === null || _b === void 0 ? void 0 : _b.includes('Files')) {
-            event.preventDefault();
-            setIsDragging(false);
-            const files = Array.from(event.dataTransfer.files);
-            if (!validateFiles(event)) {
-                return;
-            }
-            const correctFiles = files.filter((f) => validateFile(f) && (controller === null || controller === void 0 ? void 0 : controller.limitSize) && f.size <= controller.limitSize * 1024 * 1024);
-            if (files.find((f) => !validateFile(f))) {
-                message({ type: 'error', content: '檔案類型錯誤。' });
-            }
-            if (files.find((f) => (controller === null || controller === void 0 ? void 0 : controller.limitSize) && f.size > controller.limitSize * 1024 * 1024)) {
-                message({ type: 'error', content: `圖片檔案過大，檔案需小於 ${controller === null || controller === void 0 ? void 0 : controller.limitSize}MB` });
-            }
-            if (correctFiles.length > 0) {
-                yield uploadFiles(correctFiles);
-            }
-        }
-    }), [setIsDragging, validateFiles, validateFile, controller === null || controller === void 0 ? void 0 : controller.limitSize, message, uploadFiles]);
-    // TODO: i18n
-    return (React.createElement("div", { className: clsx('qdr-carousel-modal__zone'), onDragOver: (e) => {
-            var _a, _b;
-            e.preventDefault();
-            if ((_b = (_a = e.dataTransfer) === null || _a === void 0 ? void 0 : _a.types) === null || _b === void 0 ? void 0 : _b.includes('Files')) {
-                setIsDragging(true);
-            }
-        }, onDragLeave: () => {
-            setIsDragging(false);
-        }, onDrop: handleDrop },
-        isDragging && (React.createElement("div", { className: "qdr-carousel-modal__zone__wrapper" },
-            React.createElement("div", { className: "qdr-carousel-modal__zone__block" },
-                React.createElement(components.Icon, { icon: icons.Upload, width: 24, height: 24 }),
-                "\u5C07\u6A94\u6848\u62D6\u66F3\u5230\u9019\u88E1\u5373\u53EF\u4E0A\u50B3"))),
-        children));
-};
-
-const CarouselItem = ({ url, preview, progress, caption, index, onChange, onRemove, swap, ratio, isError, }) => {
-    const [{ isDragging }, drag, dragPreview] = reactDnd.useDrag(() => ({
-        type: 'CarouselItem',
-        collect: (monitor) => ({
-            isDragging: monitor.isDragging(),
-        }),
-        item: { index },
-    }));
-    const [{ isOver }, drop] = reactDnd.useDrop(() => ({
-        accept: 'CarouselItem',
-        collect: (monitor) => ({
-            isOver: monitor.isOver({ shallow: true }),
-        }),
-        drop: (item) => {
-            if (item.index !== index) {
-                swap(item.index, index);
-            }
-        },
-    }));
-    // TODO: i18n
-    return drop(drag(dragPreview(React.createElement("div", { className: clsx('qdr-carousel-modal__item', {
-            'qdr-carousel-modal__item--isDragging': isDragging,
-            'qdr-carousel-modal__item--isOver': isOver,
-        }) },
-        progress !== 100 && React.createElement(components.Progress, { percentage: progress }),
-        React.createElement("div", { contentEditable: false, className: clsx('qdr-inline-toolbar', 'qdr-carousel-modal__inline-toolbar') },
-            React.createElement(components.Icon, { className: "qdr-inline-toolbar__icon", icon: icons.Trash, width: 24, height: 24, onClick: onRemove })),
-        React.createElement("div", { className: "qdr-carousel-modal__image-wrapper" }, isError ? (React.createElement("div", { className: "qdr-carousel-modal__error-wrapper", style: {
-                aspectRatio: ratio ? `${ratio[0]} / ${ratio[1]}` : '3 /2',
-            } },
-            React.createElement(components.Icon, { className: "qdr-carousel-modal__error-icon", icon: icons.Image, width: 48, height: 48 }),
-            React.createElement("p", { className: "qdr-carousel-modal__error-text" }, "\u4E0A\u50B3\u932F\u8AA4"))) : (React.createElement("img", { src: url || preview, className: "qdr-carousel-modal__image", style: {
-                objectFit: ratio ? 'cover' : 'contain',
-                aspectRatio: ratio ? `${ratio[0]} / ${ratio[1]}` : '3 /2',
-            } }))),
-        React.createElement("div", { className: "qdr-carousel-modal__input-wrapper" },
-            React.createElement(components.Input, { value: caption, onChange: onChange, placeholder: "\u5716\u7247\u8AAA\u660E\u6216\u66FF\u4EE3\u6587\u5B57..." }))))));
-};
-
-const CarouselModal = ({ isOpen, close, controller, initialValue = [], onConfirm }) => {
-    const [uploading, setUploading] = React.useState(false);
-    const [isDragging, setIsDragging] = React.useState(false);
-    const [items, setItems] = React.useState([]);
-    const { message } = useMessage();
-    const prevIsOpen = utils.usePreviousValue(isOpen);
-    React.useEffect(() => {
-        if (!prevIsOpen && isOpen && initialValue.length > 0) {
-            setItems(initialValue);
-        }
-    }, [initialValue, isOpen, prevIsOpen]);
-    React.useEffect(() => {
-        if (items.some((i) => i.progress !== 100)) {
-            setUploading(true);
-        }
-        else {
-            setUploading(false);
-        }
-    }, [items]);
-    const acceptText = React.useMemo(() => {
-        if ((controller === null || controller === void 0 ? void 0 : controller.accept.find((a) => a === 'image/jpeg' || a === 'image/jpg')) &&
-            (controller === null || controller === void 0 ? void 0 : controller.accept.find((a) => a === 'image/png'))) {
-            return 'JPG 或 PNG';
-        }
-        else if (controller === null || controller === void 0 ? void 0 : controller.accept.find((a) => a === 'image/png')) {
-            return 'PNG';
-        }
-        else if (controller === null || controller === void 0 ? void 0 : controller.accept.find((a) => a === 'image/jpeg' || a === 'image/jpg')) {
-            return 'JPG';
-        }
-        return '';
-    }, [controller === null || controller === void 0 ? void 0 : controller.accept]);
-    const isOverMaxLength = React.useMemo(() => {
-        if (controller === null || controller === void 0 ? void 0 : controller.maxLength) {
-            return items.length >= controller.maxLength;
-        }
-        return false;
-    }, [controller === null || controller === void 0 ? void 0 : controller.maxLength, items.length]);
-    const disabledConfirm = React.useMemo(() => {
-        return items.length === 0;
-    }, [items.length]);
-    const uploadFiles = React.useCallback((files) => tslib.__awaiter(void 0, void 0, void 0, function* () {
-        if (files && controller) {
-            const currentItems = [];
-            for (const file of files) {
-                const base64 = yield utils.readFileAsBase64(file);
-                currentItems.push({ file, url: '', caption: '', preview: base64, progress: 0 });
-            }
-            setItems((prev) => [...prev, ...currentItems]);
-            for (const item of currentItems) {
-                const onProgress = (p) => {
-                    setItems((prev) => prev.map((u) => (u.file === item.file ? Object.assign(Object.assign({}, u), { progress: p }) : u)));
-                };
-                try {
-                    const url = yield utils.upload({
-                        file: item.file,
-                        getBody: controller === null || controller === void 0 ? void 0 : controller.getBody,
-                        getHeaders: controller === null || controller === void 0 ? void 0 : controller.getHeaders,
-                        getUrl: controller === null || controller === void 0 ? void 0 : controller.getUrl,
-                        uploader: controller === null || controller === void 0 ? void 0 : controller.uploader,
-                        onProgress,
-                    });
-                    setItems((prev) => {
-                        if (prev.filter((p) => !!p.url).length >= controller.maxLength) {
-                            message({ type: 'error', content: '超過數量上限，剩下圖片無法上傳' });
-                            return prev.filter((p) => !!p.url);
-                        }
-                        return prev.map((u) => (u.file === item.file ? Object.assign(Object.assign({}, u), { preview: url, url }) : u));
-                    });
-                }
-                catch (error) {
-                    setItems((prev) => prev.map((u) => (u.file === item.file ? Object.assign(Object.assign({}, u), { preview: '', url: '', isError: true }) : u)));
-                }
-            }
-        }
-    }), [controller, message]);
-    const change = React.useCallback((index, image) => {
-        setItems((prev) => {
-            const updated = [...prev];
-            updated[index] = Object.assign(Object.assign({}, updated[index]), image);
-            return updated;
-        });
-    }, []);
-    const remove = React.useCallback((index) => {
-        setItems((prev) => prev.filter((_, i) => i !== index));
-    }, []);
-    const swap = React.useCallback((from, to) => {
-        setItems((prev) => {
-            const updated = [...prev];
-            const temp = updated[from];
-            updated[from] = updated[to];
-            updated[to] = temp;
-            return updated;
-        });
-    }, []);
-    // TODO: i18n
-    return (React.createElement(components.Modal, { isOpen: isOpen, title: "\u5EFA\u7ACB\u8F2A\u64AD", size: "extraLarge", closable: !uploading, maskClosable: !uploading, haveCloseButton: false, confirmText: "\u5EFA\u7ACB\u8F2A\u64AD", mainAreaClassName: "qdr-carousel-modal__main", sideChildren: React.createElement("div", { className: "qdr-carousel-modal__side" },
-            React.createElement("div", { className: "qdr-carousel-modal__side__hints-wrapper" },
-                React.createElement("div", { className: "qdr-carousel-modal__side__hints-title" }, "\u4E0A\u50B3\u5EFA\u8B70"),
-                React.createElement(components.Hints, { hints: [
-                        {
-                            text: `數量限制：至少 1 張，至多 ${controller === null || controller === void 0 ? void 0 : controller.maxLength} 張。`,
-                        },
-                        {
-                            text: `檔案格式：限 ${acceptText}。`,
-                        },
-                        (controller === null || controller === void 0 ? void 0 : controller.ratio) && {
-                            text: `檔案尺寸：最佳比例為 ${controller.ratio[0]}:${controller.ratio[1]}。建議圖片寬度達 2000px 以上，高度不限。`,
-                        },
-                        {
-                            text: `檔案大小：不可大於 ${controller === null || controller === void 0 ? void 0 : controller.limitSize} MB。`,
-                        },
-                    ].filter((h) => !!h) })),
-            React.createElement(components.Button, { className: "qdr-carousel-modal__side__upload", variant: "outlined", size: "large", disabled: isOverMaxLength, prefix: React.createElement(components.Icon, { icon: icons.Plus, width: 24, height: 24 }), onClick: () => tslib.__awaiter(void 0, void 0, void 0, function* () {
-                    const files = yield (controller === null || controller === void 0 ? void 0 : controller.selectFiles());
-                    if (files) {
-                        const correctFiles = files.filter((f) => (controller === null || controller === void 0 ? void 0 : controller.limitSize) && f.size <= controller.limitSize * 1024 * 1024);
-                        if (correctFiles.length !== files.length) {
-                            message({ type: 'error', content: `圖片檔案過大，檔案需小於 ${controller === null || controller === void 0 ? void 0 : controller.limitSize}MB` });
-                        }
-                        if (correctFiles.length > 0) {
-                            yield uploadFiles(correctFiles);
-                        }
-                    }
-                }) }, "\u52A0\u5165\u5716\u7247")), customizedFooterElement: React.createElement("div", { className: "qdr-carousel-modal__counter" }, `已上傳 ${items.filter((i) => i.progress === 100).length}/${controller === null || controller === void 0 ? void 0 : controller.maxLength}`), disabledConfirmButton: disabledConfirm, onClose: () => {
-            close();
-            setItems([]);
-        }, onConfirm: () => {
-            if (uploading) {
-                message({ type: 'error', content: '檔案上傳中，無法建立' });
-            }
-            else if ((controller === null || controller === void 0 ? void 0 : controller.maxLength) && items.length > controller.maxLength) {
-                message({ type: 'error', content: '超過數量上限，請刪除已存在圖片' });
-            }
-            else {
-                close();
-                setItems([]);
-                setTimeout(() => {
-                    onConfirm === null || onConfirm === void 0 ? void 0 : onConfirm(items);
-                }, 0);
-            }
-        } },
-        React.createElement(FilesDropZone, { isDragging: isDragging, setIsDragging: setIsDragging, isOverMaxLength: isOverMaxLength, controller: controller, uploadFiles: uploadFiles }, items.length > 0 ? (React.createElement("div", { className: clsx('qdr-carousel-modal__grid', {
-                'qdr-carousel-modal__grid--isDragging': isDragging,
-            }) }, items.map((item, index) => (React.createElement(CarouselItem, { key: `${item.url}-${item.preview}-${index}`, url: item.url, preview: item.preview, progress: item.progress, caption: item.caption, index: index, ratio: controller === null || controller === void 0 ? void 0 : controller.ratio, isError: item.isError, onChange: (value) => {
-                change(index, { url: item.url, caption: value });
-            }, onRemove: () => {
-                remove(index);
-            }, swap: swap }))))) : (React.createElement("div", { className: "qdr-carousel-modal__placeholder" },
-            React.createElement("div", { className: "qdr-carousel-modal__placeholder__block" },
-                React.createElement("div", { className: "qdr-carousel-modal__placeholder__icon" },
-                    React.createElement(components.Icon, { icon: icons.Upload, width: 32, height: 32 })),
-                React.createElement("div", { className: "qdr-carousel-modal__placeholder__title" }, "\u62D6\u66F3\u6A94\u6848\u5230\u6B64\u4E0A\u50B3"),
-                React.createElement("div", { className: "qdr-carousel-modal__placeholder__hint" }, (controller === null || controller === void 0 ? void 0 : controller.ratio)
-                    ? `僅能上傳 ${acceptText}；建議比例為 ${controller.ratio[0]}:${controller.ratio[1]} 且寬度至少達 2000px 以上；檔案大小不可超過 ${controller === null || controller === void 0 ? void 0 : controller.limitSize}MB`
-                    : `僅能上傳 ${acceptText}；檔案大小不可超過 ${controller === null || controller === void 0 ? void 0 : controller.limitSize}MB`)))))));
-};
-
-const options = [
-    {
-        value: 'leftImageRightText',
-        label: '左圖右文',
-    },
-    {
-        value: 'rightImageLeftText',
-        label: '右圖左文',
-    },
-    {
-        value: 'noImage',
-        label: '純文字顯示',
-    },
-];
-const emptyValues = {
-    alignment: 'leftImageRightText',
-    title: '',
-    description: '',
-    remark: '',
-    linkText: '',
-    linkUrl: '',
-};
-// TODO: i18n
-const CardModal = ({ isOpen, close, controller, initialValue, onConfirm: onConfirmProps }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
-    const { message } = useMessage();
-    const [values, setValues] = React.useState(emptyValues);
-    const [imageUploaderItem, setImageUploaderItem] = React.useState(null);
-    const [haveLink, setHaveLink] = React.useState(true);
-    const [errors, setErrors] = React.useState([]);
-    const uploading = React.useMemo(() => imageUploaderItem && imageUploaderItem.progress !== 100, [imageUploaderItem]);
-    const prevIsOpen = utils.usePreviousValue(isOpen);
-    React.useEffect(() => {
-        if (!prevIsOpen && isOpen && initialValue) {
-            setValues(Object.assign({}, initialValue.values));
-            setHaveLink(initialValue.haveLink);
-            setImageUploaderItem(initialValue.imageItem);
-        }
-    }, [initialValue, isOpen, prevIsOpen]);
-    const onConfirm = React.useCallback(() => {
-        const errorItems = [];
-        setErrors([]);
-        if (values.alignment !== 'noImage' && (!imageUploaderItem || (imageUploaderItem && !imageUploaderItem.url))) {
-            errorItems.push({ field: 'image', message: '必填欄位' });
-        }
-        if (!values.title) {
-            errorItems.push({ field: 'title', message: '必填欄位' });
-        }
-        if (!values.description) {
-            errorItems.push({ field: 'description', message: '必填欄位' });
-        }
-        if (haveLink) {
-            const urlValidation = /^http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w-./?%&=]*)?$/;
-            if (!values.linkText) {
-                errorItems.push({ field: 'linkText', message: '必填欄位' });
-            }
-            if (!values.linkUrl) {
-                errorItems.push({ field: 'linkUrl', message: '必填欄位' });
-            }
-            if (values.linkUrl && !urlValidation.test(values.linkUrl)) {
-                errorItems.push({ field: 'linkUrl', message: '格式錯誤' });
-            }
-        }
-        if (errorItems.length > 0) {
-            setErrors(errorItems);
-        }
-        else {
-            close();
-            setValues(emptyValues);
-            setHaveLink(true);
-            setImageUploaderItem(null);
-            onConfirmProps({ values, imageItem: values.alignment === 'noImage' ? null : imageUploaderItem, haveLink });
-        }
-    }, [imageUploaderItem, close, onConfirmProps, haveLink, values]);
-    return (React.createElement(components.Modal, { isOpen: isOpen, size: "medium", title: "\u5EFA\u7ACB\u5361\u7247", confirmText: "\u5EFA\u7ACB\u5361\u7247", mainAreaClassName: "qdr-card-modal__main", closable: !uploading, maskClosable: !uploading, onClose: () => {
-            close();
-            setValues(emptyValues);
-            setHaveLink(true);
-            setImageUploaderItem(null);
-        }, onConfirm: onConfirm },
-        React.createElement("div", { className: "qdr-card-modal__block" },
-            React.createElement("p", { className: "qdr-card-modal__block-title" }, "\u986F\u793A\u8A2D\u5B9A"),
-            React.createElement(components.SegmentedControl, { options: options, value: values.alignment, onChange: (value) => setValues((prev) => (Object.assign(Object.assign({}, prev), { alignment: value }))) })),
-        React.createElement("div", { className: "qdr-card-modal__block" },
-            React.createElement("p", { className: "qdr-card-modal__block-title" }, "\u57FA\u672C\u8A2D\u5B9A"),
-            React.createElement("div", { className: "qdr-card-modal__block-content" },
-                values.alignment !== 'noImage' && controller && (React.createElement(components.ImageUploader, { label: "\u5716\u7247", getBody: controller.getBody, getHeaders: controller.getHeaders, getUrl: controller.getUrl, uploader: controller.uploader, imageUploaderItem: imageUploaderItem, setImageUploaderItem: setImageUploaderItem, width: 240, accept: controller === null || controller === void 0 ? void 0 : controller.accept, ratio: controller === null || controller === void 0 ? void 0 : controller.ratio, limitSize: controller === null || controller === void 0 ? void 0 : controller.limitSize, onOverLimitSize: () => {
-                        message({ type: 'error', content: '圖片檔案過大，檔案需小於 2MB' });
-                    }, onErrorAccept: () => {
-                        message({ type: 'error', content: '圖片類型錯誤' });
-                    }, required: true, errorMessage: (_b = (_a = errors.find((e) => e.field === 'image')) === null || _a === void 0 ? void 0 : _a.message) !== null && _b !== void 0 ? _b : '' })),
-                React.createElement(components.Input, { value: values.title, className: "qdr-card-modal__block-field", onChange: (value) => setValues((prev) => (Object.assign(Object.assign({}, prev), { title: value }))), label: "\u6A19\u984C", placeholder: "\u8ACB\u8F38\u5165\u6A19\u984C", maxLength: 30, required: true, errorMessage: (_d = (_c = errors.find((e) => e.field === 'title')) === null || _c === void 0 ? void 0 : _c.message) !== null && _d !== void 0 ? _d : '' }),
-                React.createElement(components.Textarea, { value: values.description, className: "qdr-card-modal__block-field", onChange: (value) => setValues((prev) => (Object.assign(Object.assign({}, prev), { description: value }))), label: "\u7C21\u8FF0", placeholder: "\u8ACB\u8F38\u5165\u7C21\u8FF0", height: 86, maxLength: 50, required: true, errorMessage: (_f = (_e = errors.find((e) => e.field === 'description')) === null || _e === void 0 ? void 0 : _e.message) !== null && _f !== void 0 ? _f : '' }),
-                React.createElement(components.Input, { value: values.remark, className: "qdr-card-modal__block-field", onChange: (value) => setValues((prev) => (Object.assign(Object.assign({}, prev), { remark: value }))), label: "\u5099\u8A3B", placeholder: "\u8ACB\u8F38\u5165\u5099\u8A3B\u8CC7\u8A0A", maxLength: 30 }))),
-        React.createElement("div", { className: "qdr-card-modal__block" },
-            React.createElement("div", { className: "qdr-card-modal__block-title" },
-                React.createElement("span", null, "\u5C0E\u9023\u6309\u9215"),
-                React.createElement("div", { className: "qdr-card-modal__toggle-wrapper" },
-                    React.createElement(components.Toggle, { checked: haveLink, onChange: setHaveLink }),
-                    React.createElement("span", null, "\u986F\u793A\u6309\u9215"))),
-            haveLink && (React.createElement("div", { className: "qdr-card-modal__link-wrapper" },
-                React.createElement(components.Input, { value: values.linkText, onChange: (value) => setValues((prev) => (Object.assign(Object.assign({}, prev), { linkText: value }))), width: 180, label: "\u986F\u793A\u6587\u5B57", placeholder: "\u8ACB\u8F38\u5165\u986F\u793A\u6587\u5B57", maxLength: 6, required: true, errorMessage: (_h = (_g = errors.find((e) => e.field === 'linkText')) === null || _g === void 0 ? void 0 : _g.message) !== null && _h !== void 0 ? _h : '' }),
-                React.createElement(components.Input, { value: values.linkUrl, onChange: (value) => setValues((prev) => (Object.assign(Object.assign({}, prev), { linkUrl: value }))), className: "qdr-card-modal__url-field", label: "\u9023\u7D50", placeholder: "\u8CBC\u4E0A\u9023\u7D50\uFF0C\u5982 https://...", required: true, errorMessage: (_k = (_j = errors.find((e) => e.field === 'linkUrl')) === null || _j === void 0 ? void 0 : _j.message) !== null && _k !== void 0 ? _k : '' }))))));
-};
-
-const ConfirmModal = ({ isOpen, title, content, confirmText, close, onConfirm, haveFooter = true, mask, maskClosable, escToExit, }) => {
-    const locale = configs.useLocale();
-    return (React.createElement(components.Modal, { isOpen: isOpen, className: "qdr-confirm-modal", size: "small", mask: mask, maskClosable: maskClosable, escToExit: escToExit, onClose: () => {
-            close();
-        }, haveFooter: false },
-        React.createElement("div", { className: "qdr-confirm-modal__container" },
-            React.createElement(components.Icon, { icon: icons.Warning, width: 28, height: 28, className: "qdr-confirm-modal__icon" }),
-            React.createElement("div", { className: "qdr-confirm-modal__body" },
-                React.createElement("div", { className: "qdr-confirm-modal__title" }, title),
-                React.createElement("div", { className: "qdr-confirm-modal__content" }, content))),
-        haveFooter && (React.createElement("div", { className: "qdr-confirm-modal__footer" },
-            React.createElement(components.Button, { variant: "secondary", onClick: close }, locale.editor.cancel),
-            React.createElement(components.Button, { variant: "primary", danger: true, onClick: () => {
-                    close();
-                    onConfirm === null || onConfirm === void 0 ? void 0 : onConfirm();
-                } }, confirmText || locale.editor.confirm)))));
-};
-
-const ModalContext = React.createContext({
-    isModalClosed: false,
-    setIsModalClosed: () => { },
-    setEmbedModalConfig: () => { },
-    setCarouselModalConfig: () => { },
-    setCardModalConfig: () => { },
-    setConfirmModalConfig: () => { },
-});
-function useModal() {
-    return React.useContext(ModalContext);
-}
-
-const ModalProvider = ({ children, needConfirmModal, setNeedConfirmModal }) => {
-    var _a, _b, _c;
-    const [modalName, setModalName] = React.useState('');
-    const [isModalClosed, setIsModalClosed] = React.useState(false);
-    const [embedModalConfig, setEmbedModalConfig] = React.useState(null);
-    const [carouselModalConfig, setCarouselModalConfig] = React.useState(null);
-    const [cardModalConfig, setCardModalConfig] = React.useState(null);
-    const [confirmModalConfig, setConfirmModalConfig] = React.useState(null);
-    const close = React.useCallback(() => {
-        setModalName('');
-        setIsModalClosed(true);
-        if (needConfirmModal) {
-            setNeedConfirmModal === null || setNeedConfirmModal === void 0 ? void 0 : setNeedConfirmModal(null);
-        }
-    }, [needConfirmModal, setNeedConfirmModal]);
-    React.useEffect(() => {
-        if (needConfirmModal) {
-            setModalName('confirm-modal');
-            setConfirmModalConfig(needConfirmModal);
-        }
-    }, [needConfirmModal]);
-    return (React.createElement(ModalContext.Provider, { value: {
-            isModalClosed,
-            setIsModalClosed,
-            setEmbedModalConfig: (config) => {
-                setModalName('embed-modal');
-                setEmbedModalConfig(config);
-            },
-            setCarouselModalConfig: (config) => {
-                setModalName('carousel-modal');
-                setCarouselModalConfig(config);
-            },
-            setCardModalConfig: (config) => {
-                setModalName('card-modal');
-                setCardModalConfig(config);
-            },
-            setConfirmModalConfig: (config) => {
-                setModalName('confirm-modal');
-                setConfirmModalConfig(config);
-            },
-        } },
-        children,
-        React.createElement(EmbedModal, { isOpen: modalName === 'embed-modal', close: close, placeholder: (embedModalConfig === null || embedModalConfig === void 0 ? void 0 : embedModalConfig.placeholder) || '', confirmText: (embedModalConfig === null || embedModalConfig === void 0 ? void 0 : embedModalConfig.confirmText) || '', hint: (embedModalConfig === null || embedModalConfig === void 0 ? void 0 : embedModalConfig.hint) || '', type: (embedModalConfig === null || embedModalConfig === void 0 ? void 0 : embedModalConfig.type) || 'input', onConfirm: (value) => {
-                var _a;
-                (_a = embedModalConfig === null || embedModalConfig === void 0 ? void 0 : embedModalConfig.onConfirm) === null || _a === void 0 ? void 0 : _a.call(embedModalConfig, value);
-            } }),
-        React.createElement(CarouselModal, { isOpen: modalName === 'carousel-modal', close: close, controller: carouselModalConfig === null || carouselModalConfig === void 0 ? void 0 : carouselModalConfig.controller, initialValue: carouselModalConfig === null || carouselModalConfig === void 0 ? void 0 : carouselModalConfig.initialValue, onConfirm: carouselModalConfig === null || carouselModalConfig === void 0 ? void 0 : carouselModalConfig.onConfirm }),
-        React.createElement(CardModal, { isOpen: modalName === 'card-modal', close: close, controller: cardModalConfig === null || cardModalConfig === void 0 ? void 0 : cardModalConfig.controller, initialValue: cardModalConfig === null || cardModalConfig === void 0 ? void 0 : cardModalConfig.initialValue, onConfirm: ({ values, imageItem, haveLink }) => {
-                var _a;
-                (_a = cardModalConfig === null || cardModalConfig === void 0 ? void 0 : cardModalConfig.onConfirm) === null || _a === void 0 ? void 0 : _a.call(cardModalConfig, {
-                    values,
-                    imageItem,
-                    haveLink,
-                });
-            } }),
-        React.createElement(ConfirmModal, { isOpen: modalName === 'confirm-modal', close: close, title: (_a = confirmModalConfig === null || confirmModalConfig === void 0 ? void 0 : confirmModalConfig.title) !== null && _a !== void 0 ? _a : '', content: (_b = confirmModalConfig === null || confirmModalConfig === void 0 ? void 0 : confirmModalConfig.content) !== null && _b !== void 0 ? _b : '', confirmText: (_c = confirmModalConfig === null || confirmModalConfig === void 0 ? void 0 : confirmModalConfig.confirmText) !== null && _c !== void 0 ? _c : '', onConfirm: confirmModalConfig === null || confirmModalConfig === void 0 ? void 0 : confirmModalConfig.onConfirm, haveFooter: confirmModalConfig === null || confirmModalConfig === void 0 ? void 0 : confirmModalConfig.haveFooter, mask: confirmModalConfig === null || confirmModalConfig === void 0 ? void 0 : confirmModalConfig.mask, maskClosable: confirmModalConfig === null || confirmModalConfig === void 0 ? void 0 : confirmModalConfig.maskClosable, escToExit: confirmModalConfig === null || confirmModalConfig === void 0 ? void 0 : confirmModalConfig.escToExit })));
-};
-
-const MessageProvider = ({ children }) => {
-    const { props: themeProps } = React.useContext(configs.ThemeContext);
-    const message = React.useCallback(({ type, content, duration }) => {
-        switch (type) {
-            case 'info': {
-                components.Message.info(content, themeProps, { duration });
-                break;
-            }
-            case 'error': {
-                components.Message.error(content, themeProps, { duration });
-                break;
-            }
-            case 'warning': {
-                components.Message.warning(content, themeProps, { duration });
-                break;
-            }
-            case 'success': {
-                components.Message.success(content, themeProps, { duration });
-                break;
-            }
-            default: {
-                components.Message.info(content, themeProps, { duration });
-                break;
-            }
-        }
-    }, [themeProps]);
-    return React.createElement(MessageContext.Provider, { value: { message } }, children);
-};
-
-/**
- * Provide configs of quadrats and control the value.
- */
-function Quadrats(props) {
-    const { children, editor, locale, onChange, theme, value, needConfirmModal, setNeedConfirmModal } = props;
-    return (React.createElement(configs.ConfigsProvider, { theme: theme, locale: locale },
-        React.createElement(reactDnd.DndProvider, { backend: reactDndHtml5Backend.HTML5Backend },
-            React.createElement(MessageProvider, null,
-                React.createElement(ModalProvider, { needConfirmModal: needConfirmModal, setNeedConfirmModal: setNeedConfirmModal },
-                    React.createElement(slateReact.Slate, { editor: editor, onChange: onChange, initialValue: value }, children))))));
-}
-
-function createEventHandler(editor, handlers) {
-    const [handler, ...restHandlers] = handlers;
-    return event => handler(event, editor, () => {
-        const next = restHandlers.length > 0 ? createEventHandler(editor, restHandlers) : () => { };
-        next(event);
-    });
-}
-/**
- * To compose sequential `event handlers` to single for each event types.
- */
-function composeHandlers(handlersList) {
-    const handlersListRecord = handlersList.reduce((acc, handlers) => {
-        Object.entries(handlers).forEach(([key, value]) => {
-            const name = key;
-            const handler = value;
-            const origin = acc[name];
-            if (origin) {
-                origin.push(handler);
-            }
-            else {
-                acc[name] = [handler];
-            }
-        });
-        return acc;
-    }, {});
-    const handlersEntries = Object.entries(handlersListRecord);
-    return editor => handlersEntries.reduce((acc, [name, handlers]) => {
-        acc[name] = createEventHandler(editor, handlers);
-        return acc;
-    }, {});
-}
-
-/**
- * To compose sequential `renderElement`s to single.
- */
-function composeRenderElements(renderElements) {
-    return _internal.composeRenderElementsBase(props => React.createElement(DefaultElement, Object.assign({}, props)), renderElements);
-}
-
-/**
- * To compose sequential `renderLeaf`s or `renderMark`s to single.
- */
-function composeRenderLeafs(renderLeafs) {
-    return _internal.composeRenderLeafsBase(props => React.createElement(DefaultLeaf, Object.assign({}, props)), renderLeafs);
-}
-
-function createReactEditor() {
-    return slateReact.withReact(core.createEditor());
-}
-
-function createRenderElement(options) {
-    return _internal.createRenderElementBase(options);
-}
-
-function createRenderElements(options) {
-    return _internal.createRenderElementsBase(options);
-}
-
-function createRenderMark(options) {
-    return _internal.createRenderMarkBase(options);
-}
-
-exports.ReactEditor = slateReact.ReactEditor;
-exports.useFocused = slateReact.useFocused;
-exports.useQuadrats = slateReact.useSlate;
-exports.useReadOnly = slateReact.useReadOnly;
-exports.useSelected = slateReact.useSelected;
-exports.useSlateStatic = slateReact.useSlateStatic;
-exports.Editor = core.Editor;
-exports.CompositionContext = CompositionContext;
-exports.CompositionProvider = CompositionProvider;
-exports.DefaultElement = DefaultElement;
-exports.DefaultLeaf = DefaultLeaf;
-exports.Editable = Editable;
-exports.MessageContext = MessageContext;
-exports.MessageProvider = MessageProvider;
-exports.ModalContext = ModalContext;
-exports.ModalProvider = ModalProvider;
-exports.PLACEHOLDER_KEY = PLACEHOLDER_KEY;
-exports.Quadrats = Quadrats;
-exports.composeHandlers = composeHandlers;
-exports.composeRenderElements = composeRenderElements;
-exports.composeRenderLeafs = composeRenderLeafs;
-exports.createReactEditor = createReactEditor;
-exports.createRenderElement = createRenderElement;
-exports.createRenderElements = createRenderElements;
-exports.createRenderMark = createRenderMark;
-exports.useComposition = useComposition;
-exports.useMessage = useMessage;
-exports.useModal = useModal;
-Object.prototype.hasOwnProperty.call(configs, '__proto__') &&
-  !Object.prototype.hasOwnProperty.call(exports, '__proto__') &&
-  Object.defineProperty(exports, '__proto__', {
-    enumerable: true,
-    value: configs['__proto__']
-  });
-
-Object.keys(configs).forEach(function (k) {
-  if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) exports[k] = configs[k];
-});