@atlaskit/editor-plugin-table 5.7.10 → 5.8.1

package/src/commands/column-resize.ts

@@ -0,0 +1,257 @@
+import { tableCellMinWidth } from '@atlaskit/editor-common/styles';
+import type {
+  Command,
+  GetEditorContainerWidth,
+} from '@atlaskit/editor-common/types';
+import { TableMap } from '@atlaskit/editor-tables';
+import type {
+  CellAttributes,
+  Direction,
+} from '@atlaskit/editor-tables/src/types';
+import {
+  findCellClosestToPos,
+  findCellRectClosestToPos,
+  findTableClosestToPos,
+  getSelectionRect,
+  isSelectionType,
+  nextCell,
+} from '@atlaskit/editor-tables/src/utils';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+
+import {
+  getPluginState as getTableResizingPluginState,
+  createCommand as tableResizingPluginCreateCommand,
+} from '../pm-plugins/table-resizing/plugin-factory';
+import {
+  currentColWidth,
+  getResizeState,
+  getTableMaxWidth,
+  resizeColumn,
+  updateControls,
+} from '../pm-plugins/table-resizing/utils';
+import { updateColumnWidths } from '../transforms';
+import { getSelectedColumnIndexes } from '../utils';
+
+import { addResizeHandleDecorations, showResizeHandleLine } from './index';
+
+const updateResizeHandleAndStatePosition =
+  (
+    rowIndex: number,
+    columnIndex: number,
+    nextResizeHandlePos: number,
+  ): Command =>
+  (state, dispatch) => {
+    addResizeHandleDecorations(rowIndex, columnIndex, true)(state, dispatch);
+    // Currently only 'right' position is used in showResizeHandleLine
+    showResizeHandleLine({
+      left: 0,
+      right: columnIndex,
+    })(state, dispatch);
+
+    tableResizingPluginCreateCommand({
+      type: 'SET_RESIZE_HANDLE_POSITION',
+      data: {
+        resizeHandlePos: nextResizeHandlePos,
+      },
+    })(state, dispatch);
+    return false;
+  };
+
+export const initiateKeyboardColumnResizing: Command = (
+  state,
+  dispatch,
+  view,
+) => {
+  if (!getBooleanFF('platform.editor.a11y-column-resizing_emcvz')) {
+    return false;
+  }
+  const { selection } = state;
+  const selectionRect = isSelectionType(selection, 'cell')
+    ? getSelectionRect(selection)!
+    : findCellRectClosestToPos(selection.$from);
+  const cell = findCellClosestToPos(selection.$from);
+
+  if (selectionRect && cell && view) {
+    const cellAttrs = cell.node.attrs;
+    const width = currentColWidth(view, cell.pos, cellAttrs as CellAttributes);
+
+    updateResizeHandleAndStatePosition(
+      selectionRect.top,
+      selectionRect.right,
+      cell.pos,
+    )(state, dispatch);
+
+    tableResizingPluginCreateCommand({
+      type: 'SET_DRAGGING',
+      data: {
+        dragging: {
+          startX: 0,
+          startWidth: width,
+        },
+      },
+    })(state, dispatch);
+    return true;
+  }
+  return false;
+};
+
+export const activateNextResizeArea =
+  (direction: Direction): Command =>
+  (state, dispatch) => {
+    if (!getBooleanFF('platform.editor.a11y-column-resizing_emcvz')) {
+      return false;
+    }
+    const { resizeHandlePos, dragging } =
+      getTableResizingPluginState(state) || {};
+    // If No resizing has initiated, skip to regular handler
+    if (!resizeHandlePos || !dragging) {
+      return false;
+    }
+
+    const { selection } = state;
+    const cell = findCellClosestToPos(selection.$from);
+    if (!cell) {
+      // cursor position may be changed by mouse to be outside of table;
+      return false;
+    }
+
+    const $currentCell = state.doc.resolve(resizeHandlePos);
+    if (!$currentCell) {
+      return false;
+    }
+
+    const tableNode = $currentCell.node(-1);
+    const closestTable = findTableClosestToPos($currentCell);
+    const tableMap = TableMap.get(tableNode);
+
+    if (!tableNode || !closestTable || !tableMap) {
+      return false;
+    }
+
+    const currentCellRect = tableMap.findCell(
+      $currentCell.pos - $currentCell.start(-1),
+    );
+
+    const $nextCell = nextCell($currentCell, 'horiz', direction);
+
+    if ($nextCell) {
+      // we are somewhere in between the side columns of the table
+      const offset = $nextCell.pos - $nextCell.start(-1);
+      const rectForNextCell = tableMap.findCell(offset);
+      updateResizeHandleAndStatePosition(
+        rectForNextCell.top,
+        rectForNextCell.right,
+        $nextCell.pos,
+      )(state, dispatch);
+    } else {
+      // current position is in the one of the side columns of the table(left or right)
+      if (currentCellRect.left === 0) {
+        const lastCellInCurrentRow =
+          tableMap.positionAt(
+            currentCellRect.top,
+            tableMap.width - 1,
+            tableNode,
+          ) + closestTable.start;
+        const $lastCell = state.doc.resolve(lastCellInCurrentRow);
+
+        updateResizeHandleAndStatePosition(
+          currentCellRect.top,
+          tableMap.width,
+          $lastCell.pos,
+        )(state, dispatch);
+      } else if (tableMap.width === currentCellRect.right) {
+        const firsCellInCurrentRow =
+          tableMap.positionAt(currentCellRect.top, 0, tableNode) +
+          closestTable.start;
+        const $nextCell = state.doc.resolve(firsCellInCurrentRow);
+
+        updateResizeHandleAndStatePosition(
+          currentCellRect.top,
+          1,
+          $nextCell.pos,
+        )(state, dispatch);
+      }
+    }
+    return true;
+  };
+
+export const changeColumnWidthByStep =
+  (
+    stepSize: number,
+    getEditorContainerWidth: GetEditorContainerWidth,
+  ): Command =>
+  (state, dispatch, view) => {
+    if (!getBooleanFF('platform.editor.a11y-column-resizing_emcvz')) {
+      return false;
+    }
+    const { resizeHandlePos, dragging } = getTableResizingPluginState(state);
+    if (!view || !resizeHandlePos || !dragging) {
+      return false;
+    }
+
+    const $cell = state.doc.resolve(resizeHandlePos);
+
+    const tableStartPosition = $cell.start(-1);
+    const originalTable = $cell.node(-1);
+    const map = TableMap.get(originalTable);
+    const domAtPos = view.domAtPos.bind(view);
+
+    const colIndex =
+      map.colCount($cell.pos - tableStartPosition) +
+      ($cell.nodeAfter ? $cell.nodeAfter.attrs.colspan : 1) -
+      1;
+
+    let dom: HTMLTableElement = domAtPos(tableStartPosition)
+      .node as HTMLTableElement;
+
+    if (dom && dom.nodeName !== 'TABLE') {
+      dom = dom.closest('table') as HTMLTableElement;
+    }
+
+    const maxSize = getTableMaxWidth({
+      table: originalTable,
+      tableStart: tableStartPosition,
+      state,
+      layout: originalTable.attrs.layout,
+      getEditorContainerWidth,
+    });
+
+    const initialResizeState = getResizeState({
+      minWidth: tableCellMinWidth,
+      maxSize,
+      table: originalTable,
+      tableRef: dom,
+      start: tableStartPosition,
+      domAtPos,
+    });
+
+    updateControls()(state);
+
+    const selectionRect = getSelectionRect(state.selection);
+    const selectedColumns = selectionRect
+      ? getSelectedColumnIndexes(selectionRect)
+      : [];
+    // only selected (or selected - 1) columns should be distributed
+    const resizingSelectedColumns =
+      selectedColumns.indexOf(colIndex) > -1 ||
+      selectedColumns.indexOf(colIndex + 1) > -1;
+    const newResizeState = resizeColumn(
+      initialResizeState,
+      colIndex,
+      stepSize,
+      dom,
+      resizingSelectedColumns ? selectedColumns : undefined,
+    );
+
+    const tr = updateColumnWidths(
+      newResizeState,
+      originalTable,
+      tableStartPosition,
+    )(state.tr);
+
+    if (dispatch) {
+      dispatch(tr);
+    }
+
+    return true;
+  };

package/src/commands/go-to-next-cell.ts

@@ -10,8 +10,15 @@ import {
   goToNextCell as baseGotoNextCell,
   findTable,
 } from '@atlaskit/editor-tables/utils';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 
 import { insertRowWithAnalytics } from '../commands-with-analytics';
+import {
+  getPluginState as getResizePluginState,
+  createCommand as tableResizingPluginCreateCommand,
+} from '../pm-plugins/table-resizing/plugin-factory';
+
+import { hideResizeHandleLine } from './hover';
 
 const TAB_FORWARD_DIRECTION = 1;
 const TAB_BACKWARD_DIRECTION = -1;
@@ -25,6 +32,20 @@ export const goToNextCell =
       return false;
     }
 
+    if (getBooleanFF('platform.editor.a11y-column-resizing_emcvz')) {
+      const isColumnResizing = !!getResizePluginState(state)?.dragging;
+      if (isColumnResizing) {
+        tableResizingPluginCreateCommand(
+          {
+            type: 'STOP_RESIZING',
+          },
+          (originalTr) =>
+            (state.tr || originalTr).setMeta('scrollIntoView', false),
+        )(state, dispatch);
+        hideResizeHandleLine()(state, dispatch);
+      }
+    }
+
     const map = TableMap.get(table.node);
     const { tableCell, tableHeader } = state.schema.nodes;
     const cell = findParentNodeOfType([tableCell, tableHeader])(

package/src/commands/selection.ts

@@ -24,9 +24,11 @@ import {
   isTableSelected,
   selectedRect,
 } from '@atlaskit/editor-tables/utils';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 
 import { selectColumn, selectRow } from '../commands/misc';
 import type tablePlugin from '../plugin';
+import { getPluginState as getResizePluginState } from '../pm-plugins/table-resizing/plugin-factory';
 import { getClosestSelectionRect } from '../toolbar';
 
 export enum TableSelectionDirection {
@@ -289,11 +291,19 @@ const arrowLeftFromText =
     const table = findTable(selection);
     if (table) {
       const { $from } = selection;
+      let isColumnResizing = false;
+
+      if (getBooleanFF('platform.editor.a11y-column-resizing_emcvz')) {
+        const columResizePluginState = getResizePluginState(state) || {};
+        isColumnResizing = Boolean(columResizePluginState?.dragging);
+      }
+
       if (
         isSelectionAtStartOfTable($from, selection) &&
         $from.parent.type.name === 'paragraph' &&
         $from.depth === table.depth + 3 && // + 3 for: row, cell & paragraph nodes
-        editorSelectionAPI
+        editorSelectionAPI &&
+        !isColumnResizing
       ) {
         const selectionState: SelectionSharedState =
           editorSelectionAPI.sharedState.currentState() || {};
@@ -330,10 +340,17 @@ const arrowRightFromText =
     const table = findTable(selection);
     if (table) {
       const { $to } = selection;
+      let isColumnResizing = false;
+
+      if (getBooleanFF('platform.editor.a11y-column-resizing_emcvz')) {
+        const columResizePluginState = getResizePluginState(state) || {};
+        isColumnResizing = Boolean(columResizePluginState?.dragging);
+      }
       if (
         isSelectionAtEndOfTable($to, selection) &&
         $to.parent.type.name === 'paragraph' &&
-        $to.depth === table.depth + 3 // + 3 for: row, cell & paragraph nodes
+        $to.depth === table.depth + 3 && // + 3 for: row, cell & paragraph nodes
+        !isColumnResizing
       ) {
         // we have a text selection at end of last table cell, directly inside a top level paragraph,
         // and want to set a full table cell selection

package/src/plugin.tsx

@@ -524,6 +524,7 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
                       getEditorContainerWidth={defaultGetEditorContainerWidth}
                       editorAnalyticsAPI={editorAnalyticsAPI}
                       stickyHeaders={stickyHeader}
+                      pluginConfig={pluginConfig}
                     />
                   )}
                   {allowControls && !isDragAndDropEnabled && !isResizing && (

package/src/pm-plugins/keymap.ts

@@ -13,20 +13,26 @@ import {
   addRowBefore,
   backspace,
   bindKeymapWithCommand,
+  decreaseMediaSize,
   deleteColumn,
   deleteRow,
+  increaseMediaSize,
   moveColumnLeft,
   moveColumnRight,
+  moveLeft,
+  moveRight,
   moveRowDown,
   moveRowUp,
   nextCell,
   previousCell,
+  startColumnResizing,
   toggleTable,
 } from '@atlaskit/editor-common/keymaps';
 import type { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import type { GetEditorContainerWidth } from '@atlaskit/editor-common/types';
 import { chainCommands } from '@atlaskit/editor-prosemirror/commands';
 import { keymap } from '@atlaskit/editor-prosemirror/keymap';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 
 import {
   createTable,
@@ -40,6 +46,11 @@ import {
   deleteTableIfSelectedWithAnalytics,
   emptyMultipleCellsWithAnalytics,
 } from '../commands-with-analytics';
+import {
+  activateNextResizeArea,
+  changeColumnWidthByStep,
+  initiateKeyboardColumnResizing,
+} from '../commands/column-resize';
 import {
   addColumnAfter as addColumnAfterCommand,
   addColumnBefore as addColumnBeforeCommand,
@@ -162,6 +173,30 @@ export function keymapPlugin(
     );
   }
 
+  if (getBooleanFF('platform.editor.a11y-column-resizing_emcvz')) {
+    bindKeymapWithCommand(
+      startColumnResizing.common!,
+      initiateKeyboardColumnResizing,
+      list,
+    );
+
+    bindKeymapWithCommand(moveRight.common!, activateNextResizeArea(1), list);
+
+    bindKeymapWithCommand(moveLeft.common!, activateNextResizeArea(-1), list);
+
+    bindKeymapWithCommand(
+      decreaseMediaSize.common!,
+      changeColumnWidthByStep(-10, getEditorContainerWidth),
+      list,
+    );
+
+    bindKeymapWithCommand(
+      increaseMediaSize.common!,
+      changeColumnWidthByStep(10, getEditorContainerWidth),
+      list,
+    );
+  }
+
   return keymap(list) as SafePlugin;
 }
 

package/src/pm-plugins/table-resizing/event-handlers.ts

@@ -29,6 +29,7 @@ import {
   currentColWidth,
   getLayoutSize,
   getResizeState,
+  getTableMaxWidth,
   pointsAtCell,
   resizeColumn,
   updateControls,
@@ -72,27 +73,38 @@ export const handleMouseDown = (
     dom = dom.closest('table') as HTMLTableElement;
   }
 
-  const containerWidth = getEditorContainerWidth();
-  const parentWidth = getParentNodeWidth(start, state, containerWidth);
-
-  let maxSize = getBooleanFF('platform.editor.custom-table-width')
-    ? parentWidth ||
-      // its safe to reference table width from node as this will not have changed
-      originalTable.attrs.width ||
-      getLayoutSize(
-        dom.getAttribute('data-layout') as TableLayout,
-        containerWidth.width,
-        {},
-      )
-    : parentWidth ||
-      getLayoutSize(
-        dom.getAttribute('data-layout') as TableLayout,
-        containerWidth.width,
-        {},
-      );
-
-  if (originalTable.attrs.isNumberColumnEnabled) {
-    maxSize -= akEditorTableNumberColumnWidth;
+  let maxSize;
+  if (!getBooleanFF('platform.editor.a11y-column-resizing_emcvz')) {
+    const containerWidth = getEditorContainerWidth();
+    const parentWidth = getParentNodeWidth(start, state, containerWidth);
+
+    maxSize = getBooleanFF('platform.editor.custom-table-width')
+      ? parentWidth ||
+        // its safe to reference table width from node as this will not have changed
+        originalTable.attrs.width ||
+        getLayoutSize(
+          dom.getAttribute('data-layout') as TableLayout,
+          containerWidth.width,
+          {},
+        )
+      : parentWidth ||
+        getLayoutSize(
+          dom.getAttribute('data-layout') as TableLayout,
+          containerWidth.width,
+          {},
+        );
+
+    if (originalTable.attrs.isNumberColumnEnabled) {
+      maxSize -= akEditorTableNumberColumnWidth;
+    }
+  } else {
+    maxSize = getTableMaxWidth({
+      table: originalTable,
+      tableStart: start,
+      state,
+      layout: originalTable.attrs.layout,
+      getEditorContainerWidth,
+    });
   }
 
   const resizeState = getResizeState({

package/src/pm-plugins/table-resizing/utils/index.ts

@@ -29,6 +29,7 @@ export {
   pointsAtCell,
   currentColWidth,
   domCellAround,
+  getTableMaxWidth,
 } from './misc';
 export { updateControls, isClickNear, getResizeCellPos } from './dom';
 export {

package/src/types.ts

@@ -340,6 +340,9 @@ export const TableCssClassName = {
   /** minimised handle class */
   DRAG_HANDLE_MINIMISED: `${tablePrefixSelector}-drag-handle-minimised`,
 
+  DRAG_SUBMENU: `${tablePrefixSelector}-drag-submenu`,
+  DRAG_SUBMENU_ICON: `${tablePrefixSelector}-drag-submenu-icon`,
+
   /** Other classes */
   NUMBERED_COLUMN: `${tablePrefixSelector}-numbered-column`,
   NUMBERED_COLUMN_BUTTON: `${tablePrefixSelector}-numbered-column__button`,