@quadrats/react 0.7.8 → 1.1.0

package/index.cjs.js

@@ -5,11 +5,31 @@ 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 components = require('@quadrats/react/components');
+var reactDndHtml5Backend = require('react-dnd-html5-backend');
+var reactDnd = require('react-dnd');
+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"]);
@@ -17,6 +37,8 @@ function Editable(props) {
     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;
@@ -31,15 +53,29 @@ function Editable(props) {
         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);
         }
-    }, [onCompositionStartProp, isEditorEmpty]);
+    }, [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]) {
@@ -49,18 +85,524 @@ function Editable(props) {
         }
         return children;
     }, [renderLeafProp, placeholder, placeholderShowable]);
-    return (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) })));
+    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: () => {
+            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 [inputValue, setInputValue] = React.useState(caption);
+    React.useEffect(() => {
+        const timeoutId = setTimeout(() => {
+            onChange(inputValue);
+        }, 500);
+        return () => {
+            clearTimeout(timeoutId);
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [inputValue]);
+    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: inputValue, onChange: setInputValue, placeholder: "\u5716\u7247\u8AAA\u660E\u6216\u66FF\u4EE3\u6587\u5B57..." }))))));
+};
+
+const CarouselModal = ({ isOpen, close, controller, initialValue = [], onConfirm }) => {
+    const editor = slateReact.useSlateStatic();
+    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(editor));
+                    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(reactDnd.DndProvider, { backend: reactDndHtml5Backend.HTML5Backend },
+            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.caption || ''}-${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: '純文字顯示',
+    },
+];
+// 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({
+        alignment: 'leftImageRightText',
+        title: '',
+        description: '',
+        remark: '',
+        linkText: '',
+        linkUrl: '',
+    });
+    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 {
+            onConfirmProps({ values, imageItem: values.alignment === 'noImage' ? null : imageUploaderItem, haveLink });
+        }
+    }, [imageUploaderItem, 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();
+        }, 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: 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, } = props;
+    const { children, editor, locale, onChange, theme, value, needConfirmModal, setNeedConfirmModal } = props;
     return (React.createElement(configs.ConfigsProvider, { theme: theme, locale: locale },
-        React.createElement(slateReact.Slate, { editor: editor, onChange: onChange, initialValue: value }, children)));
+        React.createElement(slateReact.Slate, { editor: editor, onChange: onChange, initialValue: value },
+            React.createElement(MessageProvider, null,
+                React.createElement(ModalProvider, { needConfirmModal: needConfirmModal, setNeedConfirmModal: setNeedConfirmModal }, children)))));
 }
 
 function createEventHandler(editor, handlers) {
@@ -125,8 +667,6 @@ function createRenderMark(options) {
     return _internal.createRenderMarkBase(options);
 }
 
-const PLACEHOLDER_KEY = '__quadrats-placeholder__';
-
 exports.ReactEditor = slateReact.ReactEditor;
 exports.useFocused = slateReact.useFocused;
 exports.useQuadrats = slateReact.useSlate;
@@ -134,9 +674,15 @@ 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;
@@ -146,6 +692,9 @@ 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__', {

package/index.js

@@ -1,11 +1,17 @@
 export * from '@quadrats/react/configs';
-export { PLACEHOLDER_KEY } from './core/index.js';
+export { PLACEHOLDER_KEY } from './core/constants.js';
+export { ReactEditor, useFocused, useSlate as useQuadrats, useReadOnly, useSelected, useSlateStatic } from 'slate-react';
+export { Editor } from '@quadrats/core';
 export { default as Editable } from './core/components/Editable.js';
 export { default as DefaultElement } from './core/components/DefaultElement.js';
 export { default as DefaultLeaf } from './core/components/DefaultLeaf.js';
 export { default as Quadrats } from './core/components/Quadrats.js';
-export { ReactEditor, useFocused, useSlate as useQuadrats, useReadOnly, useSelected, useSlateStatic } from 'slate-react';
-export { Editor } from '@quadrats/core';
+export { ModalContext, useModal } from './core/contexts/modal/modal.js';
+export { ModalProvider } from './core/contexts/modal/ModalProvider.js';
+export { MessageContext, useMessage } from './core/contexts/message/message.js';
+export { MessageProvider } from './core/contexts/message/MessageProvider.js';
+export { CompositionContext, useComposition } from './core/contexts/composition/composition.js';
+export { CompositionProvider } from './core/contexts/composition/CompositionProvider.js';
 export { composeHandlers } from './core/composeHandlers.js';
 export { composeRenderElements } from './core/composeRenderElements.js';
 export { composeRenderLeafs } from './core/composeRenderLeafs.js';