@atlaskit/editor-plugin-table 5.7.9 → 5.7.10

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/types.js

@@ -134,12 +134,17 @@ export var TableCssClassName = _objectSpread(_objectSpread({}, TableSharedCssCla
   TOP_LEFT_CELL: 'table > tbody > tr:nth-child(2) > td:nth-child(1)',
   LAST_ITEM_IN_CELL: "".concat(tablePrefixSelector, "-last-item-in-cell"),
   WITH_COLUMN_INSERT_LINE: "".concat(tablePrefixSelector, "-column-insert-line"),
+  WITH_COLUMN_INSERT_LINE_INACTIVE: "".concat(tablePrefixSelector, "-column-insert-line__inactive"),
   WITH_FIRST_COLUMN_INSERT_LINE: "".concat(tablePrefixSelector, "-first-column-insert-line"),
+  WITH_FIRST_COLUMN_INSERT_LINE_INACTIVE: "".concat(tablePrefixSelector, "-first-column-insert-line__inactive"),
   WITH_LAST_COLUMN_INSERT_LINE: "".concat(tablePrefixSelector, "-last-column-insert-line"),
+  WITH_LAST_COLUMN_INSERT_LINE_INACTIVE: "".concat(tablePrefixSelector, "-last-column-insert-line__inactive"),
   WITH_RESIZE_LINE: "".concat(tablePrefixSelector, "-column-resize-line"),
   WITH_RESIZE_LINE_LAST_COLUMN: "".concat(tablePrefixSelector, "-column-resize-line-last-column"),
   WITH_ROW_INSERT_LINE: "".concat(tablePrefixSelector, "-row-insert-line"),
-  WITH_LAST_ROW_INSERT_LINE: "".concat(tablePrefixSelector, "-last-row-insert-line")
+  WITH_ROW_INSERT_LINE_INACTIVE: "".concat(tablePrefixSelector, "-row-insert-line__inactive"),
+  WITH_LAST_ROW_INSERT_LINE: "".concat(tablePrefixSelector, "-last-row-insert-line"),
+  WITH_LAST_ROW_INSERT_LINE_INACTIVE: "".concat(tablePrefixSelector, "-last-row-insert-line__inactive")
 });
 export var ShadowEvent = /*#__PURE__*/function (ShadowEvent) {
   ShadowEvent["SHOW_BEFORE_SHADOW"] = "showBeforeShadow";

package/dist/esm/ui/DragHandle/index.js

@@ -113,7 +113,7 @@ export var DragHandle = function DragHandle(_ref) {
     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: function onMouseUp(e) {

package/dist/esm/ui/TableFloatingColumnControls/ColumnControls/index.js

@@ -144,7 +144,7 @@ export var ColumnControls = function ColumnControls(_ref) {
 
     // this indexes are used to calculate the drag and drop source
     var indexes = isColumnsSelected ? isHover ? colIndexes : selectedColIndexes : colIndexes;
-    return showCondition && /*#__PURE__*/React.createElement("div", {
+    return /*#__PURE__*/React.createElement("div", {
       key: type,
       style: {
         gridColumn: isSelecting ? selectedColumnPosition : gridColumnPosition,
@@ -156,7 +156,7 @@ export var ColumnControls = function ColumnControls(_ref) {
         zIndex: 99
       },
       "data-column-control-index": hoveredCell.colIndex,
-      "data-testid": 'table-floating-column-control'
+      "data-testid": "table-floating-column-".concat(isSelecting ? selectedColIndexes[0] : colIndex, "-drag-handle")
     }, /*#__PURE__*/React.createElement(DragHandle, {
       isDragMenuTarget: !isHover,
       direction: "column",

package/dist/esm/ui/TableFloatingControls/RowControls/DragControls.js

@@ -130,7 +130,7 @@ var DragControlsComponent = function DragControlsComponent(_ref) {
     var currentSelectionAppearance = isRowsSelected ? isInDanger ? 'danger' : 'selected' : hoveredAppearance;
     var isSelecting = isRowsSelected && !isHover;
     var indexes = isRowsSelected ? isHover ? rowIndexes : selectedRowIndexes : rowIndexes;
-    return showCondition && /*#__PURE__*/React.createElement("div", {
+    return /*#__PURE__*/React.createElement("div", {
       key: type,
       style: {
         gridRow: isSelecting ? selectedRowPosition : gridRowPosition,
@@ -140,7 +140,7 @@ var DragControlsComponent = function DragControlsComponent(_ref) {
         position: 'relative',
         right: '-0.5px'
       },
-      "data-testid": 'table-floating-row-drag-handle'
+      "data-testid": "table-floating-row-".concat(isSelecting ? selectedRowIndexes[0] : rowIndex, "-drag-handle")
     }, /*#__PURE__*/React.createElement(DragHandle, {
       isDragMenuTarget: !isHover,
       direction: "row",

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

@@ -1,8 +1,8 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30, _templateObject31, _templateObject32, _templateObject33;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30, _templateObject31, _templateObject32, _templateObject33, _templateObject34, _templateObject35, _templateObject36, _templateObject37;
 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';
@@ -112,6 +112,10 @@ export var resizeHandle = function resizeHandle() {
 };
 
 // Drag and Drop: drop target insert line
+var tableCellColumnInsertLineStyles = css(_templateObject33 || (_templateObject33 = _taggedTemplateLiteral(["\n  content: ' ';\n  position: absolute;\n  height: calc(100% + ", "px);\n  width: ", "px;\n  z-index: ", ";\n"])), tableCellBorderWidth * 2, insertLineWidth, columnControlsZIndex * 2);
+var tableCellRowInsertLineStyles = css(_templateObject34 || (_templateObject34 = _taggedTemplateLiteral(["\n  content: ' ';\n  position: absolute;\n  left: ", ";\n  height: ", "px;\n  width: calc(100% + ", "px);\n  z-index: ", ";\n"])), "var(--ds-space-negative-025, -2px)", insertLineWidth, tableCellBorderWidth * 2, columnControlsZIndex * 2);
+var insertLineActiveColor = css(_templateObject35 || (_templateObject35 = _taggedTemplateLiteral(["\n  background-color: ", ";\n"])), tableBorderSelectedColor);
+var insertLineInactiveColor = css(_templateObject36 || (_templateObject36 = _taggedTemplateLiteral(["\n  background-color: ", ";\n"])), "var(--ds-background-accent-gray-subtler, ".concat(akEditorTableBorder, ")"));
 export var insertLine = function insertLine() {
-  return css(_templateObject33 || (_templateObject33 = _taggedTemplateLiteral(["\n  .", " {\n    td.", "::before {\n      content: ' ';\n      position: absolute;\n      left: -1px;\n      top: -1px;\n      width: ", "px;\n      height: calc(100% + ", "px);\n      background-color: ", ";\n      z-index: ", ";\n    }\n\n    th.", "::before {\n      content: ' ';\n      left: -1px;\n      position: absolute;\n      width: ", "px;\n      height: calc(100% + ", "px);\n      background-color: ", ";\n      z-index: ", ";\n      top: -", "px;\n    }\n\n    td.", "::before {\n      content: ' ';\n      position: absolute;\n      left: ", ";\n      top: -1px;\n      width: ", "px;\n      height: calc(100% + ", "px);\n      background-color: ", ";\n      z-index: ", ";\n    }\n\n    th.", "::before {\n      content: ' ';\n      left: ", ";\n      position: absolute;\n      width: ", "px;\n      height: calc(100% + ", "px);\n      background-color: ", ";\n      z-index: ", ";\n      top: -", "px;\n    }\n\n    td.", "::before {\n      content: ' ';\n      position: absolute;\n      right: -1px;\n      top: -1px;\n      width: ", "px;\n      height: calc(100% + ", "px);\n      background-color: ", ";\n      z-index: ", ";\n    }\n\n    th.", "::before {\n      content: ' ';\n      right: -1px;\n      position: absolute;\n      width: ", "px;\n      height: calc(100% + ", "px);\n      background-color: ", ";\n      z-index: ", ";\n      top: -", "px;\n    }\n\n    td.", "::before {\n      content: ' ';\n      position: absolute;\n      left: ", ";\n      top: -1px;\n      height: ", "px;\n      width: calc(100% + ", "px);\n      background-color: ", ";\n      z-index: ", ";\n    }\n\n    th.", "::before {\n      content: ' ';\n      left: ", ";\n      position: absolute;\n      height: ", "px;\n      width: calc(100% + ", "px);\n      background-color: ", ";\n      z-index: ", ";\n      top: -1px;\n    }\n\n    td.", "::before {\n      content: ' ';\n      position: absolute;\n      left: ", ";\n      bottom: 0;\n      height: ", "px;\n      width: calc(100% + 2px);\n      background-color: ", ";\n      z-index: ", ";\n    }\n\n    th.", "::before {\n      content: ' ';\n      left: ", ";\n      bottom: 0;\n      position: absolute;\n      height: ", "px;\n      width: calc(100% + ", "px);\n      background-color: ", ";\n      z-index: ", ";\n    }\n  }\n"])), ClassName.TABLE_CONTAINER, ClassName.WITH_FIRST_COLUMN_INSERT_LINE, insertLineWidth, tableCellBorderWidth * 2, tableBorderSelectedColor, columnControlsZIndex * 2, ClassName.WITH_FIRST_COLUMN_INSERT_LINE, insertLineWidth, tableCellBorderWidth * 2, tableBorderSelectedColor, columnControlsZIndex * 2, tableCellBorderWidth, ClassName.WITH_COLUMN_INSERT_LINE, "var(--ds-space-negative-025, -2px)", insertLineWidth, tableCellBorderWidth * 2, tableBorderSelectedColor, columnControlsZIndex * 2, ClassName.WITH_COLUMN_INSERT_LINE, "var(--ds-space-negative-025, -2px)", insertLineWidth, tableCellBorderWidth * 2, tableBorderSelectedColor, columnControlsZIndex * 2, tableCellBorderWidth, ClassName.WITH_LAST_COLUMN_INSERT_LINE, insertLineWidth, tableCellBorderWidth * 2, tableBorderSelectedColor, columnControlsZIndex * 2, ClassName.WITH_LAST_COLUMN_INSERT_LINE, insertLineWidth, tableCellBorderWidth * 2, tableBorderSelectedColor, columnControlsZIndex * 2, tableCellBorderWidth, ClassName.WITH_ROW_INSERT_LINE, "var(--ds-space-negative-025, -2px)", insertLineWidth, tableCellBorderWidth * 2, tableBorderSelectedColor, columnControlsZIndex * 2, ClassName.WITH_ROW_INSERT_LINE, "var(--ds-space-negative-025, -2px)", insertLineWidth, tableCellBorderWidth * 2, tableBorderSelectedColor, columnControlsZIndex * 2, ClassName.WITH_LAST_ROW_INSERT_LINE, "var(--ds-space-negative-025, -2px)", insertLineWidth, tableBorderSelectedColor, columnControlsZIndex * 2, ClassName.WITH_LAST_ROW_INSERT_LINE, "var(--ds-space-negative-025, -2px)", insertLineWidth, tableCellBorderWidth * 2, tableBorderSelectedColor, columnControlsZIndex * 2);
+  return css(_templateObject37 || (_templateObject37 = _taggedTemplateLiteral(["\n  .", " {\n    td.", "::before {\n      ", "\n      left: -1px;\n      top: -1px;\n      ", "\n    }\n\n    td.", "::before {\n      ", "\n      left: -1px;\n      top: -1px;\n      ", "\n    }\n\n    th.", "::before {\n      ", "\n      left: -1px;\n      top: -", "px;\n      ", "\n    }\n\n    th.", "::before {\n      ", "\n      left: -1px;\n      top: -", "px;\n      ", "\n    }\n\n    td.", "::before {\n      ", "\n      left: ", ";\n      top: -1px;\n      ", "\n    }\n\n    td.", "::before {\n      ", "\n      left: ", ";\n      top: -1px;\n      ", "\n    }\n\n    th.", "::before {\n      ", "\n      left: ", ";\n      top: -", "px;\n      ", "\n    }\n\n    th.", "::before {\n      ", "\n      left: ", ";\n      top: -", "px;\n      ", "\n    }\n\n    td.", "::before {\n      ", "\n      right: -1px;\n      top: -1px;\n      ", "\n    }\n\n    td.", "::before {\n      ", "\n      right: -1px;\n      top: -1px;\n      ", "\n    }\n\n    th.", "::before {\n      ", "\n      right: -1px;\n      top: -", "px;\n      ", "\n    }\n\n    th.", "::before {\n      ", "\n      right: -1px;\n      top: -", "px;\n      ", "\n    }\n\n    td.", "::before {\n      ", "\n      top: -1px;\n      ", "\n    }\n\n    td.", "::before {\n      ", "\n      top: -1px;\n      ", "\n    }\n\n    th.", "::before {\n      ", "\n      top: -1px;\n      ", "\n    }\n\n    th.", "::before {\n      ", "\n      top: -1px;\n      ", "\n    }\n\n    td.", "::before {\n      ", "\n      bottom: 0;\n      ", "\n    }\n\n    td.", "::before {\n      ", "\n      bottom: 0;\n      ", "\n    }\n\n    th.", "::before {\n      ", "\n      bottom: 0;\n      ", "\n    }\n\n    th.", "::before {\n      ", "\n      bottom: 0;\n      ", "\n    }\n  }\n"])), ClassName.TABLE_CONTAINER, ClassName.WITH_FIRST_COLUMN_INSERT_LINE, tableCellColumnInsertLineStyles, insertLineActiveColor, ClassName.WITH_FIRST_COLUMN_INSERT_LINE_INACTIVE, tableCellColumnInsertLineStyles, insertLineInactiveColor, ClassName.WITH_FIRST_COLUMN_INSERT_LINE, tableCellColumnInsertLineStyles, tableCellBorderWidth, insertLineActiveColor, ClassName.WITH_FIRST_COLUMN_INSERT_LINE_INACTIVE, tableCellColumnInsertLineStyles, tableCellBorderWidth, insertLineInactiveColor, ClassName.WITH_COLUMN_INSERT_LINE, tableCellColumnInsertLineStyles, "var(--ds-space-negative-025, -2px)", insertLineActiveColor, ClassName.WITH_COLUMN_INSERT_LINE_INACTIVE, tableCellColumnInsertLineStyles, "var(--ds-space-negative-025, -2px)", insertLineInactiveColor, ClassName.WITH_COLUMN_INSERT_LINE, tableCellColumnInsertLineStyles, "var(--ds-space-negative-025, -2px)", tableCellBorderWidth, insertLineActiveColor, ClassName.WITH_COLUMN_INSERT_LINE_INACTIVE, tableCellColumnInsertLineStyles, "var(--ds-space-negative-025, -2px)", tableCellBorderWidth, insertLineInactiveColor, ClassName.WITH_LAST_COLUMN_INSERT_LINE, tableCellColumnInsertLineStyles, insertLineActiveColor, ClassName.WITH_LAST_COLUMN_INSERT_LINE_INACTIVE, tableCellColumnInsertLineStyles, insertLineInactiveColor, ClassName.WITH_LAST_COLUMN_INSERT_LINE, tableCellColumnInsertLineStyles, tableCellBorderWidth, insertLineActiveColor, ClassName.WITH_LAST_COLUMN_INSERT_LINE_INACTIVE, tableCellColumnInsertLineStyles, tableCellBorderWidth, insertLineInactiveColor, ClassName.WITH_ROW_INSERT_LINE, tableCellRowInsertLineStyles, insertLineActiveColor, ClassName.WITH_ROW_INSERT_LINE_INACTIVE, tableCellRowInsertLineStyles, insertLineInactiveColor, ClassName.WITH_ROW_INSERT_LINE, tableCellRowInsertLineStyles, insertLineActiveColor, ClassName.WITH_ROW_INSERT_LINE_INACTIVE, tableCellRowInsertLineStyles, insertLineInactiveColor, ClassName.WITH_LAST_ROW_INSERT_LINE, tableCellRowInsertLineStyles, insertLineActiveColor, ClassName.WITH_LAST_ROW_INSERT_LINE_INACTIVE, tableCellRowInsertLineStyles, insertLineInactiveColor, ClassName.WITH_LAST_ROW_INSERT_LINE, tableCellRowInsertLineStyles, insertLineActiveColor, ClassName.WITH_LAST_ROW_INSERT_LINE_INACTIVE, tableCellRowInsertLineStyles, insertLineInactiveColor);
 };

package/dist/esm/utils/decoration.js

@@ -453,7 +453,7 @@ export var createColumnLineResize = function createColumnLineResize(selection, c
     });
   }).filter(nonNullable);
 };
-export var createColumnInsertLine = function createColumnInsertLine(columnIndex, selection) {
+export var createColumnInsertLine = function createColumnInsertLine(columnIndex, selection, hasMergedCells) {
   var table = findTable(selection);
   if (!table) {
     return [];
@@ -464,7 +464,12 @@ export var createColumnInsertLine = function createColumnInsertLine(columnIndex,
   if (isLastColumn) {
     columnIndex -= 1;
   }
-  var decorationClassName = isFirstColumn ? ClassName.WITH_FIRST_COLUMN_INSERT_LINE : isLastColumn ? ClassName.WITH_LAST_COLUMN_INSERT_LINE : ClassName.WITH_COLUMN_INSERT_LINE;
+  var 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;
+  }
   var cellPositions = makeArray(map.height).map(function (rowIndex) {
     return map.map[map.width * rowIndex + columnIndex];
   }).filter(function (cellPosition, rowIndex) {
@@ -493,7 +498,7 @@ export var createColumnInsertLine = function createColumnInsertLine(columnIndex,
     });
   }).filter(nonNullable);
 };
-export var createRowInsertLine = function createRowInsertLine(rowIndex, selection) {
+export var createRowInsertLine = function createRowInsertLine(rowIndex, selection, hasMergedCells) {
   var table = findTable(selection);
   if (!table) {
     return [];
@@ -507,7 +512,12 @@ export var createRowInsertLine = function createRowInsertLine(rowIndex, selectio
   if (!cells) {
     return [];
   }
-  var decorationClassName = isLastRow ? ClassName.WITH_LAST_ROW_INSERT_LINE : ClassName.WITH_ROW_INSERT_LINE;
+  var 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(function (cell, index) {
     if (!cell || !cell.node) {
       return;

package/dist/types/pm-plugins/drag-and-drop/commands.d.ts

@@ -6,7 +6,7 @@ import { TableDecorations } from '../../types';
 import { DropTargetType } from './consts';
 export declare const getDecorations: (state: EditorState) => DecorationSet;
 export declare const updatePluginStateDecorations: (state: EditorState, decorations: Decoration[], key: TableDecorations) => DecorationSet;
-export declare const setDropTarget: (type: DropTargetType, index: number, tr?: Transaction) => import("@atlaskit/editor-common/types").Command;
+export declare const setDropTarget: (type: DropTargetType, index: number, hasMergedCells: boolean, tr?: Transaction) => import("@atlaskit/editor-common/types").Command;
 export declare const clearDropTarget: (tr?: Transaction) => import("@atlaskit/editor-common/types").Command;
 export declare const moveSource: (sourceType: DraggableType, sourceIndex: number, targetIndex: number, tr?: Transaction) => import("@atlaskit/editor-common/types").Command;
 export declare const toggleDragMenu: (isDragMenuOpen: boolean | undefined, direction?: TableDirection, index?: number) => import("@atlaskit/editor-common/types").Command;

package/dist/types/types.d.ts

@@ -338,12 +338,17 @@ export declare const TableCssClassName: {
     TOP_LEFT_CELL: string;
     LAST_ITEM_IN_CELL: string;
     WITH_COLUMN_INSERT_LINE: string;
+    WITH_COLUMN_INSERT_LINE_INACTIVE: string;
     WITH_FIRST_COLUMN_INSERT_LINE: string;
+    WITH_FIRST_COLUMN_INSERT_LINE_INACTIVE: string;
     WITH_LAST_COLUMN_INSERT_LINE: string;
+    WITH_LAST_COLUMN_INSERT_LINE_INACTIVE: string;
     WITH_RESIZE_LINE: string;
     WITH_RESIZE_LINE_LAST_COLUMN: string;
     WITH_ROW_INSERT_LINE: string;
+    WITH_ROW_INSERT_LINE_INACTIVE: string;
     WITH_LAST_ROW_INSERT_LINE: string;
+    WITH_LAST_ROW_INSERT_LINE_INACTIVE: string;
     TABLE_CONTAINER: string;
     TABLE_NODE_WRAPPER: string;
     TABLE_LEFT_SHADOW: string;

package/dist/types/utils/decoration.d.ts

@@ -14,5 +14,5 @@ export declare const createColumnControlsDecoration: (selection: Selection) => D
 export declare const updateDecorations: (node: PmNode, decorationSet: DecorationSet, decorations: Decoration[], key: TableDecorations) => DecorationSet;
 export declare const createResizeHandleDecoration: (tr: Transaction | ReadonlyTransaction, rowIndexTarget: number, columnEndIndexTarget: Omit<CellColumnPositioning, 'left'>, includeTooltip: boolean | undefined, getIntl: () => IntlShape) => [Decoration[], Decoration[]];
 export declare const createColumnLineResize: (selection: Selection, cellColumnPositioning: Omit<CellColumnPositioning, 'left'>) => Decoration[];
-export declare const createColumnInsertLine: (columnIndex: number, selection: Selection) => Decoration[];
-export declare const createRowInsertLine: (rowIndex: number, selection: Selection) => Decoration[];
+export declare const createColumnInsertLine: (columnIndex: number, selection: Selection, hasMergedCells: boolean) => Decoration[];
+export declare const createRowInsertLine: (rowIndex: number, selection: Selection, hasMergedCells: boolean) => Decoration[];

package/dist/types-ts4.5/pm-plugins/drag-and-drop/commands.d.ts

@@ -6,7 +6,7 @@ import { TableDecorations } from '../../types';
 import { DropTargetType } from './consts';
 export declare const getDecorations: (state: EditorState) => DecorationSet;
 export declare const updatePluginStateDecorations: (state: EditorState, decorations: Decoration[], key: TableDecorations) => DecorationSet;
-export declare const setDropTarget: (type: DropTargetType, index: number, tr?: Transaction) => import("@atlaskit/editor-common/types").Command;
+export declare const setDropTarget: (type: DropTargetType, index: number, hasMergedCells: boolean, tr?: Transaction) => import("@atlaskit/editor-common/types").Command;
 export declare const clearDropTarget: (tr?: Transaction) => import("@atlaskit/editor-common/types").Command;
 export declare const moveSource: (sourceType: DraggableType, sourceIndex: number, targetIndex: number, tr?: Transaction) => import("@atlaskit/editor-common/types").Command;
 export declare const toggleDragMenu: (isDragMenuOpen: boolean | undefined, direction?: TableDirection, index?: number) => import("@atlaskit/editor-common/types").Command;

package/dist/types-ts4.5/types.d.ts

@@ -338,12 +338,17 @@ export declare const TableCssClassName: {
     TOP_LEFT_CELL: string;
     LAST_ITEM_IN_CELL: string;
     WITH_COLUMN_INSERT_LINE: string;
+    WITH_COLUMN_INSERT_LINE_INACTIVE: string;
     WITH_FIRST_COLUMN_INSERT_LINE: string;
+    WITH_FIRST_COLUMN_INSERT_LINE_INACTIVE: string;
     WITH_LAST_COLUMN_INSERT_LINE: string;
+    WITH_LAST_COLUMN_INSERT_LINE_INACTIVE: string;
     WITH_RESIZE_LINE: string;
     WITH_RESIZE_LINE_LAST_COLUMN: string;
     WITH_ROW_INSERT_LINE: string;
+    WITH_ROW_INSERT_LINE_INACTIVE: string;
     WITH_LAST_ROW_INSERT_LINE: string;
+    WITH_LAST_ROW_INSERT_LINE_INACTIVE: string;
     TABLE_CONTAINER: string;
     TABLE_NODE_WRAPPER: string;
     TABLE_LEFT_SHADOW: string;

package/dist/types-ts4.5/utils/decoration.d.ts

@@ -17,5 +17,5 @@ export declare const createResizeHandleDecoration: (tr: Transaction | ReadonlyTr
     Decoration[]
 ];
 export declare const createColumnLineResize: (selection: Selection, cellColumnPositioning: Omit<CellColumnPositioning, 'left'>) => Decoration[];
-export declare const createColumnInsertLine: (columnIndex: number, selection: Selection) => Decoration[];
-export declare const createRowInsertLine: (rowIndex: number, selection: Selection) => Decoration[];
+export declare const createColumnInsertLine: (columnIndex: number, selection: Selection, hasMergedCells: boolean) => Decoration[];
+export declare const createRowInsertLine: (rowIndex: number, selection: Selection, hasMergedCells: boolean) => Decoration[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "5.7.9",
+  "version": "5.7.10",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -30,7 +30,7 @@
   "dependencies": {
     "@atlaskit/adf-schema": "^35.3.0",
     "@atlaskit/custom-steps": "^0.0.11",
-    "@atlaskit/editor-common": "^76.35.0",
+    "@atlaskit/editor-common": "^76.37.0",
     "@atlaskit/editor-palette": "1.5.2",
     "@atlaskit/editor-plugin-analytics": "^0.4.0",
     "@atlaskit/editor-plugin-content-insertion": "^0.1.0",
@@ -45,7 +45,7 @@
     "@atlaskit/pragmatic-drag-and-drop": "^0.25.0",
     "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^0.8.0",
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "^0.12.0",
-    "@atlaskit/primitives": "^1.16.0",
+    "@atlaskit/primitives": "^1.17.0",
     "@atlaskit/theme": "^12.6.0",
     "@atlaskit/tokens": "^1.33.0",
     "@atlaskit/tooltip": "^18.1.0",
@@ -67,7 +67,7 @@
     "@atlaskit/editor-plugin-decorations": "^0.2.0",
     "@atlaskit/editor-plugin-feature-flags": "^1.0.0",
     "@atlaskit/editor-plugin-grid": "^0.3.0",
-    "@atlaskit/editor-plugin-hyperlink": "^0.6.0",
+    "@atlaskit/editor-plugin-hyperlink": "^0.8.0",
     "@atlaskit/visual-regression": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
     "@atlassian/feature-flags-test-utils": "^0.1.2",

package/src/__tests__/unit/analytics.ts

@@ -802,7 +802,11 @@ describe('Table analytic events', () => {
       beforeEach(() => {
         editorView = editor(defaultTableDoc).editorView;
         // Note: we cannot clean a drop target, util one has been set.
-        setDropTarget('column', 0)(editorView.state, editorView.dispatch);
+        setDropTarget(
+          'column',
+          0,
+          false,
+        )(editorView.state, editorView.dispatch);
       });
 
       it.each([

package/src/__tests__/unit/ui/RowDragControls.tsx

@@ -30,10 +30,9 @@ import {
 
 import tablePlugin from '../../../plugin';
 import { pluginKey } from '../../../pm-plugins/plugin-key';
-// import { TableCssClassName as ClassName } from '../../../types';
 import { DragControls } from '../../../ui/TableFloatingControls/RowControls';
 
-describe('NumberColumn', () => {
+describe('RowDragControls', () => {
   const createEditor = createProsemirrorEditorFactory();
 
   const editor = (doc: DocBuilder, tableOptions = {}) =>
@@ -81,7 +80,9 @@ describe('NumberColumn', () => {
       </IntlProvider>,
     );
 
-    const dragHandle = screen.getAllByTestId('table-floating-row-drag-handle');
+    const dragHandle = screen.getAllByTestId(
+      /^table-floating-row-\d-drag-handle$/,
+    );
 
     expect(dragHandle.length).toBe(1);
   });
@@ -120,7 +121,7 @@ describe('NumberColumn', () => {
     );
 
     const dragHandle = screen.queryAllByTestId(
-      'table-floating-row-drag-handle',
+      /^table-floating-row-\d-drag-handle$/,
     );
 
     expect(dragHandle.length).toBe(0);

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/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/types.ts

@@ -383,14 +383,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) => {

package/src/ui/TableFloatingColumnControls/ColumnControls/index.tsx

@@ -239,43 +239,41 @@ export const ColumnControls = ({
       : colIndexes;
 
     return (
-      showCondition && (
-        <div
-          key={type}
-          style={{
-            gridColumn: isSelecting
-              ? selectedColumnPosition
-              : gridColumnPosition,
-            display: 'flex',
-            justifyContent: 'center',
-            alignItems: 'center',
-            height: 'fit-content',
-            placeSelf: 'center',
-            zIndex: 99,
-          }}
-          data-column-control-index={hoveredCell.colIndex}
-          data-testid={'table-floating-column-control'}
-        >
-          <DragHandle
-            isDragMenuTarget={!isHover}
-            direction="column"
-            tableLocalId={localId || ''}
-            indexes={indexes}
-            forceDefaultHandle={isHover ? false : isColumnsSelected}
-            previewWidth={colWidths?.[colIndex!] ?? tableCellMinWidth}
-            previewHeight={previewHeight}
-            appearance={
-              isSelecting ? currentSelectionAppearance : hoveredAppearance
-            }
-            onClick={handleClick}
-            onMouseOver={handleMouseOver}
-            onMouseOut={handleMouseOut}
-            onMouseUp={handleMouseUp}
-            editorView={editorView}
-            canDrag={canDrag}
-          />
-        </div>
-      )
+      <div
+        key={type}
+        style={{
+          gridColumn: isSelecting ? selectedColumnPosition : gridColumnPosition,
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          height: 'fit-content',
+          placeSelf: 'center',
+          zIndex: 99,
+        }}
+        data-column-control-index={hoveredCell.colIndex}
+        data-testid={`table-floating-column-${
+          isSelecting ? selectedColIndexes[0] : colIndex!
+        }-drag-handle`}
+      >
+        <DragHandle
+          isDragMenuTarget={!isHover}
+          direction="column"
+          tableLocalId={localId || ''}
+          indexes={indexes}
+          forceDefaultHandle={isHover ? false : isColumnsSelected}
+          previewWidth={colWidths?.[colIndex!] ?? tableCellMinWidth}
+          previewHeight={previewHeight}
+          appearance={
+            isSelecting ? currentSelectionAppearance : hoveredAppearance
+          }
+          onClick={handleClick}
+          onMouseOver={handleMouseOver}
+          onMouseOut={handleMouseOut}
+          onMouseUp={handleMouseUp}
+          editorView={editorView}
+          canDrag={canDrag}
+        />
+      </div>
     );
   };
 

package/src/ui/TableFloatingControls/RowControls/DragControls.tsx

@@ -228,39 +228,39 @@ const DragControlsComponent = ({
       : rowIndexes;
 
     return (
-      showCondition && (
-        <div
-          key={type}
-          style={{
-            gridRow: isSelecting ? selectedRowPosition : gridRowPosition,
-            gridColumn: '2',
-            // DragHandle uses `transform: rotate(90)`, which doesn't affect its parent (this div) causing the width of this element to be the true height of the drag handle
-            width: '9px',
-            position: 'relative',
-            right: '-0.5px',
-          }}
-          data-testid={'table-floating-row-drag-handle'}
-        >
-          <DragHandle
-            isDragMenuTarget={!isHover}
-            direction="row"
-            tableLocalId={currentNodeLocalId}
-            indexes={indexes}
-            forceDefaultHandle={isHover ? false : isRowsSelected}
-            previewWidth={tableWidth}
-            previewHeight={rowHeights[rowIndex!]}
-            appearance={
-              isSelecting ? currentSelectionAppearance : hoveredAppearance
-            }
-            onClick={handleClick}
-            onMouseOver={handleMouseOver}
-            onMouseOut={handleMouseOut}
-            onMouseUp={onMouseUp}
-            editorView={editorView}
-            canDrag={canDrag}
-          />
-        </div>
-      )
+      <div
+        key={type}
+        style={{
+          gridRow: isSelecting ? selectedRowPosition : gridRowPosition,
+          gridColumn: '2',
+          // DragHandle uses `transform: rotate(90)`, which doesn't affect its parent (this div) causing the width of this element to be the true height of the drag handle
+          width: '9px',
+          position: 'relative',
+          right: '-0.5px',
+        }}
+        data-testid={`table-floating-row-${
+          isSelecting ? selectedRowIndexes[0] : rowIndex
+        }-drag-handle`}
+      >
+        <DragHandle
+          isDragMenuTarget={!isHover}
+          direction="row"
+          tableLocalId={currentNodeLocalId}
+          indexes={indexes}
+          forceDefaultHandle={isHover ? false : isRowsSelected}
+          previewWidth={tableWidth}
+          previewHeight={rowHeights[rowIndex!]}
+          appearance={
+            isSelecting ? currentSelectionAppearance : hoveredAppearance
+          }
+          onClick={handleClick}
+          onMouseOver={handleMouseOver}
+          onMouseOut={handleMouseOut}
+          onMouseUp={onMouseUp}
+          editorView={editorView}
+          canDrag={canDrag}
+        />
+      </div>
     );
   };