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

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @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
+
+- [#111855](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/111855)
+  [`858997cc1d1e0`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/858997cc1d1e0) -
+  ED-23619 Improve drop latency by cleaning up decorations before they are being redrawn
+
 ## 1.4.21
 
 ### 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/decorations.js

@@ -14,6 +14,7 @@ var _dropTarget = require("../ui/drop-target");
 var _mouseMoveWrapper = require("../ui/mouse-move-wrapper");
 var dropTargetDecorations = exports.dropTargetDecorations = function dropTargetDecorations(oldState, newState, api) {
   var decs = [];
+  unmountDecorations('data-blocks-drop-target-container');
   // Decoration state is used to keep track of the position of the drop targets
   // and allows us to easily map the updated position in the plugin apply method.
   var decorationState = [];
@@ -24,6 +25,7 @@ var dropTargetDecorations = exports.dropTargetDecorations = function dropTargetD
     });
     decs.push(_view.Decoration.widget(pos, function () {
       var element = document.createElement('div');
+      element.setAttribute('data-blocks-drop-target-container', 'true');
       _reactDom.default.render( /*#__PURE__*/(0, _react.createElement)(_dropTarget.DropTarget, {
         api: api,
         index: index
@@ -48,6 +50,7 @@ var dropTargetDecorations = exports.dropTargetDecorations = function dropTargetD
   });
   decs.push(_view.Decoration.widget(newState.doc.nodeSize - 2, function () {
     var element = document.createElement('div');
+    element.setAttribute('data-blocks-drop-target-container', 'true');
     _reactDom.default.render( /*#__PURE__*/(0, _react.createElement)(_dropTarget.DropTarget, {
       api: api,
       index: decorationState.length
@@ -80,10 +83,12 @@ var nodeDecorations = exports.nodeDecorations = function nodeDecorations(newStat
  */
 var mouseMoveWrapperDecorations = exports.mouseMoveWrapperDecorations = function mouseMoveWrapperDecorations(newState, api) {
   var decs = [];
+  unmountDecorations('data-blocks-decoration-container');
   newState.doc.descendants(function (node, pos, _parent, index) {
     var anchorName = "--node-anchor-".concat(node.type.name, "-").concat(index);
     decs.push(_view.Decoration.widget(pos, function (view, getPos) {
       var element = document.createElement('div');
+      element.setAttribute('data-blocks-decoration-container', 'true');
       _reactDom.default.render( /*#__PURE__*/(0, _react.createElement)(_mouseMoveWrapper.MouseMoveWrapper, {
         view: view,
         api: api,
@@ -108,6 +113,7 @@ var dragHandleDecoration = exports.dragHandleDecoration = function dragHandleDec
   return _view.Decoration.widget(pos, function (view, getPos) {
     var element = document.createElement('div');
     element.setAttribute('data-testid', 'block-ctrl-decorator-widget');
+    element.setAttribute('data-blocks-drag-handle-container', 'true');
     _reactDom.default.render( /*#__PURE__*/(0, _react.createElement)(_dragHandle.DragHandle, {
       view: view,
       api: api,
@@ -118,6 +124,17 @@ var dragHandleDecoration = exports.dragHandleDecoration = function dragHandleDec
     return element;
   }, {
     side: -1,
-    id: 'drag-handle'
+    id: 'drag-handle',
+    destroy: function destroy(node) {
+      _reactDom.default.unmountComponentAtNode(node);
+    }
+  });
+};
+var unmountDecorations = function unmountDecorations(selector) {
+  // Removing decorations manually instead of using native destroy function in prosemirror API
+  // as it was more responsive and causes less re-rendering
+  var decorationsToRemove = document.querySelectorAll("[".concat(selector, "=\"true\"]"));
+  decorationsToRemove.forEach(function (el) {
+    _reactDom.default.unmountComponentAtNode(el);
   });
 };

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");
@@ -34,18 +35,17 @@ var destroyFn = function destroyFn(api) {
       scrollable.style.setProperty('scroll-behavior', 'unset');
     },
     onDrop: function onDrop(_ref2) {
+      var _api$core;
       var location = _ref2.location,
         source = _ref2.source;
       scrollable.style.setProperty('scroll-behavior', null);
-
-      // 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) {
+      api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(function (_ref3) {
+        var tr = _ref3.tr;
+        var _ref4 = source.data,
+          start = _ref4.start;
+        // if no drop targets are rendered, assume that drop is invalid
+        if (location.current.dropTargets.length === 0) {
           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({
@@ -58,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);
@@ -87,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;
         }
@@ -96,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');
@@ -127,7 +135,14 @@ 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]);
           }
         }
@@ -144,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;
@@ -162,7 +178,7 @@ var createPlugin = exports.createPlugin = function createPlugin(api) {
         }
 
         // Map drop target decoration positions when the document changes
-        if (tr.docChanged && currentState.isDragging) {
+        if (tr.docChanged && isDragging) {
           decorationState = decorationState.map(function (_ref8) {
             var index = _ref8.index,
               pos = _ref8.pos;
@@ -187,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,
@@ -231,7 +247,7 @@ var createPlugin = exports.createPlugin = function createPlugin(api) {
       return {
         destroy: function destroy() {
           resizeObserver.unobserve(dom);
-          return pragmaticCleanup;
+          pragmaticCleanup();
         }
       };
     }

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,21 +129,31 @@ 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$core6 = api.core) === null || _api$core6 === void 0 || _api$core6.actions.focus();
-      },
-      onDrop: function onDrop() {
-        var _api$core7;
-        api === null || api === void 0 || (_api$core7 = api.core) === null || _api$core7 === void 0 || _api$core7.actions.execute(function (_ref6) {
+        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;
-          return tr.setMeta(_main.key, {
-            isDragging: false
+          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();
       }
     });
   }, [api, start, view, anchorName, nodeType]);
@@ -148,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/decorations.js

@@ -6,6 +6,7 @@ import { DropTarget } from '../ui/drop-target';
 import { MouseMoveWrapper } from '../ui/mouse-move-wrapper';
 export const dropTargetDecorations = (oldState, newState, api) => {
   const decs = [];
+  unmountDecorations('data-blocks-drop-target-container');
   // Decoration state is used to keep track of the position of the drop targets
   // and allows us to easily map the updated position in the plugin apply method.
   const decorationState = [];
@@ -16,6 +17,7 @@ export const dropTargetDecorations = (oldState, newState, api) => {
     });
     decs.push(Decoration.widget(pos, () => {
       const element = document.createElement('div');
+      element.setAttribute('data-blocks-drop-target-container', 'true');
       ReactDOM.render( /*#__PURE__*/createElement(DropTarget, {
         api,
         index
@@ -40,6 +42,7 @@ export const dropTargetDecorations = (oldState, newState, api) => {
   });
   decs.push(Decoration.widget(newState.doc.nodeSize - 2, () => {
     const element = document.createElement('div');
+    element.setAttribute('data-blocks-drop-target-container', 'true');
     ReactDOM.render( /*#__PURE__*/createElement(DropTarget, {
       api,
       index: decorationState.length
@@ -73,10 +76,12 @@ export const nodeDecorations = newState => {
  */
 export const mouseMoveWrapperDecorations = (newState, api) => {
   const decs = [];
+  unmountDecorations('data-blocks-decoration-container');
   newState.doc.descendants((node, pos, _parent, index) => {
     const anchorName = `--node-anchor-${node.type.name}-${index}`;
     decs.push(Decoration.widget(pos, (view, getPos) => {
       const element = document.createElement('div');
+      element.setAttribute('data-blocks-decoration-container', 'true');
       ReactDOM.render( /*#__PURE__*/createElement(MouseMoveWrapper, {
         view,
         api,
@@ -101,6 +106,7 @@ export const dragHandleDecoration = (pos, anchorName, nodeType, api) => {
   return Decoration.widget(pos, (view, getPos) => {
     const element = document.createElement('div');
     element.setAttribute('data-testid', 'block-ctrl-decorator-widget');
+    element.setAttribute('data-blocks-drag-handle-container', 'true');
     ReactDOM.render( /*#__PURE__*/createElement(DragHandle, {
       view,
       api,
@@ -111,6 +117,17 @@ export const dragHandleDecoration = (pos, anchorName, nodeType, api) => {
     return element;
   }, {
     side: -1,
-    id: 'drag-handle'
+    id: 'drag-handle',
+    destroy: node => {
+      ReactDOM.unmountComponentAtNode(node);
+    }
+  });
+};
+const unmountDecorations = selector => {
+  // Removing decorations manually instead of using native destroy function in prosemirror API
+  // as it was more responsive and causes less re-rendering
+  const decorationsToRemove = document.querySelectorAll(`[${selector}="true"]`);
+  decorationsToRemove.forEach(el => {
+    ReactDOM.unmountComponentAtNode(el);
   });
 };

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';
@@ -28,17 +29,16 @@ const destroyFn = api => {
       location,
       source
     }) => {
+      var _api$core;
       scrollable.style.setProperty('scroll-behavior', null);
-
-      // if no drop targets are rendered, assume that drop is invalid
-      if (location.current.dropTargets.length === 0) {
-        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(({
+        tr
+      }) => {
         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
-        }) => {
+        // 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;
@@ -52,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);
@@ -81,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;
         }
@@ -91,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');
@@ -122,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]);
           }
         }
@@ -138,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
@@ -156,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
@@ -182,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,
@@ -226,7 +240,7 @@ export const createPlugin = api => {
       return {
         destroy() {
           resizeObserver.unobserve(dom);
-          return pragmaticCleanup;
+          pragmaticCleanup();
         }
       };
     }