@atlaskit/editor-plugin-block-controls 3.1.1 → 3.1.3

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 3.1.3
+
+### Patch Changes
+
+- [#118581](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/118581)
+  [`8e3b48ccfe22f`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/8e3b48ccfe22f) -
+  Persist block menu while mouse moving
+- Updated dependencies
+
+## 3.1.2
+
+### Patch Changes
+
+- [#117869](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/117869)
+  [`1668bcd621203`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/1668bcd621203) -
+  COMPHUB-2622 Added data attributes for editor elements
+
 ## 3.1.1
 
 ### Patch Changes

package/dist/cjs/blockControlsPlugin.js

@@ -36,7 +36,7 @@ var blockControlsPlugin = exports.blockControlsPlugin = function blockControlsPl
     commands: {
       moveNode: (0, _moveNode.moveNode)(api),
       moveToLayout: (0, _moveToLayout.moveToLayout)(api),
-      showDragHandleAt: function showDragHandleAt(pos, anchorName, nodeType, handleOptions) {
+      showDragHandleAt: function showDragHandleAt(pos, anchorName, nodeType, handleOptions, rootPos, rootAnchorName, rootNodeType) {
         return function (_ref3) {
           var tr = _ref3.tr;
           var currMeta = tr.getMeta(_main.key);
@@ -45,7 +45,10 @@ var blockControlsPlugin = exports.blockControlsPlugin = function blockControlsPl
               pos: pos,
               anchorName: anchorName,
               nodeType: nodeType,
-              handleOptions: handleOptions
+              handleOptions: handleOptions,
+              rootPos: rootPos,
+              rootAnchorName: rootAnchorName,
+              rootNodeType: rootNodeType
             },
             closeMenu: (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? true : undefined
           }));
@@ -63,7 +66,9 @@ var blockControlsPlugin = exports.blockControlsPlugin = function blockControlsPl
             return tr;
           }
           tr.setMeta(_main.key, _objectSpread(_objectSpread({}, currMeta), {}, {
-            toggleMenu: true
+            toggleMenu: {
+              anchorName: options === null || options === void 0 ? void 0 : options.anchorName
+            }
           }));
           return tr;
         };
@@ -137,17 +142,18 @@ var blockControlsPlugin = exports.blockControlsPlugin = function blockControlsPl
       }
     },
     getSharedState: function getSharedState(editorState) {
-      var _key$getState$isMenuO, _key$getState, _key$getState$activeN, _key$getState2, _key$getState$isDragg, _key$getState3, _key$getState$isPMDra, _key$getState4, _key$getState$multiSe, _key$getState5, _key$getState$isShift, _key$getState6;
+      var _key$getState$isMenuO, _key$getState, _key$getState$menuTri, _key$getState2, _key$getState$activeN, _key$getState3, _key$getState$isDragg, _key$getState4, _key$getState$isPMDra, _key$getState5, _key$getState$multiSe, _key$getState6, _key$getState$isShift, _key$getState7;
       if (!editorState) {
         return undefined;
       }
       return {
         isMenuOpen: (_key$getState$isMenuO = (_key$getState = _main.key.getState(editorState)) === null || _key$getState === void 0 ? void 0 : _key$getState.isMenuOpen) !== null && _key$getState$isMenuO !== void 0 ? _key$getState$isMenuO : false,
-        activeNode: (_key$getState$activeN = (_key$getState2 = _main.key.getState(editorState)) === null || _key$getState2 === void 0 ? void 0 : _key$getState2.activeNode) !== null && _key$getState$activeN !== void 0 ? _key$getState$activeN : undefined,
-        isDragging: (_key$getState$isDragg = (_key$getState3 = _main.key.getState(editorState)) === null || _key$getState3 === void 0 ? void 0 : _key$getState3.isDragging) !== null && _key$getState$isDragg !== void 0 ? _key$getState$isDragg : false,
-        isPMDragging: (_key$getState$isPMDra = (_key$getState4 = _main.key.getState(editorState)) === null || _key$getState4 === void 0 ? void 0 : _key$getState4.isPMDragging) !== null && _key$getState$isPMDra !== void 0 ? _key$getState$isPMDra : false,
-        multiSelectDnD: (_key$getState$multiSe = (_key$getState5 = _main.key.getState(editorState)) === null || _key$getState5 === void 0 ? void 0 : _key$getState5.multiSelectDnD) !== null && _key$getState$multiSe !== void 0 ? _key$getState$multiSe : undefined,
-        isShiftDown: (_key$getState$isShift = (_key$getState6 = _main.key.getState(editorState)) === null || _key$getState6 === void 0 ? void 0 : _key$getState6.isShiftDown) !== null && _key$getState$isShift !== void 0 ? _key$getState$isShift : undefined
+        menuTriggerBy: (_key$getState$menuTri = (_key$getState2 = _main.key.getState(editorState)) === null || _key$getState2 === void 0 ? void 0 : _key$getState2.menuTriggerBy) !== null && _key$getState$menuTri !== void 0 ? _key$getState$menuTri : undefined,
+        activeNode: (_key$getState$activeN = (_key$getState3 = _main.key.getState(editorState)) === null || _key$getState3 === void 0 ? void 0 : _key$getState3.activeNode) !== null && _key$getState$activeN !== void 0 ? _key$getState$activeN : undefined,
+        isDragging: (_key$getState$isDragg = (_key$getState4 = _main.key.getState(editorState)) === null || _key$getState4 === void 0 ? void 0 : _key$getState4.isDragging) !== null && _key$getState$isDragg !== void 0 ? _key$getState$isDragg : false,
+        isPMDragging: (_key$getState$isPMDra = (_key$getState5 = _main.key.getState(editorState)) === null || _key$getState5 === void 0 ? void 0 : _key$getState5.isPMDragging) !== null && _key$getState$isPMDra !== void 0 ? _key$getState$isPMDra : false,
+        multiSelectDnD: (_key$getState$multiSe = (_key$getState6 = _main.key.getState(editorState)) === null || _key$getState6 === void 0 ? void 0 : _key$getState6.multiSelectDnD) !== null && _key$getState$multiSe !== void 0 ? _key$getState$multiSe : undefined,
+        isShiftDown: (_key$getState$isShift = (_key$getState7 = _main.key.getState(editorState)) === null || _key$getState7 === void 0 ? void 0 : _key$getState7.isShiftDown) !== null && _key$getState$isShift !== void 0 ? _key$getState$isShift : undefined
       };
     },
     contentComponent: function contentComponent(_ref7) {

package/dist/cjs/pm-plugins/decorations-quick-insert-button.js

@@ -0,0 +1,40 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.quickInsertButtonDecoration = exports.findQuickInsertInsertButtonDecoration = void 0;
+var _react = require("react");
+var _uuid = _interopRequireDefault(require("uuid"));
+var _view = require("@atlaskit/editor-prosemirror/view");
+var _quickInsertButton = require("../ui/quick-insert-button");
+var TYPE_QUICK_INSERT = 'INSERT_BUTTON';
+var findQuickInsertInsertButtonDecoration = exports.findQuickInsertInsertButtonDecoration = function findQuickInsertInsertButtonDecoration(decorations, from, to) {
+  return decorations.find(from, to, function (spec) {
+    return spec.type === TYPE_QUICK_INSERT;
+  });
+};
+var quickInsertButtonDecoration = exports.quickInsertButtonDecoration = function quickInsertButtonDecoration(api, formatMessage, rootPos, anchorName, nodeType, nodeViewPortalProviderAPI, rootAnchorName, rootNodeType) {
+  var key = (0, _uuid.default)();
+  return _view.Decoration.widget(rootPos, function (view, getPos) {
+    var element = document.createElement('span');
+    element.contentEditable = 'false';
+    nodeViewPortalProviderAPI.render(function () {
+      return /*#__PURE__*/(0, _react.createElement)(_quickInsertButton.TypeAheadControl, {
+        api: api,
+        getPos: getPos,
+        formatMessage: formatMessage,
+        view: view,
+        nodeType: nodeType,
+        anchorName: anchorName,
+        rootAnchorName: rootAnchorName,
+        rootNodeType: rootNodeType !== null && rootNodeType !== void 0 ? rootNodeType : nodeType
+      });
+    }, element, key);
+    return element;
+  }, {
+    side: -1,
+    type: TYPE_QUICK_INSERT
+  });
+};

package/dist/cjs/pm-plugins/handle-mouse-over.js

@@ -92,16 +92,35 @@ var handleMouseOver = exports.handleMouseOver = function handleMouseOver(view, e
       // Don't show drag handle for layout column in a single column layout
       return false;
     }
-    var rootPos;
+    var targetPos;
     if ((0, _experiments.editorExperiment)('nested-dnd', true)) {
-      rootPos = view.state.doc.resolve(pos).pos;
+      targetPos = view.state.doc.resolve(pos).pos;
     } else {
-      rootPos = view.state.doc.resolve(pos).start(1) - 1;
+      targetPos = view.state.doc.resolve(pos).start(1) - 1;
+    }
+    var rootAnchorName;
+    var rootNodeType;
+    var rootPos;
+    if ((0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
+      rootPos = view.state.doc.resolve(pos).before(1);
+      if (targetPos !== rootPos) {
+        var rootDOM = view.nodeDOM(rootPos);
+        if (rootDOM instanceof HTMLElement) {
+          var _rootDOM$getAttribute, _rootDOM$getAttribute2;
+          rootAnchorName = (_rootDOM$getAttribute = rootDOM.getAttribute('data-drag-handler-anchor-name')) !== null && _rootDOM$getAttribute !== void 0 ? _rootDOM$getAttribute : undefined;
+          rootNodeType = (_rootDOM$getAttribute2 = rootDOM.getAttribute('data-drag-handler-node-type')) !== null && _rootDOM$getAttribute2 !== void 0 ? _rootDOM$getAttribute2 : undefined;
+        }
+      }
     }
     var nodeType = rootElement.getAttribute('data-drag-handler-node-type');
     if (nodeType) {
-      var _api$core, _api$blockControls2;
-      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 ? void 0 : _api$blockControls2.commands.showDragHandleAt(rootPos, anchorName, nodeType));
+      if ((0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
+        var _api$core, _api$blockControls2, _rootPos, _rootAnchorName, _rootNodeType;
+        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 ? void 0 : _api$blockControls2.commands.showDragHandleAt(targetPos, anchorName, nodeType, undefined, (_rootPos = rootPos) !== null && _rootPos !== void 0 ? _rootPos : targetPos, (_rootAnchorName = rootAnchorName) !== null && _rootAnchorName !== void 0 ? _rootAnchorName : anchorName, (_rootNodeType = rootNodeType) !== null && _rootNodeType !== void 0 ? _rootNodeType : nodeType));
+      } else {
+        var _api$core2, _api$blockControls3;
+        api === null || api === void 0 || (_api$core2 = api.core) === null || _api$core2 === void 0 || _api$core2.actions.execute(api === null || api === void 0 || (_api$blockControls3 = api.blockControls) === null || _api$blockControls3 === void 0 ? void 0 : _api$blockControls3.commands.showDragHandleAt(targetPos, anchorName, nodeType));
+      }
     }
   }
 };

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

@@ -26,6 +26,7 @@ var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _decorationsAnchor = require("./decorations-anchor");
 var _decorationsDragHandle = require("./decorations-drag-handle");
 var _decorationsDropTarget = require("./decorations-drop-target");
+var _decorationsQuickInsertButton = require("./decorations-quick-insert-button");
 var _handleMouseOver = require("./handle-mouse-over");
 var _keymap = require("./keymap");
 var _activeAnchorTracker = require("./utils/active-anchor-tracker");
@@ -157,7 +158,7 @@ var getDecorations = exports.getDecorations = function getDecorations(state) {
   return (_key$getState = key.getState(state)) === null || _key$getState === void 0 ? void 0 : _key$getState.decorations;
 };
 var newApply = exports.newApply = function newApply(api, formatMessage, tr, currentState, newState, flags, nodeViewPortalProviderAPI, anchorRectCache) {
-  var _meta$multiSelectDnD, _meta$activeNode, _activeNode, _activeNode2, _meta$activeNode$hand, _meta$isDragging, _meta$isDragging2, _meta$editorHeight, _meta$editorWidthLeft, _meta$editorWidthRigh, _meta$isPMDragging, _meta$isShiftDown;
+  var _meta$multiSelectDnD, _meta$activeNode, _activeNode, _activeNode2, _meta$activeNode$hand, _meta$isDragging, _meta$isDragging2, _meta$toggleMenu, _meta$editorHeight, _meta$editorWidthLeft, _meta$editorWidthRigh, _meta$isPMDragging, _meta$isShiftDown;
   var activeNode = currentState.activeNode,
     decorations = currentState.decorations,
     isResizerResizing = currentState.isResizerResizing,
@@ -167,6 +168,7 @@ var newApply = exports.newApply = function newApply(api, formatMessage, tr, curr
     editorWidthRight = currentState.editorWidthRight,
     isDragging = currentState.isDragging,
     isMenuOpen = currentState.isMenuOpen,
+    menuTriggerBy = currentState.menuTriggerBy,
     isPMDragging = currentState.isPMDragging,
     isShiftDown = currentState.isShiftDown;
   var isActiveNodeDeleted = false;
@@ -180,7 +182,10 @@ var newApply = exports.newApply = function newApply(api, formatMessage, tr, curr
       activeNode = {
         pos: mappedPos.pos,
         anchorName: activeNode.anchorName,
-        nodeType: activeNode.nodeType
+        nodeType: activeNode.nodeType,
+        rootPos: activeNode.rootPos,
+        rootAnchorName: activeNode.rootAnchorName,
+        rootNodeType: activeNode.rootNodeType
       };
     }
     if (multiSelectDnD && flags.isMultiSelectEnabled) {
@@ -252,12 +257,25 @@ var newApply = exports.newApply = function newApply(api, formatMessage, tr, curr
     var _activeNode3, _activeNode4;
     var oldHandle = (0, _decorationsDragHandle.findHandleDec)(decorations, (_activeNode3 = activeNode) === null || _activeNode3 === void 0 ? void 0 : _activeNode3.pos, (_activeNode4 = activeNode) === null || _activeNode4 === void 0 ? void 0 : _activeNode4.pos);
     decorations = decorations.remove(oldHandle);
+    if ((0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
+      var _activeNode5, _activeNode6;
+      var oldQuickInsertButton = (0, _decorationsQuickInsertButton.findQuickInsertInsertButtonDecoration)(decorations, (_activeNode5 = activeNode) === null || _activeNode5 === void 0 ? void 0 : _activeNode5.rootPos, (_activeNode6 = activeNode) === null || _activeNode6 === void 0 ? void 0 : _activeNode6.rootPos);
+      decorations = decorations.remove(oldQuickInsertButton);
+    }
   } else if (api && shouldRecreateHandle) {
-    var _activeNode5, _activeNode6;
-    var _oldHandle = (0, _decorationsDragHandle.findHandleDec)(decorations, (_activeNode5 = activeNode) === null || _activeNode5 === void 0 ? void 0 : _activeNode5.pos, (_activeNode6 = activeNode) === null || _activeNode6 === void 0 ? void 0 : _activeNode6.pos);
+    var _activeNode7, _activeNode8;
+    var _oldHandle = (0, _decorationsDragHandle.findHandleDec)(decorations, (_activeNode7 = activeNode) === null || _activeNode7 === void 0 ? void 0 : _activeNode7.pos, (_activeNode8 = activeNode) === null || _activeNode8 === void 0 ? void 0 : _activeNode8.pos);
     decorations = decorations.remove(_oldHandle);
     var handleDec = (0, _decorationsDragHandle.dragHandleDecoration)(api, formatMessage, latestActiveNode === null || latestActiveNode === void 0 ? void 0 : latestActiveNode.pos, latestActiveNode === null || latestActiveNode === void 0 ? void 0 : latestActiveNode.anchorName, latestActiveNode === null || latestActiveNode === void 0 ? void 0 : latestActiveNode.nodeType, nodeViewPortalProviderAPI, latestActiveNode === null || latestActiveNode === void 0 ? void 0 : latestActiveNode.handleOptions);
-    decorations = decorations.add(newState.doc, [handleDec]);
+    if ((0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
+      var _activeNode9, _activeNode10;
+      var _oldQuickInsertButton = (0, _decorationsQuickInsertButton.findQuickInsertInsertButtonDecoration)(decorations, (_activeNode9 = activeNode) === null || _activeNode9 === void 0 ? void 0 : _activeNode9.rootPos, (_activeNode10 = activeNode) === null || _activeNode10 === void 0 ? void 0 : _activeNode10.rootPos);
+      decorations = decorations.remove(_oldQuickInsertButton);
+      var quickInsertButton = (0, _decorationsQuickInsertButton.quickInsertButtonDecoration)(api, formatMessage, latestActiveNode === null || latestActiveNode === void 0 ? void 0 : latestActiveNode.rootPos, latestActiveNode === null || latestActiveNode === void 0 ? void 0 : latestActiveNode.anchorName, latestActiveNode === null || latestActiveNode === void 0 ? void 0 : latestActiveNode.nodeType, nodeViewPortalProviderAPI, latestActiveNode === null || latestActiveNode === void 0 ? void 0 : latestActiveNode.rootAnchorName, latestActiveNode === null || latestActiveNode === void 0 ? void 0 : latestActiveNode.rootNodeType);
+      decorations = decorations.add(newState.doc, [handleDec, quickInsertButton]);
+    } else {
+      decorations = decorations.add(newState.doc, [handleDec]);
+    }
   }
 
   // Drop targets may be missing when the node count is being changed during a drag
@@ -284,12 +302,23 @@ var newApply = exports.newApply = function newApply(api, formatMessage, tr, curr
     }
   }
   var newActiveNode = isEmptyDoc || !(meta !== null && meta !== void 0 && meta.activeNode) && (0, _decorationsDragHandle.findHandleDec)(decorations, latestActiveNode === null || latestActiveNode === void 0 ? void 0 : latestActiveNode.pos, latestActiveNode === null || latestActiveNode === void 0 ? void 0 : latestActiveNode.pos).length === 0 ? null : latestActiveNode;
-  var isMenuOpenNew = (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? meta !== null && meta !== void 0 && meta.closeMenu ? false : meta !== null && meta !== void 0 && meta.toggleMenu ? !isMenuOpen : isMenuOpen : meta !== null && meta !== void 0 && meta.toggleMenu ? !isMenuOpen : isMenuOpen;
+  var isMenuOpenNew = isMenuOpen;
+  if ((0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
+    if (meta !== null && meta !== void 0 && meta.closeMenu) {
+      isMenuOpenNew = false;
+    } else if (meta !== null && meta !== void 0 && meta.toggleMenu) {
+      var isSameAnchor = (meta === null || meta === void 0 ? void 0 : meta.toggleMenu.anchorName) === menuTriggerBy;
+      isMenuOpenNew = menuTriggerBy === undefined || isSameAnchor || !isMenuOpen && !isSameAnchor ? !isMenuOpen : isMenuOpen;
+    }
+  } else if (meta !== null && meta !== void 0 && meta.toggleMenu) {
+    isMenuOpenNew = !isMenuOpen;
+  }
   return {
     decorations: decorations,
     activeNode: newActiveNode,
     isDragging: (_meta$isDragging2 = meta === null || meta === void 0 ? void 0 : meta.isDragging) !== null && _meta$isDragging2 !== void 0 ? _meta$isDragging2 : isDragging,
     isMenuOpen: isMenuOpenNew,
+    menuTriggerBy: (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? (meta === null || meta === void 0 || (_meta$toggleMenu = meta.toggleMenu) === null || _meta$toggleMenu === void 0 ? void 0 : _meta$toggleMenu.anchorName) || menuTriggerBy : undefined,
     editorHeight: (_meta$editorHeight = meta === null || meta === void 0 ? void 0 : meta.editorHeight) !== null && _meta$editorHeight !== void 0 ? _meta$editorHeight : editorHeight,
     editorWidthLeft: (_meta$editorWidthLeft = meta === null || meta === void 0 ? void 0 : meta.editorWidthLeft) !== null && _meta$editorWidthLeft !== void 0 ? _meta$editorWidthLeft : editorWidthLeft,
     editorWidthRight: (_meta$editorWidthRigh = meta === null || meta === void 0 ? void 0 : meta.editorWidthRight) !== null && _meta$editorWidthRigh !== void 0 ? _meta$editorWidthRigh : editorWidthRight,

package/dist/cjs/pm-plugins/utils/widget-positions.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getLeftPositionForRootElement = void 0;
+var _consts = require("../../ui/consts");
+// Adapted from `src/pm-plugins/utils/drag-handle-positions.ts`
+// CHANGES - removed parentNodeType, use only for positioning widgets for top level element
+// CHANGES - removed layout
+// CHANGES - added overrides for constants for widget dimensions
+var getLeftPositionForRootElement = exports.getLeftPositionForRootElement = function getLeftPositionForRootElement(dom, nodeType, widgetDimensions, innerContainer, macroInteractionUpdates) {
+  if (!dom) {
+    return 'auto';
+  }
+  if (!innerContainer) {
+    return "".concat(dom.offsetLeft - (0, _consts.rootElementGap)(nodeType) - widgetDimensions.width, "px");
+  }
+
+  // There is a showMacroInteractionDesignUpdates prop in extension node wrapper that can add a relative span under the top level div
+  // We need to adjust the left offset position of the drag handle to account for the relative span
+  var relativeSpan = macroInteractionUpdates ? dom.querySelector('span.relative') : null;
+  var leftAdjustment = relativeSpan ? relativeSpan.offsetLeft : 0;
+  return getComputedStyle(innerContainer).transform === 'none' ? "".concat(innerContainer.offsetLeft + leftAdjustment - (0, _consts.rootElementGap)(nodeType) - widgetDimensions.width, "px") : "".concat(innerContainer.offsetLeft + leftAdjustment - innerContainer.offsetWidth / 2 - (0, _consts.rootElementGap)(nodeType) - widgetDimensions.width, "px");
+};

package/dist/cjs/ui/block-menu.js

@@ -13,7 +13,6 @@ var _uiMenu = require("@atlaskit/editor-common/ui-menu");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _blockMenuItems = require("./block-menu-items");
 var _consts = require("./consts");
-var dragHandleSelector = '[data-blocks-drag-handle-container="true"] button';
 var BlockMenu = function BlockMenu(_ref) {
   var editorView = _ref.editorView,
     mountPoint = _ref.mountPoint,
@@ -26,7 +25,8 @@ var BlockMenu = function BlockMenu(_ref) {
   if (!(blockControlsState !== null && blockControlsState !== void 0 && blockControlsState.isMenuOpen)) {
     return null;
   }
-  var targetHandleRef = document.querySelector(dragHandleSelector);
+  var activeNodeSelector = "[data-drag-handler-anchor-name=".concat(blockControlsState === null || blockControlsState === void 0 ? void 0 : blockControlsState.menuTriggerBy, "]");
+  var targetHandleRef = document.querySelector(activeNodeSelector);
   var items = (0, _blockMenuItems.getBlockMenuItems)(formatMessage);
   var handleOpenChange = function handleOpenChange(payload) {
     if (!(payload !== null && payload !== void 0 && payload.isOpen)) {
@@ -40,10 +40,13 @@ var BlockMenu = function BlockMenu(_ref) {
     if (editorView) {
       var _menuItemsCallback, _menuItemsCallback$ca;
       (_menuItemsCallback = _blockMenuItems.menuItemsCallback[item.value.name]) === null || _menuItemsCallback === void 0 || (_menuItemsCallback$ca = _menuItemsCallback.call(_blockMenuItems.menuItemsCallback, api, formatMessage)) === null || _menuItemsCallback$ca === void 0 || _menuItemsCallback$ca(editorView.state, editorView.dispatch, editorView);
+      api === null || api === void 0 || api.core.actions.execute(api === null || api === void 0 ? void 0 : api.blockControls.commands.toggleBlockMenu({
+        closeMenu: true
+      }));
     }
   };
   return /*#__PURE__*/_react.default.createElement(_ui.Popup, {
-    alignX: 'right',
+    alignX: 'left',
     alignY: 'start'
     // Ignored via go/ees005
     // eslint-disable-next-line @atlaskit/editor/no-as-casting
@@ -53,7 +56,7 @@ var BlockMenu = function BlockMenu(_ref) {
     zIndex: _editorSharedStyles.akEditorFloatingOverlapPanelZIndex,
     forcePlacement: true,
     stick: true,
-    offset: [-18, 8]
+    offset: [-6, 8]
   }, /*#__PURE__*/_react.default.createElement(_uiMenu.DropdownMenu, {
     mountTo: mountPoint,
     boundariesElement: boundariesElement,

package/dist/cjs/ui/consts.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.topPositionAdjustment = exports.spacingBetweenNodesForPreview = exports.spaceLookupMap = exports.nodeMargins = exports.getNestedNodeLeftPaddingMargin = exports.dropTargetMarginMap = exports.dragHandleGap = exports.DRAG_HANDLE_ZINDEX = exports.DRAG_HANDLE_WIDTH = exports.DRAG_HANDLE_PARAGRAPH_TOP_ADJUSTMENT = exports.DRAG_HANDLE_NARROW_GAP = exports.DRAG_HANDLE_MAX_WIDTH_PLUS_GAP = exports.DRAG_HANDLE_MAX_SHIFT_CLICK_DEPTH = exports.DRAG_HANDLE_MAX_GAP = exports.DRAG_HANDLE_LAYOUT_SECTION_TOP_ADJUSTMENT = exports.DRAG_HANDLE_HEIGHT = exports.DRAG_HANDLE_H6_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H5_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H4_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H3_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H2_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H1_TOP_ADJUSTMENT = exports.DRAG_HANDLE_DIVIDER_TOP_ADJUSTMENT = exports.DRAG_HANDLE_DEFAULT_GAP = exports.DRAG_HANDLE_BORDER_RADIUS = exports.DEFAULT_COLUMN_DISTRIBUTIONS = exports.BLOCK_MENU_WIDTH = void 0;
+exports.topPositionAdjustment = exports.spacingBetweenNodesForPreview = exports.spaceLookupMap = exports.rootElementGap = exports.nodeMargins = exports.getNestedNodeLeftPaddingMargin = exports.dropTargetMarginMap = exports.dragHandleGap = exports.QUICK_INSERT_WIDTH = exports.QUICK_INSERT_HEIGHT = exports.QUICK_INSERT_DIMENSIONS = exports.DRAG_HANDLE_ZINDEX = exports.DRAG_HANDLE_WIDTH = exports.DRAG_HANDLE_PARAGRAPH_TOP_ADJUSTMENT = exports.DRAG_HANDLE_NARROW_GAP = exports.DRAG_HANDLE_MAX_WIDTH_PLUS_GAP = exports.DRAG_HANDLE_MAX_SHIFT_CLICK_DEPTH = exports.DRAG_HANDLE_MAX_GAP = exports.DRAG_HANDLE_LAYOUT_SECTION_TOP_ADJUSTMENT = exports.DRAG_HANDLE_HEIGHT = exports.DRAG_HANDLE_H6_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H5_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H4_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H3_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H2_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H1_TOP_ADJUSTMENT = exports.DRAG_HANDLE_DIVIDER_TOP_ADJUSTMENT = exports.DRAG_HANDLE_DEFAULT_GAP = exports.DRAG_HANDLE_BORDER_RADIUS = exports.DEFAULT_COLUMN_DISTRIBUTIONS = exports.BLOCK_MENU_WIDTH = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
@@ -35,6 +35,12 @@ var DRAG_HANDLE_PARAGRAPH_TOP_ADJUSTMENT = exports.DRAG_HANDLE_PARAGRAPH_TOP_ADJ
  *  so we allow for some leniency to capture them all. e.g. Table is depth 3.
  */
 var DRAG_HANDLE_MAX_SHIFT_CLICK_DEPTH = exports.DRAG_HANDLE_MAX_SHIFT_CLICK_DEPTH = 3;
+var QUICK_INSERT_HEIGHT = exports.QUICK_INSERT_HEIGHT = 24;
+var QUICK_INSERT_WIDTH = exports.QUICK_INSERT_WIDTH = 24;
+var QUICK_INSERT_DIMENSIONS = exports.QUICK_INSERT_DIMENSIONS = {
+  width: QUICK_INSERT_WIDTH,
+  height: QUICK_INSERT_HEIGHT
+};
 var nodeTypeExcludeList = ['embedCard', 'mediaSingle', 'table'];
 var dragHandleGap = exports.dragHandleGap = function dragHandleGap(nodeType, parentNodeType) {
   if (nodeType === 'layoutSection' && (0, _platformFeatureFlags.fg)('platform_editor_advanced_layouts_post_fix_patch_2')) {
@@ -51,6 +57,17 @@ var dragHandleGap = exports.dragHandleGap = function dragHandleGap(nodeType, par
   }
   return DRAG_HANDLE_DEFAULT_GAP;
 };
+
+// use for returning hap only for root level elements
+var rootElementGap = exports.rootElementGap = function rootElementGap(nodeType) {
+  if (nodeTypeExcludeList.includes(nodeType)) {
+    return DRAG_HANDLE_MAX_GAP;
+  }
+  if (nodeType === 'layoutSection') {
+    return DRAG_HANDLE_MAX_GAP + 12;
+  }
+  return DRAG_HANDLE_DEFAULT_GAP;
+};
 var getNestedNodeLeftPaddingMargin = exports.getNestedNodeLeftPaddingMargin = function getNestedNodeLeftPaddingMargin(nodeType) {
   switch (nodeType) {
     case 'bodiedExtension':

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

@@ -192,9 +192,12 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
         tr = (0, _getSelection.selectNode)(tr, startPos, nodeType);
         if ((0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
           var _api$blockControls;
-          api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 || _api$blockControls.commands.toggleBlockMenu()({
+          api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 || _api$blockControls.commands.toggleBlockMenu({
+            anchorName: anchorName
+          })({
             tr: tr
           });
+          e.stopPropagation();
         }
       } else if (isTopLevelNode && $anchor.depth <= _consts.DRAG_HANDLE_MAX_SHIFT_CLICK_DEPTH && e.shiftKey) {
         var _api$blockControls2;
@@ -221,7 +224,7 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
       return tr;
     });
     view.focus();
-  }, [isMultiSelect, api === null || api === void 0 || (_api$core2 = api.core) === null || _api$core2 === void 0 ? void 0 : _api$core2.actions, api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions, api === null || api === void 0 || (_api$blockControls3 = api.blockControls) === null || _api$blockControls3 === void 0 ? void 0 : _api$blockControls3.commands, view, dragHandleSelected, getPos, multiSelectDnD === null || multiSelectDnD === void 0 ? void 0 : multiSelectDnD.anchor, isTopLevelNode, nodeType]);
+  }, [isMultiSelect, api === null || api === void 0 || (_api$core2 = api.core) === null || _api$core2 === void 0 ? void 0 : _api$core2.actions, api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions, api === null || api === void 0 || (_api$blockControls3 = api.blockControls) === null || _api$blockControls3 === void 0 ? void 0 : _api$blockControls3.commands, view, dragHandleSelected, getPos, multiSelectDnD === null || multiSelectDnD === void 0 ? void 0 : multiSelectDnD.anchor, isTopLevelNode, nodeType, anchorName]);
 
   // TODO - This needs to be investigated further. Drag preview generation is not always working
   // as expected with a node selection. This workaround sets the selection to the node on mouseDown,
@@ -624,6 +627,7 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
         ,
         onDrop: handleOnDrop,
         disabled: dragHandleDisabled,
+        "data-editor-block-ctrl-drag-handle": true,
         "data-testid": "block-ctrl-drag-handle"
       }, (0, _react2.jsx)(_primitives.Box, {
         as: "span",

package/dist/cjs/ui/quick-insert-button.js

@@ -0,0 +1,164 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TypeAheadControl = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _bindEventListener = require("bind-event-listener");
+var _keymaps = require("@atlaskit/editor-common/keymaps");
+var _messages = require("@atlaskit/editor-common/messages");
+var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
+var _state = require("@atlaskit/editor-prosemirror/state");
+var _add = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/add"));
+var _primitives = require("@atlaskit/primitives");
+var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
+var _dragHandlePositions = require("../pm-plugins/utils/drag-handle-positions");
+var _widgetPositions = require("../pm-plugins/utils/widget-positions");
+var _consts = require("./consts");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var buttonStyles = (0, _primitives.xcss)({
+  boxSizing: 'border-box',
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'center',
+  alignItems: 'center',
+  height: "var(--ds-space-300, 24px)",
+  width: "var(--ds-space-300, 24px)",
+  border: 'none',
+  backgroundColor: 'color.background.neutral',
+  borderRadius: '50%',
+  color: 'color.text.accent.gray',
+  zIndex: 'card',
+  outline: 'none',
+  ':hover': {
+    backgroundColor: 'color.background.neutral.hovered'
+  },
+  ':active': {
+    backgroundColor: 'color.background.neutral.pressed'
+  },
+  ':focus': {
+    outline: "2px solid ".concat("var(--ds-border-focused, #388BFF)")
+  }
+});
+var containerStaticStyles = (0, _primitives.xcss)({
+  position: 'absolute',
+  zIndex: 'card'
+});
+
+// TODO: Share prop types between DragHandle - generic enough to create a type for block control decoration
+
+var TypeAheadControl = exports.TypeAheadControl = function TypeAheadControl(_ref) {
+  var view = _ref.view,
+    api = _ref.api,
+    formatMessage = _ref.formatMessage,
+    getPos = _ref.getPos,
+    nodeType = _ref.nodeType,
+    anchorName = _ref.anchorName,
+    rootAnchorName = _ref.rootAnchorName,
+    rootNodeType = _ref.rootNodeType;
+  var macroInteractionUpdates = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'featureFlags.macroInteractionUpdates');
+  var _useState = (0, _react.useState)({}),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    positionStyles = _useState2[0],
+    setPositionStyles = _useState2[1];
+
+  // Adapted from `src/ui/drag-handle.tsx` as positioning logic is similar
+  // CHANGES - added an offset so quick insert button can be positioned beside drag handle
+  // CHANGES - removed `editorExperiment('nested-dnd', true)` check and rootNodeType calculation
+  // CHANGES - replace anchorName with rootAnchorName
+  // CHANGES - `removed editorExperiment('advanced_layouts', true) && isLayoutColumn` checks as quick insert button will not be positioned for layout column
+  var calculatePosition = (0, _react.useCallback)(function () {
+    var supportsAnchor = CSS.supports('top', "anchor(".concat(rootAnchorName, " start)")) && CSS.supports('left', "anchor(".concat(rootAnchorName, " start)"));
+    var dom = view.dom.querySelector("[data-drag-handler-anchor-name=\"".concat(rootAnchorName, "\"]"));
+    var hasResizer = rootNodeType === 'table' || rootNodeType === 'mediaSingle';
+    var isExtension = rootNodeType === 'extension' || rootNodeType === 'bodiedExtension';
+    var isBlockCard = rootNodeType === 'blockCard';
+    var isEmbedCard = rootNodeType === 'embedCard';
+    var isMacroInteractionUpdates = macroInteractionUpdates && isExtension;
+    var innerContainer = null;
+    if (dom) {
+      if (isEmbedCard) {
+        innerContainer = dom.querySelector('.rich-media-item');
+      } else if (hasResizer) {
+        innerContainer = dom.querySelector('.resizer-item');
+      } else if (isExtension) {
+        innerContainer = dom.querySelector('.extension-container[data-layout]');
+      } else if (isBlockCard) {
+        //specific to datasource blockCard
+        innerContainer = dom.querySelector('.datasourceView-content-inner-wrap');
+      }
+    }
+    var isEdgeCase = (hasResizer || isExtension || isEmbedCard || isBlockCard) && innerContainer;
+    var neighboringWidthOffset = anchorName === rootAnchorName ? '-16px' : '0px';
+    if (supportsAnchor) {
+      return {
+        left: isEdgeCase ? "calc(anchor(".concat(rootAnchorName, " start) + ").concat((0, _widgetPositions.getLeftPositionForRootElement)(dom, rootNodeType, _consts.QUICK_INSERT_DIMENSIONS, innerContainer, isMacroInteractionUpdates), " + ").concat(neighboringWidthOffset, ")") : "calc(anchor(".concat(rootAnchorName, " start) - ").concat(_consts.QUICK_INSERT_DIMENSIONS.width, "px - ").concat((0, _consts.rootElementGap)(rootNodeType), "px + ").concat(neighboringWidthOffset, ")"),
+        top: "calc(anchor(".concat(rootAnchorName, " start) + ").concat((0, _consts.topPositionAdjustment)(rootNodeType), "px)")
+      };
+    }
+    return {
+      left: isEdgeCase ? "calc(".concat((dom === null || dom === void 0 ? void 0 : dom.offsetLeft) || 0, "px + ").concat((0, _widgetPositions.getLeftPositionForRootElement)(dom, rootNodeType, _consts.QUICK_INSERT_DIMENSIONS, innerContainer, isMacroInteractionUpdates), " + ").concat(neighboringWidthOffset, ")") : "calc(".concat((0, _widgetPositions.getLeftPositionForRootElement)(dom, rootNodeType, _consts.QUICK_INSERT_DIMENSIONS, innerContainer, isMacroInteractionUpdates), " + ").concat(neighboringWidthOffset, ")"),
+      top: (0, _dragHandlePositions.getTopPosition)(dom, rootNodeType)
+    };
+  }, [rootAnchorName, view.dom, rootNodeType, macroInteractionUpdates, anchorName]);
+  (0, _react.useEffect)(function () {
+    var cleanUpTransitionListener;
+    if (rootNodeType === 'extension' || rootNodeType === 'embedCard') {
+      var dom = view.dom.querySelector("[data-drag-handler-anchor-name=\"".concat(rootAnchorName, "\"]"));
+      if (!dom) {
+        return;
+      }
+      cleanUpTransitionListener = (0, _bindEventListener.bind)(dom, {
+        type: 'transitionend',
+        listener: function listener() {
+          setPositionStyles(calculatePosition());
+        }
+      });
+    }
+    var calcPos = requestAnimationFrame(function () {
+      setPositionStyles(calculatePosition());
+    });
+    return function () {
+      var _cleanUpTransitionLis;
+      cancelAnimationFrame(calcPos);
+      (_cleanUpTransitionLis = cleanUpTransitionListener) === null || _cleanUpTransitionLis === void 0 || _cleanUpTransitionLis();
+    };
+  }, [calculatePosition, view.dom, rootAnchorName, rootNodeType]);
+  return (
+    /*#__PURE__*/
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
+    _react.default.createElement(_primitives.Box, {
+      style: positionStyles,
+      xcss: [containerStaticStyles]
+    }, /*#__PURE__*/_react.default.createElement(_tooltip.default, {
+      content: /*#__PURE__*/_react.default.createElement(_keymaps.ToolTipContent, {
+        description: formatMessage(_messages.blockControlsMessages.insert),
+        shortcutOverride: "/"
+      })
+    }, /*#__PURE__*/_react.default.createElement(_primitives.Pressable, {
+      type: "button",
+      "aria-label": formatMessage(_messages.blockControlsMessages.insert),
+      xcss: [buttonStyles],
+      onClick: function onClick() {
+        var _api$core, _api$quickInsert;
+        api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(function (_ref2) {
+          var tr = _ref2.tr;
+          var start = getPos();
+          if (!start) {
+            return null;
+          }
+          return tr.setSelection(_state.TextSelection.create(tr.doc, start));
+        });
+        api === null || api === void 0 || (_api$quickInsert = api.quickInsert) === null || _api$quickInsert === void 0 || _api$quickInsert.actions.openTypeAhead('blockControl');
+      }
+    }, /*#__PURE__*/_react.default.createElement(_add.default, {
+      label: "add",
+      size: "medium"
+    }))))
+  );
+};

package/dist/es2019/blockControlsPlugin.js

@@ -25,7 +25,7 @@ export const blockControlsPlugin = ({
   commands: {
     moveNode: moveNode(api),
     moveToLayout: moveToLayout(api),
-    showDragHandleAt: (pos, anchorName, nodeType, handleOptions) => ({
+    showDragHandleAt: (pos, anchorName, nodeType, handleOptions, rootPos, rootAnchorName, rootNodeType) => ({
       tr
     }) => {
       const currMeta = tr.getMeta(key);
@@ -35,7 +35,10 @@ export const blockControlsPlugin = ({
           pos,
           anchorName,
           nodeType,
-          handleOptions
+          handleOptions,
+          rootPos,
+          rootAnchorName,
+          rootNodeType
         },
         closeMenu: editorExperiment('platform_editor_controls', 'variant1') ? true : undefined
       });
@@ -54,7 +57,9 @@ export const blockControlsPlugin = ({
       }
       tr.setMeta(key, {
         ...currMeta,
-        toggleMenu: true
+        toggleMenu: {
+          anchorName: options === null || options === void 0 ? void 0 : options.anchorName
+        }
       });
       return tr;
     },
@@ -128,17 +133,18 @@ export const blockControlsPlugin = ({
     }
   },
   getSharedState(editorState) {
-    var _key$getState$isMenuO, _key$getState, _key$getState$activeN, _key$getState2, _key$getState$isDragg, _key$getState3, _key$getState$isPMDra, _key$getState4, _key$getState$multiSe, _key$getState5, _key$getState$isShift, _key$getState6;
+    var _key$getState$isMenuO, _key$getState, _key$getState$menuTri, _key$getState2, _key$getState$activeN, _key$getState3, _key$getState$isDragg, _key$getState4, _key$getState$isPMDra, _key$getState5, _key$getState$multiSe, _key$getState6, _key$getState$isShift, _key$getState7;
     if (!editorState) {
       return undefined;
     }
     return {
       isMenuOpen: (_key$getState$isMenuO = (_key$getState = key.getState(editorState)) === null || _key$getState === void 0 ? void 0 : _key$getState.isMenuOpen) !== null && _key$getState$isMenuO !== void 0 ? _key$getState$isMenuO : false,
-      activeNode: (_key$getState$activeN = (_key$getState2 = key.getState(editorState)) === null || _key$getState2 === void 0 ? void 0 : _key$getState2.activeNode) !== null && _key$getState$activeN !== void 0 ? _key$getState$activeN : undefined,
-      isDragging: (_key$getState$isDragg = (_key$getState3 = key.getState(editorState)) === null || _key$getState3 === void 0 ? void 0 : _key$getState3.isDragging) !== null && _key$getState$isDragg !== void 0 ? _key$getState$isDragg : false,
-      isPMDragging: (_key$getState$isPMDra = (_key$getState4 = key.getState(editorState)) === null || _key$getState4 === void 0 ? void 0 : _key$getState4.isPMDragging) !== null && _key$getState$isPMDra !== void 0 ? _key$getState$isPMDra : false,
-      multiSelectDnD: (_key$getState$multiSe = (_key$getState5 = key.getState(editorState)) === null || _key$getState5 === void 0 ? void 0 : _key$getState5.multiSelectDnD) !== null && _key$getState$multiSe !== void 0 ? _key$getState$multiSe : undefined,
-      isShiftDown: (_key$getState$isShift = (_key$getState6 = key.getState(editorState)) === null || _key$getState6 === void 0 ? void 0 : _key$getState6.isShiftDown) !== null && _key$getState$isShift !== void 0 ? _key$getState$isShift : undefined
+      menuTriggerBy: (_key$getState$menuTri = (_key$getState2 = key.getState(editorState)) === null || _key$getState2 === void 0 ? void 0 : _key$getState2.menuTriggerBy) !== null && _key$getState$menuTri !== void 0 ? _key$getState$menuTri : undefined,
+      activeNode: (_key$getState$activeN = (_key$getState3 = key.getState(editorState)) === null || _key$getState3 === void 0 ? void 0 : _key$getState3.activeNode) !== null && _key$getState$activeN !== void 0 ? _key$getState$activeN : undefined,
+      isDragging: (_key$getState$isDragg = (_key$getState4 = key.getState(editorState)) === null || _key$getState4 === void 0 ? void 0 : _key$getState4.isDragging) !== null && _key$getState$isDragg !== void 0 ? _key$getState$isDragg : false,
+      isPMDragging: (_key$getState$isPMDra = (_key$getState5 = key.getState(editorState)) === null || _key$getState5 === void 0 ? void 0 : _key$getState5.isPMDragging) !== null && _key$getState$isPMDra !== void 0 ? _key$getState$isPMDra : false,
+      multiSelectDnD: (_key$getState$multiSe = (_key$getState6 = key.getState(editorState)) === null || _key$getState6 === void 0 ? void 0 : _key$getState6.multiSelectDnD) !== null && _key$getState$multiSe !== void 0 ? _key$getState$multiSe : undefined,
+      isShiftDown: (_key$getState$isShift = (_key$getState7 = key.getState(editorState)) === null || _key$getState7 === void 0 ? void 0 : _key$getState7.isShiftDown) !== null && _key$getState$isShift !== void 0 ? _key$getState$isShift : undefined
     };
   },
   contentComponent({