@atlaskit/editor-plugin-table 5.3.26 → 5.3.27

package/dist/esm/plugins/table/ui/icons/DragHandleDisabledIcon.js

@@ -0,0 +1,38 @@
+import React from 'react';
+export var DragHandleDisabledIcon = function DragHandleDisabledIcon(_ref) {
+  var style = _ref.style;
+  return /*#__PURE__*/React.createElement("svg", {
+    width: "24",
+    height: "16",
+    viewBox: "0 0 24 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    style: style
+  }, /*#__PURE__*/React.createElement("rect", {
+    width: "24",
+    height: "16",
+    rx: "4",
+    fill: "var(--ds-background-accent-gray-subtlest, Neutral200)"
+  }), /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("rect", {
+    x: "7",
+    y: "4",
+    width: "2",
+    height: "8",
+    rx: "1",
+    fill: "var(--ds-icon-disabled, #091E424F)"
+  }), /*#__PURE__*/React.createElement("rect", {
+    x: "11",
+    y: "4",
+    width: "2",
+    height: "8",
+    rx: "1",
+    fill: "var(--ds-icon-disabled, #091E424F)"
+  }), /*#__PURE__*/React.createElement("rect", {
+    x: "15",
+    y: "4",
+    width: "2",
+    height: "8",
+    rx: "1",
+    fill: "var(--ds-icon-disabled, #091E424F)"
+  })));
+};

package/dist/esm/plugins/table/ui/icons/index.js

@@ -1,5 +1,6 @@
 export { DragHandleIcon } from './DragHandleIcon';
 export { DragInMotionIcon } from './DragInMotionIcon';
+export { DragHandleDisabledIcon } from './DragHandleDisabledIcon';
 export { AddRowAboveIcon } from './AddRowAboveIcon';
 export { AddRowBelowIcon } from './AddRowBelowIcon';
 export { AddColLeftIcon } from './AddColLeftIcon';

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

@@ -1,5 +1,5 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30, _templateObject31, _templateObject32, _templateObject33;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30, _templateObject31, _templateObject32, _templateObject33, _templateObject34;
 import { css } from '@emotion/react';
 import { tableCellBorderWidth, tableMarginTop, tableMarginTopWithControl } from '@atlaskit/editor-common/styles';
 import { akEditorShadowZIndex, akEditorTableNumberColumnWidth, akEditorUnitZIndex } from '@atlaskit/editor-shared-styles';
@@ -7,7 +7,7 @@ import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { B300, N0, N300, N40A, N60A, Y200, Y50 } from '@atlaskit/theme/colors';
 import { borderRadius } from '@atlaskit/theme/constants';
 import { TableCssClassName as ClassName } from '../types';
-import { columnControlsDecorationHeight, columnControlsSelectedZIndex, columnControlsZIndex, insertLineWidth, lineMarkerSize, resizeHandlerAreaWidth, resizeHandlerZIndex, resizeLineWidth, tableBorderColor, tableBorderDeleteColor, tableBorderSelectedColor, tableCellDeleteColor, tableCellHoverDeleteIconBackground, tableCellHoverDeleteIconColor, tableCellSelectedDeleteIconBackground, tableCellSelectedDeleteIconColor, tableDeleteButtonSize, tableHeaderCellBackgroundColor, tableInsertColumnButtonSize, tableOverflowShadowWidth, tableOverflowShadowWidthWide, tableToolbarDeleteColor, tableToolbarSelectedColor, tableToolbarSize } from './consts';
+import { columnControlsDecorationHeight, columnControlsSelectedZIndex, columnControlsZIndex, insertLineWidth, lineMarkerSize, resizeHandlerAreaWidth, resizeHandlerZIndex, resizeLineWidth, tableBorderColor, tableBorderDeleteColor, tableBorderSelectedColor, tableCellDeleteColor, tableCellDisabledColor, tableCellHoverDeleteIconBackground, tableCellHoverDeleteIconColor, tableCellSelectedDeleteIconBackground, tableCellSelectedDeleteIconColor, tableDeleteButtonSize, tableHeaderCellBackgroundColor, tableInsertColumnButtonSize, tableOverflowShadowWidth, tableOverflowShadowWidthWide, tableToolbarDeleteColor, tableToolbarSelectedColor, tableToolbarSize } from './consts';
 var InsertLine = function InsertLine(props, cssString) {
   return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .", " {\n    background: ", ";\n    display: none;\n    position: absolute;\n    z-index: ", ";\n    ", "\n  }\n"])), ClassName.CONTROLS_INSERT_LINE, tableBorderSelectedColor(props), akEditorUnitZIndex, cssString);
 };
@@ -89,24 +89,27 @@ export var columnControlsDecoration = function columnControlsDecoration(props) {
 export var hoveredDeleteButton = function hoveredDeleteButton(props) {
   return css(_templateObject26 || (_templateObject26 = _taggedTemplateLiteral(["\n  .", ".", " {\n    .", ",\n      .", ",\n      .", " {\n      border: 1px solid ", ";\n    }\n    .", "::after {\n      background: ", ";\n    }\n  }\n"])), ClassName.TABLE_CONTAINER, ClassName.HOVERED_DELETE_BUTTON, ClassName.SELECTED_CELL, ClassName.COLUMN_SELECTED, ClassName.HOVERED_CELL, tableBorderDeleteColor(props), ClassName.SELECTED_CELL, tableCellDeleteColor(props));
 };
+export var disabledCell = function disabledCell(props) {
+  return css(_templateObject27 || (_templateObject27 = _taggedTemplateLiteral(["\n  :not(.", ")\n    .", ":not(.", ") {\n    .", ".", " {\n      position: relative;\n      border: 1px solid ", ";\n    }\n    .", ".", "::after {\n      border: 1px solid ", ";\n    }\n  }\n"])), ClassName.IS_RESIZING, ClassName.TABLE_CONTAINER, ClassName.HOVERED_DELETE_BUTTON, ClassName.HOVERED_CELL, ClassName.HOVERED_DISABLED_CELL, tableCellDisabledColor, ClassName.HOVERED_CELL, ClassName.HOVERED_DISABLED_CELL, tableCellDisabledColor);
+};
 export var hoveredCell = function hoveredCell(props) {
-  return css(_templateObject27 || (_templateObject27 = _taggedTemplateLiteral(["\n  :not(.", ")\n    .", ":not(.", ") {\n    .", " {\n      position: relative;\n      border: 1px solid ", ";\n    }\n  }\n"])), ClassName.IS_RESIZING, ClassName.TABLE_CONTAINER, ClassName.HOVERED_DELETE_BUTTON, ClassName.HOVERED_CELL, tableBorderSelectedColor(props));
+  return css(_templateObject28 || (_templateObject28 = _taggedTemplateLiteral(["\n  :not(.", ")\n    .", ":not(.", ") {\n    .", " {\n      position: relative;\n      border: 1px solid ", ";\n    }\n  }\n"])), ClassName.IS_RESIZING, ClassName.TABLE_CONTAINER, ClassName.HOVERED_DELETE_BUTTON, ClassName.HOVERED_CELL, tableBorderSelectedColor(props));
 };
-export var hoveredWarningCell = css(_templateObject28 || (_templateObject28 = _taggedTemplateLiteral(["\n  :not(.", ")\n    .", ":not(.", ") {\n    td.", " {\n      background-color: ", " !important; // We need to override the background-color added to the cell\n      border: 1px solid ", ";\n    }\n  }\n"])), ClassName.IS_RESIZING, ClassName.TABLE_CONTAINER, ClassName.HOVERED_DELETE_BUTTON, ClassName.HOVERED_CELL_WARNING, "var(--ds-background-warning, ".concat(Y50, ")"), "var(--ds-border-warning, ".concat(Y200, ")"));
+export var hoveredWarningCell = css(_templateObject29 || (_templateObject29 = _taggedTemplateLiteral(["\n  :not(.", ")\n    .", ":not(.", ") {\n    td.", " {\n      background-color: ", " !important; // We need to override the background-color added to the cell\n      border: 1px solid ", ";\n    }\n  }\n"])), ClassName.IS_RESIZING, ClassName.TABLE_CONTAINER, ClassName.HOVERED_DELETE_BUTTON, ClassName.HOVERED_CELL_WARNING, "var(--ds-background-warning, ".concat(Y50, ")"), "var(--ds-border-warning, ".concat(Y200, ")"));
 
 // move the resize handle zone completely inside the table cell to avoid overflow
 var getLastColumnResizerOverrides = function getLastColumnResizerOverrides() {
-  return getBooleanFF('platform.editor.custom-table-width') ? css(_templateObject29 || (_templateObject29 = _taggedTemplateLiteral(["\n        tr\n          th:last-child\n          .", ",\n          tr\n          td:last-child\n          .", " {\n          background-color: transparent;\n          position: absolute;\n          width: ", "px;\n          height: 100%;\n          top: 0;\n          right: 0;\n          cursor: col-resize;\n          z-index: ", ";\n        }\n      "])), ClassName.RESIZE_HANDLE_DECORATION, ClassName.RESIZE_HANDLE_DECORATION, resizeHandlerAreaWidth / 2, resizeHandlerZIndex) : '';
+  return getBooleanFF('platform.editor.custom-table-width') ? css(_templateObject30 || (_templateObject30 = _taggedTemplateLiteral(["\n        tr\n          th:last-child\n          .", ",\n          tr\n          td:last-child\n          .", " {\n          background-color: transparent;\n          position: absolute;\n          width: ", "px;\n          height: 100%;\n          top: 0;\n          right: 0;\n          cursor: col-resize;\n          z-index: ", ";\n        }\n      "])), ClassName.RESIZE_HANDLE_DECORATION, ClassName.RESIZE_HANDLE_DECORATION, resizeHandlerAreaWidth / 2, resizeHandlerZIndex) : '';
 };
 var resizeHandleOverrides = function resizeHandleOverrides(props) {
   if (getBooleanFF('platform.editor.table.drag-and-drop')) {
-    return css(_templateObject30 || (_templateObject30 = _taggedTemplateLiteral(["\n      th.", "::before,\n        td.", "::before {\n        content: ' ';\n        position: absolute;\n        left: ", ";\n        top: -1px;\n        width: ", "px;\n        height: calc(100% + 2px);\n        background-color: ", ";\n        z-index: ", ";\n      }\n\n      th.", "::before,\n        td.", "::before {\n        content: ' ';\n        position: absolute;\n        right: -1px;\n        top: -1px;\n        width: ", "px;\n        height: calc(100% + 2px);\n        background-color: ", ";\n        z-index: ", ";\n      }\n    "])), ClassName.WITH_RESIZE_LINE, ClassName.WITH_RESIZE_LINE, "var(--ds-space-negative-025, -2px)", resizeLineWidth, tableBorderSelectedColor(props), columnControlsZIndex * 2, ClassName.WITH_RESIZE_LINE_LAST_COLUMN, ClassName.WITH_RESIZE_LINE_LAST_COLUMN, resizeLineWidth, tableBorderSelectedColor(props), columnControlsZIndex * 2);
+    return css(_templateObject31 || (_templateObject31 = _taggedTemplateLiteral(["\n      th.", "::before,\n        td.", "::before {\n        content: ' ';\n        position: absolute;\n        left: ", ";\n        top: -1px;\n        width: ", "px;\n        height: calc(100% + 2px);\n        background-color: ", ";\n        z-index: ", ";\n      }\n\n      th.", "::before,\n        td.", "::before {\n        content: ' ';\n        position: absolute;\n        right: -1px;\n        top: -1px;\n        width: ", "px;\n        height: calc(100% + 2px);\n        background-color: ", ";\n        z-index: ", ";\n      }\n    "])), ClassName.WITH_RESIZE_LINE, ClassName.WITH_RESIZE_LINE, "var(--ds-space-negative-025, -2px)", resizeLineWidth, tableBorderSelectedColor(props), columnControlsZIndex * 2, ClassName.WITH_RESIZE_LINE_LAST_COLUMN, ClassName.WITH_RESIZE_LINE_LAST_COLUMN, resizeLineWidth, tableBorderSelectedColor(props), columnControlsZIndex * 2);
   }
-  return css(_templateObject31 || (_templateObject31 = _taggedTemplateLiteral(["\n    td.", "::before {\n      content: ' ';\n      position: absolute;\n      left: ", ";\n      top: -1px;\n      width: ", "px;\n      height: calc(100% + 2px);\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% + 2px);\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  "])), ClassName.WITH_RESIZE_LINE, "var(--ds-space-negative-025, -2px)", resizeLineWidth, tableBorderSelectedColor(props), columnControlsZIndex * 2, ClassName.WITH_RESIZE_LINE, "var(--ds-space-negative-025, -2px)", resizeLineWidth, tableToolbarSize + tableCellBorderWidth, tableBorderSelectedColor(props), columnControlsZIndex * 2, tableToolbarSize + tableCellBorderWidth, ClassName.WITH_RESIZE_LINE_LAST_COLUMN, resizeLineWidth, tableBorderSelectedColor(props), columnControlsZIndex * 2, ClassName.WITH_RESIZE_LINE_LAST_COLUMN, resizeLineWidth, tableToolbarSize + tableCellBorderWidth, tableBorderSelectedColor(props), columnControlsZIndex * 2, tableToolbarSize + tableCellBorderWidth);
+  return css(_templateObject32 || (_templateObject32 = _taggedTemplateLiteral(["\n    td.", "::before {\n      content: ' ';\n      position: absolute;\n      left: ", ";\n      top: -1px;\n      width: ", "px;\n      height: calc(100% + 2px);\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% + 2px);\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  "])), ClassName.WITH_RESIZE_LINE, "var(--ds-space-negative-025, -2px)", resizeLineWidth, tableBorderSelectedColor(props), columnControlsZIndex * 2, ClassName.WITH_RESIZE_LINE, "var(--ds-space-negative-025, -2px)", resizeLineWidth, tableToolbarSize + tableCellBorderWidth, tableBorderSelectedColor(props), columnControlsZIndex * 2, tableToolbarSize + tableCellBorderWidth, ClassName.WITH_RESIZE_LINE_LAST_COLUMN, resizeLineWidth, tableBorderSelectedColor(props), columnControlsZIndex * 2, ClassName.WITH_RESIZE_LINE_LAST_COLUMN, resizeLineWidth, tableToolbarSize + tableCellBorderWidth, tableBorderSelectedColor(props), columnControlsZIndex * 2, tableToolbarSize + tableCellBorderWidth);
 };
 export var resizeHandle = function resizeHandle(props) {
-  return css(_templateObject32 || (_templateObject32 = _taggedTemplateLiteral(["\n  .", " {\n    .", " {\n      background-color: transparent;\n      position: absolute;\n      width: ", "px;\n      height: 100%;\n      top: 0;\n      right: -", "px;\n      cursor: col-resize;\n      z-index: ", ";\n    }\n\n    ", "\n\n    ", "\n\n    table\n      tr:first-of-type\n      th.", "\n      .", "::after,\n      table\n      tr:first-of-type\n      td.", "\n      .", "::after {\n      top: -", "px;\n      height: calc(100% + ", "px);\n    }\n  }\n"])), ClassName.TABLE_CONTAINER, ClassName.RESIZE_HANDLE_DECORATION, resizeHandlerAreaWidth, resizeHandlerAreaWidth / 2, resizeHandlerZIndex, getLastColumnResizerOverrides(), resizeHandleOverrides(props), ClassName.WITH_RESIZE_LINE, ClassName.RESIZE_HANDLE_DECORATION, ClassName.WITH_RESIZE_LINE, ClassName.RESIZE_HANDLE_DECORATION, tableToolbarSize + tableCellBorderWidth, tableToolbarSize + tableCellBorderWidth);
+  return css(_templateObject33 || (_templateObject33 = _taggedTemplateLiteral(["\n  .", " {\n    .", " {\n      background-color: transparent;\n      position: absolute;\n      width: ", "px;\n      height: 100%;\n      top: 0;\n      right: -", "px;\n      cursor: col-resize;\n      z-index: ", ";\n    }\n\n    ", "\n\n    ", "\n\n    table\n      tr:first-of-type\n      th.", "\n      .", "::after,\n      table\n      tr:first-of-type\n      td.", "\n      .", "::after {\n      top: -", "px;\n      height: calc(100% + ", "px);\n    }\n  }\n"])), ClassName.TABLE_CONTAINER, ClassName.RESIZE_HANDLE_DECORATION, resizeHandlerAreaWidth, resizeHandlerAreaWidth / 2, resizeHandlerZIndex, getLastColumnResizerOverrides(), resizeHandleOverrides(props), ClassName.WITH_RESIZE_LINE, ClassName.RESIZE_HANDLE_DECORATION, ClassName.WITH_RESIZE_LINE, ClassName.RESIZE_HANDLE_DECORATION, tableToolbarSize + tableCellBorderWidth, tableToolbarSize + tableCellBorderWidth);
 };
 export var insertLine = function insertLine(props) {
-  return css(_templateObject33 || (_templateObject33 = _taggedTemplateLiteral(["\n  .", " {\n    td.", "::before {\n      content: ' ';\n      position: absolute;\n      left: -1px;\n      top: -1px;\n      width: ", "px;\n      height: calc(100% + ", "px);\n      background-color: ", ";\n      z-index: ", ";\n    }\n\n    th.", "::before {\n      content: ' ';\n      left: -1px;\n      position: absolute;\n      width: ", "px;\n      height: calc(100% + ", "px);\n      background-color: ", ";\n      z-index: ", ";\n      top: -", "px;\n    }\n\n    td.", "::before {\n      content: ' ';\n      position: absolute;\n      left: ", ";\n      top: -1px;\n      width: ", "px;\n      height: calc(100% + ", "px);\n      background-color: ", ";\n      z-index: ", ";\n    }\n\n    th.", "::before {\n      content: ' ';\n      left: ", ";\n      position: absolute;\n      width: ", "px;\n      height: calc(100% + ", "px);\n      background-color: ", ";\n      z-index: ", ";\n      top: -", "px;\n    }\n\n    td.", "::before {\n      content: ' ';\n      position: absolute;\n      right: -1px;\n      top: -1px;\n      width: ", "px;\n      height: calc(100% + ", "px);\n      background-color: ", ";\n      z-index: ", ";\n    }\n\n    th.", "::before {\n      content: ' ';\n      right: -1px;\n      position: absolute;\n      width: ", "px;\n      height: calc(100% + ", "px);\n      background-color: ", ";\n      z-index: ", ";\n      top: -", "px;\n    }\n\n    td.", "::before {\n      content: ' ';\n      position: absolute;\n      left: ", ";\n      top: -1px;\n      height: ", "px;\n      width: calc(100% + ", "px);\n      background-color: ", ";\n      z-index: ", ";\n    }\n\n    th.", "::before {\n      content: ' ';\n      left: ", ";\n      position: absolute;\n      height: ", "px;\n      width: calc(100% + ", "px);\n      background-color: ", ";\n      z-index: ", ";\n      top: -1px;\n    }\n\n    td.", "::before {\n      content: ' ';\n      position: absolute;\n      left: ", ";\n      bottom: 0;\n      height: ", "px;\n      width: calc(100% + 2px);\n      background-color: ", ";\n      z-index: ", ";\n    }\n\n    th.", "::before {\n      content: ' ';\n      left: ", ";\n      bottom: 0;\n      position: absolute;\n      height: ", "px;\n      width: calc(100% + ", "px);\n      background-color: ", ";\n      z-index: ", ";\n    }\n  }\n"])), ClassName.TABLE_CONTAINER, ClassName.WITH_FIRST_COLUMN_INSERT_LINE, insertLineWidth, tableCellBorderWidth * 2, tableBorderSelectedColor(props), columnControlsZIndex * 2, ClassName.WITH_FIRST_COLUMN_INSERT_LINE, insertLineWidth, tableCellBorderWidth * 2, tableBorderSelectedColor(props), columnControlsZIndex * 2, tableCellBorderWidth, ClassName.WITH_COLUMN_INSERT_LINE, "var(--ds-space-negative-025, -2px)", insertLineWidth, tableCellBorderWidth * 2, tableBorderSelectedColor(props), columnControlsZIndex * 2, ClassName.WITH_COLUMN_INSERT_LINE, "var(--ds-space-negative-025, -2px)", insertLineWidth, tableCellBorderWidth * 2, tableBorderSelectedColor(props), columnControlsZIndex * 2, tableCellBorderWidth, ClassName.WITH_LAST_COLUMN_INSERT_LINE, insertLineWidth, tableCellBorderWidth * 2, tableBorderSelectedColor(props), columnControlsZIndex * 2, ClassName.WITH_LAST_COLUMN_INSERT_LINE, insertLineWidth, tableCellBorderWidth * 2, tableBorderSelectedColor(props), columnControlsZIndex * 2, tableCellBorderWidth, ClassName.WITH_ROW_INSERT_LINE, "var(--ds-space-negative-025, -2px)", insertLineWidth, tableCellBorderWidth * 2, tableBorderSelectedColor(props), columnControlsZIndex * 2, ClassName.WITH_ROW_INSERT_LINE, "var(--ds-space-negative-025, -2px)", insertLineWidth, tableCellBorderWidth * 2, tableBorderSelectedColor(props), columnControlsZIndex * 2, ClassName.WITH_LAST_ROW_INSERT_LINE, "var(--ds-space-negative-025, -2px)", insertLineWidth, tableBorderSelectedColor(props), columnControlsZIndex * 2, ClassName.WITH_LAST_ROW_INSERT_LINE, "var(--ds-space-negative-025, -2px)", insertLineWidth, tableCellBorderWidth * 2, tableBorderSelectedColor(props), columnControlsZIndex * 2);
+  return css(_templateObject34 || (_templateObject34 = _taggedTemplateLiteral(["\n  .", " {\n    td.", "::before {\n      content: ' ';\n      position: absolute;\n      left: -1px;\n      top: -1px;\n      width: ", "px;\n      height: calc(100% + ", "px);\n      background-color: ", ";\n      z-index: ", ";\n    }\n\n    th.", "::before {\n      content: ' ';\n      left: -1px;\n      position: absolute;\n      width: ", "px;\n      height: calc(100% + ", "px);\n      background-color: ", ";\n      z-index: ", ";\n      top: -", "px;\n    }\n\n    td.", "::before {\n      content: ' ';\n      position: absolute;\n      left: ", ";\n      top: -1px;\n      width: ", "px;\n      height: calc(100% + ", "px);\n      background-color: ", ";\n      z-index: ", ";\n    }\n\n    th.", "::before {\n      content: ' ';\n      left: ", ";\n      position: absolute;\n      width: ", "px;\n      height: calc(100% + ", "px);\n      background-color: ", ";\n      z-index: ", ";\n      top: -", "px;\n    }\n\n    td.", "::before {\n      content: ' ';\n      position: absolute;\n      right: -1px;\n      top: -1px;\n      width: ", "px;\n      height: calc(100% + ", "px);\n      background-color: ", ";\n      z-index: ", ";\n    }\n\n    th.", "::before {\n      content: ' ';\n      right: -1px;\n      position: absolute;\n      width: ", "px;\n      height: calc(100% + ", "px);\n      background-color: ", ";\n      z-index: ", ";\n      top: -", "px;\n    }\n\n    td.", "::before {\n      content: ' ';\n      position: absolute;\n      left: ", ";\n      top: -1px;\n      height: ", "px;\n      width: calc(100% + ", "px);\n      background-color: ", ";\n      z-index: ", ";\n    }\n\n    th.", "::before {\n      content: ' ';\n      left: ", ";\n      position: absolute;\n      height: ", "px;\n      width: calc(100% + ", "px);\n      background-color: ", ";\n      z-index: ", ";\n      top: -1px;\n    }\n\n    td.", "::before {\n      content: ' ';\n      position: absolute;\n      left: ", ";\n      bottom: 0;\n      height: ", "px;\n      width: calc(100% + 2px);\n      background-color: ", ";\n      z-index: ", ";\n    }\n\n    th.", "::before {\n      content: ' ';\n      left: ", ";\n      bottom: 0;\n      position: absolute;\n      height: ", "px;\n      width: calc(100% + ", "px);\n      background-color: ", ";\n      z-index: ", ";\n    }\n  }\n"])), ClassName.TABLE_CONTAINER, ClassName.WITH_FIRST_COLUMN_INSERT_LINE, insertLineWidth, tableCellBorderWidth * 2, tableBorderSelectedColor(props), columnControlsZIndex * 2, ClassName.WITH_FIRST_COLUMN_INSERT_LINE, insertLineWidth, tableCellBorderWidth * 2, tableBorderSelectedColor(props), columnControlsZIndex * 2, tableCellBorderWidth, ClassName.WITH_COLUMN_INSERT_LINE, "var(--ds-space-negative-025, -2px)", insertLineWidth, tableCellBorderWidth * 2, tableBorderSelectedColor(props), columnControlsZIndex * 2, ClassName.WITH_COLUMN_INSERT_LINE, "var(--ds-space-negative-025, -2px)", insertLineWidth, tableCellBorderWidth * 2, tableBorderSelectedColor(props), columnControlsZIndex * 2, tableCellBorderWidth, ClassName.WITH_LAST_COLUMN_INSERT_LINE, insertLineWidth, tableCellBorderWidth * 2, tableBorderSelectedColor(props), columnControlsZIndex * 2, ClassName.WITH_LAST_COLUMN_INSERT_LINE, insertLineWidth, tableCellBorderWidth * 2, tableBorderSelectedColor(props), columnControlsZIndex * 2, tableCellBorderWidth, ClassName.WITH_ROW_INSERT_LINE, "var(--ds-space-negative-025, -2px)", insertLineWidth, tableCellBorderWidth * 2, tableBorderSelectedColor(props), columnControlsZIndex * 2, ClassName.WITH_ROW_INSERT_LINE, "var(--ds-space-negative-025, -2px)", insertLineWidth, tableCellBorderWidth * 2, tableBorderSelectedColor(props), columnControlsZIndex * 2, ClassName.WITH_LAST_ROW_INSERT_LINE, "var(--ds-space-negative-025, -2px)", insertLineWidth, tableBorderSelectedColor(props), columnControlsZIndex * 2, ClassName.WITH_LAST_ROW_INSERT_LINE, "var(--ds-space-negative-025, -2px)", insertLineWidth, tableCellBorderWidth * 2, tableBorderSelectedColor(props), columnControlsZIndex * 2);
 };

package/dist/esm/plugins/table/utils/decoration.js

@@ -12,6 +12,7 @@ import { findTable, getCellsInRow, getSelectionRect } from '@atlaskit/editor-tab
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { TableCssClassName as ClassName, TableDecorations } from '../types';
 import { ColumnResizeWidget } from '../ui/ColumnResizeWidget';
+import { hasMergedCellsInColumn, hasMergedCellsInRow } from './merged-cells';
 var filterDecorationByKey = function filterDecorationByKey(key, decorationSet) {
   return decorationSet.find(undefined, undefined, function (spec) {
     return spec.key.indexOf(key) > -1;
@@ -32,7 +33,7 @@ export var createCellHoverDecoration = function createCellHoverDecoration(cells)
     });
   });
 };
-export var createControlsHoverDecoration = function createControlsHoverDecoration(cells, type, tr, danger, selected) {
+export var createControlsHoverDecoration = function createControlsHoverDecoration(cells, type, tr, isDragAndDropEnable, hoveredIndexes, danger, selected) {
   var table = findTable(tr.selection);
   if (!table) {
     return [];
@@ -59,6 +60,8 @@ export var createControlsHoverDecoration = function createControlsHoverDecoratio
   var updatedCells = cells.map(function (x) {
     return x.pos;
   });
+  var hasMergedCells = type === 'row' ? hasMergedCellsInRow(hoveredIndexes[0])(tr.selection) : hasMergedCellsInColumn(hoveredIndexes[0])(tr.selection);
+  var disabled = hasMergedCells;
 
   // ED-15246 fixed trello card table overflow issue
   // If columns / rows have been merged the hovered selection is different to the actual selection
@@ -109,6 +112,9 @@ export var createControlsHoverDecoration = function createControlsHoverDecoratio
     if (selected) {
       classes.push(ClassName.SELECTED_CELL);
     }
+    if (isDragAndDropEnable && disabled) {
+      classes.push(ClassName.HOVERED_DISABLED_CELL);
+    }
     classes.push(type === 'column' ? ClassName.HOVERED_COLUMN : type === 'row' ? ClassName.HOVERED_ROW : ClassName.HOVERED_TABLE);
     var key;
     switch (type) {

package/dist/types/plugins/table/types.d.ts

@@ -293,6 +293,8 @@ export declare const TableCssClassName: {
     DRAG_HANDLE_BUTTON_CONTAINER: string;
     DRAG_CORNER_BUTTON: string;
     DRAG_CORNER_BUTTON_INNER: string;
+    /** disabled classes */
+    DRAG_HANDLE_DISABLED: string;
     /** Other classes */
     NUMBERED_COLUMN: string;
     NUMBERED_COLUMN_BUTTON: string;
@@ -301,6 +303,7 @@ export declare const TableCssClassName: {
     HOVERED_ROW: string;
     HOVERED_TABLE: string;
     HOVERED_CELL: string;
+    HOVERED_DISABLED_CELL: string;
     HOVERED_CELL_IN_DANGER: string;
     HOVERED_CELL_ACTIVE: string;
     HOVERED_CELL_WARNING: string;

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

@@ -1,4 +1,5 @@
 import type { MouseEventHandler } from 'react';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { TableDirection } from '../../types';
 type DragHandleAppearance = 'default' | 'selected' | 'disabled' | 'danger';
 type DragHandleProps = {
@@ -12,6 +13,7 @@ type DragHandleProps = {
     onMouseOver?: MouseEventHandler;
     onMouseOut?: MouseEventHandler;
     onMouseUp?: MouseEventHandler;
+    editorView: EditorView;
 };
-export declare const DragHandle: ({ tableLocalId, direction, appearance, indexes, previewWidth, previewHeight, onMouseOver, onMouseOut, onMouseUp, onClick, }: DragHandleProps) => JSX.Element;
+export declare const DragHandle: ({ tableLocalId, direction, appearance, indexes, previewWidth, previewHeight, onMouseOver, onMouseOut, onMouseUp, onClick, editorView, }: DragHandleProps) => JSX.Element;
 export {};

package/dist/types/plugins/table/ui/consts.d.ts

@@ -13,6 +13,7 @@ export declare const tableBorderSelectedColor: import("@atlaskit/theme").ThemedV
 export declare const tableCellSelectedDeleteIconColor: import("@atlaskit/theme").ThemedValue<"var(--ds-icon-subtle)">;
 export declare const tableCellSelectedDeleteIconBackground: import("@atlaskit/theme").ThemedValue<"var(--ds-background-accent-gray-subtlest)">;
 export declare const tableCellDeleteColor: import("@atlaskit/theme").ThemedValue<"var(--ds-blanket-danger)">;
+export declare const tableCellDisabledColor: "var(--ds-background-accent-gray-subtler-hovered)";
 export declare const tableBorderDeleteColor: import("@atlaskit/theme").ThemedValue<"var(--ds-border-danger)">;
 export declare const tableToolbarDeleteColor: import("@atlaskit/theme").ThemedValue<"var(--ds-background-danger-pressed)">;
 export declare const tableCellHoverDeleteIconColor: import("@atlaskit/theme").ThemedValue<"var(--ds-icon-inverse)">;

package/dist/types/plugins/table/ui/icons/DragHandleDisabledIcon.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+interface DragHandleDisabledIconProps {
+    style?: React.CSSProperties;
+}
+export declare const DragHandleDisabledIcon: ({ style, }: DragHandleDisabledIconProps) => JSX.Element;
+export {};

package/dist/types/plugins/table/ui/icons/index.d.ts

@@ -1,5 +1,6 @@
 export { DragHandleIcon } from './DragHandleIcon';
 export { DragInMotionIcon } from './DragInMotionIcon';
+export { DragHandleDisabledIcon } from './DragHandleDisabledIcon';
 export { AddRowAboveIcon } from './AddRowAboveIcon';
 export { AddRowBelowIcon } from './AddRowBelowIcon';
 export { AddColLeftIcon } from './AddColLeftIcon';

package/dist/types/plugins/table/ui/ui-styles.d.ts

@@ -14,6 +14,7 @@ export declare const floatingColumnControls: (props: ThemeProps) => import("@emo
 export declare const rowControlsWrapperDotStyle: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
 export declare const columnControlsDecoration: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
 export declare const hoveredDeleteButton: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
+export declare const disabledCell: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
 export declare const hoveredCell: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
 export declare const hoveredWarningCell: import("@emotion/react").SerializedStyles;
 export declare const resizeHandle: (props: ThemeProps) => import("@emotion/react").SerializedStyles;

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

@@ -8,7 +8,7 @@ import { TableDecorations } from '../types';
 export declare const findColumnControlSelectedDecoration: (decorationSet: DecorationSet) => Decoration[];
 export declare const findControlsHoverDecoration: (decorationSet: DecorationSet) => Decoration[];
 export declare const createCellHoverDecoration: (cells: Cell[]) => Decoration[];
-export declare const createControlsHoverDecoration: (cells: Cell[], type: 'row' | 'column' | 'table', tr: Transaction | ReadonlyTransaction, danger?: boolean, selected?: boolean) => Decoration[];
+export declare const createControlsHoverDecoration: (cells: Cell[], type: 'row' | 'column' | 'table', tr: Transaction | ReadonlyTransaction, isDragAndDropEnable: boolean | undefined, hoveredIndexes: number[], danger?: boolean, selected?: boolean) => Decoration[];
 export declare const createColumnSelectedDecoration: (tr: Transaction | ReadonlyTransaction) => Decoration[];
 export declare const createColumnControlsDecoration: (selection: Selection) => Decoration[];
 export declare const updateDecorations: (node: PmNode, decorationSet: DecorationSet, decorations: Decoration[], key: TableDecorations) => DecorationSet;

package/dist/types/plugins/table/utils/selection.d.ts

@@ -1,5 +1,5 @@
-import { Selection, Transaction } from '@atlaskit/editor-prosemirror/state';
-import { Rect } from '@atlaskit/editor-tables/table-map';
+import type { Selection, Transaction } from '@atlaskit/editor-prosemirror/state';
+import type { Rect } from '@atlaskit/editor-tables/table-map';
 export declare const isSelectionUpdated: (oldSelection: Selection, newSelection?: Selection) => boolean;
 export declare const normalizeSelection: (tr: Transaction) => Transaction;
 export declare const getSelectedColumnIndexes: (selectionRect: Rect) => number[];

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

@@ -293,6 +293,8 @@ export declare const TableCssClassName: {
     DRAG_HANDLE_BUTTON_CONTAINER: string;
     DRAG_CORNER_BUTTON: string;
     DRAG_CORNER_BUTTON_INNER: string;
+    /** disabled classes */
+    DRAG_HANDLE_DISABLED: string;
     /** Other classes */
     NUMBERED_COLUMN: string;
     NUMBERED_COLUMN_BUTTON: string;
@@ -301,6 +303,7 @@ export declare const TableCssClassName: {
     HOVERED_ROW: string;
     HOVERED_TABLE: string;
     HOVERED_CELL: string;
+    HOVERED_DISABLED_CELL: string;
     HOVERED_CELL_IN_DANGER: string;
     HOVERED_CELL_ACTIVE: string;
     HOVERED_CELL_WARNING: string;

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

@@ -1,4 +1,5 @@
 import type { MouseEventHandler } from 'react';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { TableDirection } from '../../types';
 type DragHandleAppearance = 'default' | 'selected' | 'disabled' | 'danger';
 type DragHandleProps = {
@@ -12,6 +13,7 @@ type DragHandleProps = {
     onMouseOver?: MouseEventHandler;
     onMouseOut?: MouseEventHandler;
     onMouseUp?: MouseEventHandler;
+    editorView: EditorView;
 };
-export declare const DragHandle: ({ tableLocalId, direction, appearance, indexes, previewWidth, previewHeight, onMouseOver, onMouseOut, onMouseUp, onClick, }: DragHandleProps) => JSX.Element;
+export declare const DragHandle: ({ tableLocalId, direction, appearance, indexes, previewWidth, previewHeight, onMouseOver, onMouseOut, onMouseUp, onClick, editorView, }: DragHandleProps) => JSX.Element;
 export {};

package/dist/types-ts4.5/plugins/table/ui/consts.d.ts

@@ -13,6 +13,7 @@ export declare const tableBorderSelectedColor: import("@atlaskit/theme").ThemedV
 export declare const tableCellSelectedDeleteIconColor: import("@atlaskit/theme").ThemedValue<"var(--ds-icon-subtle)">;
 export declare const tableCellSelectedDeleteIconBackground: import("@atlaskit/theme").ThemedValue<"var(--ds-background-accent-gray-subtlest)">;
 export declare const tableCellDeleteColor: import("@atlaskit/theme").ThemedValue<"var(--ds-blanket-danger)">;
+export declare const tableCellDisabledColor: "var(--ds-background-accent-gray-subtler-hovered)";
 export declare const tableBorderDeleteColor: import("@atlaskit/theme").ThemedValue<"var(--ds-border-danger)">;
 export declare const tableToolbarDeleteColor: import("@atlaskit/theme").ThemedValue<"var(--ds-background-danger-pressed)">;
 export declare const tableCellHoverDeleteIconColor: import("@atlaskit/theme").ThemedValue<"var(--ds-icon-inverse)">;

package/dist/types-ts4.5/plugins/table/ui/icons/DragHandleDisabledIcon.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+interface DragHandleDisabledIconProps {
+    style?: React.CSSProperties;
+}
+export declare const DragHandleDisabledIcon: ({ style, }: DragHandleDisabledIconProps) => JSX.Element;
+export {};

package/dist/types-ts4.5/plugins/table/ui/icons/index.d.ts

@@ -1,5 +1,6 @@
 export { DragHandleIcon } from './DragHandleIcon';
 export { DragInMotionIcon } from './DragInMotionIcon';
+export { DragHandleDisabledIcon } from './DragHandleDisabledIcon';
 export { AddRowAboveIcon } from './AddRowAboveIcon';
 export { AddRowBelowIcon } from './AddRowBelowIcon';
 export { AddColLeftIcon } from './AddColLeftIcon';

package/dist/types-ts4.5/plugins/table/ui/ui-styles.d.ts

@@ -14,6 +14,7 @@ export declare const floatingColumnControls: (props: ThemeProps) => import("@emo
 export declare const rowControlsWrapperDotStyle: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
 export declare const columnControlsDecoration: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
 export declare const hoveredDeleteButton: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
+export declare const disabledCell: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
 export declare const hoveredCell: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
 export declare const hoveredWarningCell: import("@emotion/react").SerializedStyles;
 export declare const resizeHandle: (props: ThemeProps) => import("@emotion/react").SerializedStyles;

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

@@ -8,7 +8,7 @@ import { TableDecorations } from '../types';
 export declare const findColumnControlSelectedDecoration: (decorationSet: DecorationSet) => Decoration[];
 export declare const findControlsHoverDecoration: (decorationSet: DecorationSet) => Decoration[];
 export declare const createCellHoverDecoration: (cells: Cell[]) => Decoration[];
-export declare const createControlsHoverDecoration: (cells: Cell[], type: 'row' | 'column' | 'table', tr: Transaction | ReadonlyTransaction, danger?: boolean, selected?: boolean) => Decoration[];
+export declare const createControlsHoverDecoration: (cells: Cell[], type: 'row' | 'column' | 'table', tr: Transaction | ReadonlyTransaction, isDragAndDropEnable: boolean | undefined, hoveredIndexes: number[], danger?: boolean, selected?: boolean) => Decoration[];
 export declare const createColumnSelectedDecoration: (tr: Transaction | ReadonlyTransaction) => Decoration[];
 export declare const createColumnControlsDecoration: (selection: Selection) => Decoration[];
 export declare const updateDecorations: (node: PmNode, decorationSet: DecorationSet, decorations: Decoration[], key: TableDecorations) => DecorationSet;

package/dist/types-ts4.5/plugins/table/utils/selection.d.ts

@@ -1,5 +1,5 @@
-import { Selection, Transaction } from '@atlaskit/editor-prosemirror/state';
-import { Rect } from '@atlaskit/editor-tables/table-map';
+import type { Selection, Transaction } from '@atlaskit/editor-prosemirror/state';
+import type { Rect } from '@atlaskit/editor-tables/table-map';
 export declare const isSelectionUpdated: (oldSelection: Selection, newSelection?: Selection) => boolean;
 export declare const normalizeSelection: (tr: Transaction) => Transaction;
 export declare const getSelectedColumnIndexes: (selectionRect: Rect) => number[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "5.3.26",
+  "version": "5.3.27",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -29,7 +29,7 @@
   "dependencies": {
     "@atlaskit/adf-schema": "^32.0.0",
     "@atlaskit/custom-steps": "^0.0.2",
-    "@atlaskit/editor-common": "^76.19.0",
+    "@atlaskit/editor-common": "^76.20.0",
     "@atlaskit/editor-palette": "1.5.2",
     "@atlaskit/editor-plugin-analytics": "^0.3.0",
     "@atlaskit/editor-plugin-content-insertion": "^0.1.0",

package/src/plugins/table/commands/hover.ts

@@ -6,7 +6,7 @@ import {
   getCellsInRow,
 } from '@atlaskit/editor-tables/utils';
 
-import { createCommand } from '../pm-plugins/plugin-factory';
+import { createCommand, getPluginState } from '../pm-plugins/plugin-factory';
 import type { Cell, CellColumnPositioning } from '../types';
 import { TableDecorations } from '../types';
 import {
@@ -57,13 +57,18 @@ export const hoverColumns = (hoveredColumns: number[], isInDanger?: boolean) =>
   createCommand(
     (state) => {
       const cells = getCellsInColumn(hoveredColumns)(state.tr.selection);
+
+      const { isDragAndDropEnabled } = getPluginState(state);
       if (!cells) {
         return false;
       }
+
       const decorations = createControlsHoverDecoration(
         cells,
         'column',
         state.tr,
+        isDragAndDropEnabled,
+        hoveredColumns,
         isInDanger,
       );
 
@@ -90,10 +95,13 @@ export const hoverRows = (hoveredRows: number[], isInDanger?: boolean) =>
       if (!cells) {
         return false;
       }
+      const { isDragAndDropEnabled } = getPluginState(state);
       const decorations = createControlsHoverDecoration(
         cells,
         'row',
         state.tr,
+        isDragAndDropEnabled,
+        hoveredRows,
         isInDanger,
       );
 
@@ -127,10 +135,13 @@ export const hoverTable = (isInDanger?: boolean, isSelected?: boolean) =>
       if (!cells) {
         return false;
       }
+      const { isDragAndDropEnabled } = getPluginState(state);
       const decorations = createControlsHoverDecoration(
         cells,
         'table',
         state.tr,
+        isDragAndDropEnabled,
+        [],
         isInDanger,
         isSelected,
       );

package/src/plugins/table/types.ts

@@ -325,6 +325,9 @@ export const TableCssClassName = {
   DRAG_CORNER_BUTTON: `${tablePrefixSelector}-drag-corner-button`,
   DRAG_CORNER_BUTTON_INNER: `${tablePrefixSelector}-drag-corner-button-inner`,
 
+  /** disabled classes */
+  DRAG_HANDLE_DISABLED: `${tablePrefixSelector}-drag-handle-disabled`,
+
   /** Other classes */
   NUMBERED_COLUMN: `${tablePrefixSelector}-numbered-column`,
   NUMBERED_COLUMN_BUTTON: `${tablePrefixSelector}-numbered-column__button`,
@@ -334,6 +337,7 @@ export const TableCssClassName = {
   HOVERED_ROW: `${tablePrefixSelector}-hovered-row`,
   HOVERED_TABLE: `${tablePrefixSelector}-hovered-table`,
   HOVERED_CELL: `${tablePrefixSelector}-hovered-cell`,
+  HOVERED_DISABLED_CELL: `${tablePrefixSelector}-hovered-disabled`,
   HOVERED_CELL_IN_DANGER: 'danger',
   HOVERED_CELL_ACTIVE: 'active',
   HOVERED_CELL_WARNING: `${tablePrefixSelector}-hovered-cell__warning`,

package/src/plugins/table/ui/DragHandle/index.tsx

@@ -1,16 +1,19 @@
 import type { MouseEventHandler } from 'react';
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
 
 import classnames from 'classnames';
 import ReactDOM from 'react-dom';
 
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { draggable } from '@atlaskit/pragmatic-drag-and-drop/adapter/element';
 import { setCustomNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/util/set-custom-native-drag-preview';
 
+import { getPluginState } from '../../pm-plugins/plugin-factory';
 import type { TableDirection } from '../../types';
 import { TableCssClassName as ClassName } from '../../types';
+import { hasMergedCellsInColumn, hasMergedCellsInRow } from '../../utils';
 import { DragPreview } from '../DragPreview';
-import { DragHandleIcon } from '../icons';
+import { DragHandleDisabledIcon, DragHandleIcon } from '../icons';
 
 type DragHandleAppearance = 'default' | 'selected' | 'disabled' | 'danger';
 
@@ -25,6 +28,7 @@ type DragHandleProps = {
   onMouseOver?: MouseEventHandler;
   onMouseOut?: MouseEventHandler;
   onMouseUp?: MouseEventHandler;
+  editorView: EditorView;
 };
 
 export const DragHandle = ({
@@ -38,17 +42,32 @@ export const DragHandle = ({
   onMouseOut,
   onMouseUp,
   onClick,
+  editorView,
 }: DragHandleProps) => {
   const dragHandleDivRef = useRef<HTMLButtonElement>(null);
   const [previewContainer, setPreviewContainer] = useState<HTMLElement | null>(
     null,
   );
+  const { isDragAndDropEnabled } = getPluginState(editorView.state);
+  const { selection } = editorView.state;
+
+  const hasMergedCells = useMemo(
+    () =>
+      direction === 'row'
+        ? hasMergedCellsInRow(indexes[0])(selection)
+        : hasMergedCellsInColumn(indexes[0])(selection),
+    [indexes, direction, selection],
+  );
 
   useEffect(() => {
     const dragHandleDivRefCurrent = dragHandleDivRef.current;
+
     if (dragHandleDivRefCurrent) {
       return draggable({
         element: dragHandleDivRefCurrent,
+        canDrag: () => {
+          return !hasMergedCells;
+        },
         getInitialData() {
           return {
             localId: tableLocalId,
@@ -75,11 +94,23 @@ export const DragHandle = ({
         },
       });
     }
-  }, [tableLocalId, direction, indexes]);
+  }, [
+    tableLocalId,
+    direction,
+    indexes,
+    editorView.state.selection,
+    hasMergedCells,
+  ]);
 
   return (
     <button
-      className={classnames(ClassName.DRAG_HANDLE_BUTTON_CONTAINER, appearance)}
+      className={classnames(
+        ClassName.DRAG_HANDLE_BUTTON_CONTAINER,
+        appearance,
+        isDragAndDropEnabled &&
+          hasMergedCells &&
+          ClassName.DRAG_HANDLE_DISABLED,
+      )}
       ref={dragHandleDivRef}
       style={{
         transform: direction === 'column' ? 'none' : 'rotate(90deg)',
@@ -91,7 +122,7 @@ export const DragHandle = ({
       onMouseUp={onMouseUp}
       onClick={onClick}
     >
-      <DragHandleIcon />
+      {hasMergedCells ? <DragHandleDisabledIcon /> : <DragHandleIcon />}
       {previewContainer &&
         previewWidth !== undefined &&
         previewHeight !== undefined &&

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

@@ -174,6 +174,7 @@ export const ColumnControls = ({
                 onMouseOver={handleMouseOver}
                 onMouseOut={handleMouseOut}
                 onMouseUp={handleMouseUp}
+                editorView={editorView}
               />
             </div>
           )}

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

@@ -180,6 +180,7 @@ const DragControlsComponent = ({
             onMouseOver={handleMouseOver}
             onMouseOut={handleMouseOut}
             onMouseUp={onMouseUp}
+            editorView={editorView}
           />
         </div>
       )}