@atlaskit/editor-plugin-table 5.4.19 → 5.4.21

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/editor-plugin-table
 
+## 5.4.21
+
+### Patch Changes
+
+- [#59392](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/59392) [`d0da8be30b97`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/d0da8be30b97) - Reduce width of drag handle to ensure it doesn't overlap editable space
+
+## 5.4.20
+
+### Patch Changes
+
+- [#59135](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/59135) [`0f0de3fcf207`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/0f0de3fcf207) - Drag and drop inside tables will now be disabled if the table nodeSize exceeds 20000
+
 ## 5.4.19
 
 ### Patch Changes

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

@@ -352,6 +352,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.default.createElement(_FloatingDeleteButton.default, {
             editorView: editorView,

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

@@ -518,7 +518,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;
@@ -545,6 +546,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         isNumberColumnEnabled: node.attrs.isNumberColumnEnabled,
         isHeaderRowEnabled: isHeaderRowEnabled,
         isDragAndDropEnabled: isDragAndDropEnabled,
+        canDrag: canDrag,
         ordering: ordering,
         isHeaderColumnEnabled: isHeaderColumnEnabled,
         hasHeaderRow: hasHeaderRow
@@ -571,7 +573,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 ? -_editorSharedStyles.akEditorTableToolbarSize : _styles.tableMarginSides;
       var shadowStyle = (0, _memoizeOne.default)(function (visible) {

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

@@ -23,6 +23,7 @@ var _model = require("@atlaskit/editor-prosemirror/model");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _tableMap = require("@atlaskit/editor-tables/table-map");
 var _createPluginConfig = require("../create-plugin-config");
+var _dragAndDrop = require("../pm-plugins/drag-and-drop");
 var _pluginFactory = require("../pm-plugins/plugin-factory");
 var _pluginKey = require("../pm-plugins/plugin-key");
 var _tableResizing = require("../pm-plugins/table-resizing");
@@ -142,14 +143,17 @@ var TableView = exports.default = /*#__PURE__*/function (_ReactNodeView) {
           tableResizingPluginState: _tableResizing.pluginKey,
           tableWidthPluginState: _tableWidth.pluginKey,
           widthPlugin: fakePluginKey,
-          mediaState: fakeMediaPluginKey
+          mediaState: fakeMediaPluginKey,
+          tableDragAndDropState: _dragAndDrop.pluginKey
         },
         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);
@@ -177,6 +181,7 @@ var TableView = exports.default = /*#__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/cjs/plugins/table/pm-plugins/drag-and-drop/actions.js

@@ -7,7 +7,8 @@ exports.DragAndDropActionType = void 0;
 var DragAndDropActionType = exports.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/cjs/plugins/table/pm-plugins/drag-and-drop/consts.js

@@ -3,9 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.DropTargetType = void 0;
+exports.DropTargetType = exports.DRAGGABLE_TABLE_NODE_SIZE_LIMIT = void 0;
 var DropTargetType = exports.DropTargetType = {
   NONE: 'none',
   ROW: 'row',
   COLUMN: 'column'
-};
+};
+var DRAGGABLE_TABLE_NODE_SIZE_LIMIT = exports.DRAGGABLE_TABLE_NODE_SIZE_LIMIT = 20000;

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

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.createPlugin = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
 var _view = require("@atlaskit/editor-prosemirror/view");
 var _cellSelection = require("@atlaskit/editor-tables/cell-selection");
@@ -21,6 +22,8 @@ var _consts = require("./consts");
 var _pluginFactory2 = require("./plugin-factory");
 var _pluginKey2 = require("./plugin-key");
 var _monitor = require("./utils/monitor");
+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) { (0, _defineProperty2.default)(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; }
 var createPlugin = exports.createPlugin = function createPlugin(dispatch, eventDispatcher) {
   return new _safePlugin.SafePlugin({
     state: (0, _pluginFactory2.createPluginState)(dispatch, function (state) {
@@ -30,18 +33,24 @@ var createPlugin = exports.createPlugin = function createPlugin(dispatch, eventD
         dropTargetIndex: 0,
         isDragMenuOpen: false,
         dragMenuIndex: 0,
-        isDragging: false
+        isDragging: false,
+        canDrag: false
       };
     }),
     key: _pluginKey2.pluginKey,
     appendTransaction: function appendTransaction(transactions, oldState, newState) {
       var _getTablePluginState = (0, _pluginFactory.getPluginState)(oldState),
-        oldTargetCellPosition = _getTablePluginState.targetCellPosition;
+        oldTargetCellPosition = _getTablePluginState.targetCellPosition,
+        oldTableNode = _getTablePluginState.tableNode;
       var _getTablePluginState2 = (0, _pluginFactory.getPluginState)(newState),
-        newTargetCellPosition = _getTablePluginState2.targetCellPosition;
+        newTargetCellPosition = _getTablePluginState2.targetCellPosition,
+        newTableNode = _getTablePluginState2.tableNode;
       var _getPluginState = (0, _pluginFactory2.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.
@@ -49,14 +58,6 @@ var createPlugin = exports.createPlugin = function createPlugin(dispatch, eventD
       // 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: _actions.DragAndDropActionType.TOGGLE_DRAG_MENU,
-            data: {
-              isDragMenuOpen: false,
-              direction: undefined
-            }
-          };
           if (newTargetCellPosition !== undefined) {
             var cells = (0, _utils.getCellsInRow)(dragMenuIndex)(tr.selection);
             // ED-20673 check if it is a cell selection,
@@ -64,13 +65,36 @@ var createPlugin = exports.createPlugin = function createPlugin(dispatch, eventD
             // should not close the drag menu.
             var isCellSelection = tr.selection instanceof _cellSelection.CellSelection;
             if (cells && cells.length && cells[0].node !== tr.doc.nodeAt(newTargetCellPosition) && !isCellSelection) {
-              return tr.setMeta(_pluginKey2.pluginKey, action);
+              stateChanges.push({
+                isDragMenuOpen: false,
+                dragMenuDirection: undefined
+              });
             } // else NOP
           } else {
-            return tr.setMeta(_pluginKey2.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) < _consts.DRAGGABLE_TABLE_NODE_SIZE_LIMIT;
+        if (canDrag !== nextCanDrag) {
+          stateChanges.push({
+            canDrag: nextCanDrag
+          });
+        }
+      }
+      if (stateChanges.length) {
+        return tr.setMeta(_pluginKey2.pluginKey, {
+          type: _actions.DragAndDropActionType.UPDATE,
+          data: _objectSpread({}, stateChanges.reduce(function (state, cur) {
+            return _objectSpread(_objectSpread({}, state), cur);
+          }, {}))
+        }).setMeta('addToHistory', false);
+      }
     },
     view: function view(editorView) {
       return {

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

@@ -32,6 +32,8 @@ var _default = exports.default = function _default(pluginState, action) {
         dragMenuDirection: action.data.direction,
         dragMenuIndex: action.data.index
       });
+    case _actions.DragAndDropActionType.UPDATE:
+      return _objectSpread(_objectSpread({}, pluginState), action.data);
     default:
       return pluginState;
   }

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

@@ -8,7 +8,8 @@ exports.HandleIconComponent = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _icons = require("../icons");
 var HandleIconComponent = exports.HandleIconComponent = function HandleIconComponent(props) {
-  var direction = props.direction,
+  var canDrag = props.canDrag,
+    direction = props.direction,
     isDragMenuOpen = props.isDragMenuOpen,
     isRowHandleHovered = props.isRowHandleHovered,
     isColumnHandleHovered = props.isColumnHandleHovered,
@@ -19,7 +20,8 @@ var HandleIconComponent = exports.HandleIconComponent = function HandleIconCompo
   var isHandleHovered = isRowHandleHovered || isColumnHandleHovered;
   var isCurrentRowOrColumnSelected = isCurrentRowSelected || isCurrentColumnSelected;
   var isDragMenuOpenOnCurrentRowOrColumn = isDragMenuOpen && dragMenuDirection === direction && isCurrentRowOrColumnSelected;
-  var showNormalHandle = hasMergedCells ? /*#__PURE__*/_react.default.createElement(_icons.DragHandleDisabledIcon, null) : /*#__PURE__*/_react.default.createElement(_icons.DragHandleIcon, null);
+  var isDragPossible = canDrag && !hasMergedCells;
+  var showNormalHandle = !isDragPossible ? /*#__PURE__*/_react.default.createElement(_icons.DragHandleDisabledIcon, null) : /*#__PURE__*/_react.default.createElement(_icons.DragHandleIcon, null);
 
   // hoverred handle or open drag menu
   if (isHandleHovered || isDragMenuOpenOnCurrentRowOrColumn) {

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

@@ -35,7 +35,9 @@ var DragHandle = exports.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 = (0, _react.useRef)(null);
   var _useState = (0, _react.useState)(null),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -58,6 +60,7 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
     return direction === 'row' ? (0, _utils2.hasMergedCellsInRow)(indexes[0])(selection) : (0, _utils2.hasMergedCellsInColumn)(indexes[0])(selection);
   }, [indexes, direction, selection]);
   var handleIconProps = {
+    canDrag: _canDrag,
     hasMergedCells: hasMergedCells,
     direction: direction,
     isDragMenuOpen: isDragMenuOpen,
@@ -73,7 +76,7 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
       return (0, _element.draggable)({
         element: dragHandleDivRefCurrent,
         canDrag: function canDrag() {
-          return !hasMergedCells;
+          return _canDrag && !hasMergedCells;
         },
         getInitialData: function getInitialData() {
           return {
@@ -121,9 +124,9 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
         }
       });
     }
-  }, [tableLocalId, direction, indexes, editorView.state.selection, hasMergedCells]);
+  }, [tableLocalId, direction, indexes, editorView.state.selection, hasMergedCells, _canDrag]);
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("button", {
-    className: (0, _classnames2.default)(_types.TableCssClassName.DRAG_HANDLE_BUTTON_CONTAINER, appearance, (0, _defineProperty2.default)({}, _types.TableCssClassName.DRAG_HANDLE_DISABLED, hasMergedCells)),
+    className: (0, _classnames2.default)(_types.TableCssClassName.DRAG_HANDLE_BUTTON_CONTAINER, appearance, (0, _defineProperty2.default)({}, _types.TableCssClassName.DRAG_HANDLE_DISABLED, !_canDrag || hasMergedCells)),
     ref: dragHandleDivRef,
     style: {
       transform: direction === 'column' ? 'none' : 'rotate(90deg)'

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

@@ -75,7 +75,8 @@ var DragMenu = exports.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.TableMap.get(tableNode) : undefined;
   var state = editorView.state,
     dispatch = editorView.dispatch;
@@ -83,7 +84,7 @@ var DragMenu = exports.DragMenu = function DragMenu(_ref) {
   var selectionRect = (0, _utils.isSelectionType)(selection, 'cell') ? (0, _utils.getSelectionRect)(selection) : (0, _utils.findCellRectClosestToPos)(selection.$from);
   var hasMergedCells = direction === 'row' ? _utils2.hasMergedCellsInRow : _utils2.hasMergedCellsInColumn;
   var shouldMoveDisabled = index !== undefined && hasMergedCells(index)(selection);
-  var dragMenuConfig = (0, _dragMenu.getDragMenuConfig)(direction, getEditorContainerWidth, shouldMoveDisabled, tableMap, index, targetCellPosition, selectionRect);
+  var dragMenuConfig = (0, _dragMenu.getDragMenuConfig)(direction, getEditorContainerWidth, !!canDrag && !shouldMoveDisabled, tableMap, index, targetCellPosition, selectionRect);
   var _convertToDropdownIte = convertToDropdownItems(dragMenuConfig),
     menuItems = _convertToDropdownIte.menuItems,
     menuCallback = _convertToDropdownIte.menuCallback;

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

@@ -23,7 +23,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;
   }
@@ -58,7 +59,8 @@ var FloatingDragMenu = function FloatingDragMenu(_ref) {
     direction: direction,
     index: index,
     targetCellPosition: targetCellPosition,
-    getEditorContainerWidth: getEditorContainerWidth
+    getEditorContainerWidth: getEditorContainerWidth,
+    canDrag: canDrag
   }));
 };
 FloatingDragMenu.displayName = 'FloatingDragMenu';

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

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.ColumnControls = void 0;
 var _react = _interopRequireWildcard(require("react"));
+var _styles = require("@atlaskit/editor-common/styles");
 var _editorTables = require("@atlaskit/editor-tables");
 var _utils = require("@atlaskit/editor-tables/utils");
 var _commands = require("../../../commands");
@@ -38,7 +39,8 @@ var ColumnControls = exports.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';
@@ -148,14 +150,15 @@ var ColumnControls = exports.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 : _styles.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
   }))));
 };
 var _default = exports.default = ColumnControls;

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

@@ -29,7 +29,8 @@ var TableFloatingColumnControls = exports.TableFloatingColumnControls = function
     stickyHeader = _ref.stickyHeader,
     selection = _ref.selection,
     isInDanger = _ref.isInDanger,
-    isTableHovered = _ref.isTableHovered;
+    isTableHovered = _ref.isTableHovered,
+    canDrag = _ref.canDrag;
   var _useState = (0, _react.useState)({
       width: 0,
       height: 0
@@ -120,7 +121,8 @@ var TableFloatingColumnControls = exports.TableFloatingColumnControls = function
     isInDanger: isInDanger,
     rowHeights: rowHeights,
     colWidths: colWidths,
-    hasHeaderColumn: hasHeaderColumn
+    hasHeaderColumn: hasHeaderColumn,
+    canDrag: canDrag
   }), hasDropTargets && /*#__PURE__*/_react.default.createElement(_ColumnDropTargets.ColumnDropTargets, {
     tableRef: tableRef,
     stickyTop: tableActive ? stickyTop : undefined,

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

@@ -43,6 +43,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;
@@ -123,7 +124,7 @@ var DragControlsComponent = function DragControlsComponent(_ref) {
     className: _types.TableCssClassName.DRAG_ROW_CONTROLS,
     style: {
       gridTemplateRows: heights,
-      gridTemplateColumns: isDragging ? "".concat(_consts.dropTargetExtendedWidth, "px 28px ").concat(tableWidth, "px") : 'none',
+      gridTemplateColumns: isDragging ? "".concat(_consts.dropTargetExtendedWidth, "px 14px ").concat(tableWidth, "px") : '0px 14px 0px',
       left: isDragging ? "-".concat(_consts.dropTargetExtendedWidth + 2, "px") : "-2px"
     },
     onMouseMove: handleMouseMove,
@@ -142,11 +143,11 @@ var DragControlsComponent = function DragControlsComponent(_ref) {
       "data-end-index": endIndex,
       className: _types.TableCssClassName.DRAG_ROW_FLOATING_INSERT_DOT_WRAPPER,
       contentEditable: false,
-      key: index
+      key: "insert-dot-".concat(index)
     }, /*#__PURE__*/_react.default.createElement("div", {
       className: _types.TableCssClassName.DRAG_ROW_FLOATING_INSERT_DOT
     })), isDragging && /*#__PURE__*/_react.default.createElement(_RowDropTarget.default, {
-      key: index,
+      key: "drop-target-".concat(index),
       index: index,
       localId: currentNodeLocalId,
       style: {
@@ -162,10 +163,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.default.createElement(_DragHandle.DragHandle, {
@@ -178,7 +179,8 @@ var DragControlsComponent = function DragControlsComponent(_ref) {
     onMouseOver: handleMouseOver,
     onMouseOut: handleMouseOut,
     onMouseUp: onMouseUp,
-    editorView: editorView
+    editorView: editorView,
+    canDrag: canDrag
   })));
 };
 var DragControls = exports.DragControls = (0, _reactIntlNext.injectIntl)(DragControlsComponent);

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

@@ -136,8 +136,9 @@ var TableFloatingControls = exports.default = /*#__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 || (0, _utils2.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 || (0, _utils2.isSelectionUpdated)(selection, nextProps.selection) || headerRowHeight !== nextProps.headerRowHeight || stickyHeader !== nextProps.stickyHeader || hoveredCell !== nextProps.hoveredCell || isTableHovered !== nextProps.isTableHovered || canDrag !== nextProps.canDrag;
     }
   }, {
     key: "componentWillUnmount",
@@ -164,7 +165,8 @@ var TableFloatingControls = exports.default = /*#__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;
       }
@@ -206,7 +208,8 @@ var TableFloatingControls = exports.default = /*#__PURE__*/function (_Component)
         tableWidth: this.state.tableWrapperWidth,
         hoverRows: this.hoverRows,
         selectRow: this.selectRow,
-        updateCellHoverLocation: this.updateCellHoverLocation
+        updateCellHoverLocation: this.updateCellHoverLocation,
+        canDrag: canDrag
       })) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_CornerControls.CornerControls, {
         editorView: editorView,
         tableRef: tableRef,