@quadrats/react 1.1.0 → 1.1.2

package/table/components/TableDragLayer.js

@@ -0,0 +1,89 @@
+import React, { useState, useEffect } from 'react';
+import { useDragLayer } from 'react-dnd';
+import { useTableDragContext } from '../contexts/TableDragContext.js';
+
+const TableDragLayer = ({ scrollRef }) => {
+    const { dragState } = useTableDragContext();
+    const [columnWidths, setColumnWidths] = useState([]);
+    const [rowHeights, setRowHeights] = useState([]);
+    const { isDragging, currentOffset } = useDragLayer((monitor) => ({
+        isDragging: monitor.isDragging(),
+        currentOffset: monitor.getClientOffset(),
+    }));
+    // 計算所有 column 的寬度和 row 的高度
+    useEffect(() => {
+        if (!scrollRef.current || !isDragging)
+            return;
+        const tableContainer = scrollRef.current;
+        const cells = tableContainer.querySelectorAll('.qdr-table__cell');
+        if ((dragState === null || dragState === void 0 ? void 0 : dragState.type) === 'column') {
+            // 計算每個 column 的寬度
+            const widths = [];
+            const columnCells = Array.from(cells).filter((cell) => {
+                const cellElement = cell;
+                return cellElement.dataset.columnIndex !== undefined;
+            });
+            const columnCount = Math.max(...columnCells.map((cell) => {
+                const cellElement = cell;
+                return parseInt(cellElement.dataset.columnIndex || '0', 10);
+            })) + 1;
+            for (let i = 0; i < columnCount; i++) {
+                const cellsInColumn = columnCells.filter((cell) => {
+                    const cellElement = cell;
+                    return parseInt(cellElement.dataset.columnIndex || '0', 10) === i;
+                });
+                if (cellsInColumn.length > 0) {
+                    const firstCell = cellsInColumn[0];
+                    widths[i] = firstCell.getBoundingClientRect().width;
+                }
+            }
+            setColumnWidths(widths);
+        }
+        else if ((dragState === null || dragState === void 0 ? void 0 : dragState.type) === 'row') {
+            // 計算每個 row 的高度
+            const heights = [];
+            const rowCells = Array.from(cells).filter((cell) => {
+                const cellElement = cell;
+                return cellElement.dataset.rowIndex !== undefined;
+            });
+            const rowCount = Math.max(...rowCells.map((cell) => {
+                const cellElement = cell;
+                return parseInt(cellElement.dataset.rowIndex || '0', 10);
+            })) + 1;
+            for (let i = 0; i < rowCount; i++) {
+                const cellsInRow = rowCells.filter((cell) => {
+                    const cellElement = cell;
+                    return parseInt(cellElement.dataset.rowIndex || '0', 10) === i;
+                });
+                if (cellsInRow.length > 0) {
+                    const firstCell = cellsInRow[0];
+                    heights[i] = firstCell.getBoundingClientRect().height;
+                }
+            }
+            setRowHeights(heights);
+        }
+    }, [isDragging, dragState, scrollRef]);
+    if (!isDragging || !dragState || !currentOffset || !scrollRef.current) {
+        return null;
+    }
+    const tableContainer = scrollRef.current;
+    const tableRect = tableContainer.getBoundingClientRect();
+    if (dragState.type) {
+        const sourceIndex = dragState.type === 'column' ? dragState.columnIndex : dragState.rowIndex;
+        const rowHeight = dragState.type === 'column' ? tableRect.height : rowHeights[sourceIndex];
+        const columnWidth = dragState.type === 'column' ? columnWidths[sourceIndex] : tableRect.width;
+        return (React.createElement("div", { className: "qdr-table__drag-overlay", style: {
+                left: tableRect.left,
+                top: tableRect.top,
+                width: columnWidth,
+                height: rowHeight,
+                transform: dragState.type === 'column'
+                    ? `translateX(${currentOffset.x - tableRect.left - columnWidth / 2}px)`
+                    : `translateY(${currentOffset.y - tableRect.top - rowHeight / 2}px)`,
+            } },
+            React.createElement("div", { className: "qdr-table__drag-overlay-content" })));
+    }
+    return null;
+};
+
+export { TableDragLayer };

package/table/components/TableMain.js

@@ -2,16 +2,18 @@ import React, { useRef, useState, useMemo, useEffect, useCallback } from 'react'
 import clsx from 'clsx';
 import { useModal, useSlateStatic, ReactEditor } from '@quadrats/react';
 import { Icon } from '@quadrats/react/components';
-import { Copy, Trash, AlignLeft, AlignCenter, AlignRight, Plus } from '@quadrats/icons';
+import { AlignLeft, AlignRight, AlignCenter, Copy, Trash, Plus } from '@quadrats/icons';
 import { useTableActionsContext } from '../hooks/useTableActionsContext.js';
 import { useTableMetadata } from '../hooks/useTableMetadata.js';
 import { useTableStateContext } from '../hooks/useTableStateContext.js';
+import { useTableDragContext } from '../contexts/TableDragContext.js';
 import { InlineToolbar, ToolbarGroupIcon, ToolbarIcon } from '@quadrats/react/toolbar';
 import { Transforms } from 'slate';
 import { calculateTableMinWidth, columnWidthToCSS } from '@quadrats/common/table';
 import { TableScrollContext } from '../contexts/TableScrollContext.js';
 import { useTableCellAlign, useTableCellAlignStatus } from '../hooks/useTableCell.js';
 import { getTableElements, getColumnWidths } from '../utils/helper.js';
+import { TableDragLayer } from './TableDragLayer.js';
 
 function TableMain(props) {
     const { attributes, children } = props;
@@ -20,6 +22,7 @@ function TableMain(props) {
     const { addColumn, addRow, addColumnAndRow } = useTableActionsContext();
     const { isReachMaximumColumns, isReachMaximumRows, tableElement } = useTableMetadata();
     const { tableSelectedOn, setTableSelectedOn } = useTableStateContext();
+    const { dragState } = useTableDragContext();
     // Table align functions
     const setAlign = useTableCellAlign(tableElement, editor);
     const getAlign = useTableCellAlignStatus(tableElement, editor);
@@ -63,10 +66,14 @@ function TableMain(props) {
         const handleScroll = () => {
             setScrollTop(scrollContainer.scrollTop);
             setScrollLeft(scrollContainer.scrollLeft);
-            // 如果正在程式化更新滾動位置，不要觸發 Slate 更新
+            // 如果正在更新滾動位置，不要觸發 Slate 更新
             if (isUpdatingScrollRef.current) {
                 return;
             }
+            // 如果正在拖曳，不要觸發 Slate 更新（避免 transform 導致事件遺失）
+            if (dragState) {
+                return;
+            }
             // 使用 debounce 來減少 Slate 更新頻率
             if (scrollUpdateTimerRef.current) {
                 clearTimeout(scrollUpdateTimerRef.current);
@@ -89,7 +96,7 @@ function TableMain(props) {
                 clearTimeout(scrollUpdateTimerRef.current);
             }
         };
-    }, [editor, tableElement]);
+    }, [editor, tableElement, dragState]);
     // 只在 columnWidths 改變時恢復滾動位置
     useEffect(() => {
         const { current: scrollContainer } = scrollRef;
@@ -133,7 +140,7 @@ function TableMain(props) {
     // 獲取當前 table 的 align 狀態
     const currentTableAlign = getAlign('table');
     // 根據當前 table align 狀態選擇對應的 icon
-    const getCurrentTableAlignIcon = () => {
+    const getCurrentTableAlignIcon = useCallback(() => {
         switch (currentTableAlign) {
             case 'left':
                 return AlignLeft;
@@ -144,7 +151,7 @@ function TableMain(props) {
             default:
                 return AlignLeft;
         }
-    };
+    }, [currentTableAlign]);
     return (React.createElement("div", { className: clsx('qdr-table__mainWrapper', {
             'qdr-table__mainWrapper--selected': (tableSelectedOn === null || tableSelectedOn === void 0 ? void 0 : tableSelectedOn.region) === 'table',
         }) },
@@ -206,7 +213,8 @@ function TableMain(props) {
                             width: columnWidthToCSS(width),
                             minWidth: columnWidthToCSS(width),
                         } })))),
-                    children))),
+                    children)),
+            React.createElement(TableDragLayer, { scrollRef: scrollRef })),
         React.createElement("div", { className: "qdr-table__size-indicators" }, firstRowCells === null || firstRowCells === void 0 ? void 0 : firstRowCells.map((cell, colIndex) => (React.createElement("div", { key: colIndex, className: "qdr-table__size-indicator", style: {
                 width: columnWidthToCSS(columnWidths[colIndex]),
                 minWidth: columnWidthToCSS(columnWidths[colIndex]),

package/table/contexts/TableActionsContext.d.ts

@@ -1,3 +1,3 @@
 import { TableContextType } from '../typings';
-export type TableActionsContextType = Pick<TableContextType, 'addColumn' | 'addRow' | 'addColumnAndRow' | 'deleteRow' | 'deleteColumn' | 'moveRowToBody' | 'moveRowToHeader' | 'unsetColumnAsTitle' | 'setColumnAsTitle' | 'pinColumn' | 'unpinColumn' | 'pinRow' | 'unpinRow'>;
+export type TableActionsContextType = Pick<TableContextType, 'addColumn' | 'addRow' | 'addColumnAndRow' | 'deleteRow' | 'deleteColumn' | 'moveRowToBody' | 'moveRowToHeader' | 'unsetColumnAsTitle' | 'setColumnAsTitle' | 'pinColumn' | 'unpinColumn' | 'pinRow' | 'unpinRow' | 'moveOrSwapRow' | 'moveOrSwapColumn'>;
 export declare const TableActionsContext: import("react").Context<TableActionsContextType | undefined>;

package/table/contexts/TableDragContext.d.ts

@@ -0,0 +1,26 @@
+import React, { Dispatch, SetStateAction } from 'react';
+interface RowDragState {
+    type: 'row';
+    rowIndex: number;
+    isInHeader: boolean;
+}
+interface ColumnDragState {
+    type: 'column';
+    columnIndex: number;
+    isTitle: boolean;
+}
+type DragState = RowDragState | ColumnDragState | null;
+type DragDirection = 'up' | 'down' | 'left' | 'right' | null;
+interface TableDragContextValue {
+    dragState: DragState;
+    setDragState: Dispatch<SetStateAction<DragState>>;
+    dropTargetIndex: number | null;
+    setDropTargetIndex: Dispatch<SetStateAction<number | null>>;
+    dragDirection: DragDirection;
+    setDragDirection: Dispatch<SetStateAction<DragDirection>>;
+}
+export declare const TableDragProvider: React.FC<{
+    children: React.ReactNode;
+}>;
+export declare const useTableDragContext: () => TableDragContextValue;
+export {};

package/table/contexts/TableDragContext.js

@@ -0,0 +1,26 @@
+import React, { createContext, useContext, useState, useMemo } from 'react';
+
+const TableDragContext = createContext(null);
+const TableDragProvider = ({ children }) => {
+    const [dragState, setDragState] = useState(null);
+    const [dropTargetIndex, setDropTargetIndex] = useState(null);
+    const [dragDirection, setDragDirection] = useState(null);
+    const value = useMemo(() => ({
+        dragState,
+        setDragState,
+        dropTargetIndex,
+        setDropTargetIndex,
+        dragDirection,
+        setDragDirection,
+    }), [dragState, dropTargetIndex, dragDirection]);
+    return React.createElement(TableDragContext.Provider, { value: value }, children);
+};
+const useTableDragContext = () => {
+    const context = useContext(TableDragContext);
+    if (!context) {
+        throw new Error('useTableDragContext must be used within TableDragProvider');
+    }
+    return context;
+};
+
+export { TableDragProvider, useTableDragContext };

package/table/hooks/useColumnResize.js

@@ -80,6 +80,35 @@ function useColumnResize({ tableElement, columnIndex, cellRef }) {
                     }
                 });
             }
+            // 如果有 pinned columns，重新計算所有 pinned cells 的 left 位置
+            if (pinnedColumnIndices.length > 0) {
+                const allRows = tableDOMElement.querySelectorAll('tr');
+                const scrollContainer = tableDOMElement.closest('.qdr-table__scrollContainer');
+                const containerRect = scrollContainer === null || scrollContainer === void 0 ? void 0 : scrollContainer.getBoundingClientRect();
+                const containerWidth = (containerRect === null || containerRect === void 0 ? void 0 : containerRect.width) || tableWidth;
+                // 為每個 pinned column 計算應該的絕對位置
+                pinnedColumnIndices.forEach((pinnedIndex) => {
+                    // 計算此 column 之前所有 pinned columns 的累積寬度
+                    let accumulatedLeft = 0;
+                    for (let i = 0; i < pinnedIndex; i++) {
+                        if (pinnedColumnIndices.includes(i)) {
+                            const width = newWidths[i];
+                            if (width.type === 'percentage') {
+                                const pixelWidth = (containerWidth * width.value) / 100;
+                                accumulatedLeft += pixelWidth;
+                            }
+                        }
+                    }
+                    // 更新該 column 所有 cells 的 left 位置
+                    allRows.forEach((row) => {
+                        const cells = row.querySelectorAll('td, th');
+                        const targetCell = cells[pinnedIndex];
+                        if (targetCell && targetCell.classList.contains('qdr-table__cell--pinned')) {
+                            targetCell.style.left = `${accumulatedLeft}px`;
+                        }
+                    });
+                });
+            }
             // 更新 size indicators
             const sizeIndicatorsContainer = mainWrapper === null || mainWrapper === void 0 ? void 0 : mainWrapper.querySelector('.qdr-table__size-indicators');
             if (sizeIndicatorsContainer) {

package/table/hooks/useTableActions.d.ts

@@ -22,4 +22,6 @@ export declare function useTableActions(element: RenderTableElementProps['elemen
     unpinRow: () => void;
     isColumnPinned: (columnIndex: number) => boolean;
     isRowPinned: (rowIndex: number) => boolean;
+    moveOrSwapRow: (sourceRowIndex: number, targetRowIndex: number, mode?: "swap" | "move") => void;
+    moveOrSwapColumn: (sourceColumnIndex: number, targetColumnIndex: number, mode?: "swap" | "move") => void;
 };

package/table/hooks/useTableActions.js

@@ -3,7 +3,7 @@ import { Element, Editor, Transforms } from '@quadrats/core';
 import { ReactEditor } from 'slate-react';
 import { TABLE_ROW_TYPE, TABLE_CELL_TYPE, TABLE_DEFAULT_MAX_COLUMNS, TABLE_HEADER_TYPE } from '@quadrats/common/table';
 import { useQuadrats } from '@quadrats/react';
-import { getTableStructure, createTableCell, getColumnWidths, calculateColumnWidthsAfterAdd, setColumnWidths, getReferenceRowFromHeaderOrBody, calculateColumnWidthsAfterDelete, hasAnyPinnedRows, moveColumnWidth, getPinnedColumnsInfo, convertToMixedWidthMode, hasAnyPinnedColumns } from '../utils/helper.js';
+import { getTableStructure, createTableCell, getColumnWidths, getPinnedColumnsInfo, calculateColumnWidthsAfterAdd, setColumnWidths, getReferenceRowFromHeaderOrBody, calculateColumnWidthsAfterDelete, hasAnyPinnedRows, moveOrSwapColumnWidth, convertToMixedWidthMode, hasAnyPinnedColumns, convertToPercentageMode } from '../utils/helper.js';
 
 function useTableActions(element) {
     const editor = useQuadrats();
@@ -120,7 +120,9 @@ function useTableActions(element) {
                 // 調整欄位寬度
                 const currentWidths = getColumnWidths(element);
                 if (currentWidths.length > 0) {
-                    const newWidths = calculateColumnWidthsAfterAdd(currentWidths, insertIndex);
+                    // 獲取當前的 pinned columns 資訊
+                    const { pinnedColumnIndices } = getPinnedColumnsInfo(element);
+                    const newWidths = calculateColumnWidthsAfterAdd(currentWidths, insertIndex, pinnedColumnIndices, columnIndex);
                     setColumnWidths(editor, element, newWidths);
                 }
             });
@@ -256,7 +258,9 @@ function useTableActions(element) {
                 if (currentWidths.length > 0) {
                     // 新欄位插入在最後（columnCount 位置）
                     const insertIndex = columnCount;
-                    const newWidths = calculateColumnWidthsAfterAdd(currentWidths, insertIndex);
+                    // 獲取當前的 pinned columns 資訊
+                    const { pinnedColumnIndices } = getPinnedColumnsInfo(element);
+                    const newWidths = calculateColumnWidthsAfterAdd(currentWidths, insertIndex, pinnedColumnIndices);
                     setColumnWidths(editor, element, newWidths);
                 }
             });
@@ -521,7 +525,7 @@ function useTableActions(element) {
                     // 調整 columnWidths：將 columnIndex 的寬度移動到 actualTargetIndex
                     const currentWidths = getColumnWidths(element);
                     if (currentWidths.length > 0) {
-                        const movedWidths = moveColumnWidth(currentWidths, columnIndex, actualTargetIndex);
+                        const movedWidths = moveOrSwapColumnWidth(currentWidths, columnIndex, actualTargetIndex, 'move');
                         // 檢查移動後是否還有 pinned columns
                         const { pinnedColumnIndices } = getPinnedColumnsInfo(element);
                         // 更新釘選欄位索引（移除當前欄位，並調整其他欄位的索引）
@@ -579,7 +583,7 @@ function useTableActions(element) {
             if (!tableStructure)
                 return;
             const { tableHeaderElement, tableBodyElement, tableMainElement } = tableStructure;
-            // 檢查是否已有 pinned columns（一致性規則檢查）
+            // 檢查是否已有 pinned columns
             const hasExistingPinnedColumns = hasAnyPinnedColumns(tableStructure);
             // 如果有現有的 pinned columns 且沒有提供自定義屬性，自動設置 pinned 以保持一致性
             const finalProps = customProps || (hasExistingPinnedColumns ? { pinned: true } : undefined);
@@ -626,10 +630,9 @@ function useTableActions(element) {
                         });
                     }
                 });
-                // 如果目標位置並不需要移動，則直接返回
-                if (columnIndex < targetColumnIndex)
-                    return;
-                if (columnIndex !== targetColumnIndex) {
+                // 檢查是否需要移動位置
+                const needsMove = columnIndex >= targetColumnIndex && columnIndex !== targetColumnIndex;
+                if (needsMove) {
                     for (let rowIndex = containerElement.children.length - 1; rowIndex >= 0; rowIndex--) {
                         const row = containerElement.children[rowIndex];
                         if (Element.isElement(row) && row.type.includes(TABLE_ROW_TYPE)) {
@@ -644,7 +647,7 @@ function useTableActions(element) {
                     // 調整 columnWidths：將 columnIndex 的寬度移動到 targetColumnIndex
                     const currentWidths = getColumnWidths(element);
                     if (currentWidths.length > 0) {
-                        const movedWidths = moveColumnWidth(currentWidths, columnIndex, targetColumnIndex);
+                        const movedWidths = moveOrSwapColumnWidth(currentWidths, columnIndex, targetColumnIndex, 'move');
                         // 如果設定了 pinned，需要轉換為混合模式
                         if ((finalProps === null || finalProps === void 0 ? void 0 : finalProps.pinned) && tableWidth > 0) {
                             const { pinnedColumnIndices } = getPinnedColumnsInfo(element);
@@ -673,7 +676,23 @@ function useTableActions(element) {
                     const currentWidths = getColumnWidths(element);
                     if (currentWidths.length > 0) {
                         const { pinnedColumnIndices } = getPinnedColumnsInfo(element);
-                        const updatedPinnedIndices = [...new Set([...pinnedColumnIndices, columnIndex])].sort((a, b) => a - b);
+                        // 找出所有已經是 title 的 columns
+                        const titleColumnIndices = new Set();
+                        const firstRow = containerElement.children[0];
+                        if (Element.isElement(firstRow) && firstRow.type.includes(TABLE_ROW_TYPE)) {
+                            firstRow.children.forEach((cell, colIndex) => {
+                                if (Element.isElement(cell) &&
+                                    cell.type.includes(TABLE_CELL_TYPE) &&
+                                    cell.treatAsTitle) {
+                                    titleColumnIndices.add(colIndex);
+                                }
+                            });
+                        }
+                        // 將當前 column 加入 title columns
+                        titleColumnIndices.add(columnIndex);
+                        // 合併所有 pinned columns 和 title columns
+                        const allPinnedIndices = new Set([...pinnedColumnIndices, ...Array.from(titleColumnIndices)]);
+                        const updatedPinnedIndices = Array.from(allPinnedIndices).sort((a, b) => a - b);
                         const mixedWidths = convertToMixedWidthMode(currentWidths, updatedPinnedIndices, tableWidth);
                         setColumnWidths(editor, element, mixedWidths);
                     }
@@ -753,6 +772,10 @@ function useTableActions(element) {
             if (tableBodyElement) {
                 processContainer(tableBodyElement);
             }
+            // 轉換回純百分比模式
+            const currentWidths = getColumnWidths(element);
+            const percentageWidths = convertToPercentageMode(currentWidths);
+            setColumnWidths(editor, element, percentageWidths);
         }
         catch (error) {
             console.warn('Failed to unpin column:', error);
@@ -864,6 +887,187 @@ function useTableActions(element) {
             console.warn('Failed to unpin row:', error);
         }
     }, [editor, element]);
+    /**
+     * 內部函數：移動或交換列的位置
+     * @param mode 'swap' 為交換相鄰位置（toolbar 按鈕），'move' 為移動到任意位置（拖曳）
+     */
+    const moveOrSwapRow = useCallback((sourceRowIndex, targetRowIndex, mode = 'move') => {
+        try {
+            const tableStructure = getTableStructure(editor, element);
+            if (!tableStructure)
+                return;
+            const { tableHeaderElement, tableBodyElement, tableHeaderPath, tableBodyPath, headerRowCount } = tableStructure;
+            // 確定當前列和目標列所屬的容器
+            const sourceInHeader = sourceRowIndex < headerRowCount;
+            const targetInHeader = targetRowIndex < headerRowCount;
+            // 標題列只能與標題列互換/移動，一般列只能與一般列互換/移動
+            if (sourceInHeader !== targetInHeader) {
+                console.warn(`Cannot ${mode} row between header and body`);
+                return;
+            }
+            // 檢查邊界
+            if (sourceRowIndex === targetRowIndex) {
+                return;
+            }
+            let containerPath;
+            let sourceLocalIndex;
+            let targetLocalIndex;
+            if (sourceInHeader) {
+                // 在 header 中
+                if (!tableHeaderElement || !tableHeaderPath)
+                    return;
+                containerPath = tableHeaderPath;
+                sourceLocalIndex = sourceRowIndex;
+                targetLocalIndex = targetRowIndex;
+            }
+            else {
+                // 在 body 中
+                if (!tableBodyElement)
+                    return;
+                containerPath = tableBodyPath;
+                sourceLocalIndex = sourceRowIndex - headerRowCount;
+                targetLocalIndex = targetRowIndex - headerRowCount;
+            }
+            Editor.withoutNormalizing(editor, () => {
+                if (mode === 'swap') {
+                    // swap 邏輯：交換兩個相鄰位置
+                    if (sourceRowIndex < targetRowIndex) {
+                        // 向下移動：先將源列移到目標位置之後
+                        const sourcePath = [...containerPath, sourceLocalIndex];
+                        const afterTargetPath = [...containerPath, targetLocalIndex];
+                        Transforms.moveNodes(editor, {
+                            at: sourcePath,
+                            to: afterTargetPath,
+                        });
+                    }
+                    else {
+                        // 向上移動：先將目標列移到源位置之後
+                        const targetPath = [...containerPath, targetLocalIndex];
+                        const afterSourcePath = [...containerPath, sourceLocalIndex];
+                        Transforms.moveNodes(editor, {
+                            at: targetPath,
+                            to: afterSourcePath,
+                        });
+                    }
+                }
+                else {
+                    // move 邏輯：直接移動到目標位置
+                    const sourcePath = [...containerPath, sourceLocalIndex];
+                    const targetPath = [...containerPath, targetLocalIndex];
+                    Transforms.moveNodes(editor, {
+                        at: sourcePath,
+                        to: targetPath,
+                    });
+                }
+            });
+        }
+        catch (error) {
+            console.warn(`Failed to ${mode} row:`, error);
+        }
+    }, [editor, element]);
+    /**
+     * 內部函數：移動或交換行的位置
+     * @param mode 'swap' 為交換相鄰位置（toolbar 按鈕），'move' 為移動到任意位置（拖曳）
+     */
+    const moveOrSwapColumn = useCallback((sourceColumnIndex, targetColumnIndex, mode = 'move') => {
+        try {
+            const tableStructure = getTableStructure(editor, element);
+            if (!tableStructure)
+                return;
+            const { tableHeaderElement, tableBodyElement, columnCount } = tableStructure;
+            // 檢查邊界
+            if (targetColumnIndex < 0 || targetColumnIndex >= columnCount) {
+                console.warn('Target column index out of bounds');
+                return;
+            }
+            // 檢查是否為同一行
+            if (sourceColumnIndex === targetColumnIndex) {
+                return;
+            }
+            // 檢查當前行和目標行是否都是標題行或都是一般行
+            // 透過檢查第一個 cell 的 treatAsTitle 屬性來判斷
+            const checkIsTitleColumn = (container, colIndex) => {
+                if (!Element.isElement(container))
+                    return false;
+                for (const row of container.children) {
+                    if (Element.isElement(row) && row.type.includes(TABLE_ROW_TYPE)) {
+                        const cell = row.children[colIndex];
+                        if (Element.isElement(cell) && cell.type.includes(TABLE_CELL_TYPE)) {
+                            return !!cell.treatAsTitle;
+                        }
+                    }
+                }
+                return false;
+            };
+            // 檢查兩個 container 中的第一列來確定是否為標題行
+            let sourceIsTitle = false;
+            let targetIsTitle = false;
+            if (tableHeaderElement) {
+                sourceIsTitle = sourceIsTitle || checkIsTitleColumn(tableHeaderElement, sourceColumnIndex);
+                targetIsTitle = targetIsTitle || checkIsTitleColumn(tableHeaderElement, targetColumnIndex);
+            }
+            if (tableBodyElement) {
+                sourceIsTitle = sourceIsTitle || checkIsTitleColumn(tableBodyElement, sourceColumnIndex);
+                targetIsTitle = targetIsTitle || checkIsTitleColumn(tableBodyElement, targetColumnIndex);
+            }
+            // 標題行只能與標題行互換/移動，一般行只能與一般行互換/移動
+            if (sourceIsTitle !== targetIsTitle) {
+                console.warn(`Cannot ${mode} column between title and normal columns`);
+                return;
+            }
+            // 根據模式選擇不同的 columnWidths 處理方式
+            const currentWidths = getColumnWidths(element);
+            const newWidths = moveOrSwapColumnWidth(currentWidths, sourceColumnIndex, targetColumnIndex, mode);
+            setColumnWidths(editor, element, newWidths);
+            // 對 header 和 body 中的所有列進行操作
+            Editor.withoutNormalizing(editor, () => {
+                const containers = [tableHeaderElement, tableBodyElement].filter((c) => c && Element.isElement(c));
+                for (const container of containers) {
+                    // 對每一列進行操作
+                    for (let rowIndex = 0; rowIndex < container.children.length; rowIndex++) {
+                        const row = container.children[rowIndex];
+                        if (!Element.isElement(row) || !row.type.includes(TABLE_ROW_TYPE))
+                            continue;
+                        const containerPath = ReactEditor.findPath(editor, container);
+                        const rowPath = [...containerPath, rowIndex];
+                        if (mode === 'swap') {
+                            // swap 邏輯：交換兩個相鄰位置
+                            if (sourceColumnIndex < targetColumnIndex) {
+                                // 向右移動：將源 cell 移到目標位置之後
+                                const sourceCellPath = [...rowPath, sourceColumnIndex];
+                                const afterTargetCellPath = [...rowPath, targetColumnIndex];
+                                Transforms.moveNodes(editor, {
+                                    at: sourceCellPath,
+                                    to: afterTargetCellPath,
+                                });
+                            }
+                            else {
+                                // 向左移動：將目標 cell 移到源位置之後
+                                const targetCellPath = [...rowPath, targetColumnIndex];
+                                const afterSourceCellPath = [...rowPath, sourceColumnIndex];
+                                Transforms.moveNodes(editor, {
+                                    at: targetCellPath,
+                                    to: afterSourceCellPath,
+                                });
+                            }
+                        }
+                        else {
+                            // move 邏輯：直接移動到目標位置
+                            const sourceCellPath = [...rowPath, sourceColumnIndex];
+                            const targetCellPath = [...rowPath, targetColumnIndex];
+                            Transforms.moveNodes(editor, {
+                                at: sourceCellPath,
+                                to: targetCellPath,
+                            });
+                        }
+                    }
+                }
+            });
+        }
+        catch (error) {
+            console.warn(`Failed to ${mode} column:`, error);
+        }
+    }, [editor, element]);
     return {
         addColumn,
         addRow,
@@ -880,6 +1084,8 @@ function useTableActions(element) {
         unpinRow,
         isColumnPinned,
         isRowPinned,
+        moveOrSwapRow,
+        moveOrSwapColumn,
     };
 }