@atlaskit/editor-plugin-table 0.0.0 → 0.0.1

package/dist/esm/plugins/table/pm-plugins/table-resizing/utils/resize-state.js

@@ -0,0 +1,320 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+import { tableCellMinWidth, tableNewColumnMinWidth } from '@atlaskit/editor-common/styles';
+import { calcTableColumnWidths } from '@atlaskit/editor-common/utils';
+import { hasTableBeenResized, insertColgroupFromNode } from './colgroup';
+import { getCellsRefsInColumn, getColumnStateFromDOM } from './column-state';
+import { syncStickyRowToTable } from './dom';
+import { getTableMaxWidth } from './misc';
+import { getSelectedTableInfo } from '../../../utils';
+export var getResizeState = function getResizeState(_ref) {
+  var minWidth = _ref.minWidth,
+      maxSize = _ref.maxSize,
+      table = _ref.table,
+      tableRef = _ref.tableRef,
+      start = _ref.start,
+      domAtPos = _ref.domAtPos;
+
+  if (hasTableBeenResized(table)) {
+    var _cols = calcTableColumnWidths(table).map(function (width, index) {
+      return {
+        width: width === 0 ? tableNewColumnMinWidth : width,
+        minWidth: width === 0 ? tableNewColumnMinWidth : minWidth,
+        index: index
+      };
+    });
+
+    var _widths = _cols.map(function (col) {
+      return col.width;
+    });
+
+    var _tableWidth = _widths.reduce(function (sum, width) {
+      return sum + width;
+    }, 0);
+
+    var _overflow = _tableWidth > maxSize;
+
+    return {
+      cols: _cols,
+      widths: _widths,
+      maxSize: maxSize,
+      tableWidth: _tableWidth,
+      overflow: _overflow
+    };
+  } // Getting the resize state from DOM
+
+
+  var colgroupChildren = insertColgroupFromNode(tableRef, table);
+  var cols = Array.from(colgroupChildren).map(function (_, index) {
+    var cellsRefs = getCellsRefsInColumn(index, table, start, domAtPos);
+    return getColumnStateFromDOM(cellsRefs, index, minWidth);
+  });
+  var widths = cols.map(function (col) {
+    return col.width;
+  });
+  var tableWidth = widths.reduce(function (sum, width) {
+    return sum + width;
+  }, 0);
+  var overflow = tableWidth > maxSize;
+  return {
+    cols: cols,
+    widths: widths,
+    maxSize: maxSize,
+    tableWidth: tableWidth,
+    overflow: overflow
+  };
+}; // updates Colgroup DOM node with new widths
+
+export var updateColgroup = function updateColgroup(state, tableRef) {
+  var cols = tableRef.querySelectorAll('col');
+  state.cols.filter(function (column) {
+    return column && !!column.width;
+  }) // if width is 0, we dont want to apply that.
+  .forEach(function (column, i) {
+    if (cols[i]) {
+      cols[i].style.width = "".concat(column.width, "px");
+    }
+  }); // colgroup has updated, reflect new widths in sticky header
+
+  syncStickyRowToTable(tableRef);
+};
+export var getTotalWidth = function getTotalWidth(_ref2) {
+  var cols = _ref2.cols;
+  return cols.reduce(function (totalWidth, col) {
+    return totalWidth + col.width;
+  }, 0);
+}; // adjust columns to take up the total width
+// difference in total columns widths vs table width happens due to the "Math.floor"
+
+export var adjustColumnsWidths = function adjustColumnsWidths(resizeState, maxSize) {
+  var totalWidth = getTotalWidth(resizeState);
+  var diff = maxSize - totalWidth;
+
+  if (diff > 0 || diff < 0 && Math.abs(diff) < tableCellMinWidth) {
+    var updated = false;
+    return _objectSpread(_objectSpread({}, resizeState), {}, {
+      cols: resizeState.cols.map(function (col) {
+        if (!updated && col.width + diff > col.minWidth) {
+          updated = true;
+          return _objectSpread(_objectSpread({}, col), {}, {
+            width: col.width + diff
+          });
+        }
+
+        return col;
+      })
+    });
+  }
+
+  return resizeState;
+};
+export var evenAllColumnsWidths = function evenAllColumnsWidths(resizeState) {
+  var maxSize = getTotalWidth(resizeState);
+  var evenWidth = Math.floor(maxSize / resizeState.cols.length);
+  var cols = resizeState.cols.map(function (col) {
+    return _objectSpread(_objectSpread({}, col), {}, {
+      width: evenWidth
+    });
+  });
+  return adjustColumnsWidths(_objectSpread(_objectSpread({}, resizeState), {}, {
+    cols: cols
+  }), maxSize);
+};
+
+var getSpace = function getSpace(columns, start, end) {
+  return columns.slice(start, end).map(function (col) {
+    return col.width;
+  }).reduce(function (sum, width) {
+    return sum + width;
+  }, 0);
+};
+
+export var evenSelectedColumnsWidths = function evenSelectedColumnsWidths(resizeState, rect) {
+  var cols = resizeState.cols;
+  var selectedSpace = getSpace(cols, rect.left, rect.right);
+  var allSpace = getSpace(cols, 0, cols.length);
+  var allWidth = allSpace / cols.length;
+  var width = selectedSpace / (rect.right - rect.left); // Result equals even distribution of all columns -
+  // unset widths of all columns
+
+  if (allWidth === width) {
+    return _objectSpread(_objectSpread({}, resizeState), {}, {
+      widths: cols.map(function () {
+        return width;
+      }),
+      cols: resizeState.cols.map(function (col) {
+        return _objectSpread(_objectSpread({}, col), {}, {
+          width: 0
+        });
+      })
+    });
+  }
+
+  return _objectSpread(_objectSpread({}, resizeState), {}, {
+    widths: cols.map(function (col, i) {
+      return i >= rect.left && i < rect.right ? width : col.width;
+    }),
+    cols: cols.map(function (col, i) {
+      return _objectSpread(_objectSpread({}, col), {}, {
+        width: i >= rect.left && i < rect.right ? width : col.width
+      });
+    })
+  });
+};
+export var bulkColumnsResize = function bulkColumnsResize(resizeState, columnsIndexes, sourceColumnIndex) {
+  var currentTableWidth = getTotalWidth(resizeState);
+  var colIndex = columnsIndexes.indexOf(sourceColumnIndex) > -1 ? sourceColumnIndex : sourceColumnIndex + 1;
+  var sourceCol = resizeState.cols[colIndex];
+  var seenColumns = {};
+  var widthsDiffs = [];
+  var cols = resizeState.cols.map(function (col) {
+    if (columnsIndexes.indexOf(col.index) > -1) {
+      var diff = col.width - sourceCol.width;
+
+      if (diff !== 0) {
+        widthsDiffs.push(diff);
+      }
+
+      return _objectSpread(_objectSpread({}, col), {}, {
+        width: sourceCol.width
+      });
+    }
+
+    return col;
+  });
+
+  var newState = _objectSpread(_objectSpread({}, resizeState), {}, {
+    cols: cols.map(function (col) {
+      if (columnsIndexes.indexOf(col.index) > -1 || // take from prev columns only if dragging the first handle to the left
+      columnsIndexes.indexOf(sourceColumnIndex) > -1 && col.index < colIndex) {
+        return col;
+      }
+
+      while (widthsDiffs.length) {
+        var diff = widthsDiffs.shift() || 0;
+        var column = seenColumns[col.index] || col;
+        var maybeWidth = column.width + diff;
+
+        if (maybeWidth > column.minWidth) {
+          seenColumns[column.index] = _objectSpread(_objectSpread({}, column), {}, {
+            width: maybeWidth
+          });
+        } else {
+          widthsDiffs.push(maybeWidth - column.minWidth);
+          seenColumns[column.index] = _objectSpread(_objectSpread({}, column), {}, {
+            width: column.minWidth
+          });
+          break;
+        }
+      }
+
+      return seenColumns[col.index] || col;
+    })
+  }); // minimum possible table widths at the current layout
+
+
+  var minTableWidth = resizeState.maxSize; // new table widths after bulk resize
+
+  var newTotalWidth = getTotalWidth(newState); // when all columns are selected, what do we do when sum of columns widths is lower than min possible table widths?
+
+  if (columnsIndexes.length === resizeState.cols.length && newTotalWidth < minTableWidth) {
+    // table is not in overflow -> normal resize of a single column
+    if (currentTableWidth === minTableWidth) {
+      return resizeState;
+    } // table is in overflow: keep the dragged column at its widths and evenly distribute columns
+    // to recover from overflow state
+    else {
+      var columnWidth = Math.floor((minTableWidth - sourceCol.width) / (newState.cols.length - 1));
+      newState = _objectSpread(_objectSpread({}, resizeState), {}, {
+        cols: newState.cols.map(function (col) {
+          if (col.index === sourceCol.index) {
+            return col;
+          }
+
+          return _objectSpread(_objectSpread({}, col), {}, {
+            width: columnWidth
+          });
+        })
+      });
+    }
+  } // fix total table widths by adding missing pixels to columns widths here and there
+
+
+  return adjustColumnsWidths(newState, resizeState.maxSize);
+};
+export var areColumnsEven = function areColumnsEven(resizeState) {
+  var newResizeState = evenAllColumnsWidths(resizeState);
+  return newResizeState.cols.every(function (col, i) {
+    return col.width === resizeState.cols[i].width;
+  });
+}; // Get the layout
+
+export var normaliseTableLayout = function normaliseTableLayout(input) {
+  switch (input) {
+    case 'wide':
+      return input;
+
+    case 'full-width':
+      return input;
+
+    default:
+      return 'default';
+  }
+};
+export var getNewResizeStateFromSelectedColumns = function getNewResizeStateFromSelectedColumns(rect, state, domAtPos, getEditorContainerWidth) {
+  var _getSelectedTableInfo = getSelectedTableInfo(state.selection),
+      totalRowCount = _getSelectedTableInfo.totalRowCount,
+      totalColumnCount = _getSelectedTableInfo.totalColumnCount,
+      table = _getSelectedTableInfo.table;
+
+  if (!table) {
+    return;
+  }
+
+  var maybeTable = domAtPos(table.start).node;
+  var tableRef = maybeTable.closest('table');
+
+  if (!tableRef) {
+    return;
+  }
+
+  var layout = normaliseTableLayout(tableRef === null || tableRef === void 0 ? void 0 : tableRef.dataset.layout);
+  var maxSize = getTableMaxWidth({
+    table: table.node,
+    tableStart: table.start,
+    state: state,
+    layout: layout,
+    getEditorContainerWidth: getEditorContainerWidth
+  });
+  var resizeState = getResizeState({
+    minWidth: tableCellMinWidth,
+    maxSize: maxSize,
+    table: table.node,
+    tableRef: tableRef,
+    start: table.start,
+    domAtPos: domAtPos
+  });
+  var newResizeState = evenSelectedColumnsWidths(resizeState, rect);
+  var widthsBefore = resizeState.widths;
+  var widthsAfter = newResizeState.widths;
+  var changed = resizeState.widths.some(function (widthBefore, index) {
+    return widthBefore !== widthsAfter[index];
+  });
+  return {
+    resizeState: newResizeState,
+    table: table,
+    changed: changed,
+    attributes: {
+      position: rect.left,
+      count: rect.right - rect.left,
+      totalRowCount: totalRowCount,
+      totalColumnCount: totalColumnCount,
+      widthsBefore: widthsBefore,
+      widthsAfter: widthsAfter
+    }
+  };
+};

package/dist/esm/plugins/table/pm-plugins/table-resizing/utils/scale-table.js

@@ -0,0 +1,109 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+import { tableCellMinWidth } from '@atlaskit/editor-common/styles';
+import { akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
+import { getTableWidth } from '../../../utils';
+import { getLayoutSize } from '../utils/misc';
+import { reduceSpace } from '../utils/resize-logic';
+import { adjustColumnsWidths, getResizeState, getTotalWidth } from '../utils/resize-state';
+// Base function to trigger the actual scale on a table node.
+// Will only resize/scale if a table has been previously resized.
+export var scale = function scale(tableRef, options, domAtPos) {
+  /**
+   * isBreakoutEnabled === true -> default center aligned
+   * isBreakoutEnabled === false -> full width mode
+   */
+  var node = options.node,
+      containerWidth = options.containerWidth,
+      previousContainerWidth = options.previousContainerWidth,
+      prevNode = options.prevNode,
+      start = options.start,
+      isBreakoutEnabled = options.isBreakoutEnabled,
+      layoutChanged = options.layoutChanged;
+  var maxSize = getLayoutSize(node.attrs.layout, containerWidth, {
+    isBreakoutEnabled: isBreakoutEnabled
+  });
+  var prevTableWidth = getTableWidth(prevNode);
+  var previousMaxSize = getLayoutSize(prevNode.attrs.layout, previousContainerWidth, {
+    isBreakoutEnabled: isBreakoutEnabled
+  });
+  var newWidth = maxSize; // adjust table width if layout is updated
+
+  var hasOverflow = prevTableWidth > previousMaxSize;
+
+  if (layoutChanged && hasOverflow) {
+    // No keep overflow if the old content can be in the new size
+    var canFitInNewSize = prevTableWidth < maxSize;
+
+    if (canFitInNewSize) {
+      newWidth = maxSize;
+    } else {
+      // Keep the same scale.
+      var overflowScale = prevTableWidth / previousMaxSize;
+      newWidth = Math.floor(newWidth * overflowScale);
+    }
+  }
+
+  if (node.attrs.isNumberColumnEnabled) {
+    newWidth -= akEditorTableNumberColumnWidth;
+  }
+
+  var resizeState = getResizeState({
+    minWidth: tableCellMinWidth,
+    maxSize: maxSize,
+    table: node,
+    tableRef: tableRef,
+    start: start,
+    domAtPos: domAtPos
+  });
+  return scaleTableTo(resizeState, newWidth);
+};
+export var scaleWithParent = function scaleWithParent(tableRef, parentWidth, table, start, domAtPos) {
+  var resizeState = getResizeState({
+    minWidth: tableCellMinWidth,
+    maxSize: parentWidth,
+    table: table,
+    tableRef: tableRef,
+    start: start,
+    domAtPos: domAtPos
+  });
+
+  if (table.attrs.isNumberColumnEnabled) {
+    parentWidth -= akEditorTableNumberColumnWidth;
+  }
+
+  return scaleTableTo(resizeState, Math.floor(parentWidth));
+}; // Scales the table to a given size and updates its colgroup DOM node
+
+export function scaleTableTo(state, maxSize) {
+  var scaleFactor = maxSize / getTotalWidth(state);
+
+  var newState = _objectSpread(_objectSpread({}, state), {}, {
+    maxSize: maxSize,
+    cols: state.cols.map(function (col) {
+      var minWidth = col.minWidth,
+          width = col.width;
+      var newColWidth = Math.floor(width * scaleFactor);
+
+      if (newColWidth < minWidth) {
+        newColWidth = minWidth;
+      }
+
+      return _objectSpread(_objectSpread({}, col), {}, {
+        width: newColWidth
+      });
+    })
+  });
+
+  var newTotalWidth = getTotalWidth(newState);
+
+  if (newTotalWidth > maxSize) {
+    newState = reduceSpace(newState, newTotalWidth - maxSize);
+  }
+
+  return adjustColumnsWidths(newState, maxSize);
+}

package/dist/esm/plugins/table/pm-plugins/table-resizing/utils/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/plugins/table/pm-plugins/table-resizing/utils/unit-to-number.js

@@ -0,0 +1,3 @@
+export var unitToNumber = function unitToNumber(unit) {
+  return unit ? parseInt(unit, 10) : 0;
+};

package/dist/esm/plugins/table/pm-plugins/table-selection-keymap.js

@@ -0,0 +1,10 @@
+import { keymap } from 'prosemirror-keymap';
+import { bindKeymapWithCommand, moveRight, moveLeft } from '@atlaskit/editor-common/keymaps';
+import { arrowLeftFromTable, arrowRightFromTable } from '../commands/selection';
+export function tableSelectionKeymapPlugin(editorSelectionAPI) {
+  var list = {};
+  bindKeymapWithCommand(moveRight.common, arrowRightFromTable(editorSelectionAPI)(), list);
+  bindKeymapWithCommand(moveLeft.common, arrowLeftFromTable(editorSelectionAPI)(), list);
+  return keymap(list);
+}
+export default tableSelectionKeymapPlugin;

package/dist/esm/plugins/table/reducer.js

@@ -0,0 +1,95 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+import { defaultTableSelection } from './pm-plugins/default-table-selection';
+export default (function (pluginState, action) {
+  switch (action.type) {
+    case 'TOGGLE_HEADER_COLUMN':
+      return _objectSpread(_objectSpread({}, pluginState), {}, {
+        isHeaderColumnEnabled: !pluginState.isHeaderColumnEnabled
+      });
+
+    case 'TOGGLE_HEADER_ROW':
+      return _objectSpread(_objectSpread({}, pluginState), {}, {
+        isHeaderRowEnabled: !pluginState.isHeaderRowEnabled
+      });
+
+    case 'CLEAR_HOVER_SELECTION':
+      return _objectSpread(_objectSpread(_objectSpread({}, pluginState), action.data), defaultTableSelection);
+
+    case 'SELECT_COLUMN':
+      return _objectSpread(_objectSpread(_objectSpread({}, pluginState), action.data), {}, {
+        isContextualMenuOpen: false
+      });
+
+    case 'SET_TARGET_CELL_POSITION':
+      return _objectSpread(_objectSpread(_objectSpread({}, pluginState), action.data), {}, {
+        isContextualMenuOpen: false
+      });
+
+    case 'SET_TABLE_LAYOUT':
+      return _objectSpread(_objectSpread({}, pluginState), action.data);
+
+    case 'TOGGLE_CONTEXTUAL_MENU':
+      return _objectSpread(_objectSpread({}, pluginState), {}, {
+        isContextualMenuOpen: !pluginState.isContextualMenuOpen
+      });
+
+    case 'SHOW_INSERT_ROW_BUTTON':
+      if (action.data.insertRowButtonIndex === pluginState.insertRowButtonIndex) {
+        return pluginState;
+      }
+
+      return _objectSpread(_objectSpread(_objectSpread({}, pluginState), action.data), {}, {
+        insertColumnButtonIndex: undefined // We need to assure that column is not shown
+
+      });
+
+    case 'SHOW_INSERT_COLUMN_BUTTON':
+      if (action.data.insertColumnButtonIndex === pluginState.insertColumnButtonIndex) {
+        return pluginState;
+      }
+
+      return _objectSpread(_objectSpread(_objectSpread({}, pluginState), action.data), {}, {
+        insertRowButtonIndex: undefined // We need to assure that row is not shown
+
+      });
+
+    case 'HIDE_INSERT_COLUMN_OR_ROW_BUTTON':
+      if (pluginState.insertRowButtonIndex !== undefined || pluginState.insertColumnButtonIndex !== undefined) {
+        return _objectSpread(_objectSpread({}, pluginState), {}, {
+          insertRowButtonIndex: undefined,
+          insertColumnButtonIndex: undefined
+        });
+      }
+
+      return pluginState;
+
+    case 'HIDE_RESIZE_HANDLE_LINE':
+      return _objectSpread(_objectSpread(_objectSpread({}, pluginState), action.data), {}, {
+        resizeHandleColumnIndex: undefined
+      });
+
+    case 'ADD_RESIZE_HANDLE_DECORATIONS':
+      if (action.data.resizeHandleColumnIndex === pluginState.resizeHandleColumnIndex) {
+        return pluginState;
+      }
+
+      return _objectSpread(_objectSpread({}, pluginState), action.data);
+
+    case 'SET_TABLE_REF':
+    case 'HOVER_ROWS':
+    case 'HOVER_COLUMNS':
+    case 'HOVER_TABLE':
+    case 'HOVER_CELLS':
+    case 'SHOW_RESIZE_HANDLE_LINE':
+    case 'SET_EDITOR_FOCUS':
+      return _objectSpread(_objectSpread({}, pluginState), action.data);
+
+    default:
+      return pluginState;
+  }
+});

package/dist/esm/plugins/table/todo-stubs.js

@@ -0,0 +1 @@
+export var sendLogs = function sendLogs(_a) {};