@ebl-vue/editor-full 2.31.35 → 2.31.37

package/src/plugins/table/table.ts

@@ -0,0 +1,1202 @@
+import Toolbox from './toolbox';
+import * as $ from './utils/dom';
+import throttled from './utils/throttled';
+
+import {
+  IconDirectionLeftDown,
+  IconDirectionRightDown,
+  IconDirectionUpRight,
+  IconDirectionDownRight,
+  IconCross,
+
+} from '../../icons';
+type TableData = {
+    /**
+     * - number of rows in the table
+     */
+    /**
+     * - number of rows in the table
+     */
+    rows: number;
+    /**
+     * - number of columns in the table
+     */
+    /**
+     * - number of columns in the table
+     */
+  cols: number;
+    colWidth: string[];
+}
+const CSS = {
+  wrapper: 'tc-wrap',
+  wrapperReadOnly: 'tc-wrap--readonly',
+  table: 'tc-table',
+  row: 'tc-row',
+  withHeadings: 'tc-table--heading',
+  rowSelected: 'tc-row--selected',
+  cell: 'tc-cell',
+  cellSelected: 'tc-cell--selected',
+  addRow: 'tc-add-row',
+  addRowDisabled: 'tc-add-row--disabled',
+  addColumn: 'tc-add-column',
+  addColumnDisabled: 'tc-add-column--disabled',
+};
+
+/**
+ * @typedef {object} TableConfig
+ * @description Tool's config from Editor
+ * @property {boolean} withHeadings — Uses the first line as headings
+ * @property {string[][]} withHeadings — two-dimensional array with table contents
+ */
+
+/**
+ * @typedef {object} TableData - object with the data transferred to form a table
+ * @property {number} rows - number of rows in the table
+ * @property {number} cols - number of columns in the table
+ */
+
+
+/**
+ * Generates and manages table contents.
+ */
+export default class Table {
+
+  private readOnly: boolean;
+  private api: any;
+  private data: any;
+  private config: any;
+  private wrapper: any;
+  private table: any;
+  private toolboxColumn: any;
+  private toolboxRow: any;
+  private documentClicked: any;
+  private hoveredRow: any;
+  private hoveredColumn: any;
+  private selectedRow: any;
+  private selectedColumn: any;
+  private tunes: any;
+  private focusedCell: any;
+
+  private hoveredCell: any;
+  private isDragging: boolean;
+  //private draggingRow: number;
+  private draggingColumn: number;
+  //private draggingColArr: any[];
+  private startWidth: number;
+  private mouseStartX: number;
+  private colWidthArr:any[];
+  private minCellWidhth: number=50;
+  private defaultCellWidth = 100;
+  /**
+   * Creates
+   *
+   * @constructor
+   * @param {boolean} readOnly - read-only mode flag
+   * @param {object} api - Editor.js API
+   * @param {TableData} data - Editor.js API
+   * @param {TableConfig} config - Editor.js API
+   */
+  constructor(readOnly: boolean, api: any, data: TableData, config: any) {
+    this.readOnly = readOnly;
+    this.api = api;
+    this.data = data;
+    
+    this.config = config;
+
+    /**
+     * DOM nodes
+     */
+    this.wrapper = null;
+    this.table = null;
+    this.hoveredCell = null;
+
+    this.isDragging = false;
+    //this.draggingColArr = [];
+    //this.draggingRow = 0;
+    this.draggingColumn = 0;
+    this.startWidth = 0;
+    this.mouseStartX = 0;
+    this.colWidthArr = [];
+   
+
+    // 鼠标焦点数据
+    this.focusedCell = {
+      row: 0,
+      col: 0,
+    };
+    /**
+     * Toolbox for managing of columns
+     */
+    this.toolboxColumn = this.createColumnToolbox();
+    this.toolboxRow = this.createRowToolbox();
+
+    /**
+     * Create table and wrapper elements
+     */
+    this.createTableWrapper();
+
+    // Current hovered row index
+    this.hoveredRow = 0;
+
+    // Current hovered column index
+    this.hoveredColumn = 0;
+
+    // Index of last selected row via toolbox
+    this.selectedRow = 0;
+
+    // Index of last selected column via toolbox
+    this.selectedColumn = 0;
+
+    // Additional settings for the table
+    this.tunes = {
+      withHeadings: false
+    };
+
+    /**
+     * Resize table to match config/data size
+     */
+    this.resize();
+    
+    if(this.data.colWidth&&this.data.colWidth.length > 0) {
+      this.colWidthArr = this.data.colWidth;
+    }
+    this.updateColWidth();
+    /**
+     * Fill the table with data
+     */
+    this.fill();
+
+    /**
+     * The cell in which the focus is currently located, if 0 and 0 then there is no focus
+     * Uses to switch between cells with buttons
+     */
+    this.focusedCell = {
+      row: 0,
+      column: 0
+    };
+
+    /**
+     * Global click listener allows to delegate clicks on some elements
+     */
+    this.documentClicked = (event: MouseEvent) => {
+      let target = event.target as HTMLElement;
+      const clickedInsideTable = target.closest(`.${CSS.table}`) !== null;
+      const outsideTableClicked = target.closest(`.${CSS.wrapper}`) === null;
+      const clickedOutsideToolboxes = clickedInsideTable || outsideTableClicked;
+
+      if (clickedOutsideToolboxes) {
+        this.hideToolboxes();
+      }
+
+      const clickedOnAddRowButton = target.closest(`.${CSS.addRow}`);
+      const clickedOnAddColumnButton = target.closest(`.${CSS.addColumn}`);
+
+      /**
+       * Also, check if clicked in current table, not other (because documentClicked bound to the whole document)
+       */
+      if (clickedOnAddRowButton && clickedOnAddRowButton.parentNode === this.wrapper) {
+        this.addRow(undefined, true);
+        this.hideToolboxes();
+      } else if (clickedOnAddColumnButton && clickedOnAddColumnButton.parentNode === this.wrapper) {
+        this.addColumn(undefined, true);
+        this.hideToolboxes();
+      }
+    };
+
+    if (!this.readOnly) {
+      this.bindEvents();
+    }
+  }
+
+  /**
+   * Returns the rendered table wrapper
+   *
+   * @returns {Element}
+   */
+  getWrapper() {
+    return this.wrapper;
+  }
+
+  /**
+   * Hangs the necessary handlers to events
+   */
+  bindEvents() {
+    // set the listener to close toolboxes when click outside
+    document.addEventListener('click', this.documentClicked);
+// 鼠标点击事件：判定是否在表格内部
+    document.addEventListener("mousedown", (e) =>
+      this.handleDocumentMousedown(e)
+    );
+    // Update toolboxes position depending on the mouse movements
+    this.table.addEventListener('mousemove', throttled(150, (event:MouseEvent) => this.onMouseMoveInTable(event)), { passive: true });
+
+    // Controls some of the keyboard buttons inside the table
+    this.table.onkeypress = (event:KeyboardEvent) => this.onKeyPressListener(event);
+
+    // Tab is executed by default before keypress, so it must be intercepted on keydown
+    this.table.addEventListener('keydown', (event:KeyboardEvent) => this.onKeyDownListener(event));
+
+    // Determine the position of the cell in focus
+    this.table.addEventListener('focusin', (event:FocusEvent) => this.focusInTableListener(event));
+  }
+handleDocumentMousedown = (e:MouseEvent) => {
+    // 在表格内部按下鼠标并且处于拖拽位置
+  if (this.wrapper.contains(e.target)) {
+      const target = e.target as HTMLElement;
+      if (target.classList.contains("cell-resizable")) {
+        e.preventDefault();
+        //this.hideToolbox(); // 拖拽时隐藏工具栏
+        this.isDragging = true;
+        this.table.classList.add("table-resizing"); //为整个表格添加光标样式
+        document.addEventListener("mousemove", this.handleDocumentMousemove);
+        document.addEventListener("mouseup", this.handleDocumentMouseup);
+        //this.draggingRow = this.hoveredRow;
+        this.draggingColumn = this.hoveredColumn;
+        //this.draggingColArr = this.getCellInCol(this.draggingColumn);
+        this.startWidth = this.colWidthArr[this.draggingColumn - 1]; //获取初始宽度
+        this.mouseStartX = e.clientX;
+      }
+    } else {
+      //this.hideToolbox();
+    }
+  };
+    // 获取同一列的所有单元格
+  getCellInCol(col:number) {
+    const cells:any[] = [];
+    const rows = this.table.querySelectorAll(`.${CSS.row}`);
+    rows.forEach((row:Element) => {
+      const cell = row.querySelector(`.${CSS.cell}:nth-child(${col})`);
+      if (cell) cells.push(cell);
+    });
+    return cells;
+  }
+   // mousemove事件
+  handleDocumentMousemove = (e:MouseEvent) => {
+    if (!this.isDragging) return;
+    const currentMouseX = e.clientX;
+    const deltaX = currentMouseX - this.mouseStartX;
+    const newWidth = Math.max(this.startWidth + deltaX, this.minCellWidhth);
+
+    this.colWidthArr[this.draggingColumn - 1] = newWidth;
+    this.updateColWidth();
+  };
+  // mouseup事件
+  handleDocumentMouseup = () => {
+    //this.showToolbox(); // 拖拽结束时重新显示工具栏
+    //this.updateToolboxPosition();
+    this.updateToolboxesPosition();
+    this.isDragging = false;
+    this.table.classList.remove("table-resizing");
+    document.removeEventListener("mousemove", this.handleDocumentMousemove);
+    document.removeEventListener("mouseup", this.handleDocumentMouseup);
+  };
+  /**
+   * Configures and creates the toolbox for manipulating with columns
+   *
+   * @returns {Toolbox}
+   */
+  createColumnToolbox() {
+    return new Toolbox({
+      api: this.api,
+      cssModifier: 'column',
+      items: [
+        {
+          label: this.api.i18n.t('Add column to left'),
+          icon: IconDirectionLeftDown,
+          hideIf: () => {
+            return this.numberOfColumns === this.config.maxcols
+          },
+          onClick: () => {            
+            this.addColumn(this.selectedColumn, true);
+            this.hideToolboxes();
+            this.updateColWidth();
+          }
+        },
+        {
+          label: this.api.i18n.t('Add column to right'),
+          icon: IconDirectionRightDown,
+          hideIf: () => {
+            return this.numberOfColumns === this.config.maxcols
+          },
+          onClick: () => {
+            this.addColumn(this.selectedColumn + 1, true);
+            this.hideToolboxes();
+            this.updateColWidth();
+          }
+        },
+        {
+          label: this.api.i18n.t('Delete column'),
+          icon: IconCross,
+          hideIf: () => {
+            return this.numberOfColumns === 1;
+          },
+          confirmationRequired: true,
+          onClick: () => {
+            this.deleteColumn(this.selectedColumn);
+            this.hideToolboxes();
+            this.updateColWidth();
+          }
+        }
+      ],
+      onOpen: () => {
+        this.selectColumn(this.hoveredColumn);
+        this.hideRowToolbox();
+      },
+      onClose: () => {
+        this.unselectColumn();
+      }
+    });
+  }
+
+  /**
+   * Configures and creates the toolbox for manipulating with rows
+   *
+   * @returns {Toolbox}
+   */
+  createRowToolbox() {
+    return new Toolbox({
+      api: this.api,
+      cssModifier: 'row',
+      items: [
+        {
+          label: this.api.i18n.t('Add row above'),
+          icon: IconDirectionUpRight,
+          hideIf: () => {
+            return this.numberOfRows === this.config.maxrows
+          },
+          onClick: () => {
+            this.addRow(this.selectedRow, true);
+            this.hideToolboxes();
+          }
+        },
+        {
+          label: this.api.i18n.t('Add row below'),
+          icon: IconDirectionDownRight,
+          hideIf: () => {
+            return this.numberOfRows === this.config.maxrows
+          },
+          onClick: () => {
+            this.addRow(this.selectedRow + 1, true);
+            this.hideToolboxes();
+          }
+        },
+        {
+          label: this.api.i18n.t('Delete row'),
+          icon: IconCross,
+          hideIf: () => {
+            return this.numberOfRows === 1;
+          },
+          confirmationRequired: true,
+          onClick: () => {
+            this.deleteRow(this.selectedRow);
+            this.hideToolboxes();
+          }
+        }
+      ],
+      onOpen: () => {
+        this.selectRow(this.hoveredRow);
+        this.hideColumnToolbox();
+      },
+      onClose: () => {
+        this.unselectRow();
+      }
+    });
+  }
+
+  /**
+   * When you press enter it moves the cursor down to the next row
+   * or creates it if the click occurred on the last one
+   */
+  moveCursorToNextRow() {
+    if (this.focusedCell.row !== this.numberOfRows) {
+      this.focusedCell.row += 1;
+      //this.focusCell(this.focusedCell);
+      this.focusCell();
+    } else {
+      this.addRow();
+      this.focusedCell.row += 1;
+      //this.focusCell(this.focusedCell);
+      this.focusCell();
+      this.updateToolboxesPosition(0, 0);
+    }
+  }
+
+  /**
+   * Get table cell by row and col index
+   *
+   * @param {number} row - cell row coordinate
+   * @param {number} column - cell column coordinate
+   * @returns {HTMLElement}
+   */
+  getCell(row:number, column:number) {
+    return this.table.querySelectorAll(`.${CSS.row}:nth-child(${row}) .${CSS.cell}`)[column - 1];
+  }
+
+  /**
+   * Get table row by index
+   *
+   * @param {number} row - row coordinate
+   * @returns {HTMLElement}
+   */
+  getRow(row:number) {
+    return this.table.querySelector(`.${CSS.row}:nth-child(${row})`);
+  }
+
+  /**
+   * The parent of the cell which is the row
+   *
+   * @param {HTMLElement} cell - cell element
+   * @returns {HTMLElement}
+   */
+  getRowByCell(cell:HTMLElement) {
+    return cell.parentElement;
+  }
+
+  /**
+   * Ger row's first cell
+   *
+   * @param {Element} row - row to find its first cell
+   * @returns {Element}
+   */
+  getRowFirstCell(row:Element) {
+    return row.querySelector(`.${CSS.cell}:first-child`);
+  }
+
+  /**
+   * Set the sell's content by row and column numbers
+   *
+   * @param {number} row - cell row coordinate
+   * @param {number} column - cell column coordinate
+   * @param {string} content - cell HTML content
+   */
+  setCellContent(row:number, column:number, content:string) {
+    const cell = this.getCell(row, column);
+
+    cell.innerHTML = content;
+  }
+
+  /**
+   * Add column in table on index place
+   * Add cells in each row
+   *
+   * @param {number} columnIndex - number in the array of columns, where new column to insert, -1 if insert at the end
+   * @param {boolean} [setFocus] - pass true to focus the first cell
+   */
+  addColumn(columnIndex = -1, setFocus = false) {
+    let numOfColumns=this.numberOfColumns;
+     /**
+      * Check if the number of columns has reached the maximum allowed columns specified in the configuration,
+      * and if so, exit the function to prevent adding more columns beyond the limit.
+      */
+    if (this.config && this.config.maxcols && this.numberOfColumns >= this.config.maxcols) {
+      return;
+    }
+
+    /**
+     * Iterate all rows and add a new cell to them for creating a column
+     */
+    for (let rowIndex = 1; rowIndex <= this.numberOfRows; rowIndex++) {
+      let cell;
+      const cellElem = this.createCell();
+
+      if (columnIndex > 0 && columnIndex <= numOfColumns) {
+        cell = this.getCell(rowIndex, columnIndex);
+
+        $.insertBefore(cellElem, cell);
+      } else {
+        cell = this.getRow(rowIndex).appendChild(cellElem);
+      }
+
+      /**
+       * Autofocus first cell
+       */
+      if (rowIndex === 1) {
+        const firstCell = this.getCell(rowIndex, columnIndex > 0 ? columnIndex : numOfColumns + 1);
+
+        if (firstCell && setFocus) {
+          $.focus(firstCell);
+        }
+      }
+    }
+
+    const addColButton = this.wrapper.querySelector(`.${CSS.addColumn}`);
+    if (this.config?.maxcols && this.numberOfColumns > this.config.maxcols - 1 && addColButton ){
+      addColButton.classList.add(CSS.addColumnDisabled);
+    }
+    this.addHeadingAttrToFirstRow();
+    this.colWidthArr.splice(columnIndex - 1, 0, this.defaultCellWidth);
+  };
+
+  /**
+   * Add row in table on index place
+   *
+   * @param {number} index - number in the array of rows, where new column to insert, -1 if insert at the end
+   * @param {boolean} [setFocus] - pass true to focus the inserted row
+   * @returns {HTMLElement} row
+   */
+  addRow(index = -1, setFocus = false) {
+    let insertedRow;
+    let rowElem = $.make('div', CSS.row);
+
+    if (this.tunes.withHeadings) {
+      this.removeHeadingAttrFromFirstRow();
+    }
+
+    /**
+     * We remember the number of columns, because it is calculated
+     * by the number of cells in the first row
+     * It is necessary that the first line is filled in correctly
+     */
+    let numberOfColumns = this.numberOfColumns;
+     /**
+      * Check if the number of rows has reached the maximum allowed rows specified in the configuration,
+      * and if so, exit the function to prevent adding more columns beyond the limit.
+      */  
+    if (this.config && this.config.maxrows && this.numberOfRows >= this.config.maxrows ) {
+      return;
+    }
+
+    if (index > 0 && index <= this.numberOfRows) {
+      let row = this.getRow(index);
+
+      insertedRow = $.insertBefore(rowElem, row);
+    } else {
+      insertedRow = this.table.appendChild(rowElem);
+    }
+
+    this.fillRow(insertedRow, numberOfColumns);
+
+    if (this.tunes.withHeadings) {
+      this.addHeadingAttrToFirstRow();
+    }
+
+    const insertedRowFirstCell = this.getRowFirstCell(insertedRow);
+
+    if (insertedRowFirstCell && setFocus) {
+      $.focus(insertedRowFirstCell as HTMLElement);
+    }
+
+    const addRowButton = this.wrapper.querySelector(`.${CSS.addRow}`);
+    if (this.config && this.config.maxrows && this.numberOfRows >= this.config.maxrows && addRowButton) {
+      addRowButton.classList.add(CSS.addRowDisabled);
+    }
+    return insertedRow;
+  };
+
+  /**
+   * Delete a column by index
+   *
+   * @param {number} index
+   */
+  deleteColumn(index: number) {
+    for (let i = 1; i <= this.numberOfRows; i++) {
+      const cell = this.getCell(i, index);
+
+      if (!cell) {
+        return;
+      }
+
+      cell.remove();
+    }
+    const addColButton = this.wrapper.querySelector(`.${CSS.addColumn}`);
+    if (addColButton) {
+      addColButton.classList.remove(CSS.addColumnDisabled);
+    }
+     this.colWidthArr.splice(index - 1, 1);
+  }
+
+  /**
+   * Delete a row by index
+   *
+   * @param {number} index
+   */
+  deleteRow(index: number) {
+    this.getRow(index).remove();
+    const addRowButton = this.wrapper.querySelector(`.${CSS.addRow}`);
+    if (addRowButton) {
+      addRowButton.classList.remove(CSS.addRowDisabled);
+    }
+
+    this.addHeadingAttrToFirstRow();
+  }
+
+  /**
+   * Create a wrapper containing a table, toolboxes
+   * and buttons for adding rows and columns
+   *
+   * @returns {HTMLElement} wrapper - where all buttons for a table and the table itself will be
+   */
+  createTableWrapper() {
+    this.wrapper = $.make('div', CSS.wrapper);
+    this.table = $.make('div', CSS.table);
+
+    if (this.readOnly) {
+      this.wrapper.classList.add(CSS.wrapperReadOnly);
+    }
+
+    this.wrapper.appendChild(this.toolboxRow.element);
+    this.wrapper.appendChild(this.toolboxColumn.element);
+    this.wrapper.appendChild(this.table);
+
+    // if (!this.readOnly) {
+    //   const addColumnButton = $.make('div', CSS.addColumn, {
+    //     innerHTML: IconPlus
+    //   });
+    //   const addRowButton = $.make('div', CSS.addRow, {
+    //     innerHTML: IconPlus
+    //   });
+
+    //   this.wrapper.appendChild(addColumnButton);
+    //   this.wrapper.appendChild(addRowButton);
+    // }
+  }
+
+  /**
+   * Returns the size of the table based on initial data or config "size" property
+   *
+   * @return {{rows: number, cols: number}} - number of cols and rows
+   */
+  computeInitialSize() {
+    const content = this.data && this.data.content;
+    const isValidArray = Array.isArray(content);
+    const isNotEmptyArray = isValidArray ? content.length : false;
+    const contentRows = isValidArray ? content.length : undefined;
+    const contentCols = isNotEmptyArray ? content[0].length : undefined;
+    const parsedRows = Number.parseInt(this.config && this.config.rows);
+    const parsedCols = Number.parseInt(this.config && this.config.cols);
+
+    /**
+     * Value of config have to be positive number
+     */
+    const configRows = !isNaN(parsedRows) && parsedRows > 0 ? parsedRows : undefined;
+    const configCols = !isNaN(parsedCols) && parsedCols > 0 ? parsedCols : undefined;
+    const defaultRows = 2;
+    const defaultCols = 2;
+    const rows = contentRows || configRows || defaultRows;
+    const cols = contentCols || configCols || defaultCols;
+
+    return {
+      rows: rows,
+      cols: cols
+    };
+  }
+
+  /**
+   * Resize table to match config size or transmitted data size
+   *
+   * @return {{rows: number, cols: number}} - number of cols and rows
+   */
+  resize() {
+    const { rows, cols } = this.computeInitialSize();
+
+    for (let i = 0; i < rows; i++) {
+      this.addRow();
+    }
+
+    for (let i = 0; i < cols; i++) {
+      this.addColumn();
+    }
+
+    
+  }
+  updateColWidth() {
+    //设置各列宽度
+    let colWidth = "";
+    if (this.colWidthArr && this.colWidthArr.length > 0) {
+      for (let i = 0; i < this.colWidthArr.length; i++) {
+        colWidth += " " + this.colWidthArr[i] + "px";
+      }
+    }
+    if (colWidth) {
+      this.wrapper.style.setProperty('--col-width', colWidth);
+    }
+    
+  }
+
+  /**
+   * Fills the table with data passed to the constructor
+   *
+   * @returns {void}
+   */
+  fill() {
+    const data = this.data;
+    if (data && data.content) {
+      for (let i = 0; i < data.content.length; i++) {
+        for (let j = 0; j < data.content[i].length; j++) {
+          this.setCellContent(i + 1, j + 1, data.content[i][j]);
+        }
+      }
+    }
+  }
+
+  /**
+   * Fills a row with cells
+   *
+   * @param {HTMLElement} row - row to fill
+   * @param {number} numOfColumns - how many cells should be in a row
+   */
+  fillRow(row:HTMLElement, numOfColumns:number) {
+    for (let i = 1; i <= numOfColumns; i++) {
+      const newCell = this.createCell();
+
+      row.appendChild(newCell);
+    }
+  }
+
+  /**
+   * Creating a cell element
+   *
+   * @return {Element}
+   */
+  createCell() {
+    return $.make('div', CSS.cell, {
+      contentEditable: !this.readOnly
+    });
+  }
+
+  /**
+   * Get number of rows in the table
+   */
+  get numberOfRows() {
+    return this.table.childElementCount;
+  }
+
+  /**
+   * Get number of columns in the table
+   */
+  get numberOfColumns() {
+    if (this.numberOfRows) {
+      return this.table.querySelectorAll(`.${CSS.row}:first-child .${CSS.cell}`).length;
+    }
+
+    return 0;
+  }
+
+  /**
+   * Is the column toolbox menu displayed or not
+   *
+   * @returns {boolean}
+   */
+  get isColumnMenuShowing() {
+    return this.selectedColumn !== 0;
+  }
+
+  /**
+   * Is the row toolbox menu displayed or not
+   *
+   * @returns {boolean}
+   */
+  get isRowMenuShowing() {
+    return this.selectedRow !== 0;
+  }
+
+  /**
+   * Recalculate position of toolbox icons
+   *
+   * @param {Event} event - mouse move event
+   */
+  onMouseMoveInTable(event:MouseEvent) {
+    const { row, column, deltaXCell } = this.getHoveredCell(event);
+
+    this.hoveredColumn = column;
+    this.hoveredRow = row;
+
+    this.updateToolboxesPosition();
+
+    if (this.hoveredCell !== null && this.hoveredCell.classList.contains("cell-resizable")) {
+      this.hoveredCell.classList.remove("cell-resizable");
+    }
+    this.hoveredCell = this.getCell(row, column);
+   
+    // 判断是否可以调整列宽
+    if (this.cellIsResizable(this.hoveredCell, deltaXCell)) {
+      // 将鼠标改为拖拽光标
+      if (!this.hoveredCell.classList.contains("cell-resizable"))
+        this.hoveredCell.classList.add("cell-resizable");
+    }
+
+  }
+  cellIsResizable(cell: HTMLElement, deltaX: number) {
+    // 判断光标是否在单元格右侧10px的位置
+    const cellWidth = cell.clientWidth;
+    return cellWidth - deltaX <= 10;
+  }
+  /**
+   * Prevents default Enter behaviors
+   * Adds Shift+Enter processing
+   *
+   * @param {KeyboardEvent} event - keypress event
+   */
+  onKeyPressListener(event: KeyboardEvent) {
+    if (event.key === 'Enter') {
+      if (event.shiftKey) {
+        return true;
+      }
+
+      this.moveCursorToNextRow();
+    }
+
+    return event.key !== 'Enter';
+  };
+
+  /**
+   * Prevents tab keydown event from bubbling
+   * so that it only works inside the table
+   *
+   * @param {KeyboardEvent} event - keydown event
+   */
+  onKeyDownListener(event: KeyboardEvent) {
+    if (event.key === 'Tab') {
+      event.stopPropagation();
+    }
+  }
+
+  /**
+   * Set the coordinates of the cell that the focus has moved to
+   *
+   * @param {FocusEvent} event - focusin event
+   */
+  focusInTableListener(event: FocusEvent) {
+    const cell = event.target as HTMLElement;
+    const row = this.getRowByCell(cell);
+    if(!row) return;
+
+    this.focusedCell = {
+      row: Array.from(this.table.querySelectorAll(`.${CSS.row}`)).indexOf(row) + 1,
+      column: Array.from(row.querySelectorAll(`.${CSS.cell}`)).indexOf(cell) + 1
+    };
+  }
+
+  /**
+   * Unselect row/column
+   * Close toolbox menu
+   * Hide toolboxes
+   *
+   * @returns {void}
+   */
+  hideToolboxes() {
+    this.hideRowToolbox();
+    this.hideColumnToolbox();
+    this.updateToolboxesPosition();
+  }
+
+  /**
+   * Unselect row, close toolbox
+   *
+   * @returns {void}
+   */
+  hideRowToolbox() {
+    this.unselectRow();
+    this.toolboxRow.hide();
+  }
+  /**
+   * Unselect column, close toolbox
+   *
+   * @returns {void}
+   */
+  hideColumnToolbox() {
+    this.unselectColumn();
+
+    this.toolboxColumn.hide();
+  }
+
+  /**
+   * Set the cursor focus to the focused cell
+   *
+   * @returns {void}
+   */
+  focusCell() {
+    this.focusedCellElem.focus();
+  }
+
+  /**
+   * Get current focused element
+   *
+   * @returns {HTMLElement} - focused cell
+   */
+  get focusedCellElem() {
+    const { row, column } = this.focusedCell;
+
+    return this.getCell(row, column);
+  }
+
+  /**
+   * Update toolboxes position
+   *
+   * @param {number} row - hovered row
+   * @param {number} column - hovered column
+   */
+  updateToolboxesPosition(row = this.hoveredRow, column = this.hoveredColumn) {
+    if (!this.isColumnMenuShowing) {
+      if (column > 0 && column <= this.numberOfColumns) { // not sure this statement is needed. Maybe it should be fixed in getHoveredCell()
+        this.toolboxColumn.show(() => {
+          
+          let left:number = 0;
+          for (var i = 0; i < column-1; i++) {
+            left += this.colWidthArr[i];
+          }
+          left+=this.colWidthArr[column-1]/2;
+          return {
+            left: `${left}px`
+            //left: `calc((100% - var(--cell-size)) / (${this.numberOfColumns} * 2) * (1 + (${column} - 1) * 2))`
+          };
+        });
+      }
+    }
+
+    if (!this.isRowMenuShowing) {
+      if (row > 0 && row <= this.numberOfRows) { // not sure this statement is needed. Maybe it should be fixed in getHoveredCell()
+        this.toolboxRow.show(() => {
+          const hoveredRowElement = this.getRow(row);
+          const { fromTopBorder } = $.getRelativeCoordsOfTwoElems(this.table, hoveredRowElement);
+          const { height } = hoveredRowElement.getBoundingClientRect();
+
+          return {
+            top: `${Math.ceil(fromTopBorder + height / 2)}px`
+          };
+        });
+      }
+    }
+  }
+
+  /**
+   * Makes the first row headings
+   *
+   * @param {boolean} withHeadings - use headings row or not
+   */
+  setHeadingsSetting(withHeadings: boolean) {
+    this.tunes.withHeadings = withHeadings;
+
+    if (withHeadings) {
+      this.table.classList.add(CSS.withHeadings);
+      this.addHeadingAttrToFirstRow();
+    } else {
+      this.table.classList.remove(CSS.withHeadings);
+      this.removeHeadingAttrFromFirstRow();
+    }
+  }
+
+  /**
+   * Adds an attribute for displaying the placeholder in the cell
+   */
+  addHeadingAttrToFirstRow() {
+    for (let cellIndex = 1; cellIndex <= this.numberOfColumns; cellIndex++) {
+      let cell = this.getCell(1, cellIndex);
+
+      if (cell) {
+        cell.setAttribute('heading', this.api.i18n.t('Heading'));
+      }
+    }
+  }
+
+  /**
+   * Removes an attribute for displaying the placeholder in the cell
+   */
+  removeHeadingAttrFromFirstRow() {
+    for (let cellIndex = 1; cellIndex <= this.numberOfColumns; cellIndex++) {
+      let cell = this.getCell(1, cellIndex);
+
+      if (cell) {
+        cell.removeAttribute('heading');
+      }
+    }
+  }
+
+  /**
+   * Add effect of a selected row
+   *
+   * @param {number} index
+   */
+  selectRow(index: number) {
+    const row = this.getRow(index);
+
+    if (row) {
+      this.selectedRow = index;
+      row.classList.add(CSS.rowSelected);
+    }
+  }
+
+  /**
+   * Remove effect of a selected row
+   */
+  unselectRow() {
+    if (this.selectedRow <= 0) {
+      return;
+    }
+
+    const row = this.table.querySelector(`.${CSS.rowSelected}`);
+
+    if (row) {
+      row.classList.remove(CSS.rowSelected);
+    }
+
+    this.selectedRow = 0;
+  }
+
+  /**
+   * Add effect of a selected column
+   *
+   * @param {number} index
+   */
+  selectColumn(index: number) {
+    for (let i = 1; i <= this.numberOfRows; i++) {
+      const cell = this.getCell(i, index);
+
+      if (cell) {
+        cell.classList.add(CSS.cellSelected);
+      }
+    }
+
+    this.selectedColumn = index;
+  }
+
+  /**
+   * Remove effect of a selected column
+   */
+  unselectColumn() {
+    if (this.selectedColumn <= 0) {
+      return;
+    }
+
+    let cells = this.table.querySelectorAll(`.${CSS.cellSelected}`) as HTMLElement[];
+
+    Array.from(cells).forEach((column: HTMLElement) => {
+      column.classList.remove(CSS.cellSelected);
+    });
+
+    this.selectedColumn = 0;
+  }
+
+  /**
+   * Calculates the row and column that the cursor is currently hovering over
+   * The search was optimized from O(n) to O (log n) via bin search to reduce the number of calculations
+   *
+   * @param {Event} event - mousemove event
+   * @returns hovered cell coordinates as an integer row and column
+   */
+  getHoveredCell(event: MouseEvent) {
+    let hoveredRow = this.hoveredRow;
+    let hoveredColumn = this.hoveredColumn;
+    const { width, height, x, y } = $.getCursorPositionRelativeToElement(this.table, event);
+    
+
+    
+    // Looking for hovered column
+    if (x >= 0) {
+      const beforeTheLeftBorder1 = ({ fromLeftBorder }: { fromLeftBorder: number }) => x < fromLeftBorder;
+    const afterTheRightBorder1 = ({ fromRightBorder }: { fromRightBorder: number }) => x > (width - fromRightBorder);
+      hoveredColumn = this.binSearch(
+        this.numberOfColumns,
+        (mid: number) => this.getCell(1, mid),
+        beforeTheLeftBorder1,
+        afterTheRightBorder1
+      );
+    }
+
+    // Looking for hovered row
+    if (y >= 0) {
+      const beforeTheLeftBorder2 = ({ fromTopBorder }: { fromTopBorder: number }) => y < fromTopBorder;
+      const afterTheRightBorder2 = ({ fromBottomBorder }: { fromBottomBorder: number }) => y > (height - fromBottomBorder);
+      hoveredRow = this.binSearch(
+        this.numberOfRows,
+        (mid: number) => this.getCell(mid, 1),
+        beforeTheLeftBorder2,
+        afterTheRightBorder2
+      );
+    }
+    const row = hoveredRow || this.hoveredRow;
+    const column = hoveredColumn || this.hoveredColumn;
+    // 获取鼠标在单元格内的坐标
+    const { deltaXCell, deltaYCell } = this.getMousePositionRelateToCell(
+      row,
+      column,
+      x,
+      y
+    );
+
+    return {
+      row,
+      column,
+      deltaXCell,
+      deltaYCell
+    };
+  }
+  // 获取鼠标相对于单元格的坐标
+  getMousePositionRelateToCell(row:number, col:number, deltaX:number, deltaY:number) {
+    const cell = this.getCell(row, col);
+    const { fromTopBorder, fromLeftBorder } = $.getRelativeCoordsOfTwoElems(
+      this.table,
+      cell
+    );
+    return {
+      deltaXCell: deltaX - fromLeftBorder,
+      deltaYCell: deltaY - fromTopBorder,
+    };
+  }
+  /**
+   * Looks for the index of the cell the mouse is hovering over.
+   * Cells can be represented as ordered intervals with left and
+   * right (upper and lower for rows) borders inside the table, if the mouse enters it, then this is our index
+   *
+   * @param {number} numberOfCells - upper bound of binary search
+   * @param {function} getCell - function to take the currently viewed cell
+   * @param {function} beforeTheLeftBorder - determines the cursor position, to the left of the cell or not
+   * @param {function} afterTheRightBorder - determines the cursor position, to the right of the cell or not
+   * @returns {number}
+   */
+  binSearch(numberOfCells: number, getCell: Function, beforeTheLeftBorder: Function, afterTheRightBorder: Function) {
+    let leftBorder = 0;
+    let rightBorder = numberOfCells + 1;
+    let totalIterations = 0;
+    let mid;
+
+    while (leftBorder < rightBorder - 1 && totalIterations < 10) {
+      mid = Math.ceil((leftBorder + rightBorder) / 2);
+
+      const cell = getCell(mid);
+      const relativeCoords = $.getRelativeCoordsOfTwoElems(this.table, cell);
+
+      if (beforeTheLeftBorder(relativeCoords)) {
+        rightBorder = mid;
+      } else if (afterTheRightBorder(relativeCoords)) {
+        leftBorder = mid;
+      } else {
+        break;
+      }
+
+      totalIterations++;
+    }
+
+    return mid;
+  }
+
+  /**
+   * Collects data from cells into a two-dimensional array
+   *
+   * @returns {string[][]}
+   */
+  getData() {
+    const data = [];
+
+    for (let i = 1; i <= this.numberOfRows; i++) {
+      const row = this.table.querySelector(`.${CSS.row}:nth-child(${i})`);
+      const cells = Array.from(row.querySelectorAll(`.${CSS.cell}`));
+      const isEmptyRow = cells.every((cell:any)=>!cell.textContent.trim());
+
+      if (isEmptyRow) {
+        continue;
+      }
+
+      data.push(cells.map((cell:any) => cell.innerHTML));
+    }
+
+    return data;
+  }
+
+  /**
+   * Remove listeners on the document
+   */
+  destroy() {
+    document.removeEventListener('click', this.documentClicked);
+  }
+}