@quadrats/react 1.1.6 → 1.1.8

package/table/hooks/useTableActions.js

@@ -1,1092 +0,0 @@
-import { useCallback } from 'react';
-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, getPinnedColumnsInfo, calculateColumnWidthsAfterAdd, setColumnWidths, getReferenceRowFromHeaderOrBody, calculateColumnWidthsAfterDelete, hasAnyPinnedRows, moveOrSwapColumnWidth, convertToMixedWidthMode, hasAnyPinnedColumns, convertToPercentageMode } from '../utils/helper.js';
-
-function useTableActions(element) {
-    const editor = useQuadrats();
-    const isColumnPinned = useCallback((columnIndex) => {
-        try {
-            const tableStructure = getTableStructure(editor, element);
-            if (!tableStructure)
-                return false;
-            const { tableMainElement } = tableStructure;
-            if (!tableMainElement)
-                return false;
-            for (const container of tableMainElement.children) {
-                if (!Element.isElement(container))
-                    continue;
-                for (const row of container.children) {
-                    if (Element.isElement(row) && row.type.includes(TABLE_ROW_TYPE)) {
-                        const cell = row.children[columnIndex];
-                        if (Element.isElement(cell) && cell.type.includes(TABLE_CELL_TYPE)) {
-                            // 如果有任何一個 cell 沒有 pinned 屬性，則整個 column 不算 pinned
-                            if (!cell.pinned) {
-                                return false;
-                            }
-                        }
-                    }
-                }
-            }
-            return true;
-        }
-        catch (error) {
-            return false;
-        }
-    }, [element, editor]);
-    const isRowPinned = useCallback((rowIndex) => {
-        try {
-            const tableStructure = getTableStructure(editor, element);
-            if (!tableStructure)
-                return false;
-            const { tableHeaderElement, tableBodyElement } = tableStructure;
-            const headerRowCount = tableHeaderElement && Element.isElement(tableHeaderElement) ? tableHeaderElement.children.length : 0;
-            let targetRow;
-            if (rowIndex < headerRowCount && tableHeaderElement && Element.isElement(tableHeaderElement)) {
-                // 在 Header 中
-                const rowElement = tableHeaderElement.children[rowIndex];
-                if (Element.isElement(rowElement)) {
-                    targetRow = rowElement;
-                }
-            }
-            else if (tableBodyElement && Element.isElement(tableBodyElement)) {
-                // 在 Body 中
-                const bodyRowIndex = rowIndex - headerRowCount;
-                const rowElement = tableBodyElement.children[bodyRowIndex];
-                if (Element.isElement(rowElement)) {
-                    targetRow = rowElement;
-                }
-            }
-            if (!Element.isElement(targetRow) || !targetRow.type.includes(TABLE_ROW_TYPE)) {
-                return false;
-            }
-            // 檢查所有 cell 是否都有 pinned 屬性
-            for (const cell of targetRow.children) {
-                if (Element.isElement(cell) && cell.type.includes(TABLE_CELL_TYPE)) {
-                    if (!cell.pinned) {
-                        return false;
-                    }
-                }
-            }
-            return true;
-        }
-        catch (error) {
-            return false;
-        }
-    }, [element, editor]);
-    const addColumn = useCallback((options = {}) => {
-        const { position = 'right', columnIndex } = options;
-        try {
-            const tableStructure = getTableStructure(editor, element);
-            if (!tableStructure)
-                return;
-            const { tableHeaderElement, tableBodyElement, tableHeaderPath, tableBodyPath, columnCount } = tableStructure;
-            if (columnCount >= TABLE_DEFAULT_MAX_COLUMNS) {
-                console.warn(`Maximum columns limit (${TABLE_DEFAULT_MAX_COLUMNS}) reached`);
-                return;
-            }
-            // 計算插入位置
-            let insertIndex;
-            if (typeof columnIndex === 'number') {
-                insertIndex = position === 'left' ? Math.max(0, columnIndex) : Math.min(columnCount, columnIndex + 1);
-            }
-            else {
-                insertIndex = columnCount;
-            }
-            // 使用 Editor.withoutNormalizing 來批次執行所有操作
-            Editor.withoutNormalizing(editor, () => {
-                // 在 Header 中加入 cell
-                if (tableHeaderElement && tableHeaderPath) {
-                    tableHeaderElement.children.forEach((row, rowIndex) => {
-                        if (Element.isElement(row) && row.type.includes(TABLE_ROW_TYPE)) {
-                            const referenceCell = row.children[insertIndex - (position === 'left' ? 0 : 1)];
-                            const newCell = createTableCell(referenceCell);
-                            const cellPath = [...tableHeaderPath, rowIndex, insertIndex];
-                            Transforms.insertNodes(editor, newCell, { at: cellPath });
-                        }
-                    });
-                }
-                // 在 Body 中加入 cell
-                tableBodyElement.children.forEach((row, rowIndex) => {
-                    if (Element.isElement(row) && row.type.includes(TABLE_ROW_TYPE)) {
-                        const referenceCell = row.children[insertIndex - (position === 'left' ? 0 : 1)];
-                        const newCell = createTableCell(referenceCell);
-                        const cellPath = [...tableBodyPath, rowIndex, insertIndex];
-                        Transforms.insertNodes(editor, newCell, { at: cellPath });
-                    }
-                });
-                // 調整欄位寬度
-                const currentWidths = getColumnWidths(element);
-                if (currentWidths.length > 0) {
-                    // 獲取當前的 pinned columns 資訊
-                    const { pinnedColumnIndices } = getPinnedColumnsInfo(element);
-                    const newWidths = calculateColumnWidthsAfterAdd(currentWidths, insertIndex, pinnedColumnIndices, columnIndex);
-                    setColumnWidths(editor, element, newWidths);
-                }
-            });
-        }
-        catch (error) {
-            console.warn('Failed to add column:', error);
-        }
-    }, [editor, element]);
-    const addRow = useCallback((options = {}) => {
-        const { position = 'bottom', rowIndex } = options;
-        try {
-            const tableStructure = getTableStructure(editor, element);
-            if (!tableStructure)
-                return;
-            const { tableHeaderElement, tableBodyElement, tableHeaderPath, tableBodyPath, headerRowCount, columnCount } = tableStructure;
-            // 計算插入位置和參考行
-            let insertIndex;
-            let referenceRowElement;
-            let targetPath;
-            if (typeof rowIndex === 'number') {
-                // 檢查是在 Header / Body 之中
-                if (tableHeaderElement && rowIndex < headerRowCount) {
-                    targetPath = tableHeaderPath;
-                    if (position === 'top') {
-                        insertIndex = Math.max(0, rowIndex);
-                        referenceRowElement = getReferenceRowFromHeaderOrBody(tableHeaderElement, insertIndex);
-                    }
-                    else {
-                        insertIndex = Math.min(headerRowCount, rowIndex + 1);
-                        referenceRowElement = getReferenceRowFromHeaderOrBody(tableHeaderElement, rowIndex);
-                    }
-                }
-                else {
-                    targetPath = tableBodyPath;
-                    const bodyRowIndex = rowIndex - headerRowCount;
-                    if (position === 'top') {
-                        insertIndex = Math.max(0, bodyRowIndex);
-                        referenceRowElement = getReferenceRowFromHeaderOrBody(tableBodyElement, insertIndex);
-                    }
-                    else {
-                        insertIndex = Math.min(tableBodyElement.children.length, bodyRowIndex + 1);
-                        referenceRowElement = getReferenceRowFromHeaderOrBody(tableBodyElement, bodyRowIndex);
-                    }
-                }
-            }
-            else {
-                // 預設：在 Body 尾端加入列
-                targetPath = tableBodyPath;
-                insertIndex = tableBodyElement.children.length;
-                referenceRowElement = getReferenceRowFromHeaderOrBody(tableBodyElement, insertIndex - 1);
-            }
-            // 創建新行
-            const newRow = {
-                type: TABLE_ROW_TYPE,
-                children: Array.from({ length: columnCount }, (_, cellIndex) => {
-                    let referenceCell;
-                    if (referenceRowElement && referenceRowElement.children[cellIndex]) {
-                        const cell = referenceRowElement.children[cellIndex];
-                        if (Element.isElement(cell) && cell.type.includes(TABLE_CELL_TYPE)) {
-                            referenceCell = cell;
-                        }
-                    }
-                    return createTableCell(referenceCell);
-                }),
-            };
-            // 插入新行
-            const newRowPath = [...targetPath, insertIndex];
-            Transforms.insertNodes(editor, newRow, { at: newRowPath });
-        }
-        catch (error) {
-            console.warn('Failed to add row:', error);
-        }
-    }, [editor, element]);
-    const addColumnAndRow = useCallback(() => {
-        try {
-            const tableStructure = getTableStructure(editor, element);
-            if (!tableStructure)
-                return;
-            const { tableHeaderElement, tableBodyElement, tableHeaderPath, tableBodyPath, columnCount } = tableStructure;
-            if (columnCount >= TABLE_DEFAULT_MAX_COLUMNS) {
-                console.warn(`Maximum columns limit (${TABLE_DEFAULT_MAX_COLUMNS}) reached`);
-                return;
-            }
-            Editor.withoutNormalizing(editor, () => {
-                // 在 Header 中加入新列
-                if (tableHeaderElement && tableHeaderPath) {
-                    tableHeaderElement.children.forEach((row, rowIndex) => {
-                        if (Element.isElement(row) && row.type.includes(TABLE_ROW_TYPE)) {
-                            const lastCell = row.children[row.children.length - 1];
-                            const newHeaderCell = createTableCell(lastCell);
-                            const cellPath = [...tableHeaderPath, rowIndex, row.children.length];
-                            Transforms.insertNodes(editor, newHeaderCell, { at: cellPath });
-                        }
-                    });
-                }
-                // 在 Body 中加入新列
-                tableBodyElement.children.forEach((row, rowIndex) => {
-                    if (Element.isElement(row) && row.type.includes(TABLE_ROW_TYPE)) {
-                        const lastCell = row.children[row.children.length - 1];
-                        const newCell = createTableCell(lastCell);
-                        const cellPath = [...tableBodyPath, rowIndex, row.children.length];
-                        Transforms.insertNodes(editor, newCell, { at: cellPath });
-                    }
-                });
-                // 加入新行
-                const newColumnCount = columnCount + 1;
-                const lastRow = getReferenceRowFromHeaderOrBody(tableBodyElement, tableBodyElement.children.length - 1);
-                const newRow = {
-                    type: TABLE_ROW_TYPE,
-                    children: Array.from({ length: newColumnCount }, (_, cellIndex) => {
-                        let referenceCell;
-                        if (cellIndex < newColumnCount - 1 && Element.isElement(lastRow) && lastRow.type.includes(TABLE_ROW_TYPE)) {
-                            const cell = lastRow.children[cellIndex];
-                            if (Element.isElement(cell) && cell.type.includes(TABLE_CELL_TYPE)) {
-                                referenceCell = cell;
-                            }
-                        }
-                        else {
-                            if (Element.isElement(lastRow) && lastRow.type.includes(TABLE_ROW_TYPE)) {
-                                const cell = lastRow.children[lastRow.children.length - 1];
-                                if (Element.isElement(cell) && cell.type.includes(TABLE_CELL_TYPE)) {
-                                    referenceCell = cell;
-                                }
-                            }
-                        }
-                        return createTableCell(referenceCell);
-                    }),
-                };
-                const newRowPath = [...tableBodyPath, tableBodyElement.children.length];
-                Transforms.insertNodes(editor, newRow, { at: newRowPath });
-                // 調整欄位寬度（新增欄位在最後）
-                const currentWidths = getColumnWidths(element);
-                if (currentWidths.length > 0) {
-                    // 新欄位插入在最後（columnCount 位置）
-                    const insertIndex = columnCount;
-                    // 獲取當前的 pinned columns 資訊
-                    const { pinnedColumnIndices } = getPinnedColumnsInfo(element);
-                    const newWidths = calculateColumnWidthsAfterAdd(currentWidths, insertIndex, pinnedColumnIndices);
-                    setColumnWidths(editor, element, newWidths);
-                }
-            });
-        }
-        catch (error) {
-            console.warn('Failed to add column and row:', error);
-        }
-    }, [editor, element]);
-    const deleteRow = useCallback((rowIndex) => {
-        try {
-            const tableStructure = getTableStructure(editor, element);
-            if (!tableStructure)
-                return;
-            const { tableHeaderElement, tableBodyElement, tableHeaderPath, tableBodyPath, headerRowCount } = tableStructure;
-            // 檢查是否刪除 Header 行
-            if (rowIndex < headerRowCount) {
-                if (!tableHeaderElement || !tableHeaderPath)
-                    return;
-                const headerRowPath = [...tableHeaderPath, rowIndex];
-                Transforms.removeNodes(editor, { at: headerRowPath });
-                // 如果是最後一個 header 行，移除整個 header 元素
-                if (headerRowCount <= 1) {
-                    Transforms.removeNodes(editor, { at: tableHeaderPath });
-                }
-                return;
-            }
-            // 刪除 Body 行
-            const bodyRowIndex = rowIndex - headerRowCount;
-            if (bodyRowIndex < 0 || bodyRowIndex >= tableBodyElement.children.length) {
-                console.warn('Invalid row index for deletion');
-                return;
-            }
-            if (tableBodyElement.children.length <= 1) {
-                console.warn('Cannot delete the last row');
-                return;
-            }
-            const rowPath = [...tableBodyPath, bodyRowIndex];
-            Transforms.removeNodes(editor, { at: rowPath });
-        }
-        catch (error) {
-            console.warn('Failed to delete row:', error);
-        }
-    }, [editor, element]);
-    const deleteColumn = useCallback((columnIndex) => {
-        try {
-            const tableStructure = getTableStructure(editor, element);
-            if (!tableStructure)
-                return;
-            const { tableHeaderElement, tableBodyElement, tableHeaderPath, tableBodyPath, columnCount } = tableStructure;
-            // 檢查是否有足夠的列（不允許刪除最後一列）
-            if (columnCount <= 1) {
-                console.warn('Cannot delete the last column');
-                return;
-            }
-            // 檢查 columnIndex 是否有效
-            if (columnIndex < 0 || columnIndex >= columnCount) {
-                console.warn('Invalid column index for deletion');
-                return;
-            }
-            editor.withoutNormalizing(() => {
-                // 從 Header 中刪除列
-                if (tableHeaderElement && tableHeaderPath) {
-                    // 以反向順序刪除
-                    for (let rowIndex = tableHeaderElement.children.length - 1; rowIndex >= 0; rowIndex--) {
-                        const headerRow = tableHeaderElement.children[rowIndex];
-                        if (Element.isElement(headerRow) && headerRow.type.includes(TABLE_ROW_TYPE)) {
-                            const headerCellPath = [...tableHeaderPath, rowIndex, columnIndex];
-                            Transforms.removeNodes(editor, { at: headerCellPath });
-                        }
-                    }
-                }
-                // 從 Body 中刪除列
-                for (let rowIndex = tableBodyElement.children.length - 1; rowIndex >= 0; rowIndex--) {
-                    const row = tableBodyElement.children[rowIndex];
-                    if (Element.isElement(row) && row.type.includes(TABLE_ROW_TYPE)) {
-                        const cellPath = [...tableBodyPath, rowIndex, columnIndex];
-                        Transforms.removeNodes(editor, { at: cellPath });
-                    }
-                }
-                // 調整欄位寬度
-                const currentWidths = getColumnWidths(element);
-                if (currentWidths.length > 0) {
-                    const newWidths = calculateColumnWidthsAfterDelete(currentWidths, columnIndex);
-                    setColumnWidths(editor, element, newWidths);
-                }
-            });
-        }
-        catch (error) {
-            console.warn('Failed to delete column:', error);
-        }
-    }, [editor, element]);
-    const moveRowToBody = useCallback((rowIndex) => {
-        try {
-            const tableStructure = getTableStructure(editor, element);
-            if (!tableStructure)
-                return;
-            const { tableHeaderElement, tableHeaderPath, tableBodyPath } = tableStructure;
-            if (!tableHeaderElement || !tableHeaderPath)
-                return;
-            // 檢查行是否存在於 header 中
-            if (rowIndex >= tableHeaderElement.children.length) {
-                console.warn('Invalid header row index:', rowIndex);
-                return;
-            }
-            const rowToMove = tableHeaderElement.children[rowIndex];
-            if (!Element.isElement(rowToMove) || !rowToMove.type.includes(TABLE_ROW_TYPE))
-                return;
-            const rowPath = [...tableHeaderPath, rowIndex];
-            // 移動前移除所有 cell 的 pinned 屬性
-            rowToMove.children.forEach((cell, columnIndex) => {
-                if (Element.isElement(cell) && cell.type.includes(TABLE_CELL_TYPE) && cell.pinned) {
-                    if (cell.pinned && isColumnPinned(columnIndex)) {
-                        const cellPath = [...rowPath, columnIndex];
-                        Transforms.unsetNodes(editor, 'pinned', { at: cellPath });
-                    }
-                }
-            });
-            // 移動行到 body 的開始位置
-            const bodyTargetPath = [...tableBodyPath, 0];
-            Transforms.moveNodes(editor, {
-                at: rowPath,
-                to: bodyTargetPath,
-            });
-        }
-        catch (error) {
-            console.warn('Failed to move row to body:', error);
-        }
-    }, [editor, element, isColumnPinned]);
-    const moveRowToHeader = useCallback((rowIndex, customProps) => {
-        try {
-            const tableStructure = getTableStructure(editor, element);
-            if (!tableStructure)
-                return;
-            const { tableHeaderElement, tableBodyElement, tableMainPath, tableHeaderPath, tableBodyPath, headerRowCount } = tableStructure;
-            // 計算正確的 body 行索引
-            const bodyRowIndex = rowIndex - headerRowCount;
-            // 檢查 body 行索引是否有效
-            if (bodyRowIndex < 0 || bodyRowIndex >= tableBodyElement.children.length) {
-                console.warn('Invalid body row index:', bodyRowIndex);
-                return;
-            }
-            // 檢查行是否存在
-            const rowToMove = tableBodyElement.children[bodyRowIndex];
-            if (!Element.isElement(rowToMove) || !rowToMove.type.includes(TABLE_ROW_TYPE))
-                return;
-            // 檢查 header 中是否已有 pinned rows（一致性規則檢查）
-            const hasExistingPinnedRows = tableStructure ? hasAnyPinnedRows(tableStructure) : false;
-            // 如果有現有的 pinned rows 且沒有提供自定義屬性，自動設置 pinned 以保持一致性
-            const finalProps = customProps || (hasExistingPinnedRows ? { pinned: true } : undefined);
-            // 如果提供了 finalProps，則應用到 cells
-            const processedRow = finalProps
-                ? Object.assign(Object.assign({}, rowToMove), { children: rowToMove.children.map((cell) => {
-                        if (Element.isElement(cell) && cell.type.includes(TABLE_CELL_TYPE)) {
-                            return Object.assign(Object.assign({}, cell), finalProps);
-                        }
-                        return cell;
-                    }) }) : rowToMove;
-            const rowPath = [...tableBodyPath, bodyRowIndex];
-            // 如果 header 不存在，先創建它
-            if (!tableHeaderElement) {
-                const newHeader = {
-                    type: TABLE_HEADER_TYPE,
-                    children: [processedRow],
-                };
-                const headerInsertPath = [...tableMainPath, 0];
-                Editor.withoutNormalizing(editor, () => {
-                    Transforms.removeNodes(editor, { at: rowPath });
-                    Transforms.insertNodes(editor, newHeader, { at: headerInsertPath });
-                });
-            }
-            else {
-                // 如果這是 pinned row，找到正確的插入位置（pinned rows 在頂部）
-                let headerTargetPath;
-                if (finalProps === null || finalProps === void 0 ? void 0 : finalProps.pinned) {
-                    let insertIndex = 0;
-                    for (const [index, headerRow] of tableHeaderElement.children.entries()) {
-                        if (Element.isElement(headerRow)) {
-                            const hasNonPinnedCell = headerRow.children.some((cell) => Element.isElement(cell) && !cell.pinned);
-                            if (hasNonPinnedCell) {
-                                break;
-                            }
-                            insertIndex = index + 1;
-                        }
-                    }
-                    headerTargetPath = [...tableHeaderPath, insertIndex];
-                    Editor.withoutNormalizing(editor, () => {
-                        Transforms.removeNodes(editor, { at: rowPath });
-                        Transforms.insertNodes(editor, processedRow, { at: headerTargetPath });
-                    });
-                }
-                else {
-                    // 移動行到現有 header 的末尾
-                    headerTargetPath = [...tableHeaderPath, tableHeaderElement.children.length];
-                    Transforms.moveNodes(editor, {
-                        at: rowPath,
-                        to: headerTargetPath,
-                    });
-                }
-            }
-        }
-        catch (error) {
-            console.warn('Failed to move row to header:', error);
-        }
-    }, [editor, element]);
-    const unsetColumnAsTitle = useCallback((columnIndex) => {
-        try {
-            const tableStructure = getTableStructure(editor, element);
-            if (!tableStructure)
-                return;
-            const { tableHeaderElement, tableBodyElement, tableMainElement } = tableStructure;
-            // 獲取 table 的實際寬度（用於轉換為混合模式）
-            let tableWidth = 0;
-            if (tableMainElement) {
-                const tableDOMElement = ReactEditor.toDOMNode(editor, tableMainElement);
-                if (tableDOMElement instanceof HTMLElement) {
-                    tableWidth = tableDOMElement.getBoundingClientRect().width;
-                }
-            }
-            const processContainer = (containerElement) => {
-                if (!Element.isElement(containerElement))
-                    return;
-                const containerPath = ReactEditor.findPath(editor, containerElement);
-                const firstRow = containerElement.children[0];
-                // 找到 column 標題列的尾端
-                let targetColumnIndex = 0;
-                if (Element.isElement(firstRow) && firstRow.type.includes(TABLE_ROW_TYPE)) {
-                    for (let i = 0; i < firstRow.children.length; i++) {
-                        const cell = firstRow.children[i];
-                        if (Element.isElement(cell) &&
-                            cell.type.includes(TABLE_CELL_TYPE) &&
-                            cell.treatAsTitle &&
-                            i !== columnIndex) {
-                            targetColumnIndex = i + 1;
-                        }
-                    }
-                }
-                containerElement.children.forEach((row, rowIndex) => {
-                    if (Element.isElement(row) && row.type.includes(TABLE_ROW_TYPE)) {
-                        const cell = row.children[columnIndex];
-                        if (Element.isElement(cell) && cell.type.includes(TABLE_CELL_TYPE)) {
-                            const cellPath = [...containerPath, rowIndex, columnIndex];
-                            Transforms.unsetNodes(editor, 'treatAsTitle', { at: cellPath });
-                            if (cell.pinned && !isRowPinned(rowIndex)) {
-                                Transforms.unsetNodes(editor, 'pinned', { at: cellPath });
-                            }
-                        }
-                    }
-                });
-                if (columnIndex < targetColumnIndex) {
-                    const actualTargetIndex = targetColumnIndex - 1;
-                    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)) {
-                            const fromPath = [...containerPath, rowIndex, columnIndex];
-                            const toPath = [...containerPath, rowIndex, actualTargetIndex];
-                            Transforms.moveNodes(editor, {
-                                at: fromPath,
-                                to: toPath,
-                            });
-                        }
-                    }
-                    // 調整 columnWidths：將 columnIndex 的寬度移動到 actualTargetIndex
-                    const currentWidths = getColumnWidths(element);
-                    if (currentWidths.length > 0) {
-                        const movedWidths = moveOrSwapColumnWidth(currentWidths, columnIndex, actualTargetIndex, 'move');
-                        // 檢查移動後是否還有 pinned columns
-                        const { pinnedColumnIndices } = getPinnedColumnsInfo(element);
-                        // 更新釘選欄位索引（移除當前欄位，並調整其他欄位的索引）
-                        const updatedPinnedIndices = pinnedColumnIndices
-                            .filter((idx) => idx !== columnIndex)
-                            .map((idx) => {
-                            if (idx > columnIndex && idx <= actualTargetIndex)
-                                return idx - 1;
-                            return idx;
-                        })
-                            .sort((a, b) => a - b);
-                        // 如果還有 pinned columns，轉換為混合模式；否則可能轉回全 percentage 模式
-                        if (updatedPinnedIndices.length > 0 && tableWidth > 0) {
-                            const mixedWidths = convertToMixedWidthMode(movedWidths, updatedPinnedIndices, tableWidth);
-                            setColumnWidths(editor, element, mixedWidths);
-                        }
-                        else {
-                            // 沒有 pinned columns 了，使用原本的寬度
-                            setColumnWidths(editor, element, movedWidths);
-                        }
-                    }
-                }
-                else {
-                    // 即使沒有移動位置，也需要檢查是否需要更新寬度模式
-                    const currentWidths = getColumnWidths(element);
-                    if (currentWidths.length > 0) {
-                        const { pinnedColumnIndices } = getPinnedColumnsInfo(element);
-                        // 移除當前欄位
-                        const updatedPinnedIndices = pinnedColumnIndices
-                            .filter((idx) => idx !== columnIndex)
-                            .sort((a, b) => a - b);
-                        // 如果還有 pinned columns，轉換為混合模式；否則可能轉回全 percentage 模式
-                        if (updatedPinnedIndices.length > 0 && tableWidth > 0) {
-                            const mixedWidths = convertToMixedWidthMode(currentWidths, updatedPinnedIndices, tableWidth);
-                            setColumnWidths(editor, element, mixedWidths);
-                        }
-                        // 如果沒有 pinned columns，保持原樣（可能已經是全 percentage 了）
-                    }
-                }
-            };
-            if (tableHeaderElement) {
-                processContainer(tableHeaderElement);
-            }
-            if (tableBodyElement) {
-                processContainer(tableBodyElement);
-            }
-        }
-        catch (error) {
-            console.warn('Failed to unset column as title:', error);
-        }
-    }, [editor, element, isRowPinned]);
-    const setColumnAsTitle = useCallback((columnIndex, customProps) => {
-        try {
-            const tableStructure = getTableStructure(editor, element);
-            if (!tableStructure)
-                return;
-            const { tableHeaderElement, tableBodyElement, tableMainElement } = tableStructure;
-            // 檢查是否已有 pinned columns
-            const hasExistingPinnedColumns = hasAnyPinnedColumns(tableStructure);
-            // 如果有現有的 pinned columns 且沒有提供自定義屬性，自動設置 pinned 以保持一致性
-            const finalProps = customProps || (hasExistingPinnedColumns ? { pinned: true } : undefined);
-            // 獲取 table 的實際寬度（用於轉換為混合模式）
-            let tableWidth = 0;
-            if (tableMainElement) {
-                const tableDOMElement = ReactEditor.toDOMNode(editor, tableMainElement);
-                if (tableDOMElement instanceof HTMLElement) {
-                    tableWidth = tableDOMElement.getBoundingClientRect().width;
-                }
-            }
-            const processContainer = (containerElement) => {
-                if (!Element.isElement(containerElement))
-                    return;
-                const containerPath = ReactEditor.findPath(editor, containerElement);
-                const firstRow = containerElement.children[0];
-                // 先找到 column 標題列的尾端
-                let targetColumnIndex = 0;
-                if (Element.isElement(firstRow) && firstRow.type.includes(TABLE_ROW_TYPE)) {
-                    for (let i = 0; i < firstRow.children.length; i++) {
-                        const cell = firstRow.children[i];
-                        if (Element.isElement(cell) && cell.type.includes(TABLE_CELL_TYPE) && cell.treatAsTitle) {
-                            targetColumnIndex = i + 1;
-                        }
-                        else {
-                            break;
-                        }
-                    }
-                }
-                containerElement.children.forEach((row, rowIndex) => {
-                    if (Element.isElement(row) && row.type.includes(TABLE_ROW_TYPE)) {
-                        row.children.forEach((cell, childColIndex) => {
-                            const cellPath = [...containerPath, rowIndex, childColIndex];
-                            if (childColIndex === columnIndex) {
-                                const nodeProps = finalProps ? Object.assign({ treatAsTitle: true }, finalProps) : { treatAsTitle: true };
-                                Transforms.setNodes(editor, nodeProps, { at: cellPath });
-                            }
-                            else if (finalProps === null || finalProps === void 0 ? void 0 : finalProps.pinned) {
-                                // 確保其他 title column 也有 pinned 屬性以保持一致性
-                                if (Element.isElement(cell) && cell.treatAsTitle) {
-                                    Transforms.setNodes(editor, { pinned: true }, { at: cellPath });
-                                }
-                            }
-                        });
-                    }
-                });
-                // 檢查是否需要移動位置
-                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)) {
-                            const fromPath = [...containerPath, rowIndex, columnIndex];
-                            const toPath = [...containerPath, rowIndex, targetColumnIndex];
-                            Transforms.moveNodes(editor, {
-                                at: fromPath,
-                                to: toPath,
-                            });
-                        }
-                    }
-                    // 調整 columnWidths：將 columnIndex 的寬度移動到 targetColumnIndex
-                    const currentWidths = getColumnWidths(element);
-                    if (currentWidths.length > 0) {
-                        const movedWidths = moveOrSwapColumnWidth(currentWidths, columnIndex, targetColumnIndex, 'move');
-                        // 如果設定了 pinned，需要轉換為混合模式
-                        if ((finalProps === null || finalProps === void 0 ? void 0 : finalProps.pinned) && tableWidth > 0) {
-                            const { pinnedColumnIndices } = getPinnedColumnsInfo(element);
-                            // 更新釘選欄位索引
-                            const updatedPinnedIndices = pinnedColumnIndices
-                                .map((idx) => {
-                                if (idx === columnIndex)
-                                    return targetColumnIndex;
-                                if (idx >= targetColumnIndex && idx < columnIndex)
-                                    return idx + 1;
-                                return idx;
-                            })
-                                .concat(targetColumnIndex)
-                                .filter((idx, i, arr) => arr.indexOf(idx) === i)
-                                .sort((a, b) => a - b);
-                            const mixedWidths = convertToMixedWidthMode(movedWidths, updatedPinnedIndices, tableWidth);
-                            setColumnWidths(editor, element, mixedWidths);
-                        }
-                        else {
-                            setColumnWidths(editor, element, movedWidths);
-                        }
-                    }
-                }
-                else if ((finalProps === null || finalProps === void 0 ? void 0 : finalProps.pinned) && tableWidth > 0) {
-                    // 即使沒有移動位置，如果設定了 pinned，也需要轉換為混合模式
-                    const currentWidths = getColumnWidths(element);
-                    if (currentWidths.length > 0) {
-                        const { pinnedColumnIndices } = getPinnedColumnsInfo(element);
-                        // 找出所有已經是 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);
-                    }
-                }
-            };
-            if (tableHeaderElement) {
-                processContainer(tableHeaderElement);
-            }
-            if (tableBodyElement) {
-                processContainer(tableBodyElement);
-            }
-        }
-        catch (error) {
-            console.warn('Failed to set column as title:', error);
-        }
-    }, [editor, element]);
-    const pinColumn = useCallback((columnIndex) => {
-        try {
-            setColumnAsTitle(columnIndex, { pinned: true });
-        }
-        catch (error) {
-            console.warn('Failed to pin column:', error);
-        }
-    }, [setColumnAsTitle]);
-    const unpinColumn = useCallback(() => {
-        try {
-            const tableStructure = getTableStructure(editor, element);
-            if (!tableStructure)
-                return;
-            const { tableHeaderElement, tableBodyElement } = tableStructure;
-            // 檢查 column 與 row 之間是否有交叉 pinned 狀態的關係
-            const shouldRowRemainPinned = (rowElement, excludeColumns) => {
-                let hasNonExcludedCells = false;
-                for (let colIndex = 0; colIndex < rowElement.children.length; colIndex++) {
-                    const cell = rowElement.children[colIndex];
-                    if (!Element.isElement(cell) || !cell.type.includes(TABLE_CELL_TYPE))
-                        continue;
-                    if (excludeColumns.has(colIndex))
-                        continue;
-                    hasNonExcludedCells = true;
-                    if (!cell.pinned) {
-                        return false;
-                    }
-                }
-                return hasNonExcludedCells;
-            };
-            const processContainer = (containerElement) => {
-                const containerPath = ReactEditor.findPath(editor, containerElement);
-                const treatAsTitleColumns = new Set();
-                containerElement.children.forEach((row) => {
-                    if (Element.isElement(row) && row.type.includes(TABLE_ROW_TYPE)) {
-                        row.children.forEach((cell, colIndex) => {
-                            if (Element.isElement(cell) && cell.type.includes(TABLE_CELL_TYPE) && cell.treatAsTitle) {
-                                treatAsTitleColumns.add(colIndex);
-                            }
-                        });
-                    }
-                });
-                containerElement.children.forEach((row, rowIndex) => {
-                    if (Element.isElement(row) && row.type.includes(TABLE_ROW_TYPE)) {
-                        const rowShouldRemainPinned = shouldRowRemainPinned(row, treatAsTitleColumns);
-                        row.children.forEach((cell, colIndex) => {
-                            if (treatAsTitleColumns.has(colIndex) && Element.isElement(cell) && cell.type.includes(TABLE_CELL_TYPE)) {
-                                const cellPath = [...containerPath, rowIndex, colIndex];
-                                Transforms.unsetNodes(editor, 'treatAsTitle', { at: cellPath });
-                                if (!rowShouldRemainPinned) {
-                                    Transforms.unsetNodes(editor, 'pinned', { at: cellPath });
-                                }
-                            }
-                        });
-                    }
-                });
-            };
-            if (tableHeaderElement) {
-                processContainer(tableHeaderElement);
-            }
-            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);
-        }
-    }, [editor, element]);
-    const setPinnedOnRowCells = useCallback((row, pinned) => {
-        try {
-            for (const [, cell] of row.children.entries()) {
-                if (Element.isElement(cell) && cell.type.includes(TABLE_CELL_TYPE)) {
-                    const cellPath = ReactEditor.findPath(editor, cell);
-                    if (pinned) {
-                        Transforms.setNodes(editor, { pinned: true }, { at: cellPath });
-                    }
-                    else {
-                        Transforms.unsetNodes(editor, 'pinned', { at: cellPath });
-                    }
-                }
-            }
-        }
-        catch (error) {
-            console.warn('Failed to set pinned on row cells:', error);
-        }
-    }, [editor]);
-    const setPinnedOnAllHeaderRows = useCallback((headerElement, pinned) => {
-        try {
-            for (const headerRow of headerElement.children) {
-                if (Element.isElement(headerRow) && headerRow.type.includes(TABLE_ROW_TYPE)) {
-                    setPinnedOnRowCells(headerRow, pinned);
-                }
-            }
-        }
-        catch (error) {
-            console.warn('Failed to set pinned on all header rows:', error);
-        }
-    }, [setPinnedOnRowCells]);
-    const pinRow = useCallback((rowIndex) => {
-        try {
-            const tableStructure = getTableStructure(editor, element);
-            if (!tableStructure)
-                return;
-            const { tableHeaderElement, headerRowCount } = tableStructure;
-            // 先將目前所有的 header rows 都設為 pinned
-            if (tableHeaderElement) {
-                setPinnedOnAllHeaderRows(tableHeaderElement, true);
-            }
-            // 然後將目標 row 移動到 header 中並設為 pinned
-            if (rowIndex >= headerRowCount) {
-                moveRowToHeader(rowIndex, { pinned: true });
-            }
-        }
-        catch (error) {
-            console.warn('Failed to pin row:', error);
-        }
-    }, [editor, element, moveRowToHeader, setPinnedOnAllHeaderRows]);
-    const unpinRow = useCallback(() => {
-        try {
-            const tableStructure = getTableStructure(editor, element);
-            if (!tableStructure)
-                return;
-            const { tableHeaderElement, tableBodyElement, tableHeaderPath } = tableStructure;
-            if (!tableHeaderElement || !tableBodyElement)
-                return;
-            // 檢查 column 與 row 之間是否有交叉 pinned 狀態的關係
-            const shouldColumnRemainPinned = (columnIndex) => {
-                const containers = [tableHeaderElement, tableBodyElement];
-                for (const container of containers) {
-                    if (!Element.isElement(container))
-                        continue;
-                    for (const row of container.children) {
-                        if (Element.isElement(row) && row.type.includes(TABLE_ROW_TYPE)) {
-                            const cell = row.children[columnIndex];
-                            if (Element.isElement(cell) && cell.type.includes(TABLE_CELL_TYPE)) {
-                                // 如果這個 cell 在 body 中且有 pinned 屬性，則 column 應該保持 pinned
-                                if (container.type === tableBodyElement.type && cell.pinned) {
-                                    return true;
-                                }
-                            }
-                        }
-                    }
-                }
-                return false;
-            };
-            tableHeaderElement.children.forEach((row, headerRowIndex) => {
-                if (Element.isElement(row) && row.type.includes(TABLE_ROW_TYPE)) {
-                    row.children.forEach((cell, colIndex) => {
-                        if (Element.isElement(cell) && cell.type.includes(TABLE_CELL_TYPE)) {
-                            const cellPath = [...tableHeaderPath, headerRowIndex, colIndex];
-                            if (!shouldColumnRemainPinned(colIndex)) {
-                                Transforms.unsetNodes(editor, 'pinned', { at: cellPath });
-                            }
-                        }
-                    });
-                }
-            });
-            const tableBodyPath = ReactEditor.findPath(editor, tableBodyElement);
-            for (let i = tableHeaderElement.children.length - 1; i >= 0; i--) {
-                const row = tableHeaderElement.children[i];
-                if (Element.isElement(row) && row.type.includes(TABLE_ROW_TYPE)) {
-                    const fromPath = [...tableHeaderPath, i];
-                    const toPath = [...tableBodyPath, 0];
-                    Transforms.moveNodes(editor, {
-                        at: fromPath,
-                        to: toPath,
-                    });
-                }
-            }
-        }
-        catch (error) {
-            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,
-        addColumnAndRow,
-        deleteRow,
-        deleteColumn,
-        moveRowToBody,
-        moveRowToHeader,
-        unsetColumnAsTitle,
-        setColumnAsTitle,
-        pinColumn,
-        unpinColumn,
-        pinRow,
-        unpinRow,
-        isColumnPinned,
-        isRowPinned,
-        moveOrSwapRow,
-        moveOrSwapColumn,
-    };
-}
-
-export { useTableActions };