@worktile/theia 16.2.1 → 16.2.3

package/fesm2022/worktile-theia.mjs

@@ -3376,49 +3376,185 @@ var TableSelectCellDirection;
     TableSelectCellDirection[TableSelectCellDirection["left"] = 3] = "left";
 })(TableSelectCellDirection || (TableSelectCellDirection = {}));
 
-/**
- * Create a new cell
- */
-function createCell(opts, nodes) {
-    return {
-        type: opts.typeCell,
-        children: nodes || [createEmptyContent(opts)]
-    };
+function calcSpanForRow(table, targetIndex) {
+    const rowspans = [];
+    table.children
+        .filter((row, rowIndex) => rowIndex < targetIndex)
+        .forEach((row, rowIndex) => {
+        row.children.forEach((cell, columnIndex) => {
+            if (cell.rowspan && cell.rowspan > 1) {
+                const rect = {
+                    x: rowIndex,
+                    y: columnIndex,
+                    width: cell.colspan || 1,
+                    height: cell.rowspan || 1
+                };
+                rowspans.push(rect);
+            }
+        });
+    });
+    return table.children[0].children.map((cell, columnIndex) => {
+        return rowspans.some(rowspan => isInside(rowspan, targetIndex, columnIndex));
+    });
 }
-/**
- * Create a new default content block
- */
-function createEmptyContent(opts) {
-    return {
-        type: opts.typeContent,
-        children: [{ text: '' }]
-    };
+function calcSpanForColumn(table, targetIndex) {
+    const rowspans = [];
+    table.children.forEach((row, rowIndex) => {
+        row.children
+            .filter((cell, columnIndex) => columnIndex < targetIndex)
+            .forEach((cell, columnIndex) => {
+            if (cell.colspan && cell.colspan > 1) {
+                const rect = {
+                    x: rowIndex,
+                    y: columnIndex,
+                    width: cell.colspan || 1,
+                    height: cell.rowspan || 1
+                };
+                rowspans.push(rect);
+            }
+        });
+    });
+    return table.children.map((cell, rowIndx) => {
+        return rowspans.some(rowspan => isInside(rowspan, rowIndx, targetIndex));
+    });
+}
+function getOriginCell(table, targetRowIndex, targetColumnIndex) {
+    for (let rowIndex = 0; rowIndex <= targetRowIndex; rowIndex++) {
+        const row = table.children[rowIndex];
+        const originCell = row.children
+            .filter((cell, columnIndex) => columnIndex <= targetColumnIndex)
+            .find((cell, columnIndex) => {
+            if (cell.rowspan > 1 || cell.colspan > 1) {
+                const rect = {
+                    x: rowIndex,
+                    y: columnIndex,
+                    width: cell.colspan || 1,
+                    height: cell.rowspan || 1
+                };
+                return isInside(rect, targetRowIndex, targetColumnIndex);
+            }
+        });
+        if (originCell) {
+            return originCell;
+        }
+    }
+}
+function isInside(cellRect, rowIndex, columnIndex) {
+    if (rowIndex >= cellRect.x &&
+        rowIndex <= cellRect.x + cellRect.height - 1 &&
+        columnIndex >= cellRect.y &&
+        columnIndex <= cellRect.y + cellRect.width - 1) {
+        return true;
+    }
+    return false;
 }
 
 /**
- * Create a new row block
+ * 计算最小行跨距单元格
+ * @param element TableElement
+ * @returns
  */
-function createRow(opts, columns, getCellContent) {
-    const cellNodes = new Array(columns).fill(1).map(i => createCell(opts, getCellContent ? getCellContent(i) : undefined));
-    return {
-        type: opts.typeRow,
-        children: cellNodes
-    };
-}
-
+const calculateMinRowSpanCellForRows = (element) => {
+    const cells = element.children.map((row, index) => {
+        const noHiddenCells = row.children.filter(cell => !cell.hidden);
+        if (noHiddenCells.length > 0) {
+            const minRowspan = Math.min.apply(Math, noHiddenCells.map(cell => {
+                return cell.rowspan || 1;
+            }));
+            const cell = row.children.find(item => !item.hidden && (item.rowspan || 1) === minRowspan);
+            return {
+                cell,
+                rowIndex: index
+            };
+        }
+        else {
+            return {
+                rowIndex: index
+            };
+        }
+    });
+    return cells;
+};
 /**
- * Create a table
+ * 计算行控件的平均高度
+ * @param previousCombineRowIndex
+ * @param previousRowIndex
+ * @param rowControls
  */
-function createTable(opts, columns, rows, getCellContent) {
-    const rowNodes = new Array(rows).fill(1).map(i => createRow(opts, columns, getCellContent ? getCellContent.bind(null, i) : undefined));
-    return {
-        type: opts.typeTable,
-        children: rowNodes,
-        options: {
-            headerRow: true
+const calculateRowControlsAvgHeight = (previousCombineRowIndex, previousRowIndex, rowControls) => {
+    const rowControl = rowControls[previousRowIndex];
+    const count = previousCombineRowIndex - previousRowIndex;
+    const avgHeight = Math.floor(rowControl.height / (count + 1));
+    const firstHeight = rowControl.height - avgHeight * count;
+    rowControl.height = firstHeight;
+    rowControls
+        .filter((_, index) => index > previousRowIndex && index <= previousCombineRowIndex)
+        .forEach(rowControl => {
+        rowControl.height = avgHeight;
+    });
+};
+const getBelowRowHeight = (editor, cells, index, rowIndex, rowspan) => {
+    let belowRowlHeight = 0;
+    cells.slice(index + 1, cells.length).map(item => {
+        if (!item.cell) {
+            return;
         }
-    };
-}
+        if (rowIndex + rowspan > item.rowIndex) {
+            const cellDom = AngularEditor.toDOMNode(editor, item.cell);
+            if (item.cell.rowspan > 1) {
+                // 如果下方单元格的rowspan > 1，递归计算
+                const height = getBelowRowHeight(editor, cells, cells.findIndex(cell => cell.rowIndex === item.rowIndex), item.rowIndex, item.cell.rowspan);
+                belowRowlHeight += getElementHeight(cellDom) - height;
+            }
+            else {
+                belowRowlHeight += getElementHeight(cellDom);
+            }
+        }
+    });
+    return belowRowlHeight;
+};
+const calculateRowControls = (editor, element) => {
+    const minRowSpanCellForRows = calculateMinRowSpanCellForRows(element);
+    const rowControls = [];
+    let previousRowIndex = 0;
+    let previousCombineRowIndex = 0;
+    minRowSpanCellForRows.forEach((cellInfo, index) => {
+        if (!cellInfo.cell) {
+            rowControls.push({
+                height: 0,
+                rowIndex: index
+            });
+            previousCombineRowIndex = index;
+            if (index === minRowSpanCellForRows.length - 1) {
+                calculateRowControlsAvgHeight(previousCombineRowIndex, previousRowIndex, rowControls);
+            }
+            return;
+        }
+        // calculate combine row height
+        if (previousCombineRowIndex > previousRowIndex) {
+            calculateRowControlsAvgHeight(previousCombineRowIndex, previousRowIndex, rowControls);
+            previousCombineRowIndex = 0;
+        }
+        const cellDom = AngularEditor.toDOMNode(editor, cellInfo.cell);
+        let height = getElementHeight(cellDom);
+        // 当cell为合并的单元格(rowspan > 1)，计算其实际高度（当前单元格的高度 - 下方合并单元格的高度）
+        if (cellInfo.cell.rowspan > 1) {
+            const calcHeight = height - getBelowRowHeight(editor, minRowSpanCellForRows, index, cellInfo.rowIndex, cellInfo.cell.rowspan);
+            rowControls.push({
+                height: calcHeight,
+                rowIndex: cellInfo.rowIndex
+            });
+        }
+        else {
+            rowControls.push({
+                height,
+                rowIndex: cellInfo.rowIndex
+            });
+        }
+        previousRowIndex = index;
+    });
+    return rowControls;
+};
 
 class TablePosition {
     constructor(options = {
@@ -3661,160 +3797,113 @@ class TablePosition {
 }
 
 const createTablePosition = (editor, path) => {
-    path = path || editor.selection.anchor?.path;
+    path = path || editor.selection?.anchor?.path;
     if (!path) {
         throw new Error('Path invalid');
     }
     return TablePosition.create(new TableOptions(), editor, path);
 };
 
+/* cell-position 有关的函数 */
 /**
- * True if the given range is inside one table
+ * 判断是否选中了所有的单元格
+ * @param editor 编辑器对象
+ * @param selectedCellPositions 选中的单元格位置数组
+ * @returns 是否选中了所有的单元格
  */
-function isRangeInTable(opts, editor, range) {
-    const { focus } = range;
-    const startPosition = createTablePosition(editor);
-    const endPosition = createTablePosition(editor, focus.path);
-    // Only handle events in tables
-    if (!startPosition.isInTable() || !endPosition.isInTable()) {
+const isSelectedAllCell = (editor, selectedCellPositions) => {
+    if (!AngularEditor.isFocused(editor)) {
         return false;
     }
-    // Inside the same table
-    return startPosition.table === endPosition.table;
-}
-
+    const pos = createTablePosition(editor);
+    return !!selectedCellPositions.length && pos.getHeight() * pos.getWidth() === selectedCellPositions.length;
+};
 /**
- * Is the selection in a table
+ * 获取选中的单元格位置数组
+ * @param editor 编辑器对象
+ * @param selectedCells 选中的单元格
+ * @returns 选中的单元格位置
  */
-function isSelectionInTable(opts, editor) {
-    if (!editor.selection) {
-        return false;
-    }
-    return isRangeInTable(opts, editor, editor.selection);
-}
+const getSelectedCellPositions = (editor, selectedCells) => {
+    return selectedCells?.map((cell) => {
+        const path = AngularEditor.findPath(editor, cell);
+        const [row, col] = path.slice(-2);
+        return { row, col };
+    });
+};
 /**
- * 传入的单元格能否组成一个矩形
- * @param editor
- * @param cells
- * @returns boolean
+ * 获取一定范围内所有的单元格位置
+ * @param startRow 起始行
+ * @param startCol 起始列
+ * @param endRow 结束行
+ * @param endCol 结束列
+ * @returns 单元格位置
  */
-function isRectangularInTableCells(editor, cells) {
-    let selectCellSize = cells.length;
-    if (selectCellSize === 0) {
-        return false;
-    }
-    const { row, col } = cells[0];
-    let maxCol = col;
-    let minCol = col;
-    let maxRow = row;
-    let minRow = row;
-    const pos = createTablePosition(editor);
-    for (let { row, col } of cells) {
-        const { hidden, rowspan, colspan } = pos.findCellByPath({ row, col });
-        if (hidden) {
-            selectCellSize--;
-            continue;
-        }
-        if (rowspan || colspan) {
-            const colSpan = colspan ?? 1;
-            const rowSpan = rowspan ?? 1;
-            // 更新视觉选中的个数
-            selectCellSize = selectCellSize + (rowSpan * colSpan - 1);
-            // 纠正合并单元格下的 row 和 col 的真实值
-            row = row + rowSpan - 1;
-            col = col + colSpan - 1;
+const getCellPositionsFromRange = (startRow, startCol, endRow, endCol) => {
+    const positions = [];
+    for (let row = startRow; row < endRow; row++) {
+        for (let col = startCol; col < endCol; col++) {
+            positions.push({ row, col });
         }
-        maxCol = col > maxCol ? col : maxCol;
-        minCol = col < minCol ? col : minCol;
-        maxRow = row > maxRow ? row : maxRow;
-        minRow = row < minRow ? row : minRow;
     }
-    return (maxRow + 1 - minRow) * (maxCol + 1 - minCol) === selectCellSize;
-}
+    return positions;
+};
+/**
+ * 过滤重复的单元格位置
+ * @param cells 单元格数组
+ * @param selectedCellPositions 选中的单元格位置数组
+ * @returns 过滤后的单元格位置数组
+ */
+const uniqueCellPosition = (cells, selectedCellPositions) => {
+    const positions = [];
+    const modCells = new Set();
+    cells.concat(selectedCellPositions).forEach(cell => modCells.add(JSON.stringify(cell)));
+    modCells.forEach((cell) => positions.push(JSON.parse(cell)));
+    return positions;
+};
 
-function calcSpanForRow(table, targetIndex) {
-    const rowspans = [];
-    table.children
-        .filter((row, rowIndex) => rowIndex < targetIndex)
-        .forEach((row, rowIndex) => {
-        row.children.forEach((cell, columnIndex) => {
-            if (cell.rowspan && cell.rowspan > 1) {
-                const rect = {
-                    x: rowIndex,
-                    y: columnIndex,
-                    width: cell.colspan || 1,
-                    height: cell.rowspan || 1
-                };
-                rowspans.push(rect);
-            }
-        });
-    });
-    return table.children[0].children.map((cell, columnIndex) => {
-        return rowspans.some(rowspan => isInside(rowspan, targetIndex, columnIndex));
-    });
-}
-function calcSpanForColumn(table, targetIndex) {
-    const rowspans = [];
-    table.children.forEach((row, rowIndex) => {
-        row.children
-            .filter((cell, columnIndex) => columnIndex < targetIndex)
-            .forEach((cell, columnIndex) => {
-            if (cell.colspan && cell.colspan > 1) {
-                const rect = {
-                    x: rowIndex,
-                    y: columnIndex,
-                    width: cell.colspan || 1,
-                    height: cell.rowspan || 1
-                };
-                rowspans.push(rect);
-            }
-        });
-    });
-    return table.children.map((cell, rowIndx) => {
-        return rowspans.some(rowspan => isInside(rowspan, rowIndx, targetIndex));
-    });
+/**
+ * Create a new cell
+ */
+function createCell(opts, nodes) {
+    return {
+        type: opts.typeCell,
+        children: nodes || [createEmptyContent(opts)]
+    };
 }
-function getOriginCell(table, targetRowIndex, targetColumnIndex) {
-    for (let rowIndex = 0; rowIndex <= targetRowIndex; rowIndex++) {
-        const row = table.children[rowIndex];
-        const originCell = row.children
-            .filter((cell, columnIndex) => columnIndex <= targetColumnIndex)
-            .find((cell, columnIndex) => {
-            if (cell.rowspan > 1 || cell.colspan > 1) {
-                const rect = {
-                    x: rowIndex,
-                    y: columnIndex,
-                    width: cell.colspan || 1,
-                    height: cell.rowspan || 1
-                };
-                return isInside(rect, targetRowIndex, targetColumnIndex);
-            }
-        });
-        if (originCell) {
-            return originCell;
-        }
-    }
+/**
+ * Create a new default content block
+ */
+function createEmptyContent(opts) {
+    return {
+        type: opts.typeContent,
+        children: [{ text: '' }]
+    };
 }
-function isInside(cellRect, rowIndex, columnIndex) {
-    if (rowIndex >= cellRect.x &&
-        rowIndex <= cellRect.x + cellRect.height - 1 &&
-        columnIndex >= cellRect.y &&
-        columnIndex <= cellRect.y + cellRect.width - 1) {
-        return true;
-    }
-    return false;
+
+/**
+ * Create a new row block
+ */
+function createRow(opts, columns, getCellContent) {
+    const cellNodes = new Array(columns).fill(1).map(i => createCell(opts, getCellContent ? getCellContent(i) : undefined));
+    return {
+        type: opts.typeRow,
+        children: cellNodes
+    };
 }
 
-function isVirtualKey(e) {
-    const isMod = e.ctrlKey || e.metaKey;
-    const isAlt = isKeyHotkey('alt', e);
-    const isShift = isKeyHotkey('shift', e);
-    const isCapsLock = e.key.includes('CapsLock');
-    const isTab = e.key.includes('Tab');
-    const isEsc = e.key.includes('Escape');
-    const isF = e.key.startsWith('F');
-    const isArrow = e.key.includes('Arrow') ? true : false;
-    return isCapsLock || isMod || isAlt || isArrow || isShift || isTab || isEsc || isF;
+/**
+ * Create a table
+ */
+function createTable(opts, columns, rows, getCellContent) {
+    const rowNodes = new Array(rows).fill(1).map(i => createRow(opts, columns, getCellContent ? getCellContent.bind(null, i) : undefined));
+    return {
+        type: opts.typeTable,
+        children: rowNodes,
+        options: {
+            headerRow: true
+        }
+    };
 }
 
 /**
@@ -3853,267 +3942,129 @@ const getColumnsWidth = (cellRow, isColgroup = false) => {
     Array.from(cellRow.childNodes)
         .filter((n) => n.nodeType === 1)
         .forEach((item) => {
-        if (isColgroup && IS_SAFARI) {
-            result.push(item.offsetWidth);
-            return;
-        }
-        if (item.getBoundingClientRect) {
-            result.push(item.getBoundingClientRect().width);
-        }
-    });
-    return result;
-};
-/**
- * 计算表格列宽
- * @param isReadonly
- * @param element
- * @param tableWidth
- * @param mode
- * @returns number[]
- */
-const calcColumnGroups = (isReadonly, element, tableWidth, mode) => {
-    const columns = element?.columns;
-    if (isReadonly) {
-        if (columns) {
-            const opts = new TableOptions();
-            const isPrint = mode === TheMode.print;
-            const newColumns = isPrint
-                ? calcPrintColumnWidth(element, opts.minWidthPx)
-                : calcColumnWidth(element, tableWidth, opts.minWidthPx);
-            return newColumns;
-        }
-        return [];
-    }
-    else {
-        return columns;
-    }
-};
-/**
- * 计算表格列宽
- * @param element
- * @param tableWidth
- * @param minWidthPx
- * @returns number[]
- */
-const calcColumnWidth = (element, tableWidth, minWidthPx) => {
-    const columns = element?.columns;
-    const numberedColumnWidth = element?.options?.numberedColumn ? TABLE_NUMBER_COLUMN : 0;
-    const columnsWidth = columns.reduce((a, b) => a + b.width, 0);
-    // 总列宽大于当前表格宽度时，按照设置时的总列宽计算
-    const columnTotalWidth = Math.max(columnsWidth, tableWidth - numberedColumnWidth);
-    return columns.map(column => {
-        const cellWidth = (column.width / columnsWidth) * columnTotalWidth;
-        return { width: Math.max(cellWidth, minWidthPx) };
-    });
-};
-/**
- * 打印模式下，按照原宽度比例基于当前表格宽度计算列宽
- * 1. 所有列的最小列宽总和大于表格宽度时，所有列返回最小宽度
- * @param element
- * @param minWidthPx
- * @returns number[]
- */
-const calcPrintColumnWidth = (element, minWidthPx) => {
-    const columns = element?.columns;
-    const numberedColumnWidth = element?.options?.numberedColumn ? TABLE_NUMBER_COLUMN : 0;
-    // 按照 DPI 96 的 A4 纸宽度是 794, 打印时左右 80px 的边距，所以这里取 794 - 80 * 2 = 634
-    // 如果存在序号列，还需要在 634 基础上减去序号列的宽度，剩下的才是内容区域的宽度
-    let columnTotalWidth = 634 - numberedColumnWidth;
-    const columnsWidth = columns.reduce((a, b) => a + b.width, 0);
-    // 计算所有列的 minWidth 总和
-    const totalMinWidth = minWidthPx * columns.length;
-    if (totalMinWidth > columnTotalWidth) {
-        // 如果所有列的 minWidth 总和大于 columnTotalWidth，所有列返回最小宽度
-        return columns.map(() => ({ width: minWidthPx }));
-    }
-    // 在剩余的宽度中按比例分配
-    const remainingWidth = columnTotalWidth - totalMinWidth;
-    const remainingWidthRatio = columns.map(column => column.width / columnsWidth);
-    // 为什么减 1， 因为这个宽度是内容区域宽度，但 td 右侧还有一个边框，所以减去 1
-    let newColumnsWidth = remainingWidthRatio.map(ratio => minWidthPx + Math.floor(ratio * remainingWidth) - 1);
-    return columns.map((_, index) => ({
-        width: newColumnsWidth[index]
-    }));
-};
-
-/* cell-position 有关的函数 */
-/**
- * 判断是否选中了所有的单元格
- * @param editor 编辑器对象
- * @param selectedCellPositions 选中的单元格位置数组
- * @returns 是否选中了所有的单元格
- */
-const isSelectedAllCell = (editor, selectedCellPositions) => {
-    if (!AngularEditor.isFocused(editor)) {
-        return false;
-    }
-    const pos = createTablePosition(editor);
-    return !!selectedCellPositions.length && pos.getHeight() * pos.getWidth() === selectedCellPositions.length;
-};
-/**
- * 获取选中的单元格位置数组
- * @param editor 编辑器对象
- * @param selectedCells 选中的单元格
- * @returns 选中的单元格位置
- */
-const getSelectedCellPositions = (editor, selectedCells) => {
-    return selectedCells?.map((cell) => {
-        const path = AngularEditor.findPath(editor, cell);
-        const [row, col] = path.slice(-2);
-        return { row, col };
-    });
-};
-/**
- * 获取一定范围内所有的单元格位置
- * @param startRow 起始行
- * @param startCol 起始列
- * @param endRow 结束行
- * @param endCol 结束列
- * @returns 单元格位置
- */
-const getCellPositionsFromRange = (startRow, startCol, endRow, endCol) => {
-    const positions = [];
-    for (let row = startRow; row < endRow; row++) {
-        for (let col = startCol; col < endCol; col++) {
-            positions.push({ row, col });
-        }
-    }
-    return positions;
-};
-/**
- * 过滤重复的单元格位置
- * @param cells 单元格数组
- * @param selectedCellPositions 选中的单元格位置数组
- * @returns 过滤后的单元格位置数组
- */
-const uniqueCellPosition = (cells, selectedCellPositions) => {
-    const positions = [];
-    const modCells = new Set();
-    cells.concat(selectedCellPositions).forEach(cell => modCells.add(JSON.stringify(cell)));
-    modCells.forEach((cell) => positions.push(JSON.parse(cell)));
-    return positions;
-};
-
-/**
- * 计算最小行跨距单元格
- * @param element TableElement
- * @returns
- */
-const calculateMinRowSpanCellForRows = (element) => {
-    const cells = element.children.map((row, index) => {
-        const noHiddenCells = row.children.filter(cell => !cell.hidden);
-        if (noHiddenCells.length > 0) {
-            const minRowspan = Math.min.apply(Math, noHiddenCells.map(cell => {
-                return cell.rowspan || 1;
-            }));
-            const cell = row.children.find(item => !item.hidden && (item.rowspan || 1) === minRowspan);
-            return {
-                cell,
-                rowIndex: index
-            };
-        }
-        else {
-            return {
-                rowIndex: index
-            };
-        }
-    });
-    return cells;
-};
-/**
- * 计算行控件的平均高度
- * @param previousCombineRowIndex
- * @param previousRowIndex
- * @param rowControls
- */
-const calculateRowControlsAvgHeight = (previousCombineRowIndex, previousRowIndex, rowControls) => {
-    const rowControl = rowControls[previousRowIndex];
-    const count = previousCombineRowIndex - previousRowIndex;
-    const avgHeight = Math.floor(rowControl.height / (count + 1));
-    const firstHeight = rowControl.height - avgHeight * count;
-    rowControl.height = firstHeight;
-    rowControls
-        .filter((_, index) => index > previousRowIndex && index <= previousCombineRowIndex)
-        .forEach(rowControl => {
-        rowControl.height = avgHeight;
-    });
-};
-const getBelowRowHeight = (editor, cells, index, rowIndex, rowspan) => {
-    let belowRowlHeight = 0;
-    cells.slice(index + 1, cells.length).map(item => {
-        if (!item.cell) {
-            return;
-        }
-        if (rowIndex + rowspan > item.rowIndex) {
-            const cellDom = AngularEditor.toDOMNode(editor, item.cell);
-            if (item.cell.rowspan > 1) {
-                // 如果下方单元格的rowspan > 1，递归计算
-                const height = getBelowRowHeight(editor, cells, cells.findIndex(cell => cell.rowIndex === item.rowIndex), item.rowIndex, item.cell.rowspan);
-                belowRowlHeight += getElementHeight(cellDom) - height;
-            }
-            else {
-                belowRowlHeight += getElementHeight(cellDom);
-            }
-        }
-    });
-    return belowRowlHeight;
-};
-const calculateRowControls = (editor, element) => {
-    const minRowSpanCellForRows = calculateMinRowSpanCellForRows(element);
-    const rowControls = [];
-    let previousRowIndex = 0;
-    let previousCombineRowIndex = 0;
-    minRowSpanCellForRows.forEach((cellInfo, index) => {
-        if (!cellInfo.cell) {
-            rowControls.push({
-                height: 0,
-                rowIndex: index
-            });
-            previousCombineRowIndex = index;
-            if (index === minRowSpanCellForRows.length - 1) {
-                calculateRowControlsAvgHeight(previousCombineRowIndex, previousRowIndex, rowControls);
-            }
-            return;
-        }
-        // calculate combine row height
-        if (previousCombineRowIndex > previousRowIndex) {
-            calculateRowControlsAvgHeight(previousCombineRowIndex, previousRowIndex, rowControls);
-            previousCombineRowIndex = 0;
+        if (isColgroup && IS_SAFARI) {
+            result.push(item.offsetWidth);
+            return;
         }
-        const cellDom = AngularEditor.toDOMNode(editor, cellInfo.cell);
-        let height = getElementHeight(cellDom);
-        // 当cell为合并的单元格(rowspan > 1)，计算其实际高度（当前单元格的高度 - 下方合并单元格的高度）
-        if (cellInfo.cell.rowspan > 1) {
-            const calcHeight = height - getBelowRowHeight(editor, minRowSpanCellForRows, index, cellInfo.rowIndex, cellInfo.cell.rowspan);
-            rowControls.push({
-                height: calcHeight,
-                rowIndex: cellInfo.rowIndex
-            });
+        if (item.getBoundingClientRect) {
+            result.push(item.getBoundingClientRect().width);
         }
-        else {
-            rowControls.push({
-                height,
-                rowIndex: cellInfo.rowIndex
-            });
+    });
+    return result;
+};
+/**
+ * 计算表格列宽
+ * @param isReadonly
+ * @param element
+ * @param tableWidth
+ * @param mode
+ * @returns number[]
+ */
+const calcColumnGroups = (isReadonly, element, tableWidth, mode) => {
+    const columns = element?.columns;
+    if (isReadonly) {
+        if (columns) {
+            const opts = new TableOptions();
+            const isPrint = mode === TheMode.print;
+            const newColumns = isPrint
+                ? calcPrintColumnWidth(element, opts.minWidthPx)
+                : calcColumnWidth(element, tableWidth, opts.minWidthPx);
+            return newColumns;
         }
-        previousRowIndex = index;
+        return [];
+    }
+    else {
+        return columns;
+    }
+};
+/**
+ * 计算表格列宽
+ * @param element
+ * @param tableWidth
+ * @param minWidthPx
+ * @returns number[]
+ */
+const calcColumnWidth = (element, tableWidth, minWidthPx) => {
+    const columns = element?.columns;
+    const numberedColumnWidth = element?.options?.numberedColumn ? TABLE_NUMBER_COLUMN : 0;
+    const columnsWidth = columns.reduce((a, b) => a + b.width, 0);
+    // 总列宽大于当前表格宽度时，按照设置时的总列宽计算
+    const columnTotalWidth = Math.max(columnsWidth, tableWidth - numberedColumnWidth);
+    return columns.map(column => {
+        const cellWidth = (column.width / columnsWidth) * columnTotalWidth;
+        return { width: Math.max(cellWidth, minWidthPx) };
     });
-    return rowControls;
 };
-
 /**
- * compatible with old data
- * @returns
+ * 打印模式下，按照原宽度比例基于当前表格宽度计算列宽
+ * 1. 所有列的最小列宽总和大于表格宽度时，所有列返回最小宽度
+ * @param element
+ * @param minWidthPx
+ * @returns number[]
  */
-function isHeaderRow(element) {
-    if (element?.options?.headerRow) {
-        return true;
+const calcPrintColumnWidth = (element, minWidthPx) => {
+    const columns = element?.columns;
+    const numberedColumnWidth = element?.options?.numberedColumn ? TABLE_NUMBER_COLUMN : 0;
+    // 按照 DPI 96 的 A4 纸宽度是 794, 打印时左右 80px 的边距，所以这里取 794 - 80 * 2 = 634
+    // 如果存在序号列，还需要在 634 基础上减去序号列的宽度，剩下的才是内容区域的宽度
+    let columnTotalWidth = 634 - numberedColumnWidth;
+    const columnsWidth = columns.reduce((a, b) => a + b.width, 0);
+    // 计算所有列的 minWidth 总和
+    const totalMinWidth = minWidthPx * columns.length;
+    if (totalMinWidth > columnTotalWidth) {
+        // 如果所有列的 minWidth 总和大于 columnTotalWidth，所有列返回最小宽度
+        return columns.map(() => ({ width: minWidthPx }));
     }
-    // compat old data
-    if (element?.children[0].header) {
-        return true;
+    // 在剩余的宽度中按比例分配
+    const remainingWidth = columnTotalWidth - totalMinWidth;
+    const remainingWidthRatio = columns.map(column => column.width / columnsWidth);
+    // 为什么减 1， 因为这个宽度是内容区域宽度，但 td 右侧还有一个边框，所以减去 1
+    let newColumnsWidth = remainingWidthRatio.map(ratio => minWidthPx + Math.floor(ratio * remainingWidth) - 1);
+    return columns.map((_, index) => ({
+        width: newColumnsWidth[index]
+    }));
+};
+
+const getNextCell = (e, direction, cellPath) => {
+    const [row, col] = cellPath;
+    const pos = createTablePosition(e);
+    let cell;
+    switch (direction) {
+        case TableSelectCellDirection.up:
+            const aboveRow = pos.table.children[pos.getRowIndex() - 1];
+            cell = aboveRow && aboveRow.children[pos.getColumnIndex()];
+            break;
+        case TableSelectCellDirection.down:
+            let belowRowIndex = pos.getRowIndex() + 1;
+            if (pos.cell.rowspan > 1) {
+                belowRowIndex = pos.getRowIndex() + pos.cell.rowspan;
+            }
+            const belowRow = pos.table.children[belowRowIndex];
+            cell = belowRow && belowRow.children[pos.getColumnIndex()];
+            break;
+        case TableSelectCellDirection.right:
+            const afterPoint = Editor.after(e, e.selection);
+            const afterPosition = afterPoint && createTablePosition(e, afterPoint.path);
+            if (afterPosition && afterPosition.cell?.hidden) {
+                cell = afterPosition.findNext();
+            }
+            else {
+                cell = pos.findCellByPath({ row: row, col: col + 1 });
+            }
+            break;
+        case TableSelectCellDirection.left:
+            const beforePoint = Editor.before(e, e.selection);
+            const beforePosition = beforePoint && createTablePosition(e, beforePoint.path);
+            if (beforePosition && beforePosition.cell?.hidden) {
+                cell = beforePosition.findPrevious();
+            }
+            else {
+                cell = pos.findCellByPath({ row: row, col: col - 1 });
+            }
+            break;
     }
-}
+    return cell;
+};
 
 function getSelectCellNode(editor, selectedCells) {
     const pos = createTablePosition(editor);
@@ -4135,6 +4086,96 @@ function focusCell(editor, path) {
     Transforms.select(editor, at);
 }
 
+/**
+ * compatible with old data
+ * @returns
+ */
+function isHeaderRow(element) {
+    if (element?.options?.headerRow) {
+        return true;
+    }
+    // compat old data
+    if (element?.children[0].header) {
+        return true;
+    }
+}
+
+/**
+ * True if the given range is inside one table
+ */
+function isRangeInTable(opts, editor, range) {
+    const { focus } = range;
+    const startPosition = createTablePosition(editor);
+    const endPosition = createTablePosition(editor, focus.path);
+    // Only handle events in tables
+    if (!startPosition.isInTable() || !endPosition.isInTable()) {
+        return false;
+    }
+    // Inside the same table
+    return startPosition.table === endPosition.table;
+}
+
+/**
+ * Is the selection in a table
+ */
+function isSelectionInTable(opts, editor) {
+    if (!editor.selection) {
+        return false;
+    }
+    return isRangeInTable(opts, editor, editor.selection);
+}
+/**
+ * 传入的单元格能否组成一个矩形
+ * @param editor
+ * @param cells
+ * @returns boolean
+ */
+function isRectangularInTableCells(editor, cells) {
+    let selectCellSize = cells.length;
+    if (selectCellSize === 0) {
+        return false;
+    }
+    const { row, col } = cells[0];
+    let maxCol = col;
+    let minCol = col;
+    let maxRow = row;
+    let minRow = row;
+    const pos = createTablePosition(editor);
+    for (let { row, col } of cells) {
+        const { hidden, rowspan, colspan } = pos.findCellByPath({ row, col });
+        if (hidden) {
+            selectCellSize--;
+            continue;
+        }
+        if (rowspan || colspan) {
+            const colSpan = colspan ?? 1;
+            const rowSpan = rowspan ?? 1;
+            // 更新视觉选中的个数
+            selectCellSize = selectCellSize + (rowSpan * colSpan - 1);
+            // 纠正合并单元格下的 row 和 col 的真实值
+            row = row + rowSpan - 1;
+            col = col + colSpan - 1;
+        }
+        maxCol = col > maxCol ? col : maxCol;
+        minCol = col < minCol ? col : minCol;
+        maxRow = row > maxRow ? row : maxRow;
+        minRow = row < minRow ? row : minRow;
+    }
+    return (maxRow + 1 - minRow) * (maxCol + 1 - minCol) === selectCellSize;
+}
+
+function isVirtualKey(e) {
+    const isMod = e.ctrlKey || e.metaKey;
+    const isAlt = isKeyHotkey('alt', e);
+    const isShift = isKeyHotkey('shift', e);
+    const isCapsLock = e.key.includes('CapsLock');
+    const isTab = e.key.includes('Tab');
+    const isEsc = e.key.includes('Escape');
+    const isF = e.key.startsWith('F');
+    const isArrow = e.key.includes('Arrow') ? true : false;
+    return isCapsLock || isMod || isAlt || isArrow || isShift || isTab || isEsc || isF;
+}
+
 const setMarks = (editor, marks, at) => {
     Transforms.setNodes(editor, marks, {
         at,
@@ -6526,6 +6567,11 @@ const TableEditor = {
             setMarks(editor, unsetMarks, cellRange);
         });
     },
+    formatBrush(editor, marks) {
+        return TableEditor.handleSelectedCells(editor, (cellPath, cellRange) => {
+            setMarks(editor, marks, cellRange);
+        });
+    },
     handleSelectedCells(editor, handle) {
         const cells = TableEditor.getSelectedCells(editor);
         if (cells) {
@@ -10908,23 +10954,17 @@ const createTrailingNodePlugin = createPluginFactory({
 });
 
 const PaintFormatEditor = {
-    formatBrush(editor) {
-        const contextService = editor.injector.get(TheContextService);
-        const obj = {};
-        for (const key of MarkProps) {
-            const k = contextService.paintFormatStatus.marks[key];
-            obj[key] = k || null;
-        }
+    formatBrush(editor, marks) {
         const block = anchorBlock(editor);
         if (block && Range.isCollapsed(editor.selection)) {
             // TODO:: 在撤销时有bug, 临时使用withoutSaving处理
             HistoryEditor.withoutSaving(editor, () => {
                 const path = TheEditor.findPath(editor, block);
-                setMarks(editor, obj, path);
+                setMarks(editor, marks, path);
             });
         }
         else {
-            setMarks(editor, obj);
+            setMarks(editor, marks);
         }
         PaintFormatEditor.cancelFormatBrushStatus(editor);
     },
@@ -10948,7 +10988,16 @@ const PaintFormatEditor = {
             .pipe(filter(event => element.contains(event.target)), take(1))
             .subscribe((event) => {
             if (contextService.paintFormatStatus.isActive) {
-                PaintFormatEditor.formatBrush(editor);
+                const contextService = editor.injector.get(TheContextService);
+                const marks = {};
+                for (const key of MarkProps) {
+                    marks[key] = contextService.paintFormatStatus.marks[key] || null;
+                }
+                if (TableEditor.formatBrush(editor, marks)) {
+                    PaintFormatEditor.cancelFormatBrushStatus(editor);
+                    return;
+                }
+                PaintFormatEditor.formatBrush(editor, marks);
             }
         });
         editor.onChange();
@@ -11148,6 +11197,69 @@ const createSoftBreakPlugin = createPluginFactory({
     }
 });
 
+class TheTableRowComponent extends TheBaseElementComponent {
+    constructor(elementRef, cdr, renderer) {
+        super(elementRef, cdr);
+        this.elementRef = elementRef;
+        this.cdr = cdr;
+        this.renderer = renderer;
+        this.numberedColumn = false;
+        this.rowNumber = '';
+    }
+    onContextChange() {
+        super.onContextChange();
+        const path = TheEditor.findPath(this.editor, this.element);
+        const tablePosition = createTablePosition(this.editor, path.concat(0));
+        const rowIndex = tablePosition.getRowIndex();
+        if (rowIndex === 0) {
+            this.renderer.addClass(this.elementRef.nativeElement, 'the-sticky-row');
+        }
+        else {
+            this.renderer.removeClass(this.elementRef.nativeElement, 'the-sticky-row');
+        }
+        if (this.initialized) {
+            this.useHeight();
+        }
+        this.setNumberColumn(tablePosition, rowIndex);
+    }
+    ngOnInit() {
+        super.ngOnInit();
+        this.useHeight();
+    }
+    useHeight() {
+        if (this.element.height) {
+            this.height = this.element.height + 'px';
+        }
+    }
+    setNumberColumn(ps, rowIndex) {
+        const headerRow = isHeaderRow(ps.table);
+        this.numberedColumn = ps.table?.options?.numberedColumn;
+        this.rowNumber = headerRow && rowIndex === 0 ? '' : headerRow ? rowIndex : rowIndex + 1;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: TheTableRowComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.5", type: TheTableRowComponent, selector: "tr[theTableRow]", host: { properties: { "style.height": "this.height" } }, usesInheritance: true, ngImport: i0, template: `
+        <td *ngIf="readonly && numberedColumn" class="the-table-number-column align-middle" thePreventDefault>
+            {{ rowNumber }}
+        </td>
+        <slate-children [children]="children" [context]="childrenContext" [viewContext]="viewContext"></slate-children>
+    `, isInline: true, dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1.SlateChildren, selector: "slate-children", inputs: ["children", "context", "viewContext"] }, { kind: "directive", type: ThePreventDefaultDirective, selector: "[thePreventDefault]", exportAs: ["thePreventDefault"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: TheTableRowComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'tr[theTableRow]',
+                    template: `
+        <td *ngIf="readonly && numberedColumn" class="the-table-number-column align-middle" thePreventDefault>
+            {{ rowNumber }}
+        </td>
+        <slate-children [children]="children" [context]="childrenContext" [viewContext]="viewContext"></slate-children>
+    `
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }]; }, propDecorators: { height: [{
+                type: HostBinding,
+                args: ['style.height']
+            }] } });
+
 class TheToolbarGroupComponent {
     set item(i) {
         this._item = i;
@@ -12149,27 +12261,10 @@ class TableStore {
         }
     }
     selectCellInDirection(direction) {
-        const pos = createTablePosition(this.editor);
         const [row, col] = this.focusCellPath.slice(-2);
-        let nextCellPath = [row, col];
-        switch (direction) {
-            case TableSelectCellDirection.up:
-                nextCellPath = [row - 1, col];
-                break;
-            case TableSelectCellDirection.right:
-                nextCellPath = [row, col + 1];
-                break;
-            case TableSelectCellDirection.down:
-                nextCellPath = [row + 1, col];
-                break;
-            case TableSelectCellDirection.left:
-                nextCellPath = [row, col - 1];
-                break;
-        }
-        const nextCellPosition = { row: nextCellPath[0], col: nextCellPath[1] };
-        const cell = pos.findCellByPath(nextCellPosition);
-        if (cell) {
-            this.setAreaSelectionCells(cell);
+        const nextCell = getNextCell(this.editor, direction, [row, col]);
+        if (nextCell) {
+            this.setAreaSelectionCells(nextCell);
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: TableStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
@@ -12871,6 +12966,113 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImpor
             type: Injectable
         }], ctorParameters: function () { return [{ type: i1$1.ThyPopover }, { type: i2$1.Overlay }, { type: TableStore }, { type: i0.NgZone }, { type: TheContextService }]; } });
 
+function calculateAnchorPositionInCell(editor, at) {
+    at = at || editor.selection.anchor;
+    const entry = anchorBlockEntry(editor, at);
+    const [block, blockPath] = entry;
+    const blockDom = AngularEditor.toDOMNode(editor, block);
+    const valueRangeRect = blockDom.getBoundingClientRect();
+    const blockHeight = window.getComputedStyle(blockDom).lineHeight;
+    const nativeSelection = window.getSelection();
+    const nativeRange = nativeSelection && nativeSelection.getRangeAt(0);
+    const nativeRangeRect = nativeRange && nativeRange.getBoundingClientRect();
+    let isFirstLine = false;
+    let isLastLine = false;
+    if (valueRangeRect && nativeRangeRect && blockHeight) {
+        const lineHeight = parseInt(blockHeight, 10);
+        isFirstLine = nativeRangeRect.top - valueRangeRect.top < lineHeight;
+        isLastLine = valueRangeRect.bottom - nativeRangeRect.bottom < lineHeight;
+    }
+    return {
+        isFirstLine,
+        isLastLine,
+        blockPath
+    };
+}
+
+const keyShiftDir = {
+    'shift+up': TableSelectCellDirection.up,
+    'shift+right': TableSelectCellDirection.right,
+    'shift+down': TableSelectCellDirection.down,
+    'shift+left': TableSelectCellDirection.left
+};
+const getHotKey = (e) => {
+    const hotkey = ['shift+up', 'shift+right', 'shift+down', 'shift+left'].find(key => isKeyHotkey(key, e));
+    return hotkey;
+};
+/**
+ * 处理单元格内 shift + up/down/left/right 行为
+ * @param editor 编辑器对象
+ * @param e 键盘事件对象
+ */
+const moveSelectionFromCell = (editor, e) => {
+    const hotkey = getHotKey(e);
+    if (!hotkey) {
+        return;
+    }
+    const { selection } = editor;
+    const cursor = selection.focus;
+    const tablePosition = createTablePosition(editor);
+    const tableComponent = ELEMENT_TO_COMPONENT.get(tablePosition.table);
+    const tableStore = tableComponent.tableStore;
+    const selectedCells = tableStore.getSelectedCellPositions();
+    const endPosition = createTablePosition(editor, cursor.path);
+    const cellPath = endPosition.cellEntry[1];
+    const isStart = Editor.isStart(editor, selection.focus, cellPath);
+    const isEnd = Editor.isEnd(editor, selection.focus, cellPath);
+    const isUp = isKeyHotkey('shift+up', e);
+    const isDown = isKeyHotkey('shift+down', e);
+    const isLeft = isKeyHotkey('shift+left', e);
+    const isRight = isKeyHotkey('shift+right', e);
+    // 当前已经没有选中单元格
+    if (selectedCells.length === 0) {
+        if (isUp || isDown) {
+            const cellStartPath = Editor.start(editor, cellPath).path;
+            const cellEndPath = Editor.end(editor, cellPath).path;
+            const { isFirstLine, isLastLine } = calculateAnchorPositionInCell(editor, cursor);
+            const [, anchorBlockPath] = anchorBlockEntry(editor, cursor);
+            const anchorPosition = createTablePosition(editor, selection.anchor.path);
+            const startCellPosition = createTablePosition(editor, cellStartPath);
+            const endCellPosition = createTablePosition(editor, cellEndPath);
+            const isSameCellByStart = Path.equals(anchorPosition.cellEntry[1], startCellPosition.cellEntry[1]);
+            const isSameCellByEnd = Path.equals(anchorPosition.cellEntry[1], endCellPosition.cellEntry[1]);
+            cellStartPath.pop();
+            cellEndPath.pop();
+            // 同一单元格内，当前光标不在首行或当前是跨行，则执行默认逻辑
+            if (isUp && isSameCellByStart && (!isFirstLine || !Path.equals(anchorBlockPath, cellStartPath))) {
+                return;
+            }
+            // 同一单元格内，当前光标不在最后一行或当前是跨行，则执行默认逻辑
+            if (isDown && isSameCellByEnd && (!isLastLine || !Path.equals(anchorBlockPath, cellEndPath))) {
+                return;
+            }
+        }
+        if (isLeft) {
+            const beforePoint = Editor.before(editor, selection);
+            const beforePosition = beforePoint && createTablePosition(editor, beforePoint.path);
+            // 如果不是单元格或不在起始位置，则不处理
+            if (!beforePosition?.cell || !isStart) {
+                return;
+            }
+        }
+        if (isRight) {
+            const afterPoint = Editor.after(editor, selection);
+            const afterPosition = afterPoint && createTablePosition(editor, afterPoint.path);
+            // 如果不是单元格或不是单元格尾部，则不处理
+            if (!afterPosition?.cell || !isEnd) {
+                return;
+            }
+        }
+    }
+    tableStore.selectCellInDirection(keyShiftDir[hotkey]);
+    setTimeout(() => {
+        const tableService = tableComponent.tableService;
+        const isMobile = isMobileMode(editor);
+        const focusElement = tableComponent.tbodyNativeElement?.querySelector('.focused-cell') || tableStore.focusCellElement;
+        tableService.afterSelectedCells(focusElement, tableComponent.element, isMobile);
+    });
+};
+
 const TABLE_SELECTOR = '.the-table';
 const TABLE_WRAPPER_SELECTOR = '.the-table-wrapper';
 const RESIZE_OVERLAY_SELECTOR = '.the-table-resize-overlay-thumb';
@@ -13085,9 +13287,6 @@ class TheTableComponent extends TheBaseElementComponent {
             Promise.resolve().then(() => {
                 this.tableStore.emitTableChange();
                 this.tableStore.setSelectedColumnsAndRowIndex();
-                if (!this.tableStore.selectedCells.length && this.tableService.isOpened) {
-                    this.tableService.closeToolbar();
-                }
                 this.bindTableScrollingShadow();
                 this.useRowControls();
                 this.setHeaderCellStyle();
@@ -13157,8 +13356,11 @@ class TheTableComponent extends TheBaseElementComponent {
         this.tableStore
             .selectedCellsChange()
             .pipe(takeUntil(this.destroy$))
-            .subscribe(() => {
+            .subscribe(cells => {
             this.isSelectedAllCell = isSelectedAllCell(this.editor, this.tableStore.getSelectedCellPositions());
+            if (!cells.length && this.tableService.isOpened) {
+                this.tableService.closeToolbar();
+            }
         });
     }
     getWrapperWidth() {
@@ -13700,17 +13902,13 @@ class TheTableComponent extends TheBaseElementComponent {
                 if (isKeyHotkey('shift', e)) {
                     this.tableService.handleKeydownForAreaSelection(e, this.tbodyNativeElement);
                 }
-                if (isKeyHotkey('shift+up', e)) {
-                    this.tableStore.selectCellInDirection(TableSelectCellDirection.up);
+                // 处理单元格内 shift + up/down/left/right 行为
+                if (this.isInTable) {
+                    moveSelectionFromCell(this.editor, e);
                 }
-                if (isKeyHotkey('shift+down', e)) {
-                    this.tableStore.selectCellInDirection(TableSelectCellDirection.down);
-                }
-                if (isKeyHotkey('shift+left', e)) {
-                    this.tableStore.selectCellInDirection(TableSelectCellDirection.left);
-                }
-                if (isKeyHotkey('shift+right', e)) {
-                    this.tableStore.selectCellInDirection(TableSelectCellDirection.right);
+                // 触发上下左右键时，清除选中的单元格
+                if (isKeyHotkey(['up', 'down', 'left', 'right'], e) && this.tableStore.selectCells?.length > 0) {
+                    this.tableStore.clearSelectedCells();
                 }
             });
         });
@@ -13884,116 +14082,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImpor
                 args: ['mousedown', ['$event']]
             }] } });
 
-/**
- * Clear the content of the given node
- */
-function clearTableNode(opts, editor, isTopToBot) {
-    const { selection } = editor;
-    const element = createTablePosition(editor, selection.focus.path);
-    const rowIndex = element.getRowIndex();
-    const colIndex = element.getColumnIndex();
-    const removeRow = isTopToBot ? 0 : rowIndex + 1;
-    for (let i = 0; i < element.getWidth(); i++) {
-        const inColRange = Range.includes(selection, [...element.tableEntry[1], rowIndex, i]);
-        if (inColRange && i !== colIndex) {
-            Transforms.removeNodes(editor, { at: [...element.tableEntry[1], rowIndex, i] });
-            Transforms.insertNodes(editor, createCell(opts), { at: [...element.tableEntry[1], rowIndex, i] });
-        }
-    }
-    for (let i = 0; i < element.getHeight(); i++) {
-        const inRowRange = Range.includes(selection, [...element.tableEntry[1], i]);
-        if (inRowRange && i !== rowIndex) {
-            Transforms.removeNodes(editor, { at: [...element.tableEntry[1], removeRow] });
-        }
-    }
-}
-
-function calculateAnchorPositionInCell(editor) {
-    let isFirstLine = false;
-    let isLastLine = false;
-    const anchorBlock$1 = anchorBlock(editor);
-    const anchorBlockPath = findPath(editor, anchorBlock$1);
-    const anchorBlockDom = AngularEditor.toDOMNode(editor, anchorBlock$1);
-    const valueRangeRect = anchorBlockDom.getBoundingClientRect();
-    const anchorBlockHeight = window.getComputedStyle(anchorBlockDom).lineHeight;
-    const nativeSelection = window.getSelection();
-    const nativeRange = nativeSelection && nativeSelection.getRangeAt(0);
-    const nativeRangeRect = nativeRange && nativeRange.getBoundingClientRect();
-    if (valueRangeRect && nativeRangeRect && anchorBlockHeight) {
-        const lineHeight = parseInt(anchorBlockHeight, 10);
-        isFirstLine = nativeRangeRect.top - valueRangeRect.top < lineHeight;
-        isLastLine = valueRangeRect.bottom - nativeRangeRect.bottom < lineHeight;
-    }
-    return {
-        isFirstLine,
-        isLastLine,
-        anchorBlockPath
-    };
-}
-
-class TheTableRowComponent extends TheBaseElementComponent {
-    constructor(elementRef, cdr, renderer) {
-        super(elementRef, cdr);
-        this.elementRef = elementRef;
-        this.cdr = cdr;
-        this.renderer = renderer;
-        this.numberedColumn = false;
-        this.rowNumber = '';
-    }
-    onContextChange() {
-        super.onContextChange();
-        const path = TheEditor.findPath(this.editor, this.element);
-        const tablePosition = createTablePosition(this.editor, path.concat(0));
-        const rowIndex = tablePosition.getRowIndex();
-        if (rowIndex === 0) {
-            this.renderer.addClass(this.elementRef.nativeElement, 'the-sticky-row');
-        }
-        else {
-            this.renderer.removeClass(this.elementRef.nativeElement, 'the-sticky-row');
-        }
-        if (this.initialized) {
-            this.useHeight();
-        }
-        this.setNumberColumn(tablePosition, rowIndex);
-    }
-    ngOnInit() {
-        super.ngOnInit();
-        this.useHeight();
-    }
-    useHeight() {
-        if (this.element.height) {
-            this.height = this.element.height + 'px';
-        }
-    }
-    setNumberColumn(ps, rowIndex) {
-        const headerRow = isHeaderRow(ps.table);
-        this.numberedColumn = ps.table?.options?.numberedColumn;
-        this.rowNumber = headerRow && rowIndex === 0 ? '' : headerRow ? rowIndex : rowIndex + 1;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: TheTableRowComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.5", type: TheTableRowComponent, selector: "tr[theTableRow]", host: { properties: { "style.height": "this.height" } }, usesInheritance: true, ngImport: i0, template: `
-        <td *ngIf="readonly && numberedColumn" class="the-table-number-column align-middle" thePreventDefault>
-            {{ rowNumber }}
-        </td>
-        <slate-children [children]="children" [context]="childrenContext" [viewContext]="viewContext"></slate-children>
-    `, isInline: true, dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1.SlateChildren, selector: "slate-children", inputs: ["children", "context", "viewContext"] }, { kind: "directive", type: ThePreventDefaultDirective, selector: "[thePreventDefault]", exportAs: ["thePreventDefault"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: TheTableRowComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'tr[theTableRow]',
-                    template: `
-        <td *ngIf="readonly && numberedColumn" class="the-table-number-column align-middle" thePreventDefault>
-            {{ rowNumber }}
-        </td>
-        <slate-children [children]="children" [context]="childrenContext" [viewContext]="viewContext"></slate-children>
-    `
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }]; }, propDecorators: { height: [{
-                type: HostBinding,
-                args: ['style.height']
-            }] } });
-
 /**
  * @license
  * Copyright Google LLC All Rights Reserved.
@@ -14976,36 +15064,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImpor
                 args: ['style.display']
             }] } });
 
-const normalizeTable = (table) => {
-    const normalizedNodes = [];
-    const rowHeight = table.children.length;
-    const columnWidth = table.children[0].children.length;
-    table.children.forEach((row, rowIndex) => {
-        row.children.forEach((cell, columnIndex) => {
-            // case 1
-            if (cell.colspan || cell.rowspan) {
-                const rowspan = cell.rowspan || 1;
-                const colspan = cell.colspan || 1;
-                if (rowspan > rowHeight - rowIndex) {
-                    cell.rowspan = rowHeight - rowIndex;
-                }
-                if (colspan > columnWidth - columnIndex) {
-                    cell.colspan = columnWidth - columnIndex;
-                }
-                return;
-            }
-            // case 2
-            if (cell.hidden && !normalizedNodes.includes(cell)) {
-                const origin = getOriginCell(table, rowIndex, columnIndex);
-                if (!origin) {
-                    delete table.children[rowIndex].children[columnIndex].hidden;
-                }
-            }
-        });
-    });
-    return table;
-};
-
 class TheTableToolbarItemComponent extends TheBaseToolbarItem {
     get isOpenTableSelect() {
         return this.tableSelectRef && this.tableSelectRef.componentInstance;
@@ -15090,6 +15148,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImpor
                 }]
         }], ctorParameters: function () { return [{ type: i1$1.ThyPopover }, { type: i2$1.Overlay }]; } });
 
+/**
+ * Clear the content of the given node
+ */
+function clearTableNode(opts, editor, isTopToBot) {
+    const { selection } = editor;
+    const element = createTablePosition(editor, selection.focus.path);
+    const rowIndex = element.getRowIndex();
+    const colIndex = element.getColumnIndex();
+    const removeRow = isTopToBot ? 0 : rowIndex + 1;
+    for (let i = 0; i < element.getWidth(); i++) {
+        const inColRange = Range.includes(selection, [...element.tableEntry[1], rowIndex, i]);
+        if (inColRange && i !== colIndex) {
+            Transforms.removeNodes(editor, { at: [...element.tableEntry[1], rowIndex, i] });
+            Transforms.insertNodes(editor, createCell(opts), { at: [...element.tableEntry[1], rowIndex, i] });
+        }
+    }
+    for (let i = 0; i < element.getHeight(); i++) {
+        const inRowRange = Range.includes(selection, [...element.tableEntry[1], i]);
+        if (inRowRange && i !== rowIndex) {
+            Transforms.removeNodes(editor, { at: [...element.tableEntry[1], removeRow] });
+        }
+    }
+}
+
 const isLegalTable = (editor, element, path) => {
     try {
         const nodePath = path || TheEditor.findPath(editor, element);
@@ -15102,6 +15184,36 @@ const isLegalTable = (editor, element, path) => {
     }
 };
 
+const normalizeTable = (table) => {
+    const normalizedNodes = [];
+    const rowHeight = table.children.length;
+    const columnWidth = table.children[0].children.length;
+    table.children.forEach((row, rowIndex) => {
+        row.children.forEach((cell, columnIndex) => {
+            // case 1
+            if (cell.colspan || cell.rowspan) {
+                const rowspan = cell.rowspan || 1;
+                const colspan = cell.colspan || 1;
+                if (rowspan > rowHeight - rowIndex) {
+                    cell.rowspan = rowHeight - rowIndex;
+                }
+                if (colspan > columnWidth - columnIndex) {
+                    cell.colspan = columnWidth - columnIndex;
+                }
+                return;
+            }
+            // case 2
+            if (cell.hidden && !normalizedNodes.includes(cell)) {
+                const origin = getOriginCell(table, rowIndex, columnIndex);
+                if (!origin) {
+                    delete table.children[rowIndex].children[columnIndex].hidden;
+                }
+            }
+        });
+    });
+    return table;
+};
+
 const withTable = (editor) => {
     const { deleteBackward, deleteForward, onKeydown, setFragmentData, insertData, normalizeNode, isBlockCard, renderElement, deleteCutData, isContainer, onChange, onClick } = editor;
     editor.deleteBackward = unit => {