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

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,22 +121,32 @@ 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$core6 = api.core) === null || _api$core6 === void 0 ? void 0 : _api$core6.actions.focus();
-      },
-      onDrop() {
-        var _api$core7;
-        api === null || api === void 0 ? void 0 : (_api$core7 = api.core) === null || _api$core7 === void 0 ? void 0 : _api$core7.actions.execute(({
+        api === null || api === void 0 ? void 0 : (_api$core5 = api.core) === null || _api$core5 === void 0 ? void 0 : _api$core5.actions.execute(({
           tr
         }) => {
-          return tr.setMeta(key, {
-            isDragging: false
+          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();
       }
     });
   }, [api, start, view, anchorName, nodeType]);
@@ -141,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/decorations.js

@@ -7,6 +7,7 @@ import { DropTarget } from '../ui/drop-target';
 import { MouseMoveWrapper } from '../ui/mouse-move-wrapper';
 export var 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 = [];
@@ -17,6 +18,7 @@ export var dropTargetDecorations = function dropTargetDecorations(oldState, newS
     });
     decs.push(Decoration.widget(pos, function () {
       var element = document.createElement('div');
+      element.setAttribute('data-blocks-drop-target-container', 'true');
       ReactDOM.render( /*#__PURE__*/createElement(DropTarget, {
         api: api,
         index: index
@@ -41,6 +43,7 @@ export var dropTargetDecorations = function dropTargetDecorations(oldState, newS
   });
   decs.push(Decoration.widget(newState.doc.nodeSize - 2, function () {
     var element = document.createElement('div');
+    element.setAttribute('data-blocks-drop-target-container', 'true');
     ReactDOM.render( /*#__PURE__*/createElement(DropTarget, {
       api: api,
       index: decorationState.length
@@ -73,10 +76,12 @@ export var nodeDecorations = function nodeDecorations(newState) {
  */
 export var 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(Decoration.widget(pos, function (view, getPos) {
       var element = document.createElement('div');
+      element.setAttribute('data-blocks-decoration-container', 'true');
       ReactDOM.render( /*#__PURE__*/createElement(MouseMoveWrapper, {
         view: view,
         api: api,
@@ -101,6 +106,7 @@ export var dragHandleDecoration = function dragHandleDecoration(pos, anchorName,
   return 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.render( /*#__PURE__*/createElement(DragHandle, {
       view: view,
       api: api,
@@ -111,6 +117,17 @@ export var dragHandleDecoration = function dragHandleDecoration(pos, anchorName,
     return element;
   }, {
     side: -1,
-    id: 'drag-handle'
+    id: 'drag-handle',
+    destroy: function destroy(node) {
+      ReactDOM.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.unmountComponentAtNode(el);
   });
 };

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';
@@ -27,18 +28,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({
@@ -51,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);
@@ -80,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;
         }
@@ -89,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');
@@ -120,7 +128,14 @@ 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]);
           }
         }
@@ -137,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;
@@ -155,7 +171,7 @@ export var 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;
@@ -180,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,
@@ -224,7 +240,7 @@ export var createPlugin = function createPlugin(api) {
       return {
         destroy: function destroy() {
           resizeObserver.unobserve(dom);
-          return pragmaticCleanup;
+          pragmaticCleanup();
         }
       };
     }

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,21 +121,31 @@ 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$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(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: 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();
       }
     });
   }, [api, start, view, anchorName, nodeType]);
@@ -140,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/index.d.ts

@@ -1,2 +1,2 @@
 export { blockControlsPlugin } from './plugin';
-export type { BlockControlsPlugin, DecorationState } from './types';
+export type { BlockControlsPlugin, DecorationState, BlockControlsSharedState } from './types';

package/dist/types/types.d.ts

@@ -19,6 +19,15 @@ export interface PluginState {
     isDocSizeLimitEnabled: boolean;
 }
 export type ReleaseHiddenDecoration = () => boolean | undefined;
+export type BlockControlsSharedState = {
+    isMenuOpen: boolean;
+    activeNode: {
+        pos: number;
+        anchorName: string;
+    } | null;
+    decorationState: DecorationState;
+    isDragging: boolean;
+} | undefined;
 export type BlockControlsPlugin = NextEditorPlugin<'blockControls', {
     dependencies: [
         OptionalPlugin<EditorDisabledPlugin>,
@@ -26,15 +35,7 @@ export type BlockControlsPlugin = NextEditorPlugin<'blockControls', {
         OptionalPlugin<FeatureFlagsPlugin>,
         OptionalPlugin<AnalyticsPlugin>
     ];
-    sharedState: {
-        isMenuOpen: boolean;
-        activeNode: {
-            pos: number;
-            anchorName: string;
-        } | null;
-        decorationState: DecorationState;
-        isDragging: boolean;
-    } | undefined;
+    sharedState: BlockControlsSharedState;
     commands: {
         moveNode: (start: number, to: number) => EditorCommand;
         showDragHandleAt: (pos: number, anchorName: string, nodeType: string) => EditorCommand;

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/index.d.ts

@@ -1,2 +1,2 @@
 export { blockControlsPlugin } from './plugin';
-export type { BlockControlsPlugin, DecorationState } from './types';
+export type { BlockControlsPlugin, DecorationState, BlockControlsSharedState } from './types';

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

@@ -19,6 +19,15 @@ export interface PluginState {
     isDocSizeLimitEnabled: boolean;
 }
 export type ReleaseHiddenDecoration = () => boolean | undefined;
+export type BlockControlsSharedState = {
+    isMenuOpen: boolean;
+    activeNode: {
+        pos: number;
+        anchorName: string;
+    } | null;
+    decorationState: DecorationState;
+    isDragging: boolean;
+} | undefined;
 export type BlockControlsPlugin = NextEditorPlugin<'blockControls', {
     dependencies: [
         OptionalPlugin<EditorDisabledPlugin>,
@@ -26,15 +35,7 @@ export type BlockControlsPlugin = NextEditorPlugin<'blockControls', {
         OptionalPlugin<FeatureFlagsPlugin>,
         OptionalPlugin<AnalyticsPlugin>
     ];
-    sharedState: {
-        isMenuOpen: boolean;
-        activeNode: {
-            pos: number;
-            anchorName: string;
-        } | null;
-        decorationState: DecorationState;
-        isDragging: boolean;
-    } | undefined;
+    sharedState: BlockControlsSharedState;
     commands: {
         moveNode: (start: number, to: number) => EditorCommand;
         showDragHandleAt: (pos: number, anchorName: string, nodeType: string) => EditorCommand;

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.21",
+	"version": "1.4.23",
 	"description": "Block controls plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -31,19 +31,20 @@
 		".": "./src/index.ts"
 	},
 	"dependencies": {
-		"@atlaskit/editor-common": "^82.7.0",
+		"@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",
 		"@atlaskit/editor-plugin-feature-flags": "^1.1.0",
 		"@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",