@worktile/theia 15.2.1 → 15.3.1

package/fesm2020/worktile-theia.mjs

@@ -8,7 +8,7 @@ import * as i1 from 'slate-angular';
 import { BaseElementComponent, BaseTextComponent, NODE_TO_PARENT, NODE_TO_INDEX, AngularEditor, hotkeys, IS_SAFARI, ELEMENT_TO_COMPONENT, hasBlockCard, isCardLeft, FAKE_RIGHT_BLOCK_CARD_OFFSET, getPlainText as getPlainText$1, EDITOR_TO_ELEMENT, defaultScrollSelectionIntoView, withAngular, SlateModule } from 'slate-angular';
 import { Range, Element as Element$1, Editor, Node, Span, Path, Text, Point, Transforms, Operation, createEditor } from 'slate';
 import { map, cloneDeep, assign, defaults, groupBy, uniq, isEqual } from 'lodash';
-import { isObject, isArray, isString } from 'ngx-tethys/util';
+import { isObject, isArray, isString, isUndefined } from 'ngx-tethys/util';
 import { TheiaConverter } from '@atinc/selene';
 import { HistoryEditor, withHistory } from 'slate-history';
 import * as i1$1 from 'ngx-tethys/popover';
@@ -61,8 +61,8 @@ import * as i6$2 from 'ngx-tethys/button';
 import { ThyButtonModule } from 'ngx-tethys/button';
 import * as i7$1 from 'ngx-tethys/input-number';
 import { ThyInputNumberModule } from 'ngx-tethys/input-number';
-import { coerceCssPixelValue } from '@angular/cdk/coercion';
 import { PortalInjector, ComponentPortal } from '@angular/cdk/portal';
+import { coerceCssPixelValue } from '@angular/cdk/coercion';
 import { ScrollingModule } from '@angular/cdk/scrolling';
 import { ThyAutocompleteModule } from 'ngx-tethys/autocomplete';
 import { ThyAvatarModule } from 'ngx-tethys/avatar';
@@ -130,7 +130,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
             }] } });
 
 const PICTURE_ACCEPTED_UPLOAD_MIME = ['image/png', 'image/jpeg', 'image/gif', 'image/bmp'];
-const PICTURE_ACCEPTED_UPLOAD_SIZE = 20;
+const PICTURE_ACCEPTED_UPLOAD_SIZE = 30;
 const A_TAG_REL_ATTR = 'noopener noreferrer nofollow external ugc';
 const LINK_DEFAULT_TEXT = '链接';
 const TAB_SPACE = '    ';
@@ -2191,7 +2191,7 @@ function getElementWidth(element) {
     return coercePixelsFromCssValue(element.style.width) || element.getBoundingClientRect().width;
 }
 function getElementHeight(element) {
-    return element.getBoundingClientRect().height;
+    return coercePixelsFromCssValue(element.style.height) || element.getBoundingClientRect().height;
 }
 function getColsTotalWidth(cols) {
     return cols.reduce((total, col) => {
@@ -2436,6 +2436,21 @@ function insertDataByInvalidType(editor, fragment) {
     return true;
 }
 
+const isColorPanel = (element) => {
+    const pickerPanel = element.closest('.thy-color-picker-panel');
+    const customPickerPanel = element.closest('.thy-color-picker-custom-panel');
+    if (pickerPanel || customPickerPanel) {
+        return true;
+    }
+    return false;
+};
+const isColorIndicator = (element) => {
+    return element.closest('.indicator-hue-alp');
+};
+const isColorInput = (element) => {
+    return element.closest('.thy-color-inputs');
+};
+
 const toolbarInitialize = (toolbarItems, global = DefaultGlobalToolbarDefinition, inline = DefaultInlineToolbarDefinition) => {
     const toolbarDefinition = {
         global,
@@ -3770,264 +3785,594 @@ function isInside(cellRect, rowIndex, columnIndex) {
     return false;
 }
 
-const setMarks = (editor, marks, at) => {
-    Transforms.setNodes(editor, marks, {
-        at,
-        match: Text.isText,
-        split: true
+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;
+}
+
+/**
+ * 获取标题行网格列宽值
+ * @param editor
+ * @param headerRow 标题行
+ * @param cellsWidth
+ * @returns string
+ */
+const getGridColumns = (headerRow, cellsWidth) => {
+    let result = '';
+    Array.from(headerRow.childNodes)
+        .filter((n) => n.nodeType === 1)
+        .forEach((node, i) => {
+        const col = node.getAttribute('colspan');
+        const display = node.style.display;
+        if (display === 'none') {
+            return;
+        }
+        if (col) {
+            const colSpan = Number(col) ?? 1;
+            let width = 0;
+            Array.from({ length: colSpan }, (_, j) => {
+                width += cellsWidth[i + j];
+            });
+            result += width + 'px ';
+        }
+        else {
+            result += cellsWidth[i] + 'px ';
+        }
     });
+    return result;
 };
-
-const clearMarks = (editor) => {
-    const { selection } = editor;
-    if (!selection) {
-        return;
-    }
-    if (Range.isCollapsed(selection)) {
-        const marks = Editor.marks(editor);
-        for (const key in marks) {
-            Editor.removeMark(editor, key);
+const getColumnsWidth = (cellRow, isColgroup = false) => {
+    const result = [];
+    Array.from(cellRow.childNodes)
+        .filter((n) => n.nodeType === 1)
+        .forEach((item) => {
+        if (isColgroup && IS_SAFARI) {
+            result.push(item.offsetWidth);
+            return;
         }
-    }
-    else {
-        const unsetMarks = {};
-        MarkProps.forEach(key => {
-            unsetMarks[key] = null;
-        });
-        setMarks(editor, unsetMarks);
-    }
+        if (item.getBoundingClientRect) {
+            result.push(item.getBoundingClientRect().width);
+        }
+    });
+    return result;
 };
-
-const insertElements = (editor, elements) => {
-    if (!editor.selection) {
-        refocus(editor);
-    }
-    if (Range.isExpanded(editor.selection)) {
-        Editor.deleteFragment(editor);
-    }
-    const type = !isArray(elements) ? elements.type : elements[0].type; // 后期处理复制粘贴需要修改
-    const allowParentTypes = getPluginOptions(editor, type)?.allowParentTypes || [];
-    const insertNodePath = getInsertElementsPath(editor, allowParentTypes);
-    const [anchorBlock, anchorBlockPath] = anchorBlockEntry(editor);
-    let isEmpty = Editor.isEmpty(editor, anchorBlock);
-    if (insertNodePath) {
-        Editor.withoutNormalizing(editor, () => {
-            Transforms.insertNodes(editor, elements, { at: insertNodePath });
-            Transforms.select(editor, Editor.start(editor, insertNodePath));
-            if (isEmpty) {
-                Transforms.removeNodes(editor, { at: anchorBlockPath });
-            }
-        });
-        return;
-    }
-    const nextPath = Path.next([anchorBlockPath[0]]);
-    Transforms.insertNodes(editor, elements, { at: nextPath });
-    if (isEmpty && anchorBlockPath.length === 1) {
-        Transforms.delete(editor, { at: anchorBlockPath });
-        Transforms.select(editor, Editor.start(editor, anchorBlockPath));
+/**
+ * 计算表格列宽
+ * @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 {
-        Transforms.select(editor, Editor.start(editor, nextPath));
+        return columns;
     }
 };
-
-const setNode = (editor, props, origin) => {
-    Transforms.setNodes(editor, props, { at: findPath(editor, origin) });
+/**
+ * 计算表格列宽
+ * @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) };
+    });
 };
-
 /**
- * Unwrap nodes by type
+ * 打印模式下，按照原宽度比例基于当前表格宽度计算列宽
+ * 1. 所有列的最小列宽总和大于表格宽度时，所有列返回最小宽度
+ * @param element
+ * @param minWidthPx
+ * @returns number[]
  */
-const unwrapNodesByType = (editor, types, options = {}) => {
-    if (!Array.isArray(types)) {
-        types = [types];
+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 }));
     }
-    Transforms.unwrapNodes(editor, {
-        match: n => Element$1.isElement(n) && types.includes(n.type),
-        ...options
-    });
+    // 在剩余的宽度中按比例分配
+    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 onKeyDownResetBlockType = ({ rules }) => (event, editor) => {
-    let reset;
-    if (editor.selection && isCollapsed(editor.selection)) {
-        rules.forEach(({ types, defaultType, hotkey, predicate, onReset }) => {
-            if (!event || (hotkey && isKeyHotkey(hotkey, event))) {
-                if (predicate(editor) && isNodeTypeIn(editor, types)) {
-                    if (event !== null) {
-                        event.preventDefault();
-                    }
-                    Transforms.setNodes(editor, { type: defaultType });
-                    onReset(editor);
-                    reset = true;
-                }
-            }
-        });
+/* cell-position 有关的函数 */
+/**
+ * 判断是否选中了所有的单元格
+ * @param editor 编辑器对象
+ * @param selectedCellPositions 选中的单元格位置数组
+ * @returns 是否选中了所有的单元格
+ */
+const isSelectedAllCell = (editor, selectedCellPositions) => {
+    if (!AngularEditor.isFocused(editor)) {
+        return false;
     }
-    return reset;
+    const pos = createTablePosition(editor);
+    return !!selectedCellPositions.length && pos.getHeight() * pos.getWidth() === selectedCellPositions.length;
 };
-
 /**
- * 将节点的子级移动到路径。 返回移动的子级数。
+ * 获取选中的单元格位置数组
+ * @param editor 编辑器对象
+ * @param selectedCells 选中的单元格
+ * @returns 选中的单元格位置
  */
-const moveChildren = (editor, { at, to, match, start = 0 }) => {
-    let moved = 0;
-    const parentPath = Path.isPath(at) ? at : at[1];
-    const parentNode = Path.isPath(at) ? Node.get(editor, parentPath) : at[0];
-    if (!Editor.isBlock(editor, parentNode))
-        return moved;
-    for (let i = parentNode.children.length - 1; i >= start; i--) {
-        const childPath = [...parentPath, i];
-        const childNode = getNode(editor, childPath);
-        if (!match || (childNode && match([childNode, childPath]))) {
-            Transforms.moveNodes(editor, { at: childPath, to });
-            moved++;
+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 moved;
-};
-
-const insertParagraph = (editor, at) => {
-    Transforms.insertNodes(editor, createEmptyParagraph(), { at });
+    return positions;
 };
-
 /**
- * Recursively apply an operation to children nodes with a query.
+ * 过滤重复的单元格位置
+ * @param cells 单元格数组
+ * @param selectedCellPositions 选中的单元格位置数组
+ * @returns 过滤后的单元格位置数组
  */
-const applyDeepToNodes = ({ node, source, apply, query }) => {
-    const entry = [node, []];
-    if (isNodeType(entry, query)) {
-        if (source instanceof Function) {
-            apply(node, source());
+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 {
-            apply(node, source);
+            return {
+                rowIndex: index
+            };
         }
-    }
-    if (!isAncestor(node)) {
-        return;
-    }
-    node.children.forEach((child) => {
-        applyDeepToNodes({ node: child, source, apply, query });
     });
+    return cells;
 };
-
 /**
- * Recursively merge a source object to children nodes with a query.
+ * 计算行控件的平均高度
+ * @param previousCombineRowIndex
+ * @param previousRowIndex
+ * @param rowControls
  */
-const mergeDeepToNodes = (options) => {
-    applyDeepToNodes({ ...options, apply: defaults });
-};
-
-const unWrap = (editor, kind) => {
-    Editor.withoutNormalizing(editor, () => {
-        Transforms.setNodes(editor, { type: ElementKinds.paragraph });
-        Transforms.unwrapNodes(editor, {
-            match: n => Element$1.isElement(n) && n.type === kind,
-            split: 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 deleteElement = (editor, element) => {
-    const at = findPath(editor, element);
-    Transforms.insertNodes(editor, createEmptyParagraph(), { at });
-    AngularEditor.focus(editor);
-    Transforms.select(editor, at);
-    Transforms.removeNodes(editor, { at: Path.next(at) });
+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 setEndSelection = (editor) => {
-    const lastNode = getLastNode(editor, 1);
-    const end = Editor.end(editor, lastNode[1]);
-    Transforms.select(editor, end);
-    AngularEditor.focus(editor);
+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;
 };
 
-const closeConversionHint = (editor) => {
-    const hintRef = THE_EDITOR_CONVERSION_HINT_REF.get(editor);
-    if (hintRef) {
-        hintRef.close();
+/**
+ * compatible with old data
+ * @returns
+ */
+function isHeaderRow(element) {
+    if (element?.options?.headerRow) {
+        return true;
     }
-};
-
-function handleContinualDeleteBackward(editor, aboveResult, type) {
-    const highestBlock = aboveResult[0];
-    const lowestBlock = anchorBlock(editor);
-    const wrapBlockType = highestBlock.type;
-    if (lowestBlock && Editor.isStart(editor, editor.selection.anchor, aboveResult[1])) {
-        if (wrapBlockType === type) {
-            if (highestBlock.children[0] === lowestBlock) {
-                unWrap(editor, wrapBlockType);
-                return true;
-            }
-        }
+    // compat old data
+    if (element?.children[0].header) {
+        return true;
     }
-    return false;
 }
 
-function handleContinualInsertBreak(editor, lowestBlock, type) {
-    const isEmpty = Editor.isEmpty(editor, lowestBlock);
-    const isEnd = Editor.isEnd(editor, editor.selection.anchor, editor.selection.focus.path);
-    const aboveResult = Editor.above(editor, {
-        match: n => Editor.isBlock(editor, n) && n.type === type
-    });
-    if (aboveResult && aboveResult[0] && isEnd && isEmpty) {
-        const wrapBlock = aboveResult[0];
-        if (wrapBlock.type === type) {
-            if (wrapBlock.children[wrapBlock.children.length - 1] === lowestBlock) {
-                unWrap(editor, wrapBlock.type);
-                return true;
-            }
+function getSelectCellNode(editor, selectedCells) {
+    const pos = createTablePosition(editor);
+    return selectedCells
+        .map(item => {
+        const node = pos.findCellByPath(item);
+        if (node) {
+            return {
+                ...item,
+                node: node
+            };
         }
-    }
-    return false;
+    })
+        .filter(item => item);
+}
+function focusCell(editor, path) {
+    const at = Editor.start(editor, path);
+    TheEditor.focus(editor);
+    Transforms.select(editor, at);
 }
 
-var index = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    applyDeepToNodes: applyDeepToNodes,
-    clearMarks: clearMarks,
-    closeConversionHint: closeConversionHint,
-    deleteElement: deleteElement,
-    handleContinualDeleteBackward: handleContinualDeleteBackward,
-    handleContinualInsertBreak: handleContinualInsertBreak,
-    insertElements: insertElements,
-    insertParagraph: insertParagraph,
-    mergeDeepToNodes: mergeDeepToNodes,
-    moveChildren: moveChildren,
-    onKeyDownResetBlockType: onKeyDownResetBlockType,
-    setEndSelection: setEndSelection,
-    setMarks: setMarks,
-    setNode: setNode,
-    unWrap: unWrap,
-    unwrapNodesByType: unwrapNodesByType
-});
+const setMarks = (editor, marks, at) => {
+    Transforms.setNodes(editor, marks, {
+        at,
+        match: Text.isText,
+        split: true
+    });
+};
 
-/**
- * Insert a new table
- */
-function insertTable(opts, editor, rows = 3, columns = 3, getCellContent) {
+const clearMarks = (editor) => {
     const { selection } = editor;
-    if (!selection?.anchor) {
+    if (!selection) {
         return;
     }
-    // Create the table node
-    const table = createTable(opts, columns, rows, getCellContent);
-    insertElements(editor, table);
-}
+    if (Range.isCollapsed(selection)) {
+        const marks = Editor.marks(editor);
+        for (const key in marks) {
+            Editor.removeMark(editor, key);
+        }
+    }
+    else {
+        const unsetMarks = {};
+        MarkProps.forEach(key => {
+            unsetMarks[key] = null;
+        });
+        setMarks(editor, unsetMarks);
+    }
+};
 
-function getInsertRowState(opts, editor, count = 1, at) {
-    const tablePosition = createTablePosition(editor);
-    let table = tablePosition.table;
-    let tableEntry = tablePosition.tableEntry;
-    // Create a new row with the right count of cells
-    const columns = table.children[0].children.length;
-    const rowIndex = tablePosition.getRowIndex();
-    const insertRowIndex = typeof at === 'undefined' ? rowIndex + 1 : at;
-    return { table, tableEntry, columns, rowIndex, insertRowIndex };
-}
-function packNewRow(opts, editor, count = 1, at) {
+const insertElements = (editor, elements) => {
+    if (!editor.selection) {
+        refocus(editor);
+    }
+    if (Range.isExpanded(editor.selection)) {
+        Editor.deleteFragment(editor);
+    }
+    const type = !isArray(elements) ? elements.type : elements[0].type; // 后期处理复制粘贴需要修改
+    const allowParentTypes = getPluginOptions(editor, type)?.allowParentTypes || [];
+    const insertNodePath = getInsertElementsPath(editor, allowParentTypes);
+    const [anchorBlock, anchorBlockPath] = anchorBlockEntry(editor);
+    let isEmpty = Editor.isEmpty(editor, anchorBlock);
+    if (insertNodePath) {
+        Editor.withoutNormalizing(editor, () => {
+            Transforms.insertNodes(editor, elements, { at: insertNodePath });
+            Transforms.select(editor, Editor.start(editor, insertNodePath));
+            if (isEmpty) {
+                Transforms.removeNodes(editor, { at: anchorBlockPath });
+            }
+        });
+        return;
+    }
+    const nextPath = Path.next([anchorBlockPath[0]]);
+    Transforms.insertNodes(editor, elements, { at: nextPath });
+    if (isEmpty && anchorBlockPath.length === 1) {
+        Transforms.delete(editor, { at: anchorBlockPath });
+        Transforms.select(editor, Editor.start(editor, anchorBlockPath));
+    }
+    else {
+        Transforms.select(editor, Editor.start(editor, nextPath));
+    }
+};
+
+const setNode = (editor, props, origin) => {
+    Transforms.setNodes(editor, props, { at: findPath(editor, origin) });
+};
+
+/**
+ * Unwrap nodes by type
+ */
+const unwrapNodesByType = (editor, types, options = {}) => {
+    if (!Array.isArray(types)) {
+        types = [types];
+    }
+    Transforms.unwrapNodes(editor, {
+        match: n => Element$1.isElement(n) && types.includes(n.type),
+        ...options
+    });
+};
+
+const onKeyDownResetBlockType = ({ rules }) => (event, editor) => {
+    let reset;
+    if (editor.selection && isCollapsed(editor.selection)) {
+        rules.forEach(({ types, defaultType, hotkey, predicate, onReset }) => {
+            if (!event || (hotkey && isKeyHotkey(hotkey, event))) {
+                if (predicate(editor) && isNodeTypeIn(editor, types)) {
+                    if (event !== null) {
+                        event.preventDefault();
+                    }
+                    Transforms.setNodes(editor, { type: defaultType });
+                    onReset(editor);
+                    reset = true;
+                }
+            }
+        });
+    }
+    return reset;
+};
+
+/**
+ * 将节点的子级移动到路径。 返回移动的子级数。
+ */
+const moveChildren = (editor, { at, to, match, start = 0 }) => {
+    let moved = 0;
+    const parentPath = Path.isPath(at) ? at : at[1];
+    const parentNode = Path.isPath(at) ? Node.get(editor, parentPath) : at[0];
+    if (!Editor.isBlock(editor, parentNode))
+        return moved;
+    for (let i = parentNode.children.length - 1; i >= start; i--) {
+        const childPath = [...parentPath, i];
+        const childNode = getNode(editor, childPath);
+        if (!match || (childNode && match([childNode, childPath]))) {
+            Transforms.moveNodes(editor, { at: childPath, to });
+            moved++;
+        }
+    }
+    return moved;
+};
+
+const insertParagraph = (editor, at) => {
+    Transforms.insertNodes(editor, createEmptyParagraph(), { at });
+};
+
+/**
+ * Recursively apply an operation to children nodes with a query.
+ */
+const applyDeepToNodes = ({ node, source, apply, query }) => {
+    const entry = [node, []];
+    if (isNodeType(entry, query)) {
+        if (source instanceof Function) {
+            apply(node, source());
+        }
+        else {
+            apply(node, source);
+        }
+    }
+    if (!isAncestor(node)) {
+        return;
+    }
+    node.children.forEach((child) => {
+        applyDeepToNodes({ node: child, source, apply, query });
+    });
+};
+
+/**
+ * Recursively merge a source object to children nodes with a query.
+ */
+const mergeDeepToNodes = (options) => {
+    applyDeepToNodes({ ...options, apply: defaults });
+};
+
+const unWrap = (editor, kind) => {
+    Editor.withoutNormalizing(editor, () => {
+        Transforms.setNodes(editor, { type: ElementKinds.paragraph });
+        Transforms.unwrapNodes(editor, {
+            match: n => Element$1.isElement(n) && n.type === kind,
+            split: true
+        });
+    });
+};
+
+const deleteElement = (editor, element) => {
+    const at = findPath(editor, element);
+    Transforms.insertNodes(editor, createEmptyParagraph(), { at });
+    AngularEditor.focus(editor);
+    Transforms.select(editor, at);
+    Transforms.removeNodes(editor, { at: Path.next(at) });
+};
+
+const setEndSelection = (editor) => {
+    const lastNode = getLastNode(editor, 1);
+    const end = Editor.end(editor, lastNode[1]);
+    Transforms.select(editor, end);
+    AngularEditor.focus(editor);
+};
+
+const closeConversionHint = (editor) => {
+    const hintRef = THE_EDITOR_CONVERSION_HINT_REF.get(editor);
+    if (hintRef) {
+        hintRef.close();
+    }
+};
+
+function handleContinualDeleteBackward(editor, aboveResult, type) {
+    const highestBlock = aboveResult[0];
+    const lowestBlock = anchorBlock(editor);
+    const wrapBlockType = highestBlock.type;
+    if (lowestBlock && Editor.isStart(editor, editor.selection.anchor, aboveResult[1])) {
+        if (wrapBlockType === type) {
+            if (highestBlock.children[0] === lowestBlock) {
+                unWrap(editor, wrapBlockType);
+                return true;
+            }
+        }
+    }
+    return false;
+}
+
+function handleContinualInsertBreak(editor, lowestBlock, type) {
+    const isEmpty = Editor.isEmpty(editor, lowestBlock);
+    const isEnd = Editor.isEnd(editor, editor.selection.anchor, editor.selection.focus.path);
+    const aboveResult = Editor.above(editor, {
+        match: n => Editor.isBlock(editor, n) && n.type === type
+    });
+    if (aboveResult && aboveResult[0] && isEnd && isEmpty) {
+        const wrapBlock = aboveResult[0];
+        if (wrapBlock.type === type) {
+            if (wrapBlock.children[wrapBlock.children.length - 1] === lowestBlock) {
+                unWrap(editor, wrapBlock.type);
+                return true;
+            }
+        }
+    }
+    return false;
+}
+
+var index = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    applyDeepToNodes: applyDeepToNodes,
+    clearMarks: clearMarks,
+    closeConversionHint: closeConversionHint,
+    deleteElement: deleteElement,
+    handleContinualDeleteBackward: handleContinualDeleteBackward,
+    handleContinualInsertBreak: handleContinualInsertBreak,
+    insertElements: insertElements,
+    insertParagraph: insertParagraph,
+    mergeDeepToNodes: mergeDeepToNodes,
+    moveChildren: moveChildren,
+    onKeyDownResetBlockType: onKeyDownResetBlockType,
+    setEndSelection: setEndSelection,
+    setMarks: setMarks,
+    setNode: setNode,
+    unWrap: unWrap,
+    unwrapNodesByType: unwrapNodesByType
+});
+
+/**
+ * Insert a new table
+ */
+function insertTable(opts, editor, rows = 3, columns = 3, getCellContent) {
+    const { selection } = editor;
+    if (!selection?.anchor) {
+        return;
+    }
+    // Create the table node
+    const table = createTable(opts, columns, rows, getCellContent);
+    insertElements(editor, table);
+}
+
+function getInsertRowState(opts, editor, count = 1, at) {
+    const tablePosition = createTablePosition(editor);
+    let table = tablePosition.table;
+    let tableEntry = tablePosition.tableEntry;
+    // Create a new row with the right count of cells
+    const columns = table.children[0].children.length;
+    const rowIndex = tablePosition.getRowIndex();
+    const insertRowIndex = typeof at === 'undefined' ? rowIndex + 1 : at;
+    return { table, tableEntry, columns, rowIndex, insertRowIndex };
+}
+function packNewRow(opts, editor, count = 1, at) {
     const { table, tableEntry, columns, insertRowIndex } = getInsertRowState(opts, editor, count, at);
     const rowspan = calcSpanForRow(table, insertRowIndex);
     const newRow = createRow(opts, columns);
@@ -4538,7 +4883,9 @@ const ImageEditor = {
             });
             return false;
         }
-        if (image.size / 1000000 >= PICTURE_ACCEPTED_UPLOAD_SIZE) {
+        const acceptedUploadSize = getPluginOptions(editor, PluginKeys.image)?.acceptedUploadSize ?? PICTURE_ACCEPTED_UPLOAD_SIZE;
+        console.log(acceptedUploadSize);
+        if (image.size / 1000000 >= acceptedUploadSize) {
             editor.onError({
                 code: ErrorCodes.IMAGE_ERR_SIZE_LIMIT
             });
@@ -7403,21 +7750,6 @@ const createBlockCardPlugin = createPluginFactory({
     withOverrides: withBlockCard
 });
 
-const isColorPanel = (element) => {
-    const pickerPanel = element.closest('.thy-color-picker-panel');
-    const customPickerPanel = element.closest('.thy-color-picker-custom-panel');
-    if (pickerPanel || customPickerPanel) {
-        return true;
-    }
-    return false;
-};
-const isColorIndicator = (element) => {
-    return element.closest('.indicator-hue-alp');
-};
-const isColorInput = (element) => {
-    return element.closest('.thy-color-inputs');
-};
-
 const withInternalCommon = (editor) => {
     const { globalMousedown, onKeydown } = editor;
     editor.globalMousedown = (event) => {
@@ -9011,15 +9343,12 @@ class TheLinkEditComponent {
             }
         });
     }
-    linkRegExp(val) {
-        return /(http|ftp|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-\.,@?^=%&:/~\+#]*[\w\-\@?^=%&/~\+#])?/.test(val);
-    }
     closePopover(type) {
         this.thyPopoverRef.close(type);
     }
     applyLink(form) {
         const link = this.link.trim();
-        if (this.linkRegExp(link)) {
+        if (isUrl(link)) {
             const linkPath = findPath(this.editor, this.node);
             if (this.originLink !== link) {
                 Transforms.setNodes(this.editor, { url: link }, { at: linkPath });
@@ -10970,58 +11299,6 @@ function resetTableCell(editor, table, cell, cellRow, cellCol) {
     });
 }
 
-function getSelectCellNode(editor, selectedCells) {
-    const pos = createTablePosition(editor);
-    return selectedCells
-        .map(item => {
-        const node = pos.findCellByPath(item);
-        if (node) {
-            return {
-                ...item,
-                node: node
-            };
-        }
-    })
-        .filter(item => item);
-}
-
-/* cell-position 有关的函数 */
-const isSelectedAllCell = (editor, selectedCellPositions) => {
-    if (!AngularEditor.isFocused(editor)) {
-        return false;
-    }
-    const pos = createTablePosition(editor);
-    return !!selectedCellPositions.length && pos.getHeight() * pos.getWidth() === selectedCellPositions.length;
-};
-const getSelectedCellPositions = (editor, selectedCells) => {
-    return selectedCells?.map((cell) => {
-        const path = AngularEditor.findPath(editor, cell);
-        const [row, col] = path.slice(-2);
-        return { row, col };
-    });
-};
-/* 获取一定范围内所有的单元格 */
-const getCellPositionsFromRange = (startRow, startCol, endRow, endCol) => {
-    const result = [];
-    for (let row = startRow; row < endRow; row++) {
-        for (let col = startCol; col < endCol; col++) {
-            result.push({ row, col });
-        }
-    }
-    return result;
-};
-/**
- * 去重重复的单元格位置
- * @returns
- */
-const uniqueCellPosition = (cells, selectedCellPositions) => {
-    const result = [];
-    const modCells = new Set();
-    cells.concat(selectedCellPositions).forEach(cell => modCells.add(JSON.stringify(cell)));
-    modCells.forEach((cell) => result.push(JSON.parse(cell)));
-    return result;
-};
-
 function isSelectedCellMerged(editor) {
     if (editor && editor.selection) {
         const opts = new TableOptions();
@@ -11271,13 +11548,61 @@ const setSelectedCellsBackgroundColor = (editor, color, tableStore) => {
     }
 };
 
+function setTableOptions(editor, newOptions) {
+    const tablePosition = createTablePosition(editor);
+    const tablePath = getTablePath(editor);
+    const table = tablePosition.table;
+    const options = { ...table.options, ...newOptions };
+    Transforms.setNodes(editor, { options }, { at: tablePath });
+}
+
+function removeColumnOrRows(editor, tableStore, options) {
+    const { isSelectedTable } = tableStore;
+    const selectedRowsIndex = options?.selectedRowsIndex || tableStore.selectedRowsIndex;
+    const selectedColumnsIndex = options?.selectedColumnsIndex || tableStore.selectedColumnsIndex;
+    const tablePosition = createTablePosition(editor);
+    if (isSelectedTable) {
+        TableEditor.removeTable(editor);
+        return;
+    }
+    const tableComponent = ELEMENT_TO_COMPONENT.get(tablePosition.table);
+    if (selectedRowsIndex.length > 0 && selectedColumnsIndex.length === 0) {
+        // 删除行时取消标题行
+        if (tablePosition.table && tableComponent.headerRow && selectedRowsIndex.includes(0)) {
+            setTableOptions(editor, { headerRow: false });
+            // headerRow 兼容代码, 取消标题行的时候同时设置 row 中的 header 属性
+            if (tablePosition.table.children[0].header) {
+                const rowPath = TheEditor.findPath(editor, tablePosition.table.children[0]);
+                Transforms.setNodes(editor, { header: null }, { at: rowPath });
+            }
+        }
+        selectedRowsIndex
+            .sort((a, b) => b - a)
+            .forEach(index => {
+            TableEditor.removeRow(editor, index);
+        });
+        tableStore.changeCells();
+    }
+    if (selectedColumnsIndex.length > 0 && selectedRowsIndex.length === 0) {
+        // 删除列时取消标题列
+        if (tablePosition.table && tablePosition.table.options?.headerColumn && selectedColumnsIndex.includes(0)) {
+            setTableOptions(editor, { headerColumn: false });
+        }
+        selectedColumnsIndex
+            .sort((a, b) => b - a)
+            .forEach(index => {
+            TableEditor.removeColumn(editor, index);
+        });
+        tableStore.changeCells();
+    }
+}
+
 const getMinAndMaxCellIndex = (editor, selectedCellPositions, maxRow, maxCol, minRow, minCol, table) => {
     const beforeCols = [];
     const beforeRows = [];
     let spanSelectedCells = [];
     if (selectedCellPositions.length) {
-        spanSelectedCells = selectedCellPositions
-            .map(item => {
+        spanSelectedCells = selectedCellPositions.map(item => {
             const { row, col } = item;
             const node = table.children[row].children[col];
             if (!node.hidden) {
@@ -11287,20 +11612,26 @@ const getMinAndMaxCellIndex = (editor, selectedCellPositions, maxRow, maxCol, mi
                     rowspan: node.rowspan || 1
                 };
             }
-        })
-            .filter(item => item);
+            else {
+                return {
+                    ...item,
+                    colspan: 1,
+                    rowspan: 1
+                };
+            }
+        });
     }
-    table.children.map((row, rowIndex) => {
+    table.children.forEach((row, rowIndex) => {
         if (rowIndex <= maxRow) {
-            row.children.map((cell, colIndex) => {
+            row.children.forEach((cell, colIndex) => {
                 if (colIndex <= maxCol) {
                     const cellRowIndex = rowIndex + (cell.rowspan || 1) - 1;
                     const cellColIndex = colIndex + (cell.colspan || 1) - 1;
                     if (spanSelectedCells.length) {
-                        const { row: selectRow, col: selectCol, rowspan: selectRowspan, colspan: selectColspan } = spanSelectedCells[0];
-                        if (selectRow + selectRowspan - 1 >= minRow && selectCol + selectColspan - 1 >= minCol) {
-                            minRow = Math.min(spanSelectedCells[0].row, minRow);
-                            minCol = Math.min(spanSelectedCells[0].col, minCol);
+                        const { row: selectRow, col: selectCol, rowspan: selectRowSpan, colspan: selectColSpan } = spanSelectedCells[0];
+                        if (selectRow + selectRowSpan - 1 >= minRow && selectCol + selectColSpan - 1 >= minCol) {
+                            minRow = Math.min(selectRow, minRow);
+                            minCol = Math.min(selectCol, minCol);
                         }
                     }
                     if (cell.colspan && cell.colspan > 1) {
@@ -11353,17 +11684,17 @@ class TableStore {
         this.isRightClicking = false;
         this.isFocusedInput = false;
         this.pointerSelection = false;
-        this.isSelectedAllCell = () => {
-            if (!this.editor.selection)
-                return false;
-            const pos = createTablePosition(this.editor);
-            const selectedCellPositions = this.getSelectedCellPositions();
-            return !!selectedCellPositions.length && pos.getHeight() * pos.getWidth() === selectedCellPositions.length;
-        };
+        this.areaSelection = false;
+    }
+    initEditor(editor) {
+        this.editor = editor;
     }
     getSelectedCellPositions() {
         return getSelectedCellPositions(this.editor, this.selectedCells$.getValue());
     }
+    publishDangerousCells(value) {
+        return this.dangerousCells$.next(value);
+    }
     setSelectedColumnsAndRowIndex() {
         if (!this.editor?.selection) {
             return;
@@ -11410,29 +11741,52 @@ class TableStore {
         this.selectedCells$.next(cellElements);
         this.setSelectedColumnsAndRowIndex();
     }
-    initEditor(editor) {
-        this.editor = editor;
-    }
     selectRow(editor, index) {
-        this.clearLastFocusPath();
         const pos = createTablePosition(editor);
-        const cells = getCellPositionsFromRange(index, 0, index + 1, pos.getWidth());
-        this.setSelectedCells(cells, pos);
-        this.focusCell(editor, pos.tableEntry[1].concat([index, 0]));
+        const rangeCells = getCellPositionsFromRange(index, 0, index + 1, pos.getWidth());
+        this.clearLastFocusPath();
+        if (this.areaSelection) {
+            this.areaSelectRowAndColumn(rangeCells);
+        }
+        else {
+            this.setSelectedCells(rangeCells, pos);
+            this.focusCell(pos.tableEntry[1].concat([index, 0]));
+        }
     }
     selectColumn(editor, index) {
-        this.clearLastFocusPath();
         const pos = createTablePosition(editor);
-        const cells = getCellPositionsFromRange(0, index, pos.getHeight(), index + 1);
-        this.setSelectedCells(cells, pos);
-        this.focusCell(editor, pos.tableEntry[1].concat([0, index]));
+        const rangeCells = getCellPositionsFromRange(0, index, pos.getHeight(), index + 1);
+        this.clearLastFocusPath();
+        if (this.areaSelection) {
+            this.areaSelectRowAndColumn(rangeCells);
+        }
+        else {
+            this.setSelectedCells(rangeCells, pos);
+            this.focusCell(pos.tableEntry[1].concat([0, index]));
+        }
     }
     selectTable(editor) {
-        this.isSelectedTable = true;
         const pos = createTablePosition(editor);
         const cells = getCellPositionsFromRange(0, 0, pos.getHeight(), pos.getWidth());
+        const lastCell = cells[cells.length - 1];
+        const anchorCellPath = pos.tableEntry[1].concat([lastCell.row, lastCell.col]);
+        this.isSelectedTable = true;
         this.setSelectedCells(cells, pos);
-        this.focusCell(editor, pos.tableEntry[1].concat([0, 0]));
+        this.setAreaAnchorCellPath(anchorCellPath);
+        this.focusCell(pos.tableEntry[1].concat([0, 0]));
+    }
+    // 拖选开始 || 记录聚焦点
+    selectCellStart(cell, editor) {
+        const node = AngularEditor.toSlateNode(editor, cell);
+        const path = AngularEditor.findPath(editor, node);
+        this.isPrepareSelecting = true;
+        this.anchorCellPath = path;
+        this.focusCellPath = path;
+        this.focusCellElement = cell;
+        this.lastFocusCellPath = path;
+        if (!this.preFocusCellPath) {
+            this.preFocusCellPath = this.anchorCellPath;
+        }
     }
     // 拖选
     selectCells(editor) {
@@ -11453,6 +11807,13 @@ class TableStore {
         const cells = getCellPositionsFromRange(minRow, minCol, maxRow + 1, maxCol + 1);
         this.setSelectedCells(cells, pos);
     }
+    selectFirstCell() {
+        const selectedCellPositions = this.getSelectedCellPositions();
+        const { row, col } = selectedCellPositions[0];
+        const tablePath = getTablePath(this.editor);
+        const path = Editor.start(this.editor, [...tablePath, row, col]);
+        Transforms.select(this.editor, path);
+    }
     // 选择单元格
     selectCell(cell, editor) {
         const node = AngularEditor.toSlateNode(editor, cell);
@@ -11462,80 +11823,38 @@ class TableStore {
         this.focusCellElement = cell;
         const [row, col] = path.slice(-2);
         const pos = createTablePosition(editor);
-        const result = [{ row, col }];
+        const cells = [{ row, col }];
         const selectedCellPositions = this.getSelectedCellPositions();
         if (this.pointerSelection) {
-            result.push(...selectedCellPositions);
+            cells.push(...selectedCellPositions);
             // 处理单元格选中时，处理为选中多单元格
             const selectedCells = getCellPositionsBeforeMerge(this.editor, { row, col });
-            result.push(...selectedCells);
+            cells.push(...selectedCells);
             // 已聚焦的单元格在多选模式下选中（暂存上次聚焦的单元格数据）
             const focusCell = this.lastFocusCellPath?.slice(-2);
             if (focusCell) {
                 const focusCells = getCellPositionsBeforeMerge(this.editor, { row: focusCell[0], col: focusCell[1] });
-                result.push(...focusCells);
+                cells.push(...focusCells);
             }
         }
-        this.setSelectedCells(result, pos);
-    }
-    selectedCellsChange() {
-        return this.selectedCells$.asObservable().pipe(skip(1));
-    }
-    cellsPositionChange() {
-        return this.cellsChangeObject$.asObservable();
-    }
-    changeCells() {
-        this.cellsChangeObject$.next();
-    }
-    emitTableChange() {
-        this.tableChange$.next();
-    }
-    tableChange() {
-        return this.tableChange$.asObservable();
-    }
-    clearSelectedCells() {
-        this.selectedColumnsIndex = [];
-        this.selectedRowsIndex = [];
-        this.isSelectedTable = false;
-        this.isCellSelecting = false;
-        this.isRightClicking = false;
-        this.isFocusedInput = false;
-        this.selectedCells$.next([]);
-    }
-    clearLastFocusPath() {
-        this.lastFocusCellPath = null;
-    }
-    // 拖选开始 || 记录聚焦点
-    selectCellStart(cell, editor) {
-        this.isPrepareSelecting = true;
-        const node = AngularEditor.toSlateNode(editor, cell);
-        const path = AngularEditor.findPath(editor, node);
-        this.anchorCellPath = path;
-        this.lastFocusCellPath = path;
-        if (!this.preFocusCellPath) {
-            this.preFocusCellPath = this.anchorCellPath;
-        }
+        this.setSelectedCells(cells, pos);
     }
     selectCellOngoing(cell, editor) {
-        if (AngularEditor.isReadonly(editor)) {
-            return;
-        }
-        if (!editor.selection) {
+        const pos = createTablePosition(editor);
+        if (AngularEditor.isReadonly(editor) || !editor.selection || !pos?.table) {
             return;
         }
         let isChanged;
         if (cell) {
             const node = AngularEditor.toSlateNode(editor, cell);
             const path = AngularEditor.findPath(editor, node);
-            isChanged = !this.focusCellPath || this.focusCellPath.toString() !== path.toString();
+            isChanged = !this.focusCellPath || !Path.equals(this.focusCellPath, path);
             this.focusCellPath = path;
             this.focusCellElement = cell;
         }
         else {
             const selectedCellPositions = this.getSelectedCellPositions();
-            isChanged =
-                !this.focusCellPath ||
-                    (this.focusCellPath.toString() === this.anchorCellPath.toString() && selectedCellPositions.length === 0);
+            isChanged = !this.focusCellPath || (Path.equals(this.focusCellPath, this.anchorCellPath) && selectedCellPositions.length === 0);
         }
         if (this.isPrepareSelecting && isChanged) {
             if (JSON.stringify(this.preFocusCellPath) !== JSON.stringify(this.focusCellPath)) {
@@ -11545,18 +11864,40 @@ class TableStore {
             }
         }
     }
+    clearSelectedCells() {
+        this.selectedColumnsIndex = [];
+        this.selectedRowsIndex = [];
+        this.isSelectedTable = false;
+        this.isCellSelecting = false;
+        this.isRightClicking = false;
+        this.isFocusedInput = false;
+        this.selectedCells$.next([]);
+    }
+    clearLastFocusPath() {
+        this.lastFocusCellPath = null;
+    }
+    selectedCellsChange() {
+        return this.selectedCells$.asObservable().pipe(skip(1));
+    }
+    cellsPositionChange() {
+        return this.cellsChangeObject$.asObservable();
+    }
+    changeCells() {
+        this.cellsChangeObject$.next();
+    }
+    emitTableChange() {
+        this.tableChange$.next();
+    }
+    tableChange() {
+        return this.tableChange$.asObservable();
+    }
     selectCellEnd(editor) {
         if (this.isCellSelecting) {
-            this.focusCell(editor, this.focusCellPath);
+            this.focusCell(this.focusCellPath);
         }
         this.isPrepareSelecting = false;
         this.preFocusCellPath = null;
     }
-    focusCell(editor, path) {
-        const at = Editor.start(editor, path);
-        TheEditor.focus(this.editor);
-        Transforms.select(editor, at);
-    }
     dangerousCellsChange() {
         return this.dangerousCells$.asObservable().pipe(skip(1));
     }
@@ -11628,13 +11969,6 @@ class TableStore {
         this.dangerousColumnsIndex = [...Array(pos.getWidth())].map((_, i) => i);
         this.dangerousCells$.next(cells);
     }
-    selectFirstCell() {
-        const selectedCellPositions = this.getSelectedCellPositions();
-        const { row, col } = selectedCellPositions[0];
-        const tablePath = getTablePath(this.editor);
-        const path = Editor.start(this.editor, [...tablePath, row, col]);
-        Transforms.select(this.editor, path);
-    }
     setSelectedCellsBackgroundColor(backgroundColor) {
         const cells = this.selectedCells$.getValue();
         Editor.withoutNormalizing(this.editor, () => {
@@ -11658,53 +11992,83 @@ class TableStore {
             Transforms.select(this.editor, Editor.start(this.editor, tablePosition.cellEntry[1]));
         }
     }
-    setTableOptions(editor, newOptions) {
-        const tablePosition = createTablePosition(editor);
-        const tablePath = getTablePath(this.editor);
-        const table = tablePosition.table;
-        const options = { ...table.options, ...newOptions };
-        Transforms.setNodes(editor, { options }, { at: tablePath });
+    /**
+     * 聚焦单元格并设置聚焦相关路径及元素
+     */
+    focusCell(path) {
+        const node = Node.get(this.editor, path);
+        const cellHTMLElement = AngularEditor.toDOMNode(this.editor, node);
+        this.preFocusCellPath = this.focusCellPath;
+        this.focusCellPath = path;
+        this.focusCellElement = cellHTMLElement;
+        focusCell(this.editor, path);
     }
-    removeDangerousColumnsOrRows() {
-        const { dangerousRowsIndex, dangerousColumnsIndex } = this;
-        this.removeColumnOrRows(dangerousRowsIndex, dangerousColumnsIndex);
+    /**
+     * 区域选择开始
+     * @param editor 编辑器对象
+     * @param cell 单元格元素
+     */
+    areaSelectionStart(cell, editor) {
+        const node = AngularEditor.toSlateNode(editor, cell);
+        const path = AngularEditor.findPath(editor, node);
+        this.isPrepareSelecting = true;
+        this.lastFocusCellPath = path;
+        if (!this?.anchorCellPath) {
+            this.anchorCellPath = path;
+        }
+        if (!this?.focusCellPath) {
+            this.focusCellPath = path;
+        }
+        if (!this.preFocusCellPath) {
+            this.preFocusCellPath = this.anchorCellPath;
+        }
     }
-    removeColumnOrRows(selectedRowIndexs = this.selectedRowsIndex, selectedColumnIndexs = this.selectedColumnsIndex) {
-        const { isSelectedTable } = this;
-        const tablePosition = createTablePosition(this.editor);
-        if (isSelectedTable) {
-            TableEditor.removeTable(this.editor);
+    /**
+     * 设置区域选择的单元格
+     * @param cellElement 单元格元素
+     */
+    setAreaSelectionCells(cellElement) {
+        if (AngularEditor.isReadonly(this.editor) || !this.editor.selection || !this.isPrepareSelecting) {
             return;
         }
-        const tableComponent = ELEMENT_TO_COMPONENT.get(tablePosition.table);
-        if (selectedRowIndexs.length > 0 && selectedColumnIndexs.length === 0) {
-            // 删除行时取消标题行
-            if (tablePosition.table && tableComponent.headerRow && selectedRowIndexs.includes(0)) {
-                this.setTableOptions(this.editor, { headerRow: false });
-                // headerRow 兼容代码, 取消标题行的时候同时设置 row 中的 header 属性
-                if (tablePosition.table.children[0].header) {
-                    const rowPath = TheEditor.findPath(this.editor, tablePosition.table.children[0]);
-                    Transforms.setNodes(this.editor, { header: null }, { at: rowPath });
-                }
-            }
-            selectedRowIndexs
-                .sort((a, b) => b - a)
-                .forEach(index => {
-                TableEditor.removeRow(this.editor, index);
-            });
-            this.changeCells();
+        const currentCellPath = AngularEditor.findPath(this.editor, cellElement);
+        const selectedCellPositions = this.getSelectedCellPositions();
+        const selectEqual = Path.equals(currentCellPath, this.anchorCellPath);
+        // 不可以区域选择单一单元格
+        if (selectedCellPositions.length <= 1 && selectEqual) {
+            return;
         }
-        if (selectedColumnIndexs.length > 0 && selectedRowIndexs.length === 0) {
-            // 删除列时取消标题列
-            if (tablePosition.table && tablePosition.table.options?.headerColumn && selectedColumnIndexs.includes(0)) {
-                this.setTableOptions(this.editor, { headerColumn: false });
-            }
-            selectedColumnIndexs
-                .sort((a, b) => b - a)
-                .forEach(index => {
-                TableEditor.removeColumn(this.editor, index);
-            });
-            this.changeCells();
+        this.isCellSelecting = true;
+        this.focusCell(currentCellPath);
+        this.selectCells(this.editor);
+    }
+    /**
+     * 处理区域选择启用时选择整行/整列
+     * @param cells 选择的单元格
+     */
+    areaSelectRowAndColumn(cells) {
+        const pos = createTablePosition(this.editor);
+        const [row, col] = this.focusCellPath.slice(-2);
+        const selectCells = [{ row, col }, ...cells];
+        const sortRows = selectCells.map(item => item.row).sort((m, n) => m - n);
+        const sortCols = selectCells.map(item => item.col).sort((m, n) => m - n);
+        const startRow = sortRows[0];
+        const startCol = sortCols[0];
+        const endRow = sortCols[sortCols.length - 1];
+        const endCol = sortRows[sortRows.length - 1];
+        const anchorCellPath = pos.tableEntry[1].concat([endCol, endRow]);
+        const focusCellPath = pos.tableEntry[1].concat([startRow, startCol]);
+        this.setAreaAnchorCellPath(anchorCellPath);
+        this.focusCell(focusCellPath);
+        this.selectCells(this.editor);
+    }
+    /**
+     * 设置区域选择触发时的指定 anchorCellPath
+     * @param path 路径
+     */
+    setAreaAnchorCellPath(path) {
+        if (this.areaSelection && path) {
+            this.anchorCellPath = path;
         }
     }
 }
@@ -11839,7 +12203,10 @@ class TheTableContextMenuService {
                 name: '删除所在行',
                 visibility: true,
                 actionHandle: () => {
-                    this.tableStore.removeDangerousColumnsOrRows();
+                    removeColumnOrRows(this.editor, this.tableStore, {
+                        selectedColumnsIndex: this.tableStore.dangerousColumnsIndex,
+                        selectedRowsIndex: this.tableStore.dangerousRowsIndex
+                    });
                     this.tableStore.clearDangerousCells();
                     this.tableStore.clearSelectedCells();
                 },
@@ -11854,7 +12221,10 @@ class TheTableContextMenuService {
                 name: '删除所在列',
                 visibility: true,
                 actionHandle: () => {
-                    this.tableStore.removeDangerousColumnsOrRows();
+                    removeColumnOrRows(this.editor, this.tableStore, {
+                        selectedColumnsIndex: this.tableStore.dangerousColumnsIndex,
+                        selectedRowsIndex: this.tableStore.dangerousRowsIndex
+                    });
                     this.tableStore.clearDangerousCells();
                     this.tableStore.clearSelectedCells();
                 },
@@ -12013,7 +12383,7 @@ class TheTableOptionsComponent {
         currentOption.isActive = !option.isActive;
         const tableOption = {};
         tableOption[option.key] = currentOption.isActive || false;
-        this.tableStore.setTableOptions(this.editor, { ...tableOption });
+        setTableOptions(this.editor, { ...tableOption });
         // headerRow 兼容代码, 取消标题行的时候同时设置 row 中的 header 属性
         if (option.key === TableOperations.headerRow && !tableOption[option.key] && this.table.children[0].header) {
             const rowPath = TheEditor.findPath(this.editor, this.table.children[0]);
@@ -12022,7 +12392,7 @@ class TheTableOptionsComponent {
     }
 }
 TheTableOptionsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TheTableOptionsComponent, deps: [{ token: i1$1.ThyPopoverRef }], target: i0.ɵɵFactoryTarget.Component });
-TheTableOptionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: TheTableOptionsComponent, selector: "the-table-options", inputs: { tableStore: "tableStore", editor: "editor" }, ngImport: i0, template: `
+TheTableOptionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: TheTableOptionsComponent, selector: "the-table-options", inputs: { editor: "editor" }, ngImport: i0, template: `
         <div class="thy-dropdown-menu table-drop-menu">
             <ng-container *ngFor="let option of tableDropdownList">
                 <a thyDropdownMenuItem href="javascript:;" (mousedown)="setTableOptions($event, option)">
@@ -12051,9 +12421,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
         </div>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: i1$1.ThyPopoverRef }]; }, propDecorators: { tableStore: [{
-                type: Input
-            }], editor: [{
+        }], ctorParameters: function () { return [{ type: i1$1.ThyPopoverRef }]; }, propDecorators: { editor: [{
                 type: Input
             }] } });
 
@@ -12144,7 +12512,7 @@ class TheTableToolbarComponent {
     }
     onDelete(event) {
         event.preventDefault();
-        this.tableStore.removeColumnOrRows();
+        removeColumnOrRows(this.editor, this.tableStore);
         this.tableStore.clearDangerousCells();
         this.tableStore.clearSelectedCells();
         this.popoverRef.close();
@@ -12192,7 +12560,6 @@ class TheTableToolbarComponent {
         this.thyPopover.open(TheTableOptionsComponent, {
             origin: event.currentTarget,
             initialState: {
-                tableStore: this.tableStore,
                 editor: this.editor
             },
             minWidth: 0,
@@ -12209,404 +12576,198 @@ TheTableToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0",
 TheTableToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: TheTableToolbarComponent, selector: "the-table-toolbar", inputs: { tableStore: "tableStore", tableElement: "tableElement" }, ngImport: i0, template: "<thy-actions thySize=\"xxs\">\n  <ng-container *ngFor=\"let item of cellMenuList\">\n    <a\n      *ngIf=\"item.visibility\"\n      href=\"javascript:;\"\n      thyAction\n      [thyActionIcon]=\"item.icon\"\n      [thyTooltip]=\"item.name\"\n      (mousedown)=\"item.actionHandle()\"\n    ></a>\n  </ng-container>\n  <thy-divider *ngIf=\"hasDivider\" class=\"mr-2 ml-1 align-self-center\" [thyVertical]=\"true\"> </thy-divider>\n  <a\n    href=\"javascript:;\"\n    thyAction\n    thyTooltip=\"\u5355\u5143\u683C\u80CC\u666F\"\n    thyColorPicker\n    [(ngModel)]=\"selectedColor\"\n    (ngModelChange)=\"changeColor($event)\"\n    (mousedown)=\"openColorPanel($event)\"\n    thyPlacement=\"bottomLeft\"\n    [thyHasBackdrop]=\"false\"\n  >\n    <thy-icon thyIconName=\"background-tt\" thyIconType=\"twotone\" [thyTwotoneColor]=\"selectedColor\"></thy-icon>\n  </a>\n  <a\n    href=\"javascript:;\"\n    *ngIf=\"tableStore.isSelectedTable && !isColumnEqual\"\n    thyAction\n    thyTooltip=\"\u5217\u7B49\u5BBD\"\n    (mousedown)=\"setEquallyColumnHandle($event)\"\n  >\n    <thy-icon thyIconName=\"table-column-equal-width\"></thy-icon>\n  </a>\n  <a\n    href=\"javascript:;\"\n    *ngIf=\"tableStore.isSelectedTable && tableOptions?.showFullscreen\"\n    thyAction\n    thyTooltip=\"\u5168\u5C4F\"\n    (mousedown)=\"setFullscreen($event)\"\n  >\n    <thy-icon thyIconName=\"arrows-alt\"></thy-icon>\n  </a>\n  <a\n    *ngIf=\"tableStore.isSelectedTable && !tableStore?.isFullscreen\"\n    class=\"fullscreen-hidden\"\n    href=\"javascript:;\"\n    thyAction\n    thyActionIcon=\"copy\"\n    thyTooltip=\"\u590D\u5236\"\n    (mousedown)=\"onCopy($event)\"\n  ></a>\n  <ng-container *ngIf=\"tableStore.isSelectedTable\">\n    <thy-divider class=\"mr-2 ml-1 align-self-center\" [thyVertical]=\"true\"></thy-divider>\n    <a href=\"javascript:;\" class=\"link-with-down\" thyAction (mousedown)=\"mousedown($event)\" (click)=\"openTableOptionMenu($event)\">\n      <span>\u8868\u683C\u9009\u9879</span>\n      <thy-icon class=\"font-size-sm text-desc ml-1\" thyIconName=\"caret-down\"></thy-icon>\n    </a>\n  </ng-container>\n  <ng-container *ngIf=\"tableStore?.isFullscreen ? deleteIcon && !tableStore.isSelectedTable : deleteIcon\">\n    <thy-divider class=\"mr-2 ml-1 align-self-center\" [thyVertical]=\"true\"></thy-divider>\n    <a\n      href=\"javascript:;\"\n      thyAction\n      thyType=\"danger\"\n      [thyActionIcon]=\"deleteIcon\"\n      [thyTooltip]=\"iconName\"\n      (mousedown)=\"onDelete($event)\"\n      (mouseenter)=\"onEnterDelete($event)\"\n      (mouseleave)=\"onLeaveDelete($event)\"\n    ></a>\n  </ng-container>\n</thy-actions>\n", dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.ThyIconComponent, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "directive", type: i8.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { kind: "component", type: i7.ThyActionComponent, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }, { kind: "component", type: i7.ThyActionsComponent, selector: "thy-actions", inputs: ["thySize"] }, { kind: "component", type: i8$1.ThyDividerComponent, selector: "thy-divider", inputs: ["thyVertical", "thyStyle", "thyColor", "thyText", "thyTextDirection", "thyDeeper"] }, { kind: "directive", type: i5.ThyColorPickerDirective, selector: "[thyColorPicker]", inputs: ["thyOffset", "thyHasBackdrop", "thyDefaultColor", "thyTransparentColorSelectable", "thyPresetColors", "thyPlacement", "thyTrigger", "thyShowDelay", "thyHideDelay"], outputs: ["thyPanelOpen", "thyPanelClose"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TheTableToolbarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'the-table-toolbar', template: "<thy-actions thySize=\"xxs\">\n  <ng-container *ngFor=\"let item of cellMenuList\">\n    <a\n      *ngIf=\"item.visibility\"\n      href=\"javascript:;\"\n      thyAction\n      [thyActionIcon]=\"item.icon\"\n      [thyTooltip]=\"item.name\"\n      (mousedown)=\"item.actionHandle()\"\n    ></a>\n  </ng-container>\n  <thy-divider *ngIf=\"hasDivider\" class=\"mr-2 ml-1 align-self-center\" [thyVertical]=\"true\"> </thy-divider>\n  <a\n    href=\"javascript:;\"\n    thyAction\n    thyTooltip=\"\u5355\u5143\u683C\u80CC\u666F\"\n    thyColorPicker\n    [(ngModel)]=\"selectedColor\"\n    (ngModelChange)=\"changeColor($event)\"\n    (mousedown)=\"openColorPanel($event)\"\n    thyPlacement=\"bottomLeft\"\n    [thyHasBackdrop]=\"false\"\n  >\n    <thy-icon thyIconName=\"background-tt\" thyIconType=\"twotone\" [thyTwotoneColor]=\"selectedColor\"></thy-icon>\n  </a>\n  <a\n    href=\"javascript:;\"\n    *ngIf=\"tableStore.isSelectedTable && !isColumnEqual\"\n    thyAction\n    thyTooltip=\"\u5217\u7B49\u5BBD\"\n    (mousedown)=\"setEquallyColumnHandle($event)\"\n  >\n    <thy-icon thyIconName=\"table-column-equal-width\"></thy-icon>\n  </a>\n  <a\n    href=\"javascript:;\"\n    *ngIf=\"tableStore.isSelectedTable && tableOptions?.showFullscreen\"\n    thyAction\n    thyTooltip=\"\u5168\u5C4F\"\n    (mousedown)=\"setFullscreen($event)\"\n  >\n    <thy-icon thyIconName=\"arrows-alt\"></thy-icon>\n  </a>\n  <a\n    *ngIf=\"tableStore.isSelectedTable && !tableStore?.isFullscreen\"\n    class=\"fullscreen-hidden\"\n    href=\"javascript:;\"\n    thyAction\n    thyActionIcon=\"copy\"\n    thyTooltip=\"\u590D\u5236\"\n    (mousedown)=\"onCopy($event)\"\n  ></a>\n  <ng-container *ngIf=\"tableStore.isSelectedTable\">\n    <thy-divider class=\"mr-2 ml-1 align-self-center\" [thyVertical]=\"true\"></thy-divider>\n    <a href=\"javascript:;\" class=\"link-with-down\" thyAction (mousedown)=\"mousedown($event)\" (click)=\"openTableOptionMenu($event)\">\n      <span>\u8868\u683C\u9009\u9879</span>\n      <thy-icon class=\"font-size-sm text-desc ml-1\" thyIconName=\"caret-down\"></thy-icon>\n    </a>\n  </ng-container>\n  <ng-container *ngIf=\"tableStore?.isFullscreen ? deleteIcon && !tableStore.isSelectedTable : deleteIcon\">\n    <thy-divider class=\"mr-2 ml-1 align-self-center\" [thyVertical]=\"true\"></thy-divider>\n    <a\n      href=\"javascript:;\"\n      thyAction\n      thyType=\"danger\"\n      [thyActionIcon]=\"deleteIcon\"\n      [thyTooltip]=\"iconName\"\n      (mousedown)=\"onDelete($event)\"\n      (mouseenter)=\"onEnterDelete($event)\"\n      (mouseleave)=\"onLeaveDelete($event)\"\n    ></a>\n  </ng-container>\n</thy-actions>\n" }]
-        }], ctorParameters: function () { return [{ type: i1$1.ThyPopover }, { type: i1$1.ThyPopoverRef }, { type: i1$2.ThyNotifyService }]; }, propDecorators: { tableStore: [{
-                type: Input
-            }], tableElement: [{
-                type: Input
-            }] } });
-var DeleteIcon;
-(function (DeleteIcon) {
-    DeleteIcon["table-delete-rows"] = "table-delete-rows";
-    DeleteIcon["table-delete-columns"] = "table-delete-columns";
-    DeleteIcon["trash"] = "trash";
-})(DeleteIcon || (DeleteIcon = {}));
-
-class TableService {
-    get isOpened() {
-        return this.toolbarRef && this.toolbarRef.componentInstance;
-    }
-    constructor(thyPopover, overlay, tableStore, theTableContextMenuService, ngZone, theContextService) {
-        this.thyPopover = thyPopover;
-        this.overlay = overlay;
-        this.tableStore = tableStore;
-        this.theTableContextMenuService = theTableContextMenuService;
-        this.ngZone = ngZone;
-        this.theContextService = theContextService;
-        this.backdropClosable = false;
-        this.hasBackdrop = false;
-        this.insideClosable = false;
-        this.placement = 'topLeft';
-        this.offset = 8;
-    }
-    openToolbar(origin, tableElement) {
-        if (this.isOpened) {
-            if (this.toolbarRef.containerInstance.config.origin === origin) {
-                return;
-            }
-            this.toolbarRef.close();
-        }
-        this.toolbarRef = this.thyPopover.open(TheTableToolbarComponent, {
-            initialState: {
-                tableStore: this.tableStore,
-                tableElement
-            },
-            viewContainerRef: this.theContextService.getOptions().viewContainerRef,
-            origin: this.getOrigin(origin),
-            backdropClosable: this.backdropClosable,
-            panelClass: 'the-plugin-toolbar-popover',
-            placement: this.placement,
-            offset: this.offset,
-            hasBackdrop: this.hasBackdrop,
-            insideClosable: this.insideClosable,
-            minWidth: 0,
-            scrollStrategy: this.overlay.scrollStrategies.reposition(),
-            manualClosure: true
-        });
-        if (this.toolbarRef) {
-            this.toolbarRef
-                .getOverlayRef()
-                .outsidePointerEvents()
-                .pipe(skip(1))
-                .subscribe(event => {
-                if (isColorPanel(event.target)) {
-                    return;
-                }
-                if (!this.toolbarRef.getOverlayRef().hostElement.contains(event.target)) {
-                    this.closeToolbar();
-                }
-            });
-        }
-    }
-    afterSelectedCells(origin, element) {
-        this.theTableContextMenuService.closeContextMenu();
-        this.openToolbar(origin, element);
-    }
-    getOrigin(origin) {
-        if (origin instanceof HTMLTableCellElement && origin.tagName !== 'TH') {
-            const { selectedRowsIndex, selectedColumnsIndex, focusCellPath, isSelectedTable, focusCellElement } = this.tableStore;
-            const [row, col] = focusCellPath.slice(-2);
-            const tableElement = focusCellElement.closest('.the-table-container');
-            if (isSelectedTable && col === 0 && row === 0) {
-                return tableElement.querySelector('.the-table-corner-controls');
-            }
-            if (selectedColumnsIndex.length > 0 && row === 0) {
-                return tableElement.querySelectorAll('.the-table-col-controls')[col];
-            }
-            if (selectedRowsIndex.length > 0 && col === 0) {
-                return tableElement.querySelectorAll('.the-table-row-controls-button-wrap')[row];
-            }
-        }
-        return origin;
-    }
-    closeToolbar() {
-        if (this.isOpened) {
-            this.ngZone.run(() => {
-                this.toolbarRef.close();
-            });
-            return this.toolbarRef.afterClosed();
-        }
-    }
-}
-TableService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TableService, deps: [{ token: i1$1.ThyPopover }, { token: i2$1.Overlay }, { token: TableStore }, { token: TheTableContextMenuService }, { token: i0.NgZone }, { token: TheContextService }], target: i0.ɵɵFactoryTarget.Injectable });
-TableService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TableService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TableService, decorators: [{
-            type: Injectable
-        }], ctorParameters: function () { return [{ type: i1$1.ThyPopover }, { type: i2$1.Overlay }, { type: TableStore }, { type: TheTableContextMenuService }, { type: i0.NgZone }, { type: TheContextService }]; } });
-
-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;
-}
-
-class TableFreezeColumnPipe {
-    transform(table, tablePluginOptions) {
-        const rows = table.children?.map(item => item.children);
-        const headerColumnWidth = table.columns && table.columns[0].width;
-        const tableComponent = ELEMENT_TO_COMPONENT.get(table);
-        let stickyColumn = true;
-        let buffer = TABLE_CONTROL;
-        if (table.options?.numberedColumn) {
-            buffer = TABLE_NUMBER_COLUMN + TABLE_CONTROL;
-        }
-        if (tableComponent) {
-            const tableWidth = getElementWidth(tableComponent.elementRef.nativeElement);
-            stickyColumn = headerColumnWidth + buffer < tableWidth;
-        }
-        // 标题列存在合并的列时，取消冻结
-        const mergeColumnCells = rows && rows.map(cells => cells[0]).filter(item => item.colspan && item.colspan !== 1);
-        return !!(tablePluginOptions?.freezeColumnHeader && table.options?.headerColumn && !mergeColumnCells.length && stickyColumn);
-    }
-}
-TableFreezeColumnPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TableFreezeColumnPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-TableFreezeColumnPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: TableFreezeColumnPipe, name: "freezeColumn" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TableFreezeColumnPipe, decorators: [{
-            type: Pipe,
-            args: [{ name: 'freezeColumn' }]
-        }] });
-class TableFreezeRowPipe {
-    transform(table, headerRow, tablePluginOptions) {
-        // 标题行存在合并的行时，取消冻结
-        if (table.children) {
-            const mergeRows = table.children[0]?.children.filter(item => item.rowspan && item.rowspan !== 1);
-            return !!(headerRow && !mergeRows.length && tablePluginOptions?.freezeRowHeader);
-        }
-        return false;
-    }
-}
-TableFreezeRowPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TableFreezeRowPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-TableFreezeRowPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: TableFreezeRowPipe, name: "freezeRow" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TableFreezeRowPipe, decorators: [{
-            type: Pipe,
-            args: [{ name: 'freezeRow' }]
-        }] });
-
-/**
- * 获取标题行网格列宽值
- * @param editor
- * @param headerRow 标题行
- * @param cellsWidth
- * @returns string
- */
-const getGridColumns = (headerRow, cellsWidth) => {
-    let result = '';
-    Array.from(headerRow.childNodes)
-        .filter((n) => n.nodeType === 1)
-        .forEach((node, i) => {
-        const col = node.getAttribute('colspan');
-        const display = node.style.display;
-        if (display === 'none') {
-            return;
-        }
-        if (col) {
-            const colSpan = Number(col) ?? 1;
-            let width = 0;
-            Array.from({ length: colSpan }, (_, j) => {
-                width += cellsWidth[i + j];
-            });
-            result += width + 'px ';
-        }
-        else {
-            result += cellsWidth[i] + 'px ';
-        }
-    });
-    return result;
-};
-const getColumnsWidth = (cellRow, isColgroup = false) => {
-    const result = [];
-    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]
-    }));
-};
-
-/**
- * 计算最小行跨距单元格
- * @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
-            };
+            args: [{ selector: 'the-table-toolbar', template: "<thy-actions thySize=\"xxs\">\n  <ng-container *ngFor=\"let item of cellMenuList\">\n    <a\n      *ngIf=\"item.visibility\"\n      href=\"javascript:;\"\n      thyAction\n      [thyActionIcon]=\"item.icon\"\n      [thyTooltip]=\"item.name\"\n      (mousedown)=\"item.actionHandle()\"\n    ></a>\n  </ng-container>\n  <thy-divider *ngIf=\"hasDivider\" class=\"mr-2 ml-1 align-self-center\" [thyVertical]=\"true\"> </thy-divider>\n  <a\n    href=\"javascript:;\"\n    thyAction\n    thyTooltip=\"\u5355\u5143\u683C\u80CC\u666F\"\n    thyColorPicker\n    [(ngModel)]=\"selectedColor\"\n    (ngModelChange)=\"changeColor($event)\"\n    (mousedown)=\"openColorPanel($event)\"\n    thyPlacement=\"bottomLeft\"\n    [thyHasBackdrop]=\"false\"\n  >\n    <thy-icon thyIconName=\"background-tt\" thyIconType=\"twotone\" [thyTwotoneColor]=\"selectedColor\"></thy-icon>\n  </a>\n  <a\n    href=\"javascript:;\"\n    *ngIf=\"tableStore.isSelectedTable && !isColumnEqual\"\n    thyAction\n    thyTooltip=\"\u5217\u7B49\u5BBD\"\n    (mousedown)=\"setEquallyColumnHandle($event)\"\n  >\n    <thy-icon thyIconName=\"table-column-equal-width\"></thy-icon>\n  </a>\n  <a\n    href=\"javascript:;\"\n    *ngIf=\"tableStore.isSelectedTable && tableOptions?.showFullscreen\"\n    thyAction\n    thyTooltip=\"\u5168\u5C4F\"\n    (mousedown)=\"setFullscreen($event)\"\n  >\n    <thy-icon thyIconName=\"arrows-alt\"></thy-icon>\n  </a>\n  <a\n    *ngIf=\"tableStore.isSelectedTable && !tableStore?.isFullscreen\"\n    class=\"fullscreen-hidden\"\n    href=\"javascript:;\"\n    thyAction\n    thyActionIcon=\"copy\"\n    thyTooltip=\"\u590D\u5236\"\n    (mousedown)=\"onCopy($event)\"\n  ></a>\n  <ng-container *ngIf=\"tableStore.isSelectedTable\">\n    <thy-divider class=\"mr-2 ml-1 align-self-center\" [thyVertical]=\"true\"></thy-divider>\n    <a href=\"javascript:;\" class=\"link-with-down\" thyAction (mousedown)=\"mousedown($event)\" (click)=\"openTableOptionMenu($event)\">\n      <span>\u8868\u683C\u9009\u9879</span>\n      <thy-icon class=\"font-size-sm text-desc ml-1\" thyIconName=\"caret-down\"></thy-icon>\n    </a>\n  </ng-container>\n  <ng-container *ngIf=\"tableStore?.isFullscreen ? deleteIcon && !tableStore.isSelectedTable : deleteIcon\">\n    <thy-divider class=\"mr-2 ml-1 align-self-center\" [thyVertical]=\"true\"></thy-divider>\n    <a\n      href=\"javascript:;\"\n      thyAction\n      thyType=\"danger\"\n      [thyActionIcon]=\"deleteIcon\"\n      [thyTooltip]=\"iconName\"\n      (mousedown)=\"onDelete($event)\"\n      (mouseenter)=\"onEnterDelete($event)\"\n      (mouseleave)=\"onLeaveDelete($event)\"\n    ></a>\n  </ng-container>\n</thy-actions>\n" }]
+        }], ctorParameters: function () { return [{ type: i1$1.ThyPopover }, { type: i1$1.ThyPopoverRef }, { type: i1$2.ThyNotifyService }]; }, propDecorators: { tableStore: [{
+                type: Input
+            }], tableElement: [{
+                type: Input
+            }] } });
+var DeleteIcon;
+(function (DeleteIcon) {
+    DeleteIcon["table-delete-rows"] = "table-delete-rows";
+    DeleteIcon["table-delete-columns"] = "table-delete-columns";
+    DeleteIcon["trash"] = "trash";
+})(DeleteIcon || (DeleteIcon = {}));
+
+class TableService {
+    get isOpened() {
+        return this.toolbarRef && this.toolbarRef.componentInstance;
+    }
+    constructor(thyPopover, overlay, tableStore, ngZone, theContextService) {
+        this.thyPopover = thyPopover;
+        this.overlay = overlay;
+        this.tableStore = tableStore;
+        this.ngZone = ngZone;
+        this.theContextService = theContextService;
+        this.backdropClosable = false;
+        this.hasBackdrop = false;
+        this.insideClosable = false;
+        this.placement = 'topLeft';
+        this.offset = 8;
+    }
+    openToolbar(origin, tableElement) {
+        if (this.isOpened) {
+            if (this.toolbarRef.containerInstance.config.origin === origin) {
+                return;
+            }
+            this.toolbarRef.close();
         }
-    });
-    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;
+        this.toolbarRef = this.thyPopover.open(TheTableToolbarComponent, {
+            initialState: {
+                tableStore: this.tableStore,
+                tableElement
+            },
+            viewContainerRef: this.theContextService.getOptions().viewContainerRef,
+            origin: this.getOrigin(origin),
+            backdropClosable: this.backdropClosable,
+            panelClass: 'the-plugin-toolbar-popover',
+            placement: this.placement,
+            offset: this.offset,
+            hasBackdrop: this.hasBackdrop,
+            insideClosable: this.insideClosable,
+            minWidth: 0,
+            scrollStrategy: this.overlay.scrollStrategies.reposition(),
+            manualClosure: true
+        });
+        if (this.toolbarRef) {
+            this.toolbarRef
+                .getOverlayRef()
+                .outsidePointerEvents()
+                .pipe(skip(1))
+                .subscribe(event => {
+                if (isColorPanel(event.target)) {
+                    return;
+                }
+                if (!this.toolbarRef.getOverlayRef().hostElement.contains(event.target)) {
+                    this.closeToolbar();
+                }
+            });
         }
-        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;
+    }
+    afterSelectedCells(origin, element) {
+        this.openToolbar(origin, element);
+    }
+    getOrigin(origin) {
+        if (origin instanceof HTMLTableCellElement && origin.tagName !== 'TH') {
+            const { selectedRowsIndex, selectedColumnsIndex, focusCellPath, isSelectedTable, focusCellElement } = this.tableStore;
+            const [row, col] = focusCellPath.slice(-2);
+            const tableElement = focusCellElement.closest('.the-table-container');
+            if (isSelectedTable && col === 0 && row === 0) {
+                return tableElement.querySelector('.the-table-corner-controls');
             }
-            else {
-                belowRowlHeight += getElementHeight(cellDom);
+            if (selectedColumnsIndex.length > 0 && row === 0) {
+                return tableElement.querySelectorAll('.the-table-col-controls')[col];
+            }
+            if (selectedRowsIndex.length > 0 && col === 0) {
+                return tableElement.querySelectorAll('.the-table-row-controls-button-wrap')[row];
             }
         }
-    });
-    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
+        return origin;
+    }
+    closeToolbar() {
+        if (this.isOpened) {
+            this.ngZone.run(() => {
+                this.toolbarRef.close();
             });
-            previousCombineRowIndex = index;
-            if (index === minRowSpanCellForRows.length - 1) {
-                calculateRowControlsAvgHeight(previousCombineRowIndex, previousRowIndex, rowControls);
-            }
-            return;
+            return this.toolbarRef.afterClosed();
         }
-        // calculate combine row height
-        if (previousCombineRowIndex > previousRowIndex) {
-            calculateRowControlsAvgHeight(previousCombineRowIndex, previousRowIndex, rowControls);
-            previousCombineRowIndex = 0;
+    }
+    /**
+     * 判断是否触发了点选，并处理点选状态
+     * @param e 事件对象
+     * @param tbody tbody元素
+     */
+    handleKeydownForPointerSelection(e, tbody) {
+        const cell = tbody?.querySelector('.focused-cell') || this.tableStore.focusCellElement;
+        if (cell) {
+            this.tableStore.pointerSelection = true;
+            this.tableStore.selectCellStart(cell, this.tableStore.editor);
         }
-        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
-            });
+    }
+    /**
+     * 判断是否触发了区域选择，并处理区域选择状态
+     * @param e 事件对象
+     * @param tbody tbody元素
+     */
+    handleKeydownForAreaSelection(e, tbody) {
+        const isTable = TableEditor.isActive(this.tableStore.editor);
+        const cell = tbody?.querySelector('.focused-cell') || this.tableStore.focusCellElement;
+        if (isTable && cell) {
+            this.tableStore.areaSelectionStart(cell, this.tableStore.editor);
+            this.tableStore.areaSelection = true;
         }
-        else {
-            rowControls.push({
-                height,
-                rowIndex: cellInfo.rowIndex
-            });
+    }
+    cancelPointerSelection() {
+        if (this.tableStore.pointerSelection) {
+            this.tableStore.pointerSelection = false;
         }
-        previousRowIndex = index;
-    });
-    return rowControls;
-};
+    }
+    cancelAreaSelection() {
+        if (this.tableStore.areaSelection) {
+            this.tableStore.areaSelection = false;
+            this.tableStore.selectCellEnd(this.tableStore.editor);
+        }
+    }
+    /**
+     * 进行区域选择时，阻止默认的选区事件
+     * @param e 事件对象
+     * @param editor 编辑器对象
+     */
+    selectStartPreventDefault(e) {
+        const isReadonly = AngularEditor.isReadonly(this.tableStore.editor);
+        const cells = this.tableStore.getSelectedCellPositions();
+        if (!isReadonly && this.tableStore.areaSelection && cells.length > 1) {
+            e.preventDefault();
+        }
+    }
+}
+TableService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TableService, deps: [{ token: i1$1.ThyPopover }, { token: i2$1.Overlay }, { token: TableStore }, { token: i0.NgZone }, { token: TheContextService }], target: i0.ɵɵFactoryTarget.Injectable });
+TableService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TableService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TableService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i1$1.ThyPopover }, { type: i2$1.Overlay }, { type: TableStore }, { type: i0.NgZone }, { type: TheContextService }]; } });
 
-/**
- * compatible with old data
- * @returns
- */
-function isHeaderRow(element) {
-    if (element?.options?.headerRow) {
-        return true;
+class TableFreezeColumnPipe {
+    transform(table, tablePluginOptions) {
+        const rows = table.children?.map(item => item.children);
+        const headerColumnWidth = table.columns && table.columns[0].width;
+        const tableComponent = ELEMENT_TO_COMPONENT.get(table);
+        let stickyColumn = true;
+        let buffer = TABLE_CONTROL;
+        if (table.options?.numberedColumn) {
+            buffer = TABLE_NUMBER_COLUMN + TABLE_CONTROL;
+        }
+        if (tableComponent) {
+            const tableWidth = getElementWidth(tableComponent.elementRef.nativeElement);
+            stickyColumn = headerColumnWidth + buffer < tableWidth;
+        }
+        // 标题列存在合并的列时，取消冻结
+        const mergeColumnCells = rows && rows.map(cells => cells[0]).filter(item => item.colspan && item.colspan !== 1);
+        return !!(tablePluginOptions?.freezeColumnHeader && table.options?.headerColumn && !mergeColumnCells.length && stickyColumn);
     }
-    // compat old data
-    if (element?.children[0].header) {
-        return true;
+}
+TableFreezeColumnPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TableFreezeColumnPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+TableFreezeColumnPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: TableFreezeColumnPipe, name: "freezeColumn" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TableFreezeColumnPipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'freezeColumn' }]
+        }] });
+class TableFreezeRowPipe {
+    transform(table, headerRow, tablePluginOptions) {
+        // 标题行存在合并的行时，取消冻结
+        if (table.children) {
+            const mergeRows = table.children[0]?.children.filter(item => item.rowspan && item.rowspan !== 1);
+            return !!(headerRow && !mergeRows.length && tablePluginOptions?.freezeRowHeader);
+        }
+        return false;
     }
 }
+TableFreezeRowPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TableFreezeRowPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+TableFreezeRowPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: TableFreezeRowPipe, name: "freezeRow" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TableFreezeRowPipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'freezeRow' }]
+        }] });
 
 const TABLE_SELECTOR = '.the-table';
 const TABLE_WRAPPER_SELECTOR = '.the-table-wrapper';
@@ -12676,6 +12837,10 @@ class TheColumnResizeDirective {
         merge(this.resizeNotifier.resizeCanceled, this.resizeNotifier.resizeCompleted)
             .pipe(takeUntil(this.destroyed))
             .subscribe(() => {
+            // 如果没有进行拖拽就不要进行后续表格宽高计算了
+            if (!this.resizeStarted) {
+                return;
+            }
             this.resizeStarted = false;
             if (this.position === Position.left || this.position === Position.right) {
                 this.theTableComponent.transformColumnsWidth();
@@ -12907,8 +13072,10 @@ class TheTableComponent extends TheBaseElementComponent {
             this.subscribeCellPositionChange();
             this.listenTableContextMenuEvent();
             this.listenOnSelectedCells();
-            this.listenKeydownSelectEvents();
+            this.listenKeydownEvent();
+            this.listenKeyupEvent();
             this.listenTableWrapperScroll();
+            this.listenSelectstartEvent();
             this.getColumnGroups();
             this.bindTableScrollingShadow();
             if (this.element.options?.numberedColumn) {
@@ -13405,7 +13572,7 @@ class TheTableComponent extends TheBaseElementComponent {
                 this.tableStore.clearSelectedCellsContent();
             }
             const isCurrentTableElement = this.nativeElement.contains(e.target);
-            if (!isCurrentTableElement || !this.tableStore.pointerSelection) {
+            if (!isCurrentTableElement || (!this.tableStore.pointerSelection && !this.tableStore.areaSelection)) {
                 this.tableStore.clearSelectedCells();
             }
             if (!isCurrentTableElement) {
@@ -13414,21 +13581,36 @@ class TheTableComponent extends TheBaseElementComponent {
             this.theTableContextMenuService.closeContextMenu();
         });
     }
-    listenKeydownSelectEvents() {
+    listenKeydownEvent() {
         this.ngZone.runOutsideAngular(() => {
             fromEvent(document, 'keydown')
                 .pipe(takeUntil(this.destroy$), filter((e) => !!e))
                 .subscribe((event) => {
-                if (isKeyHotkey('mod', event) && !this.readonly) {
-                    this.tableStore.pointerSelection = true;
-                    const cell = this.tbodyElement.nativeElement.querySelector('.focused-cell');
-                    cell && this.tableStore.selectCellStart(cell, this.editor);
+                if (!this.readonly && isKeyHotkey('mod', event)) {
+                    this.tableService.handleKeydownForPointerSelection(event, this.tbodyNativeElement);
+                }
+                if (!this.readonly && isKeyHotkey('shift', event)) {
+                    this.tableService.handleKeydownForAreaSelection(event, this.tbodyNativeElement);
                 }
             });
+        });
+    }
+    listenKeyupEvent() {
+        this.ngZone.runOutsideAngular(() => {
             fromEvent(document, 'keyup')
                 .pipe(takeUntil(this.destroy$), filter((e) => !!e))
                 .subscribe(() => {
-                this.tableStore.pointerSelection = false;
+                this.tableService.cancelPointerSelection();
+                this.tableService.cancelAreaSelection();
+            });
+        });
+    }
+    listenSelectstartEvent() {
+        this.ngZone.runOutsideAngular(() => {
+            fromEvent(document, 'selectstart')
+                .pipe(takeUntil(this.destroy$))
+                .subscribe((event) => {
+                this.tableService.selectStartPreventDefault(event);
             });
         });
     }
@@ -14039,19 +14221,19 @@ const POSITION_MAP = {
 };
 class TheTdComponent extends TheBaseElementComponent {
     get tableStore() {
-        return this.tableComponent.tableStore;
+        return this.tableComponent?.tableStore;
     }
     get tableService() {
-        return this.tableComponent.tableService;
+        return this.tableComponent?.tableService;
     }
     get eventDispatcher() {
-        return this.tableComponent.eventDispatcher;
+        return this.tableComponent?.eventDispatcher;
     }
     get resizeNotifier() {
-        return this.tableComponent.resizeNotifier;
+        return this.tableComponent?.resizeNotifier;
     }
     get tableElement() {
-        return this.tableComponent.theTableElement.nativeElement;
+        return this.tableComponent?.theTableElement?.nativeElement;
     }
     get scrollableElementTop() {
         const containerElement = this.elementRef.nativeElement.closest(this.editor.options?.scrollContainer || DEFAULT_SCROLL_CONTAINER);
@@ -14071,7 +14253,7 @@ class TheTdComponent extends TheBaseElementComponent {
         return this.tableComponent.tableWrapper.nativeElement.scrollLeft;
     }
     get isXAxisHover() {
-        return [Position.left, Position.right].includes(this.hoverdDirection);
+        return [Position.left, Position.right].includes(this.hoveredDirection);
     }
     get rowResizeClass() {
         return [
@@ -14103,11 +14285,7 @@ class TheTdComponent extends TheBaseElementComponent {
     }
     ngOnInit() {
         super.ngOnInit();
-        this.useBackground();
-        this.useSpan();
-        this.useDisplay();
-        this.useFocus();
-        useElementStyle(this.elementRef.nativeElement, this.element);
+        this.useState();
     }
     ngAfterViewInit() {
         this.ngZone.onStable.pipe(take(1)).subscribe(() => {
@@ -14220,16 +14398,22 @@ class TheTdComponent extends TheBaseElementComponent {
             fromEvent(element, 'mousedown')
                 .pipe(takeUntil(this.destroy$), filter((e) => e.button !== 2), map$1(event => event.target.closest(SLA_TABLE_CELL_SELECTOR)), filter(cell => !!cell))
                 .subscribe((cell) => {
-                // 点选
-                if (this.tableStore.pointerSelection) {
-                    this.tableStore.selectCell(cell, this.editor);
-                }
-                this.tableStore.selectCellStart(cell, this.editor);
-                if (this.overlayRef) {
-                    this.overlayRef.detach();
+                if (!this.readonly) {
+                    if (this.tableStore.pointerSelection) {
+                        this.tableStore.selectCell(cell, this.editor);
+                    }
+                    if (this.tableStore.areaSelection) {
+                        this.tableStore.setAreaSelectionCells(this.element);
+                    }
+                    else {
+                        this.tableStore.selectCellStart(cell, this.editor);
+                    }
+                    if (this.overlayRef) {
+                        this.overlayRef.detach();
+                    }
+                    // 拖选
+                    this.listenCellMouseEvents();
                 }
-                // 拖选
-                this.listenCellMouseEvents();
             });
         });
     }
@@ -14245,14 +14429,16 @@ class TheTdComponent extends TheBaseElementComponent {
             this.tableStore.selectCellOngoing(cell, this.editor);
         });
         fromEvent(document, 'mouseup')
-            .pipe(take(1))
+            .pipe(take(1), takeUntil(this.destroy$))
             .subscribe(() => {
-            this.tableStore.selectCellEnd(this.editor);
             if (this.tableStore.isCellSelecting || this.tableStore.pointerSelection) {
                 this.ngZone.run(() => {
                     this.tableComponent.tableService.afterSelectedCells(this.tableStore.focusCellElement, this.tableComponent.element);
                 });
             }
+            if (!this.tableStore.areaSelection) {
+                this.tableStore.selectCellEnd(this.editor);
+            }
             mouseoverObservable.unsubscribe();
         });
     }
@@ -14274,13 +14460,13 @@ class TheTdComponent extends TheBaseElementComponent {
         }))
             .subscribe(hoveredCellInfo => {
             if (hoveredCellInfo && hoveredCellInfo.position) {
-                this.hoverdDirection = hoveredCellInfo.position;
+                this.hoveredDirection = hoveredCellInfo.position;
             }
             else {
-                this.hoverdDirection = null;
+                this.hoveredDirection = null;
             }
             if (hoveredCellInfo) {
-                this.hoverdDirection = hoveredCellInfo.position;
+                this.hoveredDirection = hoveredCellInfo.position;
                 if (!this.overlayRef || !this.overlayRef.hasAttached()) {
                     this.overlayRef = this._createOverlayForHandle();
                     this._showHandleOverlay();
@@ -14300,16 +14486,20 @@ class TheTdComponent extends TheBaseElementComponent {
         merge(this.resizeNotifier.resizeCanceled, this.resizeNotifier.triggerResize)
             .pipe(takeUntilDestroyed, filter(columnSize => columnSize.tableCell === this.elementRef.nativeElement))
             .subscribe(({ deltaSize, previousSize, completeImmediately }) => {
+            // 如果偏移的值不存在就不要进行后续的计算了
+            if (isUndefined(deltaSize) || isUndefined(previousSize)) {
+                return;
+            }
             const { top, left, height, width } = this.elementRef.nativeElement.getBoundingClientRect();
             const { clientY, clientX } = event;
             let isPreventApplySize = false;
             // 向下，或者向右移动(deltaSize > 0)，鼠标位置不在当前单元格拖拽线上，阻止应用拖拽尺寸
             if (this.isXAxisHover) {
-                const cellWidth = this.hoverdDirection === Position.left ? 0 : width;
+                const cellWidth = this.hoveredDirection === Position.left ? 0 : width;
                 isPreventApplySize = deltaSize > 0 && left + cellWidth - clientX > 0;
             }
             else {
-                const cellHeight = this.hoverdDirection === Position.top ? 0 : height;
+                const cellHeight = this.hoveredDirection === Position.top ? 0 : height;
                 isPreventApplySize = deltaSize > 0 && top + cellHeight - clientY > 0;
             }
             if (isPreventApplySize) {
@@ -14358,7 +14548,7 @@ class TheTdComponent extends TheBaseElementComponent {
         this.isXAxisHover ? this.updateOverlayHandleColumnSize() : this.updateOverlayHandleRowSize();
         this.overlayRef?.updatePositionStrategy(this.createPositionStrategy());
         this.resizeRef.setDirection(this.isXAxisHover ? 'X' : 'Y');
-        this.resizeRef.setPosition(this.hoverdDirection);
+        this.resizeRef.setPosition(this.hoveredDirection);
     }
     updateOverlayHandleColumnSize() {
         let height = 0;
@@ -14433,8 +14623,8 @@ class TheTdComponent extends TheBaseElementComponent {
         let offsetY = this.calculateOverlayHandleOffsetY();
         let offsetX = this.calculateOverlayHandleOffsetX();
         const position = this.isXAxisHover
-            ? { ...POSITION_MAP[this.hoverdDirection], offsetY }
-            : { ...POSITION_MAP[this.hoverdDirection], offsetX };
+            ? { ...POSITION_MAP[this.hoveredDirection], offsetY }
+            : { ...POSITION_MAP[this.hoveredDirection], offsetX };
         return this.overlay
             .position()
             .flexibleConnectedTo(this.elementRef.nativeElement)
@@ -14470,7 +14660,7 @@ class TheTdComponent extends TheBaseElementComponent {
         this.resizingStore.storeTableWidth(cols);
         this.resizingStore.initDirection(deltaX);
         let cellIndex = this.elementRef.nativeElement.cellIndex;
-        if (this.hoverdDirection === 'left') {
+        if (this.hoveredDirection === 'left') {
             cellIndex = cellIndex - 1;
         }
         const colspan = this.elementRef.nativeElement.getAttribute('colspan') || 1;
@@ -14564,7 +14754,7 @@ class TheTdComponent extends TheBaseElementComponent {
         this.resizingStore.storeTableHeight(rows);
         this.resizingStore.initDirection(deltaY, this.isXAxisHover);
         let rowIndex = this.elementRef.nativeElement.parentElement.rowIndex - 1; // subtract thead's tr
-        if (this.hoverdDirection === Position.top) {
+        if (this.hoveredDirection === Position.top) {
             rowIndex = rowIndex - 1;
         }
         const rowSpan = this.elementRef.nativeElement.rowSpan;
@@ -16432,5 +16622,5 @@ const withTestPlugin = (plugins, initValue) => {
  * Generated bundle index. Do not edit.
  */
 
-export { ALIGN_BLOCK_TYPES, A_TAG_REL_ATTR, AlignEditor, Alignment, BLOCK_DELETE_BACKWARD_TYPES, BlockquoteEditor, CLIPBOARD_FORMAT_KEY, CODEMIRROR_PADDING_TOP, CODE_MODES, COMPONENTS, CONTAINER_BLOCKS, CONTROL_KEY, CodeEditor, ColorEditor, ColumnResizeNotifierSource, DEFAULT_LANGUAGE, DEFAULT_SCROLL_CONTAINER, DISABLED_OPERATE_TYPES, DefaultElementOptions, DefaultGlobalToolbarDefinition, DefaultInlineToolbarDefinition, DefaultPluginMenu, DropdownMode, ELEMENT_UNIQUE_ID, ElementKinds, ErrorCodes, FontSizeTypes, FontSizes, HEADING_TYPES, HeadingEditor, HoveredCellInfo, HrEditor, IS_MAC, ImageEditor, IndentEditor, Indents, InlineCodeEditor, LINK_DEFAULT_TEXT, LIST_BLOCK_TYPES, LayoutTypes, LinkEditor, ListEditor, MarkEditor, MarkProps, MarkTypes, MentionEditor, PICTURE_ACCEPTED_UPLOAD_MIME, PICTURE_ACCEPTED_UPLOAD_SIZE, PLUGIN_COMPONENTS, PluginKeys, PluginMenuIcons, PluginMenuSvgs, Position, QuickInsertEditor, STANDARD_HEADING_TYPES, ScrollDirection, SpecialBackgroundColor, TAB_SPACE, THE_EDITOR_CONVERSION_HINT_REF, THE_EDITOR_ORIGIN_ANCHOR, THE_EDITOR_POPOVER_REF, THE_EDITOR_PREVIOUS_SELECTION, THE_EDITOR_UUID, THE_INLINE_TOOLBAR_TYPES, THE_LISTBOX_PARENT_GROUP_TOKEN, THE_LISTBOX_PARENT_OPTION_TOKEN, THE_LISTBOX_TOKEN, THE_MODE_PROVIDER, THE_MODE_TOKEN, THE_PLUGIN_MENU_REF, THE_UPLOAD_SERVICE_TOKEN, TableCellEventDispatcher, TableEditor, TableHeaderBackgroundColor, TheBaseElementComponent, TheBaseSuggestion, TheBaseToolbarDropdown, TheBaseToolbarItem, TheContextService, TheDataMode, TheDefaultElementComponent, TheEditor, TheEditorComponent, TheEditorModule, TheImageComponent, TheListboxDirective, TheListboxGroupDirective, TheListboxOptionDirective, TheMode, TheModeConfig, ThePluginMenu, ThePluginMenuComponent, ThePluginMenuItemType, ThePreventDefaultDirective, index$1 as TheQueries, TheToolbarComponent, TheToolbarDropdownComponent, TheToolbarGroupComponent, TheToolbarGroupToken, TheToolbarItemComponent, TheToolbarService, index as TheTransforms, TodoItemEditor, ToolbarActionTypes, ToolbarAlignment, ToolbarItemType, ToolbarMoreGroup, VOID_BLOCK_TYPES, VerticalAlignEditor, VerticalAlignment, ZERO_WIDTH_CHAR, autoFocus, base64toBlob, buildPluginMenu, buildPluginMenuItemMap, coercePixelsFromCssValue, combinePlugins, copyNode, copyNodeForSafari, createEmptyParagraph, createMentionPlugin, createPluginFactory, createToolbar, createVerticalAlignPlugin, dataDeserialize, dataSerializing, deleteElementKey, extractFragment, filterTextFormat, flattenDeepPlugins, getColsTotalWidth, getEditorUUID, getElementClassByPrefix, getElementHeight, getElementWidth, getEndBlock, getPlugin, getPluginOptions, getPlugins, getRowsTotalHeight, getStartBlock, getToolbarClass, headingOptions, htmlToTheia, idCreator, inValidTypes, initializeDefaultMenuIcons, insertDataByInvalidType, internalPlugins, isCleanEmptyParagraph, isDirectionKeydown, isPureEmptyParagraph, mergeArray, mergeDeepPlugins, mergeElementOptions, mergeOptions, nestedStructureByKey, plainToTheia, pluginsByKey, reSelection, recursionNodes, refocus, scrollIntoView, setEditorUUID, useElementStyle, withMention, withTestPlugin, withTheia };
+export { ALIGN_BLOCK_TYPES, A_TAG_REL_ATTR, AlignEditor, Alignment, BLOCK_DELETE_BACKWARD_TYPES, BlockquoteEditor, CLIPBOARD_FORMAT_KEY, CODEMIRROR_PADDING_TOP, CODE_MODES, COMPONENTS, CONTAINER_BLOCKS, CONTROL_KEY, CodeEditor, ColorEditor, ColumnResizeNotifierSource, DEFAULT_LANGUAGE, DEFAULT_SCROLL_CONTAINER, DISABLED_OPERATE_TYPES, DefaultElementOptions, DefaultGlobalToolbarDefinition, DefaultInlineToolbarDefinition, DefaultPluginMenu, DropdownMode, ELEMENT_UNIQUE_ID, ElementKinds, ErrorCodes, FontSizeTypes, FontSizes, HEADING_TYPES, HeadingEditor, HoveredCellInfo, HrEditor, IS_MAC, ImageEditor, IndentEditor, Indents, InlineCodeEditor, LINK_DEFAULT_TEXT, LIST_BLOCK_TYPES, LayoutTypes, LinkEditor, ListEditor, MarkEditor, MarkProps, MarkTypes, MentionEditor, PICTURE_ACCEPTED_UPLOAD_MIME, PICTURE_ACCEPTED_UPLOAD_SIZE, PLUGIN_COMPONENTS, PluginKeys, PluginMenuIcons, PluginMenuSvgs, Position, QuickInsertEditor, STANDARD_HEADING_TYPES, ScrollDirection, SpecialBackgroundColor, TAB_SPACE, THE_EDITOR_CONVERSION_HINT_REF, THE_EDITOR_ORIGIN_ANCHOR, THE_EDITOR_POPOVER_REF, THE_EDITOR_PREVIOUS_SELECTION, THE_EDITOR_UUID, THE_INLINE_TOOLBAR_TYPES, THE_LISTBOX_PARENT_GROUP_TOKEN, THE_LISTBOX_PARENT_OPTION_TOKEN, THE_LISTBOX_TOKEN, THE_MODE_PROVIDER, THE_MODE_TOKEN, THE_PLUGIN_MENU_REF, THE_UPLOAD_SERVICE_TOKEN, TableCellEventDispatcher, TableEditor, TableHeaderBackgroundColor, TheBaseElementComponent, TheBaseSuggestion, TheBaseToolbarDropdown, TheBaseToolbarItem, TheContextService, TheDataMode, TheDefaultElementComponent, TheEditor, TheEditorComponent, TheEditorModule, TheImageComponent, TheListboxDirective, TheListboxGroupDirective, TheListboxOptionDirective, TheMode, TheModeConfig, ThePluginMenu, ThePluginMenuComponent, ThePluginMenuItemType, ThePreventDefaultDirective, index$1 as TheQueries, TheToolbarComponent, TheToolbarDropdownComponent, TheToolbarGroupComponent, TheToolbarGroupToken, TheToolbarItemComponent, TheToolbarService, index as TheTransforms, TodoItemEditor, ToolbarActionTypes, ToolbarAlignment, ToolbarItemType, ToolbarMoreGroup, VOID_BLOCK_TYPES, VerticalAlignEditor, VerticalAlignment, ZERO_WIDTH_CHAR, autoFocus, base64toBlob, buildPluginMenu, buildPluginMenuItemMap, coercePixelsFromCssValue, combinePlugins, copyNode, copyNodeForSafari, createEmptyParagraph, createMentionPlugin, createPluginFactory, createToolbar, createVerticalAlignPlugin, dataDeserialize, dataSerializing, deleteElementKey, extractFragment, filterTextFormat, flattenDeepPlugins, getColsTotalWidth, getEditorUUID, getElementClassByPrefix, getElementHeight, getElementWidth, getEndBlock, getPlugin, getPluginOptions, getPlugins, getRowsTotalHeight, getStartBlock, getToolbarClass, headingOptions, htmlToTheia, idCreator, inValidTypes, initializeDefaultMenuIcons, insertDataByInvalidType, internalPlugins, isCleanEmptyParagraph, isColorIndicator, isColorInput, isColorPanel, isDirectionKeydown, isPureEmptyParagraph, mergeArray, mergeDeepPlugins, mergeElementOptions, mergeOptions, nestedStructureByKey, plainToTheia, pluginsByKey, reSelection, recursionNodes, refocus, scrollIntoView, setEditorUUID, useElementStyle, withMention, withTestPlugin, withTheia };
 //# sourceMappingURL=worktile-theia.mjs.map