@atlaskit/editor-plugin-table 5.4.19 → 5.4.21

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/ui/common-styles.js

@@ -614,10 +614,9 @@ export const tableStyles = props => {
       z-index: ${akEditorUnitZIndex};
 
       .${ClassName.DRAG_ROW_FLOATING_INSERT_DOT_WRAPPER} {
+        position: relative;
         align-self: end;
-        position: absolute;
         height: 100%;
-        width: 24px;
       }
 
       .${ClassName.DRAG_ROW_FLOATING_INSERT_DOT} {

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)'

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

@@ -67,7 +67,8 @@ export var DragMenu = function DragMenu(_ref) {
     boundariesElement = _ref.boundariesElement,
     scrollableElement = _ref.scrollableElement,
     targetCellPosition = _ref.targetCellPosition,
-    getEditorContainerWidth = _ref.getEditorContainerWidth;
+    getEditorContainerWidth = _ref.getEditorContainerWidth,
+    canDrag = _ref.canDrag;
   var tableMap = tableNode ? TableMap.get(tableNode) : undefined;
   var state = editorView.state,
     dispatch = editorView.dispatch;
@@ -75,7 +76,7 @@ export var DragMenu = function DragMenu(_ref) {
   var selectionRect = isSelectionType(selection, 'cell') ? getSelectionRect(selection) : findCellRectClosestToPos(selection.$from);
   var hasMergedCells = direction === 'row' ? hasMergedCellsInRow : hasMergedCellsInColumn;
   var shouldMoveDisabled = index !== undefined && hasMergedCells(index)(selection);
-  var dragMenuConfig = getDragMenuConfig(direction, getEditorContainerWidth, shouldMoveDisabled, tableMap, index, targetCellPosition, selectionRect);
+  var dragMenuConfig = getDragMenuConfig(direction, getEditorContainerWidth, !!canDrag && !shouldMoveDisabled, tableMap, index, targetCellPosition, selectionRect);
   var _convertToDropdownIte = convertToDropdownItems(dragMenuConfig),
     menuItems = _convertToDropdownIte.menuItems,
     menuCallback = _convertToDropdownIte.menuCallback;

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

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

package/dist/esm/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';
@@ -29,7 +30,8 @@ export var ColumnControls = function ColumnControls(_ref) {
     rowHeights = _ref.rowHeights,
     colWidths = _ref.colWidths,
     hasHeaderColumn = _ref.hasHeaderColumn,
-    isTableHovered = _ref.isTableHovered;
+    isTableHovered = _ref.isTableHovered,
+    canDrag = _ref.canDrag;
   var widths = (_colWidths$map$join = colWidths === null || colWidths === void 0 ? void 0 : colWidths.map(function (width) {
     return width ? "".concat(width - 1, "px") : '0px';
   }).join(' ')) !== null && _colWidths$map$join !== void 0 ? _colWidths$map$join : '0px';
@@ -139,14 +141,15 @@ export var ColumnControls = function ColumnControls(_ref) {
     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/esm/plugins/table/ui/TableFloatingColumnControls/index.js

@@ -19,7 +19,8 @@ export var TableFloatingColumnControls = function TableFloatingColumnControls(_r
     stickyHeader = _ref.stickyHeader,
     selection = _ref.selection,
     isInDanger = _ref.isInDanger,
-    isTableHovered = _ref.isTableHovered;
+    isTableHovered = _ref.isTableHovered,
+    canDrag = _ref.canDrag;
   var _useState = useState({
       width: 0,
       height: 0
@@ -110,7 +111,8 @@ export var TableFloatingColumnControls = function TableFloatingColumnControls(_r
     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/esm/plugins/table/ui/TableFloatingControls/RowControls/DragControls.js

@@ -33,6 +33,7 @@ var DragControlsComponent = function DragControlsComponent(_ref) {
     isInDanger = _ref.isInDanger,
     isResizing = _ref.isResizing,
     isTableHovered = _ref.isTableHovered,
+    canDrag = _ref.canDrag,
     hoverRows = _ref.hoverRows,
     selectRow = _ref.selectRow,
     updateCellHoverLocation = _ref.updateCellHoverLocation;
@@ -113,7 +114,7 @@ var DragControlsComponent = function DragControlsComponent(_ref) {
     className: ClassName.DRAG_ROW_CONTROLS,
     style: {
       gridTemplateRows: heights,
-      gridTemplateColumns: isDragging ? "".concat(dropTargetExtendedWidth, "px 28px ").concat(tableWidth, "px") : 'none',
+      gridTemplateColumns: isDragging ? "".concat(dropTargetExtendedWidth, "px 14px ").concat(tableWidth, "px") : '0px 14px 0px',
       left: isDragging ? "-".concat(dropTargetExtendedWidth + 2, "px") : "-2px"
     },
     onMouseMove: handleMouseMove,
@@ -132,11 +133,11 @@ var DragControlsComponent = function DragControlsComponent(_ref) {
       "data-end-index": endIndex,
       className: ClassName.DRAG_ROW_FLOATING_INSERT_DOT_WRAPPER,
       contentEditable: false,
-      key: index
+      key: "insert-dot-".concat(index)
     }, /*#__PURE__*/React.createElement("div", {
       className: ClassName.DRAG_ROW_FLOATING_INSERT_DOT
     })), isDragging && /*#__PURE__*/React.createElement(RowDropTarget, {
-      key: index,
+      key: "drop-target-".concat(index),
       index: index,
       localId: currentNodeLocalId,
       style: {
@@ -152,10 +153,10 @@ var DragControlsComponent = function DragControlsComponent(_ref) {
     style: {
       gridRow: gridRowPosition,
       gridColumn: '2',
-      display: 'flex',
-      height: '100%',
-      alignItems: 'center',
-      justifyContent: 'center'
+      // DragHandle uses `transform: rotate(90)`, which doesn't affect its parent (this div) causing the width of this element to be the true height of the drag handle
+      width: '9px',
+      position: 'relative',
+      right: '-0.5px'
     },
     "data-testid": "table-floating-row-drag-handle"
   }, /*#__PURE__*/React.createElement(DragHandle, {
@@ -168,7 +169,8 @@ var DragControlsComponent = function DragControlsComponent(_ref) {
     onMouseOver: handleMouseOver,
     onMouseOut: handleMouseOut,
     onMouseUp: onMouseUp,
-    editorView: editorView
+    editorView: editorView,
+    canDrag: canDrag
   })));
 };
 export var DragControls = injectIntl(DragControlsComponent);

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

@@ -126,8 +126,9 @@ var TableFloatingControls = /*#__PURE__*/function (_Component) {
         headerRowHeight = _this$props2.headerRowHeight,
         stickyHeader = _this$props2.stickyHeader,
         hoveredCell = _this$props2.hoveredCell,
-        isTableHovered = _this$props2.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;
+        isTableHovered = _this$props2.isTableHovered,
+        canDrag = _this$props2.canDrag;
+      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;
     }
   }, {
     key: "componentWillUnmount",
@@ -154,7 +155,8 @@ var TableFloatingControls = /*#__PURE__*/function (_Component) {
         stickyHeader = _this$props3.stickyHeader,
         isDragAndDropEnabled = _this$props3.isDragAndDropEnabled,
         hoveredCell = _this$props3.hoveredCell,
-        isTableHovered = _this$props3.isTableHovered;
+        isTableHovered = _this$props3.isTableHovered,
+        canDrag = _this$props3.canDrag;
       if (!tableRef) {
         return null;
       }
@@ -196,7 +198,8 @@ var TableFloatingControls = /*#__PURE__*/function (_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,