@atlaskit/editor-plugin-table 0.0.0 → 0.0.2

package/dist/es2019/plugins/table/pm-plugins/table-resizing/utils/column-state.js

@@ -0,0 +1,78 @@
+import { TableMap } from '@atlaskit/editor-tables/table-map';
+import { findDomRefAtPos } from 'prosemirror-utils';
+import { tableNewColumnMinWidth } from '@atlaskit/editor-common/styles';
+import { contentWidth } from './content-width';
+import { unitToNumber } from './unit-to-number';
+// Reads `width` and `minWidth` of each column from DOM and returns `ColumnState` containing those values
+export const getColumnStateFromDOM = (cells, index, minWidth) => {
+  const width = calculateColumnWidth(cells, calculateColumnWidthCallback);
+  const minColumnWidth = width < minWidth ? // for newly created column (where width < minWidth) we set minWidth = tableNewColumnMinWidth (140px atm)
+  tableNewColumnMinWidth : calculateColumnWidth(cells, calculateColumnMinWidthCallback(minWidth));
+  return {
+    index,
+    width: width < minWidth ? tableNewColumnMinWidth : width,
+    minWidth: minColumnWidth
+  };
+};
+export const getFreeSpace = state => {
+  return Math.max(state.width - state.minWidth, 0);
+}; // Returns DOM refs of all cells in a column by `columnIndex`
+
+export const getCellsRefsInColumn = (columnIndex, table, tableStart, domAtPos) => {
+  const map = TableMap.get(table);
+  const cellsPositions = map.cellsInRect({
+    left: columnIndex,
+    right: columnIndex + 1,
+    top: 0,
+    bottom: map.height
+  });
+  const cells = [];
+  cellsPositions.forEach(pos => {
+    const col = findDomRefAtPos(pos + tableStart, domAtPos);
+
+    if (col) {
+      cells.push(col);
+    }
+  });
+  return cells;
+}; // calculates column withs based on `cells` DOM refs
+
+export const calculateColumnWidth = (cells, calculateColumnWidthCb) => {
+  let maxColWidth = 0;
+  let colSpanWidth = 0;
+  cells.forEach(cellRef => {
+    const css = getComputedStyle(cellRef);
+    const colspan = Number(cellRef.getAttribute('colspan') || 1);
+
+    if (colspan > 1) {
+      colSpanWidth = calculateColumnWidthCb(css, cellRef, colspan);
+      return;
+    }
+
+    if (css) {
+      const colWidth = calculateColumnWidthCb(css, cellRef, colspan);
+      maxColWidth = Math.max(colWidth, maxColWidth);
+    }
+  });
+  return maxColWidth || colSpanWidth;
+};
+export const addContainerLeftRightPadding = (amount, css) => amount + unitToNumber(css.paddingLeft) + unitToNumber(css.paddingRight);
+
+function calculateColumnWidthCallback(css) {
+  return unitToNumber(css.width);
+}
+
+function calculateColumnMinWidthCallback(minColumnWidth) {
+  return (css, cellRef, colSpan) => {
+    if (colSpan && colSpan > 1) {
+      return unitToNumber(css.width);
+    }
+
+    const {
+      minWidth: minContentWidth
+    } = contentWidth(cellRef, cellRef); // Override the min width, if there is content that can't collapse
+    // Past a certain width.
+
+    return Math.max(addContainerLeftRightPadding(minContentWidth, css), minContentWidth, minColumnWidth);
+  };
+}

package/dist/es2019/plugins/table/pm-plugins/table-resizing/utils/content-width.js

@@ -0,0 +1,97 @@
+import { unitToNumber } from './unit-to-number'; // calculates content width of a cell
+
+export function contentWidth(elem, container, colWidths = [], canvas = document.createElement('canvas')) {
+  return calcContentWidth(elem, container || elem, canvas, colWidths);
+}
+
+function calcContentWidth(elem, container, canvas, colWidths) {
+  const flowWidths = [];
+  let curWidth = 0;
+
+  for (let i = 0; i < elem.childNodes.length; i++) {
+    const child = elem.childNodes[i];
+
+    if (child.nodeType === Node.COMMENT_NODE) {
+      continue;
+    }
+
+    if (child.nodeType === Node.TEXT_NODE) {
+      const parent = child.parentNode;
+      const parentStyle = getComputedStyle(parent);
+      let contentLength = 0;
+
+      if (parent.nodeName === 'CODE' || parent.nodeName === 'PRE') {
+        contentLength = handlePreText(canvas, parent, child.textContent, parentStyle.font);
+      } else {
+        contentLength = measureText(canvas, child.textContent, parentStyle.font);
+      }
+
+      const left = parent.offsetLeft - container.offsetLeft;
+      flowWidths.push(curWidth);
+      curWidth += contentLength + left; // If the text isn't meant to wrap, we should set that as a hard limit.
+
+      if (parentStyle.whiteSpace === 'nowrap') {
+        // + 3 is for date offset plus cursor
+        // TODO There should be a programmatic way to get this.
+        colWidths.push(parent.offsetWidth + 3);
+      }
+    } else {
+      // FIXME: doesn't quite work right with spacing
+      const style = getComputedStyle(child);
+
+      if (style.minWidth && style.minWidth.endsWith('px') && style.minWidth !== '0px') {
+        colWidths.push(unitToNumber(style.minWidth));
+      }
+
+      const {
+        width
+      } = contentWidth(child, container, colWidths, canvas);
+
+      if (style.display && style.display.indexOf('inline') > -1) {
+        // is inline element, add to curWidth
+        curWidth += width;
+      } else {
+        // block element, reset curWidth
+        flowWidths.push(curWidth);
+        curWidth = width;
+      }
+    }
+  }
+
+  flowWidths.push(curWidth);
+  return {
+    minWidth: colWidths.reduce((oldMax, width) => Math.max(width, oldMax), 0),
+    width: flowWidths.reduce((oldMax, width) => Math.max(width, oldMax), 0)
+  };
+}
+
+function measureText(canvas, text, font) {
+  const ctx = canvas.getContext('2d');
+
+  if (!ctx) {
+    return 0;
+  }
+
+  if (font) {
+    ctx.font = font;
+  }
+
+  return Math.round(ctx.measureText(text || '').width);
+}
+
+function handlePreText(canvas, node, textContent, font) {
+  let parent = node;
+
+  if (node.nodeName === 'CODE') {
+    parent = node.parentNode;
+  }
+
+  const computedStyle = getComputedStyle(parent);
+
+  if (textContent && computedStyle.whiteSpace === 'pre') {
+    // If white space is pre grab the longest line in the block.
+    return textContent.split('\n').reduce((acc, current) => Math.max(measureText(canvas, current, font), acc), 0);
+  }
+
+  return measureText(canvas, textContent, font);
+}

package/dist/es2019/plugins/table/pm-plugins/table-resizing/utils/dom.js

@@ -0,0 +1,124 @@
+import { tableCellBorderWidth, tableCellPadding, tableMarginTop } from '@atlaskit/editor-common/styles';
+import { browser } from '@atlaskit/editor-common/utils';
+import { closestElement, containsClassName, parsePx } from '@atlaskit/editor-common/utils';
+import { updateOverflowShadows } from '../../../nodeviews/update-overflow-shadows';
+import { TableCssClassName as ClassName } from '../../../types';
+import { getRowHeights } from '../../../utils/row-controls';
+import { colWidthsForRow } from '../../../utils/column-controls';
+import { getPluginState as getMainPluginState } from '../../plugin-factory';
+export const updateControls = getEditorFeatureFlags => state => {
+  const {
+    tableRef
+  } = getMainPluginState(state);
+
+  if (!tableRef) {
+    return;
+  }
+
+  const tr = tableRef.querySelector('tr');
+
+  if (!tr) {
+    return;
+  }
+
+  const wrapper = tableRef.parentElement;
+
+  if (!(wrapper && wrapper.parentElement)) {
+    return;
+  }
+
+  const rowControls = wrapper.parentElement.querySelectorAll(`.${ClassName.ROW_CONTROLS_BUTTON_WRAP}`);
+  const numberedRows = wrapper.parentElement.querySelectorAll(ClassName.NUMBERED_COLUMN_BUTTON);
+  syncStickyRowToTable(tableRef);
+  const rowHeights = getRowHeights(tableRef); // update rows controls height on resize
+
+  for (let i = 0, count = rowControls.length; i < count; i++) {
+    const height = rowHeights[i];
+
+    if (height) {
+      rowControls[i].style.height = `${height}px`;
+
+      if (numberedRows.length) {
+        numberedRows[i].style.height = `${height}px`;
+      }
+    }
+  }
+
+  const rightShadows = wrapper.parentElement.querySelectorAll(`.${ClassName.TABLE_RIGHT_SHADOW}`);
+  const leftShadows = wrapper.parentElement.querySelectorAll(`.${ClassName.TABLE_LEFT_SHADOW}`);
+  updateOverflowShadows(getEditorFeatureFlags)(state, wrapper, tableRef, rightShadows, leftShadows);
+};
+export const isClickNear = (event, click) => {
+  const dx = click.x - event.clientX,
+        dy = click.y - event.clientY;
+  return dx * dx + dy * dy < 100;
+};
+export const getResizeCellPos = (view, event, lastColumnResizable) => {
+  const target = event.target;
+
+  if (!containsClassName(target, ClassName.RESIZE_HANDLE_DECORATION)) {
+    return null;
+  }
+
+  const tableCell = closestElement(target, 'td, th');
+
+  if (!tableCell) {
+    return null;
+  }
+
+  const cellStartPosition = view.posAtDOM(tableCell, 0);
+  return cellStartPosition - 1;
+};
+export const updateStickyMargins = table => {
+  const row = table.querySelector('tr.sticky');
+
+  if (!row) {
+    table.style.marginTop = '';
+    return;
+  }
+
+  const paddingTop = parsePx(window.getComputedStyle(row).paddingTop || '') || 0;
+  const firstRowHeight = row.clientHeight - paddingTop - 2;
+  /* border */
+  // firefox handles margin and padding differently
+  // when applied with tables
+
+  table.style.marginTop = `${browser.gecko ? firstRowHeight + tableCellPadding - tableCellBorderWidth : tableMarginTop + firstRowHeight}px`;
+};
+export const applyColWidthsToStickyRow = (colGroup, headerRow) => {
+  // sync column widths for the sticky row
+  const newCols = colWidthsForRow(colGroup, headerRow);
+
+  if (newCols) {
+    headerRow.style.gridTemplateColumns = newCols;
+  }
+};
+export const syncStickyRowToTable = tableRef => {
+  if (!tableRef) {
+    return;
+  }
+
+  const headerRow = tableRef.querySelector('tr[data-header-row]');
+
+  if (!headerRow) {
+    return;
+  }
+
+  applyColWidthsToStickyRow(tableRef.querySelector('colgroup'), headerRow);
+  applyTableWidthToStickyRow(tableRef, headerRow);
+};
+export const applyTableWidthToStickyRow = (tableRef, headerRow) => {
+  const tbody = tableRef.querySelector('tbody');
+  const wrapper = tableRef.parentElement;
+
+  if (tbody && wrapper) {
+    // when resizing in Chrome, clientWidth will give us 759px
+    // but toggling the sticky class will reset it to 760px.
+    //
+    // both elements in the dom + inspector will
+    // be the same width but at layout will be different..
+    const newWidth = Math.min(tbody.offsetWidth + 1, wrapper.offsetWidth);
+    headerRow.style.width = `${newWidth}px`;
+    headerRow.scrollLeft = wrapper.scrollLeft;
+  }
+};

package/dist/es2019/plugins/table/pm-plugins/table-resizing/utils/index.js

@@ -0,0 +1,9 @@
+export { generateColgroup, insertColgroupFromNode, hasTableBeenResized } from './colgroup';
+export { contentWidth } from './content-width';
+export { getColumnStateFromDOM, getFreeSpace, getCellsRefsInColumn, calculateColumnWidth, addContainerLeftRightPadding } from './column-state';
+export { growColumn, shrinkColumn, reduceSpace } from './resize-logic';
+export { getResizeState, updateColgroup, getTotalWidth, evenAllColumnsWidths, bulkColumnsResize, areColumnsEven, adjustColumnsWidths } from './resize-state';
+export { tableLayoutToSize, getLayoutSize, getDefaultLayoutMaxWidth, pointsAtCell, currentColWidth, domCellAround } from './misc';
+export { updateControls, isClickNear, getResizeCellPos } from './dom';
+export { scale, scaleWithParent } from './scale-table';
+export { resizeColumn } from './resize-column';

package/dist/es2019/plugins/table/pm-plugins/table-resizing/utils/misc.js

@@ -0,0 +1,90 @@
+import { calcTableWidth } from '@atlaskit/editor-common/styles';
+import { getBreakpoint, mapBreakpointToLayoutMaxWidth } from '@atlaskit/editor-common/ui';
+import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorGutterPadding, akEditorWideLayoutWidth, akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
+import { containsClassName } from '@atlaskit/editor-common/utils';
+import { getParentNodeWidth } from '@atlaskit/editor-common/node-width';
+export const tableLayoutToSize = {
+  default: akEditorDefaultLayoutWidth,
+  wide: akEditorWideLayoutWidth,
+  'full-width': akEditorFullWidthLayoutWidth
+}; // Translates named layouts in number values.
+
+export function getLayoutSize(tableLayout, containerWidth = 0, options) {
+  const {
+    isFullWidthModeEnabled
+  } = options;
+
+  if (isFullWidthModeEnabled) {
+    return containerWidth ? Math.min(containerWidth - akEditorGutterPadding * 2, akEditorFullWidthLayoutWidth) : akEditorFullWidthLayoutWidth;
+  }
+
+  const calculatedTableWidth = calcTableWidth(tableLayout, containerWidth, true);
+
+  if (calculatedTableWidth.endsWith('px')) {
+    return parseInt(calculatedTableWidth, 10);
+  }
+
+  if (tableLayout === 'default') {
+    return getDefaultLayoutMaxWidth(containerWidth);
+  }
+
+  return tableLayoutToSize[tableLayout] || containerWidth;
+}
+export function getDefaultLayoutMaxWidth(containerWidth) {
+  return mapBreakpointToLayoutMaxWidth(getBreakpoint(containerWidth));
+} // Does the current position point at a cell.
+
+export function pointsAtCell($pos) {
+  return $pos.parent.type.spec.tableRole === 'row' && $pos.nodeAfter;
+} // Get the current col width, handles colspan.
+
+export function currentColWidth(view, cellPos, {
+  colspan,
+  colwidth
+}) {
+  let width = colwidth && colwidth[colwidth.length - 1];
+
+  if (width) {
+    return width;
+  } // Not fixed, read current width from DOM
+
+
+  let domWidth = view.domAtPos(cellPos + 1).node.offsetWidth;
+  let parts = colspan || 0;
+
+  if (colwidth) {
+    for (let i = 0; i < (colspan || 0); i++) {
+      if (colwidth[i]) {
+        domWidth -= colwidth[i];
+        parts--;
+      }
+    }
+  }
+
+  return domWidth / parts;
+} // Attempts to find a parent TD/TH depending on target element.
+
+export function domCellAround(target) {
+  while (target && target.nodeName !== 'TD' && target.nodeName !== 'TH') {
+    target = containsClassName(target, 'ProseMirror') ? null : target.parentNode;
+  }
+
+  return target;
+}
+export const getTableMaxWidth = ({
+  table,
+  tableStart,
+  state,
+  layout,
+  getEditorContainerWidth
+}) => {
+  const containerWidth = getEditorContainerWidth();
+  const parentWidth = getParentNodeWidth(tableStart, state, containerWidth);
+  let maxWidth = parentWidth || getLayoutSize(layout, containerWidth.width, {});
+
+  if (table.attrs.isNumberColumnEnabled) {
+    maxWidth -= akEditorTableNumberColumnWidth;
+  }
+
+  return maxWidth;
+};

package/dist/es2019/plugins/table/pm-plugins/table-resizing/utils/resize-column.js

@@ -0,0 +1,8 @@
+// Resize a given column by an amount from the current state
+import { growColumn, shrinkColumn } from './resize-logic';
+import { updateColgroup } from './resize-state';
+export const resizeColumn = (resizeState, colIndex, amount, tableRef, selectedColumns) => {
+  const newState = amount > 0 ? growColumn(resizeState, colIndex, amount, selectedColumns) : amount < 0 ? shrinkColumn(resizeState, colIndex, amount, selectedColumns) : resizeState;
+  updateColgroup(newState, tableRef);
+  return newState;
+};

package/dist/es2019/plugins/table/pm-plugins/table-resizing/utils/resize-logic.js

@@ -0,0 +1,221 @@
+import { getFreeSpace } from './column-state';
+import { bulkColumnsResize, getTotalWidth } from './resize-state';
+export const growColumn = (state, colIndex, amount, selectedColumns) => {
+  // can't grow the last column
+  if (!state.cols[colIndex + 1]) {
+    return state;
+  }
+
+  const res = moveSpaceFrom(state, colIndex + 1, colIndex, amount);
+  const remaining = amount - res.amount;
+  let newState = res.state;
+
+  if (remaining > 0) {
+    newState = stackSpace(newState, colIndex, remaining).state;
+  }
+
+  if (selectedColumns) {
+    return bulkColumnsResize(newState, selectedColumns, colIndex);
+  }
+
+  return newState;
+};
+export const shrinkColumn = (state, colIndex, amount, selectedColumns) => {
+  // try to shrink dragging column by giving from the column to the right first
+  const res = moveSpaceFrom(state, colIndex, colIndex + 1, -amount);
+  let newState = res.state;
+  const isOverflownTable = getTotalWidth(newState) > newState.maxSize;
+  const isLastColumn = !newState.cols[colIndex + 1]; // stop resizing the last column once table is not overflown
+
+  if (isLastColumn && !isOverflownTable) {
+    return newState;
+  }
+
+  const remaining = amount + res.amount;
+
+  if (remaining < 0) {
+    newState = stackSpace(newState, colIndex + 1, remaining).state;
+  }
+
+  if (selectedColumns) {
+    return bulkColumnsResize(newState, selectedColumns, colIndex);
+  }
+
+  return newState;
+};
+export function reduceSpace(state, amount, ignoreCols = []) {
+  let remaining = amount; // keep trying to resolve resize request until we run out of free space,
+  // or nothing to resize
+
+  while (remaining > 0) {
+    // filter candidates only with free space
+    const candidates = state.cols.filter(column => {
+      return getFreeSpace(column) && ignoreCols.indexOf(column.index) === -1;
+    });
+
+    if (candidates.length === 0) {
+      break;
+    }
+
+    const requestedResize = Math.floor(remaining / candidates.length);
+
+    if (requestedResize === 0) {
+      break;
+    }
+
+    candidates.forEach(candidate => {
+      let newWidth = candidate.width - requestedResize;
+
+      if (newWidth < candidate.minWidth) {
+        // If the new requested width is less than our min
+        // Calc what width we didn't use, we'll try extract that
+        // from other cols.
+        const remainder = candidate.minWidth - newWidth;
+        newWidth = candidate.minWidth;
+        remaining = remaining - requestedResize + remainder;
+      } else {
+        remaining -= requestedResize;
+      }
+
+      state = { ...state,
+        cols: [...state.cols.slice(0, candidate.index), { ...candidate,
+          width: newWidth
+        }, ...state.cols.slice(candidate.index + 1)]
+      };
+    });
+  }
+
+  return state;
+}
+var ColType; // TODO: should handle when destIdx:
+// - is beyond the range, and then not give it back
+
+(function (ColType) {
+  ColType["SOURCE"] = "src";
+  ColType["DEST"] = "dest";
+})(ColType || (ColType = {}));
+
+function moveSpaceFrom(state, srcIdx, destIdx, amount, useFreeSpace = true) {
+  const srcCol = state.cols[srcIdx];
+  const destCol = state.cols[destIdx];
+
+  if (useFreeSpace) {
+    const freeSpace = getFreeSpace(srcCol); // if taking more than source column's free space, only take that much
+
+    if (amountFor(ColType.DEST)(amount) > freeSpace) {
+      amount = amount > 0 ? freeSpace : -freeSpace;
+    }
+  } // if the source column shrinks past its min size, don't give the space away
+
+
+  if (amountFor(ColType.SOURCE)(amount) < 0 && widthFor(ColType.SOURCE)(amount, srcCol, destCol) < srcCol.minWidth) {
+    amount = srcCol.width - srcCol.minWidth;
+  }
+
+  const newDest = destCol ? { ...destCol,
+    width: widthFor(ColType.DEST)(amount, srcCol, destCol)
+  } : undefined;
+
+  if (!newDest && amountFor(ColType.SOURCE)(amount) < 0) {
+    // non-zero-sum game, ensure that we're not removing more than the total table width either
+    const totalWidth = getTotalWidth(state);
+
+    if (totalWidth - srcCol.width + widthFor(ColType.SOURCE)(amount, srcCol, destCol) < state.maxSize) {
+      // would shrink table below max width, stop it
+      amount = state.maxSize - (totalWidth - srcCol.width) - srcCol.width - 1;
+    }
+  }
+
+  const newSrc = { ...srcCol,
+    width: widthFor(ColType.SOURCE)(amount, srcCol, destCol)
+  };
+  const newCols = state.cols.map((existingCol, idx) => idx === srcIdx ? newSrc : idx === destIdx ? newDest : existingCol).filter(Boolean);
+  return {
+    state: { ...state,
+      cols: newCols
+    },
+    amount
+  };
+}
+
+function stackSpace(state, destIdx, amount) {
+  let candidates = getCandidates(state, destIdx, amount);
+
+  while (candidates.length && amount) {
+    // search for most (or least) free space in candidates
+    let candidateIdx = findNextFreeColumn(candidates, amount);
+
+    if (candidateIdx === -1) {
+      // stack to the right -> growing the dragging column and go overflow
+      if (amount > 0) {
+        return {
+          state: { ...state,
+            cols: [...state.cols.slice(0, destIdx), { ...state.cols[destIdx],
+              width: state.cols[destIdx].width + amount
+            }, ...state.cols.slice(destIdx + 1)]
+          },
+          remaining: amount
+        };
+      } // stacking to the left, if no free space remains
+
+
+      break;
+    }
+
+    const column = candidates.find(col => col.index === candidateIdx);
+
+    if (!column || getFreeSpace(column) <= 0) {
+      // no more columns with free space remain
+      break;
+    }
+
+    const res = moveSpaceFrom(state, column.index, destIdx, amount);
+    state = res.state;
+    amount -= res.amount;
+    candidates = candidates.filter(col => col.index !== candidateIdx);
+  }
+
+  return {
+    state,
+    remaining: amount
+  };
+}
+
+function findNextFreeColumn(columns, amount) {
+  if (columns.length === 0) {
+    return -1;
+  }
+
+  const direction = amount < 0 ? 'left' : 'right';
+
+  if (direction === 'left') {
+    columns = columns.slice().reverse();
+  }
+
+  let freeIndex = -1;
+  columns.forEach(column => {
+    if (getFreeSpace(column) && freeIndex === -1) {
+      freeIndex = column.index;
+    }
+  });
+
+  if (freeIndex === -1) {
+    return -1;
+  }
+
+  return freeIndex;
+}
+
+function amountFor(colType) {
+  return amount => colType === ColType.SOURCE ? amount > 0 ? -amount : amount : amount < 0 ? -amount : amount;
+}
+
+function widthFor(colType) {
+  return (amount, srcCol, destCol) => (colType === ColType.SOURCE ? srcCol : destCol).width + amountFor(colType)(amount);
+}
+
+function getCandidates(state, destIdx, amount) {
+  const candidates = state.cols; // only consider rows after the selected column in the direction of resize
+
+  return amount < 0 ? candidates.slice(0, destIdx) : candidates.slice(destIdx + 1);
+}