@atlaskit/editor-plugin-block-controls 1.10.4 → 1.10.6

package/dist/esm/ui/drag-handle.js

@@ -59,7 +59,7 @@ var selectedStyles = css({
   color: "var(--ds-icon-selected, #0C66E4)"
 });
 var DragHandleInternal = function DragHandleInternal(_ref) {
-  var _api$core2, _api$analytics2, _api$core5, _api$core7;
+  var _api$core2, _api$analytics2, _api$core4, _api$core6;
   var view = _ref.view,
     api = _ref.api,
     getPos = _ref.getPos,
@@ -128,32 +128,13 @@ var DragHandleInternal = function DragHandleInternal(_ref) {
     view.focus();
   }, [dragHandleSelected, api === null || api === void 0 || (_api$core2 = api.core) === null || _api$core2 === void 0 ? void 0 : _api$core2.actions, api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions, view, getPos, start, nodeType]);
 
-  // handleMouseDown required along with onClick to ensure the correct selection
-  // is set immediately when the drag handle is clicked. Otherwise browser native
-  // drag and drop can take over and cause unpredictable behaviour.
+  // TODO - This needs to be investigated further. Drag preview generation is not always working
+  // as expected with a node selection. This workaround sets the selection to the node on mouseDown,
+  // but ensures the preview is generated correctly.
   var handleMouseDown = useCallback(function () {
     var _api$core3;
     api === null || api === void 0 || (_api$core3 = api.core) === null || _api$core3 === void 0 || _api$core3.actions.execute(function (_ref3) {
       var tr = _ref3.tr;
-      if (start === undefined) {
-        return tr;
-      }
-      tr = selectNode(tr, start, nodeType);
-      tr.setMeta(key, {
-        pos: start
-      });
-      return tr;
-    });
-    view.focus();
-  }, [start, api, view, nodeType]);
-
-  // TODO - This needs to be investigated further. Drag preview generation is not always working
-  // as expected with a node selection. This workaround sets the selection to the node on mouseDown,
-  // but ensures the preview is generated correctly.
-  var handleMouseDownWrapperRemoved = useCallback(function () {
-    var _api$core4;
-    api === null || api === void 0 || (_api$core4 = api.core) === null || _api$core4 === void 0 || _api$core4.actions.execute(function (_ref4) {
-      var tr = _ref4.tr;
       var startPos = fg('platform_editor_element_drag_and_drop_ed_24304') ? getPos() : start;
       if (startPos === undefined) {
         return tr;
@@ -170,16 +151,16 @@ var DragHandleInternal = function DragHandleInternal(_ref) {
       });
       return tr;
     });
-  }, [api === null || api === void 0 || (_api$core5 = api.core) === null || _api$core5 === void 0 ? void 0 : _api$core5.actions, getPos, start]);
+  }, [api === null || api === void 0 || (_api$core4 = api.core) === null || _api$core4 === void 0 ? void 0 : _api$core4.actions, getPos, start]);
   var handleKeyDown = useCallback(function (e) {
     if (fg('platform_editor_element_drag_and_drop_ed_23873')) {
       // allow user to use spacebar to select the node
 
       if (!e.repeat && e.key === ' ') {
-        var _api$core6;
+        var _api$core5;
         var startPos = fg('platform_editor_element_drag_and_drop_ed_24304') ? getPos() : start;
-        api === null || api === void 0 || (_api$core6 = api.core) === null || _api$core6 === void 0 || _api$core6.actions.execute(function (_ref5) {
-          var tr = _ref5.tr;
+        api === null || api === void 0 || (_api$core5 = api.core) === null || _api$core5 === void 0 || _api$core5.actions.execute(function (_ref4) {
+          var tr = _ref4.tr;
           if (startPos === undefined) {
             return tr;
           }
@@ -203,7 +184,7 @@ var DragHandleInternal = function DragHandleInternal(_ref) {
         view.focus();
       }
     }
-  }, [getPos, start, api === null || api === void 0 || (_api$core7 = api.core) === null || _api$core7 === void 0 ? void 0 : _api$core7.actions, view]);
+  }, [getPos, start, api === null || api === void 0 || (_api$core6 = api.core) === null || _api$core6 === void 0 ? void 0 : _api$core6.actions, view]);
   useEffect(function () {
     var element = buttonRef.current;
     if (!element) {
@@ -217,11 +198,11 @@ var DragHandleInternal = function DragHandleInternal(_ref) {
           start: start
         };
       },
-      onGenerateDragPreview: function onGenerateDragPreview(_ref6) {
-        var nativeSetDragImage = _ref6.nativeSetDragImage;
+      onGenerateDragPreview: function onGenerateDragPreview(_ref5) {
+        var nativeSetDragImage = _ref5.nativeSetDragImage;
         setCustomNativeDragPreview({
-          render: function render(_ref7) {
-            var container = _ref7.container;
+          render: function render(_ref6) {
+            var container = _ref6.container;
             var dom = view.dom.querySelector("[data-drag-handler-anchor-name=\"".concat(anchorName, "\"]"));
             if (!dom) {
               return;
@@ -232,13 +213,13 @@ var DragHandleInternal = function DragHandleInternal(_ref) {
         });
       },
       onDragStart: function onDragStart() {
-        var _api$core8;
+        var _api$core7;
         if (start === undefined) {
           return;
         }
-        api === null || api === void 0 || (_api$core8 = api.core) === null || _api$core8 === void 0 || _api$core8.actions.execute(function (_ref8) {
+        api === null || api === void 0 || (_api$core7 = api.core) === null || _api$core7 === void 0 || _api$core7.actions.execute(function (_ref7) {
           var _api$blockControls, _api$analytics3;
-          var tr = _ref8.tr;
+          var tr = _ref7.tr;
           api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 || _api$blockControls.commands.setNodeDragged(start, anchorName, nodeType)({
             tr: tr
           });
@@ -283,20 +264,14 @@ var DragHandleInternal = function DragHandleInternal(_ref) {
       }
     }
     if (supportsAnchor) {
-      return fg('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2') ? {
+      return {
         left: hasResizer || isExtension || isEmbedCard || isBlockCard && innerContainer ? "calc(anchor(".concat(anchorName, " start) + ").concat(getLeftPosition(dom, nodeType, innerContainer, macroInteractionUpdates), ")") : "calc(anchor(".concat(anchorName, " start) - ").concat(DRAG_HANDLE_WIDTH, "px - ").concat(dragHandleGap(nodeType), "px)"),
         top: fg('platform_editor_elements_dnd_ed_23674') ? "calc(anchor(".concat(anchorName, " start) + ").concat(topPositionAdjustment(nodeType), "px)") : anchorName.includes('table') ? "calc(anchor(".concat(anchorName, " start) + ").concat(DRAG_HANDLE_HEIGHT, "px)") : "anchor(".concat(anchorName, " start)")
-      } : {
-        left: hasResizer || isExtension || isBlockCard || isEmbedCard ? getLeftPosition(dom, nodeType, innerContainer, macroInteractionUpdates) : "calc(anchor(".concat(anchorName, " start) - ").concat(DRAG_HANDLE_WIDTH, "px - ").concat(dragHandleGap(nodeType), "px)"),
-        top: fg('platform_editor_elements_dnd_ed_23674') ? "calc(anchor(".concat(anchorName, " start) + ").concat(topPositionAdjustment(nodeType), "px)") : anchorName.includes('table') ? "calc(anchor(".concat(anchorName, " start) + ").concat(DRAG_HANDLE_HEIGHT, "px)") : "anchor(".concat(anchorName, " start)")
       };
     }
-    return fg('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2') ? {
+    return {
       left: hasResizer || isExtension || isEmbedCard || isBlockCard && innerContainer ? "calc(".concat((dom === null || dom === void 0 ? void 0 : dom.offsetLeft) || 0, "px + ").concat(getLeftPosition(dom, nodeType, innerContainer, macroInteractionUpdates), ")") : getLeftPosition(dom, nodeType, innerContainer, macroInteractionUpdates),
       top: fg('platform_editor_elements_dnd_ed_23674') ? getTopPosition(dom, nodeType) : getTopPosition(dom)
-    } : {
-      left: getLeftPosition(dom, nodeType, innerContainer, macroInteractionUpdates),
-      top: fg('platform_editor_elements_dnd_ed_23674') ? getTopPosition(dom, nodeType) : getTopPosition(dom)
     };
   }, [anchorName, nodeType, view, blockCardWidth, macroInteractionUpdates]);
   var _useState5 = useState({
@@ -372,7 +347,7 @@ var DragHandleInternal = function DragHandleInternal(_ref) {
         ,
         style: fg('platform_editor_element_drag_and_drop_ed_23896') ? newPositionStyles : positionStyles,
         onClick: handleOnClick,
-        onMouseDown: fg('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2') ? handleMouseDownWrapperRemoved : handleMouseDown,
+        onMouseDown: handleMouseDown,
         onKeyDown: handleKeyDown,
         "data-testid": "block-ctrl-drag-handle"
       }, jsx(DragHandlerIcon, {
@@ -385,6 +360,7 @@ var DragHandleInternal = function DragHandleInternal(_ref) {
     content: jsx(TooltipContentWithMultipleShortcuts, {
       helpDescriptors: helpDescriptors
     }),
+    ignoreTooltipPointerEvents: true,
     onShow: function onShow() {
       var _api$accessibilityUti;
       api === null || api === void 0 || (_api$accessibilityUti = api.accessibilityUtils) === null || _api$accessibilityUti === void 0 || _api$accessibilityUti.actions.ariaNotify(message, {

package/dist/esm/ui/drag-preview.js

@@ -13,10 +13,7 @@ export var dragPreview = function dragPreview(container, dom, nodeType) {
   container.style.pointerEvents = 'none';
   var parent = document.createElement('div');
   // ProseMirror class is required to make sure the cloned dom is styled correctly
-  parent.classList.add('ProseMirror');
-  if (fg('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2')) {
-    parent.classList.add('block-ctrl-drag-preview');
-  }
+  parent.classList.add('ProseMirror', 'block-ctrl-drag-preview');
   var embedCard = dom.querySelector('.embedCardView-content-wrap');
   var shouldBeGenericPreview = nodeType === 'embedCard' || nodeType === 'extension' || !!embedCard;
   if (fg('platform_editor_elements_drag_and_drop_ed_23189')) {

package/dist/esm/ui/global-styles.js

@@ -122,6 +122,6 @@ var getTextNodeStyle = function getTextNodeStyle() {
 };
 export var GlobalStylesWrapper = function GlobalStylesWrapper() {
   return jsx(Global, {
-    styles: [globalStyles, fg('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2') ? fg('platform_editor_elements_dnd_nested') ? extendedHoverZoneNested : extendedHoverZone : false, getTextNodeStyle(), withDeleteLinesStyleFix, withMediaSingleStyleFix]
+    styles: [globalStyles, fg('platform_editor_elements_dnd_nested') ? extendedHoverZoneNested : extendedHoverZone, getTextNodeStyle(), withDeleteLinesStyleFix, withMediaSingleStyleFix]
   });
 };

package/dist/esm/utils/getSelection.js

@@ -1,6 +1,5 @@
 import { NodeSelection, TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { selectTableClosestToPos } from '@atlaskit/editor-tables/utils';
-import { fg } from '@atlaskit/platform-feature-flags';
 export var getSelection = function getSelection(tr, start) {
   var node = tr.doc.nodeAt(start);
   var isNodeSelection = node && NodeSelection.isSelectable(node);
@@ -16,7 +15,7 @@ export var getSelection = function getSelection(tr, start) {
   } else if (
   // Even though mediaGroup is not selectable,
   // we need a quick way to make all child media nodes appear as selected without the need for a custom selection
-  (node === null || node === void 0 ? void 0 : node.type.name) === 'mediaGroup' && fg('platform_editor_element_drag_and_drop_ed_23842')) {
+  (node === null || node === void 0 ? void 0 : node.type.name) === 'mediaGroup') {
     return new NodeSelection($startPos);
   } else {
     // To trigger the annotation floating toolbar for non-selectable node, we need to select inline nodes
@@ -25,28 +24,16 @@ export var getSelection = function getSelection(tr, start) {
     var foundInlineNode = false;
     var inlineNodeEndPos = 0;
     tr.doc.nodesBetween($startPos.pos, $startPos.pos + nodeSize, function (n, pos) {
-      if (fg('platform.editor.elements.drag-and-drop-ed-23905')) {
-        if (n.isInline) {
-          inlineNodeEndPos = pos + n.nodeSize;
-        }
-        if (n.isInline && !foundInlineNode) {
-          inlineNodePos = pos;
-          foundInlineNode = true;
-        }
-      } else {
-        if (foundInlineNode) {
-          return false;
-        }
-        if (n.isInline) {
-          inlineNodePos = pos;
-          foundInlineNode = true;
-          return false;
-        }
+      if (n.isInline) {
+        inlineNodeEndPos = pos + n.nodeSize;
+      }
+      if (n.isInline && !foundInlineNode) {
+        inlineNodePos = pos;
+        foundInlineNode = true;
       }
       return true;
     });
-    var inlineNodeDepth = inlineNodePos - start;
-    return new TextSelection(tr.doc.resolve(fg('platform.editor.elements.drag-and-drop-ed-23905') ? inlineNodeEndPos : start + nodeSize - inlineNodeDepth), tr.doc.resolve(inlineNodePos));
+    return new TextSelection(tr.doc.resolve(inlineNodeEndPos), tr.doc.resolve(inlineNodePos));
   }
 };
 export var selectNode = function selectNode(tr, start, nodeType) {

package/dist/types/pm-plugins/decorations.d.ts

@@ -12,10 +12,4 @@ export declare const dropTargetDecorations: (oldState: EditorState, newState: Ed
 };
 export declare const emptyParagraphNodeDecorations: () => Decoration;
 export declare const nodeDecorations: (newState: EditorState) => Decoration[];
-/**
- * Setting up decorations around each node to track mousemove events into each node
- * When a mouseenter event is triggered on the node, we will set the activeNode to the node
- * And show the drag handle
- */
-export declare const mouseMoveWrapperDecorations: (newState: EditorState, api: ExtractInjectionAPI<BlockControlsPlugin>) => Decoration[];
 export declare const dragHandleDecoration: (api: ExtractInjectionAPI<BlockControlsPlugin>, getIntl: () => IntlShape, pos: number, anchorName: string, nodeType: string, handleOptions?: HandleOptions) => Decoration;

package/dist/types-ts4.5/pm-plugins/decorations.d.ts

@@ -12,10 +12,4 @@ export declare const dropTargetDecorations: (oldState: EditorState, newState: Ed
 };
 export declare const emptyParagraphNodeDecorations: () => Decoration;
 export declare const nodeDecorations: (newState: EditorState) => Decoration[];
-/**
- * Setting up decorations around each node to track mousemove events into each node
- * When a mouseenter event is triggered on the node, we will set the activeNode to the node
- * And show the drag handle
- */
-export declare const mouseMoveWrapperDecorations: (newState: EditorState, api: ExtractInjectionAPI<BlockControlsPlugin>) => Decoration[];
 export declare const dragHandleDecoration: (api: ExtractInjectionAPI<BlockControlsPlugin>, getIntl: () => IntlShape, pos: number, anchorName: string, nodeType: string, handleOptions?: HandleOptions) => Decoration;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-block-controls",
-	"version": "1.10.4",
+	"version": "1.10.6",
 	"description": "Block controls plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -32,7 +32,7 @@
 	},
 	"dependencies": {
 		"@atlaskit/adf-schema": "^40.3.0",
-		"@atlaskit/editor-common": "^87.4.0",
+		"@atlaskit/editor-common": "^87.5.0",
 		"@atlaskit/editor-plugin-accessibility-utils": "^1.2.0",
 		"@atlaskit/editor-plugin-analytics": "^1.6.0",
 		"@atlaskit/editor-plugin-editor-disabled": "^1.2.0",
@@ -48,7 +48,7 @@
 		"@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^1.1.0",
 		"@atlaskit/theme": "^12.11.0",
 		"@atlaskit/tokens": "^1.57.0",
-		"@atlaskit/tooltip": "^18.5.0",
+		"@atlaskit/tooltip": "^18.6.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
 		"bind-event-listener": "^3.0.0",
@@ -95,9 +95,6 @@
 		}
 	},
 	"platform-feature-flags": {
-		"platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2": {
-			"type": "boolean"
-		},
 		"platform.editor.elements.drag-and-drop-long-node-scroll": {
 			"type": "boolean"
 		},
@@ -111,9 +108,6 @@
 		"platform.editor.elements.drag-and-drop-ed-23816": {
 			"type": "boolean"
 		},
-		"platform.editor.elements.drag-and-drop-ed-23905": {
-			"type": "boolean"
-		},
 		"platform_editor_elements_drag_and_drop_ed_23189": {
 			"type": "boolean"
 		},
@@ -123,9 +117,6 @@
 		"platform_editor_element_drag_and_drop_ed_23873": {
 			"type": "boolean"
 		},
-		"platform_editor_element_drag_and_drop_ed_23842": {
-			"type": "boolean"
-		},
 		"platform_editor_elements_drag_and_drop_ed_23394": {
 			"type": "boolean"
 		},

package/dist/cjs/ui/mouse-move-wrapper.js

@@ -1,148 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.MouseMoveWrapper = void 0;
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _react = require("react");
-var _react2 = require("@emotion/react");
-var _bindEventListener = require("bind-event-listener");
-var _main = require("../pm-plugins/main");
-var _dragHandlePositions = require("../utils/drag-handle-positions");
-var _consts = require("./consts");
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-
-var basicStyles = (0, _react2.css)({
-  position: 'absolute',
-  width: '100%',
-  left: '0',
-  display: 'block',
-  zIndex: -1
-});
-var mouseMoveWrapperStyles = (0, _react2.css)({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  zIndex: _consts.DRAG_HANDLE_ZINDEX
-});
-var MouseMoveWrapper = exports.MouseMoveWrapper = function MouseMoveWrapper(_ref) {
-  var view = _ref.view,
-    api = _ref.api,
-    anchorName = _ref.anchorName,
-    nodeType = _ref.nodeType,
-    getPos = _ref.getPos;
-  // Using a ref for isDragging reduce re-renders
-  var isDragging = (0, _react.useRef)(false);
-  var _useState = (0, _react.useState)(false),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    hideWrapper = _useState2[0],
-    setHideWrapper = _useState2[1];
-  var ref = (0, _react.useRef)(null);
-  var _useState3 = (0, _react.useState)(),
-    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-    pos = _useState4[0],
-    setPos = _useState4[1];
-  (0, _react.useEffect)(function () {
-    // Adding this event listener to fix issue where wrapper isn't hidden if user navigates to node before page finishes loading
-    // This will be removed when we refactor to remove this component
-    var unbind;
-    if (ref.current) {
-      unbind = (0, _bindEventListener.bind)(ref.current, {
-        type: 'mousemove',
-        listener: function listener() {
-          setHideWrapper(true);
-          unbind();
-        }
-      });
-    }
-    return function () {
-      var _unbind;
-      return (_unbind = unbind) === null || _unbind === void 0 ? void 0 : _unbind();
-    };
-  }, []);
-  var _onMouseEnter = (0, _react.useCallback)(function () {
-    if (!isDragging.current) {
-      setHideWrapper(true);
-    }
-    var pos = getPos();
-    if (pos === undefined) {
-      return;
-    }
-    if (api && api.blockControls && !isDragging.current) {
-      var _api$core;
-      api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(api.blockControls.commands.showDragHandleAt(pos, anchorName, nodeType));
-    }
-  }, [getPos, isDragging, api, anchorName, nodeType]);
-
-  //THIS IS TRIGGERED A LOT!
-  var onSharedStateChange = (0, _react.useCallback)(function (_ref2) {
-    var _nextSharedState$acti;
-    var nextSharedState = _ref2.nextSharedState;
-    if ((nextSharedState === null || nextSharedState === void 0 || (_nextSharedState$acti = nextSharedState.activeNode) === null || _nextSharedState$acti === void 0 ? void 0 : _nextSharedState$acti.anchorName) !== anchorName && !isDragging.current) {
-      setHideWrapper(false);
-    }
-    if (nextSharedState !== null && nextSharedState !== void 0 && nextSharedState.isDragging && !isDragging.current) {
-      isDragging.current = true;
-      setHideWrapper(true);
-    }
-    if ((nextSharedState === null || nextSharedState === void 0 ? void 0 : nextSharedState.isDragging) === false && isDragging.current) {
-      isDragging.current = false;
-      setHideWrapper(false);
-    }
-  }, [anchorName]);
-  (0, _react.useEffect)(function () {
-    var _api$blockControls;
-    var unbind = api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.sharedState.onChange(onSharedStateChange);
-    return function () {
-      unbind === null || unbind === void 0 || unbind();
-    };
-  }, [onSharedStateChange, api]);
-  (0, _react.useLayoutEffect)(function () {
-    var supportsAnchor = CSS.supports('height', "anchor-size(".concat(anchorName, " height)")) && CSS.supports('top', "anchor(".concat(anchorName, " start)"));
-    if (supportsAnchor) {
-      setPos({
-        height: "anchor-size(".concat(anchorName, " height)"),
-        top: "anchor(".concat(anchorName, " start)")
-      });
-      return;
-    }
-    var calcPos = requestAnimationFrame(function () {
-      var dom = view.dom.querySelector("[data-drag-handler-anchor-name=\"".concat(anchorName, "\"]"));
-      if (!dom) {
-        return;
-      }
-      setPos({
-        height: "".concat(dom.offsetHeight, "px"),
-        top: (0, _dragHandlePositions.getTopPosition)(dom)
-      });
-    });
-    return function () {
-      return cancelAnimationFrame(calcPos);
-    };
-  }, [view, anchorName]);
-  return (0, _react2.jsx)("div", {
-    ref: ref,
-    onMouseEnter: function onMouseEnter() {
-      var _key$getState;
-      // Once onDragEnter handler is processed, wrapper for drop target is hidden
-      // This means wrapper for draggable is shown, triggering onMouseEnter and showing draggable's drag handle again
-      // hence we want to ignore it while we still dragging
-      if (!((_key$getState = _main.key.getState(view.state)) !== null && _key$getState !== void 0 && _key$getState.isPMDragging)) {
-        _onMouseEnter();
-      }
-    },
-    css: [basicStyles, !hideWrapper && mouseMoveWrapperStyles]
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-    ,
-    style: pos
-    // we want achieve the same result as onMouseEnter: make wrapper inactive and display drag handle next to drop target
-    // eslint-disable-next-line @atlaskit/design-system/no-direct-use-of-web-platform-drag-and-drop
-    ,
-    onDragEnter: _onMouseEnter
-  });
-};

package/dist/es2019/ui/mouse-move-wrapper.js

@@ -1,133 +0,0 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
-import { bind } from 'bind-event-listener';
-import { key } from '../pm-plugins/main';
-import { getTopPosition } from '../utils/drag-handle-positions';
-import { DRAG_HANDLE_ZINDEX } from './consts';
-const basicStyles = css({
-  position: 'absolute',
-  width: '100%',
-  left: '0',
-  display: 'block',
-  zIndex: -1
-});
-const mouseMoveWrapperStyles = css({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  zIndex: DRAG_HANDLE_ZINDEX
-});
-export const MouseMoveWrapper = ({
-  view,
-  api,
-  anchorName,
-  nodeType,
-  getPos
-}) => {
-  // Using a ref for isDragging reduce re-renders
-  const isDragging = useRef(false);
-  const [hideWrapper, setHideWrapper] = useState(false);
-  const ref = useRef(null);
-  const [pos, setPos] = useState();
-  useEffect(() => {
-    // Adding this event listener to fix issue where wrapper isn't hidden if user navigates to node before page finishes loading
-    // This will be removed when we refactor to remove this component
-    let unbind;
-    if (ref.current) {
-      unbind = bind(ref.current, {
-        type: 'mousemove',
-        listener: () => {
-          setHideWrapper(true);
-          unbind();
-        }
-      });
-    }
-    return () => {
-      var _unbind;
-      return (_unbind = unbind) === null || _unbind === void 0 ? void 0 : _unbind();
-    };
-  }, []);
-  const onMouseEnter = useCallback(() => {
-    if (!isDragging.current) {
-      setHideWrapper(true);
-    }
-    const pos = getPos();
-    if (pos === undefined) {
-      return;
-    }
-    if (api && api.blockControls && !isDragging.current) {
-      var _api$core;
-      api === null || api === void 0 ? void 0 : (_api$core = api.core) === null || _api$core === void 0 ? void 0 : _api$core.actions.execute(api.blockControls.commands.showDragHandleAt(pos, anchorName, nodeType));
-    }
-  }, [getPos, isDragging, api, anchorName, nodeType]);
-
-  //THIS IS TRIGGERED A LOT!
-  const onSharedStateChange = useCallback(({
-    nextSharedState
-  }) => {
-    var _nextSharedState$acti;
-    if ((nextSharedState === null || nextSharedState === void 0 ? void 0 : (_nextSharedState$acti = nextSharedState.activeNode) === null || _nextSharedState$acti === void 0 ? void 0 : _nextSharedState$acti.anchorName) !== anchorName && !isDragging.current) {
-      setHideWrapper(false);
-    }
-    if (nextSharedState !== null && nextSharedState !== void 0 && nextSharedState.isDragging && !isDragging.current) {
-      isDragging.current = true;
-      setHideWrapper(true);
-    }
-    if ((nextSharedState === null || nextSharedState === void 0 ? void 0 : nextSharedState.isDragging) === false && isDragging.current) {
-      isDragging.current = false;
-      setHideWrapper(false);
-    }
-  }, [anchorName]);
-  useEffect(() => {
-    var _api$blockControls;
-    const unbind = api === null || api === void 0 ? void 0 : (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.sharedState.onChange(onSharedStateChange);
-    return () => {
-      unbind === null || unbind === void 0 ? void 0 : unbind();
-    };
-  }, [onSharedStateChange, api]);
-  useLayoutEffect(() => {
-    const supportsAnchor = CSS.supports('height', `anchor-size(${anchorName} height)`) && CSS.supports('top', `anchor(${anchorName} start)`);
-    if (supportsAnchor) {
-      setPos({
-        height: `anchor-size(${anchorName} height)`,
-        top: `anchor(${anchorName} start)`
-      });
-      return;
-    }
-    const calcPos = requestAnimationFrame(() => {
-      const dom = view.dom.querySelector(`[data-drag-handler-anchor-name="${anchorName}"]`);
-      if (!dom) {
-        return;
-      }
-      setPos({
-        height: `${dom.offsetHeight}px`,
-        top: getTopPosition(dom)
-      });
-    });
-    return () => cancelAnimationFrame(calcPos);
-  }, [view, anchorName]);
-  return jsx("div", {
-    ref: ref,
-    onMouseEnter: () => {
-      var _key$getState;
-      // Once onDragEnter handler is processed, wrapper for drop target is hidden
-      // This means wrapper for draggable is shown, triggering onMouseEnter and showing draggable's drag handle again
-      // hence we want to ignore it while we still dragging
-      if (!((_key$getState = key.getState(view.state)) !== null && _key$getState !== void 0 && _key$getState.isPMDragging)) {
-        onMouseEnter();
-      }
-    },
-    css: [basicStyles, !hideWrapper && mouseMoveWrapperStyles]
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-    ,
-    style: pos
-    // we want achieve the same result as onMouseEnter: make wrapper inactive and display drag handle next to drop target
-    // eslint-disable-next-line @atlaskit/design-system/no-direct-use-of-web-platform-drag-and-drop
-    ,
-    onDragEnter: onMouseEnter
-  });
-};