@quadrats/react 1.1.8 → 1.1.10

package/table/src/hooks/useTableActions.ts

@@ -1,1394 +0,0 @@
-import { useCallback } from 'react';
-import { Element, Transforms, Editor } from '@quadrats/core';
-import { ReactEditor } from 'slate-react';
-import { RenderTableElementProps, TableContextType } from '../typings';
-import {
-  TABLE_CELL_TYPE,
-  TABLE_HEADER_TYPE,
-  TABLE_DEFAULT_MAX_COLUMNS,
-  TABLE_ROW_TYPE,
-  TableElement,
-} from '@quadrats/common/table';
-import { useQuadrats } from '@quadrats/react';
-import {
-  getTableStructure,
-  createTableCell,
-  getReferenceRowFromHeaderOrBody,
-  hasAnyPinnedRows,
-  hasAnyPinnedColumns,
-  getColumnWidths,
-  calculateColumnWidthsAfterAdd,
-  calculateColumnWidthsAfterDelete,
-  setColumnWidths,
-  moveOrSwapColumnWidth,
-  convertToMixedWidthMode,
-  convertToPercentageMode,
-  getPinnedColumnsInfo,
-} from '../utils/helper';
-
-export function useTableActions(element: RenderTableElementProps['element']) {
-  const editor = useQuadrats();
-
-  const isColumnPinned: TableContextType['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: TableContextType['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: TableElement | undefined;
-
-        if (rowIndex < headerRowCount && tableHeaderElement && Element.isElement(tableHeaderElement)) {
-          // 在 Header 中
-          const rowElement = tableHeaderElement.children[rowIndex];
-
-          if (Element.isElement(rowElement)) {
-            targetRow = rowElement as TableElement;
-          }
-        } else if (tableBodyElement && Element.isElement(tableBodyElement)) {
-          // 在 Body 中
-          const bodyRowIndex = rowIndex - headerRowCount;
-          const rowElement = tableBodyElement.children[bodyRowIndex];
-
-          if (Element.isElement(rowElement)) {
-            targetRow = rowElement as TableElement;
-          }
-        }
-
-        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 as TableElement).pinned) {
-              return false;
-            }
-          }
-        }
-
-        return true;
-      } catch (error) {
-        return false;
-      }
-    },
-    [element, editor],
-  );
-
-  const addColumn: TableContextType['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: number;
-
-        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)] as TableElement;
-                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)] as TableElement;
-              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: TableContextType['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: number;
-        let referenceRowElement: Element | undefined;
-        let targetPath: number[];
-
-        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: TableElement = {
-          type: TABLE_ROW_TYPE,
-          children: Array.from({ length: columnCount }, (_, cellIndex) => {
-            let referenceCell: TableElement | undefined;
-
-            if (referenceRowElement && referenceRowElement.children[cellIndex]) {
-              const cell = referenceRowElement.children[cellIndex];
-
-              if (Element.isElement(cell) && cell.type.includes(TABLE_CELL_TYPE)) {
-                referenceCell = cell as TableElement;
-              }
-            }
-
-            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: TableContextType['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] as TableElement;
-              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] as TableElement;
-            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: TableElement = {
-          type: TABLE_ROW_TYPE,
-          children: Array.from({ length: newColumnCount }, (_, cellIndex) => {
-            let referenceCell: TableElement | undefined;
-
-            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 as TableElement;
-              }
-            } 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 as TableElement;
-                }
-              }
-            }
-
-            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: TableContextType['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: TableContextType['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: TableContextType['moveRowToBody'] = useCallback(
-    (rowIndex: number) => {
-      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 as TableElement).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: TableContextType['moveRowToHeader'] = useCallback(
-    (rowIndex: number, customProps?: Pick<TableElement, 'pinned'>) => {
-      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
-          ? {
-              ...rowToMove,
-              children: rowToMove.children.map((cell) => {
-                if (Element.isElement(cell) && cell.type.includes(TABLE_CELL_TYPE)) {
-                  return {
-                    ...cell,
-                    ...finalProps,
-                  } as TableElement;
-                }
-
-                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: number[];
-
-          if (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 as TableElement).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: TableContextType['unsetColumnAsTitle'] = useCallback(
-    (columnIndex: number) => {
-      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: TableElement) => {
-          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: TableContextType['setColumnAsTitle'] = useCallback(
-    (columnIndex: number, customProps?: Pick<TableElement, 'pinned'>) => {
-      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: TableElement) => {
-          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 ? { treatAsTitle: true, ...finalProps } : { treatAsTitle: true };
-
-                  Transforms.setNodes(editor, nodeProps as Partial<TableElement>, { at: cellPath });
-                } else if (finalProps?.pinned) {
-                  // 確保其他 title column 也有 pinned 屬性以保持一致性
-                  if (Element.isElement(cell) && cell.treatAsTitle) {
-                    Transforms.setNodes(editor, { pinned: true } as Partial<TableElement>, { 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?.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?.pinned && tableWidth > 0) {
-            // 即使沒有移動位置，如果設定了 pinned，也需要轉換為混合模式
-            const currentWidths = getColumnWidths(element);
-
-            if (currentWidths.length > 0) {
-              const { pinnedColumnIndices } = getPinnedColumnsInfo(element);
-
-              // 找出所有已經是 title 的 columns
-              const titleColumnIndices = new Set<number>();
-              const firstRow = containerElement.children[0];
-
-              if (Element.isElement(firstRow) && firstRow.type.includes(TABLE_ROW_TYPE)) {
-                (firstRow.children as TableElement[]).forEach((cell: TableElement, colIndex: number) => {
-                  if (
-                    Element.isElement(cell) &&
-                    (cell as TableElement).type.includes(TABLE_CELL_TYPE) &&
-                    (cell as TableElement).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: TableContextType['pinColumn'] = useCallback(
-    (columnIndex: number) => {
-      try {
-        setColumnAsTitle(columnIndex, { pinned: true });
-      } catch (error) {
-        console.warn('Failed to pin column:', error);
-      }
-    },
-    [setColumnAsTitle],
-  );
-
-  const unpinColumn: TableContextType['unpinColumn'] = useCallback(() => {
-    try {
-      const tableStructure = getTableStructure(editor, element);
-
-      if (!tableStructure) return;
-
-      const { tableHeaderElement, tableBodyElement } = tableStructure;
-
-      // 檢查 column 與 row 之間是否有交叉 pinned 狀態的關係
-      const shouldRowRemainPinned = (rowElement: TableElement, excludeColumns: Set<number>): boolean => {
-        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: TableElement) => {
-        const containerPath = ReactEditor.findPath(editor, containerElement);
-        const treatAsTitleColumns = new Set<number>();
-
-        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 as TableElement, 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: TableElement, pinned: boolean) => {
-      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 } as Partial<TableElement>, { 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: TableElement, pinned: boolean) => {
-      try {
-        for (const headerRow of headerElement.children) {
-          if (Element.isElement(headerRow) && headerRow.type.includes(TABLE_ROW_TYPE)) {
-            setPinnedOnRowCells(headerRow as TableElement, pinned);
-          }
-        }
-      } catch (error) {
-        console.warn('Failed to set pinned on all header rows:', error);
-      }
-    },
-    [setPinnedOnRowCells],
-  );
-
-  const pinRow: TableContextType['pinRow'] = useCallback(
-    (rowIndex: number) => {
-      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: TableContextType['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: number): boolean => {
-        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: number, targetRowIndex: number, mode: 'swap' | 'move' = '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: number[];
-        let sourceLocalIndex: number;
-        let targetLocalIndex: number;
-
-        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: number, targetColumnIndex: number, mode: 'swap' | 'move' = '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: TableElement, colIndex: number): boolean => {
-          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),
-          ) as TableElement[];
-
-          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,
-  };
-}