@atlaskit/editor-plugin-table 5.7.9 → 5.8.0

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/nodeviews/ExternalDropTargets.tsx

@@ -60,6 +60,7 @@ export const ExternalDropTargets = ({
         pointerEvents: 'auto',
         zIndex: `${dropTargetsZIndex}`,
       }}
+      data-testid="table-floating-column-extended-drop-targets"
     >
       <div
         style={{

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/drag-and-drop/commands.ts

@@ -41,6 +41,7 @@ export const updatePluginStateDecorations = (
 export const setDropTarget = (
   type: DropTargetType,
   index: number,
+  hasMergedCells: boolean,
   tr?: Transaction,
 ) =>
   createCommand(
@@ -54,13 +55,13 @@ export const setDropTarget = (
       if (type === 'column') {
         decorationSet = updatePluginStateDecorations(
           state,
-          createColumnInsertLine(index, state.selection),
+          createColumnInsertLine(index, state.selection, hasMergedCells),
           TableDecorations.COLUMN_INSERT_LINE,
         );
       } else if (type === 'row') {
         decorationSet = updatePluginStateDecorations(
           state,
-          createRowInsertLine(index, state.selection),
+          createRowInsertLine(index, state.selection, hasMergedCells),
           TableDecorations.ROW_INSERT_LINE,
         );
       }

package/src/pm-plugins/drag-and-drop/plugin.ts

@@ -163,10 +163,16 @@ export const createPlugin = (
                 ? DropTargetType.ROW
                 : DropTargetType.COLUMN;
 
-            setDropTarget(dropTargetType, targetAdjustedIndex)(
-              editorView.state,
-              editorView.dispatch,
-            );
+            const hasMergedCells = hasMergedCellsInBetween(
+              [targetAdjustedIndex - 1, targetAdjustedIndex],
+              dropTargetType,
+            )(editorView.state.selection);
+
+            setDropTarget(
+              dropTargetType,
+              targetAdjustedIndex,
+              hasMergedCells,
+            )(editorView.state, editorView.dispatch);
           },
           onDrop(event) {
             const data = getDraggableDataFromEvent(event);

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`,
@@ -383,14 +386,20 @@ export const TableCssClassName = {
   LAST_ITEM_IN_CELL: `${tablePrefixSelector}-last-item-in-cell`,
 
   WITH_COLUMN_INSERT_LINE: `${tablePrefixSelector}-column-insert-line`,
+  WITH_COLUMN_INSERT_LINE_INACTIVE: `${tablePrefixSelector}-column-insert-line__inactive`,
   WITH_FIRST_COLUMN_INSERT_LINE: `${tablePrefixSelector}-first-column-insert-line`,
+  WITH_FIRST_COLUMN_INSERT_LINE_INACTIVE: `${tablePrefixSelector}-first-column-insert-line__inactive`,
+
   WITH_LAST_COLUMN_INSERT_LINE: `${tablePrefixSelector}-last-column-insert-line`,
+  WITH_LAST_COLUMN_INSERT_LINE_INACTIVE: `${tablePrefixSelector}-last-column-insert-line__inactive`,
 
   WITH_RESIZE_LINE: `${tablePrefixSelector}-column-resize-line`,
   WITH_RESIZE_LINE_LAST_COLUMN: `${tablePrefixSelector}-column-resize-line-last-column`,
 
   WITH_ROW_INSERT_LINE: `${tablePrefixSelector}-row-insert-line`,
+  WITH_ROW_INSERT_LINE_INACTIVE: `${tablePrefixSelector}-row-insert-line__inactive`,
   WITH_LAST_ROW_INSERT_LINE: `${tablePrefixSelector}-last-row-insert-line`,
+  WITH_LAST_ROW_INSERT_LINE_INACTIVE: `${tablePrefixSelector}-last-row-insert-line__inactive`,
 };
 
 export interface ToolbarMenuConfig {

package/src/ui/DragHandle/index.tsx

@@ -153,7 +153,7 @@ export const DragHandle = ({
         style={{
           transform: direction === 'column' ? 'none' : 'rotate(90deg)',
         }}
-        data-testid="table-floating-column-controls-drag-handle"
+        data-testid="table-drag-handle-button"
         onMouseOver={onMouseOver}
         onMouseOut={onMouseOut}
         onMouseUp={(e) => {