@atlaskit/editor-core 174.0.0 → 175.0.0

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

@@ -1,177 +0,0 @@
-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 '../../../utils/dom';
-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

@@ -1,381 +0,0 @@
-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 '../../../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, tr, danger, selected) => {
-  const table = findTable(tr.selection);
-
-  if (!table) {
-    return [];
-  }
-
-  const map = TableMap.get(table.node);
-  const [min, max] = cells.reduce(([min, max], cell) => {
-    if (min === null || cell.pos < min) {
-      min = cell.pos;
-    }
-
-    if (max === null || cell.pos > max) {
-      max = cell.pos;
-    }
-
-    return [min, max];
-  }, [null, null]);
-
-  if (min === null || max === null) {
-    return [];
-  }
-
-  let updatedCells = cells.map(x => x.pos); // ED-15246 fixed trello card table overflow issue
-  // If columns / rows have been merged the hovered selection is different to the actual selection
-  // So If the table cells are in danger we want to create a "rectangle" selection
-  // to match the "clicked" selection
-
-  if (danger) {
-    const rect = map.rectBetween(min - table.start, max - table.start);
-    updatedCells = map.cellsInRect(rect).map(x => x + table.start);
-  }
-
-  return updatedCells.map(pos => {
-    const cell = tr.doc.nodeAt(pos);
-    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(pos, pos + cell.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);
-};