@quadrats/react 1.1.6 → 1.1.8

package/table/src/hooks/useTableActions.ts

@@ -0,0 +1,1394 @@
+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,
+  };
+}