@quadrats/react 1.1.7 → 1.1.8

package/table/index.cjs.js

@@ -1,4016 +0,0 @@
-'use strict';
-
-var React = require('react');
-var icons = require('@quadrats/icons');
-var core = require('@quadrats/core');
-var list = require('@quadrats/common/list');
-var toolbar = require('@quadrats/react/toolbar');
-var utils = require('@quadrats/react/utils');
-var slateReact = require('slate-react');
-var table = require('@quadrats/common/table');
-var align = require('@quadrats/common/align');
-var react = require('@quadrats/react');
-var components = require('@quadrats/react/components');
-var clsx = require('clsx');
-var slate = require('slate');
-var reactDnd = require('react-dnd');
-var reactDndHtml5Backend = require('react-dnd-html5-backend');
-
-const TableActionsContext = React.createContext(undefined);
-
-const TableMetadataContext = React.createContext(undefined);
-
-const TableStateContext = React.createContext(undefined);
-
-function useTableActionsContext() {
-    const context = React.useContext(TableActionsContext);
-    if (!context) {
-        throw new Error('useTableActionsContext must be used within a TableActionsContext.Provider');
-    }
-    return context;
-}
-
-function useTableMetadata() {
-    const context = React.useContext(TableMetadataContext);
-    if (!context) {
-        throw new Error('useTableMetadata must be used within a TableMetadataContext.Provider');
-    }
-    return context;
-}
-
-function useTableStateContext() {
-    const context = React.useContext(TableStateContext);
-    if (!context) {
-        throw new Error('useTableState must be used within a TableStateContext.Provider');
-    }
-    return context;
-}
-
-/**
- * 分配百分比寬度，確保總和為 100%
- * 前 n-1 個欄位使用四捨五入的平均值，最後一個欄位使用剩餘寬度
- * @param count - 欄位數量
- * @returns 百分比陣列，總和為 100%
- */
-function distributeEqualPercentages(count) {
-    if (count <= 0)
-        return [];
-    if (count === 1)
-        return [100];
-    const percentages = [];
-    const averagePercentage = Math.round((100 / count) * 10) / 10;
-    // 前 n-1 個欄位使用四捨五入的平均值
-    for (let i = 0; i < count - 1; i++) {
-        percentages.push(averagePercentage);
-    }
-    // 最後一個欄位使用剩餘寬度，確保總和為 100%
-    const sumOfFirst = percentages.reduce((sum, val) => sum + val, 0);
-    const lastPercentage = Math.round((100 - sumOfFirst) * 10) / 10;
-    percentages.push(lastPercentage);
-    return percentages;
-}
-/**
- * 等比例縮減現有百分比並加入新欄位
- * 前 n-1 個縮減後的欄位使用四捨五入，最後一個縮減欄位使用剩餘寬度
- * @param currentPercentages - 當前的百分比陣列
- * @param newColumnPercentage - 新欄位要佔的百分比
- * @param insertIndex - 新欄位插入的位置（0-based）
- * @returns 新的百分比陣列，總和為 100%
- */
-function scalePercentagesWithNewColumn(currentPercentages, newColumnPercentage, insertIndex) {
-    if (currentPercentages.length === 0)
-        return [100];
-    const currentTotal = currentPercentages.reduce((sum, val) => sum + val, 0);
-    const targetTotal = 100 - newColumnPercentage;
-    const scaleFactor = targetTotal / currentTotal;
-    const scaledPercentages = [];
-    // 前 n-1 個欄位使用縮放後四捨五入的值
-    for (let i = 0; i < currentPercentages.length - 1; i++) {
-        const scaledValue = Math.round(currentPercentages[i] * scaleFactor * 10) / 10;
-        scaledPercentages.push(scaledValue);
-    }
-    // 最後一個現有欄位使用剩餘寬度，確保總和正確
-    const sumOfScaled = scaledPercentages.reduce((sum, val) => sum + val, 0);
-    const lastScaledValue = Math.round((targetTotal - sumOfScaled) * 10) / 10;
-    scaledPercentages.push(lastScaledValue);
-    // 在指定位置插入新欄位
-    const result = [...scaledPercentages];
-    result.splice(insertIndex, 0, newColumnPercentage);
-    return result;
-}
-/**
- * 提取表格的所有基本元素
- */
-function getTableElements(element) {
-    const tableMainElement = element.children.find((child) => core.Element.isElement(child) && child.type.includes(table.TABLE_MAIN_TYPE));
-    if (!tableMainElement || !core.Element.isElement(tableMainElement)) {
-        return {
-            tableMainElement: null,
-            tableBodyElement: null,
-            tableHeaderElement: null,
-        };
-    }
-    const tableBodyElement = tableMainElement.children.find((child) => core.Element.isElement(child) && child.type.includes(table.TABLE_BODY_TYPE));
-    const tableHeaderElement = tableMainElement.children.find((child) => core.Element.isElement(child) && child.type.includes(table.TABLE_HEADER_TYPE));
-    return {
-        tableMainElement: core.Element.isElement(tableMainElement) ? tableMainElement : null,
-        tableBodyElement: core.Element.isElement(tableBodyElement) ? tableBodyElement : null,
-        tableHeaderElement: core.Element.isElement(tableHeaderElement) ? tableHeaderElement : null,
-    };
-}
-/**
- * 獲取表格的完整結構
- */
-function getTableStructure(editor, element) {
-    var _a;
-    const elements = getTableElements(element);
-    if (!elements.tableMainElement || !elements.tableBodyElement) {
-        return null;
-    }
-    const tableMainPath = slateReact.ReactEditor.findPath(editor, elements.tableMainElement);
-    const tableBodyPath = slateReact.ReactEditor.findPath(editor, elements.tableBodyElement);
-    const tableHeaderPath = elements.tableHeaderElement
-        ? slateReact.ReactEditor.findPath(editor, elements.tableHeaderElement)
-        : null;
-    const headerRowCount = ((_a = elements.tableHeaderElement) === null || _a === void 0 ? void 0 : _a.children.length) || 0;
-    const firstRow = elements.tableBodyElement.children[0];
-    const columnCount = core.Element.isElement(firstRow) ? firstRow.children.length : 0;
-    return Object.assign(Object.assign({}, elements), { tableMainPath,
-        tableBodyPath,
-        tableHeaderPath,
-        headerRowCount,
-        columnCount, firstRow: core.Element.isElement(firstRow) ? firstRow : null });
-}
-/**
- * 檢查是否有任何 pinned columns
- */
-function hasAnyPinnedColumns(tableStructure) {
-    if (core.Element.isElement(tableStructure.tableBodyElement)) {
-        const lastRow = tableStructure.tableBodyElement.children[tableStructure.tableBodyElement.children.length - 1];
-        if (core.Element.isElement(lastRow) && lastRow.type.includes(table.TABLE_ROW_TYPE)) {
-            if (lastRow.children[0] &&
-                core.Element.isElement(lastRow.children[0]) &&
-                lastRow.children[0].type.includes(table.TABLE_CELL_TYPE)) {
-                // 如果最後一行 body row 的第一個 cell 是 pinned，代表有任何 pinned columns
-                return lastRow.children[0].pinned === true;
-            }
-        }
-    }
-    return false;
-}
-/**
- * 檢查是否有任何 pinned rows
- */
-function hasAnyPinnedRows(tableStructure) {
-    if (!tableStructure.tableHeaderElement)
-        return false;
-    if (tableStructure.tableHeaderElement.children[0]) {
-        const firstRow = tableStructure.tableHeaderElement.children[0];
-        if (core.Element.isElement(firstRow) && firstRow.type.includes(table.TABLE_ROW_TYPE)) {
-            // 如果第一個 header row 的所有 cell 都是 pinned，代表有任何 pinned rows
-            return firstRow.children.every((cell) => core.Element.isElement(cell) && cell.type.includes(table.TABLE_CELL_TYPE) && cell.pinned);
-        }
-    }
-    return false;
-}
-/**
- * 創建新的 table cell
- */
-function createTableCell(referenceCell, overrideProps) {
-    var _a;
-    const baseCell = {
-        type: table.TABLE_CELL_TYPE,
-        children: [
-            {
-                type: core.PARAGRAPH_TYPE,
-                children: [{ text: '' }],
-            },
-        ],
-    };
-    if (referenceCell) {
-        if (referenceCell.treatAsTitle) {
-            baseCell.treatAsTitle = true;
-        }
-        if (referenceCell.pinned) {
-            baseCell.pinned = true;
-        }
-        if ((_a = referenceCell.children[0]) === null || _a === void 0 ? void 0 : _a.align) {
-            baseCell.children[0].align = referenceCell.children[0].align;
-        }
-    }
-    return Object.assign(Object.assign({}, baseCell), overrideProps);
-}
-/**
- * 獲取參考 row
- */
-function getReferenceRowFromHeaderOrBody(HeaderOrBodyContainer, rowIndex) {
-    const row = HeaderOrBodyContainer.children[rowIndex];
-    if (!core.Element.isElement(row) || !row.type.includes(table.TABLE_ROW_TYPE)) {
-        return undefined;
-    }
-    return row;
-}
-/**
- * 收集指定範圍的 cells
- * @param tableStructure - 表格結構
- * @param scope - 'table' | 'column'
- * @param columnIndex - 當 scope 為 'column' 時需要指定
- * @returns cells 陣列
- */
-function collectCells(tableStructure, scope, columnIndex) {
-    const containers = [tableStructure.tableBodyElement, tableStructure.tableHeaderElement].filter(Boolean);
-    const cells = [];
-    for (const container of containers) {
-        if (!core.Element.isElement(container))
-            continue;
-        for (const row of container.children) {
-            if (!core.Element.isElement(row))
-                continue;
-            if (scope === 'column' && typeof columnIndex === 'number') {
-                // 收集指定 column 的 cells
-                const cell = row.children[columnIndex];
-                if (core.Element.isElement(cell)) {
-                    cells.push(cell);
-                }
-            }
-            else if (scope === 'table') {
-                // 收集所有 cells
-                for (const cell of row.children) {
-                    if (core.Element.isElement(cell)) {
-                        cells.push(cell);
-                    }
-                }
-            }
-        }
-    }
-    return cells;
-}
-/**
- * 設定指定 cells 的 align
- * @param editor - Slate editor
- * @param cells - 要設定 align 的 cell 元素陣列
- * @param alignValue - align 值
- */
-function setAlignForCells(editor, cells, alignValue) {
-    for (const cell of cells) {
-        if (!core.Element.isElement(cell))
-            continue;
-        const cellPath = slateReact.ReactEditor.findPath(editor, cell);
-        // 對 cell 內的所有可 align 的元素設定 align
-        for (let contentIndex = 0; contentIndex < cell.children.length; contentIndex++) {
-            const content = cell.children[contentIndex];
-            if (core.Element.isElement(content) &&
-                content.type &&
-                align.ALIGNABLE_TYPES.includes(content.type)) {
-                const contentPath = [...cellPath, contentIndex];
-                core.Transforms.setNodes(editor, { [align.ALIGN_TYPE]: alignValue }, {
-                    at: contentPath,
-                });
-            }
-        }
-    }
-}
-/**
- * 獲取指定 cells 的 align 狀態
- * @param cells - 要檢查的 cell 元素陣列
- * @returns 如果所有 cell 的 align 都相同則返回該值，否則返回 'left'
- */
-function getAlignFromCells(cells) {
-    const alignValues = [];
-    for (const cell of cells) {
-        if (!core.Element.isElement(cell))
-            continue;
-        // 檢查 cell 內的第一個可 align 元素
-        for (const content of cell.children) {
-            if (core.Element.isElement(content) &&
-                content.type &&
-                align.ALIGNABLE_TYPES.includes(content.type)) {
-                const alignValue = content[align.ALIGN_TYPE];
-                if (alignValue) {
-                    alignValues.push(alignValue);
-                }
-                break; // 只檢查第一個可 align 元素
-            }
-        }
-    }
-    // 如果所有 align 值都相同，返回該值；否則返回預設的 'left'
-    if (alignValues.length > 0) {
-        const firstAlign = alignValues[0];
-        const allSame = alignValues.every((align) => align === firstAlign);
-        if (allSame) {
-            return firstAlign;
-        }
-    }
-    return 'left';
-}
-/**
- * 獲取釘選欄位的資訊
- * @param tableElement - 表格最外層元素
- * @returns 釘選欄位的索引陣列和總寬度百分比
- */
-function getPinnedColumnsInfo(tableElement) {
-    const { tableBodyElement } = getTableElements(tableElement);
-    if (!tableBodyElement || !core.Element.isElement(tableBodyElement)) {
-        return { pinnedColumnIndices: [], totalPinnedPercentage: 0 };
-    }
-    const firstRow = tableBodyElement.children[0];
-    if (!core.Element.isElement(firstRow)) {
-        return { pinnedColumnIndices: [], totalPinnedPercentage: 0 };
-    }
-    const pinnedColumnIndices = [];
-    let totalPinnedPercentage = 0;
-    firstRow.children.forEach((cell, index) => {
-        if (core.Element.isElement(cell) && cell.treatAsTitle && cell.pinned) {
-            pinnedColumnIndices.push(index);
-            // 如果有設定 columnWidths，使用設定的寬度
-            if (tableElement.columnWidths && tableElement.columnWidths[index]) {
-                const width = tableElement.columnWidths[index];
-                if (width.type === 'percentage') {
-                    totalPinnedPercentage += width.value;
-                }
-            }
-        }
-    });
-    return { pinnedColumnIndices, totalPinnedPercentage };
-}
-/**
- * 強制調整釘選欄位寬度以符合最大限制
- * @param columnWidths - 當前欄位寬度陣列
- * @param pinnedColumnIndices - 釘選欄位索引陣列
- * @returns 調整後的欄位寬度陣列
- */
-function enforcePinnedColumnsMaxWidth(columnWidths, pinnedColumnIndices) {
-    if (pinnedColumnIndices.length === 0) {
-        return columnWidths;
-    }
-    // 計算釘選欄位的總寬度
-    let totalPinnedPercentage = 0;
-    pinnedColumnIndices.forEach((index) => {
-        const width = columnWidths[index];
-        if (width && width.type === 'percentage') {
-            totalPinnedPercentage += width.value;
-        }
-    });
-    // 如果超過最大限制，按比例縮減
-    if (totalPinnedPercentage > table.MAX_PINNED_COLUMNS_WIDTH_PERCENTAGE) {
-        const scaleFactor = table.MAX_PINNED_COLUMNS_WIDTH_PERCENTAGE / totalPinnedPercentage;
-        const newWidths = [...columnWidths];
-        pinnedColumnIndices.forEach((index) => {
-            const width = newWidths[index];
-            if (width && width.type === 'percentage') {
-                newWidths[index] = {
-                    type: 'percentage',
-                    value: Math.round(width.value * scaleFactor * 10) / 10,
-                };
-            }
-        });
-        return newWidths;
-    }
-    return columnWidths;
-}
-/**
- * 獲取表格的欄位寬度陣列
- * 當有釘選欄位時：
- * - 釘選欄位使用 percentage
- * - 未釘選欄位使用 pixel（基於剩餘空間平均分配）
- * @param tableElement - 表格最外層元素
- * @param tableWidth - 表格容器的實際寬度（pixel），用於計算 pixel 寬度
- * @returns 欄位寬度陣列
- */
-function getColumnWidths(tableElement, tableWidth) {
-    const tableStructure = getTableElements(tableElement);
-    const { tableBodyElement } = tableStructure;
-    if (!tableBodyElement || !core.Element.isElement(tableBodyElement)) {
-        return [];
-    }
-    const firstRow = tableBodyElement.children[0];
-    if (!core.Element.isElement(firstRow)) {
-        return [];
-    }
-    const columnCount = firstRow.children.length;
-    // 獲取釘選欄位資訊
-    const { pinnedColumnIndices } = getPinnedColumnsInfo(tableElement);
-    const hasPinnedColumns = pinnedColumnIndices.length > 0;
-    // 如果 tableElement 有 columnWidths
-    if (tableElement.columnWidths && tableElement.columnWidths.length === columnCount) {
-        let widths = [...tableElement.columnWidths];
-        // 強制檢查釘選欄位是否超過 40%，如果超過則調整
-        if (hasPinnedColumns) {
-            widths = enforcePinnedColumnsMaxWidth(widths, pinnedColumnIndices);
-        }
-        return widths;
-    }
-    // 如果沒有設定 columnWidths，需要初始化
-    // 如果有釘選欄位，使用混合模式
-    if (hasPinnedColumns && tableWidth) {
-        const widths = [];
-        // 先計算釘選欄位的總寬度
-        const pinnedPercentagePerColumn = Math.min(Math.round((table.MAX_PINNED_COLUMNS_WIDTH_PERCENTAGE / pinnedColumnIndices.length) * 10) / 10, table.MAX_PINNED_COLUMNS_WIDTH_PERCENTAGE);
-        // 計算實際釘選欄位總百分比
-        const actualPinnedPercentage = Math.min(pinnedPercentagePerColumn * pinnedColumnIndices.length, table.MAX_PINNED_COLUMNS_WIDTH_PERCENTAGE);
-        // 計算剩餘空間（pixel）
-        const remainingPercentage = 100 - actualPinnedPercentage;
-        const remainingPixelWidth = (tableWidth * remainingPercentage) / 100;
-        const unpinnedColumnCount = columnCount - pinnedColumnIndices.length;
-        const pixelWidthPerColumn = unpinnedColumnCount > 0 ? Math.floor(remainingPixelWidth / unpinnedColumnCount) : 0;
-        // 建立寬度陣列
-        for (let i = 0; i < columnCount; i++) {
-            if (pinnedColumnIndices.includes(i)) {
-                widths.push({ type: 'percentage', value: pinnedPercentagePerColumn });
-            }
-            else {
-                widths.push({ type: 'pixel', value: pixelWidthPerColumn });
-            }
-        }
-        return widths;
-    }
-    // 否則返回平均分配的 percentage（總和為 100%）
-    const percentages = distributeEqualPercentages(columnCount);
-    return percentages.map((value) => ({ type: 'percentage', value }));
-}
-/**
- * 設定表格的欄位寬度
- * @param editor - Slate editor
- * @param tableElement - 表格最外層元素
- * @param columnWidths - 欄位寬度陣列
- */
-function setColumnWidths(editor, tableElement, columnWidths) {
-    const tablePath = slateReact.ReactEditor.findPath(editor, tableElement);
-    core.Transforms.setNodes(editor, { columnWidths: [...columnWidths] }, { at: tablePath });
-}
-/**
- * 計算新增欄位後的欄位寬度
- * - 如果所有欄位都是 percentage：按比例縮減現有欄位，新欄位佔平均寬度
- * - 如果有混合模式（percentage + pixel）：
- *   * 如果用戶操作的欄位是 pinned column：新欄位使用 percentage（需要調整 pinned columns 的百分比）
- *   * 如果用戶操作的欄位是 unpinned column：新欄位使用 pixel（與其他 pixel 欄位相同寬度）
- *
- * @param currentWidths - 當前的欄位寬度陣列
- * @param insertIndex - 新欄位插入的位置（0-based）
- * @param pinnedColumnIndices - 當前釘選欄位的索引陣列（插入前的索引）
- * @param operatingColumnIndex - 用戶實際操作的欄位索引（用於判斷是在 pinned 還是 unpinned column 操作）
- * @returns 新的欄位寬度陣列
- */
-function calculateColumnWidthsAfterAdd(currentWidths, insertIndex, pinnedColumnIndices = [], operatingColumnIndex) {
-    const newColumnCount = currentWidths.length + 1;
-    // 分離 percentage 和 pixel 欄位
-    const percentageColumns = [];
-    const pixelColumns = [];
-    currentWidths.forEach((width, index) => {
-        if (width.type === 'percentage') {
-            percentageColumns.push({ index, value: width.value });
-        }
-        else {
-            pixelColumns.push({ index, value: width.value });
-        }
-    });
-    // 如果所有欄位都是 percentage（正常模式，無 pinned columns）
-    if (percentageColumns.length === currentWidths.length) {
-        // 計算新欄位的平均百分比
-        const averagePercentage = Math.round((100 / newColumnCount) * 10) / 10;
-        // 提取當前的百分比值
-        const currentPercentages = currentWidths.map((w) => w.value);
-        // 等比例縮減現有欄位並插入新欄位
-        const newPercentages = scalePercentagesWithNewColumn(currentPercentages, averagePercentage, insertIndex);
-        return newPercentages.map((value) => ({ type: 'percentage', value }));
-    }
-    // 如果有混合的 pixel 和 percentage 欄位（有 pinned columns）
-    if (percentageColumns.length && pixelColumns.length) {
-        // 判斷新欄位是否應該是 pinned column
-        const isNewColumnPinned = typeof operatingColumnIndex === 'number' ? pinnedColumnIndices.includes(operatingColumnIndex) : false;
-        if (isNewColumnPinned) {
-            // 新欄位應該是 pinned column，使用 percentage
-            // 需要調整所有 pinned columns 的百分比
-            const newWidths = [];
-            const pinnedColumnCount = pinnedColumnIndices.length + 1; // 加上新欄位
-            const pinnedPercentagePerColumn = Math.min(Math.round((table.MAX_PINNED_COLUMNS_WIDTH_PERCENTAGE / pinnedColumnCount) * 10) / 10, table.MAX_PINNED_COLUMNS_WIDTH_PERCENTAGE);
-            currentWidths.forEach((width, index) => {
-                if (index === insertIndex) {
-                    newWidths.push({ type: 'percentage', value: pinnedPercentagePerColumn });
-                }
-                if (pinnedColumnIndices.includes(index)) {
-                    // 調整現有 pinned column 的百分比
-                    newWidths.push({ type: 'percentage', value: pinnedPercentagePerColumn });
-                }
-                else {
-                    // 保持非 pinned column (pixel) 不變
-                    newWidths.push(Object.assign({}, width));
-                }
-            });
-            // 如果插入位置在最後（但仍在 pinned 區域內）
-            if (insertIndex >= currentWidths.length) {
-                newWidths.push({ type: 'percentage', value: pinnedPercentagePerColumn });
-            }
-            return newWidths;
-        }
-        else {
-            // 新欄位應該是 unpinned column，使用 pixel
-            const newWidths = [];
-            // 找到最後一個 pixel 欄位的寬度，新欄位將複製這個寬度
-            const lastPixelWidth = pixelColumns.length > 0 ? pixelColumns[pixelColumns.length - 1].value : 150;
-            currentWidths.forEach((width, index) => {
-                if (index === insertIndex) {
-                    newWidths.push({ type: 'pixel', value: lastPixelWidth });
-                }
-                newWidths.push(Object.assign({}, width));
-            });
-            // 如果插入位置在最後
-            if (insertIndex >= currentWidths.length) {
-                newWidths.push({ type: 'pixel', value: lastPixelWidth });
-            }
-            return newWidths;
-        }
-    }
-    // Fallback: 等比例縮減並插入新欄位
-    const averagePercentage = Math.round((100 / newColumnCount) * 10) / 10;
-    // 提取當前的百分比值（假設都是 percentage，否則轉為平均分配）
-    const currentPercentages = currentWidths.map((w) => (w.type === 'percentage' ? w.value : 100 / currentWidths.length));
-    // 等比例縮減現有欄位並插入新欄位
-    const newPercentages = scalePercentagesWithNewColumn(currentPercentages, averagePercentage, insertIndex);
-    return newPercentages.map((value) => ({ type: 'percentage', value }));
-}
-/**
- * 計算刪除欄位後的欄位寬度
- * 此函數會智慧處理欄位寬度的重新分配：
- * - 如果所有欄位都是 percentage：按比例放大剩餘欄位
- * - 如果有 pixel 欄位：保持 pixel 欄位不變，只調整 percentage 欄位
- *
- * @param currentWidths - 當前的欄位寬度陣列
- * @param deleteIndex - 要刪除的欄位索引（0-based）
- * @returns 新的欄位寬度陣列
- */
-function calculateColumnWidthsAfterDelete(currentWidths, deleteIndex) {
-    if (currentWidths.length <= 1) {
-        return currentWidths;
-    }
-    const deletedWidth = currentWidths[deleteIndex];
-    const newWidths = currentWidths.filter((_, index) => index !== deleteIndex);
-    // 如果刪除的是 pixel 欄位，其他欄位保持不變
-    if (deletedWidth.type === 'pixel') {
-        return newWidths;
-    }
-    // 刪除的是 percentage 欄位
-    const deletedPercentage = deletedWidth.value;
-    // 分離 percentage 和 pixel 欄位
-    const percentageIndices = [];
-    newWidths.forEach((width, index) => {
-        if (width.type === 'percentage') {
-            percentageIndices.push(index);
-        }
-    });
-    // 如果沒有 percentage 欄位，直接返回
-    if (percentageIndices.length === 0) {
-        return newWidths;
-    }
-    // 將刪除欄位的百分比按比例分配給其他 percentage 欄位
-    const currentPercentageTotal = percentageIndices.reduce((sum, index) => sum + newWidths[index].value, 0);
-    return newWidths.map((width) => {
-        if (width.type === 'percentage') {
-            const proportion = width.value / currentPercentageTotal;
-            const additionalPercentage = deletedPercentage * proportion;
-            const newValue = Math.round((width.value + additionalPercentage) * 10) / 10;
-            return { type: 'percentage', value: newValue };
-        }
-        return width;
-    });
-}
-/**
- * 計算拖曳後的欄位寬度
- * 處理釘選欄位的特殊邏輯：
- * - 情況 1：未釘選欄位（pixel）與未釘選欄位（pixel）之間：直接改變 pixel 值，允許超出容器
- * - 情況 2：釘選欄位（percentage）與釘選欄位（percentage）之間：互相調整，且總和不超過 40%
- * - 情況 3：釘選欄位（percentage）與未釘選欄位（pixel）之間：
- *   * 只調整釘選欄位的百分比（不超過 40% 總限制）
- *   * 當 table 未溢出（寬度 < container）時，重新計算所有未釘選欄位的 pixel 值以維持 100%
- *   * 當 table 已溢出時，只調整下一個欄位的 pixel 值
- *   * 當達到 40% 上限時，停止調整
- * - 預設情況：兩個都是 percentage 但都不是釘選欄位（正常模式）
- *
- * @param currentWidths - 當前的欄位寬度陣列
- * @param columnIndex - 被調整的欄位索引
- * @param deltaPercentage - 寬度變化量（百分比）
- * @param deltaPixel - 寬度變化量（pixel）
- * @param pinnedColumnIndices - 釘選欄位的索引陣列
- * @returns 新的欄位寬度陣列
- */
-function calculateResizedColumnWidths(currentWidths, columnIndex, deltaPercentage, deltaPixel, pinnedColumnIndices = []) {
-    const newWidths = [...currentWidths];
-    const nextColumnIndex = columnIndex + 1;
-    const isLastColumn = nextColumnIndex >= newWidths.length;
-    const currentCol = newWidths[columnIndex];
-    const nextCol = isLastColumn ? null : newWidths[nextColumnIndex];
-    const isCurrentPinned = pinnedColumnIndices.includes(columnIndex);
-    const isNextPinned = nextCol ? pinnedColumnIndices.includes(nextColumnIndex) : false;
-    // **特殊情況：最後一欄，只調整當前欄位**
-    // 最後一欄必定不是 pinned column
-    if (isLastColumn) {
-        if (currentCol.type === 'pixel') {
-            // pixel 欄位（有 pinned column 情境）：直接調整寬度
-            const currentPixel = currentCol.value;
-            const newCurrentPixel = Math.max(table.MIN_COLUMN_WIDTH_PIXEL, currentPixel + deltaPixel);
-            newWidths[columnIndex] = { type: 'pixel', value: Math.floor(newCurrentPixel) };
-        }
-        else if (currentCol.type === 'percentage') {
-            // percentage 欄位（無 pinned column 情境）：調整當前欄位並將差額分配給前一欄以確保總和為 100%
-            const currentWidth = currentCol.value;
-            let newCurrentWidth = Math.max(table.MIN_COLUMN_WIDTH_PERCENTAGE, Math.round((currentWidth + deltaPercentage) * 10) / 10);
-            // 計算其他欄位的總百分比
-            const otherColumnsTotal = newWidths
-                .filter((_, idx) => idx !== columnIndex)
-                .reduce((sum, width) => sum + (width.type === 'percentage' ? width.value : 0), 0);
-            // 確保總和為 100%
-            const maxAllowedWidth = 100 - otherColumnsTotal;
-            newCurrentWidth = Math.min(newCurrentWidth, maxAllowedWidth);
-            // 計算寬度變化量
-            const widthChange = currentWidth - newCurrentWidth;
-            // 如果有寬度變化且存在前一欄，將差額分配給前一欄
-            if (widthChange !== 0 && columnIndex > 0) {
-                const prevCol = newWidths[columnIndex - 1];
-                if (prevCol.type === 'percentage') {
-                    const newPrevWidth = Math.max(table.MIN_COLUMN_WIDTH_PERCENTAGE, Math.round((prevCol.value + widthChange) * 10) / 10);
-                    newWidths[columnIndex - 1] = { type: 'percentage', value: newPrevWidth };
-                }
-            }
-            newWidths[columnIndex] = { type: 'percentage', value: newCurrentWidth };
-        }
-        return newWidths;
-    }
-    // 以下是有 next column 的邏輯
-    if (!nextCol) {
-        return newWidths;
-    }
-    // 情況 1：當前欄位是 pixel（未釘選），下一欄位也是 pixel（未釘選）
-    if (currentCol.type === 'pixel' && nextCol.type === 'pixel') {
-        const currentPixel = currentCol.value;
-        const newCurrentPixel = Math.max(table.MIN_COLUMN_WIDTH_PIXEL, currentPixel + deltaPixel);
-        newWidths[columnIndex] = { type: 'pixel', value: Math.floor(newCurrentPixel) };
-        return newWidths;
-    }
-    // 情況 2：當前欄位是 percentage（釘選），下一欄位也是 percentage（釘選）
-    if (currentCol.type === 'percentage' && nextCol.type === 'percentage' && isCurrentPinned && isNextPinned) {
-        const currentWidth = currentCol.value;
-        const nextWidth = nextCol.value;
-        // 計算新寬度
-        let newCurrentWidth = Math.round((currentWidth + deltaPercentage) * 10) / 10;
-        let newNextWidth = Math.round((nextWidth - deltaPercentage) * 10) / 10;
-        if (newCurrentWidth < table.MIN_COLUMN_WIDTH_PERCENTAGE) {
-            newCurrentWidth = table.MIN_COLUMN_WIDTH_PERCENTAGE;
-            newNextWidth = Math.round((currentWidth + nextWidth - table.MIN_COLUMN_WIDTH_PERCENTAGE) * 10) / 10;
-        }
-        else if (newNextWidth < table.MIN_COLUMN_WIDTH_PERCENTAGE) {
-            newNextWidth = table.MIN_COLUMN_WIDTH_PERCENTAGE;
-            newCurrentWidth = Math.round((currentWidth + nextWidth - table.MIN_COLUMN_WIDTH_PERCENTAGE) * 10) / 10;
-        }
-        // 確保釘選欄位總和不超過 40%
-        const otherPinnedTotal = pinnedColumnIndices
-            .filter((idx) => idx !== columnIndex && idx !== nextColumnIndex)
-            .reduce((sum, idx) => sum + (newWidths[idx].type === 'percentage' ? newWidths[idx].value : 0), 0);
-        const twoColumnsTotal = newCurrentWidth + newNextWidth;
-        if (otherPinnedTotal + twoColumnsTotal > table.MAX_PINNED_COLUMNS_WIDTH_PERCENTAGE) {
-            // 按比例縮減這兩個欄位
-            const allowedTotal = table.MAX_PINNED_COLUMNS_WIDTH_PERCENTAGE - otherPinnedTotal;
-            const scale = allowedTotal / twoColumnsTotal;
-            newCurrentWidth = Math.round(newCurrentWidth * scale * 10) / 10;
-            newNextWidth = Math.round(newNextWidth * scale * 10) / 10;
-        }
-        newWidths[columnIndex] = { type: 'percentage', value: newCurrentWidth };
-        newWidths[nextColumnIndex] = { type: 'percentage', value: newNextWidth };
-        return newWidths;
-    }
-    // 情況 3：當前欄位是 percentage（釘選），下一欄位是 pixel（未釘選）
-    if (currentCol.type === 'percentage' && nextCol.type === 'pixel' && isCurrentPinned && !isNextPinned) {
-        const currentWidth = currentCol.value;
-        // 計算新的釘選欄位寬度
-        let newCurrentWidth = Math.round((currentWidth + deltaPercentage) * 10) / 10;
-        newCurrentWidth = Math.max(table.MIN_COLUMN_WIDTH_PERCENTAGE, newCurrentWidth);
-        // 確保所有釘選欄位總和不超過 40%
-        const otherPinnedTotal = pinnedColumnIndices
-            .filter((idx) => idx !== columnIndex)
-            .reduce((sum, idx) => sum + (newWidths[idx].type === 'percentage' ? newWidths[idx].value : 0), 0);
-        const maxAllowedWidth = table.MAX_PINNED_COLUMNS_WIDTH_PERCENTAGE - otherPinnedTotal;
-        // 計算調整前後的實際寬度
-        const beforeAdjustWidth = Math.min(currentWidth, maxAllowedWidth);
-        const afterAdjustWidth = Math.min(newCurrentWidth, maxAllowedWidth);
-        // 如果調整前後的寬度相同（表示已經被限制在上限），則不調整任何欄位
-        if (Math.abs(afterAdjustWidth - beforeAdjustWidth) < 0.1) {
-            return newWidths;
-        }
-        // 應用上限限制
-        newCurrentWidth = afterAdjustWidth;
-        // 更新當前釘選欄位的寬度
-        newWidths[columnIndex] = { type: 'percentage', value: newCurrentWidth };
-        return newWidths;
-    }
-    // 預設情況：兩個都是 percentage 但都不是釘選欄位（正常模式）
-    if (currentCol.type === 'percentage' && nextCol.type === 'percentage') {
-        const currentWidth = currentCol.value;
-        const nextWidth = nextCol.value;
-        let newCurrentWidth = Math.round((currentWidth + deltaPercentage) * 10) / 10;
-        let newNextWidth = Math.round((nextWidth - deltaPercentage) * 10) / 10;
-        if (newCurrentWidth < table.MIN_COLUMN_WIDTH_PERCENTAGE) {
-            newCurrentWidth = table.MIN_COLUMN_WIDTH_PERCENTAGE;
-            newNextWidth = Math.round((currentWidth + nextWidth - table.MIN_COLUMN_WIDTH_PERCENTAGE) * 10) / 10;
-        }
-        else if (newNextWidth < table.MIN_COLUMN_WIDTH_PERCENTAGE) {
-            newNextWidth = table.MIN_COLUMN_WIDTH_PERCENTAGE;
-            newCurrentWidth = Math.round((currentWidth + nextWidth - table.MIN_COLUMN_WIDTH_PERCENTAGE) * 10) / 10;
-        }
-        newWidths[columnIndex] = { type: 'percentage', value: newCurrentWidth };
-        newWidths[nextColumnIndex] = { type: 'percentage', value: newNextWidth };
-        return newWidths;
-    }
-    return newWidths;
-}
-/**
- * 移動或交換欄位寬度設定
- * @param currentWidths - 當前的欄位寬度陣列
- * @param sourceIndex - 來源欄位的索引
- * @param targetIndex - 目標欄位的索引
- * @param mode - 'swap' 為交換兩個位置，'move' 為移動到目標位置
- * @returns 處理後的欄位寬度陣列
- */
-function moveOrSwapColumnWidth(currentWidths, sourceIndex, targetIndex, mode = 'move') {
-    if (sourceIndex === targetIndex ||
-        sourceIndex < 0 ||
-        targetIndex < 0 ||
-        sourceIndex >= currentWidths.length ||
-        targetIndex >= currentWidths.length) {
-        return currentWidths;
-    }
-    const newWidths = [...currentWidths];
-    if (mode === 'swap') {
-        // swap 邏輯：直接交換兩個位置的值
-        const temp = newWidths[sourceIndex];
-        newWidths[sourceIndex] = newWidths[targetIndex];
-        newWidths[targetIndex] = temp;
-    }
-    else {
-        // move 邏輯：移除再插入
-        const [movedWidth] = newWidths.splice(sourceIndex, 1);
-        newWidths.splice(targetIndex, 0, movedWidth);
-    }
-    return newWidths;
-}
-/**
- * 將 columnWidths 轉換為混合模式（釘選欄位用 percentage，未釘選欄位用 pixel）
- * @param currentWidths - 當前的欄位寬度陣列
- * @param pinnedColumnIndices - 釘選欄位的索引陣列
- * @param tableWidth - 表格的實際寬度（pixel）
- * @returns 轉換後的欄位寬度陣列
- */
-function convertToMixedWidthMode(currentWidths, pinnedColumnIndices, tableWidth) {
-    if (pinnedColumnIndices.length === 0 || tableWidth === 0) {
-        return currentWidths;
-    }
-    const newWidths = [];
-    // 計算釘選欄位的總百分比
-    let totalPinnedPercentage = 0;
-    pinnedColumnIndices.forEach((index) => {
-        const width = currentWidths[index];
-        if (width) {
-            if (width.type === 'percentage') {
-                totalPinnedPercentage += width.value;
-            }
-            else {
-                // 如果是 pixel，轉換為百分比
-                const percentage = (width.value / tableWidth) * 100;
-                totalPinnedPercentage += percentage;
-            }
-        }
-    });
-    // 確保釘選欄位總和不超過指定範圍
-    const scaleFactor = totalPinnedPercentage > table.MAX_PINNED_COLUMNS_WIDTH_PERCENTAGE
-        ? table.MAX_PINNED_COLUMNS_WIDTH_PERCENTAGE / totalPinnedPercentage
-        : 1;
-    totalPinnedPercentage = Math.min(totalPinnedPercentage, table.MAX_PINNED_COLUMNS_WIDTH_PERCENTAGE);
-    // 調整釘選欄位的百分比
-    currentWidths.forEach((width, index) => {
-        if (pinnedColumnIndices.includes(index)) {
-            if (width.type === 'percentage') {
-                currentWidths[index] = {
-                    type: 'percentage',
-                    value: Math.round(width.value * scaleFactor * 10) / 10,
-                };
-            }
-            else {
-                const percentage = (width.value / tableWidth) * 100;
-                currentWidths[index] = {
-                    type: 'percentage',
-                    value: Math.round(percentage * scaleFactor * 10) / 10,
-                };
-            }
-        }
-    });
-    // 計算剩餘空間（用於未釘選欄位）
-    const remainingPercentage = 100 - totalPinnedPercentage;
-    const remainingPixelWidth = (tableWidth * remainingPercentage) / 100;
-    const unpinnedColumnCount = currentWidths.length - pinnedColumnIndices.length;
-    const pixelWidthPerColumn = unpinnedColumnCount > 0 ? Math.floor(remainingPixelWidth / unpinnedColumnCount) : 0;
-    // 建立新的寬度陣列
-    currentWidths.forEach((width, index) => {
-        if (pinnedColumnIndices.includes(index)) {
-            // 釘選欄位：使用 percentage
-            newWidths.push(width);
-        }
-        else {
-            // 未釘選欄位：使用 pixel
-            newWidths.push({ type: 'pixel', value: pixelWidthPerColumn });
-        }
-    });
-    return newWidths;
-}
-/**
- * 將混合模式的欄位寬度轉換回純百分比模式
- * 當所有 pinned columns 都被 unpin 後，需要將 pixel 欄位轉換回 percentage
- * @param currentWidths - 當前的欄位寬度陣列（混合模式）
- * @returns 轉換後的純百分比欄位寬度陣列，總和為 100%
- */
-function convertToPercentageMode(currentWidths) {
-    if (currentWidths.length === 0)
-        return [];
-    // 檢查是否有 pixel 欄位
-    const hasPixelColumns = currentWidths.some((width) => width.type === 'pixel');
-    // 如果沒有 pixel 欄位，表示已經是純百分比模式，直接返回
-    if (!hasPixelColumns) {
-        return currentWidths;
-    }
-    // 使用 distributeEqualPercentages 重新分配百分比，確保總和為 100%
-    const percentages = distributeEqualPercentages(currentWidths.length);
-    return percentages.map((value) => ({ type: 'percentage', value }));
-}
-
-/** 檢查 table cell 是否在 focused 狀態 */
-function useTableCellFocused(element, editor) {
-    const { tableSelectedOn, setTableHoveredOn, setTableSelectedOn } = useTableStateContext();
-    const cellPath = slateReact.ReactEditor.findPath(editor, element);
-    const focused = slateReact.useFocused();
-    const isCellFocused = React.useMemo(() => {
-        if (!focused || !editor.selection || (tableSelectedOn === null || tableSelectedOn === void 0 ? void 0 : tableSelectedOn.region))
-            return false;
-        const isSelectionCollapsed = core.Range.isCollapsed(editor.selection);
-        if (!isSelectionCollapsed)
-            return false;
-        const selectionPath = editor.selection.anchor.path;
-        return selectionPath.slice(0, cellPath.length).every((segment, index) => segment === cellPath[index]);
-    }, [focused, editor.selection, cellPath, tableSelectedOn]);
-    const isPreviousCellFocused = utils.usePreviousValue(isCellFocused);
-    React.useEffect(() => {
-        if (isCellFocused) {
-            setTableHoveredOn(undefined);
-        }
-        if (isCellFocused && !isPreviousCellFocused) {
-            setTableSelectedOn(undefined);
-        }
-    }, [isCellFocused, isPreviousCellFocused, setTableSelectedOn, setTableHoveredOn]);
-    return isCellFocused;
-}
-/** 取得 table cell 在 table 裡的 columnIndex 及 rowIndex */
-function useTableCellPosition(element, _editor) {
-    const { cellPositions } = useTableMetadata();
-    const cellPosition = React.useMemo(() => {
-        const position = cellPositions.get(element);
-        if (position) {
-            return position;
-        }
-        return { columnIndex: -1, rowIndex: -1 };
-    }, [cellPositions, element]);
-    return cellPosition;
-}
-/** 轉換 paragraph, order list, un-order list */
-function useTableCellTransformContent(element, editor) {
-    const splitContentByNewlines = React.useCallback((cellPath) => {
-        try {
-            const cellNode = core.Node.get(editor, cellPath);
-            if (!core.Element.isElement(cellNode))
-                return false;
-            let hasChanges = false;
-            const nodesToProcess = [...cellNode.children];
-            // Process each content node in reverse order to maintain indices
-            for (let contentIndex = nodesToProcess.length - 1; contentIndex >= 0; contentIndex--) {
-                const contentNode = nodesToProcess[contentIndex];
-                if (core.Element.isElement(contentNode)) {
-                    const textContent = core.Node.string(contentNode);
-                    if (textContent.includes('\n')) {
-                        const contentPath = [...cellPath, contentIndex];
-                        // Verify the path is still valid
-                        try {
-                            const currentNode = core.Node.get(editor, contentPath);
-                            if (!currentNode)
-                                continue;
-                        }
-                        catch (_a) {
-                            continue;
-                        }
-                        // Split by newlines and filter out empty strings
-                        const lines = textContent.split('\n').filter((line) => line.trim() !== '');
-                        if (lines.length > 1) {
-                            hasChanges = true;
-                            // Use Editor.withoutNormalizing to batch operations
-                            core.Editor.withoutNormalizing(editor, () => {
-                                core.Transforms.removeNodes(editor, { at: contentPath });
-                                lines.forEach((line, lineIndex) => {
-                                    const newParagraph = {
-                                        type: core.PARAGRAPH_TYPE,
-                                        children: [{ text: line.trim() }],
-                                    };
-                                    core.Transforms.insertNodes(editor, newParagraph, {
-                                        at: [...cellPath, contentIndex + lineIndex],
-                                    });
-                                });
-                            });
-                        }
-                    }
-                }
-            }
-            return hasChanges;
-        }
-        catch (error) {
-            console.warn('Failed to split content by newlines:', error);
-            return false;
-        }
-    }, [editor]);
-    const transformCellContent = React.useCallback((elementType) => {
-        try {
-            const cellPath = slateReact.ReactEditor.findPath(editor, element);
-            const listHelper = list.createList();
-            if (elementType === list.LIST_TYPES.ol || elementType === list.LIST_TYPES.ul) {
-                /** 將 paragraph 的換行符號轉換成 list item */
-                const wasSplit = splitContentByNewlines(cellPath);
-                if (wasSplit) {
-                    core.Editor.normalize(editor, { force: true });
-                }
-            }
-            // 選擇整個儲存格內容
-            const cellStartPoint = core.Editor.start(editor, cellPath);
-            const cellEndPoint = core.Editor.end(editor, cellPath);
-            core.Transforms.select(editor, { anchor: cellStartPoint, focus: cellEndPoint });
-            if (elementType === list.LIST_TYPES.ol || elementType === list.LIST_TYPES.ul) {
-                listHelper.toggleList(editor, elementType, core.PARAGRAPH_TYPE);
-            }
-            else if (elementType === core.PARAGRAPH_TYPE) {
-                const cellNode = core.Node.get(editor, cellPath);
-                if (core.Element.isElement(cellNode)) {
-                    const currentListElement = cellNode.children.find((child) => core.Element.isElement(child) && [list.LIST_TYPES.ol, list.LIST_TYPES.ul].includes(child.type));
-                    if (currentListElement && core.Element.isElement(currentListElement)) {
-                        listHelper.toggleList(editor, currentListElement.type, core.PARAGRAPH_TYPE);
-                    }
-                }
-            }
-            // 因為底層結構改變了，取消選取以避免錯誤
-            core.Transforms.deselect(editor);
-        }
-        catch (error) {
-            console.warn('Failed to transform cell content:', error);
-        }
-    }, [editor, element, splitContentByNewlines]);
-    return transformCellContent;
-}
-/** 設定 column 或 table 的 align */
-function useTableCellAlign(tableElement, editor) {
-    const setAlign = React.useCallback((alignValue, scope, columnIndex) => {
-        const tableStructure = getTableStructure(editor, tableElement);
-        if (!tableStructure) {
-            console.warn('Failed to get table structure');
-            return;
-        }
-        // 使用 helper 函數收集 cells
-        const cells = collectCells(tableStructure, scope, columnIndex);
-        // 使用 helper 函數設定 align
-        core.Editor.withoutNormalizing(editor, () => {
-            setAlignForCells(editor, cells, alignValue);
-        });
-    }, [editor, tableElement]);
-    return setAlign;
-}
-/** 獲取 column 或 table 的 align 狀態 */
-function useTableCellAlignStatus(tableElement, editor) {
-    const getAlign = React.useCallback((scope, columnIndex) => {
-        const tableStructure = getTableStructure(editor, tableElement);
-        if (!tableStructure) {
-            return 'left';
-        }
-        const cells = collectCells(tableStructure, scope, columnIndex);
-        return getAlignFromCells(cells);
-    }, [editor, tableElement]);
-    return getAlign;
-}
-
-/**
- * 將所有與 toolbar icons 相關的邏輯集中管理
- */
-function useTableCellToolbarActions({ element, cellPosition, isHeader, transformCellContent, }) {
-    const editor = slateReact.useSlateStatic();
-    const { tableSelectedOn, setTableSelectedOn } = useTableStateContext();
-    const { tableElement, columnCount, rowCount, isReachMaximumColumns, isReachMinimumNormalColumns, isReachMinimumBodyRows, isColumnPinned, isRowPinned, } = useTableMetadata();
-    const setAlign = useTableCellAlign(tableElement, editor);
-    const getAlign = useTableCellAlignStatus(tableElement, editor);
-    const { deleteRow, deleteColumn, addRow, addColumn, moveRowToBody, moveRowToHeader, unsetColumnAsTitle, setColumnAsTitle, pinColumn, unpinColumn, pinRow, unpinRow, moveOrSwapRow, moveOrSwapColumn, } = useTableActionsContext();
-    // 獲取當前 cell 內容的類型（用於顯示對應的 icon）
-    const getCurrentContentType = React.useMemo(() => {
-        // 檢查 cell 的第一個 child 的類型
-        if (element.children && element.children.length > 0) {
-            const firstChild = element.children[0];
-            if (core.Element.isElement(firstChild)) {
-                const childType = firstChild.type;
-                // 檢查是否為 list 類型
-                if (childType === list.LIST_TYPES.ul) {
-                    return list.LIST_TYPES.ul;
-                }
-                if (childType === list.LIST_TYPES.ol) {
-                    return list.LIST_TYPES.ol;
-                }
-                // 檢查是否為 paragraph（預設）
-                if (childType === core.PARAGRAPH_TYPE) {
-                    return core.PARAGRAPH_TYPE;
-                }
-            }
-        }
-        // 預設返回 paragraph
-        return core.PARAGRAPH_TYPE;
-    }, [element.children]);
-    // 根據當前內容類型選擇對應的 icon
-    const getCurrentIcon = React.useMemo(() => {
-        if (getCurrentContentType === list.LIST_TYPES.ul) {
-            return icons.UnorderedList;
-        }
-        if (getCurrentContentType === list.LIST_TYPES.ol) {
-            return icons.OrderedList;
-        }
-        return icons.Paragraph;
-    }, [getCurrentContentType]);
-    // Focus toolbar - 當 cell 被 focus 時顯示的工具列
-    const focusToolbarIconGroups = React.useMemo(() => {
-        return [
-            {
-                icons: [
-                    React.createElement(toolbar.ToolbarGroupIcon, { key: "typography-change", icon: getCurrentIcon },
-                        React.createElement(toolbar.ToolbarIcon, { icon: icons.Paragraph, onClick: () => {
-                                transformCellContent(core.PARAGRAPH_TYPE);
-                            } }),
-                        React.createElement(toolbar.ToolbarIcon, { icon: icons.UnorderedList, onClick: () => {
-                                transformCellContent(list.LIST_TYPES.ul);
-                            } }),
-                        React.createElement(toolbar.ToolbarIcon, { icon: icons.OrderedList, onClick: () => {
-                                transformCellContent(list.LIST_TYPES.ol);
-                            } })),
-                ],
-            },
-            {
-                icons: [
-                    {
-                        icon: icons.AddRowAtBottom,
-                        onClick: () => {
-                            addRow({ position: 'bottom', rowIndex: cellPosition.rowIndex });
-                        },
-                    },
-                    {
-                        icon: icons.AddRowAtTop,
-                        onClick: () => {
-                            addRow({ position: 'top', rowIndex: cellPosition.rowIndex });
-                        },
-                    },
-                    isReachMaximumColumns
-                        ? undefined
-                        : {
-                            icon: icons.AddColumnAtLeft,
-                            onClick: () => {
-                                addColumn({
-                                    position: 'left',
-                                    columnIndex: cellPosition.columnIndex,
-                                });
-                            },
-                        },
-                    isReachMaximumColumns
-                        ? undefined
-                        : {
-                            icon: icons.AddColumnAtRight,
-                            onClick: () => {
-                                addColumn({
-                                    position: 'right',
-                                    columnIndex: cellPosition.columnIndex,
-                                });
-                            },
-                        },
-                ].filter((i) => i !== undefined),
-            },
-        ];
-    }, [transformCellContent, addRow, addColumn, cellPosition, isReachMaximumColumns, getCurrentIcon]);
-    // Row actions
-    const rowActions = React.useMemo(() => {
-        if ((tableSelectedOn === null || tableSelectedOn === void 0 ? void 0 : tableSelectedOn.region) !== 'row' || typeof tableSelectedOn.index !== 'number') {
-            return null;
-        }
-        const removeTitleAction = {
-            icon: icons.TableRemoveTitle,
-            onClick: () => {
-                if (typeof tableSelectedOn.index === 'number') {
-                    moveRowToBody(tableSelectedOn.index);
-                    setTableSelectedOn(undefined);
-                }
-            },
-        };
-        const setColumnTitleAction = isReachMinimumBodyRows
-            ? undefined
-            : {
-                icon: icons.TableSetColumnTitle,
-                onClick: () => {
-                    if (typeof tableSelectedOn.index === 'number') {
-                        moveRowToHeader(tableSelectedOn.index);
-                        setTableSelectedOn(undefined);
-                    }
-                },
-            };
-        const unpinnedAction = {
-            icon: icons.Unpinned,
-            onClick: () => {
-                if (typeof tableSelectedOn.index === 'number') {
-                    unpinRow();
-                    setTableSelectedOn(undefined);
-                }
-            },
-        };
-        const pinnedAction = isReachMinimumBodyRows && !isHeader
-            ? undefined
-            : {
-                icon: icons.Pinned,
-                onClick: () => {
-                    if (typeof tableSelectedOn.index === 'number') {
-                        pinRow(tableSelectedOn.index);
-                        setTableSelectedOn(undefined);
-                    }
-                },
-            };
-        const actions = [];
-        const rowIsPinned = isRowPinned(tableSelectedOn.index);
-        if (rowIsPinned) {
-            actions.push(unpinnedAction);
-        }
-        else {
-            if (pinnedAction)
-                actions.push(pinnedAction);
-        }
-        if (isHeader) {
-            actions.push(removeTitleAction);
-        }
-        else {
-            if (setColumnTitleAction)
-                actions.push(setColumnTitleAction);
-        }
-        return actions;
-    }, [
-        tableSelectedOn,
-        moveRowToBody,
-        moveRowToHeader,
-        unpinRow,
-        pinRow,
-        setTableSelectedOn,
-        isReachMinimumBodyRows,
-        isHeader,
-        isRowPinned,
-    ]);
-    // Column actions
-    const columnActions = React.useMemo(() => {
-        if ((tableSelectedOn === null || tableSelectedOn === void 0 ? void 0 : tableSelectedOn.region) !== 'column' || typeof tableSelectedOn.index !== 'number') {
-            return null;
-        }
-        const removeTitleAction = {
-            icon: icons.TableRemoveTitle,
-            onClick: () => {
-                if (typeof tableSelectedOn.index === 'number') {
-                    unsetColumnAsTitle(tableSelectedOn.index);
-                    setTableSelectedOn(undefined);
-                }
-            },
-        };
-        const setRowTitleAction = isReachMinimumNormalColumns
-            ? undefined
-            : {
-                icon: icons.TableSetRowTitle,
-                onClick: () => {
-                    if (typeof tableSelectedOn.index === 'number') {
-                        setColumnAsTitle(tableSelectedOn.index);
-                        setTableSelectedOn(undefined);
-                    }
-                },
-            };
-        const unpinnedAction = {
-            icon: icons.Unpinned,
-            onClick: () => {
-                if (typeof tableSelectedOn.index === 'number') {
-                    unpinColumn();
-                    setTableSelectedOn(undefined);
-                }
-            },
-        };
-        const pinnedAction = isReachMinimumNormalColumns && !element.treatAsTitle
-            ? undefined
-            : {
-                icon: icons.Pinned,
-                onClick: () => {
-                    if (typeof tableSelectedOn.index === 'number') {
-                        pinColumn(tableSelectedOn.index);
-                        setTableSelectedOn(undefined);
-                    }
-                },
-            };
-        const actions = [];
-        const columnIsPinned = isColumnPinned(tableSelectedOn.index);
-        if (columnIsPinned) {
-            actions.push(unpinnedAction);
-        }
-        else {
-            if (pinnedAction)
-                actions.push(pinnedAction);
-        }
-        if (element.treatAsTitle) {
-            actions.push(removeTitleAction);
-        }
-        else {
-            if (setRowTitleAction)
-                actions.push(setRowTitleAction);
-        }
-        return actions;
-    }, [
-        tableSelectedOn,
-        unsetColumnAsTitle,
-        setColumnAsTitle,
-        unpinColumn,
-        pinColumn,
-        setTableSelectedOn,
-        isReachMinimumNormalColumns,
-        element.treatAsTitle,
-        isColumnPinned,
-    ]);
-    // Column align actions
-    const columnAlignActions = React.useMemo(() => {
-        if ((tableSelectedOn === null || tableSelectedOn === void 0 ? void 0 : tableSelectedOn.region) !== 'column' || typeof tableSelectedOn.index !== 'number') {
-            return null;
-        }
-        // 獲取當前 column 的 align 狀態
-        const currentAlign = getAlign('column', tableSelectedOn.index);
-        // 根據當前 align 狀態選擇對應的 icon
-        const getCurrentAlignIcon = () => {
-            switch (currentAlign) {
-                case 'left':
-                    return icons.AlignLeft;
-                case 'center':
-                    return icons.AlignCenter;
-                case 'right':
-                    return icons.AlignRight;
-                default:
-                    return icons.AlignLeft;
-            }
-        };
-        return [
-            React.createElement(toolbar.ToolbarGroupIcon, { key: "align-change", icon: getCurrentAlignIcon() },
-                React.createElement(toolbar.ToolbarIcon, { icon: icons.AlignLeft, onClick: () => {
-                        if (typeof tableSelectedOn.index === 'number') {
-                            setAlign('left', 'column', tableSelectedOn.index);
-                            setTableSelectedOn(undefined);
-                        }
-                    } }),
-                React.createElement(toolbar.ToolbarIcon, { icon: icons.AlignCenter, onClick: () => {
-                        if (typeof tableSelectedOn.index === 'number') {
-                            setAlign('center', 'column', tableSelectedOn.index);
-                            setTableSelectedOn(undefined);
-                        }
-                    } }),
-                React.createElement(toolbar.ToolbarIcon, { icon: icons.AlignRight, onClick: () => {
-                        if (typeof tableSelectedOn.index === 'number') {
-                            setAlign('right', 'column', tableSelectedOn.index);
-                            setTableSelectedOn(undefined);
-                        }
-                    } })),
-        ];
-    }, [tableSelectedOn, setAlign, setTableSelectedOn, getAlign]);
-    // Row add actions
-    const rowAddActions = React.useMemo(() => {
-        if ((tableSelectedOn === null || tableSelectedOn === void 0 ? void 0 : tableSelectedOn.region) !== 'row' || typeof tableSelectedOn.index !== 'number') {
-            return null;
-        }
-        return [
-            {
-                icon: icons.AddRowAtBottom,
-                onClick: () => {
-                    if (typeof tableSelectedOn.index === 'number') {
-                        addRow({ position: 'bottom', rowIndex: tableSelectedOn.index });
-                        setTableSelectedOn(undefined);
-                    }
-                },
-            },
-            {
-                icon: icons.AddRowAtTop,
-                onClick: () => {
-                    if (typeof tableSelectedOn.index === 'number') {
-                        addRow({ position: 'top', rowIndex: tableSelectedOn.index });
-                        setTableSelectedOn(undefined);
-                    }
-                },
-            },
-        ];
-    }, [tableSelectedOn, addRow, setTableSelectedOn]);
-    // Column add actions
-    const columnAddActions = React.useMemo(() => {
-        if ((tableSelectedOn === null || tableSelectedOn === void 0 ? void 0 : tableSelectedOn.region) !== 'column' || typeof tableSelectedOn.index !== 'number') {
-            return null;
-        }
-        return [
-            isReachMaximumColumns
-                ? undefined
-                : {
-                    icon: icons.AddColumnAtLeft,
-                    onClick: () => {
-                        if (typeof tableSelectedOn.index === 'number') {
-                            addColumn({
-                                position: 'left',
-                                columnIndex: tableSelectedOn.index,
-                            });
-                            setTableSelectedOn(undefined);
-                        }
-                    },
-                },
-            isReachMaximumColumns
-                ? undefined
-                : {
-                    icon: icons.AddColumnAtRight,
-                    onClick: () => {
-                        if (typeof tableSelectedOn.index === 'number') {
-                            addColumn({
-                                position: 'right',
-                                columnIndex: tableSelectedOn.index,
-                            });
-                            setTableSelectedOn(undefined);
-                        }
-                    },
-                },
-        ].filter((i) => i !== undefined);
-    }, [tableSelectedOn, addColumn, setTableSelectedOn, isReachMaximumColumns]);
-    // Row move actions
-    const rowMoveActions = React.useMemo(() => {
-        if ((tableSelectedOn === null || tableSelectedOn === void 0 ? void 0 : tableSelectedOn.region) !== 'row' || typeof tableSelectedOn.index !== 'number') {
-            return null;
-        }
-        const rowIndex = tableSelectedOn.index;
-        // 從 tableElement 獲取 header 和 body 的資訊
-        const tableMainElement = tableElement.children.find((child) => core.Element.isElement(child) && child.type.includes('table_main'));
-        if (!tableMainElement || !core.Element.isElement(tableMainElement)) {
-            return null;
-        }
-        const tableHeaderElement = tableMainElement.children.find((child) => core.Element.isElement(child) && child.type.includes('table_header'));
-        const headerRowCount = tableHeaderElement && core.Element.isElement(tableHeaderElement) ? tableHeaderElement.children.length : 0;
-        // 判斷當前列是在 header 還是 body 中
-        const currentInHeader = rowIndex < headerRowCount;
-        // 判斷上方和下方是否可以互換
-        const canMoveUp = rowIndex > 0; // 不在第一列
-        const canMoveDown = rowIndex < rowCount - 1; // 不在最後一列
-        // 檢查目標位置是否在相同的容器中（header 或 body）
-        const targetUpInHeader = rowIndex - 1 < headerRowCount;
-        const targetDownInHeader = rowIndex + 1 < headerRowCount;
-        // 標題列只能與標題列互換，一般列只能與一般列互換
-        const canSwapUp = canMoveUp && currentInHeader === targetUpInHeader;
-        const canSwapDown = canMoveDown && currentInHeader === targetDownInHeader;
-        return [
-            canSwapDown
-                ? {
-                    icon: icons.TableMoveDown,
-                    onClick: () => {
-                        if (typeof tableSelectedOn.index === 'number') {
-                            moveOrSwapRow(tableSelectedOn.index, tableSelectedOn.index + 1, 'swap');
-                            setTableSelectedOn(undefined);
-                        }
-                    },
-                }
-                : undefined,
-            canSwapUp
-                ? {
-                    icon: icons.TableMoveUp,
-                    onClick: () => {
-                        if (typeof tableSelectedOn.index === 'number') {
-                            moveOrSwapRow(tableSelectedOn.index, tableSelectedOn.index - 1, 'swap');
-                            setTableSelectedOn(undefined);
-                        }
-                    },
-                }
-                : undefined,
-        ].filter((i) => i !== undefined);
-    }, [tableSelectedOn, setTableSelectedOn, rowCount, tableElement, moveOrSwapRow]);
-    // Column move actions
-    const columnMoveActions = React.useMemo(() => {
-        if ((tableSelectedOn === null || tableSelectedOn === void 0 ? void 0 : tableSelectedOn.region) !== 'column' || typeof tableSelectedOn.index !== 'number') {
-            return null;
-        }
-        const columnIndex = tableSelectedOn.index;
-        // 檢查當前行是否為標題行
-        const currentIsTitle = !!element.treatAsTitle;
-        // 判斷左右是否可以移動
-        const canMoveLeft = columnIndex > 0;
-        const canMoveRight = columnIndex < columnCount - 1;
-        // 檢查相鄰行是否為相同類型（都是標題行或都不是標題行）
-        const checkAdjacentColumnType = (adjacentIndex) => {
-            // 從 tableElement 中獲取相鄰行的 treatAsTitle 狀態
-            const tableMainElement = tableElement.children.find((child) => core.Element.isElement(child) && child.type.includes('table_main'));
-            if (!tableMainElement || !core.Element.isElement(tableMainElement)) {
-                return false;
-            }
-            const tableBodyElement = tableMainElement.children.find((child) => core.Element.isElement(child) && child.type.includes('table_body'));
-            if (!tableBodyElement || !core.Element.isElement(tableBodyElement)) {
-                return false;
-            }
-            // 從 body 的第一列獲取相鄰 cell 的 treatAsTitle 屬性
-            const firstRow = tableBodyElement.children[0];
-            if (!core.Element.isElement(firstRow)) {
-                return false;
-            }
-            const adjacentCell = firstRow.children[adjacentIndex];
-            if (!core.Element.isElement(adjacentCell)) {
-                return false;
-            }
-            return !!adjacentCell.treatAsTitle;
-        };
-        // 標題行只能與標題行互換，一般行只能與一般行互換
-        const canSwapLeft = canMoveLeft && currentIsTitle === checkAdjacentColumnType(columnIndex - 1);
-        const canSwapRight = canMoveRight && currentIsTitle === checkAdjacentColumnType(columnIndex + 1);
-        return [
-            canSwapRight
-                ? {
-                    icon: icons.TableMoveRight,
-                    onClick: () => {
-                        if (typeof tableSelectedOn.index === 'number') {
-                            moveOrSwapColumn(tableSelectedOn.index, tableSelectedOn.index + 1, 'swap');
-                            setTableSelectedOn(undefined);
-                        }
-                    },
-                }
-                : undefined,
-            canSwapLeft
-                ? {
-                    icon: icons.TableMoveLeft,
-                    onClick: () => {
-                        if (typeof tableSelectedOn.index === 'number') {
-                            moveOrSwapColumn(tableSelectedOn.index, tableSelectedOn.index - 1, 'swap');
-                            setTableSelectedOn(undefined);
-                        }
-                    },
-                }
-                : undefined,
-        ].filter((i) => i !== undefined);
-    }, [tableSelectedOn, setTableSelectedOn, columnCount, element.treatAsTitle, tableElement, moveOrSwapColumn]);
-    // Delete actions
-    const deleteActions = React.useMemo(() => {
-        // 當選中 row 時，檢查是否為最後一行
-        if ((tableSelectedOn === null || tableSelectedOn === void 0 ? void 0 : tableSelectedOn.region) === 'row' && typeof tableSelectedOn.index === 'number') {
-            // 如果只剩一行，不顯示刪除按鈕
-            if (isReachMinimumBodyRows && !isHeader) {
-                return [];
-            }
-        }
-        // 當選中 column 時，檢查是否為最後一列
-        if ((tableSelectedOn === null || tableSelectedOn === void 0 ? void 0 : tableSelectedOn.region) === 'column' && typeof tableSelectedOn.index === 'number') {
-            // 如果只剩一列（考慮 title columns），不顯示刪除按鈕
-            if (columnCount <= 1) {
-                return [];
-            }
-        }
-        return [
-            {
-                icon: icons.Trash,
-                className: 'qdr-table__delete',
-                onClick: () => {
-                    if ((tableSelectedOn === null || tableSelectedOn === void 0 ? void 0 : tableSelectedOn.region) === 'row' && typeof tableSelectedOn.index === 'number') {
-                        deleteRow(tableSelectedOn.index);
-                        setTableSelectedOn(undefined);
-                    }
-                    else if ((tableSelectedOn === null || tableSelectedOn === void 0 ? void 0 : tableSelectedOn.region) === 'column' && typeof tableSelectedOn.index === 'number') {
-                        deleteColumn(tableSelectedOn.index);
-                        setTableSelectedOn(undefined);
-                    }
-                },
-            },
-        ];
-    }, [tableSelectedOn, deleteRow, deleteColumn, setTableSelectedOn, isReachMinimumBodyRows, isHeader, columnCount]);
-    // Inline toolbar icon groups - 當選中行/列時顯示的完整工具列
-    const inlineToolbarIconGroups = React.useMemo(() => {
-        return [
-            {
-                icons: rowActions || columnActions || [],
-            },
-            {
-                icons: columnAlignActions || [],
-            },
-            {
-                icons: rowAddActions || columnAddActions || [],
-            },
-            {
-                icons: rowMoveActions || columnMoveActions || [],
-            },
-            {
-                icons: deleteActions,
-            },
-        ];
-    }, [
-        rowActions,
-        columnActions,
-        columnAlignActions,
-        rowAddActions,
-        columnAddActions,
-        rowMoveActions,
-        columnMoveActions,
-        deleteActions,
-    ]);
-    return {
-        focusToolbarIconGroups,
-        inlineToolbarIconGroups,
-    };
-}
-
-const TableDragContext = React.createContext(null);
-const TableDragProvider = ({ children }) => {
-    const [dragState, setDragState] = React.useState(null);
-    const [dropTargetIndex, setDropTargetIndex] = React.useState(null);
-    const [dragDirection, setDragDirection] = React.useState(null);
-    const value = React.useMemo(() => ({
-        dragState,
-        setDragState,
-        dropTargetIndex,
-        setDropTargetIndex,
-        dragDirection,
-        setDragDirection,
-    }), [dragState, dropTargetIndex, dragDirection]);
-    return React.createElement(TableDragContext.Provider, { value: value }, children);
-};
-const useTableDragContext = () => {
-    const context = React.useContext(TableDragContext);
-    if (!context) {
-        throw new Error('useTableDragContext must be used within TableDragProvider');
-    }
-    return context;
-};
-
-function useTableActions(element) {
-    const editor = react.useQuadrats();
-    const isColumnPinned = React.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 (!core.Element.isElement(container))
-                    continue;
-                for (const row of container.children) {
-                    if (core.Element.isElement(row) && row.type.includes(table.TABLE_ROW_TYPE)) {
-                        const cell = row.children[columnIndex];
-                        if (core.Element.isElement(cell) && cell.type.includes(table.TABLE_CELL_TYPE)) {
-                            // 如果有任何一個 cell 沒有 pinned 屬性，則整個 column 不算 pinned
-                            if (!cell.pinned) {
-                                return false;
-                            }
-                        }
-                    }
-                }
-            }
-            return true;
-        }
-        catch (error) {
-            return false;
-        }
-    }, [element, editor]);
-    const isRowPinned = React.useCallback((rowIndex) => {
-        try {
-            const tableStructure = getTableStructure(editor, element);
-            if (!tableStructure)
-                return false;
-            const { tableHeaderElement, tableBodyElement } = tableStructure;
-            const headerRowCount = tableHeaderElement && core.Element.isElement(tableHeaderElement) ? tableHeaderElement.children.length : 0;
-            let targetRow;
-            if (rowIndex < headerRowCount && tableHeaderElement && core.Element.isElement(tableHeaderElement)) {
-                // 在 Header 中
-                const rowElement = tableHeaderElement.children[rowIndex];
-                if (core.Element.isElement(rowElement)) {
-                    targetRow = rowElement;
-                }
-            }
-            else if (tableBodyElement && core.Element.isElement(tableBodyElement)) {
-                // 在 Body 中
-                const bodyRowIndex = rowIndex - headerRowCount;
-                const rowElement = tableBodyElement.children[bodyRowIndex];
-                if (core.Element.isElement(rowElement)) {
-                    targetRow = rowElement;
-                }
-            }
-            if (!core.Element.isElement(targetRow) || !targetRow.type.includes(table.TABLE_ROW_TYPE)) {
-                return false;
-            }
-            // 檢查所有 cell 是否都有 pinned 屬性
-            for (const cell of targetRow.children) {
-                if (core.Element.isElement(cell) && cell.type.includes(table.TABLE_CELL_TYPE)) {
-                    if (!cell.pinned) {
-                        return false;
-                    }
-                }
-            }
-            return true;
-        }
-        catch (error) {
-            return false;
-        }
-    }, [element, editor]);
-    const addColumn = React.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.TABLE_DEFAULT_MAX_COLUMNS) {
-                console.warn(`Maximum columns limit (${table.TABLE_DEFAULT_MAX_COLUMNS}) reached`);
-                return;
-            }
-            // 計算插入位置
-            let insertIndex;
-            if (typeof columnIndex === 'number') {
-                insertIndex = position === 'left' ? Math.max(0, columnIndex) : Math.min(columnCount, columnIndex + 1);
-            }
-            else {
-                insertIndex = columnCount;
-            }
-            // 使用 Editor.withoutNormalizing 來批次執行所有操作
-            core.Editor.withoutNormalizing(editor, () => {
-                // 在 Header 中加入 cell
-                if (tableHeaderElement && tableHeaderPath) {
-                    tableHeaderElement.children.forEach((row, rowIndex) => {
-                        if (core.Element.isElement(row) && row.type.includes(table.TABLE_ROW_TYPE)) {
-                            const referenceCell = row.children[insertIndex - (position === 'left' ? 0 : 1)];
-                            const newCell = createTableCell(referenceCell);
-                            const cellPath = [...tableHeaderPath, rowIndex, insertIndex];
-                            core.Transforms.insertNodes(editor, newCell, { at: cellPath });
-                        }
-                    });
-                }
-                // 在 Body 中加入 cell
-                tableBodyElement.children.forEach((row, rowIndex) => {
-                    if (core.Element.isElement(row) && row.type.includes(table.TABLE_ROW_TYPE)) {
-                        const referenceCell = row.children[insertIndex - (position === 'left' ? 0 : 1)];
-                        const newCell = createTableCell(referenceCell);
-                        const cellPath = [...tableBodyPath, rowIndex, insertIndex];
-                        core.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 = React.useCallback((options = {}) => {
-        const { position = 'bottom', rowIndex } = options;
-        try {
-            const tableStructure = getTableStructure(editor, element);
-            if (!tableStructure)
-                return;
-            const { tableHeaderElement, tableBodyElement, tableHeaderPath, tableBodyPath, headerRowCount, columnCount } = tableStructure;
-            // 計算插入位置和參考行
-            let insertIndex;
-            let referenceRowElement;
-            let targetPath;
-            if (typeof rowIndex === 'number') {
-                // 檢查是在 Header / Body 之中
-                if (tableHeaderElement && rowIndex < headerRowCount) {
-                    targetPath = tableHeaderPath;
-                    if (position === 'top') {
-                        insertIndex = Math.max(0, rowIndex);
-                        referenceRowElement = getReferenceRowFromHeaderOrBody(tableHeaderElement, insertIndex);
-                    }
-                    else {
-                        insertIndex = Math.min(headerRowCount, rowIndex + 1);
-                        referenceRowElement = getReferenceRowFromHeaderOrBody(tableHeaderElement, rowIndex);
-                    }
-                }
-                else {
-                    targetPath = tableBodyPath;
-                    const bodyRowIndex = rowIndex - headerRowCount;
-                    if (position === 'top') {
-                        insertIndex = Math.max(0, bodyRowIndex);
-                        referenceRowElement = getReferenceRowFromHeaderOrBody(tableBodyElement, insertIndex);
-                    }
-                    else {
-                        insertIndex = Math.min(tableBodyElement.children.length, bodyRowIndex + 1);
-                        referenceRowElement = getReferenceRowFromHeaderOrBody(tableBodyElement, bodyRowIndex);
-                    }
-                }
-            }
-            else {
-                // 預設：在 Body 尾端加入列
-                targetPath = tableBodyPath;
-                insertIndex = tableBodyElement.children.length;
-                referenceRowElement = getReferenceRowFromHeaderOrBody(tableBodyElement, insertIndex - 1);
-            }
-            // 創建新行
-            const newRow = {
-                type: table.TABLE_ROW_TYPE,
-                children: Array.from({ length: columnCount }, (_, cellIndex) => {
-                    let referenceCell;
-                    if (referenceRowElement && referenceRowElement.children[cellIndex]) {
-                        const cell = referenceRowElement.children[cellIndex];
-                        if (core.Element.isElement(cell) && cell.type.includes(table.TABLE_CELL_TYPE)) {
-                            referenceCell = cell;
-                        }
-                    }
-                    return createTableCell(referenceCell);
-                }),
-            };
-            // 插入新行
-            const newRowPath = [...targetPath, insertIndex];
-            core.Transforms.insertNodes(editor, newRow, { at: newRowPath });
-        }
-        catch (error) {
-            console.warn('Failed to add row:', error);
-        }
-    }, [editor, element]);
-    const addColumnAndRow = React.useCallback(() => {
-        try {
-            const tableStructure = getTableStructure(editor, element);
-            if (!tableStructure)
-                return;
-            const { tableHeaderElement, tableBodyElement, tableHeaderPath, tableBodyPath, columnCount } = tableStructure;
-            if (columnCount >= table.TABLE_DEFAULT_MAX_COLUMNS) {
-                console.warn(`Maximum columns limit (${table.TABLE_DEFAULT_MAX_COLUMNS}) reached`);
-                return;
-            }
-            core.Editor.withoutNormalizing(editor, () => {
-                // 在 Header 中加入新列
-                if (tableHeaderElement && tableHeaderPath) {
-                    tableHeaderElement.children.forEach((row, rowIndex) => {
-                        if (core.Element.isElement(row) && row.type.includes(table.TABLE_ROW_TYPE)) {
-                            const lastCell = row.children[row.children.length - 1];
-                            const newHeaderCell = createTableCell(lastCell);
-                            const cellPath = [...tableHeaderPath, rowIndex, row.children.length];
-                            core.Transforms.insertNodes(editor, newHeaderCell, { at: cellPath });
-                        }
-                    });
-                }
-                // 在 Body 中加入新列
-                tableBodyElement.children.forEach((row, rowIndex) => {
-                    if (core.Element.isElement(row) && row.type.includes(table.TABLE_ROW_TYPE)) {
-                        const lastCell = row.children[row.children.length - 1];
-                        const newCell = createTableCell(lastCell);
-                        const cellPath = [...tableBodyPath, rowIndex, row.children.length];
-                        core.Transforms.insertNodes(editor, newCell, { at: cellPath });
-                    }
-                });
-                // 加入新行
-                const newColumnCount = columnCount + 1;
-                const lastRow = getReferenceRowFromHeaderOrBody(tableBodyElement, tableBodyElement.children.length - 1);
-                const newRow = {
-                    type: table.TABLE_ROW_TYPE,
-                    children: Array.from({ length: newColumnCount }, (_, cellIndex) => {
-                        let referenceCell;
-                        if (cellIndex < newColumnCount - 1 && core.Element.isElement(lastRow) && lastRow.type.includes(table.TABLE_ROW_TYPE)) {
-                            const cell = lastRow.children[cellIndex];
-                            if (core.Element.isElement(cell) && cell.type.includes(table.TABLE_CELL_TYPE)) {
-                                referenceCell = cell;
-                            }
-                        }
-                        else {
-                            if (core.Element.isElement(lastRow) && lastRow.type.includes(table.TABLE_ROW_TYPE)) {
-                                const cell = lastRow.children[lastRow.children.length - 1];
-                                if (core.Element.isElement(cell) && cell.type.includes(table.TABLE_CELL_TYPE)) {
-                                    referenceCell = cell;
-                                }
-                            }
-                        }
-                        return createTableCell(referenceCell);
-                    }),
-                };
-                const newRowPath = [...tableBodyPath, tableBodyElement.children.length];
-                core.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 = React.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];
-                core.Transforms.removeNodes(editor, { at: headerRowPath });
-                // 如果是最後一個 header 行，移除整個 header 元素
-                if (headerRowCount <= 1) {
-                    core.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];
-            core.Transforms.removeNodes(editor, { at: rowPath });
-        }
-        catch (error) {
-            console.warn('Failed to delete row:', error);
-        }
-    }, [editor, element]);
-    const deleteColumn = React.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 (core.Element.isElement(headerRow) && headerRow.type.includes(table.TABLE_ROW_TYPE)) {
-                            const headerCellPath = [...tableHeaderPath, rowIndex, columnIndex];
-                            core.Transforms.removeNodes(editor, { at: headerCellPath });
-                        }
-                    }
-                }
-                // 從 Body 中刪除列
-                for (let rowIndex = tableBodyElement.children.length - 1; rowIndex >= 0; rowIndex--) {
-                    const row = tableBodyElement.children[rowIndex];
-                    if (core.Element.isElement(row) && row.type.includes(table.TABLE_ROW_TYPE)) {
-                        const cellPath = [...tableBodyPath, rowIndex, columnIndex];
-                        core.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 = React.useCallback((rowIndex) => {
-        try {
-            const tableStructure = getTableStructure(editor, element);
-            if (!tableStructure)
-                return;
-            const { tableHeaderElement, tableHeaderPath, tableBodyPath } = tableStructure;
-            if (!tableHeaderElement || !tableHeaderPath)
-                return;
-            // 檢查行是否存在於 header 中
-            if (rowIndex >= tableHeaderElement.children.length) {
-                console.warn('Invalid header row index:', rowIndex);
-                return;
-            }
-            const rowToMove = tableHeaderElement.children[rowIndex];
-            if (!core.Element.isElement(rowToMove) || !rowToMove.type.includes(table.TABLE_ROW_TYPE))
-                return;
-            const rowPath = [...tableHeaderPath, rowIndex];
-            // 移動前移除所有 cell 的 pinned 屬性
-            rowToMove.children.forEach((cell, columnIndex) => {
-                if (core.Element.isElement(cell) && cell.type.includes(table.TABLE_CELL_TYPE) && cell.pinned) {
-                    if (cell.pinned && isColumnPinned(columnIndex)) {
-                        const cellPath = [...rowPath, columnIndex];
-                        core.Transforms.unsetNodes(editor, 'pinned', { at: cellPath });
-                    }
-                }
-            });
-            // 移動行到 body 的開始位置
-            const bodyTargetPath = [...tableBodyPath, 0];
-            core.Transforms.moveNodes(editor, {
-                at: rowPath,
-                to: bodyTargetPath,
-            });
-        }
-        catch (error) {
-            console.warn('Failed to move row to body:', error);
-        }
-    }, [editor, element, isColumnPinned]);
-    const moveRowToHeader = React.useCallback((rowIndex, customProps) => {
-        try {
-            const tableStructure = getTableStructure(editor, element);
-            if (!tableStructure)
-                return;
-            const { tableHeaderElement, tableBodyElement, tableMainPath, tableHeaderPath, tableBodyPath, headerRowCount } = tableStructure;
-            // 計算正確的 body 行索引
-            const bodyRowIndex = rowIndex - headerRowCount;
-            // 檢查 body 行索引是否有效
-            if (bodyRowIndex < 0 || bodyRowIndex >= tableBodyElement.children.length) {
-                console.warn('Invalid body row index:', bodyRowIndex);
-                return;
-            }
-            // 檢查行是否存在
-            const rowToMove = tableBodyElement.children[bodyRowIndex];
-            if (!core.Element.isElement(rowToMove) || !rowToMove.type.includes(table.TABLE_ROW_TYPE))
-                return;
-            // 檢查 header 中是否已有 pinned rows（一致性規則檢查）
-            const hasExistingPinnedRows = tableStructure ? hasAnyPinnedRows(tableStructure) : false;
-            // 如果有現有的 pinned rows 且沒有提供自定義屬性，自動設置 pinned 以保持一致性
-            const finalProps = customProps || (hasExistingPinnedRows ? { pinned: true } : undefined);
-            // 如果提供了 finalProps，則應用到 cells
-            const processedRow = finalProps
-                ? Object.assign(Object.assign({}, rowToMove), { children: rowToMove.children.map((cell) => {
-                        if (core.Element.isElement(cell) && cell.type.includes(table.TABLE_CELL_TYPE)) {
-                            return Object.assign(Object.assign({}, cell), finalProps);
-                        }
-                        return cell;
-                    }) }) : rowToMove;
-            const rowPath = [...tableBodyPath, bodyRowIndex];
-            // 如果 header 不存在，先創建它
-            if (!tableHeaderElement) {
-                const newHeader = {
-                    type: table.TABLE_HEADER_TYPE,
-                    children: [processedRow],
-                };
-                const headerInsertPath = [...tableMainPath, 0];
-                core.Editor.withoutNormalizing(editor, () => {
-                    core.Transforms.removeNodes(editor, { at: rowPath });
-                    core.Transforms.insertNodes(editor, newHeader, { at: headerInsertPath });
-                });
-            }
-            else {
-                // 如果這是 pinned row，找到正確的插入位置（pinned rows 在頂部）
-                let headerTargetPath;
-                if (finalProps === null || finalProps === void 0 ? void 0 : finalProps.pinned) {
-                    let insertIndex = 0;
-                    for (const [index, headerRow] of tableHeaderElement.children.entries()) {
-                        if (core.Element.isElement(headerRow)) {
-                            const hasNonPinnedCell = headerRow.children.some((cell) => core.Element.isElement(cell) && !cell.pinned);
-                            if (hasNonPinnedCell) {
-                                break;
-                            }
-                            insertIndex = index + 1;
-                        }
-                    }
-                    headerTargetPath = [...tableHeaderPath, insertIndex];
-                    core.Editor.withoutNormalizing(editor, () => {
-                        core.Transforms.removeNodes(editor, { at: rowPath });
-                        core.Transforms.insertNodes(editor, processedRow, { at: headerTargetPath });
-                    });
-                }
-                else {
-                    // 移動行到現有 header 的末尾
-                    headerTargetPath = [...tableHeaderPath, tableHeaderElement.children.length];
-                    core.Transforms.moveNodes(editor, {
-                        at: rowPath,
-                        to: headerTargetPath,
-                    });
-                }
-            }
-        }
-        catch (error) {
-            console.warn('Failed to move row to header:', error);
-        }
-    }, [editor, element]);
-    const unsetColumnAsTitle = React.useCallback((columnIndex) => {
-        try {
-            const tableStructure = getTableStructure(editor, element);
-            if (!tableStructure)
-                return;
-            const { tableHeaderElement, tableBodyElement, tableMainElement } = tableStructure;
-            // 獲取 table 的實際寬度（用於轉換為混合模式）
-            let tableWidth = 0;
-            if (tableMainElement) {
-                const tableDOMElement = slateReact.ReactEditor.toDOMNode(editor, tableMainElement);
-                if (tableDOMElement instanceof HTMLElement) {
-                    tableWidth = tableDOMElement.getBoundingClientRect().width;
-                }
-            }
-            const processContainer = (containerElement) => {
-                if (!core.Element.isElement(containerElement))
-                    return;
-                const containerPath = slateReact.ReactEditor.findPath(editor, containerElement);
-                const firstRow = containerElement.children[0];
-                // 找到 column 標題列的尾端
-                let targetColumnIndex = 0;
-                if (core.Element.isElement(firstRow) && firstRow.type.includes(table.TABLE_ROW_TYPE)) {
-                    for (let i = 0; i < firstRow.children.length; i++) {
-                        const cell = firstRow.children[i];
-                        if (core.Element.isElement(cell) &&
-                            cell.type.includes(table.TABLE_CELL_TYPE) &&
-                            cell.treatAsTitle &&
-                            i !== columnIndex) {
-                            targetColumnIndex = i + 1;
-                        }
-                    }
-                }
-                containerElement.children.forEach((row, rowIndex) => {
-                    if (core.Element.isElement(row) && row.type.includes(table.TABLE_ROW_TYPE)) {
-                        const cell = row.children[columnIndex];
-                        if (core.Element.isElement(cell) && cell.type.includes(table.TABLE_CELL_TYPE)) {
-                            const cellPath = [...containerPath, rowIndex, columnIndex];
-                            core.Transforms.unsetNodes(editor, 'treatAsTitle', { at: cellPath });
-                            if (cell.pinned && !isRowPinned(rowIndex)) {
-                                core.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 (core.Element.isElement(row) && row.type.includes(table.TABLE_ROW_TYPE)) {
-                            const fromPath = [...containerPath, rowIndex, columnIndex];
-                            const toPath = [...containerPath, rowIndex, actualTargetIndex];
-                            core.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 = React.useCallback((columnIndex, customProps) => {
-        try {
-            const tableStructure = getTableStructure(editor, element);
-            if (!tableStructure)
-                return;
-            const { tableHeaderElement, tableBodyElement, tableMainElement } = tableStructure;
-            // 檢查是否已有 pinned columns
-            const hasExistingPinnedColumns = hasAnyPinnedColumns(tableStructure);
-            // 如果有現有的 pinned columns 且沒有提供自定義屬性，自動設置 pinned 以保持一致性
-            const finalProps = customProps || (hasExistingPinnedColumns ? { pinned: true } : undefined);
-            // 獲取 table 的實際寬度（用於轉換為混合模式）
-            let tableWidth = 0;
-            if (tableMainElement) {
-                const tableDOMElement = slateReact.ReactEditor.toDOMNode(editor, tableMainElement);
-                if (tableDOMElement instanceof HTMLElement) {
-                    tableWidth = tableDOMElement.getBoundingClientRect().width;
-                }
-            }
-            const processContainer = (containerElement) => {
-                if (!core.Element.isElement(containerElement))
-                    return;
-                const containerPath = slateReact.ReactEditor.findPath(editor, containerElement);
-                const firstRow = containerElement.children[0];
-                // 先找到 column 標題列的尾端
-                let targetColumnIndex = 0;
-                if (core.Element.isElement(firstRow) && firstRow.type.includes(table.TABLE_ROW_TYPE)) {
-                    for (let i = 0; i < firstRow.children.length; i++) {
-                        const cell = firstRow.children[i];
-                        if (core.Element.isElement(cell) && cell.type.includes(table.TABLE_CELL_TYPE) && cell.treatAsTitle) {
-                            targetColumnIndex = i + 1;
-                        }
-                        else {
-                            break;
-                        }
-                    }
-                }
-                containerElement.children.forEach((row, rowIndex) => {
-                    if (core.Element.isElement(row) && row.type.includes(table.TABLE_ROW_TYPE)) {
-                        row.children.forEach((cell, childColIndex) => {
-                            const cellPath = [...containerPath, rowIndex, childColIndex];
-                            if (childColIndex === columnIndex) {
-                                const nodeProps = finalProps ? Object.assign({ treatAsTitle: true }, finalProps) : { treatAsTitle: true };
-                                core.Transforms.setNodes(editor, nodeProps, { at: cellPath });
-                            }
-                            else if (finalProps === null || finalProps === void 0 ? void 0 : finalProps.pinned) {
-                                // 確保其他 title column 也有 pinned 屬性以保持一致性
-                                if (core.Element.isElement(cell) && cell.treatAsTitle) {
-                                    core.Transforms.setNodes(editor, { pinned: true }, { at: cellPath });
-                                }
-                            }
-                        });
-                    }
-                });
-                // 檢查是否需要移動位置
-                const needsMove = columnIndex >= targetColumnIndex && columnIndex !== targetColumnIndex;
-                if (needsMove) {
-                    for (let rowIndex = containerElement.children.length - 1; rowIndex >= 0; rowIndex--) {
-                        const row = containerElement.children[rowIndex];
-                        if (core.Element.isElement(row) && row.type.includes(table.TABLE_ROW_TYPE)) {
-                            const fromPath = [...containerPath, rowIndex, columnIndex];
-                            const toPath = [...containerPath, rowIndex, targetColumnIndex];
-                            core.Transforms.moveNodes(editor, {
-                                at: fromPath,
-                                to: toPath,
-                            });
-                        }
-                    }
-                    // 調整 columnWidths：將 columnIndex 的寬度移動到 targetColumnIndex
-                    const currentWidths = getColumnWidths(element);
-                    if (currentWidths.length > 0) {
-                        const movedWidths = moveOrSwapColumnWidth(currentWidths, columnIndex, targetColumnIndex, 'move');
-                        // 如果設定了 pinned，需要轉換為混合模式
-                        if ((finalProps === null || finalProps === void 0 ? void 0 : finalProps.pinned) && tableWidth > 0) {
-                            const { pinnedColumnIndices } = getPinnedColumnsInfo(element);
-                            // 更新釘選欄位索引
-                            const updatedPinnedIndices = pinnedColumnIndices
-                                .map((idx) => {
-                                if (idx === columnIndex)
-                                    return targetColumnIndex;
-                                if (idx >= targetColumnIndex && idx < columnIndex)
-                                    return idx + 1;
-                                return idx;
-                            })
-                                .concat(targetColumnIndex)
-                                .filter((idx, i, arr) => arr.indexOf(idx) === i)
-                                .sort((a, b) => a - b);
-                            const mixedWidths = convertToMixedWidthMode(movedWidths, updatedPinnedIndices, tableWidth);
-                            setColumnWidths(editor, element, mixedWidths);
-                        }
-                        else {
-                            setColumnWidths(editor, element, movedWidths);
-                        }
-                    }
-                }
-                else if ((finalProps === null || finalProps === void 0 ? void 0 : finalProps.pinned) && tableWidth > 0) {
-                    // 即使沒有移動位置，如果設定了 pinned，也需要轉換為混合模式
-                    const currentWidths = getColumnWidths(element);
-                    if (currentWidths.length > 0) {
-                        const { pinnedColumnIndices } = getPinnedColumnsInfo(element);
-                        // 找出所有已經是 title 的 columns
-                        const titleColumnIndices = new Set();
-                        const firstRow = containerElement.children[0];
-                        if (core.Element.isElement(firstRow) && firstRow.type.includes(table.TABLE_ROW_TYPE)) {
-                            firstRow.children.forEach((cell, colIndex) => {
-                                if (core.Element.isElement(cell) &&
-                                    cell.type.includes(table.TABLE_CELL_TYPE) &&
-                                    cell.treatAsTitle) {
-                                    titleColumnIndices.add(colIndex);
-                                }
-                            });
-                        }
-                        // 將當前 column 加入 title columns
-                        titleColumnIndices.add(columnIndex);
-                        // 合併所有 pinned columns 和 title columns
-                        const allPinnedIndices = new Set([...pinnedColumnIndices, ...Array.from(titleColumnIndices)]);
-                        const updatedPinnedIndices = Array.from(allPinnedIndices).sort((a, b) => a - b);
-                        const mixedWidths = convertToMixedWidthMode(currentWidths, updatedPinnedIndices, tableWidth);
-                        setColumnWidths(editor, element, mixedWidths);
-                    }
-                }
-            };
-            if (tableHeaderElement) {
-                processContainer(tableHeaderElement);
-            }
-            if (tableBodyElement) {
-                processContainer(tableBodyElement);
-            }
-        }
-        catch (error) {
-            console.warn('Failed to set column as title:', error);
-        }
-    }, [editor, element]);
-    const pinColumn = React.useCallback((columnIndex) => {
-        try {
-            setColumnAsTitle(columnIndex, { pinned: true });
-        }
-        catch (error) {
-            console.warn('Failed to pin column:', error);
-        }
-    }, [setColumnAsTitle]);
-    const unpinColumn = React.useCallback(() => {
-        try {
-            const tableStructure = getTableStructure(editor, element);
-            if (!tableStructure)
-                return;
-            const { tableHeaderElement, tableBodyElement } = tableStructure;
-            // 檢查 column 與 row 之間是否有交叉 pinned 狀態的關係
-            const shouldRowRemainPinned = (rowElement, excludeColumns) => {
-                let hasNonExcludedCells = false;
-                for (let colIndex = 0; colIndex < rowElement.children.length; colIndex++) {
-                    const cell = rowElement.children[colIndex];
-                    if (!core.Element.isElement(cell) || !cell.type.includes(table.TABLE_CELL_TYPE))
-                        continue;
-                    if (excludeColumns.has(colIndex))
-                        continue;
-                    hasNonExcludedCells = true;
-                    if (!cell.pinned) {
-                        return false;
-                    }
-                }
-                return hasNonExcludedCells;
-            };
-            const processContainer = (containerElement) => {
-                const containerPath = slateReact.ReactEditor.findPath(editor, containerElement);
-                const treatAsTitleColumns = new Set();
-                containerElement.children.forEach((row) => {
-                    if (core.Element.isElement(row) && row.type.includes(table.TABLE_ROW_TYPE)) {
-                        row.children.forEach((cell, colIndex) => {
-                            if (core.Element.isElement(cell) && cell.type.includes(table.TABLE_CELL_TYPE) && cell.treatAsTitle) {
-                                treatAsTitleColumns.add(colIndex);
-                            }
-                        });
-                    }
-                });
-                containerElement.children.forEach((row, rowIndex) => {
-                    if (core.Element.isElement(row) && row.type.includes(table.TABLE_ROW_TYPE)) {
-                        const rowShouldRemainPinned = shouldRowRemainPinned(row, treatAsTitleColumns);
-                        row.children.forEach((cell, colIndex) => {
-                            if (treatAsTitleColumns.has(colIndex) && core.Element.isElement(cell) && cell.type.includes(table.TABLE_CELL_TYPE)) {
-                                const cellPath = [...containerPath, rowIndex, colIndex];
-                                core.Transforms.unsetNodes(editor, 'treatAsTitle', { at: cellPath });
-                                if (!rowShouldRemainPinned) {
-                                    core.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 = React.useCallback((row, pinned) => {
-        try {
-            for (const [, cell] of row.children.entries()) {
-                if (core.Element.isElement(cell) && cell.type.includes(table.TABLE_CELL_TYPE)) {
-                    const cellPath = slateReact.ReactEditor.findPath(editor, cell);
-                    if (pinned) {
-                        core.Transforms.setNodes(editor, { pinned: true }, { at: cellPath });
-                    }
-                    else {
-                        core.Transforms.unsetNodes(editor, 'pinned', { at: cellPath });
-                    }
-                }
-            }
-        }
-        catch (error) {
-            console.warn('Failed to set pinned on row cells:', error);
-        }
-    }, [editor]);
-    const setPinnedOnAllHeaderRows = React.useCallback((headerElement, pinned) => {
-        try {
-            for (const headerRow of headerElement.children) {
-                if (core.Element.isElement(headerRow) && headerRow.type.includes(table.TABLE_ROW_TYPE)) {
-                    setPinnedOnRowCells(headerRow, pinned);
-                }
-            }
-        }
-        catch (error) {
-            console.warn('Failed to set pinned on all header rows:', error);
-        }
-    }, [setPinnedOnRowCells]);
-    const pinRow = React.useCallback((rowIndex) => {
-        try {
-            const tableStructure = getTableStructure(editor, element);
-            if (!tableStructure)
-                return;
-            const { tableHeaderElement, headerRowCount } = tableStructure;
-            // 先將目前所有的 header rows 都設為 pinned
-            if (tableHeaderElement) {
-                setPinnedOnAllHeaderRows(tableHeaderElement, true);
-            }
-            // 然後將目標 row 移動到 header 中並設為 pinned
-            if (rowIndex >= headerRowCount) {
-                moveRowToHeader(rowIndex, { pinned: true });
-            }
-        }
-        catch (error) {
-            console.warn('Failed to pin row:', error);
-        }
-    }, [editor, element, moveRowToHeader, setPinnedOnAllHeaderRows]);
-    const unpinRow = React.useCallback(() => {
-        try {
-            const tableStructure = getTableStructure(editor, element);
-            if (!tableStructure)
-                return;
-            const { tableHeaderElement, tableBodyElement, tableHeaderPath } = tableStructure;
-            if (!tableHeaderElement || !tableBodyElement)
-                return;
-            // 檢查 column 與 row 之間是否有交叉 pinned 狀態的關係
-            const shouldColumnRemainPinned = (columnIndex) => {
-                const containers = [tableHeaderElement, tableBodyElement];
-                for (const container of containers) {
-                    if (!core.Element.isElement(container))
-                        continue;
-                    for (const row of container.children) {
-                        if (core.Element.isElement(row) && row.type.includes(table.TABLE_ROW_TYPE)) {
-                            const cell = row.children[columnIndex];
-                            if (core.Element.isElement(cell) && cell.type.includes(table.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 (core.Element.isElement(row) && row.type.includes(table.TABLE_ROW_TYPE)) {
-                    row.children.forEach((cell, colIndex) => {
-                        if (core.Element.isElement(cell) && cell.type.includes(table.TABLE_CELL_TYPE)) {
-                            const cellPath = [...tableHeaderPath, headerRowIndex, colIndex];
-                            if (!shouldColumnRemainPinned(colIndex)) {
-                                core.Transforms.unsetNodes(editor, 'pinned', { at: cellPath });
-                            }
-                        }
-                    });
-                }
-            });
-            const tableBodyPath = slateReact.ReactEditor.findPath(editor, tableBodyElement);
-            for (let i = tableHeaderElement.children.length - 1; i >= 0; i--) {
-                const row = tableHeaderElement.children[i];
-                if (core.Element.isElement(row) && row.type.includes(table.TABLE_ROW_TYPE)) {
-                    const fromPath = [...tableHeaderPath, i];
-                    const toPath = [...tableBodyPath, 0];
-                    core.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 = React.useCallback((sourceRowIndex, targetRowIndex, mode = 'move') => {
-        try {
-            const tableStructure = getTableStructure(editor, element);
-            if (!tableStructure)
-                return;
-            const { tableHeaderElement, tableBodyElement, tableHeaderPath, tableBodyPath, headerRowCount } = tableStructure;
-            // 確定當前列和目標列所屬的容器
-            const sourceInHeader = sourceRowIndex < headerRowCount;
-            const targetInHeader = targetRowIndex < headerRowCount;
-            // 標題列只能與標題列互換/移動，一般列只能與一般列互換/移動
-            if (sourceInHeader !== targetInHeader) {
-                console.warn(`Cannot ${mode} row between header and body`);
-                return;
-            }
-            // 檢查邊界
-            if (sourceRowIndex === targetRowIndex) {
-                return;
-            }
-            let containerPath;
-            let sourceLocalIndex;
-            let targetLocalIndex;
-            if (sourceInHeader) {
-                // 在 header 中
-                if (!tableHeaderElement || !tableHeaderPath)
-                    return;
-                containerPath = tableHeaderPath;
-                sourceLocalIndex = sourceRowIndex;
-                targetLocalIndex = targetRowIndex;
-            }
-            else {
-                // 在 body 中
-                if (!tableBodyElement)
-                    return;
-                containerPath = tableBodyPath;
-                sourceLocalIndex = sourceRowIndex - headerRowCount;
-                targetLocalIndex = targetRowIndex - headerRowCount;
-            }
-            core.Editor.withoutNormalizing(editor, () => {
-                if (mode === 'swap') {
-                    // swap 邏輯：交換兩個相鄰位置
-                    if (sourceRowIndex < targetRowIndex) {
-                        // 向下移動：先將源列移到目標位置之後
-                        const sourcePath = [...containerPath, sourceLocalIndex];
-                        const afterTargetPath = [...containerPath, targetLocalIndex];
-                        core.Transforms.moveNodes(editor, {
-                            at: sourcePath,
-                            to: afterTargetPath,
-                        });
-                    }
-                    else {
-                        // 向上移動：先將目標列移到源位置之後
-                        const targetPath = [...containerPath, targetLocalIndex];
-                        const afterSourcePath = [...containerPath, sourceLocalIndex];
-                        core.Transforms.moveNodes(editor, {
-                            at: targetPath,
-                            to: afterSourcePath,
-                        });
-                    }
-                }
-                else {
-                    // move 邏輯：直接移動到目標位置
-                    const sourcePath = [...containerPath, sourceLocalIndex];
-                    const targetPath = [...containerPath, targetLocalIndex];
-                    core.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 = React.useCallback((sourceColumnIndex, targetColumnIndex, mode = 'move') => {
-        try {
-            const tableStructure = getTableStructure(editor, element);
-            if (!tableStructure)
-                return;
-            const { tableHeaderElement, tableBodyElement, columnCount } = tableStructure;
-            // 檢查邊界
-            if (targetColumnIndex < 0 || targetColumnIndex >= columnCount) {
-                console.warn('Target column index out of bounds');
-                return;
-            }
-            // 檢查是否為同一行
-            if (sourceColumnIndex === targetColumnIndex) {
-                return;
-            }
-            // 檢查當前行和目標行是否都是標題行或都是一般行
-            // 透過檢查第一個 cell 的 treatAsTitle 屬性來判斷
-            const checkIsTitleColumn = (container, colIndex) => {
-                if (!core.Element.isElement(container))
-                    return false;
-                for (const row of container.children) {
-                    if (core.Element.isElement(row) && row.type.includes(table.TABLE_ROW_TYPE)) {
-                        const cell = row.children[colIndex];
-                        if (core.Element.isElement(cell) && cell.type.includes(table.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 中的所有列進行操作
-            core.Editor.withoutNormalizing(editor, () => {
-                const containers = [tableHeaderElement, tableBodyElement].filter((c) => c && core.Element.isElement(c));
-                for (const container of containers) {
-                    // 對每一列進行操作
-                    for (let rowIndex = 0; rowIndex < container.children.length; rowIndex++) {
-                        const row = container.children[rowIndex];
-                        if (!core.Element.isElement(row) || !row.type.includes(table.TABLE_ROW_TYPE))
-                            continue;
-                        const containerPath = slateReact.ReactEditor.findPath(editor, container);
-                        const rowPath = [...containerPath, rowIndex];
-                        if (mode === 'swap') {
-                            // swap 邏輯：交換兩個相鄰位置
-                            if (sourceColumnIndex < targetColumnIndex) {
-                                // 向右移動：將源 cell 移到目標位置之後
-                                const sourceCellPath = [...rowPath, sourceColumnIndex];
-                                const afterTargetCellPath = [...rowPath, targetColumnIndex];
-                                core.Transforms.moveNodes(editor, {
-                                    at: sourceCellPath,
-                                    to: afterTargetCellPath,
-                                });
-                            }
-                            else {
-                                // 向左移動：將目標 cell 移到源位置之後
-                                const targetCellPath = [...rowPath, targetColumnIndex];
-                                const afterSourceCellPath = [...rowPath, sourceColumnIndex];
-                                core.Transforms.moveNodes(editor, {
-                                    at: targetCellPath,
-                                    to: afterSourceCellPath,
-                                });
-                            }
-                        }
-                        else {
-                            // move 邏輯：直接移動到目標位置
-                            const sourceCellPath = [...rowPath, sourceColumnIndex];
-                            const targetCellPath = [...rowPath, targetColumnIndex];
-                            core.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,
-    };
-}
-
-function useTableStates() {
-    const [tableSelectedOn, setTableSelectedOn] = React.useState();
-    const [tableHoveredOn, setTableHoveredOn] = React.useState();
-    return {
-        tableSelectedOn,
-        setTableSelectedOn,
-        tableHoveredOn,
-        setTableHoveredOn,
-    };
-}
-
-function Table({ attributes, children, element, }) {
-    const { addColumn, addRow, addColumnAndRow, deleteRow, deleteColumn, moveRowToBody, moveRowToHeader, unsetColumnAsTitle, setColumnAsTitle, pinColumn, pinRow, unpinColumn, unpinRow, moveOrSwapRow, moveOrSwapColumn, } = useTableActions(element);
-    const { tableSelectedOn, setTableSelectedOn, tableHoveredOn, setTableHoveredOn } = useTableStates();
-    const portalContainerRef = React.useRef(null);
-    const { columnCount, rowCount, normalCols, bodyCount, tableElements } = React.useMemo(() => {
-        const elements = getTableElements(element);
-        if (!elements.tableMainElement) {
-            return {
-                columnCount: 0,
-                rowCount: 0,
-                treatAsTitleCols: 0,
-                normalCols: 0,
-                bodyCount: 0,
-                headerCount: 0,
-                tableElements: elements,
-            };
-        }
-        const headerRowElements = elements.tableHeaderElement
-            ? elements.tableHeaderElement.children.filter((child) => core.Element.isElement(child) && child.type.includes(table.TABLE_ROW_TYPE))
-            : [];
-        const bodyRowElements = elements.tableBodyElement
-            ? elements.tableBodyElement.children.filter((child) => core.Element.isElement(child) && child.type.includes(table.TABLE_ROW_TYPE))
-            : [];
-        const cols = bodyRowElements.length > 0 && core.Element.isElement(bodyRowElements[0]) ? bodyRowElements[0].children.length : 0;
-        const treatAsTitleCols = bodyRowElements.length > 0 && core.Element.isElement(bodyRowElements[0])
-            ? bodyRowElements[0].children.filter((row) => (core.Element.isElement(row) ? row.treatAsTitle : false)).length
-            : 0;
-        const rows = headerRowElements.length + bodyRowElements.length;
-        return {
-            columnCount: cols,
-            rowCount: rows,
-            headerCount: headerRowElements.length,
-            bodyCount: bodyRowElements.length,
-            treatAsTitleCols,
-            normalCols: cols - treatAsTitleCols,
-            tableElements: elements,
-        };
-    }, [element]);
-    // 預計算所有 cell positions
-    const cellPositions = React.useMemo(() => {
-        const positions = new Map();
-        if (!tableElements.tableMainElement)
-            return positions;
-        const { tableHeaderElement, tableBodyElement } = tableElements;
-        let globalRowIndex = 0;
-        // Process header rows
-        if (tableHeaderElement && core.Element.isElement(tableHeaderElement)) {
-            for (const row of tableHeaderElement.children) {
-                if (core.Element.isElement(row) && row.type.includes(table.TABLE_ROW_TYPE)) {
-                    for (let colIndex = 0; colIndex < row.children.length; colIndex++) {
-                        const cell = row.children[colIndex];
-                        if (core.Element.isElement(cell) && cell.type.includes(table.TABLE_CELL_TYPE)) {
-                            positions.set(cell, {
-                                columnIndex: colIndex,
-                                rowIndex: globalRowIndex,
-                            });
-                        }
-                    }
-                    globalRowIndex++;
-                }
-            }
-        }
-        // Process body rows
-        if (tableBodyElement && core.Element.isElement(tableBodyElement)) {
-            for (const row of tableBodyElement.children) {
-                if (core.Element.isElement(row) && row.type.includes(table.TABLE_ROW_TYPE)) {
-                    for (let colIndex = 0; colIndex < row.children.length; colIndex++) {
-                        const cell = row.children[colIndex];
-                        if (core.Element.isElement(cell) && cell.type.includes(table.TABLE_CELL_TYPE)) {
-                            positions.set(cell, {
-                                columnIndex: colIndex,
-                                rowIndex: globalRowIndex,
-                            });
-                        }
-                    }
-                    globalRowIndex++;
-                }
-            }
-        }
-        return positions;
-    }, [tableElements]);
-    // 預計算 pinned columns 和 rows
-    const { pinnedColumns, pinnedRows } = React.useMemo(() => {
-        const columns = new Set();
-        const rows = new Set();
-        if (!tableElements.tableBodyElement)
-            return { pinnedColumns: columns, pinnedRows: rows };
-        const { tableHeaderElement, tableBodyElement } = tableElements;
-        // 檢查 pinned columns - 只需要檢查第一個 body row
-        if (core.Element.isElement(tableBodyElement) && tableBodyElement.children.length > 0) {
-            const firstBodyRow = tableBodyElement.children[0];
-            if (core.Element.isElement(firstBodyRow) && firstBodyRow.type.includes(table.TABLE_ROW_TYPE)) {
-                for (let colIndex = 0; colIndex < firstBodyRow.children.length; colIndex++) {
-                    const cell = firstBodyRow.children[colIndex];
-                    if (core.Element.isElement(cell) &&
-                        cell.type.includes(table.TABLE_CELL_TYPE) &&
-                        cell.treatAsTitle &&
-                        cell.pinned) {
-                        columns.add(colIndex);
-                    }
-                }
-            }
-        }
-        // 檢查 pinned rows - 只需要檢查 header rows
-        if (tableHeaderElement && core.Element.isElement(tableHeaderElement)) {
-            for (let rowIndex = 0; rowIndex < tableHeaderElement.children.length; rowIndex++) {
-                const row = tableHeaderElement.children[rowIndex];
-                if (core.Element.isElement(row) && row.type.includes(table.TABLE_ROW_TYPE)) {
-                    // 檢查這一行的所有 cells 是否都是 pinned
-                    const allCellsPinned = row.children.every((cell) => core.Element.isElement(cell) && cell.type.includes(table.TABLE_CELL_TYPE) && cell.pinned);
-                    if (allCellsPinned) {
-                        rows.add(rowIndex);
-                    }
-                }
-            }
-        }
-        return { pinnedColumns: columns, pinnedRows: rows };
-    }, [tableElements]);
-    const isReachMaximumColumns = React.useMemo(() => {
-        return columnCount >= table.TABLE_DEFAULT_MAX_COLUMNS;
-    }, [columnCount]);
-    const isReachMaximumRows = React.useMemo(() => {
-        return table.TABLE_DEFAULT_MAX_ROWS > 0 ? rowCount >= table.TABLE_DEFAULT_MAX_ROWS : false;
-    }, [rowCount]);
-    const isReachMinimumNormalColumns = React.useMemo(() => {
-        return normalCols <= 1;
-    }, [normalCols]);
-    const isReachMinimumBodyRows = React.useMemo(() => {
-        return bodyCount <= 1;
-    }, [bodyCount]);
-    const isColumnPinned = React.useCallback((columnIndex) => {
-        return pinnedColumns.has(columnIndex);
-    }, [pinnedColumns]);
-    const isRowPinned = React.useCallback((rowIndex) => {
-        return pinnedRows.has(rowIndex);
-    }, [pinnedRows]);
-    const actionsValue = React.useMemo(() => ({
-        addColumn,
-        addRow,
-        addColumnAndRow,
-        deleteRow,
-        deleteColumn,
-        moveRowToBody,
-        moveRowToHeader,
-        unsetColumnAsTitle,
-        setColumnAsTitle,
-        pinColumn,
-        pinRow,
-        unpinColumn,
-        unpinRow,
-        moveOrSwapRow,
-        moveOrSwapColumn,
-    }), [
-        addColumn,
-        addRow,
-        addColumnAndRow,
-        deleteRow,
-        deleteColumn,
-        moveRowToBody,
-        moveRowToHeader,
-        unsetColumnAsTitle,
-        setColumnAsTitle,
-        pinColumn,
-        pinRow,
-        unpinColumn,
-        unpinRow,
-        moveOrSwapRow,
-        moveOrSwapColumn,
-    ]);
-    const metadataValue = React.useMemo(() => ({
-        tableElement: element,
-        columnCount,
-        rowCount,
-        portalContainerRef,
-        isReachMaximumColumns,
-        isReachMaximumRows,
-        isReachMinimumNormalColumns,
-        isReachMinimumBodyRows,
-        pinnedColumns,
-        pinnedRows,
-        cellPositions,
-        isColumnPinned,
-        isRowPinned,
-    }), [
-        element,
-        columnCount,
-        rowCount,
-        portalContainerRef,
-        isReachMaximumColumns,
-        isReachMaximumRows,
-        isReachMinimumNormalColumns,
-        isReachMinimumBodyRows,
-        pinnedColumns,
-        pinnedRows,
-        cellPositions,
-        isColumnPinned,
-        isRowPinned,
-    ]);
-    const stateValue = React.useMemo(() => ({
-        tableSelectedOn,
-        setTableSelectedOn,
-        tableHoveredOn,
-        setTableHoveredOn,
-    }), [tableSelectedOn, setTableSelectedOn, tableHoveredOn, setTableHoveredOn]);
-    return (React.createElement(TableDragProvider, null,
-        React.createElement(TableActionsContext.Provider, { value: actionsValue },
-            React.createElement(TableMetadataContext.Provider, { value: metadataValue },
-                React.createElement(TableStateContext.Provider, { value: stateValue },
-                    React.createElement("div", Object.assign({}, attributes, { className: "qdr-table" }),
-                        children,
-                        React.createElement("button", { type: "button", onClick: (evt) => {
-                                evt.preventDefault();
-                                evt.stopPropagation();
-                                setTableSelectedOn((prev) => ((prev === null || prev === void 0 ? void 0 : prev.region) === 'table' ? undefined : { region: 'table' }));
-                            }, onMouseDown: (evt) => {
-                                evt.preventDefault();
-                                evt.stopPropagation();
-                            }, className: "qdr-table__selection", title: (tableSelectedOn === null || tableSelectedOn === void 0 ? void 0 : tableSelectedOn.region) === 'table' ? 'Deselect Table' : 'Select Table' },
-                            React.createElement(components.Icon, { icon: icons.Drag, width: 20, height: 20 })),
-                        React.createElement("div", { ref: portalContainerRef, className: "qdr-table__portal-container", "data-slate-editor": false, contentEditable: false })))))));
-}
-
-function TableTitle(props) {
-    const { compositionPath } = react.useComposition();
-    const { attributes, children, element } = props;
-    const editor = react.useQuadrats();
-    const path = react.ReactEditor.findPath(editor, element);
-    const text = core.Editor.string(editor, path);
-    const isEmpty = !text;
-    const composing = React.useMemo(() => core.Path.equals(compositionPath, path), [compositionPath, path]);
-    return (React.createElement("h3", Object.assign({}, attributes, { className: "qdr-table__title" }),
-        children,
-        isEmpty && !composing && (React.createElement("span", { className: "qdr-table__title__placeholder", contentEditable: false }, "\u8ACB\u8F38\u5165\u8868\u683C\u6A19\u984C"))));
-}
-
-const TableScrollContext = React.createContext({
-    scrollRef: { current: null },
-    scrollTop: 0,
-    scrollLeft: 0,
-});
-
-const TableDragLayer = ({ scrollRef }) => {
-    const { dragState } = useTableDragContext();
-    const [columnWidths, setColumnWidths] = React.useState([]);
-    const [rowHeights, setRowHeights] = React.useState([]);
-    const { isDragging, currentOffset } = reactDnd.useDragLayer((monitor) => ({
-        isDragging: monitor.isDragging(),
-        currentOffset: monitor.getClientOffset(),
-    }));
-    // 計算所有 column 的寬度和 row 的高度
-    React.useEffect(() => {
-        if (!scrollRef.current || !isDragging)
-            return;
-        const tableContainer = scrollRef.current;
-        const cells = tableContainer.querySelectorAll('.qdr-table__cell');
-        if ((dragState === null || dragState === void 0 ? void 0 : dragState.type) === 'column') {
-            // 計算每個 column 的寬度
-            const widths = [];
-            const columnCells = Array.from(cells).filter((cell) => {
-                const cellElement = cell;
-                return cellElement.dataset.columnIndex !== undefined;
-            });
-            const columnCount = Math.max(...columnCells.map((cell) => {
-                const cellElement = cell;
-                return parseInt(cellElement.dataset.columnIndex || '0', 10);
-            })) + 1;
-            for (let i = 0; i < columnCount; i++) {
-                const cellsInColumn = columnCells.filter((cell) => {
-                    const cellElement = cell;
-                    return parseInt(cellElement.dataset.columnIndex || '0', 10) === i;
-                });
-                if (cellsInColumn.length > 0) {
-                    const firstCell = cellsInColumn[0];
-                    widths[i] = firstCell.getBoundingClientRect().width;
-                }
-            }
-            setColumnWidths(widths);
-        }
-        else if ((dragState === null || dragState === void 0 ? void 0 : dragState.type) === 'row') {
-            // 計算每個 row 的高度
-            const heights = [];
-            const rowCells = Array.from(cells).filter((cell) => {
-                const cellElement = cell;
-                return cellElement.dataset.rowIndex !== undefined;
-            });
-            const rowCount = Math.max(...rowCells.map((cell) => {
-                const cellElement = cell;
-                return parseInt(cellElement.dataset.rowIndex || '0', 10);
-            })) + 1;
-            for (let i = 0; i < rowCount; i++) {
-                const cellsInRow = rowCells.filter((cell) => {
-                    const cellElement = cell;
-                    return parseInt(cellElement.dataset.rowIndex || '0', 10) === i;
-                });
-                if (cellsInRow.length > 0) {
-                    const firstCell = cellsInRow[0];
-                    heights[i] = firstCell.getBoundingClientRect().height;
-                }
-            }
-            setRowHeights(heights);
-        }
-    }, [isDragging, dragState, scrollRef]);
-    if (!isDragging || !dragState || !currentOffset || !scrollRef.current) {
-        return null;
-    }
-    const tableContainer = scrollRef.current;
-    const tableRect = tableContainer.getBoundingClientRect();
-    if (dragState.type) {
-        const sourceIndex = dragState.type === 'column' ? dragState.columnIndex : dragState.rowIndex;
-        const rowHeight = dragState.type === 'column' ? tableRect.height : rowHeights[sourceIndex];
-        const columnWidth = dragState.type === 'column' ? columnWidths[sourceIndex] : tableRect.width;
-        return (React.createElement("div", { className: "qdr-table__drag-overlay", style: {
-                left: tableRect.left,
-                top: tableRect.top,
-                width: columnWidth,
-                height: rowHeight,
-                transform: dragState.type === 'column'
-                    ? `translateX(${currentOffset.x - tableRect.left - columnWidth / 2}px)`
-                    : `translateY(${currentOffset.y - tableRect.top - rowHeight / 2}px)`,
-            } },
-            React.createElement("div", { className: "qdr-table__drag-overlay-content" })));
-    }
-    return null;
-};
-
-function TableMain(props) {
-    const { attributes, children } = props;
-    const { setConfirmModalConfig } = react.useModal();
-    const editor = react.useSlateStatic();
-    const { addColumn, addRow, addColumnAndRow } = useTableActionsContext();
-    const { isReachMaximumColumns, isReachMaximumRows, tableElement } = useTableMetadata();
-    const { tableSelectedOn, setTableSelectedOn } = useTableStateContext();
-    const { dragState } = useTableDragContext();
-    // Table align functions
-    const setAlign = useTableCellAlign(tableElement, editor);
-    const getAlign = useTableCellAlignStatus(tableElement, editor);
-    const tablePath = react.ReactEditor.findPath(editor, tableElement);
-    const scrollRef = React.useRef(null);
-    const tableRef = React.useRef(null);
-    const [scrollTop, setScrollTop] = React.useState(0);
-    const [scrollLeft, setScrollLeft] = React.useState(0);
-    const [tableWidth, setTableWidth] = React.useState(0);
-    const scrollUpdateTimerRef = React.useRef(null);
-    const isUpdatingScrollRef = React.useRef(false); // 標記是否正在更新滾動位置
-    const previousColumnWidthsRef = React.useRef(''); // 追蹤 columnWidths 的變化
-    // sizing
-    const { tableBodyElement } = getTableElements(tableElement);
-    const firstRowCells = tableBodyElement === null || tableBodyElement === void 0 ? void 0 : tableBodyElement.children[0].children;
-    // 獲取欄位寬度（傳入 tableWidth 以支援混合模式）
-    const columnWidths = React.useMemo(() => getColumnWidths(tableElement, tableWidth), [tableElement, tableWidth]);
-    // 計算 table 的最小寬度
-    const tableMinWidth = React.useMemo(() => table.calculateTableMinWidth(columnWidths), [columnWidths]);
-    // 監聽 table 寬度變化
-    React.useEffect(() => {
-        const { current: table } = tableRef;
-        if (!table)
-            return;
-        const resizeObserver = new ResizeObserver((entries) => {
-            for (const entry of entries) {
-                setTableWidth(entry.contentRect.width);
-            }
-        });
-        resizeObserver.observe(table);
-        // 初始化寬度
-        setTableWidth(table.getBoundingClientRect().width);
-        return () => {
-            resizeObserver.disconnect();
-        };
-    }, []);
-    React.useEffect(() => {
-        const { current: scrollContainer } = scrollRef;
-        if (!scrollContainer)
-            return;
-        const handleScroll = () => {
-            setScrollTop(scrollContainer.scrollTop);
-            setScrollLeft(scrollContainer.scrollLeft);
-            // 如果正在更新滾動位置，不要觸發 Slate 更新
-            if (isUpdatingScrollRef.current) {
-                return;
-            }
-            // 如果正在拖曳，不要觸發 Slate 更新（避免 transform 導致事件遺失）
-            if (dragState) {
-                return;
-            }
-            // 使用 debounce 來減少 Slate 更新頻率
-            if (scrollUpdateTimerRef.current) {
-                clearTimeout(scrollUpdateTimerRef.current);
-            }
-            scrollUpdateTimerRef.current = setTimeout(() => {
-                // 更新 tableElement 的 scrollPosition
-                const tablePath = react.ReactEditor.findPath(editor, tableElement);
-                slate.Transforms.setNodes(editor, {
-                    scrollPosition: {
-                        scrollLeft: scrollContainer.scrollLeft,
-                        scrollTop: scrollContainer.scrollTop,
-                    },
-                }, { at: tablePath });
-            }, 300); // 300ms debounce
-        };
-        scrollContainer.addEventListener('scroll', handleScroll, false);
-        return () => {
-            scrollContainer.removeEventListener('scroll', handleScroll, false);
-            if (scrollUpdateTimerRef.current) {
-                clearTimeout(scrollUpdateTimerRef.current);
-            }
-        };
-    }, [editor, tableElement, dragState]);
-    // 只在 columnWidths 改變時恢復滾動位置
-    React.useEffect(() => {
-        const { current: scrollContainer } = scrollRef;
-        if (!scrollContainer || !tableElement.scrollPosition)
-            return;
-        // 檢查 columnWidths 是否真的改變了
-        const currentColumnWidthsStr = JSON.stringify(columnWidths);
-        if (previousColumnWidthsRef.current !== currentColumnWidthsStr) {
-            previousColumnWidthsRef.current = currentColumnWidthsStr;
-            // 標記正在更新，避免觸發 handleScroll
-            isUpdatingScrollRef.current = true;
-            // 使用 requestAnimationFrame 確保 DOM 已更新
-            requestAnimationFrame(() => {
-                var _a, _b, _c, _d;
-                scrollContainer.scrollLeft = (_b = (_a = tableElement.scrollPosition) === null || _a === void 0 ? void 0 : _a.scrollLeft) !== null && _b !== void 0 ? _b : 0;
-                scrollContainer.scrollTop = (_d = (_c = tableElement.scrollPosition) === null || _c === void 0 ? void 0 : _c.scrollTop) !== null && _d !== void 0 ? _d : 0;
-                // 重置標記
-                setTimeout(() => {
-                    isUpdatingScrollRef.current = false;
-                }, 100);
-            });
-        }
-    }, [columnWidths, tableElement.scrollPosition]);
-    const scrollContextValue = React.useMemo(() => ({ scrollTop, scrollLeft, scrollRef }), [scrollTop, scrollLeft, scrollRef]);
-    // 複製 Table 功能
-    const copyTable = React.useCallback(() => {
-        try {
-            const clonedTable = JSON.parse(JSON.stringify(tableElement));
-            // 找到當前 table 的父節點路徑
-            const tableParentPath = tablePath.slice(0, -1);
-            const tableIndex = tablePath[tablePath.length - 1];
-            // 在當前 table 之後插入複製的 table
-            slate.Transforms.insertNodes(editor, clonedTable, {
-                at: [...tableParentPath, tableIndex + 1],
-            });
-        }
-        catch (error) {
-            console.error('Failed to copy table:', error);
-        }
-    }, [editor, tableElement, tablePath]);
-    // 獲取當前 table 的 align 狀態
-    const currentTableAlign = getAlign('table');
-    // 根據當前 table align 狀態選擇對應的 icon
-    const getCurrentTableAlignIcon = React.useCallback(() => {
-        switch (currentTableAlign) {
-            case 'left':
-                return icons.AlignLeft;
-            case 'center':
-                return icons.AlignCenter;
-            case 'right':
-                return icons.AlignRight;
-            default:
-                return icons.AlignLeft;
-        }
-    }, [currentTableAlign]);
-    return (React.createElement("div", { className: clsx('qdr-table__mainWrapper', {
-            'qdr-table__mainWrapper--selected': (tableSelectedOn === null || tableSelectedOn === void 0 ? void 0 : tableSelectedOn.region) === 'table',
-        }) },
-        React.createElement(toolbar.InlineToolbar, { className: "qdr-table__table-toolbar", onClickAway: (tableSelectedOn === null || tableSelectedOn === void 0 ? void 0 : tableSelectedOn.region) === 'table' ? () => setTableSelectedOn(undefined) : undefined, iconGroups: [
-                {
-                    icons: [
-                        {
-                            icon: icons.Copy,
-                            onClick: () => {
-                                copyTable();
-                            },
-                        },
-                        React.createElement(toolbar.ToolbarGroupIcon, { key: "table-align-change", icon: getCurrentTableAlignIcon() },
-                            React.createElement(toolbar.ToolbarIcon, { icon: icons.AlignLeft, onClick: () => {
-                                    setAlign('left', 'table');
-                                } }),
-                            React.createElement(toolbar.ToolbarIcon, { icon: icons.AlignCenter, onClick: () => {
-                                    setAlign('center', 'table');
-                                } }),
-                            React.createElement(toolbar.ToolbarIcon, { icon: icons.AlignRight, onClick: () => {
-                                    setAlign('right', 'table');
-                                } })),
-                    ],
-                },
-                {
-                    icons: [
-                        {
-                            icon: icons.Trash,
-                            className: 'qdr-table__delete',
-                            onClick: () => {
-                                setConfirmModalConfig({
-                                    title: '刪除表格',
-                                    content: '是否確認刪除此表格？刪除後將立即移除，且此操作無法復原。',
-                                    confirmText: '刪除表格',
-                                    onConfirm: () => {
-                                        slate.Transforms.removeNodes(editor, { at: tablePath });
-                                    },
-                                });
-                            },
-                        },
-                    ],
-                },
-            ] }),
-        React.createElement("div", { ref: scrollRef, className: "qdr-table__scrollContainer" },
-            React.createElement(TableScrollContext.Provider, { value: scrollContextValue },
-                React.createElement("table", Object.assign({}, attributes, { ref: (node) => {
-                        // 合併兩個 refs
-                        tableRef.current = node;
-                        if (typeof attributes.ref === 'function') {
-                            attributes.ref(node);
-                        }
-                        else if (attributes.ref) {
-                            attributes.ref.current = node;
-                        }
-                    }, className: "qdr-table__main", style: {
-                        minWidth: tableMinWidth,
-                    } }),
-                    React.createElement("colgroup", null, columnWidths.map((width, index) => (React.createElement("col", { key: index, style: {
-                            width: table.columnWidthToCSS(width),
-                            minWidth: table.columnWidthToCSS(width),
-                        } })))),
-                    children)),
-            React.createElement(TableDragLayer, { scrollRef: scrollRef })),
-        React.createElement("div", { className: "qdr-table__size-indicators" }, firstRowCells === null || firstRowCells === void 0 ? void 0 : firstRowCells.map((cell, colIndex) => (React.createElement("div", { key: colIndex, className: "qdr-table__size-indicator", style: {
-                width: table.columnWidthToCSS(columnWidths[colIndex]),
-                minWidth: table.columnWidthToCSS(columnWidths[colIndex]),
-                transform: cell.pinned ? 'none' : `translateX(-${scrollLeft}px)`,
-                zIndex: cell.pinned ? 2 : 1,
-            } },
-            React.createElement("div", { className: "qdr-table__size" }, table.columnWidthToCSS(columnWidths[colIndex])))))),
-        isReachMaximumColumns ? null : (React.createElement("button", { type: "button", onClick: () => addColumn(), title: "Add Column", className: "qdr-table__add-column" },
-            React.createElement(components.Icon, { icon: icons.Plus, width: 20, height: 20, className: "qdr-table__btn-icon" }))),
-        isReachMaximumRows ? null : (React.createElement("button", { type: "button", onClick: () => addRow(), title: "Add Row", className: "qdr-table__add-row" },
-            React.createElement(components.Icon, { icon: icons.Plus, width: 20, height: 20, className: "qdr-table__btn-icon" }))),
-        isReachMaximumColumns || isReachMaximumRows ? null : (React.createElement("button", { type: "button", onClick: addColumnAndRow, title: "Add Column and Row", className: "qdr-table__add-both" },
-            React.createElement(components.Icon, { icon: icons.Plus, width: 20, height: 20, className: "qdr-table__btn-icon" })))));
-}
-
-const TableHeaderContext = React.createContext({
-    isHeader: false,
-});
-
-function TableHeader(props) {
-    const { attributes, children, element } = props;
-    const tableHeaderContextValue = React.useMemo(() => ({ isHeader: true }), []);
-    const hasAnyRowPinned = element.children.some((child) => child.children.every((cell) => cell.pinned));
-    return (React.createElement(TableHeaderContext.Provider, { value: tableHeaderContextValue },
-        React.createElement("thead", Object.assign({}, attributes, { className: clsx('qdr-table__header', { 'qdr-table__header--pinned': hasAnyRowPinned }) }), children)));
-}
-
-function TableRow(props) {
-    const { attributes, children } = props;
-    return React.createElement("tr", Object.assign({}, attributes), children);
-}
-
-function useColumnResize({ tableElement, columnIndex, cellRef }) {
-    const editor = slateReact.useSlateStatic();
-    const { setTableSelectedOn } = useTableStateContext();
-    const [isResizing, setIsResizing] = React.useState(false);
-    const resizeDataRef = React.useRef(null);
-    const currentWidthsRef = React.useRef(null);
-    const handleResizeStart = React.useCallback((e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        // 清除當前的 focus 狀態和 table selection
-        core.Transforms.deselect(editor);
-        setTableSelectedOn(undefined);
-        const cell = cellRef.current;
-        if (!cell)
-            return;
-        // 找到 table DOM 元素和 scroll container
-        const tableDOMElement = cell.closest('table');
-        const scrollContainer = tableDOMElement === null || tableDOMElement === void 0 ? void 0 : tableDOMElement.closest('.qdr-table__scrollContainer');
-        if (!tableDOMElement || !scrollContainer)
-            return;
-        const tableRect = tableDOMElement.getBoundingClientRect();
-        const containerRect = scrollContainer.getBoundingClientRect();
-        // 獲取釘選欄位資訊
-        const { pinnedColumnIndices } = getPinnedColumnsInfo(tableElement);
-        // 儲存初始狀態
-        resizeDataRef.current = {
-            startX: e.clientX,
-            startWidths: getColumnWidths(tableElement, tableRect.width),
-            tableWidth: tableRect.width,
-            containerWidth: containerRect.width,
-            pinnedColumnIndices,
-            tableDOMElement,
-        };
-        setIsResizing(true);
-        // 顯示 size indicators 容器
-        const mainWrapper = tableDOMElement.closest('.qdr-table__mainWrapper');
-        const sizeIndicatorsContainer = mainWrapper === null || mainWrapper === void 0 ? void 0 : mainWrapper.querySelector('.qdr-table__size-indicators');
-        if (sizeIndicatorsContainer) {
-            sizeIndicatorsContainer.style.display = 'flex';
-        }
-        // 為當前 column 的所有 cell 添加 resizing class
-        const allRows = tableDOMElement.querySelectorAll('tr');
-        allRows.forEach((row) => {
-            const cells = row.querySelectorAll('td, th');
-            const targetCell = cells[columnIndex];
-            if (targetCell) {
-                targetCell.classList.add('qdr-table__cell--resizing');
-            }
-        });
-        const handleMouseMove = (moveEvent) => {
-            if (!resizeDataRef.current)
-                return;
-            const { startX, startWidths, tableWidth, pinnedColumnIndices, tableDOMElement } = resizeDataRef.current;
-            const deltaX = moveEvent.clientX - startX;
-            // 將位移轉換為百分比
-            const deltaPercentage = (deltaX / tableWidth) * 100;
-            // 計算新的欄位寬度
-            const newWidths = calculateResizedColumnWidths(startWidths, columnIndex, deltaPercentage, deltaX, pinnedColumnIndices);
-            // 儲存計算結果，但不更新 Slate
-            currentWidthsRef.current = newWidths;
-            // 更新 table 的最小寬度
-            tableDOMElement.style.minWidth = table.calculateTableMinWidth(newWidths);
-            // 直接更新 DOM 的 <col> 元素
-            const colgroup = tableDOMElement.querySelector('colgroup');
-            if (colgroup) {
-                const cols = colgroup.querySelectorAll('col');
-                newWidths.forEach((width, index) => {
-                    const col = cols[index];
-                    if (col) {
-                        const cssWidth = width.type === 'percentage' ? `${width.value.toFixed(1)}%` : `${width.value}px`;
-                        col.style.width = cssWidth;
-                        col.style.minWidth = cssWidth;
-                    }
-                });
-            }
-            // 如果有 pinned columns，重新計算所有 pinned cells 的 left 位置
-            if (pinnedColumnIndices.length > 0) {
-                const allRows = tableDOMElement.querySelectorAll('tr');
-                const scrollContainer = tableDOMElement.closest('.qdr-table__scrollContainer');
-                const containerRect = scrollContainer === null || scrollContainer === void 0 ? void 0 : scrollContainer.getBoundingClientRect();
-                const containerWidth = (containerRect === null || containerRect === void 0 ? void 0 : containerRect.width) || tableWidth;
-                // 為每個 pinned column 計算應該的絕對位置
-                pinnedColumnIndices.forEach((pinnedIndex) => {
-                    // 計算此 column 之前所有 pinned columns 的累積寬度
-                    let accumulatedLeft = 0;
-                    for (let i = 0; i < pinnedIndex; i++) {
-                        if (pinnedColumnIndices.includes(i)) {
-                            const width = newWidths[i];
-                            if (width.type === 'percentage') {
-                                const pixelWidth = (containerWidth * width.value) / 100;
-                                accumulatedLeft += pixelWidth;
-                            }
-                        }
-                    }
-                    // 更新該 column 所有 cells 的 left 位置
-                    allRows.forEach((row) => {
-                        const cells = row.querySelectorAll('td, th');
-                        const targetCell = cells[pinnedIndex];
-                        if (targetCell && targetCell.classList.contains('qdr-table__cell--pinned')) {
-                            targetCell.style.left = `${accumulatedLeft}px`;
-                        }
-                    });
-                });
-            }
-            // 更新 size indicators
-            const sizeIndicatorsContainer = mainWrapper === null || mainWrapper === void 0 ? void 0 : mainWrapper.querySelector('.qdr-table__size-indicators');
-            if (sizeIndicatorsContainer) {
-                const indicators = sizeIndicatorsContainer.querySelectorAll('.qdr-table__size-indicator');
-                newWidths.forEach((width, index) => {
-                    const indicator = indicators[index];
-                    if (indicator) {
-                        const cssWidth = width.type === 'percentage' ? `${width.value.toFixed(1)}%` : `${width.value}px`;
-                        const displayWidth = width.type === 'percentage' ? `${width.value.toFixed(1)}%` : `${width.value}px`;
-                        indicator.style.width = cssWidth;
-                        indicator.style.minWidth = cssWidth;
-                        // 更新顯示文字
-                        const sizeText = indicator.querySelector('.qdr-table__size');
-                        if (sizeText) {
-                            sizeText.textContent = displayWidth;
-                        }
-                    }
-                });
-            }
-        };
-        const handleMouseUp = () => {
-            const allRows = tableDOMElement.querySelectorAll('tr');
-            allRows.forEach((row) => {
-                const cells = row.querySelectorAll('td, th');
-                const targetCell = cells[columnIndex];
-                if (targetCell) {
-                    targetCell.classList.remove('qdr-table__cell--resizing');
-                }
-            });
-            // 隱藏 size indicators 容器
-            const mainWrapper = tableDOMElement.closest('.qdr-table__mainWrapper');
-            const sizeIndicatorsContainer = mainWrapper === null || mainWrapper === void 0 ? void 0 : mainWrapper.querySelector('.qdr-table__size-indicators');
-            if (sizeIndicatorsContainer) {
-                sizeIndicatorsContainer.style.display = 'none';
-            }
-            // 將最終寬度寫入 Slate
-            if (currentWidthsRef.current) {
-                core.Editor.withoutNormalizing(editor, () => {
-                    setColumnWidths(editor, tableElement, currentWidthsRef.current);
-                });
-            }
-            setIsResizing(false);
-            resizeDataRef.current = null;
-            currentWidthsRef.current = null;
-            document.removeEventListener('mousemove', handleMouseMove);
-            document.removeEventListener('mouseup', handleMouseUp);
-        };
-        document.addEventListener('mousemove', handleMouseMove);
-        document.addEventListener('mouseup', handleMouseUp);
-    }, [editor, columnIndex, cellRef, tableElement, setTableSelectedOn]);
-    return {
-        isResizing,
-        handleResizeStart,
-    };
-}
-
-const ROW_DRAG_TYPE = 'TABLE_ROW';
-const RowDragButton = ({ rowIndex, headerRowCount, style, onClick }) => {
-    const buttonRef = React.useRef(null);
-    const { setDragState, setDropTargetIndex, setDragDirection } = useTableDragContext();
-    // 判斷當前 row 是否在 header 中
-    const isInHeader = rowIndex < headerRowCount;
-    const [{ isDragging }, drag, preview] = reactDnd.useDrag(() => ({
-        type: ROW_DRAG_TYPE,
-        item: () => {
-            const dragItem = { rowIndex, isInHeader };
-            setDragState({ type: 'row', rowIndex, isInHeader });
-            return dragItem;
-        },
-        collect: (monitor) => ({
-            isDragging: monitor.isDragging(),
-        }),
-        end: () => {
-            setDragState(null);
-            setDropTargetIndex(null);
-            setDragDirection(null);
-        },
-    }), [rowIndex, isInHeader, setDragState, setDropTargetIndex, setDragDirection]);
-    // 使用空白圖片作為 drag preview，避免顯示預設的拖曳圖像
-    React.useEffect(() => {
-        preview(reactDndHtml5Backend.getEmptyImage(), { captureDraggingState: true });
-    }, [preview]);
-    drag(buttonRef);
-    return (React.createElement("button", { ref: buttonRef, type: "button", contentEditable: false, style: style, onClick: onClick, title: "\u9EDE\u64CA\u958B\u555F\u9078\u55AE\uFF0C\u62D6\u66F3\u4EE5\u79FB\u52D5", className: clsx('qdr-table__cell-row-action', {
-            'qdr-table__cell-row-action--dragging': isDragging,
-        }) },
-        React.createElement(components.Icon, { icon: icons.Drag, width: 20, height: 20 })));
-};
-
-const COLUMN_DRAG_TYPE = 'TABLE_COLUMN';
-const ColumnDragButton = ({ columnIndex, style, onClick, checkIsTitleColumn, }) => {
-    const buttonRef = React.useRef(null);
-    const { setDragState, setDropTargetIndex, setDragDirection } = useTableDragContext();
-    const isTitle = checkIsTitleColumn(columnIndex);
-    const [{ isDragging }, drag, preview] = reactDnd.useDrag(() => ({
-        type: COLUMN_DRAG_TYPE,
-        item: () => {
-            const dragItem = { columnIndex, isTitle };
-            setDragState({ type: 'column', columnIndex, isTitle });
-            return dragItem;
-        },
-        collect: (monitor) => ({
-            isDragging: monitor.isDragging(),
-        }),
-        end: () => {
-            setDragState(null);
-            setDropTargetIndex(null);
-            setDragDirection(null);
-        },
-    }), [columnIndex, isTitle, setDragState, setDropTargetIndex, setDragDirection]);
-    // 使用空白圖片作為 drag preview，避免顯示預設的拖曳圖像
-    React.useEffect(() => {
-        preview(reactDndHtml5Backend.getEmptyImage(), { captureDraggingState: true });
-    }, [preview]);
-    drag(buttonRef);
-    return (React.createElement("button", { ref: buttonRef, type: "button", contentEditable: false, style: style, onClick: onClick, title: "\u9EDE\u64CA\u958B\u555F\u9078\u55AE\uFF0C\u62D6\u66F3\u4EE5\u79FB\u52D5", className: clsx('qdr-table__cell-column-action', {
-            'qdr-table__cell-column-action--dragging': isDragging,
-        }) },
-        React.createElement(components.Icon, { icon: icons.Drag, width: 20, height: 20 })));
-};
-
-function TableCell(props) {
-    var _a, _b;
-    const { attributes, children, element } = props;
-    const { tableSelectedOn, setTableSelectedOn, tableHoveredOn, setTableHoveredOn } = useTableStateContext();
-    const { columnCount, rowCount, portalContainerRef, isColumnPinned, tableElement } = useTableMetadata();
-    const { moveOrSwapRow, moveOrSwapColumn } = useTableActionsContext();
-    const { dragState, dropTargetIndex, setDropTargetIndex, dragDirection, setDragDirection } = useTableDragContext();
-    // Component context
-    const { isHeader } = React.useContext(TableHeaderContext);
-    const { scrollTop, scrollLeft, scrollRef } = React.useContext(TableScrollContext);
-    const editor = slateReact.useSlateStatic();
-    // Cell-specific hooks
-    const focused = useTableCellFocused(element, editor);
-    const cellPosition = useTableCellPosition(element);
-    const transformCellContent = useTableCellTransformContent(element, editor);
-    // Get header row count from table structure
-    const tableElements = getTableElements(tableElement);
-    const headerRowCount = ((_a = tableElements.tableHeaderElement) === null || _a === void 0 ? void 0 : _a.children.length) || 0;
-    // Helper to check if column is title column
-    const checkIsTitleColumn = React.useCallback((colIndex) => {
-        const elements = getTableElements(tableElement);
-        if (!elements.tableBodyElement)
-            return false;
-        const firstRow = elements.tableBodyElement.children[0];
-        if (!core.Element.isElement(firstRow))
-            return false;
-        const cell = firstRow.children[colIndex];
-        return core.Element.isElement(cell) && !!cell.treatAsTitle;
-    }, [tableElement]);
-    // Toolbar actions
-    const { focusToolbarIconGroups, inlineToolbarIconGroups } = useTableCellToolbarActions({
-        element,
-        cellPosition,
-        isHeader,
-        transformCellContent,
-    });
-    const isSelectedInSameRow = (tableSelectedOn === null || tableSelectedOn === void 0 ? void 0 : tableSelectedOn.region) === 'row' && (tableSelectedOn === null || tableSelectedOn === void 0 ? void 0 : tableSelectedOn.index) === cellPosition.rowIndex;
-    const isSelectedInSameColumn = (tableSelectedOn === null || tableSelectedOn === void 0 ? void 0 : tableSelectedOn.region) === 'column' && (tableSelectedOn === null || tableSelectedOn === void 0 ? void 0 : tableSelectedOn.index) === cellPosition.columnIndex;
-    // 判斷是否為正在被拖曳的 row/column
-    const isDraggingThisRow = (dragState === null || dragState === void 0 ? void 0 : dragState.type) === 'row' && dragState.rowIndex === cellPosition.rowIndex;
-    const isDraggingThisColumn = (dragState === null || dragState === void 0 ? void 0 : dragState.type) === 'column' && dragState.columnIndex === cellPosition.columnIndex;
-    const isSelectionTriggerByMe = (isSelectedInSameRow && cellPosition.columnIndex === 0) || (isSelectedInSameColumn && cellPosition.rowIndex === 0);
-    const showColumnActionButton = React.useMemo(() => cellPosition.rowIndex === 0 &&
-        (isSelectedInSameColumn || ((tableHoveredOn === null || tableHoveredOn === void 0 ? void 0 : tableHoveredOn.columnIndex) === cellPosition.columnIndex && !tableSelectedOn)), [cellPosition, isSelectedInSameColumn, tableHoveredOn, tableSelectedOn]);
-    const showRowActionButton = React.useMemo(() => cellPosition.columnIndex === 0 &&
-        (isSelectedInSameRow || ((tableHoveredOn === null || tableHoveredOn === void 0 ? void 0 : tableHoveredOn.rowIndex) === cellPosition.rowIndex && !tableSelectedOn)), [cellPosition, isSelectedInSameRow, tableHoveredOn, tableSelectedOn]);
-    // 用於定位 InlineToolbar 的 ref
-    const cellRef = React.useRef(null);
-    const [toolbarPosition, setToolbarPosition] = React.useState(null);
-    const [rowButtonPosition, setRowButtonPosition] = React.useState(null);
-    const [columnButtonPosition, setColumnButtonPosition] = React.useState(null);
-    const [cellStuckAtLeft, setCellStuckAtLeft] = React.useState(undefined);
-    const [, dropRow] = reactDnd.useDrop(() => ({
-        accept: ROW_DRAG_TYPE,
-        canDrop: (item) => {
-            if (!dragState || dragState.type !== 'row')
-                return false;
-            if (item.rowIndex === cellPosition.rowIndex)
-                return false;
-            const sourceInHeader = item.isInHeader;
-            const targetInHeader = cellPosition.rowIndex < headerRowCount;
-            return sourceInHeader === targetInHeader;
-        },
-        hover: (item, monitor) => {
-            if (!monitor.canDrop()) {
-                setDropTargetIndex(null);
-                setDragDirection(null);
-                return;
-            }
-            const direction = item.rowIndex < cellPosition.rowIndex ? 'down' : 'up';
-            setDropTargetIndex(cellPosition.rowIndex);
-            setDragDirection(direction);
-        },
-        drop: (item) => {
-            moveOrSwapRow(item.rowIndex, cellPosition.rowIndex, 'move');
-            setDropTargetIndex(null);
-            setDragDirection(null);
-        },
-    }), [dragState, cellPosition.rowIndex, headerRowCount, moveOrSwapRow, setDropTargetIndex, setDragDirection]);
-    // Drop target logic for columns
-    const [, dropColumn] = reactDnd.useDrop(() => ({
-        accept: COLUMN_DRAG_TYPE,
-        canDrop: (item) => {
-            if (!dragState || dragState.type !== 'column')
-                return false;
-            if (item.columnIndex === cellPosition.columnIndex)
-                return false;
-            const sourceIsTitle = item.isTitle;
-            const targetIsTitle = checkIsTitleColumn(cellPosition.columnIndex);
-            return sourceIsTitle === targetIsTitle;
-        },
-        hover: (item, monitor) => {
-            if (!monitor.canDrop()) {
-                setDropTargetIndex(null);
-                setDragDirection(null);
-                return;
-            }
-            // 計算拖曳方向
-            const direction = item.columnIndex < cellPosition.columnIndex ? 'right' : 'left';
-            setDropTargetIndex(cellPosition.columnIndex);
-            setDragDirection(direction);
-        },
-        drop: (item) => {
-            moveOrSwapColumn(item.columnIndex, cellPosition.columnIndex, 'move');
-            setDropTargetIndex(null);
-            setDragDirection(null);
-        },
-    }), [dragState, cellPosition.columnIndex, checkIsTitleColumn, moveOrSwapColumn, setDropTargetIndex, setDragDirection]);
-    // Combine refs
-    dropRow(dropColumn(cellRef));
-    // Column resize
-    const { isResizing, handleResizeStart } = useColumnResize({
-        tableElement,
-        columnIndex: cellPosition.columnIndex,
-        cellRef,
-    });
-    React.useEffect(() => {
-        const { current: cell } = cellRef;
-        const { current: portalContainer } = portalContainerRef;
-        if (!cell || !portalContainer) {
-            setToolbarPosition(null);
-            setRowButtonPosition(null);
-            setColumnButtonPosition(null);
-            return;
-        }
-        const rafId = requestAnimationFrame(() => {
-            const cellRect = cell.getBoundingClientRect();
-            const portalContainerRect = portalContainer.getBoundingClientRect();
-            // 工具列位置 (針對 focused 狀態)
-            if (focused || isSelectionTriggerByMe) {
-                setToolbarPosition({
-                    top: cellRect.top - portalContainerRect.top - 4, // -4px offset
-                    left: cellRect.left - portalContainerRect.left,
-                });
-            }
-            else {
-                setToolbarPosition(null);
-            }
-            // 行按鈕位置 (顯示在第一列)
-            if (cellPosition.columnIndex === 0) {
-                setRowButtonPosition({
-                    top: Math.min(cellRect.top - portalContainerRect.top + cellRect.height / 2 - 10, 0), // 置中，按鈕高度約 20px
-                    left: cellRect.left - portalContainerRect.left - 10, // 向左偏移 10px
-                });
-            }
-            else {
-                setRowButtonPosition(null);
-            }
-            // 列按鈕位置 (顯示在第一行)
-            if (cellPosition.rowIndex === 0) {
-                setColumnButtonPosition({
-                    top: cellRect.top - portalContainerRect.top - 10 + scrollTop, // 向上偏移 10px
-                    left: cellRect.left - portalContainerRect.left + cellRect.width / 2 - 10, // 置中，按鈕寬度約 20px
-                });
-            }
-            else {
-                setColumnButtonPosition(null);
-            }
-        });
-        return () => {
-            cancelAnimationFrame(rafId);
-        };
-    }, [
-        focused,
-        isSelectionTriggerByMe,
-        cellPosition.columnIndex,
-        cellPosition.rowIndex,
-        portalContainerRef,
-        scrollTop,
-        scrollLeft,
-    ]);
-    React.useEffect(() => {
-        const { current: cell } = cellRef;
-        const { current: scrollContainer } = scrollRef;
-        if (scrollContainer && cell) {
-            const cellRect = cell.getBoundingClientRect();
-            const containerRect = scrollContainer.getBoundingClientRect();
-            setCellStuckAtLeft(Math.max(Math.round(cellRect.left - containerRect.left), 0));
-        }
-    }, [scrollRef]);
-    const TagName = isHeader ? 'th' : 'td';
-    const myColumnIsPinned = isColumnPinned(cellPosition.columnIndex) && element.treatAsTitle;
-    return (React.createElement(TagName, Object.assign({}, attributes, { ref: cellRef, onMouseEnter: () => {
-            setTableHoveredOn({ columnIndex: cellPosition.columnIndex, rowIndex: cellPosition.rowIndex });
-        }, onMouseLeave: () => {
-            setTableHoveredOn(undefined);
-        }, className: clsx('qdr-table__cell', {
-            'qdr-table__cell--header': isHeader || element.treatAsTitle,
-            'qdr-table__cell--pinned': myColumnIsPinned,
-            'qdr-table__cell--top-active': isSelectedInSameRow ||
-                (isSelectedInSameColumn && cellPosition.rowIndex === 0) ||
-                isDraggingThisRow ||
-                (isDraggingThisColumn && cellPosition.rowIndex === 0),
-            'qdr-table__cell--right-active': isSelectedInSameColumn ||
-                (isSelectedInSameRow && cellPosition.columnIndex === columnCount - 1) ||
-                isDraggingThisColumn ||
-                (isDraggingThisRow && cellPosition.columnIndex === columnCount - 1),
-            'qdr-table__cell--bottom-active': isSelectedInSameRow ||
-                (isSelectedInSameColumn && cellPosition.rowIndex === rowCount - 1) ||
-                isDraggingThisRow ||
-                (isDraggingThisColumn && cellPosition.rowIndex === rowCount - 1),
-            'qdr-table__cell--left-active': isSelectedInSameColumn ||
-                (isSelectedInSameRow && cellPosition.columnIndex === 0) ||
-                isDraggingThisColumn ||
-                (isDraggingThisRow && cellPosition.columnIndex === 0),
-            'qdr-table__cell--is-selection-trigger-by-me': isSelectionTriggerByMe,
-            'qdr-table__cell--drag-row-target-top': (dragState === null || dragState === void 0 ? void 0 : dragState.type) === 'row' &&
-                dropTargetIndex === cellPosition.rowIndex &&
-                dropTargetIndex !== dragState.rowIndex &&
-                dragDirection === 'up',
-            'qdr-table__cell--drag-row-target-bottom': (dragState === null || dragState === void 0 ? void 0 : dragState.type) === 'row' &&
-                dropTargetIndex === cellPosition.rowIndex &&
-                dropTargetIndex !== dragState.rowIndex &&
-                dragDirection === 'down',
-            'qdr-table__cell--drag-column-target-left': (dragState === null || dragState === void 0 ? void 0 : dragState.type) === 'column' &&
-                dropTargetIndex === cellPosition.columnIndex &&
-                dropTargetIndex !== dragState.columnIndex &&
-                dragDirection === 'left',
-            'qdr-table__cell--drag-column-target-right': (dragState === null || dragState === void 0 ? void 0 : dragState.type) === 'column' &&
-                dropTargetIndex === cellPosition.columnIndex &&
-                dropTargetIndex !== dragState.columnIndex &&
-                dragDirection === 'right',
-        }), "data-row-index": cellPosition.rowIndex, "data-column-index": cellPosition.columnIndex, style: myColumnIsPinned
-            ? {
-                left: cellStuckAtLeft,
-            }
-            : undefined }),
-        children,
-        React.createElement("div", { contentEditable: false, "data-slate-editor": false, className: clsx('qdr-table__cell__resize-handle', {
-                'qdr-table__cell__resize-handle--active': isResizing,
-            }), onMouseDown: handleResizeStart }),
-        focused && (React.createElement(components.Portal, { getContainer: () => portalContainerRef.current || document.body },
-            React.createElement(toolbar.InlineToolbar, { className: 'qdr-table__cell__focus-toolbar', style: {
-                    top: toolbarPosition === null || toolbarPosition === void 0 ? void 0 : toolbarPosition.top,
-                    left: toolbarPosition === null || toolbarPosition === void 0 ? void 0 : toolbarPosition.left,
-                }, iconGroups: focusToolbarIconGroups }))),
-        showRowActionButton && (React.createElement(components.Portal, { getContainer: () => portalContainerRef.current || document.body },
-            React.createElement(RowDragButton, { rowIndex: cellPosition.rowIndex, headerRowCount: headerRowCount, style: {
-                    top: rowButtonPosition === null || rowButtonPosition === void 0 ? void 0 : rowButtonPosition.top,
-                    left: rowButtonPosition === null || rowButtonPosition === void 0 ? void 0 : rowButtonPosition.left,
-                }, onClick: (e) => {
-                    e.preventDefault();
-                    e.stopPropagation();
-                    core.Transforms.deselect(editor);
-                    setTableSelectedOn((prev) => {
-                        if ((prev === null || prev === void 0 ? void 0 : prev.region) === 'row' && prev.index === cellPosition.rowIndex) {
-                            return undefined;
-                        }
-                        return { region: 'row', index: cellPosition.rowIndex };
-                    });
-                } }))),
-        showColumnActionButton && (React.createElement(components.Portal, { getContainer: () => portalContainerRef.current || document.body },
-            React.createElement(ColumnDragButton, { columnIndex: cellPosition.columnIndex, style: {
-                    // pinned 時因為 sticky 所以要扣掉 scrollTop
-                    top: ((_b = columnButtonPosition === null || columnButtonPosition === void 0 ? void 0 : columnButtonPosition.top) !== null && _b !== void 0 ? _b : 0) - (element.pinned ? scrollTop : 0),
-                    left: columnButtonPosition === null || columnButtonPosition === void 0 ? void 0 : columnButtonPosition.left,
-                }, onClick: (e) => {
-                    e.preventDefault();
-                    e.stopPropagation();
-                    core.Transforms.deselect(editor);
-                    setTableSelectedOn((prev) => {
-                        if ((prev === null || prev === void 0 ? void 0 : prev.region) === 'column' && prev.index === cellPosition.columnIndex) {
-                            return undefined;
-                        }
-                        return { region: 'column', index: cellPosition.columnIndex };
-                    });
-                }, checkIsTitleColumn: checkIsTitleColumn }))),
-        isSelectionTriggerByMe && (cellPosition.columnIndex === 0 || cellPosition.rowIndex === 0) ? (React.createElement(components.Portal, { getContainer: () => portalContainerRef.current || document.body },
-            React.createElement(toolbar.InlineToolbar, { className: "qdr-table__cell__inline-table-toolbar", style: {
-                    top: toolbarPosition === null || toolbarPosition === void 0 ? void 0 : toolbarPosition.top,
-                    left: toolbarPosition === null || toolbarPosition === void 0 ? void 0 : toolbarPosition.left,
-                }, iconGroups: inlineToolbarIconGroups, onClickAway: () => {
-                    setTableSelectedOn(undefined);
-                } }))) : null));
-}
-
-function TableBody(props) {
-    const { attributes, children } = props;
-    return (React.createElement("tbody", Object.assign({}, attributes, { className: "qdr-table__body" }), children));
-}
-
-const defaultRenderTableElements = {
-    table: (props) => React.createElement(Table, Object.assign({ key: Math.random() }, props)),
-    table_title: (props) => React.createElement(TableTitle, Object.assign({}, props)),
-    table_main: (props) => React.createElement(TableMain, Object.assign({}, props)),
-    table_header: (props) => React.createElement(TableHeader, Object.assign({}, props)),
-    table_body: (props) => React.createElement(TableBody, Object.assign({}, props)),
-    table_row: (props) => React.createElement(TableRow, Object.assign({}, props)),
-    table_cell: (props) => React.createElement(TableCell, Object.assign({}, props)),
-};
-
-function createReactTable(options = {}) {
-    const core$1 = table.createTable(options);
-    const { types } = core$1;
-    return Object.assign(Object.assign({}, core$1), { createHandlers: () => ({
-            onKeyDown(event, editor, next) {
-                if (event.nativeEvent.isComposing) {
-                    return;
-                }
-                if (core$1.isSelectionInTableCell(editor)) {
-                    const checkCurrentCellHasContent = () => {
-                        if (!editor.selection)
-                            return false;
-                        const [cellNode] = core.Editor.node(editor, editor.selection);
-                        if (core.Text.isText(cellNode)) {
-                            return cellNode.text.trim() !== '';
-                        }
-                        if (!core.Element.isElement(cellNode))
-                            return false;
-                        const hasContent = cellNode.children.some((child) => {
-                            if (core.Text.isText(child)) {
-                                return child.text.trim() !== '';
-                            }
-                            return core.Element.isElement(child);
-                        });
-                        return hasContent;
-                    };
-                    if (event.key === 'Enter') {
-                        if (core$1.isSelectionInTableList(editor)) {
-                            return next();
-                        }
-                        event.preventDefault();
-                        const currentCellHasContent = checkCurrentCellHasContent();
-                        if (currentCellHasContent) {
-                            // Insert soft break
-                            core.Editor.insertText(editor, '\n');
-                        }
-                        else {
-                            // Move to next cell
-                            core$1.moveToNextCell(editor, types);
-                        }
-                        return;
-                    }
-                    if (event.key === 'Tab') {
-                        event.preventDefault();
-                        // shift+tab
-                        if (event.shiftKey)
-                            return;
-                        core$1.moveToNextCell(editor, types);
-                        return;
-                    }
-                    // 處理方向鍵上下移動
-                    if (event.key === 'ArrowUp') {
-                        event.preventDefault();
-                        if (event.shiftKey) {
-                            // Shift + 上：擴展選取範圍
-                            core$1.extendSelectionUp(editor, types);
-                        }
-                        else {
-                            // 只按上：移動到上一行
-                            core$1.moveToRowAbove(editor, types);
-                        }
-                        return;
-                    }
-                    if (event.key === 'ArrowDown') {
-                        event.preventDefault();
-                        if (event.shiftKey) {
-                            // Shift + 下：擴展選取範圍
-                            core$1.extendSelectionDown(editor, types);
-                        }
-                        else {
-                            // 只按下：移動到下一行
-                            core$1.moveToRowBelow(editor, types);
-                        }
-                        return;
-                    }
-                    if (event.key === 'ArrowLeft') {
-                        // Shift + 左：擴展選取範圍
-                        if (event.shiftKey) {
-                            event.preventDefault();
-                            core$1.extendSelectionLeft(editor, types);
-                            return;
-                        }
-                    }
-                    if (event.key === 'ArrowRight') {
-                        // Shift + 右：擴展選取範圍
-                        if (event.shiftKey) {
-                            event.preventDefault();
-                            core$1.extendSelectionRight(editor, types);
-                            return;
-                        }
-                    }
-                }
-                next();
-            },
-        }), createRenderElement: (options = {}) => {
-            const renderTable = options.table || defaultRenderTableElements.table;
-            const renderTableTitle = options.table_title || defaultRenderTableElements.table_title;
-            const renderTableMain = options.table_main || defaultRenderTableElements.table_main;
-            const renderTableHeader = options.table_header || defaultRenderTableElements.table_header;
-            const renderTableBody = options.table_body || defaultRenderTableElements.table_body;
-            const renderTableRow = options.table_row || defaultRenderTableElements.table_row;
-            const renderTableCell = options.table_cell || defaultRenderTableElements.table_cell;
-            return react.createRenderElements([
-                {
-                    type: types.table,
-                    render: (props) => {
-                        const { attributes, children, element } = props;
-                        return renderTable({
-                            attributes,
-                            element,
-                            children,
-                        });
-                    },
-                },
-                {
-                    type: types.table_title,
-                    render: (props) => {
-                        const { attributes, children, element } = props;
-                        return renderTableTitle({
-                            attributes,
-                            element,
-                            children,
-                        });
-                    },
-                },
-                {
-                    type: types.table_main,
-                    render: (props) => {
-                        const { attributes, children, element } = props;
-                        return renderTableMain({
-                            attributes,
-                            element,
-                            children,
-                        });
-                    },
-                },
-                {
-                    type: types.table_header,
-                    render: (props) => {
-                        const { attributes, children, element } = props;
-                        return renderTableHeader({
-                            attributes,
-                            element,
-                            children,
-                        });
-                    },
-                },
-                {
-                    type: types.table_body,
-                    render: (props) => {
-                        const { attributes, children, element } = props;
-                        return renderTableBody({
-                            attributes,
-                            element,
-                            children,
-                        });
-                    },
-                },
-                {
-                    type: types.table_row,
-                    render: (props) => {
-                        const { attributes, children, element } = props;
-                        return renderTableRow({
-                            attributes,
-                            element,
-                            children,
-                        });
-                    },
-                },
-                {
-                    type: types.table_cell,
-                    render: (props) => {
-                        const { attributes, children, element } = props;
-                        return renderTableCell({
-                            attributes,
-                            element,
-                            children,
-                        });
-                    },
-                },
-            ]);
-        }, with(editor) {
-            const { insertData } = editor;
-            /** 從他處複製文字貼過來時觸發 */
-            editor.insertData = (data) => {
-                const { selection } = editor;
-                if (!selection) {
-                    insertData(data);
-                    return;
-                }
-                // 先檢查選取的起點是否在 table cell 中
-                const cellEntry = core.Editor.above(editor, {
-                    at: selection.anchor,
-                    match: (n) => core.Element.isElement(n) && n.type === types.table_cell,
-                });
-                if (cellEntry) {
-                    // 確認在 table 內，將選取範圍縮減到起點
-                    core.Transforms.collapse(editor, { edge: 'start' });
-                    // 重新取得 cell entry（使用當前游標位置）
-                    const targetCellEntry = core.Editor.above(editor, {
-                        match: (n) => core.Element.isElement(n) && n.type === types.table_cell,
-                    });
-                    if (!targetCellEntry) {
-                        insertData(data);
-                        return;
-                    }
-                    const [, cellPath] = targetCellEntry;
-                    // 從剪貼簿取得純文字
-                    const text = data.getData('text/plain');
-                    if (text) {
-                        // 檢測是否為表格格式（包含 Tab 或換行）
-                        const hasTableFormat = text.includes('\t') || text.includes('\n');
-                        if (hasTableFormat) {
-                            // 解析表格格式：行由 \n 分隔，欄位由 \t 分隔
-                            const rows = text.split('\n').filter((row) => row.length > 0);
-                            if (rows.length === 0) {
-                                return;
-                            }
-                            // 找到當前 cell 所在的 row 和 column index
-                            const rowEntry = core.Editor.above(editor, {
-                                at: cellPath,
-                                match: (n) => core.Element.isElement(n) && n.type === types.table_row,
-                            });
-                            if (!rowEntry) {
-                                // 如果找不到 row，降級為純文字插入
-                                core.Transforms.insertText(editor, text.replace(/\t/g, ' '));
-                                return;
-                            }
-                            const [, rowPath] = rowEntry;
-                            const currentColumnIndex = cellPath[cellPath.length - 1];
-                            // 找到 table body 或 header
-                            const containerEntry = core.Editor.above(editor, {
-                                at: rowPath,
-                                match: (n) => core.Element.isElement(n) &&
-                                    (n.type === types.table_body || n.type === types.table_header),
-                            });
-                            if (!containerEntry) {
-                                // 降級為純文字插入
-                                core.Transforms.insertText(editor, text.replace(/\t/g, ' '));
-                                return;
-                            }
-                            const [container, containerPath] = containerEntry;
-                            const currentRowIndex = rowPath[rowPath.length - 1];
-                            // 使用 Editor.withoutNormalizing 批次處理
-                            core.Editor.withoutNormalizing(editor, () => {
-                                rows.forEach((rowText, rowOffset) => {
-                                    const columns = rowText.split('\t');
-                                    const targetRowIndex = currentRowIndex + rowOffset;
-                                    // 檢查目標 row 是否存在
-                                    if (targetRowIndex >= container.children.length) {
-                                        return; // 超出範圍，跳過此行
-                                    }
-                                    const targetRow = container.children[targetRowIndex];
-                                    if (!core.Element.isElement(targetRow) || targetRow.type !== types.table_row) {
-                                        return;
-                                    }
-                                    // 貼上到各個 cell
-                                    columns.forEach((columnText, columnOffset) => {
-                                        const targetColumnIndex = currentColumnIndex + columnOffset;
-                                        // 檢查目標 cell 是否存在
-                                        if (targetColumnIndex >= targetRow.children.length) {
-                                            return; // 超出範圍，跳過此欄
-                                        }
-                                        const targetCellPath = [...containerPath, targetRowIndex, targetColumnIndex];
-                                        // 清空目標 cell 的內容
-                                        const targetCell = targetRow.children[targetColumnIndex];
-                                        if (core.Element.isElement(targetCell) && targetCell.type === types.table_cell) {
-                                            // 移除所有子節點
-                                            for (let i = targetCell.children.length - 1; i >= 0; i--) {
-                                                core.Transforms.removeNodes(editor, { at: [...targetCellPath, i] });
-                                            }
-                                            // 插入新內容
-                                            core.Transforms.insertNodes(editor, {
-                                                type: core.PARAGRAPH_TYPE,
-                                                children: [{ text: columnText }],
-                                            }, { at: [...targetCellPath, 0] });
-                                        }
-                                    });
-                                });
-                            });
-                            return;
-                        }
-                    }
-                }
-                // 預設行為
-                insertData(data);
-            };
-            return core$1.with(editor);
-        } });
-}
-
-exports.TableActionsContext = TableActionsContext;
-exports.TableMetadataContext = TableMetadataContext;
-exports.TableStateContext = TableStateContext;
-exports.createReactTable = createReactTable;
-exports.defaultRenderTableElements = defaultRenderTableElements;
-exports.useTableActionsContext = useTableActionsContext;
-exports.useTableCellToolbarActions = useTableCellToolbarActions;
-exports.useTableMetadata = useTableMetadata;
-exports.useTableStateContext = useTableStateContext;