@quadrats/react 1.0.0 → 1.1.1

package/embed/renderers/base/components/BaseEmbedElement.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Transforms } from '@quadrats/core';
-import { Edit, Trash, AlignLeft, AlignCenter, AlignRight } from '@quadrats/icons';
+import { AlignLeft, AlignCenter, AlignRight, Edit, Trash } from '@quadrats/icons';
 import { useModal, useSlateStatic, ReactEditor } from '@quadrats/react';
 import { InlineToolbar } from '@quadrats/react/toolbar';
 
@@ -11,50 +11,58 @@ const BaseEmbedElement = ({ element, haveAlignConfig = true, type = 'input', pla
     const { setEmbedModalConfig } = useModal();
     const editor = useSlateStatic();
     const path = ReactEditor.findPath(editor, element);
-    return (React.createElement("div", { className: "qdr-embed" }, children(React.createElement(InlineToolbar, { className: "qdr-embed__inline-toolbar", leftIcons: haveAlignConfig
-            ? [
-                {
-                    icon: AlignLeft,
-                    onClick: () => {
-                        Transforms.setNodes(editor, { align: 'left' }, { at: path });
-                    },
-                    active: element.align === 'left' || !element.align,
-                },
-                {
-                    icon: AlignCenter,
-                    onClick: () => {
-                        Transforms.setNodes(editor, { align: 'center' }, { at: path });
-                    },
-                    active: element.align === 'center',
-                },
-                {
-                    icon: AlignRight,
-                    onClick: () => {
-                        Transforms.setNodes(editor, { align: 'right' }, { at: path });
-                    },
-                    active: element.align === 'right',
-                },
-            ]
-            : [], rightIcons: [
-            {
-                icon: Edit,
-                onClick: () => {
-                    setEmbedModalConfig({
-                        placeholder: placeholder || '',
-                        confirmText: confirmText || '',
-                        hint: hint || '',
-                        type,
-                        onConfirm: (value) => {
-                            onConfirm === null || onConfirm === void 0 ? void 0 : onConfirm(editor, path, value);
+    return (React.createElement("div", { className: "qdr-embed" }, children(React.createElement(InlineToolbar, { className: "qdr-embed__inline-toolbar", iconGroups: [
+            haveAlignConfig
+                ? {
+                    enabledBgColor: true,
+                    icons: [
+                        {
+                            icon: AlignLeft,
+                            onClick: () => {
+                                Transforms.setNodes(editor, { align: 'left' }, { at: path });
+                            },
+                            active: element.align === 'left' || !element.align,
                         },
-                    });
-                },
-            },
+                        {
+                            icon: AlignCenter,
+                            onClick: () => {
+                                Transforms.setNodes(editor, { align: 'center' }, { at: path });
+                            },
+                            active: element.align === 'center',
+                        },
+                        {
+                            icon: AlignRight,
+                            onClick: () => {
+                                Transforms.setNodes(editor, { align: 'right' }, { at: path });
+                            },
+                            active: element.align === 'right',
+                        },
+                    ],
+                }
+                : { icons: [] },
             {
-                icon: Trash,
-                onClick: () => {
-                    Transforms.removeNodes(editor, { at: path });
-                },
+                icons: [
+                    {
+                        icon: Edit,
+                        onClick: () => {
+                            setEmbedModalConfig({
+                                placeholder: placeholder || '',
+                                confirmText: confirmText || '',
+                                hint: hint || '',
+                                type,
+                                onConfirm: (value) => {
+                                    onConfirm === null || onConfirm === void 0 ? void 0 : onConfirm(editor, path, value);
+                                },
+                            });
+                        },
+                    },
+                    {
+                        icon: Trash,
+                        onClick: () => {
+                            Transforms.removeNodes(editor, { at: path });
+                        },
+                    },
+                ],
             },
         ] }))));
 };

package/embed/renderers/base/index.cjs.js

@@ -13,50 +13,58 @@ const BaseEmbedElement = ({ element, haveAlignConfig = true, type = 'input', pla
     const { setEmbedModalConfig } = react.useModal();
     const editor = react.useSlateStatic();
     const path = react.ReactEditor.findPath(editor, element);
-    return (React.createElement("div", { className: "qdr-embed" }, children(React.createElement(toolbar.InlineToolbar, { className: "qdr-embed__inline-toolbar", leftIcons: haveAlignConfig
-            ? [
-                {
-                    icon: icons.AlignLeft,
-                    onClick: () => {
-                        core.Transforms.setNodes(editor, { align: 'left' }, { at: path });
-                    },
-                    active: element.align === 'left' || !element.align,
-                },
-                {
-                    icon: icons.AlignCenter,
-                    onClick: () => {
-                        core.Transforms.setNodes(editor, { align: 'center' }, { at: path });
-                    },
-                    active: element.align === 'center',
-                },
-                {
-                    icon: icons.AlignRight,
-                    onClick: () => {
-                        core.Transforms.setNodes(editor, { align: 'right' }, { at: path });
-                    },
-                    active: element.align === 'right',
-                },
-            ]
-            : [], rightIcons: [
-            {
-                icon: icons.Edit,
-                onClick: () => {
-                    setEmbedModalConfig({
-                        placeholder: placeholder || '',
-                        confirmText: confirmText || '',
-                        hint: hint || '',
-                        type,
-                        onConfirm: (value) => {
-                            onConfirm === null || onConfirm === void 0 ? void 0 : onConfirm(editor, path, value);
+    return (React.createElement("div", { className: "qdr-embed" }, children(React.createElement(toolbar.InlineToolbar, { className: "qdr-embed__inline-toolbar", iconGroups: [
+            haveAlignConfig
+                ? {
+                    enabledBgColor: true,
+                    icons: [
+                        {
+                            icon: icons.AlignLeft,
+                            onClick: () => {
+                                core.Transforms.setNodes(editor, { align: 'left' }, { at: path });
+                            },
+                            active: element.align === 'left' || !element.align,
                         },
-                    });
-                },
-            },
+                        {
+                            icon: icons.AlignCenter,
+                            onClick: () => {
+                                core.Transforms.setNodes(editor, { align: 'center' }, { at: path });
+                            },
+                            active: element.align === 'center',
+                        },
+                        {
+                            icon: icons.AlignRight,
+                            onClick: () => {
+                                core.Transforms.setNodes(editor, { align: 'right' }, { at: path });
+                            },
+                            active: element.align === 'right',
+                        },
+                    ],
+                }
+                : { icons: [] },
             {
-                icon: icons.Trash,
-                onClick: () => {
-                    core.Transforms.removeNodes(editor, { at: path });
-                },
+                icons: [
+                    {
+                        icon: icons.Edit,
+                        onClick: () => {
+                            setEmbedModalConfig({
+                                placeholder: placeholder || '',
+                                confirmText: confirmText || '',
+                                hint: hint || '',
+                                type,
+                                onConfirm: (value) => {
+                                    onConfirm === null || onConfirm === void 0 ? void 0 : onConfirm(editor, path, value);
+                                },
+                            });
+                        },
+                    },
+                    {
+                        icon: icons.Trash,
+                        onClick: () => {
+                            core.Transforms.removeNodes(editor, { at: path });
+                        },
+                    },
+                ],
             },
         ] }))));
 };

package/image/components/Image.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Editor, Element, Transforms } from '@quadrats/core';
-import { Trash, AlignLeft, AlignCenter, AlignRight } from '@quadrats/icons';
+import { AlignLeft, AlignCenter, AlignRight, Trash } from '@quadrats/icons';
 import { useSlateStatic, ReactEditor } from '@quadrats/react';
 import { InlineToolbar } from '@quadrats/react/toolbar';
 
@@ -22,34 +22,42 @@ function Image(props) {
     return (React.createElement("div", Object.assign({}, attributes, { className: "qdr-image qdr-image--with-inline-toolbar", onClick: () => Transforms.select(editor, ReactEditor.findPath(editor, element)), onMouseDown: (event) => event.preventDefault(), role: "img" }),
         React.createElement("div", { className: "qdr-image__spacer" }, children),
         React.createElement("div", { contentEditable: false, style: { position: 'relative' } },
-            React.createElement(InlineToolbar, { className: "qdr-image__inline-toolbar", leftIcons: [
+            React.createElement(InlineToolbar, { className: "qdr-image__inline-toolbar", iconGroups: [
                     {
-                        icon: AlignLeft,
-                        onClick: () => {
-                            Transforms.setNodes(editor, { align: 'start' }, { at: parentPath });
-                        },
-                        active: parentNode.align === 'start' || !parentNode.align,
+                        enabledBgColor: true,
+                        icons: [
+                            {
+                                icon: AlignLeft,
+                                onClick: () => {
+                                    Transforms.setNodes(editor, { align: 'start' }, { at: parentPath });
+                                },
+                                active: parentNode.align === 'start' || !parentNode.align,
+                            },
+                            {
+                                icon: AlignCenter,
+                                onClick: () => {
+                                    Transforms.setNodes(editor, { align: 'center' }, { at: parentPath });
+                                },
+                                active: parentNode.align === 'center',
+                            },
+                            {
+                                icon: AlignRight,
+                                onClick: () => {
+                                    Transforms.setNodes(editor, { align: 'end' }, { at: parentPath });
+                                },
+                                active: parentNode.align === 'end',
+                            },
+                        ],
                     },
                     {
-                        icon: AlignCenter,
-                        onClick: () => {
-                            Transforms.setNodes(editor, { align: 'center' }, { at: parentPath });
-                        },
-                        active: parentNode.align === 'center',
-                    },
-                    {
-                        icon: AlignRight,
-                        onClick: () => {
-                            Transforms.setNodes(editor, { align: 'end' }, { at: parentPath });
-                        },
-                        active: parentNode.align === 'end',
-                    },
-                ], rightIcons: [
-                    {
-                        icon: Trash,
-                        onClick: () => {
-                            Transforms.removeNodes(editor, { at: parentPath });
-                        },
+                        icons: [
+                            {
+                                icon: Trash,
+                                onClick: () => {
+                                    Transforms.removeNodes(editor, { at: parentPath });
+                                },
+                            },
+                        ],
                     },
                 ] }),
             React.createElement("img", { 

package/image/createReactImage.js

@@ -101,7 +101,7 @@ function createReactImage(options = {}, getUploadOptions) {
                     })
                         .reduce((prev, imageFile) => __awaiter(this, void 0, void 0, function* () {
                         yield prev;
-                        return readFileAsDataURL(imageFile).then(dataURL => core.insertImage(editor, dataURL));
+                        return readFileAsDataURL(imageFile).then((dataURL) => core.insertImage(editor, dataURL));
                     }), Promise.resolve());
                     return;
                 }

package/image/index.cjs.js

@@ -41,34 +41,42 @@ function Image(props) {
     return (React.createElement("div", Object.assign({}, attributes, { className: "qdr-image qdr-image--with-inline-toolbar", onClick: () => core.Transforms.select(editor, react.ReactEditor.findPath(editor, element)), onMouseDown: (event) => event.preventDefault(), role: "img" }),
         React.createElement("div", { className: "qdr-image__spacer" }, children),
         React.createElement("div", { contentEditable: false, style: { position: 'relative' } },
-            React.createElement(toolbar.InlineToolbar, { className: "qdr-image__inline-toolbar", leftIcons: [
+            React.createElement(toolbar.InlineToolbar, { className: "qdr-image__inline-toolbar", iconGroups: [
                     {
-                        icon: icons.AlignLeft,
-                        onClick: () => {
-                            core.Transforms.setNodes(editor, { align: 'start' }, { at: parentPath });
-                        },
-                        active: parentNode.align === 'start' || !parentNode.align,
+                        enabledBgColor: true,
+                        icons: [
+                            {
+                                icon: icons.AlignLeft,
+                                onClick: () => {
+                                    core.Transforms.setNodes(editor, { align: 'start' }, { at: parentPath });
+                                },
+                                active: parentNode.align === 'start' || !parentNode.align,
+                            },
+                            {
+                                icon: icons.AlignCenter,
+                                onClick: () => {
+                                    core.Transforms.setNodes(editor, { align: 'center' }, { at: parentPath });
+                                },
+                                active: parentNode.align === 'center',
+                            },
+                            {
+                                icon: icons.AlignRight,
+                                onClick: () => {
+                                    core.Transforms.setNodes(editor, { align: 'end' }, { at: parentPath });
+                                },
+                                active: parentNode.align === 'end',
+                            },
+                        ],
                     },
                     {
-                        icon: icons.AlignCenter,
-                        onClick: () => {
-                            core.Transforms.setNodes(editor, { align: 'center' }, { at: parentPath });
-                        },
-                        active: parentNode.align === 'center',
-                    },
-                    {
-                        icon: icons.AlignRight,
-                        onClick: () => {
-                            core.Transforms.setNodes(editor, { align: 'end' }, { at: parentPath });
-                        },
-                        active: parentNode.align === 'end',
-                    },
-                ], rightIcons: [
-                    {
-                        icon: icons.Trash,
-                        onClick: () => {
-                            core.Transforms.removeNodes(editor, { at: parentPath });
-                        },
+                        icons: [
+                            {
+                                icon: icons.Trash,
+                                onClick: () => {
+                                    core.Transforms.removeNodes(editor, { at: parentPath });
+                                },
+                            },
+                        ],
                     },
                 ] }),
             React.createElement("img", { 
@@ -290,7 +298,7 @@ function createReactImage(options = {}, getUploadOptions) {
                     })
                         .reduce((prev, imageFile) => tslib.__awaiter(this, void 0, void 0, function* () {
                         yield prev;
-                        return utils.readFileAsDataURL(imageFile).then(dataURL => core$1.insertImage(editor, dataURL));
+                        return utils.readFileAsDataURL(imageFile).then((dataURL) => core$1.insertImage(editor, dataURL));
                     }), Promise.resolve());
                     return;
                 }

package/index.cjs.js

@@ -7,9 +7,9 @@ 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 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');
@@ -366,21 +366,20 @@ const CarouselModal = ({ isOpen, close, controller, initialValue = [], onConfirm
                 }, 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`))))))));
+        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 = [
@@ -601,8 +600,9 @@ 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(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 }, children))))));
 }
 
 function createEventHandler(editor, handlers) {

package/package.json

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

package/table/components/ColumnDragButton.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+interface ColumnDragButtonProps {
+    columnIndex: number;
+    style?: React.CSSProperties;
+    onClick: (e: React.MouseEvent) => void;
+    checkIsTitleColumn: (columnIndex: number) => boolean;
+}
+export declare const COLUMN_DRAG_TYPE = "TABLE_COLUMN";
+export declare const ColumnDragButton: React.FC<ColumnDragButtonProps>;
+export {};

package/table/components/ColumnDragButton.js

@@ -0,0 +1,41 @@
+import React, { useRef, useEffect } from 'react';
+import { useDrag } from 'react-dnd';
+import { getEmptyImage } from 'react-dnd-html5-backend';
+import clsx from 'clsx';
+import { Icon } from '@quadrats/react/components';
+import { Drag } from '@quadrats/icons';
+import { useTableDragContext } from '../contexts/TableDragContext.js';
+
+const COLUMN_DRAG_TYPE = 'TABLE_COLUMN';
+const ColumnDragButton = ({ columnIndex, style, onClick, checkIsTitleColumn, }) => {
+    const buttonRef = useRef(null);
+    const { setDragState, setDropTargetIndex, setDragDirection } = useTableDragContext();
+    const isTitle = checkIsTitleColumn(columnIndex);
+    const [{ isDragging }, drag, preview] = useDrag(() => ({
+        type: COLUMN_DRAG_TYPE,
+        item: () => {
+            const dragItem = { columnIndex, isTitle };
+            setDragState({ type: 'column', columnIndex, isTitle });
+            return dragItem;
+        },
+        collect: (monitor) => ({
+            isDragging: monitor.isDragging(),
+        }),
+        end: () => {
+            setDragState(null);
+            setDropTargetIndex(null);
+            setDragDirection(null);
+        },
+    }), [columnIndex, isTitle, setDragState, setDropTargetIndex, setDragDirection]);
+    // 使用空白圖片作為 drag preview，避免顯示預設的拖曳圖像
+    useEffect(() => {
+        preview(getEmptyImage(), { captureDraggingState: true });
+    }, [preview]);
+    drag(buttonRef);
+    return (React.createElement("button", { ref: buttonRef, type: "button", contentEditable: false, style: style, onClick: onClick, title: "\u9EDE\u64CA\u958B\u555F\u9078\u55AE\uFF0C\u62D6\u66F3\u4EE5\u79FB\u52D5", className: clsx('qdr-table__cell-column-action', {
+            'qdr-table__cell-column-action--dragging': isDragging,
+        }) },
+        React.createElement(Icon, { icon: Drag, width: 20, height: 20 })));
+};
+
+export { COLUMN_DRAG_TYPE, ColumnDragButton };

package/table/components/RowDragButton.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+interface RowDragButtonProps {
+    rowIndex: number;
+    headerRowCount: number;
+    style?: React.CSSProperties;
+    onClick: (e: React.MouseEvent) => void;
+}
+export declare const ROW_DRAG_TYPE = "TABLE_ROW";
+export declare const RowDragButton: React.FC<RowDragButtonProps>;
+export {};

package/table/components/RowDragButton.js

@@ -0,0 +1,42 @@
+import React, { useRef, useEffect } from 'react';
+import { useDrag } from 'react-dnd';
+import { getEmptyImage } from 'react-dnd-html5-backend';
+import clsx from 'clsx';
+import { Icon } from '@quadrats/react/components';
+import { Drag } from '@quadrats/icons';
+import { useTableDragContext } from '../contexts/TableDragContext.js';
+
+const ROW_DRAG_TYPE = 'TABLE_ROW';
+const RowDragButton = ({ rowIndex, headerRowCount, style, onClick }) => {
+    const buttonRef = useRef(null);
+    const { setDragState, setDropTargetIndex, setDragDirection } = useTableDragContext();
+    // 判斷當前 row 是否在 header 中
+    const isInHeader = rowIndex < headerRowCount;
+    const [{ isDragging }, drag, preview] = useDrag(() => ({
+        type: ROW_DRAG_TYPE,
+        item: () => {
+            const dragItem = { rowIndex, isInHeader };
+            setDragState({ type: 'row', rowIndex, isInHeader });
+            return dragItem;
+        },
+        collect: (monitor) => ({
+            isDragging: monitor.isDragging(),
+        }),
+        end: () => {
+            setDragState(null);
+            setDropTargetIndex(null);
+            setDragDirection(null);
+        },
+    }), [rowIndex, isInHeader, setDragState, setDropTargetIndex, setDragDirection]);
+    // 使用空白圖片作為 drag preview，避免顯示預設的拖曳圖像
+    useEffect(() => {
+        preview(getEmptyImage(), { captureDraggingState: true });
+    }, [preview]);
+    drag(buttonRef);
+    return (React.createElement("button", { ref: buttonRef, type: "button", contentEditable: false, style: style, onClick: onClick, title: "\u9EDE\u64CA\u958B\u555F\u9078\u55AE\uFF0C\u62D6\u66F3\u4EE5\u79FB\u52D5", className: clsx('qdr-table__cell-row-action', {
+            'qdr-table__cell-row-action--dragging': isDragging,
+        }) },
+        React.createElement(Icon, { icon: Drag, width: 20, height: 20 })));
+};
+
+export { ROW_DRAG_TYPE, RowDragButton };

package/table/components/Table.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { RenderElementProps } from '@quadrats/react';
+import { RenderTableElementProps } from '../typings';
+declare function Table({ attributes, children, element, }: {
+    attributes?: RenderElementProps['attributes'];
+    children: RenderElementProps['children'];
+    element: RenderTableElementProps['element'];
+}): React.JSX.Element;
+export default Table;