@atlaskit/editor-plugin-table 5.4.17 → 5.4.19

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

@@ -1,5 +1,3 @@
-/* eslint-disable @atlaskit/design-system/prefer-primitives */
-
 import React, { Fragment, useCallback, useEffect, useMemo, useState } from 'react';
 import { injectIntl } from 'react-intl-next';
 import { CellSelection } from '@atlaskit/editor-tables';
@@ -7,7 +5,6 @@ import { getSelectionRect } from '@atlaskit/editor-tables/utils';
 import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/adapter/element';
 import { clearHoverSelection } from '../../../commands';
 import { toggleDragMenu } from '../../../pm-plugins/drag-and-drop/commands';
-import { getPluginState as getDragDropPluginState } from '../../../pm-plugins/drag-and-drop/plugin-factory';
 import { getPluginState as getTablePluginState } from '../../../pm-plugins/plugin-factory';
 import { TableCssClassName as ClassName } from '../../../types';
 import { getRowHeights, getRowsParams, getSelectedRowIndexes } from '../../../utils';
@@ -77,6 +74,13 @@ const DragControlsComponent = ({
     toggleDragMenu(undefined, 'row', hoveredCell === null || hoveredCell === void 0 ? void 0 : hoveredCell.rowIndex)(editorView.state, editorView.dispatch);
   }, [editorView, hoveredCell === null || hoveredCell === void 0 ? void 0 : hoveredCell.rowIndex]);
   const rowIndex = hoveredCell === null || hoveredCell === void 0 ? void 0 : hoveredCell.rowIndex;
+  const gridRowPosition = useMemo(() => {
+    // if more than one row is selected, ensure the handle spans over the selected range
+    if (selectedRowIndexes.includes(rowIndex)) {
+      return `${selectedRowIndexes[0] + 1} / span ${selectedRowIndexes.length}`;
+    }
+    return `${rowIndex + 1} / span 1`;
+  }, [rowIndex, selectedRowIndexes]);
   const handleMouseOut = useCallback(() => {
     if (tableActive) {
       const {
@@ -105,63 +109,6 @@ const DragControlsComponent = ({
   const handleClick = useCallback(e => {
     selectRow(rowIndex, e === null || e === void 0 ? void 0 : e.shiftKey);
   }, [rowIndex, selectRow]);
-  const generateHandleByType = useCallback(type => {
-    if (!hoveredCell) {
-      return null;
-    }
-    const {
-      isDragMenuOpen,
-      dragMenuIndex,
-      dragMenuDirection
-    } = getDragDropPluginState(editorView.state);
-    const isHover = type === 'hover';
-    const isHoveredOnSelectedRow = isDragMenuOpen && dragMenuDirection === 'row' && dragMenuIndex === rowIndex;
-    const showCondition = isHover ? !isHoveredOnSelectedRow && !selectedRowIndexes.includes(rowIndex) && Number.isFinite(hoveredCell === null || hoveredCell === void 0 ? void 0 : hoveredCell.colIndex) : isDragMenuOpen && dragMenuDirection === 'row' && Number.isFinite(hoveredCell === null || hoveredCell === void 0 ? void 0 : hoveredCell.colIndex);
-    if (!showCondition) {
-      return null;
-    }
-    const gridRowPosition =
-    // if more than one row is selected, ensure the handle spans over the selected range
-    selectedRowIndexes.includes(rowIndex) ? `${selectedRowIndexes[0] + 1} / span ${selectedRowIndexes.length}` : `${rowIndex + 1} / span 1`;
-    const selectedRowPosition = `${dragMenuIndex + 1} / span ${selectedRowIndexes.length}`;
-    const selectedApprearance = isInDanger ? 'danger' : 'selected';
-    const hoveredAppearance = selectedRowIndexes.includes(rowIndex) ? isInDanger ? 'danger' : 'selected' : 'default';
-    return showCondition && /*#__PURE__*/React.createElement("div", {
-      key: type,
-      style: {
-        gridRow: isHover ? gridRowPosition : selectedRowPosition,
-        gridColumn: '2',
-        display: 'flex',
-        height: '100%',
-        alignItems: 'center',
-        justifyContent: 'center'
-      },
-      "data-testid": isHover ? 'table-floating-row-drag-handle' : 'table-floating-row-control-selected'
-    }, /*#__PURE__*/React.createElement(DragHandle, {
-      direction: "row",
-      tableLocalId: currentNodeLocalId,
-      indexes: isHover ? rowIndexes : selectedRowIndexes,
-      forceDefaultHandle: !isHover,
-      previewWidth: tableWidth,
-      previewHeight: rowHeights[rowIndex],
-      appearance: isHover ? hoveredAppearance : selectedApprearance,
-      onClick: handleClick,
-      onMouseOver: handleMouseOver,
-      onMouseOut: handleMouseOut,
-      onMouseUp: onMouseUp,
-      editorView: editorView
-    }));
-  }, [currentNodeLocalId, editorView, handleClick, handleMouseOut, handleMouseOver, hoveredCell, isInDanger, onMouseUp, rowHeights, rowIndex, rowIndexes, selectedRowIndexes, tableWidth]);
-  const rowHandles = useCallback(hoveredCell => {
-    if (!hoveredCell) {
-      return null;
-    }
-    if (hoveredCell.rowIndex === undefined) {
-      return generateHandleByType('selected');
-    }
-    const sortedHandles = [generateHandleByType('hover'), generateHandleByType('selected')];
-    return hoveredCell.rowIndex < selectedRowIndexes[0] ? sortedHandles : sortedHandles.reverse();
-  }, [generateHandleByType, selectedRowIndexes]);
   return /*#__PURE__*/React.createElement("div", {
     className: ClassName.DRAG_ROW_CONTROLS,
     style: {
@@ -200,6 +147,27 @@ const DragControlsComponent = ({
       position: 'relative',
       left: "var(--ds-space-negative-100, -8px)"
     }
-  }))), !isResizing && Number.isFinite(rowIndex) && rowHandles(hoveredCell));
+  }))), !isResizing && isTableHovered && Number.isFinite(rowIndex) && /*#__PURE__*/React.createElement("div", {
+    style: {
+      gridRow: gridRowPosition,
+      gridColumn: '2',
+      display: 'flex',
+      height: '100%',
+      alignItems: 'center',
+      justifyContent: 'center'
+    },
+    "data-testid": "table-floating-row-drag-handle"
+  }, /*#__PURE__*/React.createElement(DragHandle, {
+    tableLocalId: currentNodeLocalId,
+    indexes: rowIndexes,
+    previewWidth: tableWidth,
+    previewHeight: rowHeights[rowIndex],
+    appearance: selectedRowIndexes.includes(rowIndex) ? isInDanger ? 'danger' : 'selected' : 'default',
+    onClick: handleClick,
+    onMouseOver: handleMouseOver,
+    onMouseOut: handleMouseOut,
+    onMouseUp: onMouseUp,
+    editorView: editorView
+  })));
 };
 export const DragControls = injectIntl(DragControlsComponent);

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

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

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

@@ -3,6 +3,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import React, { useEffect, useMemo, useRef, useState } from 'react';
 import classnames from 'classnames';
 import ReactDOM from 'react-dom';
+import { browser } from '@atlaskit/editor-common/utils';
 import { draggable } from '@atlaskit/pragmatic-drag-and-drop/adapter/element';
 import { setCustomNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/util/set-custom-native-drag-preview';
 import { getPluginState as getDragDropPluginState } from '../../pm-plugins/drag-and-drop/plugin-factory';
@@ -18,8 +19,6 @@ export var DragHandle = function DragHandle(_ref) {
     _ref$appearance = _ref.appearance,
     appearance = _ref$appearance === void 0 ? 'default' : _ref$appearance,
     indexes = _ref.indexes,
-    _ref$forceDefaultHand = _ref.forceDefaultHandle,
-    forceDefaultHandle = _ref$forceDefaultHand === void 0 ? false : _ref$forceDefaultHand,
     previewWidth = _ref.previewWidth,
     previewHeight = _ref.previewHeight,
     onMouseOver = _ref.onMouseOver,
@@ -51,7 +50,6 @@ export var DragHandle = function DragHandle(_ref) {
   var handleIconProps = {
     hasMergedCells: hasMergedCells,
     direction: direction,
-    forceDefaultHandle: forceDefaultHandle,
     isDragMenuOpen: isDragMenuOpen,
     isRowHandleHovered: isRowHandleHovered,
     isColumnHandleHovered: isColumnHandleHovered,
@@ -80,6 +78,15 @@ export var DragHandle = function DragHandle(_ref) {
             getOffset: function getOffset(_ref3) {
               var container = _ref3.container;
               var rect = container.getBoundingClientRect();
+              if (browser.safari) {
+                // See: https://product-fabric.atlassian.net/browse/ED-21442
+                // We need to ensure that the preview is not overlaying screen content when the snapshot is taken, otherwise
+                // safari will composite the screen text elements into the bitmap snapshot. The container is a wrapper which is already
+                // positioned fixed at top/left 0.
+                // IMPORTANT: we must not exceed more then the width of the container off-screen otherwise not preview will
+                // be generated.
+                container.style.left = "-".concat(rect.width - 0.0001, "px");
+              }
               if (direction === 'row') {
                 return {
                   x: 16,
@@ -121,7 +128,7 @@ export var DragHandle = function DragHandle(_ref) {
       _onMouseUp && _onMouseUp(e);
     },
     onClick: onClick
-  }, /*#__PURE__*/React.createElement("span", {
+  }, browser.gecko ? /*#__PURE__*/React.createElement(HandleIconComponent, handleIconProps) : /*#__PURE__*/React.createElement("span", {
     style: {
       pointerEvents: 'none'
     }

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

@@ -1,11 +1,8 @@
-/* eslint-disable @atlaskit/design-system/prefer-primitives */
-
 import React, { useCallback, useMemo } from 'react';
 import { CellSelection } from '@atlaskit/editor-tables';
 import { getSelectionRect } from '@atlaskit/editor-tables/utils';
 import { clearHoverSelection, hoverCell, hoverColumns, selectColumn } from '../../../commands';
 import { toggleDragMenu } from '../../../pm-plugins/drag-and-drop/commands';
-import { getPluginState as getDragDropPluginState } from '../../../pm-plugins/drag-and-drop/plugin-factory';
 import { TableCssClassName as ClassName } from '../../../types';
 import { getRowsParams, getSelectedColumnIndexes } from '../../../utils';
 import { DragHandle } from '../../DragHandle';
@@ -20,7 +17,7 @@ var getSelectedColumns = function getSelectedColumns(selection) {
   return [];
 };
 export var ColumnControls = function ColumnControls(_ref) {
-  var _colWidths$map$join, _rowHeights$, _rowHeights$reduce;
+  var _colWidths$map$join, _rowHeights$, _rowHeights$reduce, _colWidths;
   var editorView = _ref.editorView,
     tableActive = _ref.tableActive,
     tableRef = _ref.tableRef,
@@ -40,6 +37,13 @@ export var ColumnControls = function ColumnControls(_ref) {
   var columnParams = getRowsParams(colWidths !== null && colWidths !== void 0 ? colWidths : []);
   var colIndex = hoveredCell === null || hoveredCell === void 0 ? void 0 : hoveredCell.colIndex;
   var selectedColIndexes = getSelectedColumns(editorView.state.selection);
+  var gridColumnPosition = useMemo(function () {
+    // if more than one row is selected, ensure the handle spans over the selected range
+    if (selectedColIndexes.includes(colIndex)) {
+      return "".concat(selectedColIndexes[0] + 1, " / span ").concat(selectedColIndexes.length);
+    }
+    return "".concat(colIndex + 1, " / span 1");
+  }, [colIndex, selectedColIndexes]);
   var firstRow = tableRef.querySelector('tr');
   var hasHeaderRow = firstRow ? firstRow.getAttribute('data-header-row') : false;
   var marginTop = hasHeaderRow && stickyTop !== undefined ? (_rowHeights$ = rowHeights === null || rowHeights === void 0 ? void 0 : rowHeights[0]) !== null && _rowHeights$ !== void 0 ? _rowHeights$ : 0 : 0;
@@ -91,63 +95,6 @@ export var ColumnControls = function ColumnControls(_ref) {
   var previewHeight = (_rowHeights$reduce = rowHeights === null || rowHeights === void 0 ? void 0 : rowHeights.reduce(function (sum, cur) {
     return sum + cur;
   }, 0)) !== null && _rowHeights$reduce !== void 0 ? _rowHeights$reduce : 0;
-  var generateHandleByType = useCallback(function (type) {
-    var _colWidths;
-    if (!hoveredCell) {
-      return null;
-    }
-    var _getDragDropPluginSta = getDragDropPluginState(editorView.state),
-      isDragMenuOpen = _getDragDropPluginSta.isDragMenuOpen,
-      dragMenuIndex = _getDragDropPluginSta.dragMenuIndex,
-      dragMenuDirection = _getDragDropPluginSta.dragMenuDirection;
-    var isHover = type === 'hover';
-    var isHoveredOnSelectedColumn = isDragMenuOpen && dragMenuDirection === 'column' && dragMenuIndex === colIndex;
-    var showCondition = isHover ? !isHoveredOnSelectedColumn && Number.isFinite(hoveredCell === null || hoveredCell === void 0 ? void 0 : hoveredCell.colIndex) : isDragMenuOpen && dragMenuDirection === 'column';
-    if (!showCondition) {
-      return null;
-    }
-    var selectedColumnPosition = "".concat(dragMenuIndex + 1, " / span ").concat(selectedColIndexes.length);
-    var gridColumnPosition = selectedColIndexes.includes(colIndex) ? "".concat(selectedColIndexes[0] + 1, " / span ").concat(selectedColIndexes.length) : "".concat(colIndex + 1, " / span 1");
-    var selectedApprearance = isInDanger ? 'danger' : 'selected';
-    var hoveredAppearance = selectedColIndexes.includes(colIndex) ? isInDanger ? 'danger' : 'selected' : 'default';
-    return showCondition && /*#__PURE__*/React.createElement("div", {
-      key: type,
-      style: {
-        gridColumn: isHover ? gridColumnPosition : selectedColumnPosition,
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-        height: 'fit-content',
-        placeSelf: 'center',
-        zIndex: 99
-      },
-      "data-column-control-index": hoveredCell.colIndex,
-      "data-testid": isHover ? 'table-floating-column-control' : 'table-floating-column-control-selected'
-    }, /*#__PURE__*/React.createElement(DragHandle, {
-      direction: "column",
-      tableLocalId: localId || '',
-      indexes: isHover ? colIndexes : selectedColIndexes,
-      forceDefaultHandle: !isHover,
-      previewWidth: (_colWidths = colWidths === null || colWidths === void 0 ? void 0 : colWidths[colIndex]) !== null && _colWidths !== void 0 ? _colWidths : 48,
-      previewHeight: previewHeight,
-      appearance: isHover ? hoveredAppearance : selectedApprearance,
-      onClick: handleClick,
-      onMouseOver: handleMouseOver,
-      onMouseOut: handleMouseOut,
-      onMouseUp: handleMouseUp,
-      editorView: editorView
-    }));
-  }, [colIndex, previewHeight, colWidths, colIndexes, editorView, handleClick, handleMouseOut, handleMouseOver, handleMouseUp, hoveredCell, isInDanger, localId, selectedColIndexes]);
-  var columnHandles = useCallback(function (hoveredCell) {
-    if (!hoveredCell) {
-      return null;
-    }
-    if (hoveredCell.colIndex === undefined) {
-      return generateHandleByType('selected');
-    }
-    var sortedHandles = [generateHandleByType('hover'), generateHandleByType('selected')];
-    return hoveredCell.colIndex < selectedColIndexes[0] ? sortedHandles : sortedHandles.reverse();
-  }, [generateHandleByType, selectedColIndexes]);
   return /*#__PURE__*/React.createElement("div", {
     className: ClassName.DRAG_COLUMN_CONTROLS,
     onMouseMove: handleMouseMove
@@ -176,6 +123,30 @@ export var ColumnControls = function ColumnControls(_ref) {
         right: '0'
       } : {}
     }));
-  }), tableActive && !isResizing && columnHandles(hoveredCell)));
+  }), tableActive && !isResizing && isTableHovered && !!hoveredCell && Number.isFinite(hoveredCell.colIndex) && /*#__PURE__*/React.createElement("div", {
+    style: {
+      gridColumn: gridColumnPosition,
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      height: 'fit-content',
+      placeSelf: 'center',
+      zIndex: 99
+    },
+    "data-column-control-index": hoveredCell.colIndex,
+    "data-testid": "table-floating-column-control"
+  }, /*#__PURE__*/React.createElement(DragHandle, {
+    direction: "column",
+    tableLocalId: localId || '',
+    indexes: colIndexes,
+    previewWidth: (_colWidths = colWidths === null || colWidths === void 0 ? void 0 : colWidths[colIndex]) !== null && _colWidths !== void 0 ? _colWidths : 48,
+    previewHeight: previewHeight,
+    appearance: selectedColIndexes.includes(hoveredCell.colIndex) ? isInDanger ? 'danger' : 'selected' : 'default',
+    onClick: handleClick,
+    onMouseOver: handleMouseOver,
+    onMouseOut: handleMouseOut,
+    onMouseUp: handleMouseUp,
+    editorView: editorView
+  }))));
 };
 export default ColumnControls;

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

@@ -1,6 +1,4 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-/* eslint-disable @atlaskit/design-system/prefer-primitives */
-
 import React, { Fragment, useCallback, useEffect, useMemo, useState } from 'react';
 import { injectIntl } from 'react-intl-next';
 import { CellSelection } from '@atlaskit/editor-tables';
@@ -8,7 +6,6 @@ import { getSelectionRect } from '@atlaskit/editor-tables/utils';
 import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/adapter/element';
 import { clearHoverSelection } from '../../../commands';
 import { toggleDragMenu } from '../../../pm-plugins/drag-and-drop/commands';
-import { getPluginState as getDragDropPluginState } from '../../../pm-plugins/drag-and-drop/plugin-factory';
 import { getPluginState as getTablePluginState } from '../../../pm-plugins/plugin-factory';
 import { TableCssClassName as ClassName } from '../../../types';
 import { getRowHeights, getRowsParams, getSelectedRowIndexes } from '../../../utils';
@@ -79,6 +76,13 @@ var DragControlsComponent = function DragControlsComponent(_ref) {
     toggleDragMenu(undefined, 'row', hoveredCell === null || hoveredCell === void 0 ? void 0 : hoveredCell.rowIndex)(editorView.state, editorView.dispatch);
   }, [editorView, hoveredCell === null || hoveredCell === void 0 ? void 0 : hoveredCell.rowIndex]);
   var rowIndex = hoveredCell === null || hoveredCell === void 0 ? void 0 : hoveredCell.rowIndex;
+  var gridRowPosition = useMemo(function () {
+    // if more than one row is selected, ensure the handle spans over the selected range
+    if (selectedRowIndexes.includes(rowIndex)) {
+      return "".concat(selectedRowIndexes[0] + 1, " / span ").concat(selectedRowIndexes.length);
+    }
+    return "".concat(rowIndex + 1, " / span 1");
+  }, [rowIndex, selectedRowIndexes]);
   var handleMouseOut = useCallback(function () {
     if (tableActive) {
       var state = editorView.state,
@@ -105,62 +109,6 @@ var DragControlsComponent = function DragControlsComponent(_ref) {
   var handleClick = useCallback(function (e) {
     selectRow(rowIndex, e === null || e === void 0 ? void 0 : e.shiftKey);
   }, [rowIndex, selectRow]);
-  var generateHandleByType = useCallback(function (type) {
-    if (!hoveredCell) {
-      return null;
-    }
-    var _getDragDropPluginSta = getDragDropPluginState(editorView.state),
-      isDragMenuOpen = _getDragDropPluginSta.isDragMenuOpen,
-      dragMenuIndex = _getDragDropPluginSta.dragMenuIndex,
-      dragMenuDirection = _getDragDropPluginSta.dragMenuDirection;
-    var isHover = type === 'hover';
-    var isHoveredOnSelectedRow = isDragMenuOpen && dragMenuDirection === 'row' && dragMenuIndex === rowIndex;
-    var showCondition = isHover ? !isHoveredOnSelectedRow && !selectedRowIndexes.includes(rowIndex) && Number.isFinite(hoveredCell === null || hoveredCell === void 0 ? void 0 : hoveredCell.colIndex) : isDragMenuOpen && dragMenuDirection === 'row' && Number.isFinite(hoveredCell === null || hoveredCell === void 0 ? void 0 : hoveredCell.colIndex);
-    if (!showCondition) {
-      return null;
-    }
-    var gridRowPosition =
-    // if more than one row is selected, ensure the handle spans over the selected range
-    selectedRowIndexes.includes(rowIndex) ? "".concat(selectedRowIndexes[0] + 1, " / span ").concat(selectedRowIndexes.length) : "".concat(rowIndex + 1, " / span 1");
-    var selectedRowPosition = "".concat(dragMenuIndex + 1, " / span ").concat(selectedRowIndexes.length);
-    var selectedApprearance = isInDanger ? 'danger' : 'selected';
-    var hoveredAppearance = selectedRowIndexes.includes(rowIndex) ? isInDanger ? 'danger' : 'selected' : 'default';
-    return showCondition && /*#__PURE__*/React.createElement("div", {
-      key: type,
-      style: {
-        gridRow: isHover ? gridRowPosition : selectedRowPosition,
-        gridColumn: '2',
-        display: 'flex',
-        height: '100%',
-        alignItems: 'center',
-        justifyContent: 'center'
-      },
-      "data-testid": isHover ? 'table-floating-row-drag-handle' : 'table-floating-row-control-selected'
-    }, /*#__PURE__*/React.createElement(DragHandle, {
-      direction: "row",
-      tableLocalId: currentNodeLocalId,
-      indexes: isHover ? rowIndexes : selectedRowIndexes,
-      forceDefaultHandle: !isHover,
-      previewWidth: tableWidth,
-      previewHeight: rowHeights[rowIndex],
-      appearance: isHover ? hoveredAppearance : selectedApprearance,
-      onClick: handleClick,
-      onMouseOver: handleMouseOver,
-      onMouseOut: handleMouseOut,
-      onMouseUp: onMouseUp,
-      editorView: editorView
-    }));
-  }, [currentNodeLocalId, editorView, handleClick, handleMouseOut, handleMouseOver, hoveredCell, isInDanger, onMouseUp, rowHeights, rowIndex, rowIndexes, selectedRowIndexes, tableWidth]);
-  var rowHandles = useCallback(function (hoveredCell) {
-    if (!hoveredCell) {
-      return null;
-    }
-    if (hoveredCell.rowIndex === undefined) {
-      return generateHandleByType('selected');
-    }
-    var sortedHandles = [generateHandleByType('hover'), generateHandleByType('selected')];
-    return hoveredCell.rowIndex < selectedRowIndexes[0] ? sortedHandles : sortedHandles.reverse();
-  }, [generateHandleByType, selectedRowIndexes]);
   return /*#__PURE__*/React.createElement("div", {
     className: ClassName.DRAG_ROW_CONTROLS,
     style: {
@@ -200,6 +148,27 @@ var DragControlsComponent = function DragControlsComponent(_ref) {
         left: "var(--ds-space-negative-100, -8px)"
       }
     }));
-  }), !isResizing && Number.isFinite(rowIndex) && rowHandles(hoveredCell));
+  }), !isResizing && isTableHovered && Number.isFinite(rowIndex) && /*#__PURE__*/React.createElement("div", {
+    style: {
+      gridRow: gridRowPosition,
+      gridColumn: '2',
+      display: 'flex',
+      height: '100%',
+      alignItems: 'center',
+      justifyContent: 'center'
+    },
+    "data-testid": "table-floating-row-drag-handle"
+  }, /*#__PURE__*/React.createElement(DragHandle, {
+    tableLocalId: currentNodeLocalId,
+    indexes: rowIndexes,
+    previewWidth: tableWidth,
+    previewHeight: rowHeights[rowIndex],
+    appearance: selectedRowIndexes.includes(rowIndex) ? isInDanger ? 'danger' : 'selected' : 'default',
+    onClick: handleClick,
+    onMouseOver: handleMouseOver,
+    onMouseOut: handleMouseOut,
+    onMouseUp: onMouseUp,
+    editorView: editorView
+  })));
 };
 export var DragControls = injectIntl(DragControlsComponent);

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

@@ -421,4 +421,3 @@ export interface DraggableData {
     targetClosestEdge: Edge;
     direction: 1 | -1;
 }
-export type HandleTypes = 'hover' | 'selected';

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

@@ -2,7 +2,6 @@
 type HandleIconProps = {
     hasMergedCells: boolean;
     direction: 'row' | 'column';
-    forceDefaultHandle: boolean;
     isDragMenuOpen: boolean | undefined;
     isRowHandleHovered: boolean;
     isColumnHandleHovered: boolean;

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

@@ -5,7 +5,6 @@ type DragHandleAppearance = 'default' | 'selected' | 'disabled' | 'danger';
 type DragHandleProps = {
     tableLocalId: string;
     indexes: number[];
-    forceDefaultHandle?: boolean;
     previewWidth?: number;
     previewHeight?: number;
     direction?: TableDirection;
@@ -16,5 +15,5 @@ type DragHandleProps = {
     onMouseUp?: MouseEventHandler;
     editorView: EditorView;
 };
-export declare const DragHandle: ({ tableLocalId, direction, appearance, indexes, forceDefaultHandle, previewWidth, previewHeight, onMouseOver, onMouseOut, onMouseUp, onClick, editorView, }: DragHandleProps) => JSX.Element;
+export declare const DragHandle: ({ tableLocalId, direction, appearance, indexes, previewWidth, previewHeight, onMouseOver, onMouseOut, onMouseUp, onClick, editorView, }: DragHandleProps) => JSX.Element;
 export {};

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

@@ -421,4 +421,3 @@ export interface DraggableData {
     targetClosestEdge: Edge;
     direction: 1 | -1;
 }
-export type HandleTypes = 'hover' | 'selected';

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

@@ -2,7 +2,6 @@
 type HandleIconProps = {
     hasMergedCells: boolean;
     direction: 'row' | 'column';
-    forceDefaultHandle: boolean;
     isDragMenuOpen: boolean | undefined;
     isRowHandleHovered: boolean;
     isColumnHandleHovered: boolean;

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

@@ -5,7 +5,6 @@ type DragHandleAppearance = 'default' | 'selected' | 'disabled' | 'danger';
 type DragHandleProps = {
     tableLocalId: string;
     indexes: number[];
-    forceDefaultHandle?: boolean;
     previewWidth?: number;
     previewHeight?: number;
     direction?: TableDirection;
@@ -16,5 +15,5 @@ type DragHandleProps = {
     onMouseUp?: MouseEventHandler;
     editorView: EditorView;
 };
-export declare const DragHandle: ({ tableLocalId, direction, appearance, indexes, forceDefaultHandle, previewWidth, previewHeight, onMouseOver, onMouseOut, onMouseUp, onClick, editorView, }: DragHandleProps) => JSX.Element;
+export declare const DragHandle: ({ tableLocalId, direction, appearance, indexes, previewWidth, previewHeight, onMouseOver, onMouseOut, onMouseUp, onClick, editorView, }: DragHandleProps) => JSX.Element;
 export {};

package/package.json

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

package/src/plugins/table/types.ts

@@ -463,5 +463,3 @@ export interface DraggableData {
   targetClosestEdge: Edge;
   direction: 1 | -1;
 }
-
-export type HandleTypes = 'hover' | 'selected';

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

@@ -9,7 +9,6 @@ import {
 type HandleIconProps = {
   hasMergedCells: boolean;
   direction: 'row' | 'column';
-  forceDefaultHandle: boolean;
   isDragMenuOpen: boolean | undefined;
   isRowHandleHovered: boolean;
   isColumnHandleHovered: boolean;
@@ -21,7 +20,6 @@ type HandleIconProps = {
 export const HandleIconComponent = (props: HandleIconProps) => {
   const {
     direction,
-    forceDefaultHandle,
     isDragMenuOpen,
     isRowHandleHovered,
     isColumnHandleHovered,
@@ -31,21 +29,22 @@ export const HandleIconComponent = (props: HandleIconProps) => {
     dragMenuDirection,
   } = props;
   const isHandleHovered = isRowHandleHovered || isColumnHandleHovered;
-
   const isCurrentRowOrColumnSelected =
     isCurrentRowSelected || isCurrentColumnSelected;
-
   const isDragMenuOpenOnCurrentRowOrColumn =
     isDragMenuOpen &&
     dragMenuDirection === direction &&
     isCurrentRowOrColumnSelected;
 
-  if (
-    forceDefaultHandle ||
-    isHandleHovered ||
-    isDragMenuOpenOnCurrentRowOrColumn
-  ) {
-    return hasMergedCells ? <DragHandleDisabledIcon /> : <DragHandleIcon />;
+  const showNormalHandle = hasMergedCells ? (
+    <DragHandleDisabledIcon />
+  ) : (
+    <DragHandleIcon />
+  );
+
+  // hoverred handle or open drag menu
+  if (isHandleHovered || isDragMenuOpenOnCurrentRowOrColumn) {
+    return showNormalHandle;
   }
 
   return <MinimisedHandleIcon />;

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

@@ -4,6 +4,7 @@ import React, { useEffect, useMemo, useRef, useState } from 'react';
 import classnames from 'classnames';
 import ReactDOM from 'react-dom';
 
+import { browser } from '@atlaskit/editor-common/utils';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { draggable } from '@atlaskit/pragmatic-drag-and-drop/adapter/element';
 import { setCustomNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/util/set-custom-native-drag-preview';
@@ -22,7 +23,6 @@ type DragHandleAppearance = 'default' | 'selected' | 'disabled' | 'danger';
 type DragHandleProps = {
   tableLocalId: string;
   indexes: number[];
-  forceDefaultHandle?: boolean;
   previewWidth?: number;
   previewHeight?: number;
   direction?: TableDirection;
@@ -39,7 +39,6 @@ export const DragHandle = ({
   direction = 'row',
   appearance = 'default',
   indexes,
-  forceDefaultHandle = false,
   previewWidth,
   previewHeight,
   onMouseOver,
@@ -65,7 +64,6 @@ export const DragHandle = ({
     isDragMenuOpen &&
     direction === 'row' &&
     hoveredCell.rowIndex === dragMenuIndex;
-
   const isCurrentColumnSelected =
     isDragMenuOpen &&
     direction === 'column' &&
@@ -86,7 +84,6 @@ export const DragHandle = ({
   const handleIconProps = {
     hasMergedCells,
     direction,
-    forceDefaultHandle,
     isDragMenuOpen,
     isRowHandleHovered,
     isColumnHandleHovered,
@@ -115,6 +112,15 @@ export const DragHandle = ({
           setCustomNativeDragPreview({
             getOffset: ({ container }) => {
               const rect = container.getBoundingClientRect();
+              if (browser.safari) {
+                // See: https://product-fabric.atlassian.net/browse/ED-21442
+                // We need to ensure that the preview is not overlaying screen content when the snapshot is taken, otherwise
+                // safari will composite the screen text elements into the bitmap snapshot. The container is a wrapper which is already
+                // positioned fixed at top/left 0.
+                // IMPORTANT: we must not exceed more then the width of the container off-screen otherwise not preview will
+                // be generated.
+                container.style.left = `-${rect.width - 0.0001}px`;
+              }
               if (direction === 'row') {
                 return { x: 16, y: 16 };
               } else {
@@ -163,9 +169,14 @@ export const DragHandle = ({
         }}
         onClick={onClick}
       >
-        <span style={{ pointerEvents: 'none' }}>
+        {/* cannot block pointer events in Firefox as it breaks Dragging functionality */}
+        {browser.gecko ? (
           <HandleIconComponent {...handleIconProps} />
-        </span>
+        ) : (
+          <span style={{ pointerEvents: 'none' }}>
+            <HandleIconComponent {...handleIconProps} />
+          </span>
+        )}
       </button>
       {previewContainer &&
         previewWidth !== undefined &&