@atlaskit/editor-plugin-block-controls 1.4.15 → 1.4.17

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 1.4.17
+
+### Patch Changes
+
+- [#110808](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/110808)
+  [`3ae32439b454c`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/3ae32439b454c) -
+  ED-23725 Fix issue where drag and drop breaks after node type changes and when text selection is
+  not allowed if user moves mouse to node before page finishes loading
+
+## 1.4.16
+
+### Patch Changes
+
+- [#108805](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/108805)
+  [`3695cb26b9899`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/3695cb26b9899) -
+  Add analytic events for drag events
+- Updated dependencies
+
 ## 1.4.15
 
 ### Patch Changes

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

@@ -7,11 +7,48 @@ Object.defineProperty(exports, "__esModule", {
 exports.key = exports.createPlugin = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _rafSchd = _interopRequireDefault(require("raf-schd"));
+var _analytics = require("@atlaskit/editor-common/analytics");
 var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _view = require("@atlaskit/editor-prosemirror/view");
+var _adapter = require("@atlaskit/pragmatic-drag-and-drop/element/adapter");
 var _decorations = require("./decorations");
 var key = exports.key = new _state.PluginKey('blockControls');
+var destroyFn = function destroyFn(api) {
+  return (0, _adapter.monitorForElements)({
+    canMonitor: function canMonitor(_ref) {
+      var source = _ref.source;
+      return source.data.type === 'element';
+    },
+    onDrop: function onDrop(_ref2) {
+      var location = _ref2.location,
+        source = _ref2.source;
+      // if no drop targets are rendered, assume that drop is invalid
+      if (location.current.dropTargets.length === 0) {
+        var _api$core;
+        var _ref3 = source.data,
+          start = _ref3.start;
+        api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(function (_ref4) {
+          var _api$analytics;
+          var tr = _ref4.tr;
+          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.CANCELLED,
+            actionSubject: _analytics.ACTION_SUBJECT.DRAG,
+            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;
+        });
+      }
+    }
+  });
+};
 var createPlugin = exports.createPlugin = function createPlugin(api) {
   return new _safePlugin.SafePlugin({
     key: key,
@@ -52,8 +89,8 @@ var createPlugin = exports.createPlugin = function createPlugin(api) {
 
         // Remove previous drag handle widget and draw new drag handle widget when activeNode changes
         if (meta !== null && meta !== void 0 && meta.activeNode && (meta === null || meta === void 0 ? void 0 : meta.activeNode.pos) !== (activeNode === null || activeNode === void 0 ? void 0 : activeNode.pos) && (meta === null || meta === void 0 ? void 0 : meta.activeNode.anchorName) !== (activeNode === null || activeNode === void 0 ? void 0 : activeNode.anchorName) && api) {
-          var oldHandle = decorations.find().filter(function (_ref) {
-            var spec = _ref.spec;
+          var oldHandle = decorations.find().filter(function (_ref5) {
+            var spec = _ref5.spec;
             return spec.id === 'drag-handle';
           });
           decorations = decorations.remove(oldHandle);
@@ -72,8 +109,8 @@ var createPlugin = exports.createPlugin = function createPlugin(api) {
 
         // Remove drop target decoration when dragging stops
         if ((meta === null || meta === void 0 ? void 0 : meta.isDragging) === false && !tr.docChanged) {
-          var dropTargetDecs = decorations.find().filter(function (_ref2) {
-            var spec = _ref2.spec;
+          var dropTargetDecs = decorations.find().filter(function (_ref6) {
+            var spec = _ref6.spec;
             return spec.type === 'drop-target-decoration';
           });
           decorations = decorations.remove(dropTargetDecs);
@@ -81,9 +118,9 @@ var createPlugin = exports.createPlugin = function createPlugin(api) {
 
         // Map drop target decoration positions when the document changes
         if (tr.docChanged && currentState.isDragging) {
-          decorationState = decorationState.map(function (_ref3) {
-            var index = _ref3.index,
-              pos = _ref3.pos;
+          decorationState = decorationState.map(function (_ref7) {
+            var index = _ref7.index,
+              pos = _ref7.pos;
             return {
               index: index,
               pos: tr.mapping.map(pos)
@@ -143,6 +180,7 @@ var createPlugin = exports.createPlugin = function createPlugin(api) {
       return {
         destroy: function destroy() {
           resizeObserver.unobserve(dom);
+          return destroyFn(api);
         }
       };
     }

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

@@ -105,6 +105,12 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
     }
     return (0, _adapter.draggable)({
       element: element,
+      getInitialData: function getInitialData() {
+        return {
+          type: 'element',
+          start: start
+        };
+      },
       onGenerateDragPreview: function onGenerateDragPreview(_ref4) {
         var nativeSetDragImage = _ref4.nativeSetDragImage;
         (0, _setCustomNativeDragPreview.setCustomNativeDragPreview)({

package/dist/cjs/ui/drop-target.js

@@ -8,6 +8,7 @@ exports.DropTarget = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("react");
 var _react2 = require("@emotion/react");
+var _analytics = require("@atlaskit/editor-common/analytics");
 var _hooks = require("@atlaskit/editor-common/hooks");
 var _element = require("@atlaskit/pragmatic-drag-and-drop-auto-scroll/element");
 var _box = require("@atlaskit/pragmatic-drag-and-drop-react-drop-indicator/box");
@@ -62,7 +63,7 @@ var DropTarget = exports.DropTarget = function DropTarget(_ref) {
         scrollable.style.setProperty('scroll-behavior', 'unset');
       },
       onDragEnter: function onDragEnter() {
-        return setIsDraggedOver(true);
+        setIsDraggedOver(true);
       },
       onDragLeave: function onDragLeave() {
         return setIsDraggedOver(false);
@@ -81,9 +82,25 @@ var DropTarget = exports.DropTarget = function DropTarget(_ref) {
           }) || {},
           pos = _ref3.pos;
         if (activeNode && pos !== undefined) {
-          var _api$core, _api$blockControls2;
+          var _api$core;
           var start = activeNode.pos;
-          api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(api === null || api === void 0 || (_api$blockControls2 = api.blockControls) === null || _api$blockControls2 === void 0 || (_api$blockControls2 = _api$blockControls2.commands) === null || _api$blockControls2 === void 0 ? void 0 : _api$blockControls2.moveNode(start, pos));
+          api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(function (state) {
+            var _api$blockControls2, _api$analytics;
+            var resolvedMovingNode = state.tr.doc.resolve(start);
+            var maybeNode = resolvedMovingNode.nodeAfter;
+            api === null || api === void 0 || (_api$blockControls2 = api.blockControls) === null || _api$blockControls2 === void 0 || (_api$blockControls2 = _api$blockControls2.commands) === null || _api$blockControls2 === void 0 || _api$blockControls2.moveNode(start, pos)(state);
+            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.DRAGGED,
+              actionSubject: _analytics.ACTION_SUBJECT.ELEMENT,
+              actionSubjectId: _analytics.ACTION_SUBJECT_ID.ELEMENT_DRAG_HANDLE,
+              attributes: {
+                nodeDepth: resolvedMovingNode.depth,
+                nodeType: (maybeNode === null || maybeNode === void 0 ? void 0 : maybeNode.type.name) || ''
+              }
+            })(state.tr);
+            return state.tr;
+          });
         }
       }
     }));
@@ -96,7 +113,7 @@ var DropTarget = exports.DropTarget = function DropTarget(_ref) {
       ref: ref,
       "data-testid": "block-ctrl-drop-target"
     },
-    //4px gap to clear expand node border
+    // 4px gap to clear expand node border
     isDraggedOver && (0, _react2.jsx)("div", {
       css: styleDropIndicator,
       style: {

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

@@ -8,6 +8,7 @@ exports.MouseMoveWrapper = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("react");
 var _react2 = require("@emotion/react");
+var _hooks = require("@atlaskit/editor-common/hooks");
 var _dragHandlePositions = require("../utils/drag-handle-positions");
 /** @jsx jsx */
 
@@ -22,16 +23,22 @@ var mouseMoveWrapperStyles = (0, _react2.css)({
   zIndex: 1
 });
 var MouseMoveWrapper = exports.MouseMoveWrapper = function MouseMoveWrapper(_ref) {
+  var _blockControlsState$a;
   var view = _ref.view,
     api = _ref.api,
     anchorName = _ref.anchorName,
     nodeType = _ref.nodeType,
     getPos = _ref.getPos;
+  var nodePos = (0, _react.useMemo)(function () {
+    return getPos();
+  }, [getPos]);
+  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['blockControls']),
+    blockControlsState = _useSharedPluginState.blockControlsState;
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     isDragging = _useState2[0],
     setIsDragging = _useState2[1];
-  var _useState3 = (0, _react.useState)(false),
+  var _useState3 = (0, _react.useState)((blockControlsState === null || blockControlsState === void 0 || (_blockControlsState$a = blockControlsState.activeNode) === null || _blockControlsState$a === void 0 ? void 0 : _blockControlsState$a.pos) === nodePos),
     _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
     hideWrapper = _useState4[0],
     setHideWrapper = _useState4[1];
@@ -43,38 +50,36 @@ var MouseMoveWrapper = exports.MouseMoveWrapper = function MouseMoveWrapper(_ref
     if (!isDragging) {
       setHideWrapper(true);
     }
-    var pos = getPos();
-    if (pos === undefined) {
+    if (nodePos === undefined) {
       return;
     }
     if (api && api.blockControls && !isDragging) {
       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));
+      api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(api.blockControls.commands.showDragHandleAt(nodePos, anchorName, nodeType));
     }
-  }, [setHideWrapper, isDragging, api, getPos, anchorName, nodeType]);
+  }, [setHideWrapper, isDragging, api, nodePos, anchorName, nodeType]);
   (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(function (_ref2) {
       var _nextSharedState$acti;
       var nextSharedState = _ref2.nextSharedState;
-      var pos = getPos();
       setIsDragging(Boolean(nextSharedState === null || nextSharedState === void 0 ? void 0 : nextSharedState.isDragging));
       if (!(nextSharedState !== null && nextSharedState !== void 0 && nextSharedState.activeNode)) {
         return;
       }
-      if ((nextSharedState === null || nextSharedState === void 0 || (_nextSharedState$acti = nextSharedState.activeNode) === null || _nextSharedState$acti === void 0 ? void 0 : _nextSharedState$acti.pos) !== pos && !(nextSharedState !== null && nextSharedState !== void 0 && nextSharedState.isDragging)) {
+      if ((nextSharedState === null || nextSharedState === void 0 || (_nextSharedState$acti = nextSharedState.activeNode) === null || _nextSharedState$acti === void 0 ? void 0 : _nextSharedState$acti.pos) !== nodePos && !(nextSharedState !== null && nextSharedState !== void 0 && nextSharedState.isDragging)) {
         setHideWrapper(false);
         return;
       }
       if (nextSharedState !== null && nextSharedState !== void 0 && nextSharedState.isDragging) {
-        setHideWrapper(nextSharedState === null || nextSharedState === void 0 ? void 0 : nextSharedState.isDragging);
+        setHideWrapper(true);
         return;
       }
     });
     return function () {
       unbind === null || unbind === void 0 || unbind();
     };
-  }, [getPos, api]);
+  }, [nodePos, api]);
   (0, _react.useLayoutEffect)(function () {
     var supportsAnchor = CSS.supports('height', "anchor-size(".concat(anchorName, " height)")) && CSS.supports('top', "anchor(".concat(anchorName, " start)"));
     if (supportsAnchor) {

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

@@ -1,9 +1,48 @@
 import rafSchedule from 'raf-schd';
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
 import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
+import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import { dragHandleDecoration, dropTargetDecorations, mouseMoveWrapperDecorations, nodeDecorations } from './decorations';
 export const key = new PluginKey('blockControls');
+const destroyFn = api => {
+  return monitorForElements({
+    canMonitor: ({
+      source
+    }) => source.data.type === 'element',
+    onDrop: ({
+      location,
+      source
+    }) => {
+      // if no drop targets are rendered, assume that drop is invalid
+      if (location.current.dropTargets.length === 0) {
+        var _api$core;
+        const {
+          start
+        } = source.data;
+        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;
+          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.CANCELLED,
+            actionSubject: ACTION_SUBJECT.DRAG,
+            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;
+        });
+      }
+    }
+  });
+};
 export const createPlugin = api => {
   return new SafePlugin({
     key,
@@ -137,6 +176,7 @@ export const createPlugin = api => {
       return {
         destroy() {
           resizeObserver.unobserve(dom);
+          return destroyFn(api);
         }
       };
     }

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

@@ -97,6 +97,10 @@ export const DragHandle = ({
     }
     return draggable({
       element,
+      getInitialData: () => ({
+        type: 'element',
+        start
+      }),
       onGenerateDragPreview: ({
         nativeSetDragImage
       }) => {

package/dist/es2019/ui/drop-target.js

@@ -1,6 +1,7 @@
 /** @jsx jsx */
 import { useEffect, useRef, useState } from 'react';
 import { css, jsx } from '@emotion/react';
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { autoScrollForElements } from '@atlaskit/pragmatic-drag-and-drop-auto-scroll/element';
 import { DropIndicator } from '@atlaskit/pragmatic-drag-and-drop-react-drop-indicator/box';
@@ -49,7 +50,9 @@ export const DropTarget = ({
       onDrag: () => {
         scrollable.style.setProperty('scroll-behavior', 'unset');
       },
-      onDragEnter: () => setIsDraggedOver(true),
+      onDragEnter: () => {
+        setIsDraggedOver(true);
+      },
       onDragLeave: () => setIsDraggedOver(false),
       onDrop: () => {
         var _api$blockControls;
@@ -65,11 +68,27 @@ export const DropTarget = ({
           pos
         } = decorationState.find(dec => dec.index === index) || {};
         if (activeNode && pos !== undefined) {
-          var _api$core, _api$blockControls2, _api$blockControls2$c;
+          var _api$core;
           const {
             pos: start
           } = activeNode;
-          api === null || api === void 0 ? void 0 : (_api$core = api.core) === null || _api$core === void 0 ? void 0 : _api$core.actions.execute(api === null || api === void 0 ? void 0 : (_api$blockControls2 = api.blockControls) === null || _api$blockControls2 === void 0 ? void 0 : (_api$blockControls2$c = _api$blockControls2.commands) === null || _api$blockControls2$c === void 0 ? void 0 : _api$blockControls2$c.moveNode(start, pos));
+          api === null || api === void 0 ? void 0 : (_api$core = api.core) === null || _api$core === void 0 ? void 0 : _api$core.actions.execute(state => {
+            var _api$blockControls2, _api$blockControls2$c, _api$analytics;
+            const resolvedMovingNode = state.tr.doc.resolve(start);
+            const maybeNode = resolvedMovingNode.nodeAfter;
+            api === null || api === void 0 ? void 0 : (_api$blockControls2 = api.blockControls) === null || _api$blockControls2 === void 0 ? void 0 : (_api$blockControls2$c = _api$blockControls2.commands) === null || _api$blockControls2$c === void 0 ? void 0 : _api$blockControls2$c.moveNode(start, pos)(state);
+            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.DRAGGED,
+              actionSubject: ACTION_SUBJECT.ELEMENT,
+              actionSubjectId: ACTION_SUBJECT_ID.ELEMENT_DRAG_HANDLE,
+              attributes: {
+                nodeDepth: resolvedMovingNode.depth,
+                nodeType: (maybeNode === null || maybeNode === void 0 ? void 0 : maybeNode.type.name) || ''
+              }
+            })(state.tr);
+            return state.tr;
+          });
         }
       }
     }));
@@ -82,7 +101,7 @@ export const DropTarget = ({
       ref: ref,
       "data-testid": "block-ctrl-drop-target"
     },
-    //4px gap to clear expand node border
+    // 4px gap to clear expand node border
     isDraggedOver && jsx("div", {
       css: styleDropIndicator,
       style: {

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

@@ -1,6 +1,7 @@
 /** @jsx jsx */
-import { useCallback, useEffect, useLayoutEffect, useState } from 'react';
+import { useCallback, useEffect, useLayoutEffect, useMemo, useState } from 'react';
 import { css, jsx } from '@emotion/react';
+import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { getTopPosition } from '../utils/drag-handle-positions';
 const basicStyles = css({
   position: 'absolute',
@@ -19,46 +20,49 @@ export const MouseMoveWrapper = ({
   nodeType,
   getPos
 }) => {
+  var _blockControlsState$a;
+  const nodePos = useMemo(() => getPos(), [getPos]);
+  const {
+    blockControlsState
+  } = useSharedPluginState(api, ['blockControls']);
   const [isDragging, setIsDragging] = useState(false);
-  const [hideWrapper, setHideWrapper] = useState(false);
+  const [hideWrapper, setHideWrapper] = useState((blockControlsState === null || blockControlsState === void 0 ? void 0 : (_blockControlsState$a = blockControlsState.activeNode) === null || _blockControlsState$a === void 0 ? void 0 : _blockControlsState$a.pos) === nodePos);
   const [pos, setPos] = useState();
   const onMouseEnter = useCallback(() => {
     if (!isDragging) {
       setHideWrapper(true);
     }
-    const pos = getPos();
-    if (pos === undefined) {
+    if (nodePos === undefined) {
       return;
     }
     if (api && api.blockControls && !isDragging) {
       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));
+      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(nodePos, anchorName, nodeType));
     }
-  }, [setHideWrapper, isDragging, api, getPos, anchorName, nodeType]);
+  }, [setHideWrapper, isDragging, api, nodePos, anchorName, nodeType]);
   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(({
       nextSharedState
     }) => {
       var _nextSharedState$acti;
-      const pos = getPos();
       setIsDragging(Boolean(nextSharedState === null || nextSharedState === void 0 ? void 0 : nextSharedState.isDragging));
       if (!(nextSharedState !== null && nextSharedState !== void 0 && nextSharedState.activeNode)) {
         return;
       }
-      if ((nextSharedState === null || nextSharedState === void 0 ? void 0 : (_nextSharedState$acti = nextSharedState.activeNode) === null || _nextSharedState$acti === void 0 ? void 0 : _nextSharedState$acti.pos) !== pos && !(nextSharedState !== null && nextSharedState !== void 0 && nextSharedState.isDragging)) {
+      if ((nextSharedState === null || nextSharedState === void 0 ? void 0 : (_nextSharedState$acti = nextSharedState.activeNode) === null || _nextSharedState$acti === void 0 ? void 0 : _nextSharedState$acti.pos) !== nodePos && !(nextSharedState !== null && nextSharedState !== void 0 && nextSharedState.isDragging)) {
         setHideWrapper(false);
         return;
       }
       if (nextSharedState !== null && nextSharedState !== void 0 && nextSharedState.isDragging) {
-        setHideWrapper(nextSharedState === null || nextSharedState === void 0 ? void 0 : nextSharedState.isDragging);
+        setHideWrapper(true);
         return;
       }
     });
     return () => {
       unbind === null || unbind === void 0 ? void 0 : unbind();
     };
-  }, [getPos, api]);
+  }, [nodePos, api]);
   useLayoutEffect(() => {
     const supportsAnchor = CSS.supports('height', `anchor-size(${anchorName} height)`) && CSS.supports('top', `anchor(${anchorName} start)`);
     if (supportsAnchor) {

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

@@ -1,10 +1,47 @@
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import rafSchedule from 'raf-schd';
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
 import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
+import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import { dragHandleDecoration, dropTargetDecorations, mouseMoveWrapperDecorations, nodeDecorations } from './decorations';
 export var key = new PluginKey('blockControls');
+var destroyFn = function destroyFn(api) {
+  return monitorForElements({
+    canMonitor: function canMonitor(_ref) {
+      var source = _ref.source;
+      return source.data.type === 'element';
+    },
+    onDrop: function onDrop(_ref2) {
+      var location = _ref2.location,
+        source = _ref2.source;
+      // if no drop targets are rendered, assume that drop is invalid
+      if (location.current.dropTargets.length === 0) {
+        var _api$core;
+        var _ref3 = source.data,
+          start = _ref3.start;
+        api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(function (_ref4) {
+          var _api$analytics;
+          var tr = _ref4.tr;
+          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.CANCELLED,
+            actionSubject: ACTION_SUBJECT.DRAG,
+            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;
+        });
+      }
+    }
+  });
+};
 export var createPlugin = function createPlugin(api) {
   return new SafePlugin({
     key: key,
@@ -45,8 +82,8 @@ export var createPlugin = function createPlugin(api) {
 
         // Remove previous drag handle widget and draw new drag handle widget when activeNode changes
         if (meta !== null && meta !== void 0 && meta.activeNode && (meta === null || meta === void 0 ? void 0 : meta.activeNode.pos) !== (activeNode === null || activeNode === void 0 ? void 0 : activeNode.pos) && (meta === null || meta === void 0 ? void 0 : meta.activeNode.anchorName) !== (activeNode === null || activeNode === void 0 ? void 0 : activeNode.anchorName) && api) {
-          var oldHandle = decorations.find().filter(function (_ref) {
-            var spec = _ref.spec;
+          var oldHandle = decorations.find().filter(function (_ref5) {
+            var spec = _ref5.spec;
             return spec.id === 'drag-handle';
           });
           decorations = decorations.remove(oldHandle);
@@ -65,8 +102,8 @@ export var createPlugin = function createPlugin(api) {
 
         // Remove drop target decoration when dragging stops
         if ((meta === null || meta === void 0 ? void 0 : meta.isDragging) === false && !tr.docChanged) {
-          var dropTargetDecs = decorations.find().filter(function (_ref2) {
-            var spec = _ref2.spec;
+          var dropTargetDecs = decorations.find().filter(function (_ref6) {
+            var spec = _ref6.spec;
             return spec.type === 'drop-target-decoration';
           });
           decorations = decorations.remove(dropTargetDecs);
@@ -74,9 +111,9 @@ export var createPlugin = function createPlugin(api) {
 
         // Map drop target decoration positions when the document changes
         if (tr.docChanged && currentState.isDragging) {
-          decorationState = decorationState.map(function (_ref3) {
-            var index = _ref3.index,
-              pos = _ref3.pos;
+          decorationState = decorationState.map(function (_ref7) {
+            var index = _ref7.index,
+              pos = _ref7.pos;
             return {
               index: index,
               pos: tr.mapping.map(pos)
@@ -136,6 +173,7 @@ export var createPlugin = function createPlugin(api) {
       return {
         destroy: function destroy() {
           resizeObserver.unobserve(dom);
+          return destroyFn(api);
         }
       };
     }

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

@@ -97,6 +97,12 @@ export var DragHandle = function DragHandle(_ref) {
     }
     return draggable({
       element: element,
+      getInitialData: function getInitialData() {
+        return {
+          type: 'element',
+          start: start
+        };
+      },
       onGenerateDragPreview: function onGenerateDragPreview(_ref4) {
         var nativeSetDragImage = _ref4.nativeSetDragImage;
         setCustomNativeDragPreview({

package/dist/esm/ui/drop-target.js

@@ -2,6 +2,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 /** @jsx jsx */
 import { useEffect, useRef, useState } from 'react';
 import { css, jsx } from '@emotion/react';
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { autoScrollForElements } from '@atlaskit/pragmatic-drag-and-drop-auto-scroll/element';
 import { DropIndicator } from '@atlaskit/pragmatic-drag-and-drop-react-drop-indicator/box';
@@ -54,7 +55,7 @@ export var DropTarget = function DropTarget(_ref) {
         scrollable.style.setProperty('scroll-behavior', 'unset');
       },
       onDragEnter: function onDragEnter() {
-        return setIsDraggedOver(true);
+        setIsDraggedOver(true);
       },
       onDragLeave: function onDragLeave() {
         return setIsDraggedOver(false);
@@ -73,9 +74,25 @@ export var DropTarget = function DropTarget(_ref) {
           }) || {},
           pos = _ref3.pos;
         if (activeNode && pos !== undefined) {
-          var _api$core, _api$blockControls2;
+          var _api$core;
           var start = activeNode.pos;
-          api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(api === null || api === void 0 || (_api$blockControls2 = api.blockControls) === null || _api$blockControls2 === void 0 || (_api$blockControls2 = _api$blockControls2.commands) === null || _api$blockControls2 === void 0 ? void 0 : _api$blockControls2.moveNode(start, pos));
+          api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(function (state) {
+            var _api$blockControls2, _api$analytics;
+            var resolvedMovingNode = state.tr.doc.resolve(start);
+            var maybeNode = resolvedMovingNode.nodeAfter;
+            api === null || api === void 0 || (_api$blockControls2 = api.blockControls) === null || _api$blockControls2 === void 0 || (_api$blockControls2 = _api$blockControls2.commands) === null || _api$blockControls2 === void 0 || _api$blockControls2.moveNode(start, pos)(state);
+            api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 || _api$analytics.actions.attachAnalyticsEvent({
+              eventType: EVENT_TYPE.UI,
+              action: ACTION.DRAGGED,
+              actionSubject: ACTION_SUBJECT.ELEMENT,
+              actionSubjectId: ACTION_SUBJECT_ID.ELEMENT_DRAG_HANDLE,
+              attributes: {
+                nodeDepth: resolvedMovingNode.depth,
+                nodeType: (maybeNode === null || maybeNode === void 0 ? void 0 : maybeNode.type.name) || ''
+              }
+            })(state.tr);
+            return state.tr;
+          });
         }
       }
     }));
@@ -88,7 +105,7 @@ export var DropTarget = function DropTarget(_ref) {
       ref: ref,
       "data-testid": "block-ctrl-drop-target"
     },
-    //4px gap to clear expand node border
+    // 4px gap to clear expand node border
     isDraggedOver && jsx("div", {
       css: styleDropIndicator,
       style: {

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

@@ -1,7 +1,8 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 /** @jsx jsx */
-import { useCallback, useEffect, useLayoutEffect, useState } from 'react';
+import { useCallback, useEffect, useLayoutEffect, useMemo, useState } from 'react';
 import { css, jsx } from '@emotion/react';
+import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { getTopPosition } from '../utils/drag-handle-positions';
 var basicStyles = css({
   position: 'absolute',
@@ -14,16 +15,22 @@ var mouseMoveWrapperStyles = css({
   zIndex: 1
 });
 export var MouseMoveWrapper = function MouseMoveWrapper(_ref) {
+  var _blockControlsState$a;
   var view = _ref.view,
     api = _ref.api,
     anchorName = _ref.anchorName,
     nodeType = _ref.nodeType,
     getPos = _ref.getPos;
+  var nodePos = useMemo(function () {
+    return getPos();
+  }, [getPos]);
+  var _useSharedPluginState = useSharedPluginState(api, ['blockControls']),
+    blockControlsState = _useSharedPluginState.blockControlsState;
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     isDragging = _useState2[0],
     setIsDragging = _useState2[1];
-  var _useState3 = useState(false),
+  var _useState3 = useState((blockControlsState === null || blockControlsState === void 0 || (_blockControlsState$a = blockControlsState.activeNode) === null || _blockControlsState$a === void 0 ? void 0 : _blockControlsState$a.pos) === nodePos),
     _useState4 = _slicedToArray(_useState3, 2),
     hideWrapper = _useState4[0],
     setHideWrapper = _useState4[1];
@@ -35,38 +42,36 @@ export var MouseMoveWrapper = function MouseMoveWrapper(_ref) {
     if (!isDragging) {
       setHideWrapper(true);
     }
-    var pos = getPos();
-    if (pos === undefined) {
+    if (nodePos === undefined) {
       return;
     }
     if (api && api.blockControls && !isDragging) {
       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));
+      api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(api.blockControls.commands.showDragHandleAt(nodePos, anchorName, nodeType));
     }
-  }, [setHideWrapper, isDragging, api, getPos, anchorName, nodeType]);
+  }, [setHideWrapper, isDragging, api, nodePos, anchorName, nodeType]);
   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(function (_ref2) {
       var _nextSharedState$acti;
       var nextSharedState = _ref2.nextSharedState;
-      var pos = getPos();
       setIsDragging(Boolean(nextSharedState === null || nextSharedState === void 0 ? void 0 : nextSharedState.isDragging));
       if (!(nextSharedState !== null && nextSharedState !== void 0 && nextSharedState.activeNode)) {
         return;
       }
-      if ((nextSharedState === null || nextSharedState === void 0 || (_nextSharedState$acti = nextSharedState.activeNode) === null || _nextSharedState$acti === void 0 ? void 0 : _nextSharedState$acti.pos) !== pos && !(nextSharedState !== null && nextSharedState !== void 0 && nextSharedState.isDragging)) {
+      if ((nextSharedState === null || nextSharedState === void 0 || (_nextSharedState$acti = nextSharedState.activeNode) === null || _nextSharedState$acti === void 0 ? void 0 : _nextSharedState$acti.pos) !== nodePos && !(nextSharedState !== null && nextSharedState !== void 0 && nextSharedState.isDragging)) {
         setHideWrapper(false);
         return;
       }
       if (nextSharedState !== null && nextSharedState !== void 0 && nextSharedState.isDragging) {
-        setHideWrapper(nextSharedState === null || nextSharedState === void 0 ? void 0 : nextSharedState.isDragging);
+        setHideWrapper(true);
         return;
       }
     });
     return function () {
       unbind === null || unbind === void 0 || unbind();
     };
-  }, [getPos, api]);
+  }, [nodePos, api]);
   useLayoutEffect(function () {
     var supportsAnchor = CSS.supports('height', "anchor-size(".concat(anchorName, " height)")) && CSS.supports('top', "anchor(".concat(anchorName, " start)"));
     if (supportsAnchor) {

package/dist/types/types.d.ts

@@ -1,4 +1,5 @@
 import type { EditorCommand, NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
+import { type AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 import type { EditorDisabledPlugin } from '@atlaskit/editor-plugin-editor-disabled';
 import type { FeatureFlagsPlugin } from '@atlaskit/editor-plugin-feature-flags';
 import type { WidthPlugin } from '@atlaskit/editor-plugin-width';
@@ -20,7 +21,8 @@ export type BlockControlsPlugin = NextEditorPlugin<'blockControls', {
     dependencies: [
         OptionalPlugin<EditorDisabledPlugin>,
         OptionalPlugin<WidthPlugin>,
-        OptionalPlugin<FeatureFlagsPlugin>
+        OptionalPlugin<FeatureFlagsPlugin>,
+        OptionalPlugin<AnalyticsPlugin>
     ];
     sharedState: {
         isMenuOpen: boolean;

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

@@ -1,4 +1,5 @@
 import type { EditorCommand, NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
+import { type AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 import type { EditorDisabledPlugin } from '@atlaskit/editor-plugin-editor-disabled';
 import type { FeatureFlagsPlugin } from '@atlaskit/editor-plugin-feature-flags';
 import type { WidthPlugin } from '@atlaskit/editor-plugin-width';
@@ -20,7 +21,8 @@ export type BlockControlsPlugin = NextEditorPlugin<'blockControls', {
     dependencies: [
         OptionalPlugin<EditorDisabledPlugin>,
         OptionalPlugin<WidthPlugin>,
-        OptionalPlugin<FeatureFlagsPlugin>
+        OptionalPlugin<FeatureFlagsPlugin>,
+        OptionalPlugin<AnalyticsPlugin>
     ];
     sharedState: {
         isMenuOpen: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-block-controls",
-  "version": "1.4.15",
+  "version": "1.4.17",
   "description": "Block controls plugin for @atlaskit/editor-core",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -31,7 +31,8 @@
     ".": "./src/index.ts"
   },
   "dependencies": {
-    "@atlaskit/editor-common": "^82.4.0",
+    "@atlaskit/editor-common": "^82.5.0",
+    "@atlaskit/editor-plugin-analytics": "^1.2.3",
     "@atlaskit/editor-plugin-editor-disabled": "^1.1.5",
     "@atlaskit/editor-plugin-feature-flags": "^1.1.0",
     "@atlaskit/editor-plugin-width": "^1.1.0",