@quadrats/react 1.1.0 → 1.1.2

package/core/components/Quadrats.js

@@ -1,5 +1,7 @@
 import React from 'react';
 import { Slate } from 'slate-react';
+import { DndProvider } from 'react-dnd';
+import { HTML5Backend } from 'react-dnd-html5-backend';
 import { ConfigsProvider } from '@quadrats/react/configs';
 import { ModalProvider } from '../contexts/modal/ModalProvider.js';
 import { MessageProvider } from '../contexts/message/MessageProvider.js';
@@ -11,8 +13,9 @@ 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(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 }, children))))));
 }
 
 export { Quadrats as default };

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

@@ -1,8 +1,6 @@
 import { __awaiter } from 'tslib';
 import React, { useState, useEffect, useMemo, useCallback } from 'react';
 import clsx from 'clsx';
-import { HTML5Backend } from 'react-dnd-html5-backend';
-import { DndProvider } from 'react-dnd';
 import { Plus, Upload } from '@quadrats/icons';
 import { usePreviousValue, readFileAsBase64, upload } from '@quadrats/react/utils';
 import { useSlateStatic } from 'slate-react';
@@ -154,21 +152,20 @@ const CarouselModal = ({ isOpen, close, controller, initialValue = [], onConfirm
                 }, 0);
             }
         } },
-        React.createElement(DndProvider, { backend: 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(Icon, { icon: 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(Icon, { icon: 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`)))))));
 };
 
 export { CarouselModal };

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.1.0",
+  "version": "1.1.2",
   "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.1.0",
+    "@quadrats/common": "^1.1.1",
     "@quadrats/core": "^1.1.0",
-    "@quadrats/icons": "^1.1.0",
+    "@quadrats/icons": "^1.1.1",
     "@quadrats/locales": "^1.0.0",
     "@quadrats/theme": "^1.0.0",
     "@quadrats/utils": "^1.0.0",
@@ -30,8 +30,8 @@
     "@types/react-transition-group": "^4.4.9",
     "clsx": "^2.1.1",
     "is-hotkey": "^0.2.0",
-    "react-dnd": "^16.0.1",
-    "react-dnd-html5-backend": "^16.0.1",
+    "react-dnd": "^15.1.2",
+    "react-dnd-html5-backend": "^15.1.2",
     "react-transition-group": "^4.4.5",
     "slate-dom": "^0.112.2",
     "slate-react": "^0.112.1",

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.js

@@ -3,6 +3,7 @@ import { Element } from '@quadrats/core';
 import { TableActionsContext } from '../contexts/TableActionsContext.js';
 import { TableMetadataContext } from '../contexts/TableMetadataContext.js';
 import { TableStateContext } from '../contexts/TableStateContext.js';
+import { TableDragProvider } from '../contexts/TableDragContext.js';
 import { TABLE_ROW_TYPE, TABLE_CELL_TYPE, TABLE_DEFAULT_MAX_COLUMNS, TABLE_DEFAULT_MAX_ROWS } from '@quadrats/common/table';
 import { useTableActions } from '../hooks/useTableActions.js';
 import { Icon } from '@quadrats/react/components';
@@ -11,10 +12,9 @@ import { useTableStates } from '../hooks/useTableStates.js';
 import { getTableElements } from '../utils/helper.js';
 
 function Table({ attributes, children, element, }) {
-    const { addColumn, addRow, addColumnAndRow, deleteRow, deleteColumn, moveRowToBody, moveRowToHeader, unsetColumnAsTitle, setColumnAsTitle, pinColumn, pinRow, unpinColumn, unpinRow, } = useTableActions(element);
+    const { addColumn, addRow, addColumnAndRow, deleteRow, deleteColumn, moveRowToBody, moveRowToHeader, unsetColumnAsTitle, setColumnAsTitle, pinColumn, pinRow, unpinColumn, unpinRow, moveOrSwapRow, moveOrSwapColumn, } = useTableActions(element);
     const { tableSelectedOn, setTableSelectedOn, tableHoveredOn, setTableHoveredOn } = useTableStates();
     const portalContainerRef = useRef(null);
-    // 優化表格結構計算 - 使用 getTableElements 重用邏輯
     const { columnCount, rowCount, normalCols, bodyCount, tableElements } = useMemo(() => {
         const elements = getTableElements(element);
         if (!elements.tableMainElement) {
@@ -161,6 +161,8 @@ function Table({ attributes, children, element, }) {
         pinRow,
         unpinColumn,
         unpinRow,
+        moveOrSwapRow,
+        moveOrSwapColumn,
     }), [
         addColumn,
         addRow,
@@ -175,6 +177,8 @@ function Table({ attributes, children, element, }) {
         pinRow,
         unpinColumn,
         unpinRow,
+        moveOrSwapRow,
+        moveOrSwapColumn,
     ]);
     const metadataValue = useMemo(() => ({
         tableElement: element,
@@ -211,21 +215,22 @@ function Table({ attributes, children, element, }) {
         tableHoveredOn,
         setTableHoveredOn,
     }), [tableSelectedOn, setTableSelectedOn, tableHoveredOn, setTableHoveredOn]);
-    return (React.createElement(TableActionsContext.Provider, { value: actionsValue },
-        React.createElement(TableMetadataContext.Provider, { value: metadataValue },
-            React.createElement(TableStateContext.Provider, { value: stateValue },
-                React.createElement("div", Object.assign({}, attributes, { className: "qdr-table" }),
-                    children,
-                    React.createElement("button", { type: "button", onClick: (evt) => {
-                            evt.preventDefault();
-                            evt.stopPropagation();
-                            setTableSelectedOn((prev) => ((prev === null || prev === void 0 ? void 0 : prev.region) === 'table' ? undefined : { region: 'table' }));
-                        }, onMouseDown: (evt) => {
-                            evt.preventDefault();
-                            evt.stopPropagation();
-                        }, className: "qdr-table__selection", title: (tableSelectedOn === null || tableSelectedOn === void 0 ? void 0 : tableSelectedOn.region) === 'table' ? 'Deselect Table' : 'Select Table' },
-                        React.createElement(Icon, { icon: Drag, width: 20, height: 20 })),
-                    React.createElement("div", { ref: portalContainerRef, className: "qdr-table__portal-container", "data-slate-editor": false, contentEditable: false }))))));
+    return (React.createElement(TableDragProvider, null,
+        React.createElement(TableActionsContext.Provider, { value: actionsValue },
+            React.createElement(TableMetadataContext.Provider, { value: metadataValue },
+                React.createElement(TableStateContext.Provider, { value: stateValue },
+                    React.createElement("div", Object.assign({}, attributes, { className: "qdr-table" }),
+                        children,
+                        React.createElement("button", { type: "button", onClick: (evt) => {
+                                evt.preventDefault();
+                                evt.stopPropagation();
+                                setTableSelectedOn((prev) => ((prev === null || prev === void 0 ? void 0 : prev.region) === 'table' ? undefined : { region: 'table' }));
+                            }, onMouseDown: (evt) => {
+                                evt.preventDefault();
+                                evt.stopPropagation();
+                            }, className: "qdr-table__selection", title: (tableSelectedOn === null || tableSelectedOn === void 0 ? void 0 : tableSelectedOn.region) === 'table' ? 'Deselect Table' : 'Select Table' },
+                            React.createElement(Icon, { icon: Drag, width: 20, height: 20 })),
+                        React.createElement("div", { ref: portalContainerRef, className: "qdr-table__portal-container", "data-slate-editor": false, contentEditable: false })))))));
 }
 
 export { Table as default };

package/table/components/TableCell.js

@@ -1,10 +1,10 @@
-import React, { useContext, useMemo, useRef, useState, useEffect } from 'react';
+import React, { useContext, useCallback, useMemo, useRef, useState, useEffect } from 'react';
 import clsx from 'clsx';
-import { Transforms } from '@quadrats/core';
+import { Element, Transforms } from '@quadrats/core';
 import { useSlateStatic } from 'slate-react';
+import { useDrop } from 'react-dnd';
 import { TableHeaderContext } from '../contexts/TableHeaderContext.js';
-import { Portal, Icon } from '@quadrats/react/components';
-import { Drag } from '@quadrats/icons';
+import { Portal } from '@quadrats/react/components';
 import { useTableMetadata } from '../hooks/useTableMetadata.js';
 import { useTableStateContext } from '../hooks/useTableStateContext.js';
 import { InlineToolbar } from '@quadrats/react/toolbar';
@@ -12,12 +12,19 @@ import { useTableCellFocused, useTableCellPosition, useTableCellTransformContent
 import { useTableCellToolbarActions } from '../hooks/useTableCellToolbarActions.js';
 import { TableScrollContext } from '../contexts/TableScrollContext.js';
 import { useColumnResize } from '../hooks/useColumnResize.js';
+import { useTableActionsContext } from '../hooks/useTableActionsContext.js';
+import { useTableDragContext } from '../contexts/TableDragContext.js';
+import { ROW_DRAG_TYPE, RowDragButton } from './RowDragButton.js';
+import { COLUMN_DRAG_TYPE, ColumnDragButton } from './ColumnDragButton.js';
+import { getTableElements } from '../utils/helper.js';
 
 function TableCell(props) {
-    var _a;
+    var _a, _b;
     const { attributes, children, element } = props;
     const { tableSelectedOn, setTableSelectedOn, tableHoveredOn, setTableHoveredOn } = useTableStateContext();
     const { columnCount, rowCount, portalContainerRef, isColumnPinned, tableElement } = useTableMetadata();
+    const { moveOrSwapRow, moveOrSwapColumn } = useTableActionsContext();
+    const { dragState, dropTargetIndex, setDropTargetIndex, dragDirection, setDragDirection } = useTableDragContext();
     // Component context
     const { isHeader } = useContext(TableHeaderContext);
     const { scrollTop, scrollLeft, scrollRef } = useContext(TableScrollContext);
@@ -26,6 +33,20 @@ function TableCell(props) {
     const focused = useTableCellFocused(element, editor);
     const cellPosition = useTableCellPosition(element);
     const transformCellContent = useTableCellTransformContent(element, editor);
+    // Get header row count from table structure
+    const tableElements = getTableElements(tableElement);
+    const headerRowCount = ((_a = tableElements.tableHeaderElement) === null || _a === void 0 ? void 0 : _a.children.length) || 0;
+    // Helper to check if column is title column
+    const checkIsTitleColumn = useCallback((colIndex) => {
+        const elements = getTableElements(tableElement);
+        if (!elements.tableBodyElement)
+            return false;
+        const firstRow = elements.tableBodyElement.children[0];
+        if (!Element.isElement(firstRow))
+            return false;
+        const cell = firstRow.children[colIndex];
+        return Element.isElement(cell) && !!cell.treatAsTitle;
+    }, [tableElement]);
     // Toolbar actions
     const { focusToolbarIconGroups, inlineToolbarIconGroups } = useTableCellToolbarActions({
         element,
@@ -35,10 +56,13 @@ function TableCell(props) {
     });
     const isSelectedInSameRow = (tableSelectedOn === null || tableSelectedOn === void 0 ? void 0 : tableSelectedOn.region) === 'row' && (tableSelectedOn === null || tableSelectedOn === void 0 ? void 0 : tableSelectedOn.index) === cellPosition.rowIndex;
     const isSelectedInSameColumn = (tableSelectedOn === null || tableSelectedOn === void 0 ? void 0 : tableSelectedOn.region) === 'column' && (tableSelectedOn === null || tableSelectedOn === void 0 ? void 0 : tableSelectedOn.index) === cellPosition.columnIndex;
+    // 判斷是否為正在被拖曳的 row/column
+    const isDraggingThisRow = (dragState === null || dragState === void 0 ? void 0 : dragState.type) === 'row' && dragState.rowIndex === cellPosition.rowIndex;
+    const isDraggingThisColumn = (dragState === null || dragState === void 0 ? void 0 : dragState.type) === 'column' && dragState.columnIndex === cellPosition.columnIndex;
     const isSelectionTriggerByMe = (isSelectedInSameRow && cellPosition.columnIndex === 0) || (isSelectedInSameColumn && cellPosition.rowIndex === 0);
-    const showRowActionButton = useMemo(() => cellPosition.rowIndex === 0 &&
+    const showColumnActionButton = useMemo(() => cellPosition.rowIndex === 0 &&
         (isSelectedInSameColumn || ((tableHoveredOn === null || tableHoveredOn === void 0 ? void 0 : tableHoveredOn.columnIndex) === cellPosition.columnIndex && !tableSelectedOn)), [cellPosition, isSelectedInSameColumn, tableHoveredOn, tableSelectedOn]);
-    const showColumnActionButton = useMemo(() => cellPosition.columnIndex === 0 &&
+    const showRowActionButton = useMemo(() => cellPosition.columnIndex === 0 &&
         (isSelectedInSameRow || ((tableHoveredOn === null || tableHoveredOn === void 0 ? void 0 : tableHoveredOn.rowIndex) === cellPosition.rowIndex && !tableSelectedOn)), [cellPosition, isSelectedInSameRow, tableHoveredOn, tableSelectedOn]);
     // 用於定位 InlineToolbar 的 ref
     const cellRef = useRef(null);
@@ -46,6 +70,64 @@ function TableCell(props) {
     const [rowButtonPosition, setRowButtonPosition] = useState(null);
     const [columnButtonPosition, setColumnButtonPosition] = useState(null);
     const [cellStuckAtLeft, setCellStuckAtLeft] = useState(undefined);
+    const [, dropRow] = useDrop(() => ({
+        accept: ROW_DRAG_TYPE,
+        canDrop: (item) => {
+            if (!dragState || dragState.type !== 'row')
+                return false;
+            if (item.rowIndex === cellPosition.rowIndex)
+                return false;
+            const sourceInHeader = item.isInHeader;
+            const targetInHeader = cellPosition.rowIndex < headerRowCount;
+            return sourceInHeader === targetInHeader;
+        },
+        hover: (item, monitor) => {
+            if (!monitor.canDrop()) {
+                setDropTargetIndex(null);
+                setDragDirection(null);
+                return;
+            }
+            const direction = item.rowIndex < cellPosition.rowIndex ? 'down' : 'up';
+            setDropTargetIndex(cellPosition.rowIndex);
+            setDragDirection(direction);
+        },
+        drop: (item) => {
+            moveOrSwapRow(item.rowIndex, cellPosition.rowIndex, 'move');
+            setDropTargetIndex(null);
+            setDragDirection(null);
+        },
+    }), [dragState, cellPosition.rowIndex, headerRowCount, moveOrSwapRow, setDropTargetIndex, setDragDirection]);
+    // Drop target logic for columns
+    const [, dropColumn] = useDrop(() => ({
+        accept: COLUMN_DRAG_TYPE,
+        canDrop: (item) => {
+            if (!dragState || dragState.type !== 'column')
+                return false;
+            if (item.columnIndex === cellPosition.columnIndex)
+                return false;
+            const sourceIsTitle = item.isTitle;
+            const targetIsTitle = checkIsTitleColumn(cellPosition.columnIndex);
+            return sourceIsTitle === targetIsTitle;
+        },
+        hover: (item, monitor) => {
+            if (!monitor.canDrop()) {
+                setDropTargetIndex(null);
+                setDragDirection(null);
+                return;
+            }
+            // 計算拖曳方向
+            const direction = item.columnIndex < cellPosition.columnIndex ? 'right' : 'left';
+            setDropTargetIndex(cellPosition.columnIndex);
+            setDragDirection(direction);
+        },
+        drop: (item) => {
+            moveOrSwapColumn(item.columnIndex, cellPosition.columnIndex, 'move');
+            setDropTargetIndex(null);
+            setDragDirection(null);
+        },
+    }), [dragState, cellPosition.columnIndex, checkIsTitleColumn, moveOrSwapColumn, setDropTargetIndex, setDragDirection]);
+    // Combine refs
+    dropRow(dropColumn(cellRef));
     // Column resize
     const { isResizing, handleResizeStart } = useColumnResize({
         tableElement,
@@ -125,12 +207,40 @@ function TableCell(props) {
         }, className: clsx('qdr-table__cell', {
             'qdr-table__cell--header': isHeader || element.treatAsTitle,
             'qdr-table__cell--pinned': myColumnIsPinned,
-            'qdr-table__cell--top-active': isSelectedInSameRow || (isSelectedInSameColumn && cellPosition.rowIndex === 0),
-            'qdr-table__cell--right-active': isSelectedInSameColumn || (isSelectedInSameRow && cellPosition.columnIndex === columnCount - 1),
-            'qdr-table__cell--bottom-active': isSelectedInSameRow || (isSelectedInSameColumn && cellPosition.rowIndex === rowCount - 1),
-            'qdr-table__cell--left-active': isSelectedInSameColumn || (isSelectedInSameRow && cellPosition.columnIndex === 0),
+            'qdr-table__cell--top-active': isSelectedInSameRow ||
+                (isSelectedInSameColumn && cellPosition.rowIndex === 0) ||
+                isDraggingThisRow ||
+                (isDraggingThisColumn && cellPosition.rowIndex === 0),
+            'qdr-table__cell--right-active': isSelectedInSameColumn ||
+                (isSelectedInSameRow && cellPosition.columnIndex === columnCount - 1) ||
+                isDraggingThisColumn ||
+                (isDraggingThisRow && cellPosition.columnIndex === columnCount - 1),
+            'qdr-table__cell--bottom-active': isSelectedInSameRow ||
+                (isSelectedInSameColumn && cellPosition.rowIndex === rowCount - 1) ||
+                isDraggingThisRow ||
+                (isDraggingThisColumn && cellPosition.rowIndex === rowCount - 1),
+            'qdr-table__cell--left-active': isSelectedInSameColumn ||
+                (isSelectedInSameRow && cellPosition.columnIndex === 0) ||
+                isDraggingThisColumn ||
+                (isDraggingThisRow && cellPosition.columnIndex === 0),
             'qdr-table__cell--is-selection-trigger-by-me': isSelectionTriggerByMe,
-        }), style: myColumnIsPinned
+            'qdr-table__cell--drag-row-target-top': (dragState === null || dragState === void 0 ? void 0 : dragState.type) === 'row' &&
+                dropTargetIndex === cellPosition.rowIndex &&
+                dropTargetIndex !== dragState.rowIndex &&
+                dragDirection === 'up',
+            'qdr-table__cell--drag-row-target-bottom': (dragState === null || dragState === void 0 ? void 0 : dragState.type) === 'row' &&
+                dropTargetIndex === cellPosition.rowIndex &&
+                dropTargetIndex !== dragState.rowIndex &&
+                dragDirection === 'down',
+            'qdr-table__cell--drag-column-target-left': (dragState === null || dragState === void 0 ? void 0 : dragState.type) === 'column' &&
+                dropTargetIndex === cellPosition.columnIndex &&
+                dropTargetIndex !== dragState.columnIndex &&
+                dragDirection === 'left',
+            'qdr-table__cell--drag-column-target-right': (dragState === null || dragState === void 0 ? void 0 : dragState.type) === 'column' &&
+                dropTargetIndex === cellPosition.columnIndex &&
+                dropTargetIndex !== dragState.columnIndex &&
+                dragDirection === 'right',
+        }), "data-row-index": cellPosition.rowIndex, "data-column-index": cellPosition.columnIndex, style: myColumnIsPinned
             ? {
                 left: cellStuckAtLeft,
             }
@@ -144,14 +254,13 @@ function TableCell(props) {
                     top: toolbarPosition === null || toolbarPosition === void 0 ? void 0 : toolbarPosition.top,
                     left: toolbarPosition === null || toolbarPosition === void 0 ? void 0 : toolbarPosition.left,
                 }, iconGroups: focusToolbarIconGroups }))),
-        showColumnActionButton && (React.createElement(Portal, { getContainer: () => portalContainerRef.current || document.body },
-            React.createElement("button", { type: "button", contentEditable: false, style: {
+        showRowActionButton && (React.createElement(Portal, { getContainer: () => portalContainerRef.current || document.body },
+            React.createElement(RowDragButton, { rowIndex: cellPosition.rowIndex, headerRowCount: headerRowCount, style: {
                     top: rowButtonPosition === null || rowButtonPosition === void 0 ? void 0 : rowButtonPosition.top,
                     left: rowButtonPosition === null || rowButtonPosition === void 0 ? void 0 : rowButtonPosition.left,
                 }, onClick: (e) => {
                     e.preventDefault();
                     e.stopPropagation();
-                    // Clear focus by removing selection
                     Transforms.deselect(editor);
                     setTableSelectedOn((prev) => {
                         if ((prev === null || prev === void 0 ? void 0 : prev.region) === 'row' && prev.index === cellPosition.rowIndex) {
@@ -159,17 +268,15 @@ function TableCell(props) {
                         }
                         return { region: 'row', index: cellPosition.rowIndex };
                     });
-                }, className: "qdr-table__cell-row-action" },
-                React.createElement(Icon, { icon: Drag, width: 20, height: 20 })))),
-        showRowActionButton && (React.createElement(Portal, { getContainer: () => portalContainerRef.current || document.body },
-            React.createElement("button", { type: "button", contentEditable: false, style: {
+                } }))),
+        showColumnActionButton && (React.createElement(Portal, { getContainer: () => portalContainerRef.current || document.body },
+            React.createElement(ColumnDragButton, { columnIndex: cellPosition.columnIndex, style: {
                     // pinned 時因為 sticky 所以要扣掉 scrollTop
-                    top: ((_a = columnButtonPosition === null || columnButtonPosition === void 0 ? void 0 : columnButtonPosition.top) !== null && _a !== void 0 ? _a : 0) - (element.pinned ? scrollTop : 0),
+                    top: ((_b = columnButtonPosition === null || columnButtonPosition === void 0 ? void 0 : columnButtonPosition.top) !== null && _b !== void 0 ? _b : 0) - (element.pinned ? scrollTop : 0),
                     left: columnButtonPosition === null || columnButtonPosition === void 0 ? void 0 : columnButtonPosition.left,
                 }, onClick: (e) => {
                     e.preventDefault();
                     e.stopPropagation();
-                    // Clear focus by removing selection
                     Transforms.deselect(editor);
                     setTableSelectedOn((prev) => {
                         if ((prev === null || prev === void 0 ? void 0 : prev.region) === 'column' && prev.index === cellPosition.columnIndex) {
@@ -177,8 +284,7 @@ function TableCell(props) {
                         }
                         return { region: 'column', index: cellPosition.columnIndex };
                     });
-                }, className: "qdr-table__cell-column-action" },
-                React.createElement(Icon, { icon: Drag, width: 20, height: 20 })))),
+                }, checkIsTitleColumn: checkIsTitleColumn }))),
         isSelectionTriggerByMe && (cellPosition.columnIndex === 0 || cellPosition.rowIndex === 0) ? (React.createElement(Portal, { getContainer: () => portalContainerRef.current || document.body },
             React.createElement(InlineToolbar, { className: "qdr-table__cell__inline-table-toolbar", style: {
                     top: toolbarPosition === null || toolbarPosition === void 0 ? void 0 : toolbarPosition.top,

package/table/components/TableDragLayer.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+interface DragLayerProps {
+    scrollRef: React.RefObject<HTMLDivElement | null>;
+}
+export declare const TableDragLayer: React.FC<DragLayerProps>;
+export {};