@atlaskit/editor-plugin-table 5.3.27 → 5.3.28

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/editor-plugin-table
 
+## 5.3.28
+
+### Patch Changes
+
+- [#43155](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/43155) [`9c7cabf1b12`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9c7cabf1b12) - ED-20671:Fixed drag handle not visible when drag menu is open
+
 ## 5.3.27
 
 ### Patch Changes

package/dist/cjs/plugins/table/event-handlers.js

@@ -15,8 +15,9 @@ var _cellSelection = require("@atlaskit/editor-tables/cell-selection");
 var _tableMap = require("@atlaskit/editor-tables/table-map");
 var _utils2 = require("@atlaskit/editor-tables/utils");
 var _commands = require("./commands");
-var _pluginFactory = require("./pm-plugins/plugin-factory");
-var _pluginFactory2 = require("./pm-plugins/table-resizing/plugin-factory");
+var _pluginFactory = require("./pm-plugins/drag-and-drop/plugin-factory");
+var _pluginFactory2 = require("./pm-plugins/plugin-factory");
+var _pluginFactory3 = require("./pm-plugins/table-resizing/plugin-factory");
 var _transforms = require("./transforms");
 var _types = require("./types");
 var _utils3 = require("./utils");
@@ -104,7 +105,7 @@ var handleMouseOver = exports.handleMouseOver = function handleMouseOver(view, m
   var state = view.state,
     dispatch = view.dispatch;
   var target = mouseEvent.target;
-  var _getPluginState = (0, _pluginFactory.getPluginState)(state),
+  var _getPluginState = (0, _pluginFactory2.getPluginState)(state),
     insertColumnButtonIndex = _getPluginState.insertColumnButtonIndex,
     insertRowButtonIndex = _getPluginState.insertRowButtonIndex;
   if ((0, _utils3.isInsertRowButton)(target)) {
@@ -174,7 +175,7 @@ var handleMouseLeave = exports.handleMouseLeave = function handleMouseLeave(view
   }
   var state = view.state,
     dispatch = view.dispatch;
-  var _getPluginState2 = (0, _pluginFactory.getPluginState)(state),
+  var _getPluginState2 = (0, _pluginFactory2.getPluginState)(state),
     insertColumnButtonIndex = _getPluginState2.insertColumnButtonIndex,
     insertRowButtonIndex = _getPluginState2.insertRowButtonIndex,
     isDragAndDropEnabled = _getPluginState2.isDragAndDropEnabled;
@@ -183,7 +184,10 @@ var handleMouseLeave = exports.handleMouseLeave = function handleMouseLeave(view
     return true;
   }
   if (isDragAndDropEnabled) {
-    (0, _commands.hoverCell)()(state, dispatch);
+    var _getDragDropPluginSta = (0, _pluginFactory.getPluginState)(state),
+      isDragMenuOpen = _getDragDropPluginSta.isDragMenuOpen;
+    // Only set hoveredCell colIndex and rowIndex to undefined if the drag menu is not open
+    !isDragMenuOpen && (0, _commands.hoverCell)()(state, dispatch);
   }
   if ((typeof insertColumnButtonIndex !== 'undefined' || typeof insertRowButtonIndex !== 'undefined') && (0, _commands.hideInsertColumnOrRowButton)()(state, dispatch)) {
     return true;
@@ -198,7 +202,7 @@ var handleMouseMove = exports.handleMouseMove = function handleMouseMove(view, e
   if ((0, _utils3.isColumnControlsDecorations)(element) || (0, _utils3.isDragColumnFloatingInsertDot)(element)) {
     var state = view.state,
       dispatch = view.dispatch;
-    var _getPluginState3 = (0, _pluginFactory.getPluginState)(state),
+    var _getPluginState3 = (0, _pluginFactory2.getPluginState)(state),
       insertColumnButtonIndex = _getPluginState3.insertColumnButtonIndex,
       isDragAndDropEnabled = _getPluginState3.isDragAndDropEnabled;
     var _getColumnOrRowIndex9 = (0, _utils3.getColumnOrRowIndex)(element),
@@ -213,7 +217,7 @@ var handleMouseMove = exports.handleMouseMove = function handleMouseMove(view, e
   if ((0, _utils3.isRowControlsButton)(element) || (0, _utils3.isDragRowFloatingInsertDot)(element)) {
     var _state3 = view.state,
       _dispatch4 = view.dispatch;
-    var _getPluginState4 = (0, _pluginFactory.getPluginState)(_state3),
+    var _getPluginState4 = (0, _pluginFactory2.getPluginState)(_state3),
       insertRowButtonIndex = _getPluginState4.insertRowButtonIndex;
     var _getColumnOrRowIndex11 = (0, _utils3.getColumnOrRowIndex)(element),
       _getColumnOrRowIndex12 = (0, _slicedToArray2.default)(_getColumnOrRowIndex11, 2),
@@ -229,7 +233,7 @@ var handleMouseMove = exports.handleMouseMove = function handleMouseMove(view, e
     if (_positionColumn !== null) {
       var _state4 = view.state,
         _dispatch5 = view.dispatch;
-      var _getPluginState5 = (0, _pluginFactory.getPluginState)(_state4),
+      var _getPluginState5 = (0, _pluginFactory2.getPluginState)(_state4),
         resizeHandleColumnIndex = _getPluginState5.resizeHandleColumnIndex,
         resizeHandleRowIndex = _getPluginState5.resizeHandleRowIndex;
       var tableCell = (0, _utils.closestElement)(element, 'td, th');
@@ -306,7 +310,7 @@ var handleCut = exports.handleCut = function handleCut(oldTr, oldState, newState
           if (isTableSelected) {
             tr = (0, _utils2.removeTable)(tr);
           } else if (tr.selection.isRowSelection()) {
-            var _getPluginState6 = (0, _pluginFactory.getPluginState)(newState),
+            var _getPluginState6 = (0, _pluginFactory2.getPluginState)(newState),
               isHeaderRowRequired = _getPluginState6.pluginConfig.isHeaderRowRequired;
             tr = (0, _transforms.deleteRows)(rect, isHeaderRowRequired)(tr);
           } else if (tr.selection.isColSelection()) {
@@ -321,7 +325,7 @@ var handleCut = exports.handleCut = function handleCut(oldTr, oldState, newState
 var whenTableInFocus = exports.whenTableInFocus = function whenTableInFocus(eventHandler, elementContentRects) {
   return function (view, mouseEvent) {
     var _getPluginState7, _getResizePluginState;
-    if (!((_getPluginState7 = (0, _pluginFactory.getPluginState)(view.state)) !== null && _getPluginState7 !== void 0 && _getPluginState7.tableNode) || !!((_getResizePluginState = (0, _pluginFactory2.getPluginState)(view.state)) !== null && _getResizePluginState !== void 0 && _getResizePluginState.dragging)) {
+    if (!((_getPluginState7 = (0, _pluginFactory2.getPluginState)(view.state)) !== null && _getPluginState7 !== void 0 && _getPluginState7.tableNode) || !!((_getResizePluginState = (0, _pluginFactory3.getPluginState)(view.state)) !== null && _getResizePluginState !== void 0 && _getResizePluginState.dragging)) {
       return false;
     }
     return eventHandler(view, mouseEvent, elementContentRects);
@@ -330,14 +334,14 @@ var whenTableInFocus = exports.whenTableInFocus = function whenTableInFocus(even
 var trackCellLocation = function trackCellLocation(view, mouseEvent) {
   var target = mouseEvent.target;
   var maybeTableCell = (0, _utils.isElementInTableCell)(target);
-  var tableRef = (0, _pluginFactory.getPluginState)(view.state).tableRef;
+  var tableRef = (0, _pluginFactory2.getPluginState)(view.state).tableRef;
   if (!maybeTableCell || !tableRef) {
     return;
   }
   var colIndex = maybeTableCell.cellIndex;
   var rowElement = (0, _utils.closestElement)(target, 'tr');
   var rowIndex = rowElement && rowElement.rowIndex;
-  var _getPluginState8 = (0, _pluginFactory.getPluginState)(view.state),
+  var _getPluginState8 = (0, _pluginFactory2.getPluginState)(view.state),
     hoveredCell = _getPluginState8.hoveredCell;
   var colHeight = tableRef.offsetHeight;
   var colWidth = maybeTableCell.offsetWidth;
@@ -347,7 +351,7 @@ var trackCellLocation = function trackCellLocation(view, mouseEvent) {
 };
 var withCellTracking = exports.withCellTracking = function withCellTracking(eventHandler, elementContentRects) {
   return function (view, mouseEvent) {
-    if ((0, _pluginFactory.getPluginState)(view.state).isDragAndDropEnabled) {
+    if ((0, _pluginFactory2.getPluginState)(view.state).isDragAndDropEnabled) {
       trackCellLocation(view, mouseEvent);
     }
     return eventHandler(view, mouseEvent, elementContentRects);

package/dist/es2019/plugins/table/event-handlers.js

@@ -5,6 +5,7 @@ import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { cellAround, findCellRectClosestToPos, findTable, getSelectionRect, removeTable } from '@atlaskit/editor-tables/utils';
 import { addResizeHandleDecorations, clearHoverSelection, hideInsertColumnOrRowButton, hideResizeHandleLine, hoverCell, hoverColumns, selectColumn, setEditorFocus, showInsertColumnButton, showInsertRowButton, showResizeHandleLine } from './commands';
+import { getPluginState as getDragDropPluginState } from './pm-plugins/drag-and-drop/plugin-factory';
 import { getPluginState } from './pm-plugins/plugin-factory';
 import { getPluginState as getResizePluginState } from './pm-plugins/table-resizing/plugin-factory';
 import { deleteColumns, deleteRows } from './transforms';
@@ -180,7 +181,11 @@ export const handleMouseLeave = (view, event) => {
     return true;
   }
   if (isDragAndDropEnabled) {
-    hoverCell()(state, dispatch);
+    const {
+      isDragMenuOpen
+    } = getDragDropPluginState(state);
+    // Only set hoveredCell colIndex and rowIndex to undefined if the drag menu is not open
+    !isDragMenuOpen && hoverCell()(state, dispatch);
   }
   if ((typeof insertColumnButtonIndex !== 'undefined' || typeof insertRowButtonIndex !== 'undefined') && hideInsertColumnOrRowButton()(state, dispatch)) {
     return true;

package/dist/esm/plugins/table/event-handlers.js

@@ -6,6 +6,7 @@ import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { cellAround, findCellRectClosestToPos, findTable, getSelectionRect, removeTable } from '@atlaskit/editor-tables/utils';
 import { addResizeHandleDecorations, clearHoverSelection, hideInsertColumnOrRowButton, hideResizeHandleLine, hoverCell, hoverColumns, selectColumn, setEditorFocus, showInsertColumnButton, showInsertRowButton, showResizeHandleLine } from './commands';
+import { getPluginState as getDragDropPluginState } from './pm-plugins/drag-and-drop/plugin-factory';
 import { getPluginState } from './pm-plugins/plugin-factory';
 import { getPluginState as getResizePluginState } from './pm-plugins/table-resizing/plugin-factory';
 import { deleteColumns, deleteRows } from './transforms';
@@ -174,7 +175,10 @@ export var handleMouseLeave = function handleMouseLeave(view, event) {
     return true;
   }
   if (isDragAndDropEnabled) {
-    hoverCell()(state, dispatch);
+    var _getDragDropPluginSta = getDragDropPluginState(state),
+      isDragMenuOpen = _getDragDropPluginSta.isDragMenuOpen;
+    // Only set hoveredCell colIndex and rowIndex to undefined if the drag menu is not open
+    !isDragMenuOpen && hoverCell()(state, dispatch);
   }
   if ((typeof insertColumnButtonIndex !== 'undefined' || typeof insertRowButtonIndex !== 'undefined') && hideInsertColumnOrRowButton()(state, dispatch)) {
     return true;

package/package.json

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

package/src/plugins/table/event-handlers.ts

@@ -41,6 +41,7 @@ import {
   showInsertRowButton,
   showResizeHandleLine,
 } from './commands';
+import { getPluginState as getDragDropPluginState } from './pm-plugins/drag-and-drop/plugin-factory';
 import { getPluginState } from './pm-plugins/plugin-factory';
 import { getPluginState as getResizePluginState } from './pm-plugins/table-resizing/plugin-factory';
 import { deleteColumns, deleteRows } from './transforms';
@@ -299,7 +300,9 @@ export const handleMouseLeave = (view: EditorView, event: Event): boolean => {
   }
 
   if (isDragAndDropEnabled) {
-    hoverCell()(state, dispatch);
+    const { isDragMenuOpen } = getDragDropPluginState(state);
+    // Only set hoveredCell colIndex and rowIndex to undefined if the drag menu is not open
+    !isDragMenuOpen && hoverCell()(state, dispatch);
   }
 
   if (