@atlaskit/editor-plugin-table 5.7.9 → 5.8.0

package/dist/es2019/ui/ui-styles.js

@@ -1,6 +1,6 @@
 import { css } from '@emotion/react';
 import { tableCellBorderWidth, tableMarginTop, tableMarginTopWithControl } from '@atlaskit/editor-common/styles';
-import { akEditorShadowZIndex, akEditorTableNumberColumnWidth, akEditorUnitZIndex } from '@atlaskit/editor-shared-styles';
+import { akEditorShadowZIndex, akEditorTableBorder, akEditorTableNumberColumnWidth, akEditorUnitZIndex } from '@atlaskit/editor-shared-styles';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { B300, N0, N300, N40A, N60A, Y200, Y50 } from '@atlaskit/theme/colors';
 import { TableCssClassName as ClassName } from '../types';
@@ -786,116 +786,159 @@ export const resizeHandle = () => css`
 `;
 
 // Drag and Drop: drop target insert line
+const tableCellColumnInsertLineStyles = css`
+  content: ' ';
+  position: absolute;
+  height: calc(100% + ${tableCellBorderWidth * 2}px);
+  width: ${insertLineWidth}px;
+  z-index: ${columnControlsZIndex * 2};
+`;
+const tableCellRowInsertLineStyles = css`
+  content: ' ';
+  position: absolute;
+  left: ${"var(--ds-space-negative-025, -2px)"};
+  height: ${insertLineWidth}px;
+  width: calc(100% + ${tableCellBorderWidth * 2}px);
+  z-index: ${columnControlsZIndex * 2};
+`;
+const insertLineActiveColor = css`
+  background-color: ${tableBorderSelectedColor};
+`;
+const insertLineInactiveColor = css`
+  background-color: ${`var(--ds-background-accent-gray-subtler, ${akEditorTableBorder})`};
+`;
 export const insertLine = () => css`
   .${ClassName.TABLE_CONTAINER} {
     td.${ClassName.WITH_FIRST_COLUMN_INSERT_LINE}::before {
-      content: ' ';
-      position: absolute;
+      ${tableCellColumnInsertLineStyles}
       left: -1px;
       top: -1px;
-      width: ${insertLineWidth}px;
-      height: calc(100% + ${tableCellBorderWidth * 2}px);
-      background-color: ${tableBorderSelectedColor};
-      z-index: ${columnControlsZIndex * 2};
+      ${insertLineActiveColor}
+    }
+
+    td.${ClassName.WITH_FIRST_COLUMN_INSERT_LINE_INACTIVE}::before {
+      ${tableCellColumnInsertLineStyles}
+      left: -1px;
+      top: -1px;
+      ${insertLineInactiveColor}
     }
 
     th.${ClassName.WITH_FIRST_COLUMN_INSERT_LINE}::before {
-      content: ' ';
+      ${tableCellColumnInsertLineStyles}
+      left: -1px;
+      top: -${tableCellBorderWidth}px;
+      ${insertLineActiveColor}
+    }
+
+    th.${ClassName.WITH_FIRST_COLUMN_INSERT_LINE_INACTIVE}::before {
+      ${tableCellColumnInsertLineStyles}
       left: -1px;
-      position: absolute;
-      width: ${insertLineWidth}px;
-      height: calc(100% + ${tableCellBorderWidth * 2}px);
-      background-color: ${tableBorderSelectedColor};
-      z-index: ${columnControlsZIndex * 2};
       top: -${tableCellBorderWidth}px;
+      ${insertLineInactiveColor}
     }
 
     td.${ClassName.WITH_COLUMN_INSERT_LINE}::before {
-      content: ' ';
-      position: absolute;
+      ${tableCellColumnInsertLineStyles}
       left: ${"var(--ds-space-negative-025, -2px)"};
       top: -1px;
-      width: ${insertLineWidth}px;
-      height: calc(100% + ${tableCellBorderWidth * 2}px);
-      background-color: ${tableBorderSelectedColor};
-      z-index: ${columnControlsZIndex * 2};
+      ${insertLineActiveColor}
+    }
+
+    td.${ClassName.WITH_COLUMN_INSERT_LINE_INACTIVE}::before {
+      ${tableCellColumnInsertLineStyles}
+      left: ${"var(--ds-space-negative-025, -2px)"};
+      top: -1px;
+      ${insertLineInactiveColor}
     }
 
     th.${ClassName.WITH_COLUMN_INSERT_LINE}::before {
-      content: ' ';
+      ${tableCellColumnInsertLineStyles}
+      left: ${"var(--ds-space-negative-025, -2px)"};
+      top: -${tableCellBorderWidth}px;
+      ${insertLineActiveColor}
+    }
+
+    th.${ClassName.WITH_COLUMN_INSERT_LINE_INACTIVE}::before {
+      ${tableCellColumnInsertLineStyles}
       left: ${"var(--ds-space-negative-025, -2px)"};
-      position: absolute;
-      width: ${insertLineWidth}px;
-      height: calc(100% + ${tableCellBorderWidth * 2}px);
-      background-color: ${tableBorderSelectedColor};
-      z-index: ${columnControlsZIndex * 2};
       top: -${tableCellBorderWidth}px;
+      ${insertLineInactiveColor}
     }
 
     td.${ClassName.WITH_LAST_COLUMN_INSERT_LINE}::before {
-      content: ' ';
-      position: absolute;
+      ${tableCellColumnInsertLineStyles}
       right: -1px;
       top: -1px;
-      width: ${insertLineWidth}px;
-      height: calc(100% + ${tableCellBorderWidth * 2}px);
-      background-color: ${tableBorderSelectedColor};
-      z-index: ${columnControlsZIndex * 2};
+      ${insertLineActiveColor}
+    }
+
+    td.${ClassName.WITH_LAST_COLUMN_INSERT_LINE_INACTIVE}::before {
+      ${tableCellColumnInsertLineStyles}
+      right: -1px;
+      top: -1px;
+      ${insertLineInactiveColor}
     }
 
     th.${ClassName.WITH_LAST_COLUMN_INSERT_LINE}::before {
-      content: ' ';
+      ${tableCellColumnInsertLineStyles}
+      right: -1px;
+      top: -${tableCellBorderWidth}px;
+      ${insertLineActiveColor}
+    }
+
+    th.${ClassName.WITH_LAST_COLUMN_INSERT_LINE_INACTIVE}::before {
+      ${tableCellColumnInsertLineStyles}
       right: -1px;
-      position: absolute;
-      width: ${insertLineWidth}px;
-      height: calc(100% + ${tableCellBorderWidth * 2}px);
-      background-color: ${tableBorderSelectedColor};
-      z-index: ${columnControlsZIndex * 2};
       top: -${tableCellBorderWidth}px;
+      ${insertLineInactiveColor}
     }
 
     td.${ClassName.WITH_ROW_INSERT_LINE}::before {
-      content: ' ';
-      position: absolute;
-      left: ${"var(--ds-space-negative-025, -2px)"};
+      ${tableCellRowInsertLineStyles}
       top: -1px;
-      height: ${insertLineWidth}px;
-      width: calc(100% + ${tableCellBorderWidth * 2}px);
-      background-color: ${tableBorderSelectedColor};
-      z-index: ${columnControlsZIndex * 2};
+      ${insertLineActiveColor}
+    }
+
+    td.${ClassName.WITH_ROW_INSERT_LINE_INACTIVE}::before {
+      ${tableCellRowInsertLineStyles}
+      top: -1px;
+      ${insertLineInactiveColor}
     }
 
     th.${ClassName.WITH_ROW_INSERT_LINE}::before {
-      content: ' ';
-      left: ${"var(--ds-space-negative-025, -2px)"};
-      position: absolute;
-      height: ${insertLineWidth}px;
-      width: calc(100% + ${tableCellBorderWidth * 2}px);
-      background-color: ${tableBorderSelectedColor};
-      z-index: ${columnControlsZIndex * 2};
+      ${tableCellRowInsertLineStyles}
+      top: -1px;
+      ${insertLineActiveColor}
+    }
+
+    th.${ClassName.WITH_ROW_INSERT_LINE_INACTIVE}::before {
+      ${tableCellRowInsertLineStyles}
       top: -1px;
+      ${insertLineInactiveColor}
     }
 
     td.${ClassName.WITH_LAST_ROW_INSERT_LINE}::before {
-      content: ' ';
-      position: absolute;
-      left: ${"var(--ds-space-negative-025, -2px)"};
+      ${tableCellRowInsertLineStyles}
       bottom: 0;
-      height: ${insertLineWidth}px;
-      width: calc(100% + 2px);
-      background-color: ${tableBorderSelectedColor};
-      z-index: ${columnControlsZIndex * 2};
+      ${insertLineActiveColor}
+    }
+
+    td.${ClassName.WITH_LAST_ROW_INSERT_LINE_INACTIVE}::before {
+      ${tableCellRowInsertLineStyles}
+      bottom: 0;
+      ${insertLineInactiveColor}
     }
 
     th.${ClassName.WITH_LAST_ROW_INSERT_LINE}::before {
-      content: ' ';
-      left: ${"var(--ds-space-negative-025, -2px)"};
+      ${tableCellRowInsertLineStyles}
       bottom: 0;
-      position: absolute;
-      height: ${insertLineWidth}px;
-      width: calc(100% + ${tableCellBorderWidth * 2}px);
-      background-color: ${tableBorderSelectedColor};
-      z-index: ${columnControlsZIndex * 2};
+      ${insertLineActiveColor}
+    }
+
+    th.${ClassName.WITH_LAST_ROW_INSERT_LINE_INACTIVE}::before {
+      ${tableCellRowInsertLineStyles}
+      bottom: 0;
+      ${insertLineInactiveColor}
     }
   }
 `;

package/dist/es2019/utils/decoration.js

@@ -426,7 +426,7 @@ export const createColumnLineResize = (selection, cellColumnPositioning) => {
     });
   }).filter(nonNullable);
 };
-export const createColumnInsertLine = (columnIndex, selection) => {
+export const createColumnInsertLine = (columnIndex, selection, hasMergedCells) => {
   const table = findTable(selection);
   if (!table) {
     return [];
@@ -437,7 +437,12 @@ export const createColumnInsertLine = (columnIndex, selection) => {
   if (isLastColumn) {
     columnIndex -= 1;
   }
-  const decorationClassName = isFirstColumn ? ClassName.WITH_FIRST_COLUMN_INSERT_LINE : isLastColumn ? ClassName.WITH_LAST_COLUMN_INSERT_LINE : ClassName.WITH_COLUMN_INSERT_LINE;
+  let decorationClassName;
+  if (hasMergedCells) {
+    decorationClassName = isFirstColumn ? ClassName.WITH_FIRST_COLUMN_INSERT_LINE_INACTIVE : isLastColumn ? ClassName.WITH_LAST_COLUMN_INSERT_LINE_INACTIVE : ClassName.WITH_COLUMN_INSERT_LINE_INACTIVE;
+  } else {
+    decorationClassName = isFirstColumn ? ClassName.WITH_FIRST_COLUMN_INSERT_LINE : isLastColumn ? ClassName.WITH_LAST_COLUMN_INSERT_LINE : ClassName.WITH_COLUMN_INSERT_LINE;
+  }
   const cellPositions = makeArray(map.height).map(rowIndex => map.map[map.width * rowIndex + columnIndex]).filter((cellPosition, rowIndex) => {
     if (isLastColumn) {
       return true; // If is the last column no filter applied
@@ -462,7 +467,7 @@ export const createColumnInsertLine = (columnIndex, selection) => {
     });
   }).filter(nonNullable);
 };
-export const createRowInsertLine = (rowIndex, selection) => {
+export const createRowInsertLine = (rowIndex, selection, hasMergedCells) => {
   const table = findTable(selection);
   if (!table) {
     return [];
@@ -476,7 +481,12 @@ export const createRowInsertLine = (rowIndex, selection) => {
   if (!cells) {
     return [];
   }
-  const decorationClassName = isLastRow ? ClassName.WITH_LAST_ROW_INSERT_LINE : ClassName.WITH_ROW_INSERT_LINE;
+  let decorationClassName;
+  if (hasMergedCells) {
+    decorationClassName = isLastRow ? ClassName.WITH_LAST_ROW_INSERT_LINE_INACTIVE : ClassName.WITH_ROW_INSERT_LINE_INACTIVE;
+  } else {
+    decorationClassName = isLastRow ? ClassName.WITH_LAST_ROW_INSERT_LINE : ClassName.WITH_ROW_INSERT_LINE;
+  }
   return cells.map((cell, index) => {
     if (!cell || !cell.node) {
       return;

package/dist/esm/commands/column-resize.js

@@ -0,0 +1,149 @@
+import { tableCellMinWidth } from '@atlaskit/editor-common/styles';
+import { TableMap } from '@atlaskit/editor-tables';
+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';
+var updateResizeHandleAndStatePosition = function updateResizeHandleAndStatePosition(rowIndex, columnIndex, nextResizeHandlePos) {
+  return function (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 var initiateKeyboardColumnResizing = function initiateKeyboardColumnResizing(state, dispatch, view) {
+  if (!getBooleanFF('platform.editor.a11y-column-resizing_emcvz')) {
+    return false;
+  }
+  var selection = state.selection;
+  var selectionRect = isSelectionType(selection, 'cell') ? getSelectionRect(selection) : findCellRectClosestToPos(selection.$from);
+  var cell = findCellClosestToPos(selection.$from);
+  if (selectionRect && cell && view) {
+    var cellAttrs = cell.node.attrs;
+    var width = currentColWidth(view, cell.pos, cellAttrs);
+    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 var activateNextResizeArea = function activateNextResizeArea(direction) {
+  return function (state, dispatch) {
+    if (!getBooleanFF('platform.editor.a11y-column-resizing_emcvz')) {
+      return false;
+    }
+    var _ref = getTableResizingPluginState(state) || {},
+      resizeHandlePos = _ref.resizeHandlePos,
+      dragging = _ref.dragging;
+    // If No resizing has initiated, skip to regular handler
+    if (!resizeHandlePos || !dragging) {
+      return false;
+    }
+    var selection = state.selection;
+    var cell = findCellClosestToPos(selection.$from);
+    if (!cell) {
+      // cursor position may be changed by mouse to be outside of table;
+      return false;
+    }
+    var $currentCell = state.doc.resolve(resizeHandlePos);
+    if (!$currentCell) {
+      return false;
+    }
+    var tableNode = $currentCell.node(-1);
+    var closestTable = findTableClosestToPos($currentCell);
+    var tableMap = TableMap.get(tableNode);
+    if (!tableNode || !closestTable || !tableMap) {
+      return false;
+    }
+    var currentCellRect = tableMap.findCell($currentCell.pos - $currentCell.start(-1));
+    var $nextCell = nextCell($currentCell, 'horiz', direction);
+    if ($nextCell) {
+      // we are somewhere in between the side columns of the table
+      var offset = $nextCell.pos - $nextCell.start(-1);
+      var 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) {
+        var lastCellInCurrentRow = tableMap.positionAt(currentCellRect.top, tableMap.width - 1, tableNode) + closestTable.start;
+        var $lastCell = state.doc.resolve(lastCellInCurrentRow);
+        updateResizeHandleAndStatePosition(currentCellRect.top, tableMap.width, $lastCell.pos)(state, dispatch);
+      } else if (tableMap.width === currentCellRect.right) {
+        var firsCellInCurrentRow = tableMap.positionAt(currentCellRect.top, 0, tableNode) + closestTable.start;
+        var _$nextCell = state.doc.resolve(firsCellInCurrentRow);
+        updateResizeHandleAndStatePosition(currentCellRect.top, 1, _$nextCell.pos)(state, dispatch);
+      }
+    }
+    return true;
+  };
+};
+export var changeColumnWidthByStep = function changeColumnWidthByStep(stepSize, getEditorContainerWidth) {
+  return function (state, dispatch, view) {
+    if (!getBooleanFF('platform.editor.a11y-column-resizing_emcvz')) {
+      return false;
+    }
+    var _getTableResizingPlug = getTableResizingPluginState(state),
+      resizeHandlePos = _getTableResizingPlug.resizeHandlePos,
+      dragging = _getTableResizingPlug.dragging;
+    if (!view || !resizeHandlePos || !dragging) {
+      return false;
+    }
+    var $cell = state.doc.resolve(resizeHandlePos);
+    var tableStartPosition = $cell.start(-1);
+    var originalTable = $cell.node(-1);
+    var map = TableMap.get(originalTable);
+    var domAtPos = view.domAtPos.bind(view);
+    var colIndex = map.colCount($cell.pos - tableStartPosition) + ($cell.nodeAfter ? $cell.nodeAfter.attrs.colspan : 1) - 1;
+    var dom = domAtPos(tableStartPosition).node;
+    if (dom && dom.nodeName !== 'TABLE') {
+      dom = dom.closest('table');
+    }
+    var maxSize = getTableMaxWidth({
+      table: originalTable,
+      tableStart: tableStartPosition,
+      state: state,
+      layout: originalTable.attrs.layout,
+      getEditorContainerWidth: getEditorContainerWidth
+    });
+    var initialResizeState = getResizeState({
+      minWidth: tableCellMinWidth,
+      maxSize: maxSize,
+      table: originalTable,
+      tableRef: dom,
+      start: tableStartPosition,
+      domAtPos: domAtPos
+    });
+    updateControls()(state);
+    var selectionRect = getSelectionRect(state.selection);
+    var selectedColumns = selectionRect ? getSelectedColumnIndexes(selectionRect) : [];
+    // only selected (or selected - 1) columns should be distributed
+    var resizingSelectedColumns = selectedColumns.indexOf(colIndex) > -1 || selectedColumns.indexOf(colIndex + 1) > -1;
+    var newResizeState = resizeColumn(initialResizeState, colIndex, stepSize, dom, resizingSelectedColumns ? selectedColumns : undefined);
+    var tr = updateColumnWidths(newResizeState, originalTable, tableStartPosition)(state.tr);
+    if (dispatch) {
+      dispatch(tr);
+    }
+    return true;
+  };
+};

package/dist/esm/commands/go-to-next-cell.js

@@ -4,7 +4,10 @@ import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { findParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 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';
 var TAB_FORWARD_DIRECTION = 1;
 var TAB_BACKWARD_DIRECTION = -1;
 export var goToNextCell = function goToNextCell(editorAnalyticsAPI) {
@@ -14,6 +17,18 @@ export var goToNextCell = function goToNextCell(editorAnalyticsAPI) {
       if (!table) {
         return false;
       }
+      if (getBooleanFF('platform.editor.a11y-column-resizing_emcvz')) {
+        var _getResizePluginState;
+        var isColumnResizing = !!((_getResizePluginState = getResizePluginState(state)) !== null && _getResizePluginState !== void 0 && _getResizePluginState.dragging);
+        if (isColumnResizing) {
+          tableResizingPluginCreateCommand({
+            type: 'STOP_RESIZING'
+          }, function (originalTr) {
+            return (state.tr || originalTr).setMeta('scrollIntoView', false);
+          })(state, dispatch);
+          hideResizeHandleLine()(state, dispatch);
+        }
+      }
       var map = TableMap.get(table.node);
       var _state$schema$nodes = state.schema.nodes,
         tableCell = _state$schema$nodes.tableCell,

package/dist/esm/commands/selection.js

@@ -3,7 +3,9 @@ import { Selection, TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { findTable, isColumnSelected, isRowSelected, isTableSelected, selectedRect } from '@atlaskit/editor-tables/utils';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { selectColumn, selectRow } from '../commands/misc';
+import { getPluginState as getResizePluginState } from '../pm-plugins/table-resizing/plugin-factory';
 import { getClosestSelectionRect } from '../toolbar';
 export var TableSelectionDirection = /*#__PURE__*/function (TableSelectionDirection) {
   TableSelectionDirection["TopToBottom"] = "TopToBottom";
@@ -192,9 +194,14 @@ var arrowLeftFromText = function arrowLeftFromText(editorSelectionAPI) {
       var table = findTable(selection);
       if (table) {
         var $from = selection.$from;
+        var isColumnResizing = false;
+        if (getBooleanFF('platform.editor.a11y-column-resizing_emcvz')) {
+          var columResizePluginState = getResizePluginState(state) || {};
+          isColumnResizing = Boolean(columResizePluginState === null || columResizePluginState === void 0 ? void 0 : 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) {
           var selectionState = editorSelectionAPI.sharedState.currentState() || {};
           if ((selectionState === null || selectionState === void 0 ? void 0 : selectionState.selectionRelativeToNode) === RelativeSelectionPos.Before) {
             // we have a text selection at start of first table cell, directly inside a top level paragraph,
@@ -221,8 +228,14 @@ var arrowRightFromText = function arrowRightFromText(editorSelectionAPI) {
       var table = findTable(selection);
       if (table) {
         var $to = selection.$to;
-        if (isSelectionAtEndOfTable($to, selection) && $to.parent.type.name === 'paragraph' && $to.depth === table.depth + 3 // + 3 for: row, cell & paragraph nodes
-        ) {
+        var isColumnResizing = false;
+        if (getBooleanFF('platform.editor.a11y-column-resizing_emcvz')) {
+          var columResizePluginState = getResizePluginState(state) || {};
+          isColumnResizing = Boolean(columResizePluginState === null || columResizePluginState === void 0 ? void 0 : columResizePluginState.dragging);
+        }
+        if (isSelectionAtEndOfTable($to, selection) && $to.parent.type.name === 'paragraph' && $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
           return selectFullTable(editorSelectionAPI)({

package/dist/esm/nodeviews/ExternalDropTargets.js

@@ -45,7 +45,8 @@ export var ExternalDropTargets = function ExternalDropTargets(_ref) {
       top: "-".concat(dropTargetExtendedWidth - tableMarginTop, "px"),
       pointerEvents: 'auto',
       zIndex: "".concat(dropTargetsZIndex)
-    }
+    },
+    "data-testid": "table-floating-column-extended-drop-targets"
   }, /*#__PURE__*/React.createElement("div", {
     style: {
       display: 'flex',

package/dist/esm/plugin.js

@@ -355,7 +355,8 @@ var tablesPlugin = function tablesPlugin(_ref) {
             canDrag: dragAndDropState === null || dragAndDropState === void 0 ? void 0 : dragAndDropState.canDrag,
             getEditorContainerWidth: defaultGetEditorContainerWidth,
             editorAnalyticsAPI: editorAnalyticsAPI,
-            stickyHeaders: stickyHeader
+            stickyHeaders: stickyHeader,
+            pluginConfig: pluginConfig
           }), allowControls && !isDragAndDropEnabled && !isResizing && /*#__PURE__*/React.createElement(FloatingDeleteButton, {
             editorView: editorView,
             selection: editorView.state.selection,

package/dist/esm/pm-plugins/drag-and-drop/commands.js

@@ -17,7 +17,7 @@ export var getDecorations = function getDecorations(state) {
 export var updatePluginStateDecorations = function updatePluginStateDecorations(state, decorations, key) {
   return updateDecorations(state.doc, getDecorations(state), decorations, key);
 };
-export var setDropTarget = function setDropTarget(type, index, tr) {
+export var setDropTarget = function setDropTarget(type, index, hasMergedCells, tr) {
   return createCommand(function (state) {
     var _getPluginState = getPluginState(state),
       dropTargetType = _getPluginState.dropTargetType,
@@ -27,9 +27,9 @@ export var setDropTarget = function setDropTarget(type, index, tr) {
     }
     var decorationSet = DecorationSet.empty;
     if (type === 'column') {
-      decorationSet = updatePluginStateDecorations(state, createColumnInsertLine(index, state.selection), TableDecorations.COLUMN_INSERT_LINE);
+      decorationSet = updatePluginStateDecorations(state, createColumnInsertLine(index, state.selection, hasMergedCells), TableDecorations.COLUMN_INSERT_LINE);
     } else if (type === 'row') {
-      decorationSet = updatePluginStateDecorations(state, createRowInsertLine(index, state.selection), TableDecorations.ROW_INSERT_LINE);
+      decorationSet = updatePluginStateDecorations(state, createRowInsertLine(index, state.selection, hasMergedCells), TableDecorations.ROW_INSERT_LINE);
     }
     return {
       type: DragAndDropActionType.SET_DROP_TARGET,

package/dist/esm/pm-plugins/drag-and-drop/plugin.js

@@ -131,7 +131,8 @@ export var createPlugin = function createPlugin(dispatch, eventDispatcher, edito
             var sourceType = data.sourceType,
               targetAdjustedIndex = data.targetAdjustedIndex;
             var dropTargetType = sourceType === 'table-row' ? DropTargetType.ROW : DropTargetType.COLUMN;
-            setDropTarget(dropTargetType, targetAdjustedIndex)(editorView.state, editorView.dispatch);
+            var hasMergedCells = hasMergedCellsInBetween([targetAdjustedIndex - 1, targetAdjustedIndex], dropTargetType)(editorView.state.selection);
+            setDropTarget(dropTargetType, targetAdjustedIndex, hasMergedCells)(editorView.state, editorView.dispatch);
           },
           onDrop: function onDrop(event) {
             var _cell$row, _cell$col;

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

@@ -1,9 +1,11 @@
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
-import { addColumnAfter, addColumnBefore, addRowAfter, addRowBefore, backspace, bindKeymapWithCommand, deleteColumn, deleteRow, moveColumnLeft, moveColumnRight, moveRowDown, moveRowUp, nextCell, previousCell, toggleTable } from '@atlaskit/editor-common/keymaps';
+import { addColumnAfter, addColumnBefore, addRowAfter, addRowBefore, backspace, bindKeymapWithCommand, decreaseMediaSize, deleteColumn, deleteRow, increaseMediaSize, moveColumnLeft, moveColumnRight, moveLeft, moveRight, moveRowDown, moveRowUp, nextCell, previousCell, startColumnResizing, toggleTable } from '@atlaskit/editor-common/keymaps';
 import { chainCommands } from '@atlaskit/editor-prosemirror/commands';
 import { keymap } from '@atlaskit/editor-prosemirror/keymap';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { createTable, goToNextCell, moveCursorBackward, triggerUnlessTableHeader } from '../commands';
 import { addRowAroundSelection, deleteSelectedRowsOrColumnsWithAnalyticsViaShortcut, deleteTableIfSelectedWithAnalytics, emptyMultipleCellsWithAnalytics } from '../commands-with-analytics';
+import { activateNextResizeArea, changeColumnWidthByStep, initiateKeyboardColumnResizing } from '../commands/column-resize';
 import { addColumnAfter as addColumnAfterCommand, addColumnBefore as addColumnBeforeCommand } from '../commands/insert';
 import { moveSourceWithAnalyticsViaShortcut } from '../pm-plugins/drag-and-drop/commands-with-analytics';
 import { withEditorAnalyticsAPI } from '../utils/analytics';
@@ -42,6 +44,13 @@ export function keymapPlugin(getEditorContainerWidth, editorAnalyticsAPI, dragAn
     bindKeymapWithCommand(deleteColumn.common, deleteSelectedRowsOrColumnsWithAnalyticsViaShortcut(editorAnalyticsAPI), list);
     bindKeymapWithCommand(deleteRow.common, deleteSelectedRowsOrColumnsWithAnalyticsViaShortcut(editorAnalyticsAPI), list);
   }
+  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);
 }
 export default keymapPlugin;

package/dist/esm/pm-plugins/table-resizing/event-handlers.js

@@ -11,7 +11,7 @@ import { getSelectedColumnIndexes } from '../../utils';
 import { META_KEYS } from '../table-analytics';
 import { evenColumns, setDragging, stopResizing } from './commands';
 import { getPluginState } from './plugin-factory';
-import { currentColWidth, getLayoutSize, getResizeState, pointsAtCell, resizeColumn, updateControls } from './utils';
+import { currentColWidth, getLayoutSize, getResizeState, getTableMaxWidth, pointsAtCell, resizeColumn, updateControls } from './utils';
 export var handleMouseDown = function handleMouseDown(view, event, localResizeHandlePos, getEditorContainerWidth, getEditorFeatureFlags, editorAnalyticsAPI) {
   var state = view.state,
     dispatch = view.dispatch;
@@ -35,13 +35,24 @@ export var handleMouseDown = function handleMouseDown(view, event, localResizeHa
   if (dom && dom.nodeName !== 'TABLE') {
     dom = dom.closest('table');
   }
-  var containerWidth = getEditorContainerWidth();
-  var parentWidth = getParentNodeWidth(start, state, containerWidth);
-  var 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'), containerWidth.width, {}) : parentWidth || getLayoutSize(dom.getAttribute('data-layout'), containerWidth.width, {});
-  if (originalTable.attrs.isNumberColumnEnabled) {
-    maxSize -= akEditorTableNumberColumnWidth;
+  var maxSize;
+  if (!getBooleanFF('platform.editor.a11y-column-resizing_emcvz')) {
+    var containerWidth = getEditorContainerWidth();
+    var 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'), containerWidth.width, {}) : parentWidth || getLayoutSize(dom.getAttribute('data-layout'), containerWidth.width, {});
+    if (originalTable.attrs.isNumberColumnEnabled) {
+      maxSize -= akEditorTableNumberColumnWidth;
+    }
+  } else {
+    maxSize = getTableMaxWidth({
+      table: originalTable,
+      tableStart: start,
+      state: state,
+      layout: originalTable.attrs.layout,
+      getEditorContainerWidth: getEditorContainerWidth
+    });
   }
   var resizeState = getResizeState({
     minWidth: tableCellMinWidth,

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

@@ -3,7 +3,7 @@ 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 { getLayoutSize, getDefaultLayoutMaxWidth, pointsAtCell, currentColWidth, domCellAround } from './misc';
+export { getLayoutSize, getDefaultLayoutMaxWidth, pointsAtCell, currentColWidth, domCellAround, getTableMaxWidth } from './misc';
 export { updateControls, isClickNear, getResizeCellPos } from './dom';
 export { scale, scaleWithParent, scaleTable, previewScaleTable } from './scale-table';
 export { resizeColumn } from './resize-column';