@atlaskit/editor-plugin-table 0.0.0 → 0.0.1

package/dist/es2019/plugins/table/utils/column-controls.js

@@ -0,0 +1,178 @@
+import { TableMap } from '@atlaskit/editor-tables/table-map';
+import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
+import { findDomRefAtPos } from 'prosemirror-utils';
+import { findTable, getCellsInColumn, getSelectionRect, isColumnSelected, isTableSelected } from '@atlaskit/editor-tables/utils';
+// import { maphElem } from '@atlaskit/editor-core/src/utils/dom';
+import { maphElem } from '@atlaskit/editor-common/utils';
+import { TableCssClassName as ClassName } from '../types';
+import { tableDeleteButtonSize } from '../ui/consts';
+export const getColumnsWidths = view => {
+  const {
+    selection
+  } = view.state;
+  let widths = [];
+  const table = findTable(selection);
+
+  if (table) {
+    const map = TableMap.get(table.node);
+    const domAtPos = view.domAtPos.bind(view); // When there is no cell we need to fill it with undefined
+
+    widths = Array.from({
+      length: map.width
+    });
+
+    for (let i = 0; i < map.width; i++) {
+      const cells = getCellsInColumn(i)(selection);
+      const cell = cells[0];
+
+      if (cell) {
+        const cellRef = findDomRefAtPos(cell.pos, domAtPos);
+        const rect = cellRef.getBoundingClientRect();
+        widths[i] = (rect ? rect.width : cellRef.offsetWidth) + 1;
+        i += cell.node.attrs.colspan - 1;
+      }
+    }
+  }
+
+  return widths;
+};
+export const isColumnDeleteButtonVisible = selection => {
+  if (!isTableSelected(selection) && selection instanceof CellSelection && selection.isColSelection()) {
+    return true;
+  }
+
+  return false;
+};
+export const getColumnDeleteButtonParams = (columnsWidths, selection) => {
+  const rect = getSelectionRect(selection);
+
+  if (!rect) {
+    return null;
+  }
+
+  let width = 0;
+  let offset = 0; // find the columns before the selection
+
+  for (let i = 0; i < rect.left; i++) {
+    const colWidth = columnsWidths[i];
+
+    if (colWidth) {
+      offset += colWidth - 1;
+    }
+  } // these are the selected columns widths
+
+
+  const indexes = [];
+
+  for (let i = rect.left; i < rect.right; i++) {
+    const colWidth = columnsWidths[i];
+
+    if (colWidth) {
+      width += colWidth;
+      indexes.push(i);
+    }
+  }
+
+  const left = offset + width / 2 - tableDeleteButtonSize / 2;
+  return {
+    left,
+    indexes
+  };
+};
+export const getColumnClassNames = (index, selection, hoveredColumns = [], isInDanger, isResizing) => {
+  const classNames = [];
+
+  if (isColumnSelected(index)(selection) || hoveredColumns.indexOf(index) > -1 && !isResizing) {
+    classNames.push(ClassName.HOVERED_CELL_ACTIVE);
+
+    if (isInDanger) {
+      classNames.push(ClassName.HOVERED_CELL_IN_DANGER);
+    }
+  }
+
+  return classNames.join(' ');
+}; // give a row colspan and a colwidths
+// and map to a row's colwidths
+
+const mapTableColwidthsToRow = (rowColSpans, tableColWidths) => {
+  let curColIdx = 0;
+  const colWidths = [];
+  rowColSpans.forEach(cellColSpan => {
+    const colWidth = tableColWidths.slice(curColIdx, curColIdx + cellColSpan).reduce((acc, val) => acc + val, 0);
+    curColIdx += cellColSpan;
+    colWidths.push(colWidth);
+  });
+  return colWidths;
+};
+
+const getRelativeDomCellWidths = ({
+  width,
+  colspan,
+  colwidth
+}) => {
+  // For cells with colSpan 1
+  // or
+  // for cells in a table with unchanged column widths,
+  // these are identified by the lack of colwidth data attribute,
+  // return equally partitioned total cell width in DOM for each cell.
+  if (colspan <= 1 || !colwidth) {
+    return new Array(colspan).fill(width / colspan);
+  } // For cells that have colSpan > 1 and
+  // are part of a table with resized columns
+  // return the current total DOM width of the cell multiplied
+  // by the percentage of the each individual cell's size.
+  // The cell size percentage is calculated using individual colwidth of the cell,
+  // from data-colwidth attribute on the cell,
+  // divided by the total width of the cells from colwidths for merged cells.
+  // Ex:
+  // colwidth = ‘201,102’
+  // Total colWidth = 303
+  // returned cellWidths = [303 * (201/303), 303 * (102/303)]
+  // For merged cells we get back colwidth as `201,102`
+
+
+  const cellColWidths = colwidth.split(',').map(colwidth => Number(colwidth));
+  const totalCalculatedCellWidth = cellColWidths.reduce((acc, cellColWidth) => acc + cellColWidth, 0);
+  return cellColWidths.map(cellColWidth => width * (cellColWidth / totalCalculatedCellWidth));
+};
+
+export const colWidthsForRow = (colGroup, tr) => {
+  // get the colspans
+  const rowColSpans = maphElem(tr, cell => Number(cell.getAttribute('colspan') || 1
+  /* default to span of 1 */
+  )); // Chrome has trouble aligning borders with auto tables
+  // and the rest of the page grid. tables with defined
+  // column widths align fine.
+  //
+  // eg a 4x25% table might end up as 189px 190px 190px 190px
+  //
+  // prefer copying the widths via the DOM
+  // or inferring from the next row if one exists
+
+  const copyTarget = tr.nextElementSibling || tr;
+
+  if (copyTarget) {
+    // either from the first row while it's still in the table
+    const cellInfos = maphElem(copyTarget, cell => ({
+      width: cell.offsetWidth,
+      colspan: Number(cell.getAttribute('colspan') || 1),
+      colwidth: cell.dataset.colwidth
+    })); // reverse engineer cell widths from table widths
+
+    let domBasedCellWidths = [];
+    cellInfos.map((cell, idx) => {
+      domBasedCellWidths.push(...getRelativeDomCellWidths(cell));
+    });
+
+    if (cellInfos.reduce((acc, cell) => acc + cell.width, 0) !== 0) {
+      const newWidths = mapTableColwidthsToRow(rowColSpans, domBasedCellWidths);
+      return newWidths.map(px => `${px}px`).join(' ');
+    }
+  } // as a fallback, just calculate a %, and hope that
+  // it aligns perfectly in the user's browser
+
+
+  const visualColCount = rowColSpans.reduce((acc, val) => acc + val, 0);
+  const pctWidths = rowColSpans.map(cellColSpan => cellColSpan / visualColCount * 100);
+  return pctWidths.map(pct => `${pct}%`).join(' ');
+};

package/dist/es2019/plugins/table/utils/decoration.js

@@ -0,0 +1,346 @@
+import { TableMap } from '@atlaskit/editor-tables/table-map';
+import { findTable, getCellsInRow, getSelectionRect } from '@atlaskit/editor-tables/utils';
+import { Decoration } from 'prosemirror-view';
+// import { nonNullable } from '@atlaskit/editor-core/src/utils';
+import { nonNullable } from '@atlaskit/editor-common/utils';
+import { TableCssClassName as ClassName, TableDecorations } from '../types';
+
+const filterDecorationByKey = (key, decorationSet) => decorationSet.find(undefined, undefined, spec => spec.key.indexOf(key) > -1);
+
+export const findColumnControlSelectedDecoration = decorationSet => filterDecorationByKey(TableDecorations.COLUMN_SELECTED, decorationSet);
+export const findControlsHoverDecoration = decorationSet => filterDecorationByKey(TableDecorations.ALL_CONTROLS_HOVER, decorationSet);
+export const createCellHoverDecoration = (cells, type) => cells.map(cell => Decoration.node(cell.pos, cell.pos + cell.node.nodeSize, {
+  class: ClassName.HOVERED_CELL_WARNING
+}, {
+  key: TableDecorations.CELL_CONTROLS_HOVER
+}));
+export const createControlsHoverDecoration = (cells, type, danger, selected) => cells.map(cell => {
+  const classes = [ClassName.HOVERED_CELL];
+
+  if (danger) {
+    classes.push(ClassName.HOVERED_CELL_IN_DANGER);
+  }
+
+  if (selected) {
+    classes.push(ClassName.SELECTED_CELL);
+  }
+
+  classes.push(type === 'column' ? ClassName.HOVERED_COLUMN : type === 'row' ? ClassName.HOVERED_ROW : ClassName.HOVERED_TABLE);
+  let key;
+
+  switch (type) {
+    case 'row':
+      key = TableDecorations.ROW_CONTROLS_HOVER;
+      break;
+
+    case 'column':
+      key = TableDecorations.COLUMN_CONTROLS_HOVER;
+      break;
+
+    default:
+      key = TableDecorations.TABLE_CONTROLS_HOVER;
+      break;
+  }
+
+  return Decoration.node(cell.pos, cell.pos + cell.node.nodeSize, {
+    class: classes.join(' ')
+  }, {
+    key
+  });
+});
+export const createColumnSelectedDecoration = tr => {
+  const {
+    selection,
+    doc
+  } = tr;
+  const table = findTable(selection);
+  const rect = getSelectionRect(selection);
+
+  if (!table || !rect) {
+    return [];
+  }
+
+  const map = TableMap.get(table.node);
+  const cellPositions = map.cellsInRect(rect);
+  return cellPositions.map((pos, index) => {
+    const cell = doc.nodeAt(pos + table.start);
+    return Decoration.node(pos + table.start, pos + table.start + cell.nodeSize, {
+      class: ClassName.COLUMN_SELECTED
+    }, {
+      key: `${TableDecorations.COLUMN_SELECTED}_${index}`
+    });
+  });
+};
+export const createColumnControlsDecoration = selection => {
+  const cells = getCellsInRow(0)(selection) || [];
+  let index = 0;
+  return cells.map(cell => {
+    const colspan = cell.node.attrs.colspan || 1;
+    const element = document.createElement('div');
+    element.classList.add(ClassName.COLUMN_CONTROLS_DECORATIONS);
+    element.dataset.startIndex = `${index}`;
+    index += colspan;
+    element.dataset.endIndex = `${index}`;
+    return Decoration.widget(cell.pos + 1, () => element, {
+      key: `${TableDecorations.COLUMN_CONTROLS_DECORATIONS}_${index}`,
+      // this decoration should be the first one, even before gap cursor.
+      side: -100
+    });
+  });
+};
+export const updateDecorations = (node, decorationSet, decorations, key) => {
+  const filteredDecorations = filterDecorationByKey(key, decorationSet);
+  const decorationSetFiltered = decorationSet.remove(filteredDecorations);
+  return decorationSetFiltered.add(node, decorations);
+};
+
+const makeArray = n => Array.from(Array(n).keys());
+/*
+ * This function will create two specific decorations for each cell in a column index target,
+ * for example given that table:
+ *
+ * ```
+ *    0       1      2      3
+ * _____________________ _______
+ * |      |             |      |
+ * |  B1  |     C1      |  A1  |
+ * |______|______ ______|______|
+ * |             |      |      |
+ * |     B2      |      |  A2  |
+ * |______ ______|      |______|
+ * |      |      |  D1  |      |
+ * |  B3  |  C2  |      |  A3  |
+ * |______|______|______|______|
+ *        ^      ^      ^      ^
+ *        |      |      |      |
+ *        |      |      |      |
+ *        |      |      |      |
+ *        0      1      3      4
+ *         \     |      |     /
+ *          \    |      |    /
+ *           \   |      |   /
+ *            \  |      |  /
+ *             \ |      | /
+ *         columnEndIndexTarget === CellColumnPositioning.right
+ * ```
+ *
+ * When a user wants to resize a cell,
+ * they need to grab and hold the end of that column,
+ * and this will be the `columnEndIndexTarget` using
+ * the CellColumnPositioning interface.
+ *
+ * Let's say the `columnEndIndexTarget.right` is 3,
+ * so this function will return two types of decorations for each cell on that column,
+ * that means 2 `resizerHandle` and 2 `lastCellElement`,
+ * here is the explanation for each one of them :
+ *
+ * - resizerHandle:
+ *
+ *   Given the cell C1, this decoration will add a div to create this area
+ * ```
+ *    ▁▁▁▁▁▁▁▁▁▁▁▁▁
+ *   |           ▒▒|
+ *   |     C1    ▒▒|
+ *   |           ▒▒|
+ *    ▔▔▔▔▔▔▔▔▔▔▔▔▔
+ * ```
+ *   This ▒ represents the area where table resizing will start,
+ *   and you can follow that using checking the class name `ClassName.RESIZE_HANDLE_DECORATION` on the code
+ *
+ * - lastCellElementDecoration
+ *
+ *   Given the content of the cell C1
+ *    ▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁
+ *   |                   |
+ *   |   _____________   |
+ *   |  |             |  |
+ *   |  |     <p>     |  |
+ *   |  |_____________|  |
+ *   |                   |
+ *   |   _____________   |
+ *   |  |             |  |
+ *   |  |   <media>   |  |
+ *   |  |_____________|  |
+ *   |                   |
+ *   |   _____________   |
+ *   |  |             |  |
+ *   |  |   <media>   |  |
+ *   |  |_____________|  |
+ *   |                   |
+ *    ▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔
+ *   Currently, we are removing the margin-bottom from the last media using this kind of CSS rule:
+ *   `div:last-of-type`; This is quite unstable, and after we create the `resizerHandle` div,
+ *   that logic will apply the margin in the wrong element, to avoid that,
+ *   we will add a new class on the last item for each cell,
+ *   hence the second media will receive this class `ClassName.LAST_ITEM_IN_CELL`
+ */
+
+
+export const createResizeHandleDecoration = (tr, columnEndIndexTarget) => {
+  const emptyResult = [[], []];
+  const table = findTable(tr.selection);
+
+  if (!table || !table.node) {
+    return emptyResult;
+  }
+
+  const map = TableMap.get(table.node);
+
+  if (!map.width) {
+    return emptyResult;
+  }
+
+  const createResizerHandleDecoration = (cellColumnPositioning, columnIndex, rowIndex, cellPos, cellNode) => {
+    const element = document.createElement('div');
+    element.classList.add(ClassName.RESIZE_HANDLE_DECORATION);
+    element.dataset.startIndex = `${cellColumnPositioning.left}`;
+    element.dataset.endIndex = `${cellColumnPositioning.right}`;
+    const position = cellPos + cellNode.nodeSize - 1;
+    return Decoration.widget(position, element, {
+      key: `${TableDecorations.COLUMN_RESIZING_HANDLE}_${rowIndex}_${columnIndex}`
+    });
+  };
+
+  const createLastCellElementDecoration = (cellColumnPositioning, cellPos, cellNode) => {
+    let lastItemPositions;
+    cellNode.forEach((childNode, offset, index) => {
+      if (index === cellNode.childCount - 1) {
+        const from = offset + cellPos + 1;
+        lastItemPositions = {
+          from,
+          to: from + childNode.nodeSize
+        };
+      }
+    });
+
+    if (!lastItemPositions) {
+      return null;
+    }
+
+    return Decoration.node(lastItemPositions.from, lastItemPositions.to, {
+      class: ClassName.LAST_ITEM_IN_CELL
+    }, {
+      key: `${TableDecorations.LAST_CELL_ELEMENT}_${cellColumnPositioning.left}_${cellColumnPositioning.right}`
+    });
+  };
+
+  const resizeHandleCellDecorations = [];
+  const lastCellElementsDecorations = [];
+
+  for (let rowIndex = 0; rowIndex < map.height; rowIndex++) {
+    const seen = {};
+
+    for (let columnIndex = 0; columnIndex < map.width; columnIndex++) {
+      const cellPosition = map.map[map.width * rowIndex + columnIndex];
+
+      if (seen[cellPosition]) {
+        continue;
+      }
+
+      seen[cellPosition] = true;
+      const cellPos = table.start + cellPosition;
+      const cell = tr.doc.nodeAt(cellPos);
+
+      if (!cell) {
+        continue;
+      }
+
+      const colspan = cell.attrs.colspan || 1;
+      const startIndex = columnIndex;
+      const endIndex = colspan + startIndex;
+
+      if (endIndex !== columnEndIndexTarget.right) {
+        continue;
+      }
+
+      const resizerHandleDec = createResizerHandleDecoration({
+        left: startIndex,
+        right: endIndex
+      }, columnIndex, rowIndex, cellPos, cell);
+      const lastCellDec = createLastCellElementDecoration({
+        left: startIndex,
+        right: endIndex
+      }, cellPos, cell);
+      resizeHandleCellDecorations.push(resizerHandleDec);
+      lastCellElementsDecorations.push(lastCellDec);
+    }
+  }
+
+  return [resizeHandleCellDecorations, lastCellElementsDecorations.filter(nonNullable)];
+};
+/*
+ * This function will create a decoration for each cell using the right position on the CellColumnPositioning
+ * for example given that table:
+ *
+ * ```
+ *    0       1      2      3   <--- column indexes
+ * _____________________ _______
+ * |      |             |      |
+ * |  B1  |     C1      |  A1  |
+ * |______|______ ______|______|
+ * |             |      |      |
+ * |     B2      |  D1  |  A2  |
+ * |______ ______|______|______|
+ * |      |      |             |
+ * |  B3  |  C2  |      D2     |
+ * |______|______|_____________|
+ * ```
+ *
+ * and given the left and right represents the C1 cell:
+ *
+ * ```
+ *      left          right
+ *        1             3
+ *        |             |
+ *        |             |
+ *        |             |
+ * _______∨_____________∨_______
+ * |      |             |      |
+ * |  B1  |     C1      |  A1  |
+ * |______|______ ______|______|
+ * |             |      |      |
+ * |     B2      |  D1  |  A2  |
+ * |______ ______|______|______|
+ * |      |      |             |
+ * |  B3  |  C2  |      D2     |
+ * |______|______|_____________|
+ * ```
+ *
+ * Taking that table, and the right as parameters,
+ * this function will return two decorations applying a new class `ClassName.WITH_RESIZE_LINE`
+ * only on the cells: `C1` and `D1`.
+ */
+
+export const createColumnLineResize = (selection, cellColumnPositioning) => {
+  const table = findTable(selection);
+
+  if (!table || cellColumnPositioning.right === null) {
+    return [];
+  }
+
+  const columnIndex = cellColumnPositioning.right - 1;
+  const map = TableMap.get(table.node);
+  const cellPositions = makeArray(map.height).map(rowIndex => map.map[map.width * rowIndex + columnIndex]).filter((cellPosition, rowIndex) => {
+    if (columnIndex === map.width) {
+      return true; // If is the last column no filter applied
+    }
+
+    const nextPosition = map.map[map.width * rowIndex + columnIndex + 1];
+    return cellPosition !== nextPosition; // Removed it if next position is merged
+  });
+  const cells = cellPositions.map(pos => ({
+    pos: pos + table.start,
+    node: table.node.nodeAt(pos)
+  }));
+  return cells.map((cell, index) => {
+    if (!cell || !cell.node) {
+      return;
+    }
+
+    return Decoration.node(cell.pos, cell.pos + cell.node.nodeSize, {
+      class: ClassName.WITH_RESIZE_LINE
+    }, {
+      key: `${TableDecorations.COLUMN_RESIZING_HANDLE_LINE}_${cellColumnPositioning.right}_${index}`
+    });
+  }).filter(nonNullable);
+};

package/dist/es2019/plugins/table/utils/dom.js

@@ -0,0 +1,160 @@
+// import { containsClassName } from '@atlaskit/editor-core/src/utils';
+// import { closestElement } from '@atlaskit/editor-core/src/utils/dom';
+import { closestElement, containsClassName } from '@atlaskit/editor-common/utils';
+import { TableCssClassName as ClassName } from '../types';
+import { tableToolbarSize } from '../ui/consts';
+const SELECTOR_TABLE_LEAFS = `.${ClassName.TABLE_CELL}, .${ClassName.TABLE_HEADER_CELL}`;
+export const isCell = node => {
+  return Boolean(node && (['TH', 'TD'].indexOf(node.tagName) > -1 || !!closestElement(node, `.${ClassName.TABLE_HEADER_CELL}`) || !!closestElement(node, `.${ClassName.TABLE_CELL}`)));
+};
+export const isCornerButton = node => containsClassName(node, ClassName.CONTROLS_CORNER_BUTTON);
+export const isInsertRowButton = node => containsClassName(node, ClassName.CONTROLS_INSERT_ROW) || closestElement(node, `.${ClassName.CONTROLS_INSERT_ROW}`) || containsClassName(node, ClassName.CONTROLS_BUTTON_OVERLAY) && closestElement(node, `.${ClassName.ROW_CONTROLS}`);
+export const getColumnOrRowIndex = target => [parseInt(target.getAttribute('data-start-index') || '-1', 10), parseInt(target.getAttribute('data-end-index') || '-1', 10)];
+export const isColumnControlsDecorations = node => containsClassName(node, ClassName.COLUMN_CONTROLS_DECORATIONS);
+export const isRowControlsButton = node => containsClassName(node, ClassName.ROW_CONTROLS_BUTTON) || containsClassName(node, ClassName.NUMBERED_COLUMN_BUTTON);
+export const isResizeHandleDecoration = node => containsClassName(node, ClassName.RESIZE_HANDLE_DECORATION);
+export const isTableControlsButton = node => containsClassName(node, ClassName.CONTROLS_BUTTON) || containsClassName(node, ClassName.ROW_CONTROLS_BUTTON_WRAP);
+export const isTableContainerOrWrapper = node => containsClassName(node, ClassName.TABLE_CONTAINER) || containsClassName(node, ClassName.TABLE_NODE_WRAPPER);
+/*
+ * This function returns which side of a given element the mouse cursor is,
+ * using as a base the half of the width by default, for example:
+ *
+ * legend
+ * ⌖ = mouse pointer
+ * ▒ = gap
+ *
+ * given this box:
+ * ┏━━━━━━━━━━━━━━━━━━━━┳━━━━━━━━━━━━━━━━━━━━━┓
+ * ┃                    ┊                     ┃
+ * ┃       left         ┊        right        ┃
+ * ┃                    ┊                     ┃
+ * ┗━━━━━━━━━━━━━━━━━━━━┻━━━━━━━━━━━━━━━━━━━━━┛
+ *
+ * if the mouse is on the left, it will return `left`,
+ * if it is on the right it will return `right`.
+ *
+ * You can extend this behavior using the parameter `gapInPixels`
+ * to determinate if the mouse is inside of a gap for each side,
+ * for example:
+ *
+ * given `gapInPixels` is `5`
+ * and given this box:
+ * ┏━━━━━━━━━━━━━━━━━━━━┳━━━━━━━━━━━━━━━━━━━━━┓
+ * ┃▒▒▒▒▒               ┊                ▒▒▒▒▒┃
+ * ┃▒▒▒▒▒   left        ┊        right   ▒▒▒▒▒┃
+ * ┃▒▒▒▒▒               ┊                ▒▒▒▒▒┃
+ * ┗━━━━━━━━━━━━━━━━━━━━┻━━━━━━━━━━━━━━━━━━━━━┛
+ *
+ * if the mouse cursor is inside of the gap like that:
+ *
+ * ┏━━━━━━━━━━━━━━━━━━━━┳━━━━━━━━━━━━━━━━━━━━━┓
+ * ┃▒▒▒▒▒               ┊                ▒▒▒▒▒┃
+ * ┃▒▒⌖▒▒   left        ┊        right   ▒▒▒▒▒┃
+ * ┃▒▒▒▒▒               ┊                ▒▒▒▒▒┃
+ * ┗━━━━━━━━━━━━━━━━━━━━┻━━━━━━━━━━━━━━━━━━━━━┛
+ *
+ * the function will return `left` because the mouse is inside of the gap on the left side.
+ *
+ * if the mouse cursor is outside of the gap like that:
+ *
+ * ┏━━━━━━━━━━━━━━━━━━━━┳━━━━━━━━━━━━━━━━━━━━━┓
+ * ┃▒▒▒▒▒               ┊                ▒▒▒▒▒┃
+ * ┃▒▒▒▒▒   left  ⌖     ┊        right   ▒▒▒▒▒┃
+ * ┃▒▒▒▒▒               ┊                ▒▒▒▒▒┃
+ * ┗━━━━━━━━━━━━━━━━━━━━┻━━━━━━━━━━━━━━━━━━━━━┛
+ *
+ * the function will return `null` because the mouse is inside of left
+ * but is outside of the gap.
+ *
+ * the same is valid to the right side.
+ */
+
+export const getMousePositionHorizontalRelativeByElement = (mouseEvent, mouseMoveOptimization, elementContentRects, gapInPixels) => {
+  const element = mouseEvent.target;
+
+  if (element instanceof HTMLElement) {
+    let width, x;
+    const closestCell = element.closest(SELECTOR_TABLE_LEAFS);
+
+    if (mouseMoveOptimization) {
+      var _closestCell$id, _elementContentRects$, _elementContentRects$2;
+
+      const id = (_closestCell$id = closestCell === null || closestCell === void 0 ? void 0 : closestCell.id) !== null && _closestCell$id !== void 0 ? _closestCell$id : '';
+      width = (_elementContentRects$ = elementContentRects === null || elementContentRects === void 0 ? void 0 : (_elementContentRects$2 = elementContentRects[id]) === null || _elementContentRects$2 === void 0 ? void 0 : _elementContentRects$2.width) !== null && _elementContentRects$ !== void 0 ? _elementContentRects$ : 0;
+      x = mouseEvent.offsetX;
+    } else {
+      const elementRect = element.getBoundingClientRect();
+      width = elementRect.width;
+      const left = elementRect.left;
+      x = mouseEvent.clientX - left;
+    }
+
+    if (width <= 0) {
+      return null;
+    }
+
+    if (!gapInPixels) {
+      return x / width > 0.5 ? 'right' : 'left';
+    } else {
+      if (x <= gapInPixels) {
+        return 'left';
+      } else if (x >= width - gapInPixels) {
+        return 'right';
+      }
+    }
+  }
+
+  return null;
+};
+export const getMousePositionVerticalRelativeByElement = mouseEvent => {
+  const element = mouseEvent.target;
+
+  if (element instanceof HTMLElement) {
+    const elementRect = element.getBoundingClientRect();
+
+    if (elementRect.height <= 0) {
+      return null;
+    }
+
+    const y = mouseEvent.clientY - elementRect.top;
+    return y / elementRect.height > 0.5 ? 'bottom' : 'top';
+  }
+
+  return null;
+};
+export const updateResizeHandles = tableRef => {
+  if (!tableRef) {
+    return;
+  }
+
+  const height = tableRef.offsetHeight + tableToolbarSize; // see ED-7600
+
+  const nodes = Array.from(tableRef.querySelectorAll(`.${ClassName.RESIZE_HANDLE}`));
+
+  if (!nodes || !nodes.length) {
+    return;
+  }
+
+  nodes.forEach(node => {
+    node.style.height = `${height}px`;
+  });
+};
+export const hasResizeHandler = ({
+  columnEndIndexTarget,
+  target
+}) => {
+  const tableElement = closestElement(target, 'table');
+
+  if (!tableElement) {
+    return false;
+  }
+
+  const query = [`.${ClassName.RESIZE_HANDLE_DECORATION}`, `[data-end-index="${columnEndIndexTarget}"]`];
+  const decorationElement = tableElement.querySelectorAll(query.join(''));
+
+  if (!decorationElement || decorationElement.length === 0) {
+    return false;
+  }
+
+  return true;
+};

package/dist/es2019/plugins/table/utils/get-allow-add-column-custom-step.js

@@ -0,0 +1,5 @@
+import { getPluginState } from '../pm-plugins/plugin-factory';
+export function getAllowAddColumnCustomStep(state) {
+  const tablePluginState = getPluginState(state);
+  return Boolean(tablePluginState) && Boolean(tablePluginState.pluginConfig.allowAddColumnWithCustomStep);
+}