@atlaskit/editor-plugin-table 0.0.0 → 0.0.2

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

@@ -0,0 +1,276 @@
+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 const getResizeState = ({
+  minWidth,
+  maxSize,
+  table,
+  tableRef,
+  start,
+  domAtPos
+}) => {
+  if (hasTableBeenResized(table)) {
+    const cols = calcTableColumnWidths(table).map((width, index) => ({
+      width: width === 0 ? tableNewColumnMinWidth : width,
+      minWidth: width === 0 ? tableNewColumnMinWidth : minWidth,
+      index
+    }));
+    const widths = cols.map(col => col.width);
+    const tableWidth = widths.reduce((sum, width) => sum + width, 0);
+    const overflow = tableWidth > maxSize;
+    return {
+      cols,
+      widths,
+      maxSize,
+      tableWidth,
+      overflow
+    };
+  } // Getting the resize state from DOM
+
+
+  const colgroupChildren = insertColgroupFromNode(tableRef, table);
+  const cols = Array.from(colgroupChildren).map((_, index) => {
+    const cellsRefs = getCellsRefsInColumn(index, table, start, domAtPos);
+    return getColumnStateFromDOM(cellsRefs, index, minWidth);
+  });
+  const widths = cols.map(col => col.width);
+  const tableWidth = widths.reduce((sum, width) => sum + width, 0);
+  const overflow = tableWidth > maxSize;
+  return {
+    cols,
+    widths,
+    maxSize,
+    tableWidth,
+    overflow
+  };
+}; // updates Colgroup DOM node with new widths
+
+export const updateColgroup = (state, tableRef) => {
+  const cols = tableRef.querySelectorAll('col');
+  state.cols.filter(column => column && !!column.width) // if width is 0, we dont want to apply that.
+  .forEach((column, i) => {
+    if (cols[i]) {
+      cols[i].style.width = `${column.width}px`;
+    }
+  }); // colgroup has updated, reflect new widths in sticky header
+
+  syncStickyRowToTable(tableRef);
+};
+export const getTotalWidth = ({
+  cols
+}) => {
+  return cols.reduce((totalWidth, col) => 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 const adjustColumnsWidths = (resizeState, maxSize) => {
+  const totalWidth = getTotalWidth(resizeState);
+  const diff = maxSize - totalWidth;
+
+  if (diff > 0 || diff < 0 && Math.abs(diff) < tableCellMinWidth) {
+    let updated = false;
+    return { ...resizeState,
+      cols: resizeState.cols.map(col => {
+        if (!updated && col.width + diff > col.minWidth) {
+          updated = true;
+          return { ...col,
+            width: col.width + diff
+          };
+        }
+
+        return col;
+      })
+    };
+  }
+
+  return resizeState;
+};
+export const evenAllColumnsWidths = resizeState => {
+  const maxSize = getTotalWidth(resizeState);
+  const evenWidth = Math.floor(maxSize / resizeState.cols.length);
+  const cols = resizeState.cols.map(col => ({ ...col,
+    width: evenWidth
+  }));
+  return adjustColumnsWidths({ ...resizeState,
+    cols
+  }, maxSize);
+};
+
+const getSpace = (columns, start, end) => columns.slice(start, end).map(col => col.width).reduce((sum, width) => sum + width, 0);
+
+export const evenSelectedColumnsWidths = (resizeState, rect) => {
+  const cols = resizeState.cols;
+  const selectedSpace = getSpace(cols, rect.left, rect.right);
+  const allSpace = getSpace(cols, 0, cols.length);
+  const allWidth = allSpace / cols.length;
+  const width = selectedSpace / (rect.right - rect.left); // Result equals even distribution of all columns -
+  // unset widths of all columns
+
+  if (allWidth === width) {
+    return { ...resizeState,
+      widths: cols.map(() => width),
+      cols: resizeState.cols.map(col => ({ ...col,
+        width: 0
+      }))
+    };
+  }
+
+  return { ...resizeState,
+    widths: cols.map((col, i) => i >= rect.left && i < rect.right ? width : col.width),
+    cols: cols.map((col, i) => ({ ...col,
+      width: i >= rect.left && i < rect.right ? width : col.width
+    }))
+  };
+};
+export const bulkColumnsResize = (resizeState, columnsIndexes, sourceColumnIndex) => {
+  const currentTableWidth = getTotalWidth(resizeState);
+  const colIndex = columnsIndexes.indexOf(sourceColumnIndex) > -1 ? sourceColumnIndex : sourceColumnIndex + 1;
+  const sourceCol = resizeState.cols[colIndex];
+  const seenColumns = {};
+  const widthsDiffs = [];
+  const cols = resizeState.cols.map(col => {
+    if (columnsIndexes.indexOf(col.index) > -1) {
+      const diff = col.width - sourceCol.width;
+
+      if (diff !== 0) {
+        widthsDiffs.push(diff);
+      }
+
+      return { ...col,
+        width: sourceCol.width
+      };
+    }
+
+    return col;
+  });
+  let newState = { ...resizeState,
+    cols: cols.map(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) {
+        const diff = widthsDiffs.shift() || 0;
+        const column = seenColumns[col.index] || col;
+        const maybeWidth = column.width + diff;
+
+        if (maybeWidth > column.minWidth) {
+          seenColumns[column.index] = { ...column,
+            width: maybeWidth
+          };
+        } else {
+          widthsDiffs.push(maybeWidth - column.minWidth);
+          seenColumns[column.index] = { ...column,
+            width: column.minWidth
+          };
+          break;
+        }
+      }
+
+      return seenColumns[col.index] || col;
+    })
+  }; // minimum possible table widths at the current layout
+
+  const minTableWidth = resizeState.maxSize; // new table widths after bulk resize
+
+  const 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 {
+      const columnWidth = Math.floor((minTableWidth - sourceCol.width) / (newState.cols.length - 1));
+      newState = { ...resizeState,
+        cols: newState.cols.map(col => {
+          if (col.index === sourceCol.index) {
+            return col;
+          }
+
+          return { ...col,
+            width: columnWidth
+          };
+        })
+      };
+    }
+  } // fix total table widths by adding missing pixels to columns widths here and there
+
+
+  return adjustColumnsWidths(newState, resizeState.maxSize);
+};
+export const areColumnsEven = resizeState => {
+  const newResizeState = evenAllColumnsWidths(resizeState);
+  return newResizeState.cols.every((col, i) => col.width === resizeState.cols[i].width);
+}; // Get the layout
+
+export const normaliseTableLayout = input => {
+  switch (input) {
+    case 'wide':
+      return input;
+
+    case 'full-width':
+      return input;
+
+    default:
+      return 'default';
+  }
+};
+export const getNewResizeStateFromSelectedColumns = (rect, state, domAtPos, getEditorContainerWidth) => {
+  const {
+    totalRowCount,
+    totalColumnCount,
+    table
+  } = getSelectedTableInfo(state.selection);
+
+  if (!table) {
+    return;
+  }
+
+  const maybeTable = domAtPos(table.start).node;
+  const tableRef = maybeTable.closest('table');
+
+  if (!tableRef) {
+    return;
+  }
+
+  const layout = normaliseTableLayout(tableRef === null || tableRef === void 0 ? void 0 : tableRef.dataset.layout);
+  const maxSize = getTableMaxWidth({
+    table: table.node,
+    tableStart: table.start,
+    state,
+    layout,
+    getEditorContainerWidth
+  });
+  const resizeState = getResizeState({
+    minWidth: tableCellMinWidth,
+    maxSize,
+    table: table.node,
+    tableRef,
+    start: table.start,
+    domAtPos
+  });
+  const newResizeState = evenSelectedColumnsWidths(resizeState, rect);
+  const widthsBefore = resizeState.widths;
+  const widthsAfter = newResizeState.widths;
+  const changed = resizeState.widths.some((widthBefore, index) => widthBefore !== widthsAfter[index]);
+  return {
+    resizeState: newResizeState,
+    table,
+    changed,
+    attributes: {
+      position: rect.left,
+      count: rect.right - rect.left,
+      totalRowCount,
+      totalColumnCount,
+      widthsBefore,
+      widthsAfter
+    }
+  };
+};

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

@@ -0,0 +1,105 @@
+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 const scale = (tableRef, options, domAtPos) => {
+  /**
+   * isBreakoutEnabled === true -> default center aligned
+   * isBreakoutEnabled === false -> full width mode
+   */
+  const {
+    node,
+    containerWidth,
+    previousContainerWidth,
+    prevNode,
+    start,
+    isBreakoutEnabled,
+    layoutChanged
+  } = options;
+  const maxSize = getLayoutSize(node.attrs.layout, containerWidth, {
+    isBreakoutEnabled
+  });
+  const prevTableWidth = getTableWidth(prevNode);
+  const previousMaxSize = getLayoutSize(prevNode.attrs.layout, previousContainerWidth, {
+    isBreakoutEnabled
+  });
+  let newWidth = maxSize; // adjust table width if layout is updated
+
+  const hasOverflow = prevTableWidth > previousMaxSize;
+
+  if (layoutChanged && hasOverflow) {
+    // No keep overflow if the old content can be in the new size
+    const canFitInNewSize = prevTableWidth < maxSize;
+
+    if (canFitInNewSize) {
+      newWidth = maxSize;
+    } else {
+      // Keep the same scale.
+      const overflowScale = prevTableWidth / previousMaxSize;
+      newWidth = Math.floor(newWidth * overflowScale);
+    }
+  }
+
+  if (node.attrs.isNumberColumnEnabled) {
+    newWidth -= akEditorTableNumberColumnWidth;
+  }
+
+  const resizeState = getResizeState({
+    minWidth: tableCellMinWidth,
+    maxSize,
+    table: node,
+    tableRef,
+    start,
+    domAtPos
+  });
+  return scaleTableTo(resizeState, newWidth);
+};
+export const scaleWithParent = (tableRef, parentWidth, table, start, domAtPos) => {
+  const resizeState = getResizeState({
+    minWidth: tableCellMinWidth,
+    maxSize: parentWidth,
+    table,
+    tableRef,
+    start,
+    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) {
+  const scaleFactor = maxSize / getTotalWidth(state);
+  let newState = { ...state,
+    maxSize,
+    cols: state.cols.map(col => {
+      const {
+        minWidth,
+        width
+      } = col;
+      let newColWidth = Math.floor(width * scaleFactor);
+
+      if (newColWidth < minWidth) {
+        newColWidth = minWidth;
+      }
+
+      return { ...col,
+        width: newColWidth
+      };
+    })
+  };
+  let newTotalWidth = getTotalWidth(newState);
+
+  if (newTotalWidth > maxSize) {
+    newState = reduceSpace(newState, newTotalWidth - maxSize);
+  }
+
+  return adjustColumnsWidths(newState, maxSize);
+}

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

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

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

@@ -0,0 +1 @@
+export const unitToNumber = unit => unit ? parseInt(unit, 10) : 0;

package/dist/es2019/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) {
+  const list = {};
+  bindKeymapWithCommand(moveRight.common, arrowRightFromTable(editorSelectionAPI)(), list);
+  bindKeymapWithCommand(moveLeft.common, arrowLeftFromTable(editorSelectionAPI)(), list);
+  return keymap(list);
+}
+export default tableSelectionKeymapPlugin;

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

@@ -0,0 +1,103 @@
+import { defaultTableSelection } from './pm-plugins/default-table-selection';
+export default ((pluginState, action) => {
+  switch (action.type) {
+    case 'TOGGLE_HEADER_COLUMN':
+      return { ...pluginState,
+        isHeaderColumnEnabled: !pluginState.isHeaderColumnEnabled
+      };
+
+    case 'TOGGLE_HEADER_ROW':
+      return { ...pluginState,
+        isHeaderRowEnabled: !pluginState.isHeaderRowEnabled
+      };
+
+    case 'CLEAR_HOVER_SELECTION':
+      return { ...pluginState,
+        ...action.data,
+        ...defaultTableSelection
+      };
+
+    case 'SELECT_COLUMN':
+      return { ...pluginState,
+        ...action.data,
+        isContextualMenuOpen: false
+      };
+
+    case 'SET_TARGET_CELL_POSITION':
+      return { ...pluginState,
+        ...action.data,
+        isContextualMenuOpen: false
+      };
+
+    case 'SET_TABLE_LAYOUT':
+      return { ...pluginState,
+        ...action.data
+      };
+
+    case 'TOGGLE_CONTEXTUAL_MENU':
+      return { ...pluginState,
+        isContextualMenuOpen: !pluginState.isContextualMenuOpen
+      };
+
+    case 'SHOW_INSERT_ROW_BUTTON':
+      if (action.data.insertRowButtonIndex === pluginState.insertRowButtonIndex) {
+        return pluginState;
+      }
+
+      return { ...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 { ...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 { ...pluginState,
+          insertRowButtonIndex: undefined,
+          insertColumnButtonIndex: undefined
+        };
+      }
+
+      return pluginState;
+
+    case 'HIDE_RESIZE_HANDLE_LINE':
+      return { ...pluginState,
+        ...action.data,
+        resizeHandleColumnIndex: undefined
+      };
+
+    case 'ADD_RESIZE_HANDLE_DECORATIONS':
+      if (action.data.resizeHandleColumnIndex === pluginState.resizeHandleColumnIndex) {
+        return pluginState;
+      }
+
+      return { ...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 { ...pluginState,
+        ...action.data
+      };
+
+    default:
+      return pluginState;
+  }
+});

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

@@ -0,0 +1 @@
+export const sendLogs = _a => {};