@atlaskit/editor-plugin-table 5.4.19 → 5.4.20

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

@@ -9,7 +9,7 @@ import { getPluginState as getTablePluginState } from '../plugin-factory';
 import { pluginKey as tablePluginKey } from '../plugin-key';
 import { DragAndDropActionType } from './actions';
 import { clearDropTarget, moveSource, setDropTarget, toggleDragMenu } from './commands';
-import { DropTargetType } from './consts';
+import { DRAGGABLE_TABLE_NODE_SIZE_LIMIT, DropTargetType } from './consts';
 import { createPluginState, getPluginState } from './plugin-factory';
 import { pluginKey } from './plugin-key';
 import { getDraggableDataFromEvent } from './utils/monitor';
@@ -21,20 +21,26 @@ export const createPlugin = (dispatch, eventDispatcher) => {
       dropTargetIndex: 0,
       isDragMenuOpen: false,
       dragMenuIndex: 0,
-      isDragging: false
+      isDragging: false,
+      canDrag: false
     })),
     key: pluginKey,
     appendTransaction: (transactions, oldState, newState) => {
       const {
-        targetCellPosition: oldTargetCellPosition
+        targetCellPosition: oldTargetCellPosition,
+        tableNode: oldTableNode
       } = getTablePluginState(oldState);
       const {
-        targetCellPosition: newTargetCellPosition
+        targetCellPosition: newTargetCellPosition,
+        tableNode: newTableNode
       } = getTablePluginState(newState);
       const {
         isDragMenuOpen,
-        dragMenuIndex
+        dragMenuIndex,
+        canDrag
       } = getPluginState(newState);
+      const stateChanges = [];
+      const tr = newState.tr;
 
       // What's happening here? you asked... In a nutshell;
       // If the target cell position changes while the drag menu is open then we want to close the drag menu if it has been opened.
@@ -42,14 +48,6 @@ export const createPlugin = (dispatch, eventDispatcher) => {
       // to check if the new target cell position is pointed at a different cell than what the drag menu was opened on.
       if (oldTargetCellPosition !== newTargetCellPosition) {
         if (isDragMenuOpen) {
-          const tr = newState.tr;
-          const action = {
-            type: DragAndDropActionType.TOGGLE_DRAG_MENU,
-            data: {
-              isDragMenuOpen: false,
-              direction: undefined
-            }
-          };
           if (newTargetCellPosition !== undefined) {
             const cells = getCellsInRow(dragMenuIndex)(tr.selection);
             // ED-20673 check if it is a cell selection,
@@ -57,13 +55,39 @@ export const createPlugin = (dispatch, eventDispatcher) => {
             // should not close the drag menu.
             const isCellSelection = tr.selection instanceof CellSelection;
             if (cells && cells.length && cells[0].node !== tr.doc.nodeAt(newTargetCellPosition) && !isCellSelection) {
-              return tr.setMeta(pluginKey, action);
+              stateChanges.push({
+                isDragMenuOpen: false,
+                dragMenuDirection: undefined
+              });
             } // else NOP
           } else {
-            return tr.setMeta(pluginKey, action);
+            stateChanges.push({
+              isDragMenuOpen: false,
+              dragMenuDirection: undefined
+            });
           }
         }
       }
+      if ((oldTableNode === null || oldTableNode === void 0 ? void 0 : oldTableNode.nodeSize) !== (newTableNode === null || newTableNode === void 0 ? void 0 : newTableNode.nodeSize)) {
+        var _newTableNode$nodeSiz;
+        const nextCanDrag = ((_newTableNode$nodeSiz = newTableNode === null || newTableNode === void 0 ? void 0 : newTableNode.nodeSize) !== null && _newTableNode$nodeSiz !== void 0 ? _newTableNode$nodeSiz : 0) < DRAGGABLE_TABLE_NODE_SIZE_LIMIT;
+        if (canDrag !== nextCanDrag) {
+          stateChanges.push({
+            canDrag: nextCanDrag
+          });
+        }
+      }
+      if (stateChanges.length) {
+        return tr.setMeta(pluginKey, {
+          type: DragAndDropActionType.UPDATE,
+          data: {
+            ...stateChanges.reduce((state, cur) => ({
+              ...state,
+              ...cur
+            }), {})
+          }
+        }).setMeta('addToHistory', false);
+      }
     },
     view: editorView => {
       return {

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

@@ -25,6 +25,11 @@ export default ((pluginState, action) => {
         dragMenuDirection: action.data.direction,
         dragMenuIndex: action.data.index
       };
+    case DragAndDropActionType.UPDATE:
+      return {
+        ...pluginState,
+        ...action.data
+      };
     default:
       return pluginState;
   }

package/dist/es2019/plugins/table/ui/DragHandle/HandleIconComponent.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { DragHandleDisabledIcon, DragHandleIcon, MinimisedHandleIcon } from '../icons';
 export const HandleIconComponent = props => {
   const {
+    canDrag,
     direction,
     isDragMenuOpen,
     isRowHandleHovered,
@@ -14,7 +15,8 @@ export const HandleIconComponent = props => {
   const isHandleHovered = isRowHandleHovered || isColumnHandleHovered;
   const isCurrentRowOrColumnSelected = isCurrentRowSelected || isCurrentColumnSelected;
   const isDragMenuOpenOnCurrentRowOrColumn = isDragMenuOpen && dragMenuDirection === direction && isCurrentRowOrColumnSelected;
-  const showNormalHandle = hasMergedCells ? /*#__PURE__*/React.createElement(DragHandleDisabledIcon, null) : /*#__PURE__*/React.createElement(DragHandleIcon, null);
+  const isDragPossible = canDrag && !hasMergedCells;
+  const showNormalHandle = !isDragPossible ? /*#__PURE__*/React.createElement(DragHandleDisabledIcon, null) : /*#__PURE__*/React.createElement(DragHandleIcon, null);
 
   // hoverred handle or open drag menu
   if (isHandleHovered || isDragMenuOpenOnCurrentRowOrColumn) {

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

@@ -21,7 +21,8 @@ export const DragHandle = ({
   onMouseOut,
   onMouseUp,
   onClick,
-  editorView
+  editorView,
+  canDrag = false
 }) => {
   const dragHandleDivRef = useRef(null);
   const [previewContainer, setPreviewContainer] = useState(null);
@@ -44,6 +45,7 @@ export const DragHandle = ({
   const isColumnHandleHovered = direction === 'column' && hoveredColumns.length > 0;
   const hasMergedCells = useMemo(() => direction === 'row' ? hasMergedCellsInRow(indexes[0])(selection) : hasMergedCellsInColumn(indexes[0])(selection), [indexes, direction, selection]);
   const handleIconProps = {
+    canDrag,
     hasMergedCells,
     direction,
     isDragMenuOpen,
@@ -59,7 +61,7 @@ export const DragHandle = ({
       return draggable({
         element: dragHandleDivRefCurrent,
         canDrag: () => {
-          return !hasMergedCells;
+          return canDrag && !hasMergedCells;
         },
         getInitialData() {
           return {
@@ -108,10 +110,10 @@ export const DragHandle = ({
         }
       });
     }
-  }, [tableLocalId, direction, indexes, editorView.state.selection, hasMergedCells]);
+  }, [tableLocalId, direction, indexes, editorView.state.selection, hasMergedCells, canDrag]);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("button", {
     className: classnames(ClassName.DRAG_HANDLE_BUTTON_CONTAINER, appearance, {
-      [ClassName.DRAG_HANDLE_DISABLED]: hasMergedCells
+      [ClassName.DRAG_HANDLE_DISABLED]: !canDrag || hasMergedCells
     }),
     ref: dragHandleDivRef,
     style: {

package/dist/es2019/plugins/table/ui/FloatingDragMenu/DragMenu.js

@@ -61,7 +61,8 @@ export const DragMenu = ({
   boundariesElement,
   scrollableElement,
   targetCellPosition,
-  getEditorContainerWidth
+  getEditorContainerWidth,
+  canDrag
 }) => {
   const tableMap = tableNode ? TableMap.get(tableNode) : undefined;
   const {
@@ -74,7 +75,7 @@ export const DragMenu = ({
   const selectionRect = isSelectionType(selection, 'cell') ? getSelectionRect(selection) : findCellRectClosestToPos(selection.$from);
   const hasMergedCells = direction === 'row' ? hasMergedCellsInRow : hasMergedCellsInColumn;
   const shouldMoveDisabled = index !== undefined && hasMergedCells(index)(selection);
-  const dragMenuConfig = getDragMenuConfig(direction, getEditorContainerWidth, shouldMoveDisabled, tableMap, index, targetCellPosition, selectionRect);
+  const dragMenuConfig = getDragMenuConfig(direction, getEditorContainerWidth, !!canDrag && !shouldMoveDisabled, tableMap, index, targetCellPosition, selectionRect);
   const {
     menuItems,
     menuCallback

package/dist/es2019/plugins/table/ui/FloatingDragMenu/index.js

@@ -16,7 +16,8 @@ const FloatingDragMenu = ({
   direction,
   index,
   targetCellPosition,
-  getEditorContainerWidth
+  getEditorContainerWidth,
+  canDrag
 }) => {
   if (!isOpen || !targetCellPosition || editorView.state.doc.nodeSize <= targetCellPosition) {
     return null;
@@ -52,7 +53,8 @@ const FloatingDragMenu = ({
     direction: direction,
     index: index,
     targetCellPosition: targetCellPosition,
-    getEditorContainerWidth: getEditorContainerWidth
+    getEditorContainerWidth: getEditorContainerWidth,
+    canDrag: canDrag
   }));
 };
 FloatingDragMenu.displayName = 'FloatingDragMenu';

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

@@ -1,4 +1,5 @@
 import React, { useCallback, useMemo } from 'react';
+import { tableCellMinWidth } from '@atlaskit/editor-common/styles';
 import { CellSelection } from '@atlaskit/editor-tables';
 import { getSelectionRect } from '@atlaskit/editor-tables/utils';
 import { clearHoverSelection, hoverCell, hoverColumns, selectColumn } from '../../../commands';
@@ -28,7 +29,8 @@ export const ColumnControls = ({
   rowHeights,
   colWidths,
   hasHeaderColumn,
-  isTableHovered
+  isTableHovered,
+  canDrag
 }) => {
   var _colWidths$map$join, _rowHeights$, _rowHeights$reduce, _colWidths;
   const widths = (_colWidths$map$join = colWidths === null || colWidths === void 0 ? void 0 : colWidths.map(width => width ? `${width - 1}px` : '0px').join(' ')) !== null && _colWidths$map$join !== void 0 ? _colWidths$map$join : '0px';
@@ -145,14 +147,15 @@ export const ColumnControls = ({
     direction: "column",
     tableLocalId: localId || '',
     indexes: colIndexes,
-    previewWidth: (_colWidths = colWidths === null || colWidths === void 0 ? void 0 : colWidths[colIndex]) !== null && _colWidths !== void 0 ? _colWidths : 48,
+    previewWidth: (_colWidths = colWidths === null || colWidths === void 0 ? void 0 : colWidths[colIndex]) !== null && _colWidths !== void 0 ? _colWidths : tableCellMinWidth,
     previewHeight: previewHeight,
     appearance: selectedColIndexes.includes(hoveredCell.colIndex) ? isInDanger ? 'danger' : 'selected' : 'default',
     onClick: handleClick,
     onMouseOver: handleMouseOver,
     onMouseOut: handleMouseOut,
     onMouseUp: handleMouseUp,
-    editorView: editorView
+    editorView: editorView,
+    canDrag: canDrag
   }))));
 };
 export default ColumnControls;

package/dist/es2019/plugins/table/ui/TableFloatingColumnControls/index.js

@@ -15,7 +15,8 @@ export const TableFloatingColumnControls = ({
   stickyHeader,
   selection,
   isInDanger,
-  isTableHovered
+  isTableHovered,
+  canDrag
 }) => {
   const [tableRect, setTableRect] = useState({
     width: 0,
@@ -91,7 +92,8 @@ export const TableFloatingColumnControls = ({
     isInDanger: isInDanger,
     rowHeights: rowHeights,
     colWidths: colWidths,
-    hasHeaderColumn: hasHeaderColumn
+    hasHeaderColumn: hasHeaderColumn,
+    canDrag: canDrag
   }), hasDropTargets && /*#__PURE__*/React.createElement(ColumnDropTargets, {
     tableRef: tableRef,
     stickyTop: tableActive ? stickyTop : undefined,

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

@@ -31,6 +31,7 @@ const DragControlsComponent = ({
   isInDanger,
   isResizing,
   isTableHovered,
+  canDrag,
   hoverRows,
   selectRow,
   updateCellHoverLocation
@@ -132,11 +133,11 @@ const DragControlsComponent = ({
     "data-end-index": endIndex,
     className: ClassName.DRAG_ROW_FLOATING_INSERT_DOT_WRAPPER,
     contentEditable: false,
-    key: index
+    key: `insert-dot-${index}`
   }, /*#__PURE__*/React.createElement("div", {
     className: ClassName.DRAG_ROW_FLOATING_INSERT_DOT
   })), isDragging && /*#__PURE__*/React.createElement(RowDropTarget, {
-    key: index,
+    key: `drop-target-${index}`,
     index: index,
     localId: currentNodeLocalId,
     style: {
@@ -167,7 +168,8 @@ const DragControlsComponent = ({
     onMouseOver: handleMouseOver,
     onMouseOut: handleMouseOut,
     onMouseUp: onMouseUp,
-    editorView: editorView
+    editorView: editorView,
+    canDrag: canDrag
   })));
 };
 export const DragControls = injectIntl(DragControlsComponent);

package/dist/es2019/plugins/table/ui/TableFloatingControls/index.js

@@ -99,9 +99,10 @@ export default class TableFloatingControls extends Component {
       headerRowHeight,
       stickyHeader,
       hoveredCell,
-      isTableHovered
+      isTableHovered,
+      canDrag
     } = this.props;
-    return this.state.tableWrapperWidth !== nextState.tableWrapperWidth || this.state.tableWrapperHeight !== nextState.tableWrapperHeight || ordering !== nextProps.ordering || tableRef !== nextProps.tableRef || tableActive !== nextProps.tableActive || isInDanger !== nextProps.isInDanger || isResizing !== nextProps.isResizing || hoveredRows !== nextProps.hoveredRows || isHeaderRowEnabled !== nextProps.isHeaderRowEnabled || isHeaderColumnEnabled !== nextProps.isHeaderColumnEnabled || isNumberColumnEnabled !== nextProps.isNumberColumnEnabled || isSelectionUpdated(selection, nextProps.selection) || headerRowHeight !== nextProps.headerRowHeight || stickyHeader !== nextProps.stickyHeader || hoveredCell !== nextProps.hoveredCell || isTableHovered !== nextProps.isTableHovered;
+    return this.state.tableWrapperWidth !== nextState.tableWrapperWidth || this.state.tableWrapperHeight !== nextState.tableWrapperHeight || ordering !== nextProps.ordering || tableRef !== nextProps.tableRef || tableActive !== nextProps.tableActive || isInDanger !== nextProps.isInDanger || isResizing !== nextProps.isResizing || hoveredRows !== nextProps.hoveredRows || isHeaderRowEnabled !== nextProps.isHeaderRowEnabled || isHeaderColumnEnabled !== nextProps.isHeaderColumnEnabled || isNumberColumnEnabled !== nextProps.isNumberColumnEnabled || isSelectionUpdated(selection, nextProps.selection) || headerRowHeight !== nextProps.headerRowHeight || stickyHeader !== nextProps.stickyHeader || hoveredCell !== nextProps.hoveredCell || isTableHovered !== nextProps.isTableHovered || canDrag !== nextProps.canDrag;
   }
   componentWillUnmount() {
     if (this.resizeObserver) {
@@ -124,7 +125,8 @@ export default class TableFloatingControls extends Component {
       stickyHeader,
       isDragAndDropEnabled,
       hoveredCell,
-      isTableHovered
+      isTableHovered,
+      canDrag
     } = this.props;
     if (!tableRef) {
       return null;
@@ -165,7 +167,8 @@ export default class TableFloatingControls extends Component {
       tableWidth: this.state.tableWrapperWidth,
       hoverRows: this.hoverRows,
       selectRow: this.selectRow,
-      updateCellHoverLocation: this.updateCellHoverLocation
+      updateCellHoverLocation: this.updateCellHoverLocation,
+      canDrag: canDrag
     })) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CornerControls, {
       editorView: editorView,
       tableRef: tableRef,

package/dist/es2019/plugins/table/utils/drag-menu.js

@@ -16,7 +16,7 @@ import { deleteRows } from '../transforms';
 import { AddColLeftIcon, AddColRightIcon, AddRowAboveIcon, AddRowBelowIcon } from '../ui/icons';
 const canDecrease = (index, min = 0) => index !== undefined && index > min;
 const canIncrease = (index, max = 0) => index !== undefined && index < max;
-export const getDragMenuConfig = (direction, getEditorContainerWidth, hasMergedCells, tableMap, index, targetCellPosition, selectionRect) => {
+export const getDragMenuConfig = (direction, getEditorContainerWidth, canDrag, tableMap, index, targetCellPosition, selectionRect) => {
   const addOptions = direction === 'row' ? [{
     label: 'above',
     offset: 0,
@@ -41,27 +41,27 @@ export const getDragMenuConfig = (direction, getEditorContainerWidth, hasMergedC
   const moveOptions = direction === 'row' ? [{
     label: 'up',
     offset: -1,
-    canMove: canDecrease,
+    canMove: index => canDrag && canDecrease(index),
     icon: ArrowUpIcon
   }, {
     label: 'down',
     offset: 1,
     canMove: index => {
       var _tableMap$height;
-      return canIncrease(index, ((_tableMap$height = tableMap === null || tableMap === void 0 ? void 0 : tableMap.height) !== null && _tableMap$height !== void 0 ? _tableMap$height : 0) - 1);
+      return canDrag && canIncrease(index, ((_tableMap$height = tableMap === null || tableMap === void 0 ? void 0 : tableMap.height) !== null && _tableMap$height !== void 0 ? _tableMap$height : 0) - 1);
     },
     icon: ArrowDownIcon
   }] : [{
     label: 'left',
     offset: -1,
-    canMove: canDecrease,
+    canMove: index => canDrag && canDecrease(index),
     icon: ArrowLeftIcon
   }, {
     label: 'right',
     offset: 1,
     canMove: index => {
       var _tableMap$width;
-      return canIncrease(index, ((_tableMap$width = tableMap === null || tableMap === void 0 ? void 0 : tableMap.width) !== null && _tableMap$width !== void 0 ? _tableMap$width : 0) - 1);
+      return canDrag && canIncrease(index, ((_tableMap$width = tableMap === null || tableMap === void 0 ? void 0 : tableMap.width) !== null && _tableMap$width !== void 0 ? _tableMap$width : 0) - 1);
     },
     icon: ArrowRightIcon
   }];
@@ -129,7 +129,7 @@ export const getDragMenuConfig = (direction, getEditorContainerWidth, hasMergedC
   }) => ({
     id: `move_${direction}_${label}`,
     title: `Move ${direction} ${label}`,
-    disabled: hasMergedCells || !canMove(index),
+    disabled: !canMove(index),
     icon,
     onClick: (state, dispatch) => {
       if (canMove(index)) {

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

@@ -345,6 +345,7 @@ var tablesPlugin = function tablesPlugin(_ref) {
             direction: dragAndDropState === null || dragAndDropState === void 0 ? void 0 : dragAndDropState.dragMenuDirection,
             index: dragAndDropState === null || dragAndDropState === void 0 ? void 0 : dragAndDropState.dragMenuIndex,
             isOpen: !!(dragAndDropState !== null && dragAndDropState !== void 0 && dragAndDropState.isDragMenuOpen) && !isResizing,
+            canDrag: dragAndDropState === null || dragAndDropState === void 0 ? void 0 : dragAndDropState.canDrag,
             getEditorContainerWidth: defaultGetEditorContainerWidth
           }), allowControls && !isDragAndDropEnabled && !isResizing && /*#__PURE__*/React.createElement(FloatingDeleteButton, {
             editorView: editorView,

package/dist/esm/plugins/table/nodeviews/TableComponent.js

@@ -511,7 +511,8 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         options = _this$props10.options,
         getPos = _this$props10.getPos,
         pluginInjectionApi = _this$props10.pluginInjectionApi,
-        isDragAndDropEnabled = _this$props10.isDragAndDropEnabled;
+        isDragAndDropEnabled = _this$props10.isDragAndDropEnabled,
+        canDrag = _this$props10.canDrag;
       var _this$state3 = this.state,
         showBeforeShadow = _this$state3.showBeforeShadow,
         showAfterShadow = _this$state3.showAfterShadow;
@@ -538,6 +539,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         isNumberColumnEnabled: node.attrs.isNumberColumnEnabled,
         isHeaderRowEnabled: isHeaderRowEnabled,
         isDragAndDropEnabled: isDragAndDropEnabled,
+        canDrag: canDrag,
         ordering: ordering,
         isHeaderColumnEnabled: isHeaderColumnEnabled,
         hasHeaderRow: hasHeaderRow
@@ -564,7 +566,8 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         selection: view.state.selection,
         headerRowHeight: headerRow ? headerRow.offsetHeight : undefined,
         stickyHeader: this.state.stickyHeader,
-        getEditorFeatureFlags: this.props.getEditorFeatureFlags
+        getEditorFeatureFlags: this.props.getEditorFeatureFlags,
+        canDrag: canDrag
       }) : null;
       var shadowPadding = allowControls && tableActive ? -tableToolbarSize : tableMarginSides;
       var shadowStyle = memoizeOne(function (visible) {

package/dist/esm/plugins/table/nodeviews/table.js

@@ -18,6 +18,7 @@ import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
 import { akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { pluginConfig as getPluginConfig } from '../create-plugin-config';
+import { pluginKey as tableDragAndDropPluginKey } from '../pm-plugins/drag-and-drop';
 import { getPluginState } from '../pm-plugins/plugin-factory';
 import { pluginKey } from '../pm-plugins/plugin-key';
 import { pluginKey as tableResizingPluginKey } from '../pm-plugins/table-resizing';
@@ -135,14 +136,17 @@ var TableView = /*#__PURE__*/function (_ReactNodeView) {
           tableResizingPluginState: tableResizingPluginKey,
           tableWidthPluginState: tableWidthPluginKey,
           widthPlugin: fakePluginKey,
-          mediaState: fakeMediaPluginKey
+          mediaState: fakeMediaPluginKey,
+          tableDragAndDropState: tableDragAndDropPluginKey
         },
         editorView: props.view,
         render: function render(pluginStates) {
+          var _tableDragAndDropStat;
           var tableResizingPluginState = pluginStates.tableResizingPluginState,
             tableWidthPluginState = pluginStates.tableWidthPluginState,
             pluginState = pluginStates.pluginState,
-            mediaState = pluginStates.mediaState;
+            mediaState = pluginStates.mediaState,
+            tableDragAndDropState = pluginStates.tableDragAndDropState;
           var containerWidth = props.getEditorContainerWidth();
           var isTableResizing = tableWidthPluginState === null || tableWidthPluginState === void 0 ? void 0 : tableWidthPluginState.resizing;
           var isResizing = Boolean((tableResizingPluginState === null || tableResizingPluginState === void 0 ? void 0 : tableResizingPluginState.dragging) || isTableResizing);
@@ -170,6 +174,7 @@ var TableView = /*#__PURE__*/function (_ReactNodeView) {
             isHeaderRowEnabled: pluginState.isHeaderRowEnabled,
             isHeaderColumnEnabled: pluginState.isHeaderColumnEnabled,
             isDragAndDropEnabled: pluginState.isDragAndDropEnabled,
+            canDrag: (_tableDragAndDropStat = tableDragAndDropState === null || tableDragAndDropState === void 0 ? void 0 : tableDragAndDropState.canDrag) !== null && _tableDragAndDropStat !== void 0 ? _tableDragAndDropStat : false,
             tableActive: tableActive,
             ordering: pluginState.ordering,
             isResizing: isResizing,

package/dist/esm/plugins/table/pm-plugins/drag-and-drop/actions.js

@@ -1,7 +1,8 @@
 export var DragAndDropActionType = {
   SET_DROP_TARGET: 'SET_DROP_TARGET',
   CLEAR_DROP_TARGET: 'CLEAR_DROP_TARGET',
-  TOGGLE_DRAG_MENU: 'TOGGLE_DRAG_MENU'
+  TOGGLE_DRAG_MENU: 'TOGGLE_DRAG_MENU',
+  UPDATE: 'UPDATE'
 };
 
 // NOTE: This should be a Union of all possible actions

package/dist/esm/plugins/table/pm-plugins/drag-and-drop/consts.js

@@ -2,4 +2,5 @@ export var DropTargetType = {
   NONE: 'none',
   ROW: 'row',
   COLUMN: 'column'
-};
+};
+export var DRAGGABLE_TABLE_NODE_SIZE_LIMIT = 20000;

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

@@ -1,4 +1,7 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
@@ -10,7 +13,7 @@ import { getPluginState as getTablePluginState } from '../plugin-factory';
 import { pluginKey as tablePluginKey } from '../plugin-key';
 import { DragAndDropActionType } from './actions';
 import { clearDropTarget, moveSource, setDropTarget, toggleDragMenu } from './commands';
-import { DropTargetType } from './consts';
+import { DRAGGABLE_TABLE_NODE_SIZE_LIMIT, DropTargetType } from './consts';
 import { createPluginState, getPluginState } from './plugin-factory';
 import { pluginKey } from './plugin-key';
 import { getDraggableDataFromEvent } from './utils/monitor';
@@ -23,18 +26,24 @@ export var createPlugin = function createPlugin(dispatch, eventDispatcher) {
         dropTargetIndex: 0,
         isDragMenuOpen: false,
         dragMenuIndex: 0,
-        isDragging: false
+        isDragging: false,
+        canDrag: false
       };
     }),
     key: pluginKey,
     appendTransaction: function appendTransaction(transactions, oldState, newState) {
       var _getTablePluginState = getTablePluginState(oldState),
-        oldTargetCellPosition = _getTablePluginState.targetCellPosition;
+        oldTargetCellPosition = _getTablePluginState.targetCellPosition,
+        oldTableNode = _getTablePluginState.tableNode;
       var _getTablePluginState2 = getTablePluginState(newState),
-        newTargetCellPosition = _getTablePluginState2.targetCellPosition;
+        newTargetCellPosition = _getTablePluginState2.targetCellPosition,
+        newTableNode = _getTablePluginState2.tableNode;
       var _getPluginState = getPluginState(newState),
         isDragMenuOpen = _getPluginState.isDragMenuOpen,
-        dragMenuIndex = _getPluginState.dragMenuIndex;
+        dragMenuIndex = _getPluginState.dragMenuIndex,
+        canDrag = _getPluginState.canDrag;
+      var stateChanges = [];
+      var tr = newState.tr;
 
       // What's happening here? you asked... In a nutshell;
       // If the target cell position changes while the drag menu is open then we want to close the drag menu if it has been opened.
@@ -42,14 +51,6 @@ export var createPlugin = function createPlugin(dispatch, eventDispatcher) {
       // to check if the new target cell position is pointed at a different cell than what the drag menu was opened on.
       if (oldTargetCellPosition !== newTargetCellPosition) {
         if (isDragMenuOpen) {
-          var tr = newState.tr;
-          var action = {
-            type: DragAndDropActionType.TOGGLE_DRAG_MENU,
-            data: {
-              isDragMenuOpen: false,
-              direction: undefined
-            }
-          };
           if (newTargetCellPosition !== undefined) {
             var cells = getCellsInRow(dragMenuIndex)(tr.selection);
             // ED-20673 check if it is a cell selection,
@@ -57,13 +58,36 @@ export var createPlugin = function createPlugin(dispatch, eventDispatcher) {
             // should not close the drag menu.
             var isCellSelection = tr.selection instanceof CellSelection;
             if (cells && cells.length && cells[0].node !== tr.doc.nodeAt(newTargetCellPosition) && !isCellSelection) {
-              return tr.setMeta(pluginKey, action);
+              stateChanges.push({
+                isDragMenuOpen: false,
+                dragMenuDirection: undefined
+              });
             } // else NOP
           } else {
-            return tr.setMeta(pluginKey, action);
+            stateChanges.push({
+              isDragMenuOpen: false,
+              dragMenuDirection: undefined
+            });
           }
         }
       }
+      if ((oldTableNode === null || oldTableNode === void 0 ? void 0 : oldTableNode.nodeSize) !== (newTableNode === null || newTableNode === void 0 ? void 0 : newTableNode.nodeSize)) {
+        var _newTableNode$nodeSiz;
+        var nextCanDrag = ((_newTableNode$nodeSiz = newTableNode === null || newTableNode === void 0 ? void 0 : newTableNode.nodeSize) !== null && _newTableNode$nodeSiz !== void 0 ? _newTableNode$nodeSiz : 0) < DRAGGABLE_TABLE_NODE_SIZE_LIMIT;
+        if (canDrag !== nextCanDrag) {
+          stateChanges.push({
+            canDrag: nextCanDrag
+          });
+        }
+      }
+      if (stateChanges.length) {
+        return tr.setMeta(pluginKey, {
+          type: DragAndDropActionType.UPDATE,
+          data: _objectSpread({}, stateChanges.reduce(function (state, cur) {
+            return _objectSpread(_objectSpread({}, state), cur);
+          }, {}))
+        }).setMeta('addToHistory', false);
+      }
     },
     view: function view(editorView) {
       return {

package/dist/esm/plugins/table/pm-plugins/drag-and-drop/reducer.js

@@ -25,6 +25,8 @@ export default (function (pluginState, action) {
         dragMenuDirection: action.data.direction,
         dragMenuIndex: action.data.index
       });
+    case DragAndDropActionType.UPDATE:
+      return _objectSpread(_objectSpread({}, pluginState), action.data);
     default:
       return pluginState;
   }

package/dist/esm/plugins/table/ui/DragHandle/HandleIconComponent.js

@@ -1,7 +1,8 @@
 import React from 'react';
 import { DragHandleDisabledIcon, DragHandleIcon, MinimisedHandleIcon } from '../icons';
 export var HandleIconComponent = function HandleIconComponent(props) {
-  var direction = props.direction,
+  var canDrag = props.canDrag,
+    direction = props.direction,
     isDragMenuOpen = props.isDragMenuOpen,
     isRowHandleHovered = props.isRowHandleHovered,
     isColumnHandleHovered = props.isColumnHandleHovered,
@@ -12,7 +13,8 @@ export var HandleIconComponent = function HandleIconComponent(props) {
   var isHandleHovered = isRowHandleHovered || isColumnHandleHovered;
   var isCurrentRowOrColumnSelected = isCurrentRowSelected || isCurrentColumnSelected;
   var isDragMenuOpenOnCurrentRowOrColumn = isDragMenuOpen && dragMenuDirection === direction && isCurrentRowOrColumnSelected;
-  var showNormalHandle = hasMergedCells ? /*#__PURE__*/React.createElement(DragHandleDisabledIcon, null) : /*#__PURE__*/React.createElement(DragHandleIcon, null);
+  var isDragPossible = canDrag && !hasMergedCells;
+  var showNormalHandle = !isDragPossible ? /*#__PURE__*/React.createElement(DragHandleDisabledIcon, null) : /*#__PURE__*/React.createElement(DragHandleIcon, null);
 
   // hoverred handle or open drag menu
   if (isHandleHovered || isDragMenuOpenOnCurrentRowOrColumn) {

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

@@ -25,7 +25,9 @@ export var DragHandle = function DragHandle(_ref) {
     onMouseOut = _ref.onMouseOut,
     _onMouseUp = _ref.onMouseUp,
     onClick = _ref.onClick,
-    editorView = _ref.editorView;
+    editorView = _ref.editorView,
+    _ref$canDrag = _ref.canDrag,
+    _canDrag = _ref$canDrag === void 0 ? false : _ref$canDrag;
   var dragHandleDivRef = useRef(null);
   var _useState = useState(null),
     _useState2 = _slicedToArray(_useState, 2),
@@ -48,6 +50,7 @@ export var DragHandle = function DragHandle(_ref) {
     return direction === 'row' ? hasMergedCellsInRow(indexes[0])(selection) : hasMergedCellsInColumn(indexes[0])(selection);
   }, [indexes, direction, selection]);
   var handleIconProps = {
+    canDrag: _canDrag,
     hasMergedCells: hasMergedCells,
     direction: direction,
     isDragMenuOpen: isDragMenuOpen,
@@ -63,7 +66,7 @@ export var DragHandle = function DragHandle(_ref) {
       return draggable({
         element: dragHandleDivRefCurrent,
         canDrag: function canDrag() {
-          return !hasMergedCells;
+          return _canDrag && !hasMergedCells;
         },
         getInitialData: function getInitialData() {
           return {
@@ -111,9 +114,9 @@ export var DragHandle = function DragHandle(_ref) {
         }
       });
     }
-  }, [tableLocalId, direction, indexes, editorView.state.selection, hasMergedCells]);
+  }, [tableLocalId, direction, indexes, editorView.state.selection, hasMergedCells, _canDrag]);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("button", {
-    className: classnames(ClassName.DRAG_HANDLE_BUTTON_CONTAINER, appearance, _defineProperty({}, ClassName.DRAG_HANDLE_DISABLED, hasMergedCells)),
+    className: classnames(ClassName.DRAG_HANDLE_BUTTON_CONTAINER, appearance, _defineProperty({}, ClassName.DRAG_HANDLE_DISABLED, !_canDrag || hasMergedCells)),
     ref: dragHandleDivRef,
     style: {
       transform: direction === 'column' ? 'none' : 'rotate(90deg)'