@atlaskit/editor-plugin-table 7.4.2 → 7.4.4

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/editor-plugin-table
 
+## 7.4.4
+
+### Patch Changes
+
+- [#75436](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/75436) [`bfcf32bb4fa3`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/bfcf32bb4fa3) - [ux] ED-21941 Disable resize/layout options for table, media and extension when added to MBE. Table rendering fixed for Confluence editor
+
+## 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

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/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/cjs/utils/nodes.js

@@ -63,8 +63,9 @@ var isLayoutSupported = exports.isLayoutSupported = function isLayoutSupported(s
   var _state$schema$nodes = state.schema.nodes,
     bodiedExtension = _state$schema$nodes.bodiedExtension,
     layoutSection = _state$schema$nodes.layoutSection,
-    expand = _state$schema$nodes.expand;
-  return !(0, _utils2.hasParentNodeOfType)([expand, layoutSection, bodiedExtension])(state.selection) && !!permittedLayouts && (permittedLayouts === 'all' || permittedLayouts.indexOf('default') > -1 && permittedLayouts.indexOf('wide') > -1 && permittedLayouts.indexOf('full-width') > -1);
+    expand = _state$schema$nodes.expand,
+    extensionFrame = _state$schema$nodes.extensionFrame;
+  return !(0, _utils2.hasParentNodeOfType)([expand, layoutSection, bodiedExtension, extensionFrame])(state.selection) && !!permittedLayouts && (permittedLayouts === 'all' || permittedLayouts.indexOf('default') > -1 && permittedLayouts.indexOf('wide') > -1 && permittedLayouts.indexOf('full-width') > -1);
 };
 var getTableWidth = exports.getTableWidth = function getTableWidth(node) {
   return getTableWidths(node).reduce(function (acc, current) {
@@ -111,7 +112,7 @@ var isTableNested = exports.isTableNested = function isTableNested(state) {
   var tablePos = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
   var parent = state.doc.resolve(tablePos).parent;
   var nodeTypes = state.schema.nodes;
-  return parent.type === nodeTypes.layoutColumn || parent.type === nodeTypes.expand || parent.type === nodeTypes.bodiedExtension;
+  return parent.type === nodeTypes.layoutColumn || parent.type === nodeTypes.expand || parent.type === nodeTypes.bodiedExtension || parent.type === nodeTypes.extensionFrame;
 };
 var anyChildCellMergedAcrossRow = exports.anyChildCellMergedAcrossRow = function anyChildCellMergedAcrossRow(node) {
   return (0, _utils.mapChildren)(node, function (child) {

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/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);
 };

package/dist/es2019/utils/nodes.js

@@ -48,9 +48,10 @@ export const isLayoutSupported = state => {
   const {
     bodiedExtension,
     layoutSection,
-    expand
+    expand,
+    extensionFrame
   } = state.schema.nodes;
-  return !hasParentNodeOfType([expand, layoutSection, bodiedExtension])(state.selection) && !!permittedLayouts && (permittedLayouts === 'all' || permittedLayouts.indexOf('default') > -1 && permittedLayouts.indexOf('wide') > -1 && permittedLayouts.indexOf('full-width') > -1);
+  return !hasParentNodeOfType([expand, layoutSection, bodiedExtension, extensionFrame])(state.selection) && !!permittedLayouts && (permittedLayouts === 'all' || permittedLayouts.indexOf('default') > -1 && permittedLayouts.indexOf('wide') > -1 && permittedLayouts.indexOf('full-width') > -1);
 };
 export const getTableWidth = node => {
   return getTableWidths(node).reduce((acc, current) => acc + current, 0);
@@ -94,7 +95,7 @@ function getTableWidths(node) {
 export const isTableNested = (state, tablePos = 0) => {
   const parent = state.doc.resolve(tablePos).parent;
   const nodeTypes = state.schema.nodes;
-  return parent.type === nodeTypes.layoutColumn || parent.type === nodeTypes.expand || parent.type === nodeTypes.bodiedExtension;
+  return parent.type === nodeTypes.layoutColumn || parent.type === nodeTypes.expand || parent.type === nodeTypes.bodiedExtension || parent.type === nodeTypes.extensionFrame;
 };
 export const anyChildCellMergedAcrossRow = node => mapChildren(node, child => child.attrs.rowspan || 0).some(rowspan => rowspan > 1);
 

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

@@ -6,12 +6,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';
@@ -30,6 +32,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;
@@ -50,8 +53,37 @@ var DragHandleComponent = function DragHandleComponent(_ref) {
   var isRowHandleHovered = isRow && hoveredRows.length > 0;
   var isColumnHandleHovered = isColumn && hoveredColumns.length > 0;
   var hasMergedCells = useMemo(function () {
-    return isRow ? hasMergedCellsInRow(indexes[0])(selection) : hasMergedCellsInColumn(indexes[0])(selection);
-  }, [indexes, isRow, selection]);
+    var table = findTable(selection);
+    if (!table) {
+      return false;
+    }
+    var map = 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 TextSelection) {
+      var rowIndex = hoveredCell.rowIndex,
+        colIndex = hoveredCell.colIndex;
+      var mergedPositionInRow = findDuplicatePosition(mapByRow[rowIndex]);
+      var mergedPositionInCol = 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 = hasMergedCellsInSelection(direction === 'column' ? [colIndex, colIndex + mergedSizes - 1] : [rowIndex, rowIndex + mergedSizes - 1], direction)(selection);
+        return mergedSelection;
+      }
+    }
+    return hasMergedCellsInSelection(indexes, direction)(selection);
+  }, [indexes, selection, direction, hoveredCell]);
   var handleIconProps = {
     forceDefaultHandle: forceDefaultHandle,
     isHandleHovered: isColumnHandleHovered || isRowHandleHovered,

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

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

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

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

package/dist/esm/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/esm/utils/merged-cells.js

@@ -195,4 +195,98 @@ export var hasMergedCellsWithRowNextToRowIndex = function hasMergedCellsWithRowN
     }
   }
   return false;
+};
+export var hasMergedCellsInSelection = function hasMergedCellsInSelection(indexes, type) {
+  return function (selection) {
+    var table = findTable(selection);
+    if (!table) {
+      return false;
+    }
+    var 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 var getTableMapByRowOrColumn = function getTableMapByRowOrColumn(map) {
+  var mapByRow = Array(map.height);
+  var mapByColumn = Array(map.width);
+  var mapCopy = _toConsumableArray(map.map);
+  for (var i = 0; i < mapCopy.length; i++) {
+    var _mapByColumn$columnIn, _mapByRow$rowIndex;
+    var columnIndex = i % map.width;
+    mapByColumn[columnIndex] = [].concat(_toConsumableArray((_mapByColumn$columnIn = mapByColumn[columnIndex]) !== null && _mapByColumn$columnIn !== void 0 ? _mapByColumn$columnIn : []), [mapCopy[i]]);
+    var rowIndex = Math.trunc(i / map.width);
+    mapByRow[rowIndex] = [].concat(_toConsumableArray((_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
+ */
+export var 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, _toConsumableArray(indexes));
+  var maxIndex = Math.max.apply(Math, _toConsumableArray(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 []
+ */
+export var findDuplicatePosition = function findDuplicatePosition(array) {
+  if (!array) {
+    return [];
+  }
+  return array.filter(function (item, index) {
+    return array.indexOf(item) !== index;
+  });
 };

package/dist/esm/utils/nodes.js

@@ -56,8 +56,9 @@ export var isLayoutSupported = function isLayoutSupported(state) {
   var _state$schema$nodes = state.schema.nodes,
     bodiedExtension = _state$schema$nodes.bodiedExtension,
     layoutSection = _state$schema$nodes.layoutSection,
-    expand = _state$schema$nodes.expand;
-  return !hasParentNodeOfType([expand, layoutSection, bodiedExtension])(state.selection) && !!permittedLayouts && (permittedLayouts === 'all' || permittedLayouts.indexOf('default') > -1 && permittedLayouts.indexOf('wide') > -1 && permittedLayouts.indexOf('full-width') > -1);
+    expand = _state$schema$nodes.expand,
+    extensionFrame = _state$schema$nodes.extensionFrame;
+  return !hasParentNodeOfType([expand, layoutSection, bodiedExtension, extensionFrame])(state.selection) && !!permittedLayouts && (permittedLayouts === 'all' || permittedLayouts.indexOf('default') > -1 && permittedLayouts.indexOf('wide') > -1 && permittedLayouts.indexOf('full-width') > -1);
 };
 export var getTableWidth = function getTableWidth(node) {
   return getTableWidths(node).reduce(function (acc, current) {
@@ -104,7 +105,7 @@ export var isTableNested = function isTableNested(state) {
   var tablePos = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
   var parent = state.doc.resolve(tablePos).parent;
   var nodeTypes = state.schema.nodes;
-  return parent.type === nodeTypes.layoutColumn || parent.type === nodeTypes.expand || parent.type === nodeTypes.bodiedExtension;
+  return parent.type === nodeTypes.layoutColumn || parent.type === nodeTypes.expand || parent.type === nodeTypes.bodiedExtension || parent.type === nodeTypes.extensionFrame;
 };
 export var anyChildCellMergedAcrossRow = function anyChildCellMergedAcrossRow(node) {
   return mapChildren(node, function (child) {

package/dist/types/ui/DragHandle/index.d.ts

@@ -3,7 +3,7 @@ import React from 'react';
 import type { WrappedComponentProps } from 'react-intl-next';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { TriggerType } from '../../pm-plugins/drag-and-drop/types';
-import type { TableDirection } from '../../types';
+import type { CellHoverMeta, TableDirection } from '../../types';
 export type DragHandleAppearance = 'default' | 'selected' | 'disabled' | 'danger' | 'placeholder';
 type DragHandleProps = {
     tableLocalId: string;
@@ -11,6 +11,7 @@ type DragHandleProps = {
     forceDefaultHandle?: boolean;
     previewWidth?: number;
     previewHeight?: number;
+    hoveredCell?: CellHoverMeta;
     direction?: TableDirection;
     appearance?: DragHandleAppearance;
     onClick?: MouseEventHandler;

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

@@ -9,4 +9,4 @@ export type { RowParams } from './row-controls';
 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/types/utils/merged-cells.d.ts

@@ -1,8 +1,36 @@
 import type { Selection } from '@atlaskit/editor-prosemirror/state';
+import { TableMap } from '@atlaskit/editor-tables';
 type MergeType = 'row' | 'column';
 export declare const hasMergedCellsInColumn: (columnIndexes: number | number[]) => (selection: Selection) => boolean;
 export declare const hasMergedCellsInRow: (rowIndexes: number | number[]) => (selection: Selection) => boolean;
 export declare const hasMergedCellsInBetween: (indexes: number[], type: MergeType) => (selection: Selection) => boolean;
 export declare const hasMergedCellsWithColumnNextToColumnIndex: (colIndex: number, selection: Selection) => boolean;
 export declare const hasMergedCellsWithRowNextToRowIndex: (rowIndex: number, selection: Selection) => boolean;
+export declare const hasMergedCellsInSelection: (indexes: number[], type: MergeType) => (selection: Selection) => boolean;
+/**
+ * handle table map by preprocess table's map row or column.
+ *
+ * @param map TableMap
+ * @returns object including mapByRow and mapByColumn
+ */
+export declare const getTableMapByRowOrColumn: (map: TableMap) => {
+    mapByRow: any[];
+    mapByColumn: any[];
+};
+/**
+ * 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 declare const checkEdgeHasMergedCells: (indexes: number[], tableMap: TableMap, direction: 'row' | 'column') => boolean;
+/**
+ * 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 declare const findDuplicatePosition: (array: number[]) => number[];
 export {};

package/dist/types-ts4.5/ui/DragHandle/index.d.ts

@@ -3,7 +3,7 @@ import React from 'react';
 import type { WrappedComponentProps } from 'react-intl-next';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { TriggerType } from '../../pm-plugins/drag-and-drop/types';
-import type { TableDirection } from '../../types';
+import type { CellHoverMeta, TableDirection } from '../../types';
 export type DragHandleAppearance = 'default' | 'selected' | 'disabled' | 'danger' | 'placeholder';
 type DragHandleProps = {
     tableLocalId: string;
@@ -11,6 +11,7 @@ type DragHandleProps = {
     forceDefaultHandle?: boolean;
     previewWidth?: number;
     previewHeight?: number;
+    hoveredCell?: CellHoverMeta;
     direction?: TableDirection;
     appearance?: DragHandleAppearance;
     onClick?: MouseEventHandler;

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

@@ -9,4 +9,4 @@ export type { RowParams } from './row-controls';
 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/types-ts4.5/utils/merged-cells.d.ts

@@ -1,8 +1,36 @@
 import type { Selection } from '@atlaskit/editor-prosemirror/state';
+import { TableMap } from '@atlaskit/editor-tables';
 type MergeType = 'row' | 'column';
 export declare const hasMergedCellsInColumn: (columnIndexes: number | number[]) => (selection: Selection) => boolean;
 export declare const hasMergedCellsInRow: (rowIndexes: number | number[]) => (selection: Selection) => boolean;
 export declare const hasMergedCellsInBetween: (indexes: number[], type: MergeType) => (selection: Selection) => boolean;
 export declare const hasMergedCellsWithColumnNextToColumnIndex: (colIndex: number, selection: Selection) => boolean;
 export declare const hasMergedCellsWithRowNextToRowIndex: (rowIndex: number, selection: Selection) => boolean;
+export declare const hasMergedCellsInSelection: (indexes: number[], type: MergeType) => (selection: Selection) => boolean;
+/**
+ * handle table map by preprocess table's map row or column.
+ *
+ * @param map TableMap
+ * @returns object including mapByRow and mapByColumn
+ */
+export declare const getTableMapByRowOrColumn: (map: TableMap) => {
+    mapByRow: any[];
+    mapByColumn: any[];
+};
+/**
+ * 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 declare const checkEdgeHasMergedCells: (indexes: number[], tableMap: TableMap, direction: 'row' | 'column') => boolean;
+/**
+ * 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 declare const findDuplicatePosition: (array: number[]) => number[];
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "7.4.2",
+  "version": "7.4.4",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"

package/src/ui/DragHandle/index.tsx

@@ -8,7 +8,9 @@ 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 type { EditorView } from '@atlaskit/editor-prosemirror/view';
+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 { token } from '@atlaskit/tokens';
@@ -16,9 +18,9 @@ import { token } from '@atlaskit/tokens';
 import { getPluginState as getDnDPluginState } from '../../pm-plugins/drag-and-drop/plugin-factory';
 import type { TriggerType } from '../../pm-plugins/drag-and-drop/types';
 import { getPluginState } from '../../pm-plugins/plugin-factory';
-import type { TableDirection } from '../../types';
 import { TableCssClassName as ClassName } from '../../types';
-import { hasMergedCellsInColumn, hasMergedCellsInRow } from '../../utils';
+import type { CellHoverMeta, TableDirection } from '../../types';
+import { findDuplicatePosition, hasMergedCellsInSelection } from '../../utils';
 import { dragTableInsertColumnButtonSize } from '../consts';
 import { DragPreview } from '../DragPreview';
 
@@ -37,6 +39,7 @@ type DragHandleProps = {
   forceDefaultHandle?: boolean;
   previewWidth?: number;
   previewHeight?: number;
+  hoveredCell?: CellHoverMeta;
   direction?: TableDirection;
   appearance?: DragHandleAppearance;
   onClick?: MouseEventHandler;
@@ -62,6 +65,7 @@ const DragHandleComponent = ({
   onMouseOver,
   onMouseOut,
   toggleDragMenu,
+  hoveredCell,
   onClick,
   editorView,
   intl: { formatMessage },
@@ -83,13 +87,64 @@ const DragHandleComponent = ({
   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?.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: number) => el === mapByRow[0][colIndex])
+                .length
+            : mapByColumn[0].filter(
+                (el: number) => 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,

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

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

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

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

package/src/utils/index.ts

@@ -82,4 +82,7 @@ export {
   hasMergedCellsInColumn,
   hasMergedCellsInRow,
   hasMergedCellsInBetween,
+  hasMergedCellsInSelection,
+  findDuplicatePosition,
+  checkEdgeHasMergedCells,
 } from './merged-cells';

package/src/utils/merged-cells.ts

@@ -225,3 +225,107 @@ export const hasMergedCellsWithRowNextToRowIndex = (
 
   return false;
 };
+
+export const hasMergedCellsInSelection =
+  (indexes: number[], type: MergeType) =>
+  (selection: Selection): boolean => {
+    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: TableMap) => {
+  let mapByRow = Array(map.height);
+  let mapByColumn = Array(map.width);
+
+  const mapCopy = [...map.map];
+
+  for (let i = 0; i < mapCopy.length; i++) {
+    const columnIndex = i % map.width;
+    mapByColumn[columnIndex] = [
+      ...(mapByColumn[columnIndex] ?? []),
+      mapCopy[i],
+    ];
+    const rowIndex = Math.trunc(i / map.width);
+    mapByRow[rowIndex] = [...(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: number[],
+  tableMap: TableMap,
+  direction: 'row' | 'column',
+): boolean => {
+  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: number[]): number[] => {
+  if (!array) {
+    return [];
+  }
+  return array.filter((item, index) => array.indexOf(item) !== index);
+};

package/src/utils/nodes.ts

@@ -65,12 +65,16 @@ export const checkIfNumberColumnEnabled = (selection: Selection): boolean =>
 
 export const isLayoutSupported = (state: EditorState): boolean => {
   const { permittedLayouts } = pluginKey.getState(state)?.pluginConfig || {};
-  const { bodiedExtension, layoutSection, expand } = state.schema.nodes;
+  const { bodiedExtension, layoutSection, expand, extensionFrame } =
+    state.schema.nodes;
 
   return (
-    !hasParentNodeOfType([expand, layoutSection, bodiedExtension])(
-      state.selection,
-    ) &&
+    !hasParentNodeOfType([
+      expand,
+      layoutSection,
+      bodiedExtension,
+      extensionFrame,
+    ])(state.selection) &&
     !!permittedLayouts &&
     (permittedLayouts === 'all' ||
       (permittedLayouts.indexOf('default') > -1 &&
@@ -150,7 +154,8 @@ export const isTableNested = (state: EditorState, tablePos = 0): boolean => {
   return (
     parent.type === nodeTypes.layoutColumn ||
     parent.type === nodeTypes.expand ||
-    parent.type === nodeTypes.bodiedExtension
+    parent.type === nodeTypes.bodiedExtension ||
+    parent.type === nodeTypes.extensionFrame
   );
 };