@atlaskit/editor-plugin-block-controls 1.4.31 → 1.4.32

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 1.4.32
+
+### Patch Changes
+
+- [#113591](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/113591)
+  [`cc5ac590d4c43`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/cc5ac590d4c43) -
+  [ED-23794] Fix the issue where prosemirror drag and drop stop working with block controls plugin
+  enabled
+- [#114565](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/114565)
+  [`9c4aee75822c7`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/9c4aee75822c7) -
+  Add analytic event for drag and drop click event
+
 ## 1.4.31
 
 ### Patch Changes

package/dist/cjs/plugin.js

@@ -91,7 +91,7 @@ var blockControlsPlugin = exports.blockControlsPlugin = function blockControlsPl
       }
     },
     getSharedState: function getSharedState(editorState) {
-      var _key$getState$isMenuO, _key$getState, _key$getState$activeN, _key$getState2, _key$getState$decorat, _key$getState3, _key$getState$isDragg, _key$getState4;
+      var _key$getState$isMenuO, _key$getState, _key$getState$activeN, _key$getState2, _key$getState$decorat, _key$getState3, _key$getState$isDragg, _key$getState4, _key$getState$isPMDra, _key$getState5;
       if (!editorState) {
         return undefined;
       }
@@ -99,7 +99,8 @@ var blockControlsPlugin = exports.blockControlsPlugin = function blockControlsPl
         isMenuOpen: (_key$getState$isMenuO = (_key$getState = _main.key.getState(editorState)) === null || _key$getState === void 0 ? void 0 : _key$getState.isMenuOpen) !== null && _key$getState$isMenuO !== void 0 ? _key$getState$isMenuO : false,
         activeNode: (_key$getState$activeN = (_key$getState2 = _main.key.getState(editorState)) === null || _key$getState2 === void 0 ? void 0 : _key$getState2.activeNode) !== null && _key$getState$activeN !== void 0 ? _key$getState$activeN : null,
         decorationState: (_key$getState$decorat = (_key$getState3 = _main.key.getState(editorState)) === null || _key$getState3 === void 0 ? void 0 : _key$getState3.decorationState) !== null && _key$getState$decorat !== void 0 ? _key$getState$decorat : [],
-        isDragging: (_key$getState$isDragg = (_key$getState4 = _main.key.getState(editorState)) === null || _key$getState4 === void 0 ? void 0 : _key$getState4.isDragging) !== null && _key$getState$isDragg !== void 0 ? _key$getState$isDragg : false
+        isDragging: (_key$getState$isDragg = (_key$getState4 = _main.key.getState(editorState)) === null || _key$getState4 === void 0 ? void 0 : _key$getState4.isDragging) !== null && _key$getState$isDragg !== void 0 ? _key$getState$isDragg : false,
+        isPMDragging: (_key$getState$isPMDra = (_key$getState5 = _main.key.getState(editorState)) === null || _key$getState5 === void 0 ? void 0 : _key$getState5.isPMDragging) !== null && _key$getState$isPMDra !== void 0 ? _key$getState$isPMDra : false
       };
     },
     contentComponent: function contentComponent() {

package/dist/cjs/pm-plugins/main.js

@@ -61,7 +61,8 @@ var destroyFn = function destroyFn(api) {
           })(tr);
         }
         return tr.setMeta(key, {
-          isDragging: false
+          isDragging: false,
+          isPMDragging: false
         });
       });
     }
@@ -76,7 +77,8 @@ var initialState = {
   isMenuOpen: false,
   editorHeight: 0,
   isResizerResizing: false,
-  isDocSizeLimitEnabled: false
+  isDocSizeLimitEnabled: false,
+  isPMDragging: false
 };
 if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.elements.drag-and-drop-doc-size-limit_7k4vq')) {
   initialState.isDocSizeLimitEnabled = true;
@@ -90,7 +92,7 @@ var createPlugin = exports.createPlugin = function createPlugin(api) {
         return initialState;
       },
       apply: function apply(tr, currentState, oldState, newState) {
-        var _meta$activeNode, _meta$activeNode2, _meta$isDragging, _meta$editorHeight;
+        var _meta$activeNode, _meta$activeNode2, _meta$isDragging, _meta$editorHeight, _meta$isPMDragging;
         if (initialState.isDocSizeLimitEnabled && newState.doc.nodeSize > DRAG_AND_DROP_DOC_SIZE_LIMIT) {
           return initialState;
         }
@@ -100,7 +102,8 @@ var createPlugin = exports.createPlugin = function createPlugin(api) {
           decorationState = currentState.decorationState,
           editorHeight = currentState.editorHeight,
           isResizerResizing = currentState.isResizerResizing,
-          isDragging = currentState.isDragging;
+          isDragging = currentState.isDragging,
+          isPMDragging = currentState.isPMDragging;
         var meta = tr.getMeta(key);
         // when creating analytics during drag/drop events, PM thinks the doc has changed
         // so tr.docChange is true and causes some decorations to not render
@@ -236,7 +239,8 @@ var createPlugin = exports.createPlugin = function createPlugin(api) {
           isMenuOpen: meta !== null && meta !== void 0 && meta.toggleMenu ? !isMenuOpen : isMenuOpen,
           editorHeight: (_meta$editorHeight = meta === null || meta === void 0 ? void 0 : meta.editorHeight) !== null && _meta$editorHeight !== void 0 ? _meta$editorHeight : currentState.editorHeight,
           isResizerResizing: isResizerResizing,
-          isDocSizeLimitEnabled: initialState.isDocSizeLimitEnabled
+          isDocSizeLimitEnabled: initialState.isDocSizeLimitEnabled,
+          isPMDragging: (_meta$isPMDragging = meta === null || meta === void 0 ? void 0 : meta.isPMDragging) !== null && _meta$isPMDragging !== void 0 ? _meta$isPMDragging : isPMDragging
         };
       }
     },
@@ -255,13 +259,19 @@ var createPlugin = exports.createPlugin = function createPlugin(api) {
           // prosemirror has sends a default transaction on drop (meta where uiEvent is 'drop'),
           // this duplicates the an empty version of the node it was dropping,
           // Adding some check here to prevent that if drop position is within activeNode
-          var state = view.state;
+          var state = view.state,
+            dispatch = view.dispatch;
           var pluginState = key.getState(state);
+          if (pluginState !== null && pluginState !== void 0 && pluginState.isPMDragging) {
+            dispatch(state.tr.setMeta(key, {
+              isPMDragging: false
+            }));
+          }
           if (!(event.target instanceof HTMLElement) || !(pluginState !== null && pluginState !== void 0 && pluginState.activeNode)) {
             return false;
           }
           var node = view.nodeDOM(pluginState === null || pluginState === void 0 || (_pluginState$activeNo = pluginState.activeNode) === null || _pluginState$activeNo === void 0 ? void 0 : _pluginState$activeNo.pos);
-          var isActiveNode = (node === null || node === void 0 ? void 0 : node.contains(event.target)) || event.target === node;
+          var isActiveNode = event.target === node;
           if (isActiveNode) {
             // Prevent the default drop behavior if the position is within the activeNode
             event.preventDefault();
@@ -269,6 +279,21 @@ var createPlugin = exports.createPlugin = function createPlugin(api) {
           }
           return false;
         },
+        dragstart: function dragstart(view) {
+          view.dispatch(view.state.tr.setMeta(key, {
+            isPMDragging: true
+          }));
+        },
+        dragend: function dragend(view) {
+          var _key$getState2;
+          var state = view.state,
+            dispatch = view.dispatch;
+          if ((_key$getState2 = key.getState(state)) !== null && _key$getState2 !== void 0 && _key$getState2.isPMDragging) {
+            dispatch(state.tr.setMeta(key, {
+              isPMDragging: false
+            }));
+          }
+        },
         mouseover: function mouseover(view, event) {
           if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2')) {
             (0, _handleMouseOver.handleMouseOver)(view, event, api);

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

@@ -94,6 +94,7 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
     var _api$core;
     setDragHandleSelected(!dragHandleSelected);
     api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(function (_ref2) {
+      var _api$analytics;
       var tr = _ref2.tr;
       if (start === undefined) {
         return tr;
@@ -102,6 +103,18 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
       tr.setMeta(_main.key, {
         pos: start
       });
+      var resolvedMovingNode = tr.doc.resolve(start);
+      var maybeNode = resolvedMovingNode.nodeAfter;
+      api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 || _api$analytics.actions.attachAnalyticsEvent({
+        eventType: _analytics.EVENT_TYPE.UI,
+        action: _analytics.ACTION.CLICKED,
+        actionSubject: _analytics.ACTION_SUBJECT.BUTTON,
+        actionSubjectId: _analytics.ACTION_SUBJECT_ID.ELEMENT_DRAG_HANDLE,
+        attributes: {
+          nodeDepth: resolvedMovingNode.depth,
+          nodeType: (maybeNode === null || maybeNode === void 0 ? void 0 : maybeNode.type.name) || ''
+        }
+      })(tr);
       return tr;
     });
     view.focus();
@@ -182,7 +195,7 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
           return;
         }
         api === null || api === void 0 || (_api$core4 = api.core) === null || _api$core4 === void 0 || _api$core4.actions.execute(function (_ref7) {
-          var _api$blockControls, _api$analytics;
+          var _api$blockControls, _api$analytics2;
           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
@@ -190,7 +203,7 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
           var resolvedMovingNode = tr.doc.resolve(start);
           var maybeNode = resolvedMovingNode.nodeAfter;
           tr.setMeta('scrollIntoView', false);
-          api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 || _api$analytics.actions.attachAnalyticsEvent({
+          api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 || _api$analytics2.actions.attachAnalyticsEvent({
             eventType: _analytics.EVENT_TYPE.UI,
             action: _analytics.ACTION.DRAGGED,
             actionSubject: _analytics.ACTION_SUBJECT.ELEMENT,

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

@@ -9,6 +9,7 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 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");
 /** @jsx jsx */
@@ -61,7 +62,7 @@ var MouseMoveWrapper = exports.MouseMoveWrapper = function MouseMoveWrapper(_ref
       return (_unbind = unbind) === null || _unbind === void 0 ? void 0 : _unbind();
     };
   }, []);
-  var onMouseEnter = (0, _react.useCallback)(function () {
+  var _onMouseEnter = (0, _react.useCallback)(function () {
     if (!isDragging.current) {
       setHideWrapper(true);
     }
@@ -123,10 +124,22 @@ var MouseMoveWrapper = exports.MouseMoveWrapper = function MouseMoveWrapper(_ref
   }, [view, anchorName]);
   return (0, _react2.jsx)("div", {
     ref: ref,
-    onMouseEnter: onMouseEnter,
+    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/plugin.js

@@ -79,7 +79,7 @@ export const blockControlsPlugin = ({
     }
   },
   getSharedState(editorState) {
-    var _key$getState$isMenuO, _key$getState, _key$getState$activeN, _key$getState2, _key$getState$decorat, _key$getState3, _key$getState$isDragg, _key$getState4;
+    var _key$getState$isMenuO, _key$getState, _key$getState$activeN, _key$getState2, _key$getState$decorat, _key$getState3, _key$getState$isDragg, _key$getState4, _key$getState$isPMDra, _key$getState5;
     if (!editorState) {
       return undefined;
     }
@@ -87,7 +87,8 @@ export const blockControlsPlugin = ({
       isMenuOpen: (_key$getState$isMenuO = (_key$getState = key.getState(editorState)) === null || _key$getState === void 0 ? void 0 : _key$getState.isMenuOpen) !== null && _key$getState$isMenuO !== void 0 ? _key$getState$isMenuO : false,
       activeNode: (_key$getState$activeN = (_key$getState2 = key.getState(editorState)) === null || _key$getState2 === void 0 ? void 0 : _key$getState2.activeNode) !== null && _key$getState$activeN !== void 0 ? _key$getState$activeN : null,
       decorationState: (_key$getState$decorat = (_key$getState3 = key.getState(editorState)) === null || _key$getState3 === void 0 ? void 0 : _key$getState3.decorationState) !== null && _key$getState$decorat !== void 0 ? _key$getState$decorat : [],
-      isDragging: (_key$getState$isDragg = (_key$getState4 = key.getState(editorState)) === null || _key$getState4 === void 0 ? void 0 : _key$getState4.isDragging) !== null && _key$getState$isDragg !== void 0 ? _key$getState$isDragg : false
+      isDragging: (_key$getState$isDragg = (_key$getState4 = key.getState(editorState)) === null || _key$getState4 === void 0 ? void 0 : _key$getState4.isDragging) !== null && _key$getState$isDragg !== void 0 ? _key$getState$isDragg : false,
+      isPMDragging: (_key$getState$isPMDra = (_key$getState5 = key.getState(editorState)) === null || _key$getState5 === void 0 ? void 0 : _key$getState5.isPMDragging) !== null && _key$getState$isPMDra !== void 0 ? _key$getState$isPMDra : false
     };
   },
   contentComponent() {

package/dist/es2019/pm-plugins/main.js

@@ -55,7 +55,8 @@ const destroyFn = api => {
           })(tr);
         }
         return tr.setMeta(key, {
-          isDragging: false
+          isDragging: false,
+          isPMDragging: false
         });
       });
     }
@@ -70,7 +71,8 @@ const initialState = {
   isMenuOpen: false,
   editorHeight: 0,
   isResizerResizing: false,
-  isDocSizeLimitEnabled: false
+  isDocSizeLimitEnabled: false,
+  isPMDragging: false
 };
 if (getBooleanFF('platform.editor.elements.drag-and-drop-doc-size-limit_7k4vq')) {
   initialState.isDocSizeLimitEnabled = true;
@@ -84,7 +86,7 @@ export const createPlugin = api => {
         return initialState;
       },
       apply(tr, currentState, oldState, newState) {
-        var _meta$activeNode, _meta$activeNode2, _meta$isDragging, _meta$editorHeight;
+        var _meta$activeNode, _meta$activeNode2, _meta$isDragging, _meta$editorHeight, _meta$isPMDragging;
         if (initialState.isDocSizeLimitEnabled && newState.doc.nodeSize > DRAG_AND_DROP_DOC_SIZE_LIMIT) {
           return initialState;
         }
@@ -95,7 +97,8 @@ export const createPlugin = api => {
           decorationState,
           editorHeight,
           isResizerResizing,
-          isDragging
+          isDragging,
+          isPMDragging
         } = currentState;
         const meta = tr.getMeta(key);
         // when creating analytics during drag/drop events, PM thinks the doc has changed
@@ -227,7 +230,8 @@ export const createPlugin = api => {
           isMenuOpen: meta !== null && meta !== void 0 && meta.toggleMenu ? !isMenuOpen : isMenuOpen,
           editorHeight: (_meta$editorHeight = meta === null || meta === void 0 ? void 0 : meta.editorHeight) !== null && _meta$editorHeight !== void 0 ? _meta$editorHeight : currentState.editorHeight,
           isResizerResizing: isResizerResizing,
-          isDocSizeLimitEnabled: initialState.isDocSizeLimitEnabled
+          isDocSizeLimitEnabled: initialState.isDocSizeLimitEnabled,
+          isPMDragging: (_meta$isPMDragging = meta === null || meta === void 0 ? void 0 : meta.isPMDragging) !== null && _meta$isPMDragging !== void 0 ? _meta$isPMDragging : isPMDragging
         };
       }
     },
@@ -247,14 +251,20 @@ export const createPlugin = api => {
           // this duplicates the an empty version of the node it was dropping,
           // Adding some check here to prevent that if drop position is within activeNode
           const {
-            state
+            state,
+            dispatch
           } = view;
           const pluginState = key.getState(state);
+          if (pluginState !== null && pluginState !== void 0 && pluginState.isPMDragging) {
+            dispatch(state.tr.setMeta(key, {
+              isPMDragging: false
+            }));
+          }
           if (!(event.target instanceof HTMLElement) || !(pluginState !== null && pluginState !== void 0 && pluginState.activeNode)) {
             return false;
           }
           const node = view.nodeDOM(pluginState === null || pluginState === void 0 ? void 0 : (_pluginState$activeNo = pluginState.activeNode) === null || _pluginState$activeNo === void 0 ? void 0 : _pluginState$activeNo.pos);
-          const isActiveNode = (node === null || node === void 0 ? void 0 : node.contains(event.target)) || event.target === node;
+          const isActiveNode = event.target === node;
           if (isActiveNode) {
             // Prevent the default drop behavior if the position is within the activeNode
             event.preventDefault();
@@ -262,6 +272,23 @@ export const createPlugin = api => {
           }
           return false;
         },
+        dragstart(view) {
+          view.dispatch(view.state.tr.setMeta(key, {
+            isPMDragging: true
+          }));
+        },
+        dragend(view) {
+          var _key$getState2;
+          const {
+            state,
+            dispatch
+          } = view;
+          if ((_key$getState2 = key.getState(state)) !== null && _key$getState2 !== void 0 && _key$getState2.isPMDragging) {
+            dispatch(state.tr.setMeta(key, {
+              isPMDragging: false
+            }));
+          }
+        },
         mouseover: (view, event) => {
           if (getBooleanFF('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2')) {
             handleMouseOver(view, event, api);

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

@@ -81,6 +81,7 @@ export const DragHandle = ({
     api === null || api === void 0 ? void 0 : (_api$core = api.core) === null || _api$core === void 0 ? void 0 : _api$core.actions.execute(({
       tr
     }) => {
+      var _api$analytics;
       if (start === undefined) {
         return tr;
       }
@@ -88,6 +89,18 @@ export const DragHandle = ({
       tr.setMeta(key, {
         pos: start
       });
+      const resolvedMovingNode = tr.doc.resolve(start);
+      const maybeNode = resolvedMovingNode.nodeAfter;
+      api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions.attachAnalyticsEvent({
+        eventType: EVENT_TYPE.UI,
+        action: ACTION.CLICKED,
+        actionSubject: ACTION_SUBJECT.BUTTON,
+        actionSubjectId: ACTION_SUBJECT_ID.ELEMENT_DRAG_HANDLE,
+        attributes: {
+          nodeDepth: resolvedMovingNode.depth,
+          nodeType: (maybeNode === null || maybeNode === void 0 ? void 0 : maybeNode.type.name) || ''
+        }
+      })(tr);
       return tr;
     });
     view.focus();
@@ -172,14 +185,14 @@ export const DragHandle = ({
         api === null || api === void 0 ? void 0 : (_api$core4 = api.core) === null || _api$core4 === void 0 ? void 0 : _api$core4.actions.execute(({
           tr
         }) => {
-          var _api$blockControls, _api$analytics;
+          var _api$blockControls, _api$analytics2;
           api === null || api === void 0 ? void 0 : (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.commands.setNodeDragged(start, anchorName, nodeType)({
             tr
           });
           const resolvedMovingNode = tr.doc.resolve(start);
           const maybeNode = resolvedMovingNode.nodeAfter;
           tr.setMeta('scrollIntoView', false);
-          api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions.attachAnalyticsEvent({
+          api === null || api === void 0 ? void 0 : (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions.attachAnalyticsEvent({
             eventType: EVENT_TYPE.UI,
             action: ACTION.DRAGGED,
             actionSubject: ACTION_SUBJECT.ELEMENT,

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

@@ -4,6 +4,7 @@ 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({
@@ -108,10 +109,22 @@ export const MouseMoveWrapper = ({
   }, [view, anchorName]);
   return jsx("div", {
     ref: ref,
-    onMouseEnter: onMouseEnter,
+    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
   });
 };

package/dist/esm/plugin.js

@@ -84,7 +84,7 @@ export var blockControlsPlugin = function blockControlsPlugin(_ref) {
       }
     },
     getSharedState: function getSharedState(editorState) {
-      var _key$getState$isMenuO, _key$getState, _key$getState$activeN, _key$getState2, _key$getState$decorat, _key$getState3, _key$getState$isDragg, _key$getState4;
+      var _key$getState$isMenuO, _key$getState, _key$getState$activeN, _key$getState2, _key$getState$decorat, _key$getState3, _key$getState$isDragg, _key$getState4, _key$getState$isPMDra, _key$getState5;
       if (!editorState) {
         return undefined;
       }
@@ -92,7 +92,8 @@ export var blockControlsPlugin = function blockControlsPlugin(_ref) {
         isMenuOpen: (_key$getState$isMenuO = (_key$getState = key.getState(editorState)) === null || _key$getState === void 0 ? void 0 : _key$getState.isMenuOpen) !== null && _key$getState$isMenuO !== void 0 ? _key$getState$isMenuO : false,
         activeNode: (_key$getState$activeN = (_key$getState2 = key.getState(editorState)) === null || _key$getState2 === void 0 ? void 0 : _key$getState2.activeNode) !== null && _key$getState$activeN !== void 0 ? _key$getState$activeN : null,
         decorationState: (_key$getState$decorat = (_key$getState3 = key.getState(editorState)) === null || _key$getState3 === void 0 ? void 0 : _key$getState3.decorationState) !== null && _key$getState$decorat !== void 0 ? _key$getState$decorat : [],
-        isDragging: (_key$getState$isDragg = (_key$getState4 = key.getState(editorState)) === null || _key$getState4 === void 0 ? void 0 : _key$getState4.isDragging) !== null && _key$getState$isDragg !== void 0 ? _key$getState$isDragg : false
+        isDragging: (_key$getState$isDragg = (_key$getState4 = key.getState(editorState)) === null || _key$getState4 === void 0 ? void 0 : _key$getState4.isDragging) !== null && _key$getState$isDragg !== void 0 ? _key$getState$isDragg : false,
+        isPMDragging: (_key$getState$isPMDra = (_key$getState5 = key.getState(editorState)) === null || _key$getState5 === void 0 ? void 0 : _key$getState5.isPMDragging) !== null && _key$getState$isPMDra !== void 0 ? _key$getState$isPMDra : false
       };
     },
     contentComponent: function contentComponent() {

package/dist/esm/pm-plugins/main.js

@@ -54,7 +54,8 @@ var destroyFn = function destroyFn(api) {
           })(tr);
         }
         return tr.setMeta(key, {
-          isDragging: false
+          isDragging: false,
+          isPMDragging: false
         });
       });
     }
@@ -69,7 +70,8 @@ var initialState = {
   isMenuOpen: false,
   editorHeight: 0,
   isResizerResizing: false,
-  isDocSizeLimitEnabled: false
+  isDocSizeLimitEnabled: false,
+  isPMDragging: false
 };
 if (getBooleanFF('platform.editor.elements.drag-and-drop-doc-size-limit_7k4vq')) {
   initialState.isDocSizeLimitEnabled = true;
@@ -83,7 +85,7 @@ export var createPlugin = function createPlugin(api) {
         return initialState;
       },
       apply: function apply(tr, currentState, oldState, newState) {
-        var _meta$activeNode, _meta$activeNode2, _meta$isDragging, _meta$editorHeight;
+        var _meta$activeNode, _meta$activeNode2, _meta$isDragging, _meta$editorHeight, _meta$isPMDragging;
         if (initialState.isDocSizeLimitEnabled && newState.doc.nodeSize > DRAG_AND_DROP_DOC_SIZE_LIMIT) {
           return initialState;
         }
@@ -93,7 +95,8 @@ export var createPlugin = function createPlugin(api) {
           decorationState = currentState.decorationState,
           editorHeight = currentState.editorHeight,
           isResizerResizing = currentState.isResizerResizing,
-          isDragging = currentState.isDragging;
+          isDragging = currentState.isDragging,
+          isPMDragging = currentState.isPMDragging;
         var meta = tr.getMeta(key);
         // when creating analytics during drag/drop events, PM thinks the doc has changed
         // so tr.docChange is true and causes some decorations to not render
@@ -229,7 +232,8 @@ export var createPlugin = function createPlugin(api) {
           isMenuOpen: meta !== null && meta !== void 0 && meta.toggleMenu ? !isMenuOpen : isMenuOpen,
           editorHeight: (_meta$editorHeight = meta === null || meta === void 0 ? void 0 : meta.editorHeight) !== null && _meta$editorHeight !== void 0 ? _meta$editorHeight : currentState.editorHeight,
           isResizerResizing: isResizerResizing,
-          isDocSizeLimitEnabled: initialState.isDocSizeLimitEnabled
+          isDocSizeLimitEnabled: initialState.isDocSizeLimitEnabled,
+          isPMDragging: (_meta$isPMDragging = meta === null || meta === void 0 ? void 0 : meta.isPMDragging) !== null && _meta$isPMDragging !== void 0 ? _meta$isPMDragging : isPMDragging
         };
       }
     },
@@ -248,13 +252,19 @@ export var createPlugin = function createPlugin(api) {
           // prosemirror has sends a default transaction on drop (meta where uiEvent is 'drop'),
           // this duplicates the an empty version of the node it was dropping,
           // Adding some check here to prevent that if drop position is within activeNode
-          var state = view.state;
+          var state = view.state,
+            dispatch = view.dispatch;
           var pluginState = key.getState(state);
+          if (pluginState !== null && pluginState !== void 0 && pluginState.isPMDragging) {
+            dispatch(state.tr.setMeta(key, {
+              isPMDragging: false
+            }));
+          }
           if (!(event.target instanceof HTMLElement) || !(pluginState !== null && pluginState !== void 0 && pluginState.activeNode)) {
             return false;
           }
           var node = view.nodeDOM(pluginState === null || pluginState === void 0 || (_pluginState$activeNo = pluginState.activeNode) === null || _pluginState$activeNo === void 0 ? void 0 : _pluginState$activeNo.pos);
-          var isActiveNode = (node === null || node === void 0 ? void 0 : node.contains(event.target)) || event.target === node;
+          var isActiveNode = event.target === node;
           if (isActiveNode) {
             // Prevent the default drop behavior if the position is within the activeNode
             event.preventDefault();
@@ -262,6 +272,21 @@ export var createPlugin = function createPlugin(api) {
           }
           return false;
         },
+        dragstart: function dragstart(view) {
+          view.dispatch(view.state.tr.setMeta(key, {
+            isPMDragging: true
+          }));
+        },
+        dragend: function dragend(view) {
+          var _key$getState2;
+          var state = view.state,
+            dispatch = view.dispatch;
+          if ((_key$getState2 = key.getState(state)) !== null && _key$getState2 !== void 0 && _key$getState2.isPMDragging) {
+            dispatch(state.tr.setMeta(key, {
+              isPMDragging: false
+            }));
+          }
+        },
         mouseover: function mouseover(view, event) {
           if (getBooleanFF('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2')) {
             handleMouseOver(view, event, api);

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

@@ -86,6 +86,7 @@ export var DragHandle = function DragHandle(_ref) {
     var _api$core;
     setDragHandleSelected(!dragHandleSelected);
     api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(function (_ref2) {
+      var _api$analytics;
       var tr = _ref2.tr;
       if (start === undefined) {
         return tr;
@@ -94,6 +95,18 @@ export var DragHandle = function DragHandle(_ref) {
       tr.setMeta(key, {
         pos: start
       });
+      var resolvedMovingNode = tr.doc.resolve(start);
+      var maybeNode = resolvedMovingNode.nodeAfter;
+      api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 || _api$analytics.actions.attachAnalyticsEvent({
+        eventType: EVENT_TYPE.UI,
+        action: ACTION.CLICKED,
+        actionSubject: ACTION_SUBJECT.BUTTON,
+        actionSubjectId: ACTION_SUBJECT_ID.ELEMENT_DRAG_HANDLE,
+        attributes: {
+          nodeDepth: resolvedMovingNode.depth,
+          nodeType: (maybeNode === null || maybeNode === void 0 ? void 0 : maybeNode.type.name) || ''
+        }
+      })(tr);
       return tr;
     });
     view.focus();
@@ -174,7 +187,7 @@ export var DragHandle = function DragHandle(_ref) {
           return;
         }
         api === null || api === void 0 || (_api$core4 = api.core) === null || _api$core4 === void 0 || _api$core4.actions.execute(function (_ref7) {
-          var _api$blockControls, _api$analytics;
+          var _api$blockControls, _api$analytics2;
           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
@@ -182,7 +195,7 @@ export var DragHandle = function DragHandle(_ref) {
           var resolvedMovingNode = tr.doc.resolve(start);
           var maybeNode = resolvedMovingNode.nodeAfter;
           tr.setMeta('scrollIntoView', false);
-          api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 || _api$analytics.actions.attachAnalyticsEvent({
+          api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 || _api$analytics2.actions.attachAnalyticsEvent({
             eventType: EVENT_TYPE.UI,
             action: ACTION.DRAGGED,
             actionSubject: ACTION_SUBJECT.ELEMENT,

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

@@ -5,6 +5,7 @@ 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';
 var basicStyles = css({
@@ -53,7 +54,7 @@ export var MouseMoveWrapper = function MouseMoveWrapper(_ref) {
       return (_unbind = unbind) === null || _unbind === void 0 ? void 0 : _unbind();
     };
   }, []);
-  var onMouseEnter = useCallback(function () {
+  var _onMouseEnter = useCallback(function () {
     if (!isDragging.current) {
       setHideWrapper(true);
     }
@@ -115,10 +116,22 @@ export var MouseMoveWrapper = function MouseMoveWrapper(_ref) {
   }, [view, anchorName]);
   return jsx("div", {
     ref: ref,
-    onMouseEnter: onMouseEnter,
+    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 = 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/types/pm-plugins/main.d.ts

@@ -13,4 +13,5 @@ export declare const createPlugin: (api: ExtractInjectionAPI<BlockControlsPlugin
     editorHeight: any;
     isResizerResizing: boolean;
     isDocSizeLimitEnabled: boolean;
+    isPMDragging: any;
 }>;

package/dist/types/types.d.ts

@@ -17,6 +17,10 @@ export interface PluginState {
     } | null;
     isResizerResizing: boolean;
     isDocSizeLimitEnabled: boolean;
+    /**
+     * is dragging the node without using drag handle, i,e, native prosemirror DnD
+     */
+    isPMDragging: boolean;
 }
 export type ReleaseHiddenDecoration = () => boolean | undefined;
 export type BlockControlsSharedState = {
@@ -27,6 +31,7 @@ export type BlockControlsSharedState = {
     } | null;
     decorationState: DecorationState;
     isDragging: boolean;
+    isPMDragging: boolean;
 } | undefined;
 export type BlockControlsPlugin = NextEditorPlugin<'blockControls', {
     dependencies: [

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

@@ -13,4 +13,5 @@ export declare const createPlugin: (api: ExtractInjectionAPI<BlockControlsPlugin
     editorHeight: any;
     isResizerResizing: boolean;
     isDocSizeLimitEnabled: boolean;
+    isPMDragging: any;
 }>;

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

@@ -17,6 +17,10 @@ export interface PluginState {
     } | null;
     isResizerResizing: boolean;
     isDocSizeLimitEnabled: boolean;
+    /**
+     * is dragging the node without using drag handle, i,e, native prosemirror DnD
+     */
+    isPMDragging: boolean;
 }
 export type ReleaseHiddenDecoration = () => boolean | undefined;
 export type BlockControlsSharedState = {
@@ -27,6 +31,7 @@ export type BlockControlsSharedState = {
     } | null;
     decorationState: DecorationState;
     isDragging: boolean;
+    isPMDragging: boolean;
 } | undefined;
 export type BlockControlsPlugin = NextEditorPlugin<'blockControls', {
     dependencies: [

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-block-controls",
-	"version": "1.4.31",
+	"version": "1.4.32",
 	"description": "Block controls plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",