quill-table-up 3.1.2 → 3.2.1

package/src/modules/table-resize/table-resize-box.ts

@@ -1,363 +1,714 @@
-import type { TableColFormat, TableMainFormat, TableRowFormat, TableWrapperFormat } from '../../formats';
-import type { TableUp } from '../../table-up';
-import type { TableSelection } from '../table-selection';
-import type { sizeChangeValue } from './table-resize-common';
-import Quill from 'quill';
-import { getTableMainRect, TableCaptionFormat, TableCellInnerFormat } from '../../formats';
-import { addScrollEvent, clearScrollEvent, createBEM, createResizeObserver, findChildBlot } from '../../utils';
-import { TableResizeCommon } from './table-resize-common';
-import { isTableAlignRight } from './utils';
-
-interface Point {
-  x: number;
-  y: number;
-}
-export class TableResizeBox extends TableResizeCommon {
-  root: HTMLElement;
-  tableWrapperBlot?: TableWrapperFormat;
-  resizeObserver?: ResizeObserver;
-  tableCols: TableColFormat[] = [];
-  tableRows: TableRowFormat[] = [];
-  rowHeadWrapper: HTMLElement | null = null;
-  colHeadWrapper: HTMLElement | null = null;
-  corner: HTMLElement | null = null;
-  scrollHandler: [HTMLElement, (e: Event) => void][] = [];
-  lastHeaderSelect: { isX: boolean; index: number } | null = null;
-  size: number = 12;
-  bem = createBEM('resize-box');
-
-  constructor(public tableModule: TableUp, public quill: Quill, _options: any) {
-    super(tableModule, quill);
-
-    this.root = this.tableModule.addContainer(this.bem.b());
-    this.quill.on(Quill.events.EDITOR_CHANGE, this.updateWhenTextChange);
-  }
-
-  updateWhenTextChange = (eventName: string) => {
-    if (eventName === Quill.events.TEXT_CHANGE) {
-      if (this.table && !this.quill.root.contains(this.table)) {
-        this.setSelectionTable(undefined);
-      }
-      else {
-        this.update();
-      }
-    }
-  };
-
-  setSelectionTable(table: HTMLTableElement | undefined) {
-    if (this.table === table) return;
-    this.hide();
-    this.table = table;
-    if (this.table) {
-      const newTableBlot = Quill.find(this.table) as TableMainFormat;
-      if (newTableBlot) {
-        this.tableBlot = newTableBlot;
-        this.tableWrapperBlot = this.tableBlot.parent as TableWrapperFormat;
-      }
-      this.show();
-    }
-    this.update();
-  }
-
-  handleResizerHeader(isX: boolean, index: number, e: MouseEvent) {
-    if (!this.table) return;
-    const { clientX, clientY } = e;
-    const tableRect = this.table.getBoundingClientRect();
-    if (!e.shiftKey) {
-      this.lastHeaderSelect = null;
-    }
-    const currentBoundary: [Point, Point] = [
-      { x: isX ? tableRect.left : clientX, y: isX ? clientY : tableRect.top },
-      { x: isX ? tableRect.right : clientX, y: isX ? clientY : tableRect.bottom },
-    ];
-    if (this.lastHeaderSelect) {
-      // find last click head
-      let lastX: number;
-      let lastY: number;
-      if (this.lastHeaderSelect.isX) {
-        const tableRowHeads = Array.from(this.root.getElementsByClassName(this.bem.be('row-header'))) as HTMLElement[];
-        const rect = tableRowHeads[this.lastHeaderSelect.index].getBoundingClientRect();
-        lastX = Math.min(rect.left, tableRect.left);
-        lastY = rect.top + rect.height / 2;
-      }
-      else {
-        const tableColHeads = Array.from(this.root.getElementsByClassName(this.bem.be('col-header'))) as HTMLElement[];
-        const rect = tableColHeads[this.lastHeaderSelect.index].getBoundingClientRect();
-        lastX = rect.left + rect.width / 2;
-        lastY = Math.min(rect.top, tableRect.top);
-      }
-
-      if (this.lastHeaderSelect.isX !== isX) {
-        currentBoundary[1] = {
-          x: Math.max(currentBoundary[0].x, lastX),
-          y: Math.max(currentBoundary[0].y, lastY),
-        };
-        currentBoundary[0] = {
-          x: Math.min(currentBoundary[0].x, lastX),
-          y: Math.min(currentBoundary[0].y, lastY),
-        };
-      }
-      else if (isX) {
-        currentBoundary[0].y = Math.min(currentBoundary[0].y, lastY);
-        currentBoundary[1].y = Math.max(currentBoundary[1].y, lastY);
-      }
-      else {
-        currentBoundary[0].x = Math.min(currentBoundary[0].x, lastX);
-        currentBoundary[1].x = Math.max(currentBoundary[1].x, lastX);
-      }
-    }
-    else {
-      this.lastHeaderSelect = { isX, index };
-    }
-
-    const tableSelection = this.tableModule.getModule<TableSelection>('table-selection');
-    if (tableSelection) {
-      tableSelection.table = this.table;
-      tableSelection.setSelectedTds(tableSelection.computeSelectedTds(...currentBoundary));
-      tableSelection.show();
-    }
-  }
-
-  findCurrentColIndex(e: MouseEvent): number {
-    return Array.from(this.root.getElementsByClassName(this.bem.be('col-separator'))).indexOf(e.target as HTMLElement);
-  }
-
-  colWidthChange(i: number, w: sizeChangeValue, isFull: boolean) {
-    const tableColHeads = Array.from(this.root.getElementsByClassName(this.bem.be('col-header'))) as HTMLElement[];
-    tableColHeads[i].style.width = isFull ? `${w.pre}%` : `${w.px}px`;
-  }
-
-  handleColMouseDownFunc = function (this: TableResizeBox, e: MouseEvent) {
-    const value = this.handleColMouseDown(e);
-    if (value && this.dragColBreak && this.tableBlot) {
-      const [tableCaptionBlot] = findChildBlot(this.tableBlot, TableCaptionFormat);
-      const offset = tableCaptionBlot && tableCaptionBlot.side === 'top' ? 0 : this.size;
-      Object.assign(this.dragColBreak.style, {
-        top: `${value.top - offset}px`,
-        left: `${value.left}px`,
-        height: `${value.height + this.size}px`,
-      });
-    }
-    return value;
-  }.bind(this);
-
-  bindColEvents() {
-    const tableColHeads = Array.from(this.root.getElementsByClassName(this.bem.be('col-header'))) as HTMLElement[];
-    const tableColHeadSeparators = Array.from(this.root.getElementsByClassName(this.bem.be('col-separator'))) as HTMLElement[];
-
-    addScrollEvent.call(this, this.tableWrapperBlot!.domNode, () => {
-      this.colHeadWrapper!.scrollLeft = this.tableWrapperBlot!.domNode.scrollLeft;
-    });
-
-    for (const [i, el] of tableColHeads.entries()) {
-      el.addEventListener('click', this.handleResizerHeader.bind(this, false, i));
-    }
-    for (const el of tableColHeadSeparators) {
-      el.addEventListener('mousedown', this.handleColMouseDownFunc);
-      // prevent drag
-      el.addEventListener('dragstart', e => e.preventDefault());
-    }
-  }
-
-  findCurrentRowIndex(e: MouseEvent): number {
-    return Array.from(this.root.getElementsByClassName(this.bem.be('row-separator'))).indexOf(e.target as HTMLElement);
-  }
-
-  rowHeightChange(i: number, h: number) {
-    const tableRowHeads = Array.from(this.root.getElementsByClassName(this.bem.be('row-header'))) as HTMLElement[];
-    tableRowHeads[i].style.height = `${h}px`;
-  }
-
-  handleRowMouseDownFunc = function (this: TableResizeBox, e: MouseEvent) {
-    const value = this.handleRowMouseDown(e);
-    if (value && this.dragRowBreak) {
-      Object.assign(this.dragRowBreak.style, {
-        top: `${value.top}px`,
-        left: `${value.left - this.size}px`,
-        width: `${value.width + this.size}px`,
-      });
-    }
-    return value;
-  }.bind(this);
-
-  bindRowEvents() {
-    const tableRowHeads = Array.from(this.root.getElementsByClassName(this.bem.be('row-header'))) as HTMLElement[];
-    const tableRowHeadSeparators = Array.from(this.root.getElementsByClassName(this.bem.be('row-separator'))) as HTMLElement[];
-
-    addScrollEvent.call(this, this.tableWrapperBlot!.domNode, () => {
-      this.rowHeadWrapper!.scrollTop = this.tableWrapperBlot!.domNode.scrollTop;
-    });
-
-    for (const [i, el] of tableRowHeads.entries()) {
-      el.addEventListener('click', this.handleResizerHeader.bind(this, true, i));
-    }
-    for (const el of tableRowHeadSeparators) {
-      el.addEventListener('mousedown', this.handleRowMouseDownFunc);
-      // prevent drag
-      el.addEventListener('dragstart', e => e.preventDefault());
-    }
-  }
-
-  update() {
-    if (!this.tableBlot || !this.tableWrapperBlot) return;
-    const { rect: tableRect } = getTableMainRect(this.tableBlot);
-    if (!tableRect) return;
-
-    this.root.innerHTML = '';
-
-    this.tableCols = this.tableBlot.getCols();
-    this.tableRows = this.tableBlot.getRows();
-    const tableWrapperRect = this.tableWrapperBlot.domNode.getBoundingClientRect();
-    const rootRect = this.quill.root.getBoundingClientRect();
-    Object.assign(this.root.style, {
-      top: `${Math.max(tableRect.y, tableWrapperRect.y) - rootRect.y}px`,
-      left: `${Math.max(tableRect.x, tableWrapperRect.x) - rootRect.x}px`,
-    });
-
-    if (this.tableCols.length > 0 && this.tableRows.length > 0) {
-      this.corner = document.createElement('div');
-      this.corner.classList.add(this.bem.be('corner'));
-      Object.assign(this.corner.style, {
-        width: `${this.size}px`,
-        height: `${this.size}px`,
-      });
-      this.corner.addEventListener('click', () => {
-        const tableSelection = this.tableModule.getModule<TableSelection>('table-selection');
-        if (tableSelection && this.tableBlot) {
-          tableSelection.setSelectedTds(this.tableBlot.descendants(TableCellInnerFormat));
-          tableSelection.show();
-          tableSelection.updateWithSelectedTds();
-        }
-      });
-      this.root.appendChild(this.corner);
-    }
-
-    if (this.tableCols.length > 0) {
-      let colHeadStr = '';
-      for (const [, col] of this.tableCols.entries()) {
-        let width = col.domNode.getBoundingClientRect().width;
-        if (width === 0) {
-          width = Number.parseInt(col.domNode.getAttribute('width')!, 10);
-        }
-        colHeadStr += `<div class="${this.bem.be('col-header')}" style="width: ${width}px">
-          <div class="${this.bem.be('col-separator')}" style="height: ${tableRect.height + this.size - 3}px"></div>
-        </div>`;
-      }
-      const colHeadWrapper = document.createElement('div');
-      colHeadWrapper.classList.add(this.bem.be('col'));
-      const colHead = document.createElement('div');
-      colHead.classList.add(this.bem.be('col-wrapper'));
-      Object.assign(colHeadWrapper.style, {
-        transform: `translateY(-${this.size}px)`,
-        maxWidth: `${tableWrapperRect.width}px`,
-        height: `${this.size}px`,
-      });
-      Object.assign(colHead.style, {
-        width: `${tableRect.width}px`,
-      });
-      colHead.innerHTML = colHeadStr;
-      colHeadWrapper.appendChild(colHead);
-      this.root.appendChild(colHeadWrapper);
-      colHeadWrapper.scrollLeft = this.tableWrapperBlot.domNode.scrollLeft;
-      this.colHeadWrapper = colHeadWrapper;
-      this.bindColEvents();
-    }
-
-    if (this.tableRows.length > 0) {
-      let rowHeadStr = '';
-      for (const [, row] of this.tableRows.entries()) {
-        const height = `${row.domNode.getBoundingClientRect().height}px`;
-        rowHeadStr += `<div class="${this.bem.be('row-header')}" style="height: ${Number.parseFloat(height)}px">
-          <div class="${this.bem.be('row-separator')}" style="width: ${tableRect.width + this.size - 3}px"></div>
-        </div>`;
-      }
-      const rowHeadWrapper = document.createElement('div');
-      rowHeadWrapper.classList.add(this.bem.be('row'));
-      const rowHead = document.createElement('div');
-      rowHead.classList.add(this.bem.be('row-wrapper'));
-      Object.assign(rowHeadWrapper.style, {
-        transform: `translateX(-${this.size}px)`,
-        width: `${this.size}px`,
-        maxHeight: `${tableWrapperRect.height}px`,
-      });
-      Object.assign(rowHead.style, {
-        height: `${tableRect.height}px`,
-      });
-      rowHead.innerHTML = rowHeadStr;
-      rowHeadWrapper.appendChild(rowHead);
-      this.root.appendChild(rowHeadWrapper);
-      rowHeadWrapper.scrollTop = this.tableWrapperBlot.domNode.scrollTop;
-      this.rowHeadWrapper = rowHeadWrapper;
-      this.bindRowEvents();
-    }
-
-    // computed about `caption`
-    const [tableCaptionBlot] = findChildBlot(this.tableBlot, TableCaptionFormat);
-    const tableCaptionIsTop = !tableCaptionBlot || !(tableCaptionBlot && tableCaptionBlot.side === 'top');
-    if (tableCaptionIsTop) {
-      this.root.classList.remove(this.bem.is('caption-bottom'));
-    }
-    else {
-      this.root.classList.add(this.bem.is('caption-bottom'));
-    }
-    let cornerTranslateX = -1 * this.size;
-    let rowHeadWrapperTranslateX = -1 * this.size;
-    if (isTableAlignRight(this.tableBlot)) {
-      this.root.classList.add(this.bem.is('align-right'));
-      cornerTranslateX = Math.min(tableWrapperRect.width, tableRect.width);
-      rowHeadWrapperTranslateX = Math.min(tableWrapperRect.width, tableRect.width);
-    }
-    else {
-      this.root.classList.remove(this.bem.is('align-right'));
-    }
-    if (this.corner) {
-      Object.assign(this.corner.style, {
-        transform: `translateY(${-1 * this.size}px) translateX(${cornerTranslateX}px)`,
-        top: `${tableCaptionIsTop ? 0 : tableRect.height + this.size}px`,
-      });
-    }
-    if (this.rowHeadWrapper) {
-      Object.assign(this.rowHeadWrapper.style, {
-        transform: `translateX(${rowHeadWrapperTranslateX}px)`,
-        maxHeight: `${tableWrapperRect.height}px`,
-      });
-    }
-    if (this.colHeadWrapper) {
-      Object.assign(this.colHeadWrapper.style, {
-        top: `${tableCaptionIsTop ? 0 : tableRect.height + this.size}px`,
-        maxWidth: `${tableWrapperRect.width}px`,
-      });
-    }
-  }
-
-  show() {
-    if (!this.table || !this.tableBlot || !this.tableWrapperBlot) return;
-
-    this.root.classList.remove(this.bem.is('hidden'));
-    this.resizeObserver = createResizeObserver(() => this.update(), { ignoreFirstBind: true });
-    this.resizeObserver.observe(this.table);
-
-    this.update();
-    addScrollEvent.call(this, this.quill.root, () => {
-      this.update();
-    });
-  }
-
-  hide() {
-    this.root.classList.add(this.bem.is('hidden'));
-    if (this.resizeObserver) {
-      this.resizeObserver.disconnect();
-      this.resizeObserver = undefined;
-    }
-  }
-
-  destroy() {
-    this.hide();
-    clearScrollEvent.call(this);
-    this.quill.off(Quill.events.EDITOR_CHANGE, this.updateWhenTextChange);
-    for (const [dom, handle] of this.scrollHandler) {
-      dom.removeEventListener('scroll', handle);
-    }
-    this.root.remove();
-  }
-}
+import type { TableMainFormat, TableWrapperFormat } from '../../formats';
+import type { TableUp } from '../../table-up';
+import type { DragElementOptions, Position, TableResizeBoxOptions } from '../../utils';
+import type { TableSelection } from '../table-selection';
+import Quill from 'quill';
+import { getTableMainRect, TableCaptionFormat, TableCellInnerFormat } from '../../formats';
+import { addScrollEvent, clearScrollEvent, createBEM, createResizeObserver, dragElement, findChildBlot, removeScrollEvent, tableUpEvent, tableUpInternal } from '../../utils';
+import { TableResizeCommon } from './table-resize-common';
+import { DragTableHelper, TableAutoScroller } from './table-resize-drag';
+import { isCellsSpan, isTableAlignRight } from './utils';
+
+export class TableResizeBox extends TableResizeCommon {
+  static moduleName = 'table-resize-box';
+
+  options: TableResizeBoxOptions;
+  root: HTMLElement;
+  tableWrapperBlot?: TableWrapperFormat;
+  resizeObserver?: ResizeObserver;
+  rowHeadWrapper: HTMLElement | null = null;
+  colHeadWrapper: HTMLElement | null = null;
+  corner: HTMLElement | null = null;
+  scrollHandler: [HTMLElement, (e: Event) => void][] = [];
+  lastHeaderSelect: { isX: boolean; index: number } | null = null;
+  bem = createBEM('resize-box');
+  draggingColIndex = -1;
+  draggingRowIndex = -1;
+  stopColDrag: (() => void)[] = [];
+  stopRowDrag: (() => void)[] = [];
+  dragWrapper: HTMLElement | null = null;
+  dragPlaceholder: HTMLElement | null = null;
+  markIndicator: HTMLElement | null = null;
+  dragTip: HTMLElement | null = null;
+  stopColMoveDrag: (() => void)[] = [];
+  stopRowMoveDrag: (() => void)[] = [];
+  autoScroller: TableAutoScroller | null = null;
+  updateContentDraggingPosition: () => void;
+  cellSpanIndex: Set<number> = new Set();
+  dragPlaceholderStartPosition = { x: 0, y: 0 };
+
+  constructor(public tableModule: TableUp, public quill: Quill, options: Partial<TableResizeBoxOptions>) {
+    super(tableModule, quill);
+    this.options = this.resolveOptions(options);
+
+    this.updateContentDraggingPosition = () => this.updateContentDraggerPosition(null as any);
+    this.root = this.tableModule.addContainer(this.bem.b());
+    this.quill.on(Quill.events.EDITOR_CHANGE, this.updateWhenTextChange);
+    this.quill.on(tableUpEvent.TABLE_SELECTION_CHANGE, this.updateWrapperHead);
+  }
+
+  resolveOptions(options: Partial<TableResizeBoxOptions>) {
+    return Object.assign({
+      size: 16,
+      draggable: true,
+    }, options);
+  }
+
+  updateWrapperHead = () => {
+    if (!this.options.draggable) return;
+    const tableSelection = this.tableModule.getModule<TableSelection>(tableUpInternal.tableSelectionName);
+    if (!tableSelection || !this.tableBlot) return;
+    const { isSpan: isSpanX, cellIndex: cellXIndex } = isCellsSpan(true, this.tableBlot, tableSelection.selectedTds);
+    const { isSpan: isSpanY, cellIndex: cellYIndex } = isCellsSpan(false, this.tableBlot, tableSelection.selectedTds);
+    // add cursor drag style
+    // but if select all table, style will not be added
+    if (isSpanX) {
+      const tableColHeads = Array.from(this.root.getElementsByClassName(this.bem.be('col-header'))) as HTMLElement[];
+      for (const el of tableColHeads) el.classList.remove(this.bem.is('selected'));
+      if (!isSpanY) {
+        for (const i of Array.from(cellXIndex).slice(0, -1)) {
+          tableColHeads[i].classList.add(this.bem.is('selected'));
+        }
+      }
+    }
+    if (isSpanY) {
+      const tableRowHeads = Array.from(this.root.getElementsByClassName(this.bem.be('row-header'))) as HTMLElement[];
+      const tableRowHeadsSorted: HTMLElement[] = [];
+      for (const el of tableRowHeads) {
+        el.classList.remove(this.bem.is('selected'));
+        tableRowHeadsSorted[Number(el.dataset.index)] = el;
+      }
+      if (!isSpanX) {
+        for (const i of Array.from(cellYIndex).slice(0, -1)) {
+          if (tableRowHeadsSorted[i]) {
+            tableRowHeadsSorted[i].classList.add(this.bem.is('selected'));
+          }
+        }
+      }
+    }
+  };
+
+  updateWhenTextChange = (eventName: string) => {
+    if (eventName === Quill.events.TEXT_CHANGE) {
+      if (this.table && !this.quill.root.contains(this.table)) {
+        this.setSelectionTable(undefined);
+      }
+      else {
+        this.update();
+      }
+    }
+  };
+
+  setSelectionTable(table: HTMLTableElement | undefined) {
+    if (this.table === table) return;
+    this.hide();
+    this.table = table;
+    if (this.table) {
+      const newTableBlot = Quill.find(this.table) as TableMainFormat;
+      if (newTableBlot) {
+        this.tableBlot = newTableBlot;
+        this.tableWrapperBlot = this.tableBlot.parent as TableWrapperFormat;
+      }
+      this.show();
+    }
+    this.update();
+  }
+
+  handleResizerHeaderClick(isX: boolean, index: number, e: MouseEvent) {
+    if (!this.table) return;
+    const { clientX, clientY } = e;
+    const tableRect = this.table.getBoundingClientRect();
+    if (!e.shiftKey) {
+      this.lastHeaderSelect = null;
+    }
+    const currentBoundary: [Position, Position] = [
+      { x: isX ? tableRect.left : clientX, y: isX ? clientY : tableRect.top },
+      { x: isX ? tableRect.right : clientX, y: isX ? clientY : tableRect.bottom },
+    ];
+    if (this.lastHeaderSelect) {
+      // find last click head
+      let lastX: number;
+      let lastY: number;
+      if (this.lastHeaderSelect.isX) {
+        const tableRowHeads = Array.from(this.root.getElementsByClassName(this.bem.be('row-header'))) as HTMLElement[];
+        const rect = tableRowHeads[this.lastHeaderSelect.index].getBoundingClientRect();
+        lastX = Math.min(rect.left, tableRect.left);
+        lastY = rect.top + rect.height / 2;
+      }
+      else {
+        const tableColHeads = Array.from(this.root.getElementsByClassName(this.bem.be('col-header'))) as HTMLElement[];
+        const rect = tableColHeads[this.lastHeaderSelect.index].getBoundingClientRect();
+        lastX = rect.left + rect.width / 2;
+        lastY = Math.min(rect.top, tableRect.top);
+      }
+
+      if (this.lastHeaderSelect.isX !== isX) {
+        currentBoundary[1] = {
+          x: Math.max(currentBoundary[0].x, lastX),
+          y: Math.max(currentBoundary[0].y, lastY),
+        };
+        currentBoundary[0] = {
+          x: Math.min(currentBoundary[0].x, lastX),
+          y: Math.min(currentBoundary[0].y, lastY),
+        };
+      }
+      else if (isX) {
+        currentBoundary[0].y = Math.min(currentBoundary[0].y, lastY);
+        currentBoundary[1].y = Math.max(currentBoundary[1].y, lastY);
+      }
+      else {
+        currentBoundary[0].x = Math.min(currentBoundary[0].x, lastX);
+        currentBoundary[1].x = Math.max(currentBoundary[1].x, lastX);
+      }
+    }
+    else {
+      this.lastHeaderSelect = { isX, index };
+    }
+
+    const tableSelection = this.tableModule.getModule<TableSelection>(tableUpInternal.tableSelectionName);
+    if (tableSelection) {
+      tableSelection.table = this.table;
+      tableSelection.setSelectedTds(tableSelection.computeSelectedTds(...currentBoundary));
+      tableSelection.show();
+    }
+  }
+
+  findDragColIndex() {
+    return this.draggingColIndex;
+  }
+
+  findDragRowIndex() {
+    return this.draggingRowIndex;
+  }
+
+  updateContentDraggerPosition(dragHelper: DragTableHelper) {
+    if (!dragHelper || !this.dragWrapper || !this.markIndicator || !this.tableBlot || !this.tableWrapperBlot) return;
+    const { rect: tableRect } = getTableMainRect(this.tableBlot);
+    if (!tableRect || dragHelper.moveToIndex < 0) return;
+    const tableWrapperRect = this.tableWrapperBlot.domNode.getBoundingClientRect();
+    const rootRect = this.quill.root.getBoundingClientRect();
+    Object.assign(this.dragWrapper.style, {
+      top: `${Math.max(tableRect.y, tableWrapperRect.y) - rootRect.y}px`,
+      left: `${Math.max(tableRect.x, tableWrapperRect.x) - rootRect.x}px`,
+    });
+
+    const { position } = dragHelper.startPosition[dragHelper.moveToIndex] || {};
+    const offsetX = this.dragXCommon.getOffsetFromStart(this.tableBlot);
+    const offsetY = this.dragYCommon.getOffsetFromStart(this.tableBlot);
+    const markIndicatorStyle = dragHelper.isDragX
+      ? {
+          top: `${Math.max(tableRect.y, tableWrapperRect.y) - rootRect.y}px`,
+          left: `${position - rootRect.left + offsetX}px`,
+        }
+      : {
+          top: `${position - rootRect.top + offsetY}px`,
+          left: `${Math.max(tableRect.x, tableWrapperRect.x) - rootRect.x}px`,
+        };
+    Object.assign(this.markIndicator.style, markIndicatorStyle);
+  }
+
+  createContentDragger(e: PointerEvent, isX: boolean, dragHelper: DragTableHelper) {
+    if (!this.tableBlot) return;
+    const tableSelection = this.tableModule.getModule<TableSelection>(tableUpInternal.tableSelectionName);
+    if (!tableSelection || !this.tableWrapperBlot) return;
+    tableSelection.updateWithSelectedTds();
+    const placeholderWidth = tableSelection.boundary!.width;
+    const placeholderHeight = tableSelection.boundary!.height;
+
+    const rootRect = this.quill.root.getBoundingClientRect();
+    const tableWrapperRect = this.tableWrapperBlot.domNode.getBoundingClientRect();
+    const dragBEM = createBEM('drag');
+    this.dragWrapper = this.tableModule.addContainer(dragBEM.b());
+    const wrapLeft = tableWrapperRect.x - rootRect.x;
+    const wrapTop = tableWrapperRect.y - rootRect.y;
+    Object.assign(this.dragWrapper.style, {
+      left: `${wrapLeft}px`,
+      top: `${wrapTop}px`,
+      width: `${tableWrapperRect.width}px`,
+      height: `${tableWrapperRect.height}px`,
+    });
+
+    this.dragPlaceholder = document.createElement('div');
+    this.dragPlaceholder.classList.add(dragBEM.be('placeholder'), dragBEM.is('hidden'));
+    this.dragWrapper.appendChild(this.dragPlaceholder);
+    this.dragPlaceholderStartPosition = {
+      x: isX ? tableSelection.boundary!.x - wrapLeft : 0,
+      y: isX ? 0 : tableSelection.boundary!.y - wrapTop,
+    };
+    Object.assign(this.dragPlaceholder.style, {
+      left: `${this.dragPlaceholderStartPosition.x}px`,
+      top: `${this.dragPlaceholderStartPosition.y}px`,
+      width: `${placeholderWidth}px`,
+      height: `${placeholderHeight}px`,
+    });
+
+    this.markIndicator = this.tableModule.addContainer(dragBEM.be('indicator'));
+    const markIndicatorStyle = isX
+      ? {
+          top: `${wrapTop}px`,
+          height: `${Math.min(tableSelection.boundary!.height, tableWrapperRect.height)}px`,
+        }
+      : {
+          left: `${wrapLeft}px`,
+          width: `${Math.min(tableSelection.boundary!.width, tableWrapperRect.width)}px`,
+        };
+    Object.assign(this.markIndicator.style, markIndicatorStyle);
+    this.updateContentDraggingPosition = () => this.updateContentDraggerPosition(dragHelper);
+    addScrollEvent.call(this, this.quill.root, this.updateContentDraggingPosition);
+    addScrollEvent.call(this, this.tableWrapperBlot.domNode, this.updateContentDraggingPosition);
+
+    this.dragTip = this.tableModule.addContainer(dragBEM.be('tip'));
+    const dragTipContent = document.createElement('div');
+    dragTipContent.classList.add(dragBEM.be('tip-content'));
+    this.dragTip.appendChild(dragTipContent);
+
+    // absolute position. range in tableWrapper viewport
+    if (isX) {
+      this.dragXCommon.minRange = 0;
+      this.dragXCommon.maxRange = tableWrapperRect.width - placeholderWidth;
+    }
+    else {
+      this.dragYCommon.minRange = 0;
+      this.dragYCommon.maxRange = tableWrapperRect.height - placeholderHeight;
+    }
+  }
+
+  bindColEvents() {
+    if (!this.tableWrapperBlot) return;
+    const tableColHeads = Array.from(this.root.getElementsByClassName(this.bem.be('col-header'))) as HTMLElement[];
+    const tableColHeadSeparators = Array.from(this.root.getElementsByClassName(this.bem.be('col-separator'))) as HTMLElement[];
+
+    addScrollEvent.call(this, this.tableWrapperBlot.domNode, () => {
+      this.colHeadWrapper!.scrollLeft = this.tableWrapperBlot!.domNode.scrollLeft;
+    });
+
+    if (this.stopColMoveDrag.length > 0) {
+      for (const stop of this.stopColMoveDrag) stop();
+      this.stopColMoveDrag = [];
+    }
+    const dragHelper = new DragTableHelper(this.tableModule, this.tableBlot!, this.dragXCommon, {
+      isDragX: true,
+      allowMoveToIndex: index => this.allowMoveToIndex(index),
+    });
+    for (const [index, el] of tableColHeads.entries()) {
+      el.addEventListener('click', this.handleResizerHeaderClick.bind(this, false, index));
+      if (this.options.draggable) {
+        const { stop } = dragElement(el, this.dragHeadOptions(true, { index, dragHelper }));
+        this.stopColMoveDrag.push(stop);
+      }
+    }
+
+    if (this.stopColDrag.length > 0) {
+      for (const stop of this.stopColDrag) stop();
+      this.stopColDrag = [];
+    }
+    for (const [i, el] of tableColHeadSeparators.entries()) {
+      const { stop } = dragElement(el, {
+        axis: 'x',
+        onStart: (position, e) => {
+          this.dragging = true;
+
+          this.draggingColIndex = i;
+          this.calculateColDragRange();
+          this.dragXCommon.createBreak();
+          if (!this.tableBlot) return;
+          const tableWrapperRect = this.tableBlot.domNode.parentElement!.getBoundingClientRect();
+          const { rect: tableRect } = getTableMainRect(this.tableBlot);
+          if (!tableRect) return;
+          // record current tablb rect to calculate the offset if have scroll when dragging
+          this.dragXCommon.startValue = tableRect.x;
+          const rootRect = this.quill.root.getBoundingClientRect();
+          Object.assign(this.dragXCommon.dragBreak!.style, {
+            top: `${Math.max(tableWrapperRect.y, tableRect.y) - rootRect.y}px`,
+            left: `${e.clientX - rootRect.x}px`,
+            height: `${Math.min(tableWrapperRect.height, tableRect.height)}px`,
+          });
+        },
+        onMove: ({ position }) => {
+          if (!this.dragXCommon.dragBreak) return;
+          const resultX = this.dragXCommon.limitRange(this.tableBlot, position.x, true);
+          const rootRect = this.quill.root.getBoundingClientRect();
+          this.dragXCommon.dragBreak.style.left = `${resultX - rootRect.x}px`;
+        },
+        onEnd: ({ position }) => {
+          this.dragging = false;
+
+          this.updateTableCol(position.x);
+          this.removeBreak();
+        },
+      });
+      this.stopColDrag.push(stop);
+
+      el.addEventListener('dragstart', e => e.preventDefault());
+    }
+  }
+
+  bindRowEvents() {
+    const tableRowHeads = Array.from(this.root.getElementsByClassName(this.bem.be('row-header'))) as HTMLElement[];
+    const tableRowHeadSeparators = Array.from(this.root.getElementsByClassName(this.bem.be('row-separator'))) as HTMLElement[];
+
+    addScrollEvent.call(this, this.tableWrapperBlot!.domNode, () => {
+      this.rowHeadWrapper!.scrollTop = this.tableWrapperBlot!.domNode.scrollTop;
+    });
+
+    if (this.stopRowMoveDrag.length > 0) {
+      for (const stop of this.stopRowMoveDrag) stop();
+      this.stopRowMoveDrag = [];
+    }
+    const dragHelper = new DragTableHelper(this.tableModule, this.tableBlot!, this.dragYCommon, {
+      isDragX: false,
+      allowMoveToIndex: index => this.allowMoveToIndex(index),
+    });
+    for (const [i, el] of tableRowHeads.entries()) {
+      // emptyRow doesn't generate head. logic need row index, not head inedx
+      const index = Number(el.dataset.index || i);
+      el.addEventListener('click', this.handleResizerHeaderClick.bind(this, true, i));
+      if (this.options.draggable) {
+        const { stop } = dragElement(el, this.dragHeadOptions(false, { index, dragHelper }));
+        this.stopRowMoveDrag.push(stop);
+      }
+    }
+
+    if (this.stopRowDrag.length > 0) {
+      for (const stop of this.stopRowDrag) stop();
+      this.stopRowDrag = [];
+    }
+    for (const [i, el] of tableRowHeadSeparators.entries()) {
+      const { stop } = dragElement(el, {
+        axis: 'y',
+        onStart: (ops, e) => {
+          this.dragging = true;
+
+          this.draggingRowIndex = i;
+          this.calculateRowDragRange();
+          this.dragYCommon.createBreak();
+          if (!this.tableBlot) return;
+          const tableWrapperRect = this.tableBlot.domNode.parentElement!.getBoundingClientRect();
+          const { rect: tableRect } = getTableMainRect(this.tableBlot);
+          if (!tableRect) return;
+          // record current tablb rect to calculate the offset if have scroll when dragging
+          this.dragYCommon.startValue = tableRect.y;
+          const rootRect = this.quill.root.getBoundingClientRect();
+          Object.assign(this.dragYCommon.dragBreak!.style, {
+            top: `${e.clientY - rootRect.y}px`,
+            left: `${Math.max(tableWrapperRect.x, tableRect.x) - rootRect.x}px`,
+            width: `${Math.min(tableWrapperRect.width, tableRect.width)}px`,
+          });
+        },
+        onMove: ({ position }) => {
+          if (!this.dragYCommon.dragBreak || !this.table) return;
+          const resultY = this.dragYCommon.limitRange(this.tableBlot, position.y, true);
+          const rootRect = this.quill.root.getBoundingClientRect();
+          this.dragYCommon.dragBreak.style.top = `${resultY - rootRect.y}px`;
+        },
+        onEnd: ({ position }) => {
+          this.dragging = false;
+
+          this.updateTableRow(position.y);
+          this.removeBreak();
+        },
+      });
+      this.stopRowDrag.push(stop);
+
+      el.addEventListener('dragstart', e => e.preventDefault());
+    }
+  }
+
+  allowMoveToIndex(index: number) {
+    return !this.cellSpanIndex.has(index);
+  }
+
+  recordCellSpan(isX: boolean) {
+    // record colspan or rowspan cell index when dragging content
+    // drag content not allow to insert on these index
+    const cellIndex = new Set<number>();
+    if (!this.tableBlot) return cellIndex;
+    const cells = this.tableBlot.descendants(TableCellInnerFormat);
+    const ids: string[] = isX ? this.tableBlot.getColIds() : this.tableBlot.getRowIds();
+    const spanAttr = isX ? 'colspan' : 'rowspan';
+    for (const cell of cells) {
+      if (cell[spanAttr] <= 1) continue;
+      const index = ids.indexOf(isX ? cell.colId : cell.rowId);
+      if (index === -1) continue;
+      for (let i = index + 1; i < index + cell[spanAttr] && i < ids.length; i++) {
+        cellIndex.add(i);
+      }
+    }
+    return cellIndex;
+  }
+
+  dragHeadOptions(isX: boolean, context: { index: number; dragHelper: DragTableHelper }): Partial<DragElementOptions> {
+    const { dragHelper, index } = context;
+    return {
+      axis: isX ? 'x' : 'y',
+      onStart: (positionInfo, e) => {
+        let prevent = false;
+        dragHelper.onStart(positionInfo, e, () => {
+          if (!this.tableBlot) return;
+          const count = (isX ? this.tableBlot.getCols() : this.tableBlot.getRows()).length;
+          if (dragHelper.selectedIndex.size > count) {
+            prevent = false;
+            return;
+          }
+          const selectedIndex = new Set(Array.from(dragHelper.selectedIndex).slice(0, -1));
+          prevent = selectedIndex.has(index);
+          if (!selectedIndex.has(index)) {
+            prevent = false;
+            return;
+          }
+          this.dragging = true;
+          if (isX) {
+            this.draggingColIndex = index;
+          }
+          else {
+            this.draggingRowIndex = index;
+          }
+          this.createContentDragger(e, isX, dragHelper);
+          this.cellSpanIndex = this.recordCellSpan(isX);
+          if (!this.tableWrapperBlot) return;
+          this.autoScroller = new TableAutoScroller(50, 40);
+          this.autoScroller.minusY = this.options.size;
+          this.autoScroller.minusX = this.options.size;
+          this.autoScroller.updateMousePosition(e.clientX, e.clientY);
+          this.autoScroller.start(this.tableWrapperBlot.domNode);
+        });
+        return prevent;
+      },
+      onMove: (positionInfo, e) => {
+        dragHelper.onMove(positionInfo, e, (helper) => {
+          const { movePosition } = positionInfo;
+          this.autoScroller?.updateMousePosition(e.clientX, e.clientY);
+          if (!this.dragPlaceholder || !this.markIndicator || !this.dragTip || !this.tableWrapperBlot) return;
+
+          this.dragPlaceholder.classList.remove(this.bem.is('hidden'));
+          const resultPosition = helper.dragCommon.limitRange(
+            this.tableBlot,
+            this.dragPlaceholderStartPosition[isX ? 'x' : 'y'] + movePosition[isX ? 'x' : 'y'],
+            false,
+          );
+          this.dragPlaceholder.style[isX ? 'left' : 'top'] = `${resultPosition}px`;
+          Object.assign(this.dragTip.style, {
+            left: `${e.clientX - 10}px`,
+            top: `${e.clientY - 10}px`,
+          });
+          if (helper.moveToIndex < 0) {
+            Object.assign(this.markIndicator.style, {
+              opacity: '0',
+            });
+            return;
+          }
+          const rootRect = this.quill.root.getBoundingClientRect();
+          const isBeyond = helper.moveToIndex >= helper.startPosition.length;
+          const item = helper.startPosition[isBeyond ? helper.moveToIndex - 1 : helper.moveToIndex];
+          const indicatorPosition = item.position + (isBeyond ? item.size : 0);
+          const offset = helper.dragCommon.getOffsetFromStart(this.tableBlot);
+          Object.assign(this.markIndicator.style, {
+            opacity: '1',
+            [isX ? 'left' : 'top']: `${indicatorPosition - (isX ? rootRect.left : rootRect.top) + offset}px`,
+          });
+        });
+      },
+      onEnd: (positionInfo, e) => {
+        dragHelper.onEnd(positionInfo, e, (helper) => {
+          const changeDelta = helper.updateTableStructure(
+            this.quill.getContents(),
+            (isX ? this.draggingColIndex : this.draggingRowIndex) > helper.moveToIndex,
+          );
+          this.quill.updateContents(changeDelta);
+          this.dragging = false;
+          this.cellSpanIndex = new Set();
+          this.autoScroller?.stop();
+          removeScrollEvent.call(this, this.quill.root, this.updateContentDraggingPosition);
+          removeScrollEvent.call(this, this.tableWrapperBlot!.domNode, this.updateContentDraggingPosition);
+          if (this.dragWrapper) {
+            this.dragWrapper.remove();
+            this.dragWrapper = null;
+          }
+          if (this.markIndicator) {
+            this.markIndicator.remove();
+            this.markIndicator = null;
+          }
+          if (this.dragTip) {
+            this.dragTip.remove();
+            this.dragTip = null;
+          }
+        });
+      },
+    };
+  }
+
+  update() {
+    if (!this.tableBlot || !this.tableWrapperBlot) return;
+    const { rect: tableRect } = getTableMainRect(this.tableBlot);
+    if (!tableRect) return;
+
+    this.root.innerHTML = '';
+
+    const tableCols = this.tableBlot.getCols();
+    const tableRows = this.tableBlot.getRows();
+    const tableWrapperRect = this.tableWrapperBlot.domNode.getBoundingClientRect();
+    const rootRect = this.quill.root.getBoundingClientRect();
+    Object.assign(this.root.style, {
+      top: `${Math.max(tableRect.y, tableWrapperRect.y) - rootRect.y}px`,
+      left: `${Math.max(tableRect.x, tableWrapperRect.x) - rootRect.x}px`,
+    });
+
+    if (tableCols.length > 0 && tableRows.length > 0) {
+      this.corner = document.createElement('div');
+      this.corner.classList.add(this.bem.be('corner'));
+      Object.assign(this.corner.style, {
+        width: `${this.options.size}px`,
+        height: `${this.options.size}px`,
+      });
+      this.corner.addEventListener('click', () => {
+        const tableSelection = this.tableModule.getModule<TableSelection>(tableUpInternal.tableSelectionName);
+        if (tableSelection && this.tableBlot) {
+          tableSelection.setSelectedTds(this.tableBlot.descendants(TableCellInnerFormat));
+          tableSelection.show();
+          tableSelection.updateWithSelectedTds();
+        }
+      });
+      this.root.appendChild(this.corner);
+    }
+
+    if (tableCols.length > 0) {
+      let colHeadStr = '';
+      for (const col of tableCols) {
+        let width = col.domNode.getBoundingClientRect().width;
+        if (width === 0) {
+          width = Number.parseInt(col.domNode.getAttribute('width')!, 10);
+        }
+        colHeadStr += `<div class="${this.bem.be('col-header')}" style="width: ${width}px">
+          <div class="${this.bem.be('col-separator')}" style="height: ${tableRect.height + this.options.size - 3}px"></div>
+        </div>`;
+      }
+      const colHeadWrapper = document.createElement('div');
+      colHeadWrapper.classList.add(this.bem.be('col'));
+      const colHead = document.createElement('div');
+      colHead.classList.add(this.bem.be('col-wrapper'));
+      Object.assign(colHeadWrapper.style, {
+        transform: `translateY(-${this.options.size}px)`,
+        maxWidth: `${tableWrapperRect.width}px`,
+        height: `${this.options.size}px`,
+      });
+      Object.assign(colHead.style, {
+        width: `${tableRect.width}px`,
+      });
+      colHead.innerHTML = colHeadStr;
+      colHeadWrapper.appendChild(colHead);
+      this.root.appendChild(colHeadWrapper);
+      colHeadWrapper.scrollLeft = this.tableWrapperBlot.domNode.scrollLeft;
+      this.colHeadWrapper = colHeadWrapper;
+      this.bindColEvents();
+    }
+
+    if (tableRows.length > 0) {
+      let rowHeadStr = '';
+      for (let i = 0; i < tableRows.length; i++) {
+        const index = i;
+        const row = tableRows[i];
+        let height = row.domNode.getBoundingClientRect().height;
+        // empty row have different height in chrome and firefox
+        // count total height to set
+        if (row.children.length === 1 && (row.children.head?.emptyRow.length || 0) > 0) {
+          const length = row.children.head!.emptyRow.length;
+          for (let start = i + 1; start < tableRows.length && start <= i + length; start++) {
+            const nextRow = tableRows[start];
+            height += nextRow.domNode.getBoundingClientRect().height;
+          }
+          i += length;
+        }
+        rowHeadStr += `<div class="${this.bem.be('row-header')}" data-index="${index}" style="height: ${height}px">
+          <div class="${this.bem.be('row-separator')}" style="width: ${tableRect.width + this.options.size - 3}px"></div>
+        </div>`;
+      }
+      const rowHeadWrapper = document.createElement('div');
+      rowHeadWrapper.classList.add(this.bem.be('row'));
+      const rowHead = document.createElement('div');
+      rowHead.classList.add(this.bem.be('row-wrapper'));
+      Object.assign(rowHeadWrapper.style, {
+        transform: `translateX(-${this.options.size}px)`,
+        width: `${this.options.size}px`,
+        maxHeight: `${tableWrapperRect.height}px`,
+      });
+      Object.assign(rowHead.style, {
+        height: `${tableRect.height}px`,
+      });
+      rowHead.innerHTML = rowHeadStr;
+      rowHeadWrapper.appendChild(rowHead);
+      this.root.appendChild(rowHeadWrapper);
+      rowHeadWrapper.scrollTop = this.tableWrapperBlot.domNode.scrollTop;
+      this.rowHeadWrapper = rowHeadWrapper;
+      this.bindRowEvents();
+    }
+
+    // computed about `caption`
+    const [tableCaptionBlot] = findChildBlot(this.tableBlot, TableCaptionFormat);
+    const tableCaptionIsTop = !tableCaptionBlot || !(tableCaptionBlot?.side === 'top');
+    if (tableCaptionIsTop) {
+      this.root.classList.remove(this.bem.is('caption-bottom'));
+    }
+    else {
+      this.root.classList.add(this.bem.is('caption-bottom'));
+    }
+    let cornerTranslateX = -1 * this.options.size;
+    let rowHeadWrapperTranslateX = -1 * this.options.size;
+    if (isTableAlignRight(this.tableBlot)) {
+      this.root.classList.add(this.bem.is('align-right'));
+      cornerTranslateX = Math.min(tableWrapperRect.width, tableRect.width);
+      rowHeadWrapperTranslateX = Math.min(tableWrapperRect.width, tableRect.width);
+    }
+    else {
+      this.root.classList.remove(this.bem.is('align-right'));
+    }
+    if (this.corner) {
+      Object.assign(this.corner.style, {
+        transform: `translateY(${-1 * this.options.size}px) translateX(${cornerTranslateX}px)`,
+        top: `${tableCaptionIsTop ? 0 : tableRect.height + this.options.size}px`,
+      });
+    }
+    if (this.rowHeadWrapper) {
+      Object.assign(this.rowHeadWrapper.style, {
+        transform: `translateX(${rowHeadWrapperTranslateX}px)`,
+        maxHeight: `${tableWrapperRect.height}px`,
+      });
+    }
+    if (this.colHeadWrapper) {
+      Object.assign(this.colHeadWrapper.style, {
+        top: `${tableCaptionIsTop ? 0 : tableRect.height + this.options.size}px`,
+        maxWidth: `${tableWrapperRect.width}px`,
+      });
+    }
+  }
+
+  show() {
+    if (!this.table || !this.tableBlot) return;
+
+    this.root.classList.remove(this.bem.is('hidden'));
+    this.resizeObserver = createResizeObserver(() => this.update(), { ignoreFirstBind: true });
+    this.resizeObserver.observe(this.table);
+
+    this.update();
+    addScrollEvent.call(this, this.quill.root, () => {
+      this.update();
+    });
+  }
+
+  hide() {
+    this.root.classList.add(this.bem.is('hidden'));
+    if (this.resizeObserver) {
+      this.resizeObserver.disconnect();
+      this.resizeObserver = undefined;
+    }
+  }
+
+  destroy() {
+    this.hide();
+    clearScrollEvent.call(this);
+    this.quill.off(Quill.events.EDITOR_CHANGE, this.updateWhenTextChange);
+    for (const [dom, handle] of this.scrollHandler) {
+      dom.removeEventListener('scroll', handle);
+    }
+    this.root.remove();
+  }
+}