@quadrats/react 1.1.4 → 1.1.6

package/card/toolbar/index.cjs.js

@@ -1,8 +1,6 @@
 'use strict';
 
 var React = require('react');
-var core = require('@quadrats/core');
-var card = require('@quadrats/common/card');
 var react = require('@quadrats/react');
 var tslib = require('tslib');
 var toolbar = require('@quadrats/react/toolbar');
@@ -11,18 +9,19 @@ function useCardTool(controller) {
     const editor = react.useSlateStatic();
     const { setCardModalConfig, isModalClosed, setIsModalClosed } = react.useModal();
     React.useEffect(() => {
-        const [match] = core.Editor.nodes(editor, {
-            at: [],
-            match: (node) => {
-                const placeholderElement = node;
-                return core.Element.isElement(placeholderElement) && placeholderElement.type === card.CARD_PLACEHOLDER_TYPE;
-            },
-        });
-        if (match) {
+        if (isModalClosed) {
+            setTimeout(() => {
+                controller.removeCardPlaceholder(editor);
+                setIsModalClosed(false);
+            }, 250);
+        }
+    }, [controller, editor, isModalClosed, setIsModalClosed]);
+    return {
+        onClick: () => {
+            controller.insertCardPlaceholder(editor);
             setCardModalConfig({
                 controller,
                 onConfirm: ({ values, imageItem, haveLink }) => {
-                    controller.removeCardPlaceholder(editor);
                     controller.insertCard({
                         editor,
                         cardValues: {
@@ -36,22 +35,9 @@ function useCardTool(controller) {
                             linkUrl: values.linkUrl,
                         },
                     });
+                    controller.removeCardPlaceholder(editor);
                 },
             });
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [controller, editor]);
-    React.useEffect(() => {
-        if (isModalClosed) {
-            setTimeout(() => {
-                controller.removeCardPlaceholder(editor);
-                setIsModalClosed(false);
-            }, 250);
-        }
-    }, [controller, editor, isModalClosed, setIsModalClosed]);
-    return {
-        onClick: () => {
-            controller.insertCardPlaceholder(editor);
         },
     };
 }

package/card/toolbar/useCardTool.js

@@ -1,24 +1,23 @@
 import { useEffect } from 'react';
-import { Editor, Element } from '@quadrats/core';
-import { CARD_PLACEHOLDER_TYPE } from '@quadrats/common/card';
 import { useSlateStatic, useModal } from '@quadrats/react';
 
 function useCardTool(controller) {
     const editor = useSlateStatic();
     const { setCardModalConfig, isModalClosed, setIsModalClosed } = useModal();
     useEffect(() => {
-        const [match] = Editor.nodes(editor, {
-            at: [],
-            match: (node) => {
-                const placeholderElement = node;
-                return Element.isElement(placeholderElement) && placeholderElement.type === CARD_PLACEHOLDER_TYPE;
-            },
-        });
-        if (match) {
+        if (isModalClosed) {
+            setTimeout(() => {
+                controller.removeCardPlaceholder(editor);
+                setIsModalClosed(false);
+            }, 250);
+        }
+    }, [controller, editor, isModalClosed, setIsModalClosed]);
+    return {
+        onClick: () => {
+            controller.insertCardPlaceholder(editor);
             setCardModalConfig({
                 controller,
                 onConfirm: ({ values, imageItem, haveLink }) => {
-                    controller.removeCardPlaceholder(editor);
                     controller.insertCard({
                         editor,
                         cardValues: {
@@ -32,22 +31,9 @@ function useCardTool(controller) {
                             linkUrl: values.linkUrl,
                         },
                     });
+                    controller.removeCardPlaceholder(editor);
                 },
             });
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [controller, editor]);
-    useEffect(() => {
-        if (isModalClosed) {
-            setTimeout(() => {
-                controller.removeCardPlaceholder(editor);
-                setIsModalClosed(false);
-            }, 250);
-        }
-    }, [controller, editor, isModalClosed, setIsModalClosed]);
-    return {
-        onClick: () => {
-            controller.insertCardPlaceholder(editor);
         },
     };
 }

package/carousel/toolbar/index.cjs.js

@@ -1,8 +1,6 @@
 'use strict';
 
 var React = require('react');
-var core = require('@quadrats/core');
-var carousel = require('@quadrats/common/carousel');
 var react = require('@quadrats/react');
 var tslib = require('tslib');
 var toolbar = require('@quadrats/react/toolbar');
@@ -10,28 +8,6 @@ var toolbar = require('@quadrats/react/toolbar');
 function useCarouselTool(controller) {
     const editor = react.useSlateStatic();
     const { setCarouselModalConfig, isModalClosed, setIsModalClosed } = react.useModal();
-    React.useEffect(() => {
-        const [match] = core.Editor.nodes(editor, {
-            at: [],
-            match: (node) => {
-                const placeholderElement = node;
-                return core.Element.isElement(placeholderElement) && placeholderElement.type === carousel.CAROUSEL_PLACEHOLDER_TYPE;
-            },
-        });
-        if (match) {
-            setCarouselModalConfig({
-                controller,
-                onConfirm: (items) => {
-                    controller.removeCarouselPlaceholder(editor);
-                    controller.insertCarousel({
-                        editor,
-                        items,
-                    });
-                },
-            });
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [controller, editor]);
     React.useEffect(() => {
         if (isModalClosed) {
             setTimeout(() => {
@@ -43,6 +19,16 @@ function useCarouselTool(controller) {
     return {
         onClick: () => {
             controller.insertCarouselPlaceholder(editor);
+            setCarouselModalConfig({
+                controller,
+                onConfirm: (items) => {
+                    controller.insertCarousel({
+                        editor,
+                        items,
+                    });
+                    controller.removeCarouselPlaceholder(editor);
+                },
+            });
         },
     };
 }

package/carousel/toolbar/useCarouselTool.js

@@ -1,33 +1,9 @@
 import { useEffect } from 'react';
-import { Editor, Element } from '@quadrats/core';
-import { CAROUSEL_PLACEHOLDER_TYPE } from '@quadrats/common/carousel';
 import { useSlateStatic, useModal } from '@quadrats/react';
 
 function useCarouselTool(controller) {
     const editor = useSlateStatic();
     const { setCarouselModalConfig, isModalClosed, setIsModalClosed } = useModal();
-    useEffect(() => {
-        const [match] = Editor.nodes(editor, {
-            at: [],
-            match: (node) => {
-                const placeholderElement = node;
-                return Element.isElement(placeholderElement) && placeholderElement.type === CAROUSEL_PLACEHOLDER_TYPE;
-            },
-        });
-        if (match) {
-            setCarouselModalConfig({
-                controller,
-                onConfirm: (items) => {
-                    controller.removeCarouselPlaceholder(editor);
-                    controller.insertCarousel({
-                        editor,
-                        items,
-                    });
-                },
-            });
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [controller, editor]);
     useEffect(() => {
         if (isModalClosed) {
             setTimeout(() => {
@@ -39,6 +15,16 @@ function useCarouselTool(controller) {
     return {
         onClick: () => {
             controller.insertCarouselPlaceholder(editor);
+            setCarouselModalConfig({
+                controller,
+                onConfirm: (items) => {
+                    controller.insertCarousel({
+                        editor,
+                        items,
+                    });
+                    controller.removeCarouselPlaceholder(editor);
+                },
+            });
         },
     };
 }

package/core/components/Quadrats.js

@@ -12,10 +12,10 @@ import { MessageProvider } from '../contexts/message/MessageProvider.js';
 function Quadrats(props) {
     const { children, editor, locale, onChange, theme, value, needConfirmModal, setNeedConfirmModal } = props;
     return (React.createElement(ConfigsProvider, { theme: theme, locale: locale },
-        React.createElement(Slate, { editor: editor, onChange: onChange, initialValue: value },
-            React.createElement(DndProvider, { backend: HTML5Backend },
-                React.createElement(MessageProvider, null,
-                    React.createElement(ModalProvider, { needConfirmModal: needConfirmModal, setNeedConfirmModal: setNeedConfirmModal }, children))))));
+        React.createElement(DndProvider, { backend: HTML5Backend },
+            React.createElement(MessageProvider, null,
+                React.createElement(ModalProvider, { needConfirmModal: needConfirmModal, setNeedConfirmModal: setNeedConfirmModal },
+                    React.createElement(Slate, { editor: editor, onChange: onChange, initialValue: value }, children))))));
 }
 
 export { Quadrats as default };

package/core/contexts/modal/CardModal/CardModal.js

@@ -17,18 +17,19 @@ const options = [
         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] = useState({
-        alignment: 'leftImageRightText',
-        title: '',
-        description: '',
-        remark: '',
-        linkText: '',
-        linkUrl: '',
-    });
+    const [values, setValues] = useState(emptyValues);
     const [imageUploaderItem, setImageUploaderItem] = useState(null);
     const [haveLink, setHaveLink] = useState(true);
     const [errors, setErrors] = useState([]);
@@ -69,11 +70,18 @@ const CardModal = ({ isOpen, close, controller, initialValue, onConfirm: onConfi
             setErrors(errorItems);
         }
         else {
+            close();
+            setValues(emptyValues);
+            setHaveLink(true);
+            setImageUploaderItem(null);
             onConfirmProps({ values, imageItem: values.alignment === 'noImage' ? null : imageUploaderItem, haveLink });
         }
-    }, [imageUploaderItem, onConfirmProps, haveLink, values]);
+    }, [imageUploaderItem, close, onConfirmProps, haveLink, values]);
     return (React.createElement(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"),

package/core/contexts/modal/CarouselModal/CarouselItem.js

@@ -1,20 +1,10 @@
-import React, { useState, useEffect } from 'react';
+import React from 'react';
 import clsx from 'clsx';
 import { useDrag, useDrop } from 'react-dnd';
 import { Progress, Icon, Input } from '@quadrats/react/components';
 import { Trash, Image } from '@quadrats/icons';
 
 const CarouselItem = ({ url, preview, progress, caption, index, onChange, onRemove, swap, ratio, isError, }) => {
-    const [inputValue, setInputValue] = useState(caption);
-    useEffect(() => {
-        const timeoutId = setTimeout(() => {
-            onChange(inputValue);
-        }, 500);
-        return () => {
-            clearTimeout(timeoutId);
-        };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [inputValue]);
     const [{ isDragging }, drag, dragPreview] = useDrag(() => ({
         type: 'CarouselItem',
         collect: (monitor) => ({
@@ -50,7 +40,7 @@ const CarouselItem = ({ url, preview, progress, caption, index, onChange, onRemo
                 aspectRatio: ratio ? `${ratio[0]} / ${ratio[1]}` : '3 /2',
             } }))),
         React.createElement("div", { className: "qdr-carousel-modal__input-wrapper" },
-            React.createElement(Input, { value: inputValue, onChange: setInputValue, placeholder: "\u5716\u7247\u8AAA\u660E\u6216\u66FF\u4EE3\u6587\u5B57..." }))))));
+            React.createElement(Input, { value: caption, onChange: onChange, placeholder: "\u5716\u7247\u8AAA\u660E\u6216\u66FF\u4EE3\u6587\u5B57..." }))))));
 };
 
 export { CarouselItem as default };

package/core/contexts/modal/CarouselModal/CarouselModal.js

@@ -3,14 +3,12 @@ import React, { useState, useEffect, useMemo, useCallback } from 'react';
 import clsx from 'clsx';
 import { Plus, Upload } from '@quadrats/icons';
 import { usePreviousValue, readFileAsBase64, upload } from '@quadrats/react/utils';
-import { useSlateStatic } from 'slate-react';
 import { Modal, Hints, Button, Icon } from '@quadrats/react/components';
 import { useMessage } from '../../message/message.js';
 import FilesDropZone from './FilesDropZone.js';
 import CarouselItem from './CarouselItem.js';
 
 const CarouselModal = ({ isOpen, close, controller, initialValue = [], onConfirm }) => {
-    const editor = useSlateStatic();
     const [uploading, setUploading] = useState(false);
     const [isDragging, setIsDragging] = useState(false);
     const [items, setItems] = useState([]);
@@ -124,7 +122,7 @@ const CarouselModal = ({ isOpen, close, controller, initialValue = [], onConfirm
                         },
                     ].filter((h) => !!h) })),
             React.createElement(Button, { className: "qdr-carousel-modal__side__upload", variant: "outlined", size: "large", disabled: isOverMaxLength, prefix: React.createElement(Icon, { icon: Plus, width: 24, height: 24 }), onClick: () => __awaiter(void 0, void 0, void 0, function* () {
-                    const files = yield (controller === null || controller === void 0 ? void 0 : controller.selectFiles(editor));
+                    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) {
@@ -154,7 +152,7 @@ const CarouselModal = ({ isOpen, close, controller, initialValue = [], onConfirm
         } },
         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) => {
+            }) }, 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);

package/core/contexts/modal/ConfirmModal/ConfirmModal.js

@@ -15,7 +15,10 @@ const ConfirmModal = ({ isOpen, title, content, confirmText, close, onConfirm, h
                 React.createElement("div", { className: "qdr-confirm-modal__content" }, content))),
         haveFooter && (React.createElement("div", { className: "qdr-confirm-modal__footer" },
             React.createElement(Button, { variant: "secondary", onClick: close }, locale.editor.cancel),
-            React.createElement(Button, { variant: "primary", danger: true, onClick: onConfirm }, confirmText || locale.editor.confirm)))));
+            React.createElement(Button, { variant: "primary", danger: true, onClick: () => {
+                    close();
+                    onConfirm === null || onConfirm === void 0 ? void 0 : onConfirm();
+                } }, confirmText || locale.editor.confirm)))));
 };
 
 export { ConfirmModal };

package/core/contexts/modal/EmbedModal/EmbedModal.js

@@ -18,6 +18,8 @@ const EmbedModal = ({ isOpen, close, placeholder, confirmText, hint, type, onCon
             close();
             setValue('');
         }, onConfirm: () => {
+            close();
+            setValue('');
             onConfirm(value);
         } }, type === 'textarea' ? (React.createElement(Textarea, { textareaRef: textareaRef, value: value, onChange: setValue, placeholder: placeholder, hint: hint, height: 86 })) : (React.createElement(Input, { inputRef: inputRef, value: value, onChange: setValue, placeholder: placeholder, hint: hint }))));
 };

package/embed/toolbar/index.cjs.js

@@ -1,9 +1,7 @@
 'use strict';
 
 var React = require('react');
-var core = require('@quadrats/core');
 var react = require('@quadrats/react');
-var embed = require('@quadrats/common/embed');
 var tslib = require('tslib');
 var toolbar = require('@quadrats/react/toolbar');
 
@@ -71,24 +69,6 @@ function useEmbedTool(controller, provider) {
                 };
         }
     }, [locale, provider]);
-    React.useEffect(() => {
-        const [match] = core.Editor.nodes(editor, {
-            at: [],
-            match: (node) => {
-                const placeholderElement = node;
-                return (core.Element.isElement(placeholderElement) &&
-                    placeholderElement.type === embed.EMBED_PLACEHOLDER_TYPE &&
-                    placeholderElement.provider === provider);
-            },
-        });
-        if (match) {
-            setEmbedModalConfig(Object.assign({ onConfirm: (value) => {
-                    controller.removeEmbedPlaceholder(editor);
-                    controller.insertEmbed(editor, provider, value);
-                } }, config));
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [config, controller, editor, provider]);
     React.useEffect(() => {
         if (isModalClosed) {
             setTimeout(() => {
@@ -100,6 +80,10 @@ function useEmbedTool(controller, provider) {
     return {
         onClick: () => {
             controller.insertEmbedPlaceholder(editor, provider);
+            setEmbedModalConfig(Object.assign({ onConfirm: (value) => {
+                    controller.insertEmbed(editor, provider, value);
+                    controller.removeEmbedPlaceholder(editor);
+                } }, config));
         },
     };
 }

package/embed/toolbar/useEmbedTool.js

@@ -1,7 +1,5 @@
 import { useMemo, useEffect } from 'react';
-import { Editor, Element } from '@quadrats/core';
 import { useLocale, useSlateStatic, useModal } from '@quadrats/react';
-import { EMBED_PLACEHOLDER_TYPE } from '@quadrats/common/embed';
 
 function useEmbedTool(controller, provider) {
     const locale = useLocale();
@@ -67,24 +65,6 @@ function useEmbedTool(controller, provider) {
                 };
         }
     }, [locale, provider]);
-    useEffect(() => {
-        const [match] = Editor.nodes(editor, {
-            at: [],
-            match: (node) => {
-                const placeholderElement = node;
-                return (Element.isElement(placeholderElement) &&
-                    placeholderElement.type === EMBED_PLACEHOLDER_TYPE &&
-                    placeholderElement.provider === provider);
-            },
-        });
-        if (match) {
-            setEmbedModalConfig(Object.assign({ onConfirm: (value) => {
-                    controller.removeEmbedPlaceholder(editor);
-                    controller.insertEmbed(editor, provider, value);
-                } }, config));
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [config, controller, editor, provider]);
     useEffect(() => {
         if (isModalClosed) {
             setTimeout(() => {
@@ -96,6 +76,10 @@ function useEmbedTool(controller, provider) {
     return {
         onClick: () => {
             controller.insertEmbedPlaceholder(editor, provider);
+            setEmbedModalConfig(Object.assign({ onConfirm: (value) => {
+                    controller.insertEmbed(editor, provider, value);
+                    controller.removeEmbedPlaceholder(editor);
+                } }, config));
         },
     };
 }

package/index.cjs.js

@@ -107,6 +107,8 @@ const EmbedModal = ({ isOpen, close, placeholder, confirmText, hint, type, onCon
             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 }))));
 };
@@ -175,16 +177,6 @@ const FilesDropZone = ({ isDragging, setIsDragging, children, isOverMaxLength, c
 };
 
 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) => ({
@@ -220,11 +212,10 @@ const CarouselItem = ({ url, preview, progress, caption, index, onChange, onRemo
                 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..." }))))));
+            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 editor = slateReact.useSlateStatic();
     const [uploading, setUploading] = React.useState(false);
     const [isDragging, setIsDragging] = React.useState(false);
     const [items, setItems] = React.useState([]);
@@ -338,7 +329,7 @@ const CarouselModal = ({ isOpen, close, controller, initialValue = [], onConfirm
                         },
                     ].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));
+                    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) {
@@ -368,7 +359,7 @@ const CarouselModal = ({ isOpen, close, controller, initialValue = [], onConfirm
         } },
         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) => {
+            }) }, 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);
@@ -396,18 +387,19 @@ const options = [
         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({
-        alignment: 'leftImageRightText',
-        title: '',
-        description: '',
-        remark: '',
-        linkText: '',
-        linkUrl: '',
-    });
+    const [values, setValues] = React.useState(emptyValues);
     const [imageUploaderItem, setImageUploaderItem] = React.useState(null);
     const [haveLink, setHaveLink] = React.useState(true);
     const [errors, setErrors] = React.useState([]);
@@ -448,11 +440,18 @@ const CardModal = ({ isOpen, close, controller, initialValue, onConfirm: onConfi
             setErrors(errorItems);
         }
         else {
+            close();
+            setValues(emptyValues);
+            setHaveLink(true);
+            setImageUploaderItem(null);
             onConfirmProps({ values, imageItem: values.alignment === 'noImage' ? null : imageUploaderItem, haveLink });
         }
-    }, [imageUploaderItem, onConfirmProps, haveLink, values]);
+    }, [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"),
@@ -491,7 +490,10 @@ const ConfirmModal = ({ isOpen, title, content, confirmText, close, onConfirm, h
                 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)))));
+            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({
@@ -599,10 +601,10 @@ const MessageProvider = ({ children }) => {
 function Quadrats(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 },
-            React.createElement(reactDnd.DndProvider, { backend: reactDndHtml5Backend.HTML5Backend },
-                React.createElement(MessageProvider, null,
-                    React.createElement(ModalProvider, { needConfirmModal: needConfirmModal, setNeedConfirmModal: setNeedConfirmModal }, children))))));
+        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) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quadrats/react",
-  "version": "1.1.4",
+  "version": "1.1.6",
   "description": "",
   "author": "Rytass",
   "homepage": "https://github.com/Quadrats/quadrats#readme",
@@ -20,8 +20,8 @@
     "url": "https://github.com/Quadrats/quadrats/issues"
   },
   "dependencies": {
-    "@quadrats/common": "^1.1.4",
-    "@quadrats/core": "^1.1.0",
+    "@quadrats/common": "^1.1.5",
+    "@quadrats/core": "^1.1.5",
     "@quadrats/icons": "^1.1.1",
     "@quadrats/locales": "^1.0.0",
     "@quadrats/theme": "^1.0.0",

package/table/defaultRenderTableElements.js

@@ -8,7 +8,7 @@ import TableCell from './components/TableCell.js';
 import TableBody from './components/TableBody.js';
 
 const defaultRenderTableElements = {
-    table: (props) => React.createElement(Table, Object.assign({}, props)),
+    table: (props) => React.createElement(Table, Object.assign({ key: Math.random() }, props)),
     table_title: (props) => React.createElement(TableTitle, Object.assign({}, props)),
     table_main: (props) => React.createElement(TableMain, Object.assign({}, props)),
     table_header: (props) => React.createElement(TableHeader, Object.assign({}, props)),

package/table/hooks/useTableCellToolbarActions.js

@@ -471,6 +471,20 @@ function useTableCellToolbarActions({ element, cellPosition, isHeader, transform
     }, [tableSelectedOn, setTableSelectedOn, columnCount, element.treatAsTitle, tableElement, moveOrSwapColumn]);
     // Delete actions
     const deleteActions = useMemo(() => {
+        // 當選中 row 時，檢查是否為最後一行
+        if ((tableSelectedOn === null || tableSelectedOn === void 0 ? void 0 : tableSelectedOn.region) === 'row' && typeof tableSelectedOn.index === 'number') {
+            // 如果只剩一行，不顯示刪除按鈕
+            if (isReachMinimumBodyRows && !isHeader) {
+                return [];
+            }
+        }
+        // 當選中 column 時，檢查是否為最後一列
+        if ((tableSelectedOn === null || tableSelectedOn === void 0 ? void 0 : tableSelectedOn.region) === 'column' && typeof tableSelectedOn.index === 'number') {
+            // 如果只剩一列（考慮 title columns），不顯示刪除按鈕
+            if (columnCount <= 1) {
+                return [];
+            }
+        }
         return [
             {
                 icon: Trash,
@@ -487,7 +501,7 @@ function useTableCellToolbarActions({ element, cellPosition, isHeader, transform
                 },
             },
         ];
-    }, [tableSelectedOn, deleteRow, deleteColumn, setTableSelectedOn]);
+    }, [tableSelectedOn, deleteRow, deleteColumn, setTableSelectedOn, isReachMinimumBodyRows, isHeader, columnCount]);
     // Inline toolbar icon groups - 當選中行/列時顯示的完整工具列
     const inlineToolbarIconGroups = useMemo(() => {
         return [

package/table/index.cjs.js

@@ -1457,6 +1457,20 @@ function useTableCellToolbarActions({ element, cellPosition, isHeader, transform
     }, [tableSelectedOn, setTableSelectedOn, columnCount, element.treatAsTitle, tableElement, moveOrSwapColumn]);
     // Delete actions
     const deleteActions = React.useMemo(() => {
+        // 當選中 row 時，檢查是否為最後一行
+        if ((tableSelectedOn === null || tableSelectedOn === void 0 ? void 0 : tableSelectedOn.region) === 'row' && typeof tableSelectedOn.index === 'number') {
+            // 如果只剩一行，不顯示刪除按鈕
+            if (isReachMinimumBodyRows && !isHeader) {
+                return [];
+            }
+        }
+        // 當選中 column 時，檢查是否為最後一列
+        if ((tableSelectedOn === null || tableSelectedOn === void 0 ? void 0 : tableSelectedOn.region) === 'column' && typeof tableSelectedOn.index === 'number') {
+            // 如果只剩一列（考慮 title columns），不顯示刪除按鈕
+            if (columnCount <= 1) {
+                return [];
+            }
+        }
         return [
             {
                 icon: icons.Trash,
@@ -1473,7 +1487,7 @@ function useTableCellToolbarActions({ element, cellPosition, isHeader, transform
                 },
             },
         ];
-    }, [tableSelectedOn, deleteRow, deleteColumn, setTableSelectedOn]);
+    }, [tableSelectedOn, deleteRow, deleteColumn, setTableSelectedOn, isReachMinimumBodyRows, isHeader, columnCount]);
     // Inline toolbar icon groups - 當選中行/列時顯示的完整工具列
     const inlineToolbarIconGroups = React.useMemo(() => {
         return [
@@ -3691,7 +3705,7 @@ function TableBody(props) {
 }
 
 const defaultRenderTableElements = {
-    table: (props) => React.createElement(Table, Object.assign({}, props)),
+    table: (props) => React.createElement(Table, Object.assign({ key: Math.random() }, props)),
     table_title: (props) => React.createElement(TableTitle, Object.assign({}, props)),
     table_main: (props) => React.createElement(TableMain, Object.assign({}, props)),
     table_header: (props) => React.createElement(TableHeader, Object.assign({}, props)),

package/table/jsx-serializer/defaultRenderTableElements.js

@@ -8,7 +8,7 @@ import { TableRowJsxSerializeElement } from './components/TableRow.js';
 import { TableCellJsxSerializeElement } from './components/TableCell.js';
 
 const defaultRenderTableElements = {
-    table: (props) => React.createElement(TableJsxSerializeElement, Object.assign({}, props)),
+    table: (props) => React.createElement(TableJsxSerializeElement, Object.assign({ key: Math.random() }, props)),
     table_title: (props) => React.createElement(TableTitleJsxSerializeElement, Object.assign({}, props)),
     table_main: (props) => React.createElement(TableMainJsxSerializeElement, Object.assign({}, props)),
     table_header: (props) => React.createElement(TableHeaderJsxSerializeElement, Object.assign({}, props)),

package/table/jsx-serializer/index.cjs.js

@@ -76,7 +76,7 @@ const TableCellJsxSerializeElement = ({ children, element, isColumnPinned, }) =>
 };
 
 const defaultRenderTableElements = {
-    table: (props) => React.createElement(TableJsxSerializeElement, Object.assign({}, props)),
+    table: (props) => React.createElement(TableJsxSerializeElement, Object.assign({ key: Math.random() }, props)),
     table_title: (props) => React.createElement(TableTitleJsxSerializeElement, Object.assign({}, props)),
     table_main: (props) => React.createElement(TableMainJsxSerializeElement, Object.assign({}, props)),
     table_header: (props) => React.createElement(TableHeaderJsxSerializeElement, Object.assign({}, props)),