@atlaskit/editor-plugin-table 7.4.1 → 7.4.3

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/editor-plugin-table
 
+## 7.4.3
+
+### Patch Changes
+
+- [#72037](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/72037) [`e59f0b7a9115`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/e59f0b7a9115) - [ux] add flexiable to make merged cells detection allow to detect edge merged cells
+
+## 7.4.2
+
+### Patch Changes
+
+- [#76112](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/76112) [`1cd6cd3382d9`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/1cd6cd3382d9) - remove table performance experiment
+
 ## 7.4.1
 
 ### Patch Changes

package/dist/cjs/nodeviews/TableComponent.js

@@ -571,8 +571,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       var isNested = (0, _utils5.isTableNested)(view.state, tablePos);
       var topStickyShadowPosition = isDragAndDropEnabled ? this.state.stickyHeader && this.state.stickyHeader.top + this.state.stickyHeader.padding + 2 : this.state.stickyHeader && this.state.stickyHeader.top + this.state.stickyHeader.padding + shadowPadding + 2;
       var _getEditorFeatureFlag3 = getEditorFeatureFlags(),
-        stickyScrollbar = _getEditorFeatureFlag3.stickyScrollbar,
-        tableResizePerformance = _getEditorFeatureFlag3.tableResizePerformance;
+        stickyScrollbar = _getEditorFeatureFlag3.stickyScrollbar;
       return /*#__PURE__*/_react.default.createElement(_TableContainer.TableContainer, {
         className: (0, _classnames2.default)(_types.TableCssClassName.TABLE_CONTAINER, (_classnames = {}, (0, _defineProperty3.default)(_classnames, _types.TableCssClassName.WITH_CONTROLS, allowControls && tableActive), (0, _defineProperty3.default)(_classnames, _types.TableCssClassName.TABLE_STICKY, this.state.stickyHeader && hasHeaderRow), (0, _defineProperty3.default)(_classnames, _types.TableCssClassName.HOVERED_DELETE_BUTTON, isInDanger), (0, _defineProperty3.default)(_classnames, _types.TableCssClassName.TABLE_SELECTED, (0, _utils2.isTableSelected)(view.state.selection)), _classnames)),
         editorView: view,
@@ -584,8 +583,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         isNested: isNested,
         pluginInjectionApi: pluginInjectionApi,
         isTableResizingEnabled: options === null || options === void 0 ? void 0 : options.isTableResizingEnabled,
-        isResizing: isResizing,
-        tableResizePerformance: tableResizePerformance
+        isResizing: isResizing
       }, /*#__PURE__*/_react.default.createElement("div", {
         className: _types.TableCssClassName.TABLE_STICKY_SENTINEL_TOP,
         "data-testid": "sticky-sentinel-top"

package/dist/cjs/nodeviews/TableContainer.js

@@ -53,8 +53,7 @@ var ResizableTableContainer = exports.ResizableTableContainer = /*#__PURE__*/_re
     getPos = _ref2.getPos,
     tableRef = _ref2.tableRef,
     isResizing = _ref2.isResizing,
-    pluginInjectionApi = _ref2.pluginInjectionApi,
-    tableResizePerformance = _ref2.tableResizePerformance;
+    pluginInjectionApi = _ref2.pluginInjectionApi;
   var containerRef = (0, _react.useRef)(null);
   var tableWidthRef = (0, _react.useRef)(_editorSharedStyles.akEditorDefaultLayoutWidth);
   var updateContainerHeight = (0, _react.useCallback)(function (height) {
@@ -135,8 +134,7 @@ var ResizableTableContainer = exports.ResizableTableContainer = /*#__PURE__*/_re
     tableRef: tableRef,
     displayGuideline: displayGuideline,
     attachAnalyticsEvent: attachAnalyticsEvent,
-    displayGapCursor: displayGapCursor,
-    tableResizePerformance: tableResizePerformance
+    displayGapCursor: displayGapCursor
   };
   if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.resizing-table-height-improvement')) {
     tableResizerProps = _objectSpread(_objectSpread({}, tableResizerProps), {}, {
@@ -148,8 +146,7 @@ var ResizableTableContainer = exports.ResizableTableContainer = /*#__PURE__*/_re
     style: {
       display: 'flex',
       justifyContent: 'center'
-    },
-    contentEditable: tableResizePerformance && isResizing ? 'false' : undefined
+    }
   }, /*#__PURE__*/_react.default.createElement("div", {
     style: {
       width: tableWidthRef.current
@@ -175,8 +172,7 @@ var TableContainer = exports.TableContainer = function TableContainer(_ref3) {
     tableRef = _ref3.tableRef,
     isNested = _ref3.isNested,
     isResizing = _ref3.isResizing,
-    pluginInjectionApi = _ref3.pluginInjectionApi,
-    tableResizePerformance = _ref3.tableResizePerformance;
+    pluginInjectionApi = _ref3.pluginInjectionApi;
   if (isTableResizingEnabled && !isNested) {
     return /*#__PURE__*/_react.default.createElement(ResizableTableContainer, {
       className: className,
@@ -186,8 +182,7 @@ var TableContainer = exports.TableContainer = function TableContainer(_ref3) {
       getPos: getPos,
       tableRef: tableRef,
       isResizing: isResizing,
-      pluginInjectionApi: pluginInjectionApi,
-      tableResizePerformance: tableResizePerformance
+      pluginInjectionApi: pluginInjectionApi
     }, children);
   }
   var tableWidth = isBreakoutEnabled ? (0, _styles.calcTableWidth)(node.attrs.layout, editorWidth) : 'inherit';

package/dist/cjs/nodeviews/TableResizer.js

@@ -97,8 +97,7 @@ var TableResizer = exports.TableResizer = function TableResizer(_ref) {
     tableRef = _ref.tableRef,
     displayGuideline = _ref.displayGuideline,
     attachAnalyticsEvent = _ref.attachAnalyticsEvent,
-    displayGapCursor = _ref.displayGapCursor,
-    tableResizePerformance = _ref.tableResizePerformance;
+    displayGapCursor = _ref.displayGapCursor;
   var currentGap = (0, _react.useRef)(0);
   // track resizing state - use ref over state to avoid re-render
   var isResizing = (0, _react.useRef)(false);
@@ -228,10 +227,7 @@ var TableResizer = exports.TableResizer = function TableResizer(_ref) {
       var resizeFrameRatePayloads = (0, _analytics2.generateResizeFrameRatePayloads)({
         docSize: state.doc.nodeSize,
         frameRateSamples: frameRateSamples,
-        originalNode: node,
-        experiments: {
-          tableResizePerformance: tableResizePerformance
-        }
+        originalNode: node
       });
       resizeFrameRatePayloads.forEach(function (payload) {
         var _attachAnalyticsEvent;
@@ -267,7 +263,7 @@ var TableResizer = exports.TableResizer = function TableResizer(_ref) {
       onResizeStop();
     }
     return newWidth;
-  }, [displayGapCursor, updateWidth, editorView, getPos, node, tableRef, scheduleResize, displayGuideline, attachAnalyticsEvent, endMeasure, onResizeStop, tableResizePerformance]);
+  }, [displayGapCursor, updateWidth, editorView, getPos, node, tableRef, scheduleResize, displayGuideline, attachAnalyticsEvent, endMeasure, onResizeStop]);
   var handleTableSizeChangeOnKeypress = (0, _react.useCallback)(function (step) {
     var newWidth = width + step;
     if (newWidth > maxWidth || newWidth < resizerMinWidth) {

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

@@ -14,6 +14,8 @@ var _reactDom = _interopRequireDefault(require("react-dom"));
 var _reactIntlNext = require("react-intl-next");
 var _messages = require("@atlaskit/editor-common/messages");
 var _utils = require("@atlaskit/editor-common/utils");
+var _state = require("@atlaskit/editor-prosemirror/state");
+var _editorTables = require("@atlaskit/editor-tables");
 var _adapter = require("@atlaskit/pragmatic-drag-and-drop/element/adapter");
 var _setCustomNativeDragPreview = require("@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview");
 var _pluginFactory = require("../../pm-plugins/drag-and-drop/plugin-factory");
@@ -40,6 +42,7 @@ var DragHandleComponent = function DragHandleComponent(_ref) {
     onMouseOver = _ref.onMouseOver,
     onMouseOut = _ref.onMouseOut,
     toggleDragMenu = _ref.toggleDragMenu,
+    hoveredCell = _ref.hoveredCell,
     onClick = _ref.onClick,
     editorView = _ref.editorView,
     formatMessage = _ref.intl.formatMessage;
@@ -60,8 +63,37 @@ var DragHandleComponent = function DragHandleComponent(_ref) {
   var isRowHandleHovered = isRow && hoveredRows.length > 0;
   var isColumnHandleHovered = isColumn && hoveredColumns.length > 0;
   var hasMergedCells = (0, _react.useMemo)(function () {
-    return isRow ? (0, _utils2.hasMergedCellsInRow)(indexes[0])(selection) : (0, _utils2.hasMergedCellsInColumn)(indexes[0])(selection);
-  }, [indexes, isRow, selection]);
+    var table = (0, _editorTables.findTable)(selection);
+    if (!table) {
+      return false;
+    }
+    var map = _editorTables.TableMap.get(table === null || table === void 0 ? void 0 : table.node);
+    if (!map.hasMergedCells() || indexes.length < 1) {
+      return false;
+    }
+    var mapByColumn = map.mapByColumn,
+      mapByRow = map.mapByRow;
+
+    // this handle when hover to first column or row which has merged cells.
+    if (hoveredCell && hoveredCell.rowIndex !== undefined && hoveredCell.colIndex !== undefined && selection instanceof _state.TextSelection) {
+      var rowIndex = hoveredCell.rowIndex,
+        colIndex = hoveredCell.colIndex;
+      var mergedPositionInRow = (0, _utils2.findDuplicatePosition)(mapByRow[rowIndex]);
+      var mergedPositionInCol = (0, _utils2.findDuplicatePosition)(mapByColumn[colIndex]);
+      var hasMergedCellsInFirstRowOrColumn = direction === 'column' ? mergedPositionInRow.includes(mapByRow[0][colIndex]) : mergedPositionInCol.includes(mapByColumn[0][rowIndex]);
+      var isHoveredOnFirstRowOrColumn = direction === 'column' ? hoveredCell.rowIndex === 0 && hasMergedCellsInFirstRowOrColumn : hoveredCell.colIndex === 0 && hasMergedCellsInFirstRowOrColumn;
+      if (isHoveredOnFirstRowOrColumn) {
+        var mergedSizes = direction === 'column' ? mapByRow[0].filter(function (el) {
+          return el === mapByRow[0][colIndex];
+        }).length : mapByColumn[0].filter(function (el) {
+          return el === mapByColumn[0][rowIndex];
+        }).length;
+        var mergedSelection = (0, _utils2.hasMergedCellsInSelection)(direction === 'column' ? [colIndex, colIndex + mergedSizes - 1] : [rowIndex, rowIndex + mergedSizes - 1], direction)(selection);
+        return mergedSelection;
+      }
+    }
+    return (0, _utils2.hasMergedCellsInSelection)(indexes, direction)(selection);
+  }, [indexes, selection, direction, hoveredCell]);
   var handleIconProps = {
     forceDefaultHandle: forceDefaultHandle,
     isHandleHovered: isColumnHandleHovered || isRowHandleHovered,

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

@@ -148,6 +148,7 @@ var ColumnControls = exports.ColumnControls = function ColumnControls(_ref) {
       direction: "column",
       tableLocalId: localId || '',
       indexes: indexes,
+      hoveredCell: hoveredCell,
       previewWidth: previewWidth,
       forceDefaultHandle: !isHover,
       previewHeight: previewHeight,

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

@@ -151,6 +151,7 @@ var DragControlsComponent = function DragControlsComponent(_ref) {
       previewWidth: tableWidth,
       previewHeight: previewHeight,
       appearance: appearance,
+      hoveredCell: hoveredCell,
       onClick: handleClick,
       onMouseOver: handleMouseOver,
       onMouseOut: handleMouseOut,

package/dist/cjs/utils/analytics.js

@@ -116,8 +116,7 @@ var generateResizeFrameRatePayloads = exports.generateResizeFrameRatePayloads =
         frameRate: frameRateSample,
         nodeSize: props.originalNode.nodeSize,
         docSize: props.docSize,
-        isInitialSample: index === 0,
-        experiments: props.experiments
+        isInitialSample: index === 0
       }
     };
   });

package/dist/cjs/utils/index.js

@@ -9,6 +9,12 @@ Object.defineProperty(exports, "anyChildCellMergedAcrossRow", {
     return _nodes.anyChildCellMergedAcrossRow;
   }
 });
+Object.defineProperty(exports, "checkEdgeHasMergedCells", {
+  enumerable: true,
+  get: function get() {
+    return _mergedCells.checkEdgeHasMergedCells;
+  }
+});
 Object.defineProperty(exports, "checkIfHeaderColumnEnabled", {
   enumerable: true,
   get: function get() {
@@ -105,6 +111,12 @@ Object.defineProperty(exports, "findControlsHoverDecoration", {
     return _decoration.findControlsHoverDecoration;
   }
 });
+Object.defineProperty(exports, "findDuplicatePosition", {
+  enumerable: true,
+  get: function get() {
+    return _mergedCells.findDuplicatePosition;
+  }
+});
 Object.defineProperty(exports, "findNearestCellIndexToPoint", {
   enumerable: true,
   get: function get() {
@@ -231,6 +243,12 @@ Object.defineProperty(exports, "hasMergedCellsInRow", {
     return _mergedCells.hasMergedCellsInRow;
   }
 });
+Object.defineProperty(exports, "hasMergedCellsInSelection", {
+  enumerable: true,
+  get: function get() {
+    return _mergedCells.hasMergedCellsInSelection;
+  }
+});
 Object.defineProperty(exports, "hasResizeHandler", {
   enumerable: true,
   get: function get() {

package/dist/cjs/utils/merged-cells.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.hasMergedCellsWithRowNextToRowIndex = exports.hasMergedCellsWithColumnNextToColumnIndex = exports.hasMergedCellsInRow = exports.hasMergedCellsInColumn = exports.hasMergedCellsInBetween = void 0;
+exports.hasMergedCellsWithRowNextToRowIndex = exports.hasMergedCellsWithColumnNextToColumnIndex = exports.hasMergedCellsInSelection = exports.hasMergedCellsInRow = exports.hasMergedCellsInColumn = exports.hasMergedCellsInBetween = exports.getTableMapByRowOrColumn = exports.findDuplicatePosition = exports.checkEdgeHasMergedCells = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _editorTables = require("@atlaskit/editor-tables");
 var hasMergedCells = function hasMergedCells(indexes, normalizeRect) {
@@ -202,4 +202,98 @@ var hasMergedCellsWithRowNextToRowIndex = exports.hasMergedCellsWithRowNextToRow
     }
   }
   return false;
+};
+var hasMergedCellsInSelection = exports.hasMergedCellsInSelection = function hasMergedCellsInSelection(indexes, type) {
+  return function (selection) {
+    var table = (0, _editorTables.findTable)(selection);
+    if (!table) {
+      return false;
+    }
+    var map = _editorTables.TableMap.get(table.node);
+    if (!map.hasMergedCells()) {
+      return false;
+    }
+    return checkEdgeHasMergedCells(indexes, map, type);
+  };
+};
+
+/**
+ * handle table map by preprocess table's map row or column.
+ *
+ * @param map TableMap
+ * @returns object including mapByRow and mapByColumn
+ */
+var getTableMapByRowOrColumn = exports.getTableMapByRowOrColumn = function getTableMapByRowOrColumn(map) {
+  var mapByRow = Array(map.height);
+  var mapByColumn = Array(map.width);
+  var mapCopy = (0, _toConsumableArray2.default)(map.map);
+  for (var i = 0; i < mapCopy.length; i++) {
+    var _mapByColumn$columnIn, _mapByRow$rowIndex;
+    var columnIndex = i % map.width;
+    mapByColumn[columnIndex] = [].concat((0, _toConsumableArray2.default)((_mapByColumn$columnIn = mapByColumn[columnIndex]) !== null && _mapByColumn$columnIn !== void 0 ? _mapByColumn$columnIn : []), [mapCopy[i]]);
+    var rowIndex = Math.trunc(i / map.width);
+    mapByRow[rowIndex] = [].concat((0, _toConsumableArray2.default)((_mapByRow$rowIndex = mapByRow[rowIndex]) !== null && _mapByRow$rowIndex !== void 0 ? _mapByRow$rowIndex : []), [mapCopy[i]]);
+  }
+  return {
+    mapByRow: mapByRow,
+    mapByColumn: mapByColumn
+  };
+};
+
+/**
+ * this check the selection has merged cells with previous/next col or row.
+ *
+ * @param indexes - this get the indexes of the selection,e.g. [0,1] for selecting first two rows or columns.
+ * @param tableMap  - this return a TableMap object.
+ * @param direction - check selection is selected by row or column
+ * @returns boolean
+ */
+var checkEdgeHasMergedCells = exports.checkEdgeHasMergedCells = function checkEdgeHasMergedCells(indexes, tableMap, direction) {
+  var _getTableMapByRowOrCo = getTableMapByRowOrColumn(tableMap),
+    mapByRow = _getTableMapByRowOrCo.mapByRow,
+    mapByColumn = _getTableMapByRowOrCo.mapByColumn;
+  var map = 'row' === direction ? mapByRow : mapByColumn;
+  var lengthLimiter = direction === 'row' ? tableMap.width : tableMap.height;
+  var minIndex = Math.min.apply(Math, (0, _toConsumableArray2.default)(indexes));
+  var maxIndex = Math.max.apply(Math, (0, _toConsumableArray2.default)(indexes));
+  var isTopSideHaveMergedCells = false;
+  var isBottomSideHaveMergedCells = false;
+  var isOldMinIndex = !map[minIndex - 1] && !map[minIndex];
+  var isOldMaxIndex = !map[maxIndex + 1] && !map[maxIndex];
+  if (minIndex > 0 && !isOldMinIndex) {
+    var prevSelectionSet = map[minIndex - 1];
+    var minSelectionSet = map[minIndex];
+    for (var i = 0; i < lengthLimiter; i++) {
+      if (prevSelectionSet[i] === minSelectionSet[i]) {
+        isTopSideHaveMergedCells = true;
+        break;
+      }
+    }
+  }
+  if (maxIndex < map.length - 1 && !isOldMaxIndex) {
+    var afterSelectionSet = map[maxIndex + 1];
+    var maxSelectionSet = map[maxIndex];
+    for (var _i = 0; _i < lengthLimiter; _i++) {
+      if (afterSelectionSet[_i] === maxSelectionSet[_i]) {
+        isBottomSideHaveMergedCells = true;
+        break;
+      }
+    }
+  }
+  return isTopSideHaveMergedCells || isBottomSideHaveMergedCells;
+};
+
+/**
+ * this function will find the duplicate position in the array(table map position array).
+ *
+ * @param array this usually be the array including positions of the table map.
+ * @returns []
+ */
+var findDuplicatePosition = exports.findDuplicatePosition = function findDuplicatePosition(array) {
+  if (!array) {
+    return [];
+  }
+  return array.filter(function (item, index) {
+    return array.indexOf(item) !== index;
+  });
 };

package/dist/es2019/nodeviews/TableComponent.js

@@ -568,8 +568,7 @@ class TableComponent extends React.Component {
     const isNested = isTableNested(view.state, tablePos);
     const topStickyShadowPosition = isDragAndDropEnabled ? this.state.stickyHeader && this.state.stickyHeader.top + this.state.stickyHeader.padding + 2 : this.state.stickyHeader && this.state.stickyHeader.top + this.state.stickyHeader.padding + shadowPadding + 2;
     const {
-      stickyScrollbar,
-      tableResizePerformance
+      stickyScrollbar
     } = getEditorFeatureFlags();
     return /*#__PURE__*/React.createElement(TableContainer, {
       className: classnames(ClassName.TABLE_CONTAINER, {
@@ -587,8 +586,7 @@ class TableComponent extends React.Component {
       isNested: isNested,
       pluginInjectionApi: pluginInjectionApi,
       isTableResizingEnabled: options === null || options === void 0 ? void 0 : options.isTableResizingEnabled,
-      isResizing: isResizing,
-      tableResizePerformance: tableResizePerformance
+      isResizing: isResizing
     }, /*#__PURE__*/React.createElement("div", {
       className: ClassName.TABLE_STICKY_SENTINEL_TOP,
       "data-testid": "sticky-sentinel-top"

package/dist/es2019/nodeviews/TableContainer.js

@@ -41,8 +41,7 @@ export const ResizableTableContainer = /*#__PURE__*/React.memo(({
   getPos,
   tableRef,
   isResizing,
-  pluginInjectionApi,
-  tableResizePerformance
+  pluginInjectionApi
 }) => {
   const containerRef = useRef(null);
   const tableWidthRef = useRef(akEditorDefaultLayoutWidth);
@@ -124,8 +123,7 @@ export const ResizableTableContainer = /*#__PURE__*/React.memo(({
     tableRef,
     displayGuideline,
     attachAnalyticsEvent,
-    displayGapCursor,
-    tableResizePerformance
+    displayGapCursor
   };
   if (getBooleanFF('platform.editor.resizing-table-height-improvement')) {
     tableResizerProps = {
@@ -138,8 +136,7 @@ export const ResizableTableContainer = /*#__PURE__*/React.memo(({
     style: {
       display: 'flex',
       justifyContent: 'center'
-    },
-    contentEditable: tableResizePerformance && isResizing ? 'false' : undefined
+    }
   }, /*#__PURE__*/React.createElement("div", {
     style: {
       width: tableWidthRef.current
@@ -166,8 +163,7 @@ export const TableContainer = ({
   tableRef,
   isNested,
   isResizing,
-  pluginInjectionApi,
-  tableResizePerformance
+  pluginInjectionApi
 }) => {
   if (isTableResizingEnabled && !isNested) {
     return /*#__PURE__*/React.createElement(ResizableTableContainer, {
@@ -178,8 +174,7 @@ export const TableContainer = ({
       getPos: getPos,
       tableRef: tableRef,
       isResizing: isResizing,
-      pluginInjectionApi: pluginInjectionApi,
-      tableResizePerformance: tableResizePerformance
+      pluginInjectionApi: pluginInjectionApi
     }, children);
   }
   const tableWidth = isBreakoutEnabled ? calcTableWidth(node.attrs.layout, editorWidth) : 'inherit';

package/dist/es2019/nodeviews/TableResizer.js

@@ -82,8 +82,7 @@ export const TableResizer = ({
   tableRef,
   displayGuideline,
   attachAnalyticsEvent,
-  displayGapCursor,
-  tableResizePerformance
+  displayGapCursor
 }) => {
   var _findTable, _editorView$state;
   const currentGap = useRef(0);
@@ -219,10 +218,7 @@ export const TableResizer = ({
       const resizeFrameRatePayloads = generateResizeFrameRatePayloads({
         docSize: state.doc.nodeSize,
         frameRateSamples,
-        originalNode: node,
-        experiments: {
-          tableResizePerformance
-        }
+        originalNode: node
       });
       resizeFrameRatePayloads.forEach(payload => {
         var _attachAnalyticsEvent;
@@ -259,7 +255,7 @@ export const TableResizer = ({
       onResizeStop();
     }
     return newWidth;
-  }, [displayGapCursor, updateWidth, editorView, getPos, node, tableRef, scheduleResize, displayGuideline, attachAnalyticsEvent, endMeasure, onResizeStop, tableResizePerformance]);
+  }, [displayGapCursor, updateWidth, editorView, getPos, node, tableRef, scheduleResize, displayGuideline, attachAnalyticsEvent, endMeasure, onResizeStop]);
   const handleTableSizeChangeOnKeypress = useCallback(step => {
     const newWidth = width + step;
     if (newWidth > maxWidth || newWidth < resizerMinWidth) {

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

@@ -4,12 +4,14 @@ import ReactDOM from 'react-dom';
 import { injectIntl } from 'react-intl-next';
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
 import { browser } from '@atlaskit/editor-common/utils';
+import { TextSelection } from '@atlaskit/editor-prosemirror/state';
+import { findTable, TableMap } from '@atlaskit/editor-tables';
 import { draggable } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import { setCustomNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview';
 import { getPluginState as getDnDPluginState } from '../../pm-plugins/drag-and-drop/plugin-factory';
 import { getPluginState } from '../../pm-plugins/plugin-factory';
 import { TableCssClassName as ClassName } from '../../types';
-import { hasMergedCellsInColumn, hasMergedCellsInRow } from '../../utils';
+import { findDuplicatePosition, hasMergedCellsInSelection } from '../../utils';
 import { dragTableInsertColumnButtonSize } from '../consts';
 import { DragPreview } from '../DragPreview';
 import { HandleIconComponent } from './HandleIconComponent';
@@ -25,6 +27,7 @@ const DragHandleComponent = ({
   onMouseOver,
   onMouseOut,
   toggleDragMenu,
+  hoveredCell,
   onClick,
   editorView,
   intl: {
@@ -50,7 +53,38 @@ const DragHandleComponent = ({
   const isColumn = direction === 'column';
   const isRowHandleHovered = isRow && hoveredRows.length > 0;
   const isColumnHandleHovered = isColumn && hoveredColumns.length > 0;
-  const hasMergedCells = useMemo(() => isRow ? hasMergedCellsInRow(indexes[0])(selection) : hasMergedCellsInColumn(indexes[0])(selection), [indexes, isRow, selection]);
+  const hasMergedCells = useMemo(() => {
+    const table = findTable(selection);
+    if (!table) {
+      return false;
+    }
+    const map = TableMap.get(table === null || table === void 0 ? void 0 : table.node);
+    if (!map.hasMergedCells() || indexes.length < 1) {
+      return false;
+    }
+    const {
+      mapByColumn,
+      mapByRow
+    } = map;
+
+    // this handle when hover to first column or row which has merged cells.
+    if (hoveredCell && hoveredCell.rowIndex !== undefined && hoveredCell.colIndex !== undefined && selection instanceof TextSelection) {
+      const {
+        rowIndex,
+        colIndex
+      } = hoveredCell;
+      const mergedPositionInRow = findDuplicatePosition(mapByRow[rowIndex]);
+      const mergedPositionInCol = findDuplicatePosition(mapByColumn[colIndex]);
+      const hasMergedCellsInFirstRowOrColumn = direction === 'column' ? mergedPositionInRow.includes(mapByRow[0][colIndex]) : mergedPositionInCol.includes(mapByColumn[0][rowIndex]);
+      const isHoveredOnFirstRowOrColumn = direction === 'column' ? hoveredCell.rowIndex === 0 && hasMergedCellsInFirstRowOrColumn : hoveredCell.colIndex === 0 && hasMergedCellsInFirstRowOrColumn;
+      if (isHoveredOnFirstRowOrColumn) {
+        const mergedSizes = direction === 'column' ? mapByRow[0].filter(el => el === mapByRow[0][colIndex]).length : mapByColumn[0].filter(el => el === mapByColumn[0][rowIndex]).length;
+        const mergedSelection = hasMergedCellsInSelection(direction === 'column' ? [colIndex, colIndex + mergedSizes - 1] : [rowIndex, rowIndex + mergedSizes - 1], direction)(selection);
+        return mergedSelection;
+      }
+    }
+    return hasMergedCellsInSelection(indexes, direction)(selection);
+  }, [indexes, selection, direction, hoveredCell]);
   const handleIconProps = {
     forceDefaultHandle,
     isHandleHovered: isColumnHandleHovered || isRowHandleHovered,

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

@@ -143,6 +143,7 @@ export const ColumnControls = ({
       direction: "column",
       tableLocalId: localId || '',
       indexes: indexes,
+      hoveredCell: hoveredCell,
       previewWidth: previewWidth,
       forceDefaultHandle: !isHover,
       previewHeight: previewHeight,

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

@@ -139,6 +139,7 @@ const DragControlsComponent = ({
       previewWidth: tableWidth,
       previewHeight: previewHeight,
       appearance: appearance,
+      hoveredCell: hoveredCell,
       onClick: handleClick,
       onMouseOver: handleMouseOver,
       onMouseOut: handleMouseOut,

package/dist/es2019/utils/analytics.js

@@ -101,8 +101,7 @@ export const generateResizeFrameRatePayloads = props => {
       frameRate: frameRateSample,
       nodeSize: props.originalNode.nodeSize,
       docSize: props.docSize,
-      isInitialSample: index === 0,
-      experiments: props.experiments
+      isInitialSample: index === 0
     }
   }));
 };

package/dist/es2019/utils/index.js

@@ -8,4 +8,4 @@ export { getRowHeights, isRowDeleteButtonVisible, getRowDeleteButtonParams, getR
 export { getSelectedTableInfo, getSelectedCellInfo } from './analytics';
 export { getMergedCellsPositions } from './table';
 export { updatePluginStateDecorations } from './update-plugin-state-decorations';
-export { hasMergedCellsInColumn, hasMergedCellsInRow, hasMergedCellsInBetween } from './merged-cells';
+export { hasMergedCellsInColumn, hasMergedCellsInRow, hasMergedCellsInBetween, hasMergedCellsInSelection, findDuplicatePosition, checkEdgeHasMergedCells } from './merged-cells';

package/dist/es2019/utils/merged-cells.js

@@ -180,4 +180,95 @@ export const hasMergedCellsWithRowNextToRowIndex = (rowIndex, selection) => {
     }
   }
   return false;
+};
+export const hasMergedCellsInSelection = (indexes, type) => selection => {
+  const table = findTable(selection);
+  if (!table) {
+    return false;
+  }
+  const map = TableMap.get(table.node);
+  if (!map.hasMergedCells()) {
+    return false;
+  }
+  return checkEdgeHasMergedCells(indexes, map, type);
+};
+
+/**
+ * handle table map by preprocess table's map row or column.
+ *
+ * @param map TableMap
+ * @returns object including mapByRow and mapByColumn
+ */
+export const getTableMapByRowOrColumn = map => {
+  let mapByRow = Array(map.height);
+  let mapByColumn = Array(map.width);
+  const mapCopy = [...map.map];
+  for (let i = 0; i < mapCopy.length; i++) {
+    var _mapByColumn$columnIn, _mapByRow$rowIndex;
+    const columnIndex = i % map.width;
+    mapByColumn[columnIndex] = [...((_mapByColumn$columnIn = mapByColumn[columnIndex]) !== null && _mapByColumn$columnIn !== void 0 ? _mapByColumn$columnIn : []), mapCopy[i]];
+    const rowIndex = Math.trunc(i / map.width);
+    mapByRow[rowIndex] = [...((_mapByRow$rowIndex = mapByRow[rowIndex]) !== null && _mapByRow$rowIndex !== void 0 ? _mapByRow$rowIndex : []), mapCopy[i]];
+  }
+  return {
+    mapByRow,
+    mapByColumn
+  };
+};
+
+/**
+ * this check the selection has merged cells with previous/next col or row.
+ *
+ * @param indexes - this get the indexes of the selection,e.g. [0,1] for selecting first two rows or columns.
+ * @param tableMap  - this return a TableMap object.
+ * @param direction - check selection is selected by row or column
+ * @returns boolean
+ */
+export const checkEdgeHasMergedCells = (indexes, tableMap, direction) => {
+  const {
+    mapByRow,
+    mapByColumn
+  } = getTableMapByRowOrColumn(tableMap);
+  const map = 'row' === direction ? mapByRow : mapByColumn;
+  const lengthLimiter = direction === 'row' ? tableMap.width : tableMap.height;
+  let minIndex = Math.min(...indexes);
+  let maxIndex = Math.max(...indexes);
+  let isTopSideHaveMergedCells = false;
+  let isBottomSideHaveMergedCells = false;
+  let isOldMinIndex = !map[minIndex - 1] && !map[minIndex];
+  let isOldMaxIndex = !map[maxIndex + 1] && !map[maxIndex];
+  if (minIndex > 0 && !isOldMinIndex) {
+    const prevSelectionSet = map[minIndex - 1];
+    const minSelectionSet = map[minIndex];
+    for (let i = 0; i < lengthLimiter; i++) {
+      if (prevSelectionSet[i] === minSelectionSet[i]) {
+        isTopSideHaveMergedCells = true;
+        break;
+      }
+    }
+  }
+  if (maxIndex < map.length - 1 && !isOldMaxIndex) {
+    const afterSelectionSet = map[maxIndex + 1];
+    const maxSelectionSet = map[maxIndex];
+    for (let i = 0; i < lengthLimiter; i++) {
+      if (afterSelectionSet[i] === maxSelectionSet[i]) {
+        isBottomSideHaveMergedCells = true;
+        break;
+      }
+    }
+  }
+  return isTopSideHaveMergedCells || isBottomSideHaveMergedCells;
+};
+
+/**
+ * this function will find the duplicate position in the array(table map position array).
+ *
+ * @param array this usually be the array including positions of the table map.
+ * @returns []
+ */
+export const findDuplicatePosition = array => {
+  if (!array) {
+    return [];
+  }
+  return array.filter((item, index) => array.indexOf(item) !== index);
 };