quill-table-up 3.1.2 → 3.2.0

package/src/modules/table-selection.ts

@@ -1,669 +1,613 @@
-import type { EmitterSource, Parchment as TypeParchment, Range as TypeRange } from 'quill';
-import type { TableMainFormat, TableWrapperFormat } from '../formats';
-import type { TableUp } from '../table-up';
-import type { RelactiveRect, TableSelectionOptions } from '../utils';
-import Quill from 'quill';
-import { getTableMainRect, TableCellFormat, TableCellInnerFormat } from '../formats';
-import { addScrollEvent, blotName, clearScrollEvent, createBEM, createResizeObserver, findAllParentBlot, findParentBlot, getElementScrollPosition, getRelativeRect, isRectanglesIntersect, tableUpEvent } from '../utils';
-import { pasteCells } from './table-clipboard';
-import { TableDomSelector } from './table-dom-selector';
-import { copyCell } from './table-menu/constants';
-
-const ERROR_LIMIT = 0;
-
-export interface SelectionData {
-  anchorNode: Node | null;
-  anchorOffset: number;
-  focusNode: Node | null;
-  focusOffset: number;
-}
-
-export class TableSelection extends TableDomSelector {
-  static moduleName: string = 'table-selection';
-
-  options: TableSelectionOptions;
-  boundary: RelactiveRect | null = null;
-  scrollRecordEls: HTMLElement[] = [];
-  startScrollRecordPosition: { x: number; y: number }[] = [];
-  selectedTableScrollX: number = 0;
-  selectedTableScrollY: number = 0;
-  selectedEditorScrollX: number = 0;
-  selectedEditorScrollY: number = 0;
-  selectedTds: TableCellInnerFormat[] = [];
-  cellSelectWrap: HTMLElement;
-  cellSelect: HTMLElement;
-  scrollHandler: [HTMLElement, (...args: any[]) => void][] = [];
-  resizeObserver: ResizeObserver;
-  isDisplaySelection = false;
-  bem = createBEM('selection');
-  lastSelection: SelectionData = {
-    anchorNode: null,
-    anchorOffset: 0,
-    focusNode: null,
-    focusOffset: 0,
-  };
-
-  _dragging: boolean = false;
-  set dragging(val: boolean) {
-    if (this._dragging === val) return;
-    this._dragging = val;
-    this.quill.emitter.emit(val ? tableUpEvent.TABLE_SELECTION_DRAG_START : tableUpEvent.TABLE_SELECTION_DRAG_END, this);
-  }
-
-  get dragging() {
-    return this._dragging;
-  }
-
-  constructor(public tableModule: TableUp, public quill: Quill, options: Partial<TableSelectionOptions> = {}) {
-    super(tableModule, quill);
-    this.options = this.resolveOptions(options);
-    this.scrollRecordEls = [this.quill.root, document.documentElement];
-
-    this.cellSelectWrap = tableModule.addContainer(this.bem.b());
-    this.cellSelect = this.helpLinesInitial();
-
-    this.resizeObserver = createResizeObserver(this.updateAfterEvent, { ignoreFirstBind: true });
-    this.resizeObserver.observe(this.quill.root);
-
-    document.addEventListener('paste', this.handlePaste);
-    this.quill.emitter.listenDOM('selectionchange', document, this.selectionChangeHandler.bind(this));
-    this.quill.on(tableUpEvent.AFTER_TABLE_RESIZE, this.updateAfterEvent);
-    this.quill.on(Quill.events.SELECTION_CHANGE, this.quillSelectionChangeHandler);
-    this.quill.on(Quill.events.EDITOR_CHANGE, this.updateWhenTextChange);
-    this.hide();
-  }
-
-  handlePaste = (event: ClipboardEvent) => {
-    const activeElement = document.activeElement && this.quill.root.contains(document.activeElement);
-    if (!activeElement || this.quill.getSelection()) return;
-
-    const clipboardData = event.clipboardData;
-    if (!clipboardData) return;
-    event.preventDefault();
-
-    const currentSelectedTds = this.selectedTds;
-    if (currentSelectedTds.length <= 0) return;
-
-    const html = clipboardData.getData('text/html');
-    const delta = this.quill.clipboard.convert({ html }).ops.filter(op => op.attributes && op.attributes[blotName.tableCellInner]);
-
-    if (delta.length === 0) return;
-
-    pasteCells(
-      { quill: this.quill, talbeModule: this.tableModule },
-      currentSelectedTds,
-      delta,
-    );
-  };
-
-  keyboardHandler = async (e: KeyboardEvent) => {
-    if (e.ctrlKey) {
-      switch (e.key) {
-        case 'c':
-        case 'x': {
-          await copyCell(this.tableModule, this.selectedTds, e.key === 'x');
-          break;
-        }
-      }
-    }
-    else if (e.key === 'Backspace' || e.key === 'Delete') {
-      this.removeCellBySelectedTds();
-    }
-  };
-
-  updateWhenTextChange = (eventName: string) => {
-    if (eventName === Quill.events.TEXT_CHANGE) {
-      if (this.table && !this.quill.root.contains(this.table)) {
-        this.setSelectionTable(undefined);
-      }
-      else {
-        this.updateAfterEvent();
-      }
-    }
-  };
-
-  updateAfterEvent = () => {
-    // if any cell doesn't exist, selection will be cleared
-    for (let i = 0; i < this.selectedTds.length; i++) {
-      const td = this.selectedTds[i];
-      if (!td.domNode.isConnected) {
-        this.selectedTds = [];
-        break;
-      }
-    }
-    this.updateWithSelectedTds();
-  };
-
-  removeCellBySelectedTds() {
-    const range = this.quill.getSelection();
-    const activeElement = document.activeElement;
-    if (range || !this.quill.root.contains(activeElement)) return;
-
-    if (this.table) {
-      const tableMain = Quill.find(this.table) as TableMainFormat;
-      const cells = tableMain.descendants(TableCellInnerFormat);
-      if (this.selectedTds.length === cells.length) {
-        tableMain.remove();
-        return;
-      }
-    }
-    for (const td of this.selectedTds) {
-      const clearTd = td.clone() as TypeParchment.Parent;
-      clearTd.appendChild(td.scroll.create('block'));
-      td.parent.insertBefore(clearTd, td);
-      td.remove();
-    }
-  }
-
-  setSelectedTds(tds: TableCellInnerFormat[]) {
-    const currentSelectedTds = new Set(this.selectedTds);
-    const isSame = this.selectedTds.length === tds.length && tds.every(td => currentSelectedTds.has(td));
-
-    this.selectedTds = tds;
-    if (!isSame) {
-      this.quill.emitter.emit(tableUpEvent.TABLE_SELECTION_CHANGE, this, this.selectedTds);
-    }
-  }
-
-  getFirstTextNode(dom: HTMLElement | Node): Node {
-    for (const node of Array.from(dom.childNodes)) {
-      if (node.nodeType === Node.TEXT_NODE) {
-        return node;
-      }
-    }
-    return dom;
-  }
-
-  getLastTextNode(dom: HTMLElement | Node): Node {
-    for (let i = dom.childNodes.length - 1; i >= 0; i--) {
-      const node = dom.childNodes[i];
-      if (node.nodeType === Node.TEXT_NODE) {
-        return node;
-      }
-    }
-    return dom;
-  }
-
-  getNodeTailOffset(node: Node) {
-    const tempRange = document.createRange();
-    tempRange.selectNodeContents(node);
-    tempRange.collapse(false);
-    return tempRange.startOffset;
-  }
-
-  quillSelectionChangeHandler = (range: TypeRange | null, _oldRange: TypeRange | null, source: EmitterSource) => {
-    if (source === Quill.sources.API) return;
-    if (range && !this.quill.composition.isComposing && this.selectedTds.length > 0) {
-      const formats = this.quill.getFormat(range);
-      const [line] = this.quill.getLine(range.index);
-      const isInCell = !!formats[blotName.tableCellInner] && !!line;
-      // if the selection is in the cell inner, should not update
-      const containsLine = line && this.selectedTds.some(td => td.domNode.contains(line.domNode));
-
-      if (isInCell && !containsLine) {
-        try {
-          const cellInner = findParentBlot(line!, blotName.tableCellInner) as TableCellInnerFormat;
-          this.setSelectedTds([cellInner]);
-          this.updateWithSelectedTds();
-        }
-        catch {
-          // do nothing. should not into here
-        }
-      }
-      else if (!(isInCell && containsLine)) {
-        this.hide();
-      }
-    }
-  };
-
-  setSelectionData(selection: Selection, selectionData: SelectionData) {
-    const { anchorNode, anchorOffset, focusNode, focusOffset } = selectionData;
-    if (!anchorNode || !focusNode) return;
-    const range = document.createRange();
-    const isUpFromDown = this.selectionDirectionUp(selectionData);
-    if (isUpFromDown) {
-      range.setStart(anchorNode, anchorOffset);
-      range.setEnd(anchorNode, anchorOffset);
-    }
-    else {
-      range.setStart(anchorNode, anchorOffset);
-      range.setEnd(focusNode, focusOffset);
-    }
-    selection.removeAllRanges();
-    selection.addRange(range);
-    if (isUpFromDown) {
-      selection.extend(focusNode, focusOffset);
-    }
-  }
-
-  selectionDirectionUp(selection: SelectionData) {
-    const { anchorNode, anchorOffset, focusNode, focusOffset } = selection;
-    if (!anchorNode || !focusNode) return false;
-
-    if (anchorNode === focusNode) {
-      return anchorOffset > focusOffset;
-    }
-
-    const nodePosition = anchorNode.compareDocumentPosition(focusNode);
-    // focus contains anchor
-    if (nodePosition & Node.DOCUMENT_POSITION_CONTAINS) {
-      // is anchor before focus
-      return (nodePosition & Node.DOCUMENT_POSITION_FOLLOWING) !== 0;
-    }
-
-    // anchor contains focus
-    if (nodePosition & Node.DOCUMENT_POSITION_CONTAINED_BY) {
-      // is focus before anchor
-      return (nodePosition & Node.DOCUMENT_POSITION_FOLLOWING) !== 0;
-    }
-
-    // compare position
-    return (nodePosition & Node.DOCUMENT_POSITION_PRECEDING) !== 0;
-  }
-
-  findWrapSelection(points: { node: Node | null; offset: number }[]) {
-    let startNode: Node | null = null;
-    let startOffset = 0;
-    let endNode: Node | null = null;
-    let endOffset = 0;
-
-    for (const { node, offset } of points) {
-      if (node) {
-        if (
-          !startNode
-          || this.selectionDirectionUp({
-            anchorNode: startNode,
-            anchorOffset: startOffset,
-            focusNode: node,
-            focusOffset: offset,
-          })
-        ) {
-          startNode = node;
-          startOffset = offset;
-        }
-
-        if (
-          !endNode
-          || this.selectionDirectionUp({
-            anchorNode: node,
-            anchorOffset: offset,
-            focusNode: endNode,
-            focusOffset: endOffset,
-          })
-        ) {
-          endNode = node;
-          endOffset = offset;
-        }
-      }
-    }
-
-    return { startNode, startOffset, endNode, endOffset };
-  }
-
-  resolveOptions(options: Partial<TableSelectionOptions>): TableSelectionOptions {
-    return Object.assign({
-      selectColor: '#0589f340',
-    } as TableSelectionOptions, options);
-  }
-
-  selectionChangeHandler() {
-    const selection = window.getSelection();
-    if (!selection) return;
-    const { anchorNode, focusNode, anchorOffset, focusOffset } = selection;
-    if (!anchorNode || !focusNode) return;
-
-    const anchorBlot = Quill.find(anchorNode) as TypeParchment.Blot;
-    const focusBlot = Quill.find(focusNode) as TypeParchment.Blot;
-    if (!anchorBlot || !focusBlot || anchorBlot.scroll !== this.quill.scroll || focusBlot.scroll !== this.quill.scroll) return;
-
-    const anchorNames = findAllParentBlot(anchorBlot);
-    const focusNames = findAllParentBlot(focusBlot);
-
-    // if cursor into colgourp should into table or out table by lastSelection
-    const isAnchorInColgroup = anchorNames.has(blotName.tableColgroup);
-    const isFocusInColgroup = focusNames.has(blotName.tableColgroup);
-    if (isAnchorInColgroup || isFocusInColgroup) {
-      let newAnchorNode = anchorNode;
-      let newAnchorOffset = anchorOffset;
-      let newFocusNode = focusNode;
-      let newFocusOffset = focusOffset;
-      // default move cursor to first cell
-      if (isAnchorInColgroup) {
-        const tableWrapperBlot = anchorNames.get(blotName.tableWrapper) as TableWrapperFormat;
-        const cellInner = tableWrapperBlot.descendants(TableCellInnerFormat);
-        if (cellInner.length > 0) {
-          newAnchorNode = cellInner[0].domNode;
-          newAnchorOffset = 0;
-        }
-      }
-      if (isFocusInColgroup) {
-        const tableWrapperBlot = focusNames.get(blotName.tableWrapper) as TableWrapperFormat;
-        const cellInner = tableWrapperBlot.descendants(TableCellInnerFormat);
-        if (cellInner.length > 0) {
-          newFocusNode = cellInner[0].domNode;
-          newFocusOffset = 0;
-        }
-      }
-      this.setSelectionData(selection, {
-        anchorNode: newAnchorNode,
-        anchorOffset: newAnchorOffset,
-        focusNode: newFocusNode,
-        focusOffset: newFocusOffset,
-      });
-      return;
-    }
-
-    // if the selection in the table partial
-    const isAnchorInCellInner = anchorNames.has(blotName.tableCellInner);
-    const isFocusInCellInner = focusNames.has(blotName.tableCellInner);
-    let isNotSameCellInner = isAnchorInCellInner && isFocusInCellInner;
-    if (isNotSameCellInner) {
-      const anchorCellBlot = anchorNames.get(blotName.tableCellInner) as TableCellInnerFormat;
-      const focusCellBlot = focusNames.get(blotName.tableCellInner) as TableCellInnerFormat;
-      isNotSameCellInner &&= (anchorCellBlot !== focusCellBlot);
-    }
-    if (
-      (isAnchorInCellInner && isFocusInCellInner && isNotSameCellInner)
-      || (!isAnchorInCellInner && isFocusInCellInner)
-      || (!isFocusInCellInner && isAnchorInCellInner)
-    ) {
-      this.setSelectionData(selection, this.lastSelection);
-      if (this.selectedTds.length > 0) {
-        this.hide();
-      }
-      return;
-    }
-
-    this.lastSelection = {
-      anchorNode,
-      anchorOffset,
-      focusNode,
-      focusOffset,
-    };
-  }
-
-  helpLinesInitial() {
-    this.cellSelectWrap.style.setProperty('--select-color', this.options.selectColor);
-    const cellSelect = document.createElement('div');
-    cellSelect.classList.add(this.bem.be('line'));
-    this.cellSelectWrap.appendChild(cellSelect);
-    return cellSelect;
-  }
-
-  computeSelectedTds(startPoint: { x: number; y: number }, endPoint: { x: number; y: number }) {
-    if (!this.table) return [];
-    type TempSortedTableCellFormat = TableCellFormat & { index?: number; __rect?: DOMRect };
-
-    const tableMainBlot = Quill.find(this.table) as TableMainFormat;
-    if (!tableMainBlot) return [];
-    // Use TableCell to calculation selected range, because TableCellInner is scrollable, the width will effect calculate
-    const tableCells = new Set(
-      // reverse cell. search from bottom.
-      // when mouse click on the cell border. the selection will be in the lower cell.
-      // but `isRectanglesIntersect` judge intersect include border. the upper cell bottom border will intersect with boundary
-      // so need to search the cell from bottom
-      (tableMainBlot.descendants(TableCellFormat) as TempSortedTableCellFormat[]).map((cell, i) => {
-        cell.index = i;
-        return cell;
-      }),
-    );
-
-    const scrollDiff = this.getScrollPositionDiff();
-    // set boundary to initially mouse move rectangle
-    const { rect: tableRect } = getTableMainRect(tableMainBlot);
-    if (!tableRect) return [];
-    const startPointX = startPoint.x + scrollDiff.x;
-    const startPointY = startPoint.y + scrollDiff.y;
-    let boundary = {
-      x: Math.max(tableRect.left, Math.min(endPoint.x, startPointX)),
-      y: Math.max(tableRect.top, Math.min(endPoint.y, startPointY)),
-      x1: Math.min(tableRect.right, Math.max(endPoint.x, startPointX)),
-      y1: Math.min(tableRect.bottom, Math.max(endPoint.y, startPointY)),
-    };
-
-    const selectedCells = new Set<TempSortedTableCellFormat>();
-    let findEnd = true;
-    // loop all cells to find correct boundary
-    while (findEnd) {
-      findEnd = false;
-      for (const cell of tableCells) {
-        if (!cell.__rect) {
-          cell.__rect = cell.domNode.getBoundingClientRect();
-        }
-        // Determine whether the cell intersects with the current boundary
-        const { x, y, right, bottom } = cell.__rect;
-        // bowser MouseEvent clientY\clientX is floored. judge data need floored too
-        if (
-          isRectanglesIntersect(
-            { x: Math.floor(boundary.x), y: Math.floor(boundary.y), x1: Math.floor(boundary.x1), y1: Math.floor(boundary.y1) },
-            { x: Math.floor(x), y: Math.floor(y), x1: Math.floor(right), y1: Math.floor(bottom) },
-            ERROR_LIMIT,
-            selectedCells.size === 0,
-          )
-        ) {
-          // add cell to selected
-          selectedCells.add(cell);
-          tableCells.delete(cell);
-          // update boundary
-          boundary = {
-            x: Math.min(boundary.x, x),
-            y: Math.min(boundary.y, y),
-            x1: Math.max(boundary.x1, right),
-            y1: Math.max(boundary.y1, bottom),
-          };
-          // recalculate boundary last cells
-          findEnd = true;
-          break;
-        }
-      }
-    }
-    for (const cell of [...selectedCells, ...tableCells]) {
-      delete cell.__rect;
-    }
-    // save result boundary relative to the editor
-    this.boundary = getRelativeRect({
-      ...boundary,
-      width: boundary.x1 - boundary.x,
-      height: boundary.y1 - boundary.y,
-    }, this.quill.root);
-    return Array.from(selectedCells).toSorted((a, b) => a.index! - b.index!).map((cell) => {
-      delete cell.index;
-      return cell.getCellInner();
-    });
-  }
-
-  getScrollPositionDiff() {
-    const { x: tableScrollX, y: tableScrollY } = this.getTableViewScroll();
-    const { x: editorScrollX, y: editorScrollY } = getElementScrollPosition(this.quill.root);
-    this.selectedTableScrollX = tableScrollX;
-    this.selectedTableScrollY = tableScrollY;
-    this.selectedEditorScrollX = editorScrollX;
-    this.selectedEditorScrollY = editorScrollY;
-
-    return this.startScrollRecordPosition.reduce((pre, { x, y }, i) => {
-      const { x: currentX, y: currentY } = getElementScrollPosition(this.scrollRecordEls[i]);
-      pre.x += x - currentX;
-      pre.y += y - currentY;
-      return pre;
-    }, { x: 0, y: 0 });
-  }
-
-  recordScrollPosition() {
-    this.clearRecordScrollPosition();
-    for (const el of this.scrollRecordEls) {
-      this.startScrollRecordPosition.push(getElementScrollPosition(el));
-    }
-  }
-
-  clearRecordScrollPosition() {
-    this.startScrollRecordPosition = [];
-  }
-
-  tableSelectHandler(mousedownEvent: MouseEvent) {
-    const { button, target, clientX, clientY } = mousedownEvent;
-    const closestTable = (target as HTMLElement).closest<HTMLTableElement>('table');
-    const closestTableCaption = (target as HTMLElement).closest('caption');
-    if (button !== 0 || !closestTable || closestTableCaption) return;
-
-    this.setSelectionTable(closestTable);
-    const startTableId = closestTable.dataset.tableId;
-    const startPoint = { x: clientX, y: clientY };
-
-    this.recordScrollPosition();
-    this.setSelectedTds(this.computeSelectedTds(startPoint, startPoint));
-    this.show();
-
-    const mouseMoveHandler = (mousemoveEvent: MouseEvent) => {
-      this.dragging = true;
-      const { button, target, clientX, clientY } = mousemoveEvent;
-      const closestTable = (target as HTMLElement).closest<HTMLTableElement>('.ql-table');
-      const closestTableCaption = (target as HTMLElement).closest('caption');
-      if (
-        button !== 0
-        || closestTableCaption
-        || !closestTable || closestTable.dataset.tableId !== startTableId
-      ) {
-        return;
-      }
-
-      const movePoint = { x: clientX, y: clientY };
-      this.setSelectedTds(this.computeSelectedTds(startPoint, movePoint));
-      if (this.selectedTds.length > 1) {
-        this.quill.blur();
-      }
-      this.update();
-    };
-    const mouseUpHandler = () => {
-      document.body.removeEventListener('mousemove', mouseMoveHandler, false);
-      document.body.removeEventListener('mouseup', mouseUpHandler, false);
-      this.dragging = false;
-      this.clearRecordScrollPosition();
-    };
-
-    document.body.addEventListener('mousemove', mouseMoveHandler, false);
-    document.body.addEventListener('mouseup', mouseUpHandler, false);
-  }
-
-  updateWithSelectedTds() {
-    if (this.selectedTds.length <= 0) {
-      this.hide();
-      return;
-    }
-    const startPoint = { x: Infinity, y: Infinity };
-    const endPoint = { x: -Infinity, y: -Infinity };
-    for (const td of this.selectedTds) {
-      const rect = td.domNode.getBoundingClientRect();
-      startPoint.x = Math.min(startPoint.x, rect.left);
-      startPoint.y = Math.min(startPoint.y, rect.top);
-      endPoint.x = Math.max(endPoint.x, rect.right);
-      endPoint.y = Math.max(endPoint.y, rect.bottom);
-    }
-    this.setSelectedTds(this.computeSelectedTds(startPoint, endPoint));
-    if (this.selectedTds.length > 0) {
-      this.update();
-    }
-    else {
-      this.hide();
-    }
-  }
-
-  update() {
-    if (!this.table) {
-      this.hide();
-      return;
-    }
-    if (this.selectedTds.length === 0 || !this.boundary) return;
-    const { x: editorScrollX, y: editorScrollY } = getElementScrollPosition(this.quill.root);
-    const { x: tableScrollX, y: tableScrollY } = this.getTableViewScroll();
-    const tableWrapperRect = this.table.parentElement!.getBoundingClientRect();
-    const rootRect = this.quill.root.getBoundingClientRect();
-    const wrapLeft = tableWrapperRect.x - rootRect.x;
-    const wrapTop = tableWrapperRect.y - rootRect.y;
-
-    Object.assign(this.cellSelect.style, {
-      left: `${this.selectedEditorScrollX * 2 - editorScrollX + this.boundary.x + this.selectedTableScrollX - tableScrollX - wrapLeft}px`,
-      top: `${this.selectedEditorScrollY * 2 - editorScrollY + this.boundary.y + this.selectedTableScrollY - tableScrollY - wrapTop}px`,
-      width: `${this.boundary.width}px`,
-      height: `${this.boundary.height}px`,
-    });
-    Object.assign(this.cellSelectWrap.style, {
-      left: `${wrapLeft}px`,
-      top: `${wrapTop}px`,
-      width: `${tableWrapperRect.width}px`,
-      height: `${tableWrapperRect.height}px`,
-    });
-    this.quill.emitter.emit(tableUpEvent.TABLE_SELECTION_DISPLAY_CHANGE, this);
-  }
-
-  getTableViewScroll() {
-    if (!this.table) {
-      return {
-        x: 0,
-        y: 0,
-      };
-    }
-    return getElementScrollPosition(this.table.parentElement!);
-  }
-
-  setSelectionTable(table: HTMLTableElement | undefined) {
-    if (this.table === table) return;
-    this.table = table;
-    if (this.table) {
-      this.scrollRecordEls.push(this.table.parentElement!);
-    }
-    else {
-      this.scrollRecordEls.pop();
-    }
-  }
-
-  showDisplay() {
-    Object.assign(this.cellSelectWrap.style, { display: 'block' });
-    this.isDisplaySelection = true;
-    if (!this.table) return;
-    this.resizeObserver.observe(this.table);
-  }
-
-  show() {
-    if (!this.table) return;
-    clearScrollEvent.call(this);
-
-    this.showDisplay();
-    this.update();
-    this.quill.root.addEventListener('keydown', this.keyboardHandler);
-    addScrollEvent.call(this, this.quill.root, () => {
-      this.update();
-    });
-    addScrollEvent.call(this, this.table.parentElement!, () => {
-      this.update();
-    });
-  }
-
-  hideDisplay() {
-    Object.assign(this.cellSelectWrap.style, { display: 'none' });
-    this.isDisplaySelection = false;
-    if (!this.table) return;
-    this.resizeObserver.unobserve(this.table);
-  }
-
-  hide() {
-    clearScrollEvent.call(this);
-    this.quill.root.removeEventListener('keydown', this.keyboardHandler);
-    this.hideDisplay();
-    this.boundary = null;
-    this.setSelectedTds([]);
-    this.setSelectionTable(undefined);
-  }
-
-  destroy() {
-    this.resizeObserver.disconnect();
-
-    this.hide();
-    this.cellSelectWrap.remove();
-    clearScrollEvent.call(this);
-
-    document.removeEventListener('paste', this.handlePaste);
-    this.quill.off(tableUpEvent.AFTER_TABLE_RESIZE, this.updateAfterEvent);
-    this.quill.off(Quill.events.EDITOR_CHANGE, this.updateWhenTextChange);
-    this.quill.off(Quill.events.SELECTION_CHANGE, this.quillSelectionChangeHandler);
-  }
-}
+import type { EmitterSource, Parchment as TypeParchment, Range as TypeRange } from 'quill';
+import type { TableMainFormat, TableWrapperFormat } from '../formats';
+import type { TableUp } from '../table-up';
+import type { Position, RelactiveRect, TableSelectionOptions } from '../utils';
+import Quill from 'quill';
+import { getTableMainRect, TableCellFormat, TableCellInnerFormat } from '../formats';
+import { addScrollEvent, AutoScroller, blotName, clearScrollEvent, createBEM, createResizeObserver, findAllParentBlot, findParentBlot, getElementScrollPosition, getRelativeRect, isRectanglesIntersect, tableUpEvent, tableUpInternal } from '../utils';
+import { pasteCells } from './table-clipboard';
+import { TableDomSelector } from './table-dom-selector';
+import { copyCell } from './table-menu/constants';
+
+const ERROR_LIMIT = 0;
+
+export interface SelectionData {
+  anchorNode: Node | null;
+  anchorOffset: number;
+  focusNode: Node | null;
+  focusOffset: number;
+}
+
+export class TableSelection extends TableDomSelector {
+  static moduleName: string = tableUpInternal.tableSelectionName;
+
+  options: TableSelectionOptions;
+  boundary: RelactiveRect | null = null;
+  scrollRecordEls: HTMLElement[] = [];
+  startScrollRecordPosition: Position[] = [];
+  selectedTableScrollX: number = 0;
+  selectedTableScrollY: number = 0;
+  selectedEditorScrollX: number = 0;
+  selectedEditorScrollY: number = 0;
+  selectedTds: TableCellInnerFormat[] = [];
+  cellSelectWrap: HTMLElement;
+  cellSelect: HTMLElement;
+  scrollHandler: [HTMLElement, (...args: any[]) => void][] = [];
+  resizeObserver: ResizeObserver;
+  isDisplaySelection = false;
+  bem = createBEM('selection');
+  autoScroller: AutoScroller;
+  lastSelection: SelectionData = {
+    anchorNode: null,
+    anchorOffset: 0,
+    focusNode: null,
+    focusOffset: 0,
+  };
+
+  _dragging: boolean = false;
+  set dragging(val: boolean) {
+    if (this._dragging === val) return;
+    this._dragging = val;
+    this.quill.emitter.emit(val ? tableUpEvent.TABLE_SELECTION_DRAG_START : tableUpEvent.TABLE_SELECTION_DRAG_END, this);
+  }
+
+  get dragging() {
+    return this._dragging;
+  }
+
+  constructor(public tableModule: TableUp, public quill: Quill, options: Partial<TableSelectionOptions> = {}) {
+    super(tableModule, quill);
+    this.options = this.resolveOptions(options);
+    this.scrollRecordEls = [this.quill.root, document.documentElement];
+
+    this.cellSelectWrap = tableModule.addContainer(this.bem.b());
+    this.cellSelect = this.helpLinesInitial();
+
+    this.resizeObserver = createResizeObserver(this.updateAfterEvent, { ignoreFirstBind: true });
+    this.resizeObserver.observe(this.quill.root);
+
+    document.addEventListener('paste', this.handlePaste);
+    this.quill.emitter.listenDOM('selectionchange', document, this.selectionChangeHandler.bind(this));
+    this.quill.on(tableUpEvent.AFTER_TABLE_RESIZE, this.updateAfterEvent);
+    this.quill.on(Quill.events.SELECTION_CHANGE, this.quillSelectionChangeHandler);
+    this.quill.on(Quill.events.EDITOR_CHANGE, this.updateWhenTextChange);
+
+    this.autoScroller = new AutoScroller(50, 40);
+    this.hide();
+  }
+
+  handlePaste = (event: ClipboardEvent) => {
+    const activeElement = document.activeElement && this.quill.root.contains(document.activeElement);
+    if (!activeElement || this.quill.getSelection()) return;
+
+    const clipboardData = event.clipboardData;
+    if (!clipboardData) return;
+    event.preventDefault();
+
+    const currentSelectedTds = this.selectedTds;
+    if (currentSelectedTds.length <= 0) return;
+
+    const html = clipboardData.getData('text/html');
+    const delta = this.quill.clipboard.convert({ html }).ops.filter(op => op.attributes?.[blotName.tableCellInner]);
+
+    if (delta.length === 0) return;
+
+    pasteCells(
+      { quill: this.quill, talbeModule: this.tableModule },
+      currentSelectedTds,
+      delta,
+    );
+  };
+
+  keyboardHandler = async (e: KeyboardEvent) => {
+    if (e.ctrlKey) {
+      switch (e.key) {
+        case 'c':
+        case 'x': {
+          await copyCell(this.tableModule, this.selectedTds, e.key === 'x');
+          break;
+        }
+      }
+    }
+    else if (e.key === 'Backspace' || e.key === 'Delete') {
+      this.removeCellBySelectedTds();
+    }
+  };
+
+  updateWhenTextChange = (eventName: string) => {
+    if (eventName === Quill.events.TEXT_CHANGE) {
+      if (this.table && !this.quill.root.contains(this.table)) {
+        this.setSelectionTable(undefined);
+      }
+      else {
+        this.updateAfterEvent();
+      }
+    }
+  };
+
+  updateAfterEvent = () => {
+    // if any cell doesn't exist, selection will be cleared
+    for (const td of this.selectedTds) {
+      if (!td.domNode.isConnected) {
+        this.selectedTds = [];
+        break;
+      }
+    }
+    this.updateWithSelectedTds();
+  };
+
+  removeCellBySelectedTds() {
+    const range = this.quill.getSelection();
+    const activeElement = document.activeElement;
+    if (range || !this.quill.root.contains(activeElement)) return;
+
+    if (this.table) {
+      const tableMain = Quill.find(this.table) as TableMainFormat;
+      const cells = tableMain.descendants(TableCellInnerFormat);
+      if (this.selectedTds.length === cells.length) {
+        tableMain.remove();
+        return;
+      }
+    }
+    for (const td of this.selectedTds) {
+      const clearTd = td.clone() as TypeParchment.Parent;
+      clearTd.appendChild(td.scroll.create('block'));
+      td.parent.insertBefore(clearTd, td);
+      td.remove();
+    }
+  }
+
+  setSelectedTds(tds: TableCellInnerFormat[]) {
+    const currentSelectedTds = new Set(this.selectedTds);
+    const isSame = this.selectedTds.length === tds.length && tds.every(td => currentSelectedTds.has(td));
+
+    this.selectedTds = tds;
+    if (!isSame) {
+      this.quill.emitter.emit(tableUpEvent.TABLE_SELECTION_CHANGE, this, this.selectedTds);
+    }
+  }
+
+  quillSelectionChangeHandler = (range: TypeRange | null, _oldRange: TypeRange | null, source: EmitterSource) => {
+    if (source === Quill.sources.API) return;
+    if (range && !this.quill.composition.isComposing && this.selectedTds.length > 0) {
+      const formats = this.quill.getFormat(range);
+      const [line] = this.quill.getLine(range.index);
+      const isInCell = !!formats[blotName.tableCellInner] && !!line;
+      // if the selection is in the cell inner, should not update
+      const containsLine = line && this.selectedTds.some(td => td.domNode.contains(line.domNode));
+
+      if (isInCell && !containsLine) {
+        try {
+          const cellInner = findParentBlot(line!, blotName.tableCellInner) as TableCellInnerFormat;
+          this.setSelectedTds([cellInner]);
+          this.updateWithSelectedTds();
+        }
+        catch {
+          // do nothing. should not into here
+        }
+      }
+      else if (!(isInCell && containsLine)) {
+        this.hide();
+      }
+    }
+  };
+
+  setSelectionData(selection: Selection, selectionData: SelectionData) {
+    const { anchorNode, anchorOffset, focusNode, focusOffset } = selectionData;
+    if (!anchorNode || !focusNode) return;
+    const range = document.createRange();
+    const isUpFromDown = this.selectionDirectionUp(selectionData);
+    if (isUpFromDown) {
+      range.setStart(anchorNode, anchorOffset);
+      range.setEnd(anchorNode, anchorOffset);
+    }
+    else {
+      range.setStart(anchorNode, anchorOffset);
+      range.setEnd(focusNode, focusOffset);
+    }
+    selection.removeAllRanges();
+    selection.addRange(range);
+    if (isUpFromDown) {
+      selection.extend(focusNode, focusOffset);
+    }
+  }
+
+  selectionDirectionUp(selection: SelectionData) {
+    const { anchorNode, anchorOffset, focusNode, focusOffset } = selection;
+    if (!anchorNode || !focusNode) return false;
+
+    if (anchorNode === focusNode) {
+      return anchorOffset > focusOffset;
+    }
+
+    const nodePosition = anchorNode.compareDocumentPosition(focusNode);
+    // focus contains anchor
+    if (nodePosition & Node.DOCUMENT_POSITION_CONTAINS) {
+      // is anchor before focus
+      return (nodePosition & Node.DOCUMENT_POSITION_FOLLOWING) !== 0;
+    }
+
+    // anchor contains focus
+    if (nodePosition & Node.DOCUMENT_POSITION_CONTAINED_BY) {
+      // is focus before anchor
+      return (nodePosition & Node.DOCUMENT_POSITION_FOLLOWING) !== 0;
+    }
+
+    // compare position
+    return (nodePosition & Node.DOCUMENT_POSITION_PRECEDING) !== 0;
+  }
+
+  resolveOptions(options: Partial<TableSelectionOptions>): TableSelectionOptions {
+    return Object.assign({
+      selectColor: '#0589f340',
+    } as TableSelectionOptions, options);
+  }
+
+  selectionChangeHandler() {
+    const selection = window.getSelection();
+    if (!selection) return;
+    const { anchorNode, focusNode, anchorOffset, focusOffset } = selection;
+    if (!anchorNode || !focusNode) return;
+
+    const anchorBlot = Quill.find(anchorNode) as TypeParchment.Blot;
+    const focusBlot = Quill.find(focusNode) as TypeParchment.Blot;
+    if (!anchorBlot || !focusBlot || anchorBlot.scroll !== this.quill.scroll || focusBlot.scroll !== this.quill.scroll) return;
+
+    const anchorNames = findAllParentBlot(anchorBlot);
+    const focusNames = findAllParentBlot(focusBlot);
+
+    // if cursor into colgourp should into table or out table by lastSelection
+    const isAnchorInColgroup = anchorNames.has(blotName.tableColgroup);
+    const isFocusInColgroup = focusNames.has(blotName.tableColgroup);
+    if (isAnchorInColgroup || isFocusInColgroup) {
+      let newAnchorNode = anchorNode;
+      let newAnchorOffset = anchorOffset;
+      let newFocusNode = focusNode;
+      let newFocusOffset = focusOffset;
+      // default move cursor to first cell
+      if (isAnchorInColgroup) {
+        const tableWrapperBlot = anchorNames.get(blotName.tableWrapper) as TableWrapperFormat;
+        const cellInner = tableWrapperBlot.descendants(TableCellInnerFormat);
+        if (cellInner.length > 0) {
+          newAnchorNode = cellInner[0].domNode;
+          newAnchorOffset = 0;
+        }
+      }
+      if (isFocusInColgroup) {
+        const tableWrapperBlot = focusNames.get(blotName.tableWrapper) as TableWrapperFormat;
+        const cellInner = tableWrapperBlot.descendants(TableCellInnerFormat);
+        if (cellInner.length > 0) {
+          newFocusNode = cellInner[0].domNode;
+          newFocusOffset = 0;
+        }
+      }
+      this.setSelectionData(selection, {
+        anchorNode: newAnchorNode,
+        anchorOffset: newAnchorOffset,
+        focusNode: newFocusNode,
+        focusOffset: newFocusOffset,
+      });
+      return;
+    }
+
+    // if the selection in the table partial
+    const isAnchorInCellInner = anchorNames.has(blotName.tableCellInner);
+    const isFocusInCellInner = focusNames.has(blotName.tableCellInner);
+    let isNotSameCellInner = isAnchorInCellInner && isFocusInCellInner;
+    if (isNotSameCellInner) {
+      const anchorCellBlot = anchorNames.get(blotName.tableCellInner) as TableCellInnerFormat;
+      const focusCellBlot = focusNames.get(blotName.tableCellInner) as TableCellInnerFormat;
+      isNotSameCellInner &&= (anchorCellBlot !== focusCellBlot);
+    }
+    if (
+      (isAnchorInCellInner && isFocusInCellInner && isNotSameCellInner)
+      || (!isAnchorInCellInner && isFocusInCellInner)
+      || (!isFocusInCellInner && isAnchorInCellInner)
+    ) {
+      this.setSelectionData(selection, this.lastSelection);
+      if (this.selectedTds.length > 0) {
+        this.hide();
+      }
+      return;
+    }
+
+    this.lastSelection = {
+      anchorNode,
+      anchorOffset,
+      focusNode,
+      focusOffset,
+    };
+  }
+
+  helpLinesInitial() {
+    this.cellSelectWrap.style.setProperty('--select-color', this.options.selectColor);
+    const cellSelect = document.createElement('div');
+    cellSelect.classList.add(this.bem.be('line'));
+    this.cellSelectWrap.appendChild(cellSelect);
+    return cellSelect;
+  }
+
+  computeSelectedTds(startPoint: Position, endPoint: Position) {
+    if (!this.table) return [];
+    type TempSortedTableCellFormat = TableCellFormat & { index?: number; __rect?: DOMRect };
+
+    const tableMainBlot = Quill.find(this.table) as TableMainFormat;
+    if (!tableMainBlot) return [];
+    // Use TableCell to calculation selected range, because TableCellInner is scrollable, the width will effect calculate
+    const tableCells = new Set(
+      // reverse cell. search from bottom.
+      // when mouse click on the cell border. the selection will be in the lower cell.
+      // but `isRectanglesIntersect` judge intersect include border. the upper cell bottom border will intersect with boundary
+      // so need to search the cell from bottom
+      (tableMainBlot.descendants(TableCellFormat) as TempSortedTableCellFormat[]).map((cell, i) => {
+        cell.index = i;
+        return cell;
+      }),
+    );
+
+    const scrollDiff = this.getScrollPositionDiff();
+    // set boundary to initially mouse move rectangle
+    const { rect: tableRect } = getTableMainRect(tableMainBlot);
+    if (!tableRect) return [];
+    const startPointX = startPoint.x + scrollDiff.x;
+    const startPointY = startPoint.y + scrollDiff.y;
+    let boundary = {
+      x: Math.max(tableRect.left, Math.min(endPoint.x, startPointX)),
+      y: Math.max(tableRect.top, Math.min(endPoint.y, startPointY)),
+      x1: Math.min(tableRect.right, Math.max(endPoint.x, startPointX)),
+      y1: Math.min(tableRect.bottom, Math.max(endPoint.y, startPointY)),
+    };
+
+    const selectedCells = new Set<TempSortedTableCellFormat>();
+    let findEnd = true;
+    // loop all cells to find correct boundary
+    while (findEnd) {
+      findEnd = false;
+      for (const cell of tableCells) {
+        if (!cell.__rect) {
+          cell.__rect = cell.domNode.getBoundingClientRect();
+        }
+        // Determine whether the cell intersects with the current boundary
+        const { x, y, right, bottom } = cell.__rect;
+        // bowser MouseEvent clientY\clientX is floored. judge data need floored too
+        if (
+          isRectanglesIntersect(
+            { x: Math.floor(boundary.x), y: Math.floor(boundary.y), x1: Math.floor(boundary.x1), y1: Math.floor(boundary.y1) },
+            { x: Math.floor(x), y: Math.floor(y), x1: Math.floor(right), y1: Math.floor(bottom) },
+            ERROR_LIMIT,
+            selectedCells.size === 0,
+          )
+        ) {
+          // add cell to selected
+          selectedCells.add(cell);
+          tableCells.delete(cell);
+          // update boundary
+          boundary = {
+            x: Math.min(boundary.x, x),
+            y: Math.min(boundary.y, y),
+            x1: Math.max(boundary.x1, right),
+            y1: Math.max(boundary.y1, bottom),
+          };
+          // recalculate boundary last cells
+          findEnd = true;
+          break;
+        }
+      }
+    }
+    for (const cell of [...selectedCells, ...tableCells]) {
+      delete cell.__rect;
+    }
+    // save result boundary relative to the editor
+    this.boundary = getRelativeRect({
+      ...boundary,
+      width: boundary.x1 - boundary.x,
+      height: boundary.y1 - boundary.y,
+    }, this.quill.root);
+    return Array.from(selectedCells).toSorted((a, b) => a.index! - b.index!).map((cell) => {
+      delete cell.index;
+      return cell.getCellInner();
+    });
+  }
+
+  getScrollPositionDiff() {
+    const { x: tableScrollX, y: tableScrollY } = this.getTableViewScroll();
+    const { x: editorScrollX, y: editorScrollY } = getElementScrollPosition(this.quill.root);
+    this.selectedTableScrollX = tableScrollX;
+    this.selectedTableScrollY = tableScrollY;
+    this.selectedEditorScrollX = editorScrollX;
+    this.selectedEditorScrollY = editorScrollY;
+
+    return this.startScrollRecordPosition.reduce((pre, { x, y }, i) => {
+      const { x: currentX, y: currentY } = getElementScrollPosition(this.scrollRecordEls[i]);
+      pre.x += x - currentX;
+      pre.y += y - currentY;
+      return pre;
+    }, { x: 0, y: 0 });
+  }
+
+  recordScrollPosition() {
+    this.clearRecordScrollPosition();
+    for (const el of this.scrollRecordEls) {
+      this.startScrollRecordPosition.push(getElementScrollPosition(el));
+    }
+  }
+
+  clearRecordScrollPosition() {
+    this.startScrollRecordPosition = [];
+  }
+
+  tableSelectHandler(mousedownEvent: MouseEvent) {
+    const { button, target, clientX, clientY } = mousedownEvent;
+    const closestTable = (target as HTMLElement).closest<HTMLTableElement>('table');
+    const closestTableCaption = (target as HTMLElement).closest('caption');
+    if (button !== 0 || !closestTable || closestTableCaption) return;
+
+    this.setSelectionTable(closestTable);
+    const startTableId = closestTable.dataset.tableId;
+    const startPoint = { x: clientX, y: clientY };
+
+    this.recordScrollPosition();
+    this.setSelectedTds(this.computeSelectedTds(startPoint, startPoint));
+    this.show();
+
+    const mouseMoveHandler = (mousemoveEvent: MouseEvent) => {
+      this.dragging = true;
+      const { button, target, clientX, clientY } = mousemoveEvent;
+      const closestTable = (target as HTMLElement).closest<HTMLTableElement>('.ql-table');
+      const closestTableCaption = (target as HTMLElement).closest('caption');
+      if (
+        button !== 0
+        || closestTableCaption
+        || !closestTable || closestTable.dataset.tableId !== startTableId
+      ) {
+        return;
+      }
+
+      const movePoint = { x: clientX, y: clientY };
+      this.setSelectedTds(this.computeSelectedTds(startPoint, movePoint));
+      if (this.selectedTds.length > 1) {
+        this.quill.blur();
+      }
+      this.update();
+      this.autoScroller.updateMousePosition(clientX, clientY);
+    };
+    const mouseUpHandler = () => {
+      document.body.removeEventListener('mousemove', mouseMoveHandler, false);
+      document.body.removeEventListener('mouseup', mouseUpHandler, false);
+      this.autoScroller.stop();
+      this.dragging = false;
+      this.clearRecordScrollPosition();
+    };
+
+    document.body.addEventListener('mousemove', mouseMoveHandler, false);
+    document.body.addEventListener('mouseup', mouseUpHandler, false);
+    const tableMain = Quill.find(closestTable) as TableMainFormat;
+    if (!tableMain) return;
+    const tableWrapper = tableMain.parent!.domNode as HTMLElement;
+    this.autoScroller.updateMousePosition(clientX, clientY);
+    this.autoScroller.start(tableWrapper);
+  }
+
+  updateWithSelectedTds() {
+    if (this.selectedTds.length <= 0) {
+      this.hide();
+      return;
+    }
+    const startPoint = { x: Infinity, y: Infinity };
+    const endPoint = { x: -Infinity, y: -Infinity };
+    for (const td of this.selectedTds) {
+      const rect = td.domNode.getBoundingClientRect();
+      startPoint.x = Math.min(startPoint.x, rect.left);
+      startPoint.y = Math.min(startPoint.y, rect.top);
+      endPoint.x = Math.max(endPoint.x, rect.right);
+      endPoint.y = Math.max(endPoint.y, rect.bottom);
+    }
+    this.setSelectedTds(this.computeSelectedTds(startPoint, endPoint));
+    if (this.selectedTds.length > 0) {
+      this.update();
+    }
+    else {
+      this.hide();
+    }
+  }
+
+  update() {
+    if (!this.table) {
+      this.hide();
+      return;
+    }
+    if (this.selectedTds.length === 0 || !this.boundary) return;
+    const { x: editorScrollX, y: editorScrollY } = getElementScrollPosition(this.quill.root);
+    const { x: tableScrollX, y: tableScrollY } = this.getTableViewScroll();
+    const tableWrapperRect = this.table.parentElement!.getBoundingClientRect();
+    const rootRect = this.quill.root.getBoundingClientRect();
+    const wrapLeft = tableWrapperRect.x - rootRect.x;
+    const wrapTop = tableWrapperRect.y - rootRect.y;
+
+    Object.assign(this.cellSelect.style, {
+      left: `${this.selectedEditorScrollX * 2 - editorScrollX + this.boundary.x + this.selectedTableScrollX - tableScrollX - wrapLeft}px`,
+      top: `${this.selectedEditorScrollY * 2 - editorScrollY + this.boundary.y + this.selectedTableScrollY - tableScrollY - wrapTop}px`,
+      width: `${this.boundary.width}px`,
+      height: `${this.boundary.height}px`,
+    });
+    Object.assign(this.cellSelectWrap.style, {
+      left: `${wrapLeft}px`,
+      top: `${wrapTop}px`,
+      width: `${tableWrapperRect.width}px`,
+      height: `${tableWrapperRect.height}px`,
+    });
+    this.quill.emitter.emit(tableUpEvent.TABLE_SELECTION_DISPLAY_CHANGE, this);
+  }
+
+  getTableViewScroll() {
+    if (!this.table) {
+      return {
+        x: 0,
+        y: 0,
+      };
+    }
+    return getElementScrollPosition(this.table.parentElement!);
+  }
+
+  setSelectionTable(table: HTMLTableElement | undefined) {
+    if (this.table === table) return;
+    this.table = table;
+    if (this.table) {
+      this.scrollRecordEls.push(this.table.parentElement!);
+    }
+    else {
+      this.scrollRecordEls.pop();
+    }
+  }
+
+  showDisplay() {
+    Object.assign(this.cellSelectWrap.style, { display: 'block' });
+    this.isDisplaySelection = true;
+    if (!this.table) return;
+    this.resizeObserver.observe(this.table);
+  }
+
+  show() {
+    if (!this.table) return;
+    clearScrollEvent.call(this);
+
+    this.showDisplay();
+    this.update();
+    this.quill.root.addEventListener('keydown', this.keyboardHandler);
+    addScrollEvent.call(this, this.quill.root, () => {
+      this.update();
+    });
+    addScrollEvent.call(this, this.table.parentElement!, () => {
+      this.update();
+    });
+  }
+
+  hideDisplay() {
+    Object.assign(this.cellSelectWrap.style, { display: 'none' });
+    this.isDisplaySelection = false;
+    if (!this.table) return;
+    this.resizeObserver.unobserve(this.table);
+  }
+
+  hide() {
+    clearScrollEvent.call(this);
+    this.quill.root.removeEventListener('keydown', this.keyboardHandler);
+    this.hideDisplay();
+    this.boundary = null;
+    this.setSelectedTds([]);
+    this.setSelectionTable(undefined);
+  }
+
+  destroy() {
+    this.resizeObserver.disconnect();
+
+    this.hide();
+    this.cellSelectWrap.remove();
+    clearScrollEvent.call(this);
+
+    document.removeEventListener('paste', this.handlePaste);
+    this.quill.off(tableUpEvent.AFTER_TABLE_RESIZE, this.updateAfterEvent);
+    this.quill.off(Quill.events.EDITOR_CHANGE, this.updateWhenTextChange);
+    this.quill.off(Quill.events.SELECTION_CHANGE, this.quillSelectionChangeHandler);
+  }
+}