@atlaskit/editor-plugin-table 5.7.9 → 5.7.10

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/editor-plugin-table
 
+## 5.7.10
+
+### Patch Changes
+
+- [#66128](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/66128) [`a276b9ce0b8f`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/a276b9ce0b8f) - Add data test ids to elements, introduce table tests
+- [#66453](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/66453) [`a43a37f6b703`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/a43a37f6b703) - [ux] Updates color of insert line when drop target has merged cells.
+- Updated dependencies
+
 ## 5.7.9
 
 ### Patch Changes

package/dist/cjs/nodeviews/ExternalDropTargets.js

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

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

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

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

@@ -138,7 +138,8 @@ var createPlugin = exports.createPlugin = function createPlugin(dispatch, eventD
             var sourceType = data.sourceType,
               targetAdjustedIndex = data.targetAdjustedIndex;
             var dropTargetType = sourceType === 'table-row' ? _consts.DropTargetType.ROW : _consts.DropTargetType.COLUMN;
-            (0, _commands.setDropTarget)(dropTargetType, targetAdjustedIndex)(editorView.state, editorView.dispatch);
+            var hasMergedCells = (0, _utils2.hasMergedCellsInBetween)([targetAdjustedIndex - 1, targetAdjustedIndex], dropTargetType)(editorView.state.selection);
+            (0, _commands.setDropTarget)(dropTargetType, targetAdjustedIndex, hasMergedCells)(editorView.state, editorView.dispatch);
           },
           onDrop: function onDrop(event) {
             var _cell$row, _cell$col;

package/dist/cjs/types.js

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

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

@@ -123,7 +123,7 @@ var DragHandle = exports.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/cjs/ui/TableFloatingColumnControls/ColumnControls/index.js

@@ -153,7 +153,7 @@ var ColumnControls = exports.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.default.createElement("div", {
+    return /*#__PURE__*/_react.default.createElement("div", {
       key: type,
       style: {
         gridColumn: isSelecting ? selectedColumnPosition : gridColumnPosition,
@@ -165,7 +165,7 @@ var ColumnControls = exports.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.default.createElement(_DragHandle.DragHandle, {
       isDragMenuTarget: !isHover,
       direction: "column",

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

@@ -140,7 +140,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.default.createElement("div", {
+    return /*#__PURE__*/_react.default.createElement("div", {
       key: type,
       style: {
         gridRow: isSelecting ? selectedRowPosition : gridRowPosition,
@@ -150,7 +150,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.default.createElement(_DragHandle.DragHandle, {
       isDragMenuTarget: !isHover,
       direction: "row",

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

@@ -13,7 +13,7 @@ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _colors = require("@atlaskit/theme/colors");
 var _types = require("../types");
 var _consts = require("./consts");
-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;
 var InsertLine = function InsertLine(cssString) {
   return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .", " {\n    background: ", ";\n    display: none;\n    position: absolute;\n    z-index: ", ";\n    ", "\n  }\n"])), _types.TableCssClassName.CONTROLS_INSERT_LINE, _consts.tableBorderSelectedColor, _editorSharedStyles.akEditorUnitZIndex, cssString);
 };
@@ -119,6 +119,10 @@ var resizeHandle = exports.resizeHandle = function resizeHandle() {
 };
 
 // Drag and Drop: drop target insert line
+var tableCellColumnInsertLineStyles = (0, _react.css)(_templateObject33 || (_templateObject33 = (0, _taggedTemplateLiteral2.default)(["\n  content: ' ';\n  position: absolute;\n  height: calc(100% + ", "px);\n  width: ", "px;\n  z-index: ", ";\n"])), _styles.tableCellBorderWidth * 2, _consts.insertLineWidth, _consts.columnControlsZIndex * 2);
+var tableCellRowInsertLineStyles = (0, _react.css)(_templateObject34 || (_templateObject34 = (0, _taggedTemplateLiteral2.default)(["\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)", _consts.insertLineWidth, _styles.tableCellBorderWidth * 2, _consts.columnControlsZIndex * 2);
+var insertLineActiveColor = (0, _react.css)(_templateObject35 || (_templateObject35 = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", ";\n"])), _consts.tableBorderSelectedColor);
+var insertLineInactiveColor = (0, _react.css)(_templateObject36 || (_templateObject36 = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", ";\n"])), "var(--ds-background-accent-gray-subtler, ".concat(_editorSharedStyles.akEditorTableBorder, ")"));
 var insertLine = exports.insertLine = function insertLine() {
-  return (0, _react.css)(_templateObject33 || (_templateObject33 = (0, _taggedTemplateLiteral2.default)(["\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"])), _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.WITH_FIRST_COLUMN_INSERT_LINE, _consts.insertLineWidth, _styles.tableCellBorderWidth * 2, _consts.tableBorderSelectedColor, _consts.columnControlsZIndex * 2, _types.TableCssClassName.WITH_FIRST_COLUMN_INSERT_LINE, _consts.insertLineWidth, _styles.tableCellBorderWidth * 2, _consts.tableBorderSelectedColor, _consts.columnControlsZIndex * 2, _styles.tableCellBorderWidth, _types.TableCssClassName.WITH_COLUMN_INSERT_LINE, "var(--ds-space-negative-025, -2px)", _consts.insertLineWidth, _styles.tableCellBorderWidth * 2, _consts.tableBorderSelectedColor, _consts.columnControlsZIndex * 2, _types.TableCssClassName.WITH_COLUMN_INSERT_LINE, "var(--ds-space-negative-025, -2px)", _consts.insertLineWidth, _styles.tableCellBorderWidth * 2, _consts.tableBorderSelectedColor, _consts.columnControlsZIndex * 2, _styles.tableCellBorderWidth, _types.TableCssClassName.WITH_LAST_COLUMN_INSERT_LINE, _consts.insertLineWidth, _styles.tableCellBorderWidth * 2, _consts.tableBorderSelectedColor, _consts.columnControlsZIndex * 2, _types.TableCssClassName.WITH_LAST_COLUMN_INSERT_LINE, _consts.insertLineWidth, _styles.tableCellBorderWidth * 2, _consts.tableBorderSelectedColor, _consts.columnControlsZIndex * 2, _styles.tableCellBorderWidth, _types.TableCssClassName.WITH_ROW_INSERT_LINE, "var(--ds-space-negative-025, -2px)", _consts.insertLineWidth, _styles.tableCellBorderWidth * 2, _consts.tableBorderSelectedColor, _consts.columnControlsZIndex * 2, _types.TableCssClassName.WITH_ROW_INSERT_LINE, "var(--ds-space-negative-025, -2px)", _consts.insertLineWidth, _styles.tableCellBorderWidth * 2, _consts.tableBorderSelectedColor, _consts.columnControlsZIndex * 2, _types.TableCssClassName.WITH_LAST_ROW_INSERT_LINE, "var(--ds-space-negative-025, -2px)", _consts.insertLineWidth, _consts.tableBorderSelectedColor, _consts.columnControlsZIndex * 2, _types.TableCssClassName.WITH_LAST_ROW_INSERT_LINE, "var(--ds-space-negative-025, -2px)", _consts.insertLineWidth, _styles.tableCellBorderWidth * 2, _consts.tableBorderSelectedColor, _consts.columnControlsZIndex * 2);
+  return (0, _react.css)(_templateObject37 || (_templateObject37 = (0, _taggedTemplateLiteral2.default)(["\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"])), _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.WITH_FIRST_COLUMN_INSERT_LINE, tableCellColumnInsertLineStyles, insertLineActiveColor, _types.TableCssClassName.WITH_FIRST_COLUMN_INSERT_LINE_INACTIVE, tableCellColumnInsertLineStyles, insertLineInactiveColor, _types.TableCssClassName.WITH_FIRST_COLUMN_INSERT_LINE, tableCellColumnInsertLineStyles, _styles.tableCellBorderWidth, insertLineActiveColor, _types.TableCssClassName.WITH_FIRST_COLUMN_INSERT_LINE_INACTIVE, tableCellColumnInsertLineStyles, _styles.tableCellBorderWidth, insertLineInactiveColor, _types.TableCssClassName.WITH_COLUMN_INSERT_LINE, tableCellColumnInsertLineStyles, "var(--ds-space-negative-025, -2px)", insertLineActiveColor, _types.TableCssClassName.WITH_COLUMN_INSERT_LINE_INACTIVE, tableCellColumnInsertLineStyles, "var(--ds-space-negative-025, -2px)", insertLineInactiveColor, _types.TableCssClassName.WITH_COLUMN_INSERT_LINE, tableCellColumnInsertLineStyles, "var(--ds-space-negative-025, -2px)", _styles.tableCellBorderWidth, insertLineActiveColor, _types.TableCssClassName.WITH_COLUMN_INSERT_LINE_INACTIVE, tableCellColumnInsertLineStyles, "var(--ds-space-negative-025, -2px)", _styles.tableCellBorderWidth, insertLineInactiveColor, _types.TableCssClassName.WITH_LAST_COLUMN_INSERT_LINE, tableCellColumnInsertLineStyles, insertLineActiveColor, _types.TableCssClassName.WITH_LAST_COLUMN_INSERT_LINE_INACTIVE, tableCellColumnInsertLineStyles, insertLineInactiveColor, _types.TableCssClassName.WITH_LAST_COLUMN_INSERT_LINE, tableCellColumnInsertLineStyles, _styles.tableCellBorderWidth, insertLineActiveColor, _types.TableCssClassName.WITH_LAST_COLUMN_INSERT_LINE_INACTIVE, tableCellColumnInsertLineStyles, _styles.tableCellBorderWidth, insertLineInactiveColor, _types.TableCssClassName.WITH_ROW_INSERT_LINE, tableCellRowInsertLineStyles, insertLineActiveColor, _types.TableCssClassName.WITH_ROW_INSERT_LINE_INACTIVE, tableCellRowInsertLineStyles, insertLineInactiveColor, _types.TableCssClassName.WITH_ROW_INSERT_LINE, tableCellRowInsertLineStyles, insertLineActiveColor, _types.TableCssClassName.WITH_ROW_INSERT_LINE_INACTIVE, tableCellRowInsertLineStyles, insertLineInactiveColor, _types.TableCssClassName.WITH_LAST_ROW_INSERT_LINE, tableCellRowInsertLineStyles, insertLineActiveColor, _types.TableCssClassName.WITH_LAST_ROW_INSERT_LINE_INACTIVE, tableCellRowInsertLineStyles, insertLineInactiveColor, _types.TableCssClassName.WITH_LAST_ROW_INSERT_LINE, tableCellRowInsertLineStyles, insertLineActiveColor, _types.TableCssClassName.WITH_LAST_ROW_INSERT_LINE_INACTIVE, tableCellRowInsertLineStyles, insertLineInactiveColor);
 };

package/dist/cjs/utils/decoration.js

@@ -459,7 +459,7 @@ var createColumnLineResize = exports.createColumnLineResize = function createCol
     });
   }).filter(_utils.nonNullable);
 };
-var createColumnInsertLine = exports.createColumnInsertLine = function createColumnInsertLine(columnIndex, selection) {
+var createColumnInsertLine = exports.createColumnInsertLine = function createColumnInsertLine(columnIndex, selection, hasMergedCells) {
   var table = (0, _utils2.findTable)(selection);
   if (!table) {
     return [];
@@ -470,7 +470,12 @@ var createColumnInsertLine = exports.createColumnInsertLine = function createCol
   if (isLastColumn) {
     columnIndex -= 1;
   }
-  var decorationClassName = isFirstColumn ? _types.TableCssClassName.WITH_FIRST_COLUMN_INSERT_LINE : isLastColumn ? _types.TableCssClassName.WITH_LAST_COLUMN_INSERT_LINE : _types.TableCssClassName.WITH_COLUMN_INSERT_LINE;
+  var decorationClassName;
+  if (hasMergedCells) {
+    decorationClassName = isFirstColumn ? _types.TableCssClassName.WITH_FIRST_COLUMN_INSERT_LINE_INACTIVE : isLastColumn ? _types.TableCssClassName.WITH_LAST_COLUMN_INSERT_LINE_INACTIVE : _types.TableCssClassName.WITH_COLUMN_INSERT_LINE_INACTIVE;
+  } else {
+    decorationClassName = isFirstColumn ? _types.TableCssClassName.WITH_FIRST_COLUMN_INSERT_LINE : isLastColumn ? _types.TableCssClassName.WITH_LAST_COLUMN_INSERT_LINE : _types.TableCssClassName.WITH_COLUMN_INSERT_LINE;
+  }
   var cellPositions = makeArray(map.height).map(function (rowIndex) {
     return map.map[map.width * rowIndex + columnIndex];
   }).filter(function (cellPosition, rowIndex) {
@@ -499,7 +504,7 @@ var createColumnInsertLine = exports.createColumnInsertLine = function createCol
     });
   }).filter(_utils.nonNullable);
 };
-var createRowInsertLine = exports.createRowInsertLine = function createRowInsertLine(rowIndex, selection) {
+var createRowInsertLine = exports.createRowInsertLine = function createRowInsertLine(rowIndex, selection, hasMergedCells) {
   var table = (0, _utils2.findTable)(selection);
   if (!table) {
     return [];
@@ -513,7 +518,12 @@ var createRowInsertLine = exports.createRowInsertLine = function createRowInsert
   if (!cells) {
     return [];
   }
-  var decorationClassName = isLastRow ? _types.TableCssClassName.WITH_LAST_ROW_INSERT_LINE : _types.TableCssClassName.WITH_ROW_INSERT_LINE;
+  var decorationClassName;
+  if (hasMergedCells) {
+    decorationClassName = isLastRow ? _types.TableCssClassName.WITH_LAST_ROW_INSERT_LINE_INACTIVE : _types.TableCssClassName.WITH_ROW_INSERT_LINE_INACTIVE;
+  } else {
+    decorationClassName = isLastRow ? _types.TableCssClassName.WITH_LAST_ROW_INSERT_LINE : _types.TableCssClassName.WITH_ROW_INSERT_LINE;
+  }
   return cells.map(function (cell, index) {
     if (!cell || !cell.node) {
       return;

package/dist/es2019/nodeviews/ExternalDropTargets.js

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

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

@@ -15,7 +15,7 @@ export const getDecorations = state => {
   return ((_pluginKey$getState = pluginKey.getState(state)) === null || _pluginKey$getState === void 0 ? void 0 : _pluginKey$getState.decorationSet) || DecorationSet.empty;
 };
 export const updatePluginStateDecorations = (state, decorations, key) => updateDecorations(state.doc, getDecorations(state), decorations, key);
-export const setDropTarget = (type, index, tr) => createCommand(state => {
+export const setDropTarget = (type, index, hasMergedCells, tr) => createCommand(state => {
   const {
     dropTargetType,
     dropTargetIndex
@@ -25,9 +25,9 @@ export const setDropTarget = (type, index, tr) => createCommand(state => {
   }
   let 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/es2019/pm-plugins/drag-and-drop/plugin.js

@@ -137,7 +137,8 @@ export const createPlugin = (dispatch, eventDispatcher, editorAnalyticsAPI) => {
               targetAdjustedIndex
             } = data;
             const dropTargetType = sourceType === 'table-row' ? 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) {
             var _cell$row, _cell$col;

package/dist/es2019/types.js

@@ -132,12 +132,17 @@ export const TableCssClassName = {
   TOP_LEFT_CELL: 'table > tbody > tr:nth-child(2) > td:nth-child(1)',
   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_LAST_ROW_INSERT_LINE: `${tablePrefixSelector}-last-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 let ShadowEvent = /*#__PURE__*/function (ShadowEvent) {
   ShadowEvent["SHOW_BEFORE_SHADOW"] = "showBeforeShadow";

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

@@ -109,7 +109,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/dist/es2019/ui/TableFloatingColumnControls/ColumnControls/index.js

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

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

@@ -130,7 +130,7 @@ const DragControlsComponent = ({
     const currentSelectionAppearance = isRowsSelected ? isInDanger ? 'danger' : 'selected' : hoveredAppearance;
     const isSelecting = isRowsSelected && !isHover;
     const 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 @@ const DragControlsComponent = ({
         position: 'relative',
         right: '-0.5px'
       },
-      "data-testid": 'table-floating-row-drag-handle'
+      "data-testid": `table-floating-row-${isSelecting ? selectedRowIndexes[0] : rowIndex}-drag-handle`
     }, /*#__PURE__*/React.createElement(DragHandle, {
       isDragMenuTarget: !isHover,
       direction: "row",

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/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',