@atlaskit/editor-plugin-block-controls 1.4.14 → 1.4.16

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 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
+
+- [#110434](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/110434)
+  [`fca2ac7c4fb70`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/fca2ac7c4fb70) -
+  [ux] Show generic drag preview when dragging an embed node
+- Updated dependencies
+
 ## 1.4.14
 
 ### 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)({
@@ -114,7 +120,7 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
             if (!dom) {
               return;
             }
-            return (0, _dragPreview.dragPreview)(container, dom);
+            return (0, _dragPreview.dragPreview)(container, dom, nodeType);
           },
           nativeSetDragImage: nativeSetDragImage
         });

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

@@ -4,7 +4,15 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.dragPreview = void 0;
-var dragPreview = exports.dragPreview = function dragPreview(container, dom) {
+//
+var previewStyle = {
+  borderColor: "var(--ds-border-focused, #388BFF)",
+  borderStyle: 'solid',
+  borderRadius: "var(--ds-border-radius-100, 4px)",
+  borderWidth: "var(--ds-border-width-outline, 2px)",
+  backgroundColor: "var(--ds-blanket-selected, #388BFF14)"
+};
+var dragPreview = exports.dragPreview = function dragPreview(container, dom, nodeType) {
   var rect = dom.getBoundingClientRect();
   container.style.width = "".concat(rect.width, "px");
   container.style.height = "".concat(rect.height, "px");
@@ -12,15 +20,23 @@ var dragPreview = exports.dragPreview = function dragPreview(container, dom) {
   var parent = document.createElement('div');
   // ProseMirror class is required to make sure the cloned dom is styled correctly
   parent.classList.add('ProseMirror');
-  parent.style.opacity = '0.3';
+  var isEmbedCard = nodeType === 'embedCard';
+  if (isEmbedCard) {
+    parent.style.border = "".concat(previewStyle.borderWidth, " ").concat(previewStyle.borderStyle, " ").concat(previewStyle.borderColor);
+    parent.style.borderRadius = previewStyle.borderRadius;
+    parent.style.backgroundColor = previewStyle.backgroundColor;
+    parent.style.height = '100%';
+    parent.setAttribute('data-testid', 'block-ctrl-generic-drag-preview');
+  }
   var resizer = dom.querySelector('.resizer-item');
-  var clonedDom = resizer ? resizer.cloneNode(true) : dom.cloneNode(true);
+  var clonedDom = resizer ? resizer.cloneNode(true) : dom.cloneNode(!isEmbedCard);
 
   // Remove any margin from the cloned element to ensure is doesn't position incorrectly
   clonedDom.style.marginLeft = '0';
   clonedDom.style.marginTop = '0';
   clonedDom.style.marginRight = '0';
   clonedDom.style.marginBottom = '0';
+  clonedDom.style.opacity = '0.4';
   parent.appendChild(clonedDom);
   container.appendChild(parent);
   var scrollParent = document.querySelector('.fabric-editor-popup-scroll-parent');

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/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
       }) => {
@@ -108,7 +112,7 @@ export const DragHandle = ({
             if (!dom) {
               return;
             }
-            return dragPreview(container, dom);
+            return dragPreview(container, dom, nodeType);
           },
           nativeSetDragImage
         });

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

@@ -1,4 +1,12 @@
-export const dragPreview = (container, dom) => {
+//
+const previewStyle = {
+  borderColor: "var(--ds-border-focused, #388BFF)",
+  borderStyle: 'solid',
+  borderRadius: "var(--ds-border-radius-100, 4px)",
+  borderWidth: "var(--ds-border-width-outline, 2px)",
+  backgroundColor: "var(--ds-blanket-selected, #388BFF14)"
+};
+export const dragPreview = (container, dom, nodeType) => {
   const rect = dom.getBoundingClientRect();
   container.style.width = `${rect.width}px`;
   container.style.height = `${rect.height}px`;
@@ -6,15 +14,23 @@ export const dragPreview = (container, dom) => {
   const parent = document.createElement('div');
   // ProseMirror class is required to make sure the cloned dom is styled correctly
   parent.classList.add('ProseMirror');
-  parent.style.opacity = '0.3';
+  const isEmbedCard = nodeType === 'embedCard';
+  if (isEmbedCard) {
+    parent.style.border = `${previewStyle.borderWidth} ${previewStyle.borderStyle} ${previewStyle.borderColor}`;
+    parent.style.borderRadius = previewStyle.borderRadius;
+    parent.style.backgroundColor = previewStyle.backgroundColor;
+    parent.style.height = '100%';
+    parent.setAttribute('data-testid', 'block-ctrl-generic-drag-preview');
+  }
   const resizer = dom.querySelector('.resizer-item');
-  const clonedDom = resizer ? resizer.cloneNode(true) : dom.cloneNode(true);
+  const clonedDom = resizer ? resizer.cloneNode(true) : dom.cloneNode(!isEmbedCard);
 
   // Remove any margin from the cloned element to ensure is doesn't position incorrectly
   clonedDom.style.marginLeft = '0';
   clonedDom.style.marginTop = '0';
   clonedDom.style.marginRight = '0';
   clonedDom.style.marginBottom = '0';
+  clonedDom.style.opacity = '0.4';
   parent.appendChild(clonedDom);
   container.appendChild(parent);
   const scrollParent = document.querySelector('.fabric-editor-popup-scroll-parent');

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/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({
@@ -106,7 +112,7 @@ export var DragHandle = function DragHandle(_ref) {
             if (!dom) {
               return;
             }
-            return dragPreview(container, dom);
+            return dragPreview(container, dom, nodeType);
           },
           nativeSetDragImage: nativeSetDragImage
         });

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

@@ -1,4 +1,12 @@
-export var dragPreview = function dragPreview(container, dom) {
+//
+var previewStyle = {
+  borderColor: "var(--ds-border-focused, #388BFF)",
+  borderStyle: 'solid',
+  borderRadius: "var(--ds-border-radius-100, 4px)",
+  borderWidth: "var(--ds-border-width-outline, 2px)",
+  backgroundColor: "var(--ds-blanket-selected, #388BFF14)"
+};
+export var dragPreview = function dragPreview(container, dom, nodeType) {
   var rect = dom.getBoundingClientRect();
   container.style.width = "".concat(rect.width, "px");
   container.style.height = "".concat(rect.height, "px");
@@ -6,15 +14,23 @@ export var dragPreview = function dragPreview(container, dom) {
   var parent = document.createElement('div');
   // ProseMirror class is required to make sure the cloned dom is styled correctly
   parent.classList.add('ProseMirror');
-  parent.style.opacity = '0.3';
+  var isEmbedCard = nodeType === 'embedCard';
+  if (isEmbedCard) {
+    parent.style.border = "".concat(previewStyle.borderWidth, " ").concat(previewStyle.borderStyle, " ").concat(previewStyle.borderColor);
+    parent.style.borderRadius = previewStyle.borderRadius;
+    parent.style.backgroundColor = previewStyle.backgroundColor;
+    parent.style.height = '100%';
+    parent.setAttribute('data-testid', 'block-ctrl-generic-drag-preview');
+  }
   var resizer = dom.querySelector('.resizer-item');
-  var clonedDom = resizer ? resizer.cloneNode(true) : dom.cloneNode(true);
+  var clonedDom = resizer ? resizer.cloneNode(true) : dom.cloneNode(!isEmbedCard);
 
   // Remove any margin from the cloned element to ensure is doesn't position incorrectly
   clonedDom.style.marginLeft = '0';
   clonedDom.style.marginTop = '0';
   clonedDom.style.marginRight = '0';
   clonedDom.style.marginBottom = '0';
+  clonedDom.style.opacity = '0.4';
   parent.appendChild(clonedDom);
   container.appendChild(parent);
   var scrollParent = document.querySelector('.fabric-editor-popup-scroll-parent');

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/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/ui/drag-preview.d.ts

@@ -1 +1 @@
-export declare const dragPreview: (container: HTMLElement, dom: HTMLElement) => () => HTMLElement;
+export declare const dragPreview: (container: HTMLElement, dom: HTMLElement, nodeType: string) => () => HTMLElement;

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/dist/types-ts4.5/ui/drag-preview.d.ts

@@ -1 +1 @@
-export declare const dragPreview: (container: HTMLElement, dom: HTMLElement) => () => HTMLElement;
+export declare const dragPreview: (container: HTMLElement, dom: HTMLElement, nodeType: string) => () => HTMLElement;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-block-controls",
-  "version": "1.4.14",
+  "version": "1.4.16",
   "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.3.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",