@atlaskit/editor-plugin-block-controls 1.4.22 → 1.4.23

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 1.4.23
+
+### Patch Changes
+
+- [#112385](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/112385)
+  [`7889fc5a6eff5`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/7889fc5a6eff5) -
+  Add new moved events for dnd, change which events are fired in block control plugin
+
 ## 1.4.22
 
 ### Patch Changes

package/dist/cjs/plugin.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.blockControlsPlugin = void 0;
 var _react = _interopRequireDefault(require("react"));
+var _analytics = require("@atlaskit/editor-common/analytics");
 var _main = require("./pm-plugins/main");
 var _dragHandleMenu = require("./ui/drag-handle-menu");
 var _globalStyles = require("./ui/global-styles");
@@ -25,9 +26,10 @@ var blockControlsPlugin = exports.blockControlsPlugin = function blockControlsPl
     commands: {
       moveNode: function moveNode(start, to) {
         return function (_ref2) {
-          var _node$nodeSize;
+          var _node$nodeSize, _api$analytics;
           var tr = _ref2.tr;
           var node = tr.doc.nodeAt(start);
+          var resolvedNode = tr.doc.resolve(start);
           if (!node) {
             return tr;
           }
@@ -42,6 +44,16 @@ var blockControlsPlugin = exports.blockControlsPlugin = function blockControlsPl
             nodeMoved: true
           });
           api === null || api === void 0 || api.core.actions.focus();
+          api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 || _api$analytics.actions.attachAnalyticsEvent({
+            eventType: _analytics.EVENT_TYPE.TRACK,
+            action: _analytics.ACTION.MOVED,
+            actionSubject: _analytics.ACTION_SUBJECT.ELEMENT,
+            actionSubjectId: _analytics.ACTION_SUBJECT_ID.ELEMENT_DRAG_HANDLE,
+            attributes: {
+              nodeDepth: resolvedNode.depth,
+              nodeType: node.type.name
+            }
+          })(tr);
           return tr;
         };
       },

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

@@ -7,6 +7,7 @@ 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 _steps = require("@atlaskit/adf-schema/steps");
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
 var _state = require("@atlaskit/editor-prosemirror/state");
@@ -40,18 +41,11 @@ var destroyFn = function destroyFn(api) {
       scrollable.style.setProperty('scroll-behavior', null);
       api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(function (_ref3) {
         var tr = _ref3.tr;
-        return tr.setMeta(key, {
-          isDragging: false
-        });
-      });
-      // if no drop targets are rendered, assume that drop is invalid
-      if (location.current.dropTargets.length === 0) {
-        var _api$core2;
         var _ref4 = source.data,
           start = _ref4.start;
-        api === null || api === void 0 || (_api$core2 = api.core) === null || _api$core2 === void 0 || _api$core2.actions.execute(function (_ref5) {
+        // if no drop targets are rendered, assume that drop is invalid
+        if (location.current.dropTargets.length === 0) {
           var _api$analytics;
-          var tr = _ref5.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({
@@ -64,9 +58,11 @@ var destroyFn = function destroyFn(api) {
               nodeType: (maybeNode === null || maybeNode === void 0 ? void 0 : maybeNode.type.name) || ''
             }
           })(tr);
-          return tr;
+        }
+        return tr.setMeta(key, {
+          isDragging: false
         });
-      }
+      });
     }
   }));
   return _combine.combine.apply(void 0, cleanupFn);
@@ -93,7 +89,7 @@ var createPlugin = exports.createPlugin = function createPlugin(api) {
         return initialState;
       },
       apply: function apply(tr, currentState, oldState, newState) {
-        var _decorationState, _meta$activeNode, _meta$isDragging, _meta$editorHeight;
+        var _meta$activeNode, _meta$isDragging, _meta$editorHeight;
         if (initialState.isDocSizeLimitEnabled && newState.doc.nodeSize > DRAG_AND_DROP_DOC_SIZE_LIMIT) {
           return initialState;
         }
@@ -102,8 +98,14 @@ var createPlugin = exports.createPlugin = function createPlugin(api) {
           isMenuOpen = currentState.isMenuOpen,
           decorationState = currentState.decorationState,
           editorHeight = currentState.editorHeight,
-          isResizerResizing = currentState.isResizerResizing;
+          isResizerResizing = currentState.isResizerResizing,
+          isDragging = currentState.isDragging;
         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
+        var isAnalyticTr = tr.steps.every(function (step) {
+          return step instanceof _steps.AnalyticsStep;
+        });
 
         // If tables or media are being resized, we want to hide the drag handle
         var resizerMeta = tr.getMeta('is-resizer-resizing');
@@ -112,8 +114,8 @@ var createPlugin = exports.createPlugin = function createPlugin(api) {
 
         // During resize, remove the drag handle widget
         if (isResizerResizing || nodeCountChanged || meta !== null && meta !== void 0 && meta.nodeMoved) {
-          var oldHandle = decorations.find().filter(function (_ref6) {
-            var spec = _ref6.spec;
+          var oldHandle = decorations.find().filter(function (_ref5) {
+            var spec = _ref5.spec;
             return spec.id === 'drag-handle';
           });
           decorations = decorations.remove(oldHandle);
@@ -133,15 +135,22 @@ var createPlugin = exports.createPlugin = function createPlugin(api) {
           // Note: Quite often the handle is not in the right position after a node is moved
           // it is safer for now to not show it when a node is moved
           if (activeNode && !(meta !== null && meta !== void 0 && meta.nodeMoved)) {
-            var draghandleDec = (0, _decorations.dragHandleDecoration)(activeNode.pos, activeNode.anchorName, activeNode.nodeType, api);
+            var newActiveNode = activeNode && tr.doc.nodeAt(tr.mapping.map(activeNode.pos));
+            var nodeType = activeNode.nodeType;
+            var anchorName = activeNode.anchorName;
+            if (newActiveNode && (newActiveNode === null || newActiveNode === void 0 ? void 0 : newActiveNode.type.name) !== activeNode.nodeType && !(meta !== null && meta !== void 0 && meta.nodeMoved)) {
+              nodeType = newActiveNode.type.name;
+              anchorName = activeNode.anchorName.replace(activeNode.nodeType, nodeType);
+            }
+            var draghandleDec = (0, _decorations.dragHandleDecoration)(activeNode.pos, anchorName, nodeType, api);
             decorations = decorations.add(newState.doc, [draghandleDec]);
           }
         }
 
         // 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 (_ref7) {
-            var spec = _ref7.spec;
+          var _oldHandle = decorations.find().filter(function (_ref6) {
+            var spec = _ref6.spec;
             return spec.id === 'drag-handle';
           });
           decorations = decorations.remove(_oldHandle);
@@ -150,7 +159,8 @@ var createPlugin = exports.createPlugin = function createPlugin(api) {
         }
 
         // Add drop targets when node is being dragged
-        if (meta !== null && meta !== void 0 && meta.isDragging && !tr.docChanged && api) {
+        // if the transaction is only for analytics and user is dragging, continue to draw drop targets
+        if (meta !== null && meta !== void 0 && meta.isDragging && (!tr.docChanged || tr.docChanged && isAnalyticTr) && api) {
           var _dropTargetDecoration = (0, _decorations.dropTargetDecorations)(oldState, newState, api),
             _decs = _dropTargetDecoration.decs,
             updatedDecorationState = _dropTargetDecoration.decorationState;
@@ -160,18 +170,18 @@ 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 (_ref8) {
-            var spec = _ref8.spec;
+          var dropTargetDecs = decorations.find().filter(function (_ref7) {
+            var spec = _ref7.spec;
             return spec.type === 'drop-target-decoration';
           });
           decorations = decorations.remove(dropTargetDecs);
         }
 
         // Map drop target decoration positions when the document changes
-        if (tr.docChanged && currentState.isDragging) {
-          decorationState = decorationState.map(function (_ref9) {
-            var index = _ref9.index,
-              pos = _ref9.pos;
+        if (tr.docChanged && isDragging) {
+          decorationState = decorationState.map(function (_ref8) {
+            var index = _ref8.index,
+              pos = _ref8.pos;
             return {
               index: index,
               pos: tr.mapping.map(pos)
@@ -193,9 +203,9 @@ var createPlugin = exports.createPlugin = function createPlugin(api) {
         var isEmptyDoc = newState.doc.childCount === 1 && newState.doc.nodeSize <= 4;
         return {
           decorations: decorations,
-          decorationState: (_decorationState = decorationState) !== null && _decorationState !== void 0 ? _decorationState : currentState.decorationState,
+          decorationState: decorationState,
           activeNode: isEmptyDoc ? null : (_meta$activeNode = meta === null || meta === void 0 ? void 0 : meta.activeNode) !== null && _meta$activeNode !== void 0 ? _meta$activeNode : mappedActiveNodePos,
-          isDragging: (_meta$isDragging = meta === null || meta === void 0 ? void 0 : meta.isDragging) !== null && _meta$isDragging !== void 0 ? _meta$isDragging : currentState.isDragging,
+          isDragging: (_meta$isDragging = meta === null || meta === void 0 ? void 0 : meta.isDragging) !== null && _meta$isDragging !== void 0 ? _meta$isDragging : isDragging,
           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,

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

@@ -8,6 +8,7 @@ exports.DragHandle = 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 _dragHandler = _interopRequireDefault(require("@atlaskit/icon/glyph/drag-handler"));
 var _adapter = require("@atlaskit/pragmatic-drag-and-drop/element/adapter");
@@ -19,6 +20,8 @@ var _consts = require("./consts");
 var _dragPreview = require("./drag-preview");
 /** @jsx jsx */
 
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
 var dragHandleButtonStyles = (0, _react2.css)({
   position: 'absolute',
   padding: "var(--ds-space-025, 2px)".concat(" 0"),
@@ -126,11 +129,30 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
         });
       },
       onDragStart: function onDragStart() {
-        var _api$core5, _api$blockControls, _api$core6;
+        var _api$core5, _api$core6;
         if (start === undefined) {
           return;
         }
-        api === null || api === void 0 || (_api$core5 = api.core) === null || _api$core5 === void 0 || _api$core5.actions.execute(api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.commands.setNodeDragged(start, anchorName, nodeType));
+        api === null || api === void 0 || (_api$core5 = api.core) === null || _api$core5 === void 0 || _api$core5.actions.execute(function (_ref6) {
+          var _api$blockControls, _api$analytics;
+          var tr = _ref6.tr;
+          api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 || _api$blockControls.commands.setNodeDragged(start, anchorName, nodeType)({
+            tr: 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.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) || ''
+            }
+          })(tr);
+          return tr;
+        });
         api === null || api === void 0 || (_api$core6 = api.core) === null || _api$core6 === void 0 || _api$core6.actions.focus();
       }
     });
@@ -139,12 +161,9 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
   var positionStyles = (0, _react.useMemo)(function () {
     var supportsAnchor = CSS.supports('top', "anchor(".concat(anchorName, " start)")) && CSS.supports('left', "anchor(".concat(anchorName, " start)"));
     var dom = view.dom.querySelector("[data-drag-handler-anchor-name=\"".concat(anchorName, "\"]"));
-    if (!dom) {
-      return;
-    }
     var hasResizer = anchorName.includes('table') || anchorName.includes('mediaSingle');
     var isExtension = anchorName.includes('extension') || anchorName.includes('bodiedExtension');
-    var innerContainer = hasResizer ? dom.querySelector('.resizer-item') : isExtension ? dom.querySelector('.extension-container[data-layout]') : null;
+    var innerContainer = dom ? hasResizer ? dom.querySelector('.resizer-item') : isExtension ? dom.querySelector('.extension-container[data-layout]') : null : null;
     if (supportsAnchor) {
       return {
         left: hasResizer || isExtension ? (0, _dragHandlePositions.getLeftPosition)(dom, nodeType, innerContainer, macroInteractionUpdates) : "calc(anchor(".concat(anchorName, " start) - ").concat(_consts.DRAG_HANDLE_WIDTH, "px - ").concat((0, _consts.dragHandleGap)(nodeType), "px)"),

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

@@ -8,12 +8,13 @@ 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 _box = require("@atlaskit/pragmatic-drag-and-drop-react-drop-indicator/box");
 var _adapter = require("@atlaskit/pragmatic-drag-and-drop/element/adapter");
 /** @jsx jsx */
 
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
 var DEFAULT_DROP_INDICATOR_WIDTH = 760;
 var styleDropTarget = (0, _react2.css)({
   height: "var(--ds-space-100, 8px)",
@@ -69,25 +70,9 @@ var DropTarget = exports.DropTarget = function DropTarget(_ref) {
           }) || {},
           pos = _ref3.pos;
         if (activeNode && pos !== undefined) {
-          var _api$core;
+          var _api$core, _api$blockControls2;
           var start = activeNode.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;
-          });
+          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));
         }
       }
     });

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

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.GlobalStylesWrapper = void 0;
 var _react = require("@emotion/react");
 /** @jsx jsx */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-global-styles -- Ignored via go/DSP-18766
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-global-styles, @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
 var globalStyles = (0, _react.css)({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766

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

@@ -12,6 +12,8 @@ var _bindEventListener = require("bind-event-listener");
 var _dragHandlePositions = require("../utils/drag-handle-positions");
 /** @jsx jsx */
 
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
 var basicStyles = (0, _react2.css)({
   position: 'absolute',
   width: '100%',

package/dist/cjs/utils/drag-handle-positions.js

@@ -6,6 +6,9 @@ Object.defineProperty(exports, "__esModule", {
 exports.getTopPosition = exports.getLeftPosition = void 0;
 var _consts = require("../ui/consts");
 var getTopPosition = exports.getTopPosition = function getTopPosition(dom) {
+  if (!dom) {
+    return 'auto';
+  }
   var table = dom.querySelector('table');
   if (table) {
     return "".concat(dom.offsetTop + ((table === null || table === void 0 ? void 0 : table.offsetTop) || 0), "px");
@@ -14,6 +17,9 @@ var getTopPosition = exports.getTopPosition = function getTopPosition(dom) {
   }
 };
 var getLeftPosition = exports.getLeftPosition = function getLeftPosition(dom, type, innerContainer, macroInteractionUpdates) {
+  if (!dom) {
+    return 'auto';
+  }
   if (!innerContainer) {
     return "".concat(dom.offsetLeft - (0, _consts.dragHandleGap)(type) - _consts.DRAG_HANDLE_WIDTH, "px");
   }

package/dist/es2019/plugin.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import { createPlugin, key } from './pm-plugins/main';
 import { DragHandleMenu } from './ui/drag-handle-menu';
 import { GlobalStylesWrapper } from './ui/global-styles';
@@ -17,8 +18,9 @@ export const blockControlsPlugin = ({
     moveNode: (start, to) => ({
       tr
     }) => {
-      var _node$nodeSize;
+      var _node$nodeSize, _api$analytics;
       const node = tr.doc.nodeAt(start);
+      const resolvedNode = tr.doc.resolve(start);
       if (!node) {
         return tr;
       }
@@ -33,6 +35,16 @@ export const blockControlsPlugin = ({
         nodeMoved: true
       });
       api === null || api === void 0 ? void 0 : api.core.actions.focus();
+      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.TRACK,
+        action: ACTION.MOVED,
+        actionSubject: ACTION_SUBJECT.ELEMENT,
+        actionSubjectId: ACTION_SUBJECT_ID.ELEMENT_DRAG_HANDLE,
+        attributes: {
+          nodeDepth: resolvedNode.depth,
+          nodeType: node.type.name
+        }
+      })(tr);
       return tr;
     },
     showDragHandleAt: (pos, anchorName, nodeType) => ({

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

@@ -1,4 +1,5 @@
 import rafSchedule from 'raf-schd';
+import { AnalyticsStep } from '@atlaskit/adf-schema/steps';
 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';
@@ -33,19 +34,11 @@ const destroyFn = api => {
       api === null || api === void 0 ? void 0 : (_api$core = api.core) === null || _api$core === void 0 ? void 0 : _api$core.actions.execute(({
         tr
       }) => {
-        return tr.setMeta(key, {
-          isDragging: false
-        });
-      });
-      // if no drop targets are rendered, assume that drop is invalid
-      if (location.current.dropTargets.length === 0) {
-        var _api$core2;
         const {
           start
         } = source.data;
-        api === null || api === void 0 ? void 0 : (_api$core2 = api.core) === null || _api$core2 === void 0 ? void 0 : _api$core2.actions.execute(({
-          tr
-        }) => {
+        // if no drop targets are rendered, assume that drop is invalid
+        if (location.current.dropTargets.length === 0) {
           var _api$analytics;
           const resolvedMovingNode = tr.doc.resolve(start);
           const maybeNode = resolvedMovingNode.nodeAfter;
@@ -59,9 +52,11 @@ const destroyFn = api => {
               nodeType: (maybeNode === null || maybeNode === void 0 ? void 0 : maybeNode.type.name) || ''
             }
           })(tr);
-          return tr;
+        }
+        return tr.setMeta(key, {
+          isDragging: false
         });
-      }
+      });
     }
   }));
   return combine(...cleanupFn);
@@ -88,7 +83,7 @@ export const createPlugin = api => {
         return initialState;
       },
       apply(tr, currentState, oldState, newState) {
-        var _decorationState, _meta$activeNode, _meta$isDragging, _meta$editorHeight;
+        var _meta$activeNode, _meta$isDragging, _meta$editorHeight;
         if (initialState.isDocSizeLimitEnabled && newState.doc.nodeSize > DRAG_AND_DROP_DOC_SIZE_LIMIT) {
           return initialState;
         }
@@ -98,9 +93,13 @@ export const createPlugin = api => {
           isMenuOpen,
           decorationState,
           editorHeight,
-          isResizerResizing
+          isResizerResizing,
+          isDragging
         } = currentState;
         const 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
+        const isAnalyticTr = tr.steps.every(step => step instanceof AnalyticsStep);
 
         // If tables or media are being resized, we want to hide the drag handle
         const resizerMeta = tr.getMeta('is-resizer-resizing');
@@ -129,7 +128,14 @@ export const createPlugin = api => {
           // Note: Quite often the handle is not in the right position after a node is moved
           // it is safer for now to not show it when a node is moved
           if (activeNode && !(meta !== null && meta !== void 0 && meta.nodeMoved)) {
-            const draghandleDec = dragHandleDecoration(activeNode.pos, activeNode.anchorName, activeNode.nodeType, api);
+            const newActiveNode = activeNode && tr.doc.nodeAt(tr.mapping.map(activeNode.pos));
+            let nodeType = activeNode.nodeType;
+            let anchorName = activeNode.anchorName;
+            if (newActiveNode && (newActiveNode === null || newActiveNode === void 0 ? void 0 : newActiveNode.type.name) !== activeNode.nodeType && !(meta !== null && meta !== void 0 && meta.nodeMoved)) {
+              nodeType = newActiveNode.type.name;
+              anchorName = activeNode.anchorName.replace(activeNode.nodeType, nodeType);
+            }
+            const draghandleDec = dragHandleDecoration(activeNode.pos, anchorName, nodeType, api);
             decorations = decorations.add(newState.doc, [draghandleDec]);
           }
         }
@@ -145,7 +151,8 @@ export const createPlugin = api => {
         }
 
         // Add drop targets when node is being dragged
-        if (meta !== null && meta !== void 0 && meta.isDragging && !tr.docChanged && api) {
+        // if the transaction is only for analytics and user is dragging, continue to draw drop targets
+        if (meta !== null && meta !== void 0 && meta.isDragging && (!tr.docChanged || tr.docChanged && isAnalyticTr) && api) {
           const {
             decs,
             decorationState: updatedDecorationState
@@ -163,7 +170,7 @@ export const createPlugin = api => {
         }
 
         // Map drop target decoration positions when the document changes
-        if (tr.docChanged && currentState.isDragging) {
+        if (tr.docChanged && isDragging) {
           decorationState = decorationState.map(({
             index,
             pos
@@ -189,9 +196,9 @@ export const createPlugin = api => {
         const isEmptyDoc = newState.doc.childCount === 1 && newState.doc.nodeSize <= 4;
         return {
           decorations,
-          decorationState: (_decorationState = decorationState) !== null && _decorationState !== void 0 ? _decorationState : currentState.decorationState,
+          decorationState,
           activeNode: isEmptyDoc ? null : (_meta$activeNode = meta === null || meta === void 0 ? void 0 : meta.activeNode) !== null && _meta$activeNode !== void 0 ? _meta$activeNode : mappedActiveNodePos,
-          isDragging: (_meta$isDragging = meta === null || meta === void 0 ? void 0 : meta.isDragging) !== null && _meta$isDragging !== void 0 ? _meta$isDragging : currentState.isDragging,
+          isDragging: (_meta$isDragging = meta === null || meta === void 0 ? void 0 : meta.isDragging) !== null && _meta$isDragging !== void 0 ? _meta$isDragging : isDragging,
           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,

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

@@ -1,6 +1,9 @@
 /** @jsx jsx */
 import { useCallback, useEffect, useMemo, 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 { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import DragHandlerIcon from '@atlaskit/icon/glyph/drag-handler';
 import { draggable } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
@@ -118,11 +121,31 @@ export const DragHandle = ({
         });
       },
       onDragStart() {
-        var _api$core5, _api$blockControls, _api$core6;
+        var _api$core5, _api$core6;
         if (start === undefined) {
           return;
         }
-        api === null || api === void 0 ? void 0 : (_api$core5 = api.core) === null || _api$core5 === void 0 ? void 0 : _api$core5.actions.execute(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));
+        api === null || api === void 0 ? void 0 : (_api$core5 = api.core) === null || _api$core5 === void 0 ? void 0 : _api$core5.actions.execute(({
+          tr
+        }) => {
+          var _api$blockControls, _api$analytics;
+          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;
+          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) || ''
+            }
+          })(tr);
+          return tr;
+        });
         api === null || api === void 0 ? void 0 : (_api$core6 = api.core) === null || _api$core6 === void 0 ? void 0 : _api$core6.actions.focus();
       }
     });
@@ -131,12 +154,9 @@ export const DragHandle = ({
   const positionStyles = useMemo(() => {
     const supportsAnchor = CSS.supports('top', `anchor(${anchorName} start)`) && CSS.supports('left', `anchor(${anchorName} start)`);
     const dom = view.dom.querySelector(`[data-drag-handler-anchor-name="${anchorName}"]`);
-    if (!dom) {
-      return;
-    }
     const hasResizer = anchorName.includes('table') || anchorName.includes('mediaSingle');
     const isExtension = anchorName.includes('extension') || anchorName.includes('bodiedExtension');
-    const innerContainer = hasResizer ? dom.querySelector('.resizer-item') : isExtension ? dom.querySelector('.extension-container[data-layout]') : null;
+    const innerContainer = dom ? hasResizer ? dom.querySelector('.resizer-item') : isExtension ? dom.querySelector('.extension-container[data-layout]') : null : null;
     if (supportsAnchor) {
       return {
         left: hasResizer || isExtension ? getLeftPosition(dom, nodeType, innerContainer, macroInteractionUpdates) : `calc(anchor(${anchorName} start) - ${DRAG_HANDLE_WIDTH}px - ${dragHandleGap(nodeType)}px)`,

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

@@ -1,7 +1,8 @@
 /** @jsx jsx */
 import { useEffect, 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 { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { DropIndicator } from '@atlaskit/pragmatic-drag-and-drop-react-drop-indicator/box';
 import { dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
@@ -55,27 +56,11 @@ export const DropTarget = ({
           pos
         } = decorationState.find(dec => dec.index === index) || {};
         if (activeNode && pos !== undefined) {
-          var _api$core;
+          var _api$core, _api$blockControls2, _api$blockControls2$c;
           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(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;
-          });
+          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));
         }
       }
     });

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

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-global-styles -- Ignored via go/DSP-18766
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-global-styles, @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, Global, jsx } from '@emotion/react';
 const globalStyles = css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766

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

@@ -1,5 +1,7 @@
 /** @jsx jsx */
 import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { bind } from 'bind-event-listener';
 import { getTopPosition } from '../utils/drag-handle-positions';

package/dist/es2019/utils/drag-handle-positions.js

@@ -1,5 +1,8 @@
 import { DRAG_HANDLE_WIDTH, dragHandleGap } from '../ui/consts';
 export const getTopPosition = dom => {
+  if (!dom) {
+    return 'auto';
+  }
   const table = dom.querySelector('table');
   if (table) {
     return `${dom.offsetTop + ((table === null || table === void 0 ? void 0 : table.offsetTop) || 0)}px`;
@@ -8,6 +11,9 @@ export const getTopPosition = dom => {
   }
 };
 export const getLeftPosition = (dom, type, innerContainer, macroInteractionUpdates) => {
+  if (!dom) {
+    return 'auto';
+  }
   if (!innerContainer) {
     return `${dom.offsetLeft - dragHandleGap(type) - DRAG_HANDLE_WIDTH}px`;
   }

package/dist/esm/plugin.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import { createPlugin, key } from './pm-plugins/main';
 import { DragHandleMenu } from './ui/drag-handle-menu';
 import { GlobalStylesWrapper } from './ui/global-styles';
@@ -18,9 +19,10 @@ export var blockControlsPlugin = function blockControlsPlugin(_ref) {
     commands: {
       moveNode: function moveNode(start, to) {
         return function (_ref2) {
-          var _node$nodeSize;
+          var _node$nodeSize, _api$analytics;
           var tr = _ref2.tr;
           var node = tr.doc.nodeAt(start);
+          var resolvedNode = tr.doc.resolve(start);
           if (!node) {
             return tr;
           }
@@ -35,6 +37,16 @@ export var blockControlsPlugin = function blockControlsPlugin(_ref) {
             nodeMoved: true
           });
           api === null || api === void 0 || api.core.actions.focus();
+          api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 || _api$analytics.actions.attachAnalyticsEvent({
+            eventType: EVENT_TYPE.TRACK,
+            action: ACTION.MOVED,
+            actionSubject: ACTION_SUBJECT.ELEMENT,
+            actionSubjectId: ACTION_SUBJECT_ID.ELEMENT_DRAG_HANDLE,
+            attributes: {
+              nodeDepth: resolvedNode.depth,
+              nodeType: node.type.name
+            }
+          })(tr);
           return tr;
         };
       },

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

@@ -1,5 +1,6 @@
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import rafSchedule from 'raf-schd';
+import { AnalyticsStep } from '@atlaskit/adf-schema/steps';
 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';
@@ -33,18 +34,11 @@ var destroyFn = function destroyFn(api) {
       scrollable.style.setProperty('scroll-behavior', null);
       api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(function (_ref3) {
         var tr = _ref3.tr;
-        return tr.setMeta(key, {
-          isDragging: false
-        });
-      });
-      // if no drop targets are rendered, assume that drop is invalid
-      if (location.current.dropTargets.length === 0) {
-        var _api$core2;
         var _ref4 = source.data,
           start = _ref4.start;
-        api === null || api === void 0 || (_api$core2 = api.core) === null || _api$core2 === void 0 || _api$core2.actions.execute(function (_ref5) {
+        // if no drop targets are rendered, assume that drop is invalid
+        if (location.current.dropTargets.length === 0) {
           var _api$analytics;
-          var tr = _ref5.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({
@@ -57,9 +51,11 @@ var destroyFn = function destroyFn(api) {
               nodeType: (maybeNode === null || maybeNode === void 0 ? void 0 : maybeNode.type.name) || ''
             }
           })(tr);
-          return tr;
+        }
+        return tr.setMeta(key, {
+          isDragging: false
         });
-      }
+      });
     }
   }));
   return combine.apply(void 0, cleanupFn);
@@ -86,7 +82,7 @@ export var createPlugin = function createPlugin(api) {
         return initialState;
       },
       apply: function apply(tr, currentState, oldState, newState) {
-        var _decorationState, _meta$activeNode, _meta$isDragging, _meta$editorHeight;
+        var _meta$activeNode, _meta$isDragging, _meta$editorHeight;
         if (initialState.isDocSizeLimitEnabled && newState.doc.nodeSize > DRAG_AND_DROP_DOC_SIZE_LIMIT) {
           return initialState;
         }
@@ -95,8 +91,14 @@ export var createPlugin = function createPlugin(api) {
           isMenuOpen = currentState.isMenuOpen,
           decorationState = currentState.decorationState,
           editorHeight = currentState.editorHeight,
-          isResizerResizing = currentState.isResizerResizing;
+          isResizerResizing = currentState.isResizerResizing,
+          isDragging = currentState.isDragging;
         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
+        var isAnalyticTr = tr.steps.every(function (step) {
+          return step instanceof AnalyticsStep;
+        });
 
         // If tables or media are being resized, we want to hide the drag handle
         var resizerMeta = tr.getMeta('is-resizer-resizing');
@@ -105,8 +107,8 @@ export var createPlugin = function createPlugin(api) {
 
         // During resize, remove the drag handle widget
         if (isResizerResizing || nodeCountChanged || meta !== null && meta !== void 0 && meta.nodeMoved) {
-          var oldHandle = decorations.find().filter(function (_ref6) {
-            var spec = _ref6.spec;
+          var oldHandle = decorations.find().filter(function (_ref5) {
+            var spec = _ref5.spec;
             return spec.id === 'drag-handle';
           });
           decorations = decorations.remove(oldHandle);
@@ -126,15 +128,22 @@ export var createPlugin = function createPlugin(api) {
           // Note: Quite often the handle is not in the right position after a node is moved
           // it is safer for now to not show it when a node is moved
           if (activeNode && !(meta !== null && meta !== void 0 && meta.nodeMoved)) {
-            var draghandleDec = dragHandleDecoration(activeNode.pos, activeNode.anchorName, activeNode.nodeType, api);
+            var newActiveNode = activeNode && tr.doc.nodeAt(tr.mapping.map(activeNode.pos));
+            var nodeType = activeNode.nodeType;
+            var anchorName = activeNode.anchorName;
+            if (newActiveNode && (newActiveNode === null || newActiveNode === void 0 ? void 0 : newActiveNode.type.name) !== activeNode.nodeType && !(meta !== null && meta !== void 0 && meta.nodeMoved)) {
+              nodeType = newActiveNode.type.name;
+              anchorName = activeNode.anchorName.replace(activeNode.nodeType, nodeType);
+            }
+            var draghandleDec = dragHandleDecoration(activeNode.pos, anchorName, nodeType, api);
             decorations = decorations.add(newState.doc, [draghandleDec]);
           }
         }
 
         // 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 (_ref7) {
-            var spec = _ref7.spec;
+          var _oldHandle = decorations.find().filter(function (_ref6) {
+            var spec = _ref6.spec;
             return spec.id === 'drag-handle';
           });
           decorations = decorations.remove(_oldHandle);
@@ -143,7 +152,8 @@ export var createPlugin = function createPlugin(api) {
         }
 
         // Add drop targets when node is being dragged
-        if (meta !== null && meta !== void 0 && meta.isDragging && !tr.docChanged && api) {
+        // if the transaction is only for analytics and user is dragging, continue to draw drop targets
+        if (meta !== null && meta !== void 0 && meta.isDragging && (!tr.docChanged || tr.docChanged && isAnalyticTr) && api) {
           var _dropTargetDecoration = dropTargetDecorations(oldState, newState, api),
             _decs = _dropTargetDecoration.decs,
             updatedDecorationState = _dropTargetDecoration.decorationState;
@@ -153,18 +163,18 @@ 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 (_ref8) {
-            var spec = _ref8.spec;
+          var dropTargetDecs = decorations.find().filter(function (_ref7) {
+            var spec = _ref7.spec;
             return spec.type === 'drop-target-decoration';
           });
           decorations = decorations.remove(dropTargetDecs);
         }
 
         // Map drop target decoration positions when the document changes
-        if (tr.docChanged && currentState.isDragging) {
-          decorationState = decorationState.map(function (_ref9) {
-            var index = _ref9.index,
-              pos = _ref9.pos;
+        if (tr.docChanged && isDragging) {
+          decorationState = decorationState.map(function (_ref8) {
+            var index = _ref8.index,
+              pos = _ref8.pos;
             return {
               index: index,
               pos: tr.mapping.map(pos)
@@ -186,9 +196,9 @@ export var createPlugin = function createPlugin(api) {
         var isEmptyDoc = newState.doc.childCount === 1 && newState.doc.nodeSize <= 4;
         return {
           decorations: decorations,
-          decorationState: (_decorationState = decorationState) !== null && _decorationState !== void 0 ? _decorationState : currentState.decorationState,
+          decorationState: decorationState,
           activeNode: isEmptyDoc ? null : (_meta$activeNode = meta === null || meta === void 0 ? void 0 : meta.activeNode) !== null && _meta$activeNode !== void 0 ? _meta$activeNode : mappedActiveNodePos,
-          isDragging: (_meta$isDragging = meta === null || meta === void 0 ? void 0 : meta.isDragging) !== null && _meta$isDragging !== void 0 ? _meta$isDragging : currentState.isDragging,
+          isDragging: (_meta$isDragging = meta === null || meta === void 0 ? void 0 : meta.isDragging) !== null && _meta$isDragging !== void 0 ? _meta$isDragging : isDragging,
           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,

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

@@ -1,7 +1,10 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 /** @jsx jsx */
 import { useCallback, useEffect, useMemo, 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 { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import DragHandlerIcon from '@atlaskit/icon/glyph/drag-handler';
 import { draggable } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
@@ -118,11 +121,30 @@ export var DragHandle = function DragHandle(_ref) {
         });
       },
       onDragStart: function onDragStart() {
-        var _api$core5, _api$blockControls, _api$core6;
+        var _api$core5, _api$core6;
         if (start === undefined) {
           return;
         }
-        api === null || api === void 0 || (_api$core5 = api.core) === null || _api$core5 === void 0 || _api$core5.actions.execute(api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.commands.setNodeDragged(start, anchorName, nodeType));
+        api === null || api === void 0 || (_api$core5 = api.core) === null || _api$core5 === void 0 || _api$core5.actions.execute(function (_ref6) {
+          var _api$blockControls, _api$analytics;
+          var tr = _ref6.tr;
+          api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 || _api$blockControls.commands.setNodeDragged(start, anchorName, nodeType)({
+            tr: 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.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) || ''
+            }
+          })(tr);
+          return tr;
+        });
         api === null || api === void 0 || (_api$core6 = api.core) === null || _api$core6 === void 0 || _api$core6.actions.focus();
       }
     });
@@ -131,12 +153,9 @@ export var DragHandle = function DragHandle(_ref) {
   var positionStyles = useMemo(function () {
     var supportsAnchor = CSS.supports('top', "anchor(".concat(anchorName, " start)")) && CSS.supports('left', "anchor(".concat(anchorName, " start)"));
     var dom = view.dom.querySelector("[data-drag-handler-anchor-name=\"".concat(anchorName, "\"]"));
-    if (!dom) {
-      return;
-    }
     var hasResizer = anchorName.includes('table') || anchorName.includes('mediaSingle');
     var isExtension = anchorName.includes('extension') || anchorName.includes('bodiedExtension');
-    var innerContainer = hasResizer ? dom.querySelector('.resizer-item') : isExtension ? dom.querySelector('.extension-container[data-layout]') : null;
+    var innerContainer = dom ? hasResizer ? dom.querySelector('.resizer-item') : isExtension ? dom.querySelector('.extension-container[data-layout]') : null : null;
     if (supportsAnchor) {
       return {
         left: hasResizer || isExtension ? getLeftPosition(dom, nodeType, innerContainer, macroInteractionUpdates) : "calc(anchor(".concat(anchorName, " start) - ").concat(DRAG_HANDLE_WIDTH, "px - ").concat(dragHandleGap(nodeType), "px)"),

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

@@ -1,8 +1,9 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 /** @jsx jsx */
 import { useEffect, 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 { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { DropIndicator } from '@atlaskit/pragmatic-drag-and-drop-react-drop-indicator/box';
 import { dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
@@ -61,25 +62,9 @@ export var DropTarget = function DropTarget(_ref) {
           }) || {},
           pos = _ref3.pos;
         if (activeNode && pos !== undefined) {
-          var _api$core;
+          var _api$core, _api$blockControls2;
           var start = activeNode.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;
-          });
+          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));
         }
       }
     });

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

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-global-styles -- Ignored via go/DSP-18766
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-global-styles, @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, Global, jsx } from '@emotion/react';
 var globalStyles = css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766

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

@@ -1,6 +1,8 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 /** @jsx jsx */
 import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { bind } from 'bind-event-listener';
 import { getTopPosition } from '../utils/drag-handle-positions';

package/dist/esm/utils/drag-handle-positions.js

@@ -1,5 +1,8 @@
 import { DRAG_HANDLE_WIDTH, dragHandleGap } from '../ui/consts';
 export var getTopPosition = function getTopPosition(dom) {
+  if (!dom) {
+    return 'auto';
+  }
   var table = dom.querySelector('table');
   if (table) {
     return "".concat(dom.offsetTop + ((table === null || table === void 0 ? void 0 : table.offsetTop) || 0), "px");
@@ -8,6 +11,9 @@ export var getTopPosition = function getTopPosition(dom) {
   }
 };
 export var getLeftPosition = function getLeftPosition(dom, type, innerContainer, macroInteractionUpdates) {
+  if (!dom) {
+    return 'auto';
+  }
   if (!innerContainer) {
     return "".concat(dom.offsetLeft - dragHandleGap(type) - DRAG_HANDLE_WIDTH, "px");
   }

package/dist/types/utils/drag-handle-positions.d.ts

@@ -1,2 +1,2 @@
-export declare const getTopPosition: (dom: HTMLElement) => string;
-export declare const getLeftPosition: (dom: HTMLElement, type: string, innerContainer?: HTMLElement | null, macroInteractionUpdates?: boolean) => string;
+export declare const getTopPosition: (dom: HTMLElement | null) => string;
+export declare const getLeftPosition: (dom: HTMLElement | null, type: string, innerContainer?: HTMLElement | null, macroInteractionUpdates?: boolean) => string;

package/dist/types-ts4.5/utils/drag-handle-positions.d.ts

@@ -1,2 +1,2 @@
-export declare const getTopPosition: (dom: HTMLElement) => string;
-export declare const getLeftPosition: (dom: HTMLElement, type: string, innerContainer?: HTMLElement | null, macroInteractionUpdates?: boolean) => string;
+export declare const getTopPosition: (dom: HTMLElement | null) => string;
+export declare const getLeftPosition: (dom: HTMLElement | null, type: string, innerContainer?: HTMLElement | null, macroInteractionUpdates?: boolean) => string;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-block-controls",
-	"version": "1.4.22",
+	"version": "1.4.23",
 	"description": "Block controls plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -31,6 +31,7 @@
 		".": "./src/index.ts"
 	},
 	"dependencies": {
+		"@atlaskit/adf-schema": "^36.10.7",
 		"@atlaskit/editor-common": "^82.8.0",
 		"@atlaskit/editor-plugin-analytics": "^1.2.3",
 		"@atlaskit/editor-plugin-editor-disabled": "^1.1.5",
@@ -38,12 +39,12 @@
 		"@atlaskit/editor-plugin-width": "^1.1.0",
 		"@atlaskit/editor-prosemirror": "4.0.1",
 		"@atlaskit/editor-tables": "^2.7.0",
-		"@atlaskit/icon": "^22.3.0",
+		"@atlaskit/icon": "^22.4.0",
 		"@atlaskit/platform-feature-flags": "^0.2.0",
 		"@atlaskit/pragmatic-drag-and-drop": "^1.1.0",
 		"@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^1.3.0",
 		"@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^1.1.0",
-		"@atlaskit/tokens": "^1.50.0",
+		"@atlaskit/tokens": "^1.51.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
 		"bind-event-listener": "^3.0.0",