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

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

@@ -0,0 +1,29 @@
+import { createElement } from 'react';
+import uuid from 'uuid';
+import { Decoration } from '@atlaskit/editor-prosemirror/view';
+import { TypeAheadControl } from '../ui/quick-insert-button';
+const TYPE_QUICK_INSERT = 'INSERT_BUTTON';
+export const findQuickInsertInsertButtonDecoration = (decorations, from, to) => {
+  return decorations.find(from, to, spec => spec.type === TYPE_QUICK_INSERT);
+};
+export const quickInsertButtonDecoration = (api, formatMessage, rootPos, anchorName, nodeType, nodeViewPortalProviderAPI, rootAnchorName, rootNodeType) => {
+  const key = uuid();
+  return Decoration.widget(rootPos, (view, getPos) => {
+    const element = document.createElement('span');
+    element.contentEditable = 'false';
+    nodeViewPortalProviderAPI.render(() => /*#__PURE__*/createElement(TypeAheadControl, {
+      api,
+      getPos,
+      formatMessage,
+      view,
+      nodeType,
+      anchorName,
+      rootAnchorName,
+      rootNodeType: rootNodeType !== null && rootNodeType !== void 0 ? rootNodeType : nodeType
+    }), element, key);
+    return element;
+  }, {
+    side: -1,
+    type: TYPE_QUICK_INSERT
+  });
+};

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

@@ -87,16 +87,35 @@ export const handleMouseOver = (view, event, api) => {
       // Don't show drag handle for layout column in a single column layout
       return false;
     }
-    let rootPos;
+    let targetPos;
     if (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;
+    }
+    let rootAnchorName;
+    let rootNodeType;
+    let rootPos;
+    if (editorExperiment('platform_editor_controls', 'variant1')) {
+      rootPos = view.state.doc.resolve(pos).before(1);
+      if (targetPos !== rootPos) {
+        const 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;
+        }
+      }
     }
     const nodeType = rootElement.getAttribute('data-drag-handler-node-type');
     if (nodeType) {
-      var _api$core, _api$blockControls2;
-      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.commands.showDragHandleAt(rootPos, anchorName, nodeType));
+      if (editorExperiment('platform_editor_controls', 'variant1')) {
+        var _api$core, _api$blockControls2, _rootPos, _rootAnchorName, _rootNodeType;
+        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.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 ? void 0 : (_api$core2 = api.core) === null || _api$core2 === void 0 ? void 0 : _api$core2.actions.execute(api === null || api === void 0 ? void 0 : (_api$blockControls3 = api.blockControls) === null || _api$blockControls3 === void 0 ? void 0 : _api$blockControls3.commands.showDragHandleAt(targetPos, anchorName, nodeType));
+      }
     }
   }
 };

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

@@ -17,6 +17,7 @@ import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { findNodeDecs, nodeDecorations } from './decorations-anchor';
 import { dragHandleDecoration, emptyParagraphNodeDecorations, findHandleDec } from './decorations-drag-handle';
 import { dropTargetDecorations, findDropTargetDecs } from './decorations-drop-target';
+import { findQuickInsertInsertButtonDecoration, quickInsertButtonDecoration } from './decorations-quick-insert-button';
 import { handleMouseOver } from './handle-mouse-over';
 import { boundKeydownHandler } from './keymap';
 import { defaultActiveAnchorTracker } from './utils/active-anchor-tracker';
@@ -153,7 +154,7 @@ export const getDecorations = state => {
   return (_key$getState = key.getState(state)) === null || _key$getState === void 0 ? void 0 : _key$getState.decorations;
 };
 export const 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;
   let {
     activeNode,
     decorations,
@@ -166,7 +167,7 @@ export const newApply = (api, formatMessage, tr, currentState, newState, flags,
     editorWidthRight,
     isDragging,
     isMenuOpen,
-    // NOT USED
+    menuTriggerBy,
     isPMDragging,
     isShiftDown
   } = currentState;
@@ -181,7 +182,10 @@ export const newApply = (api, formatMessage, tr, currentState, newState, flags,
       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 +256,25 @@ export const newApply = (api, formatMessage, tr, currentState, newState, flags,
     var _activeNode3, _activeNode4;
     const oldHandle = 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 (editorExperiment('platform_editor_controls', 'variant1')) {
+      var _activeNode5, _activeNode6;
+      const oldQuickInsertButton = 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;
-    const oldHandle = 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;
+    const oldHandle = 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);
     const handleDec = 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 (editorExperiment('platform_editor_controls', 'variant1')) {
+      var _activeNode9, _activeNode10;
+      const oldQuickInsertButton = 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);
+      const quickInsertButton = 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 +301,23 @@ export const newApply = (api, formatMessage, tr, currentState, newState, flags,
     }
   }
   const newActiveNode = isEmptyDoc || !(meta !== null && meta !== void 0 && meta.activeNode) && findHandleDec(decorations, latestActiveNode === null || latestActiveNode === void 0 ? void 0 : latestActiveNode.pos, latestActiveNode === null || latestActiveNode === void 0 ? void 0 : latestActiveNode.pos).length === 0 ? null : latestActiveNode;
-  const isMenuOpenNew = 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;
+  let isMenuOpenNew = isMenuOpen;
+  if (editorExperiment('platform_editor_controls', 'variant1')) {
+    if (meta !== null && meta !== void 0 && meta.closeMenu) {
+      isMenuOpenNew = false;
+    } else if (meta !== null && meta !== void 0 && meta.toggleMenu) {
+      const 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,
     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: editorExperiment('platform_editor_controls', 'variant1') ? (meta === null || meta === void 0 ? 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/es2019/pm-plugins/utils/widget-positions.js

@@ -0,0 +1,20 @@
+import { rootElementGap } from '../../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
+export const getLeftPositionForRootElement = (dom, nodeType, widgetDimensions, innerContainer, macroInteractionUpdates) => {
+  if (!dom) {
+    return 'auto';
+  }
+  if (!innerContainer) {
+    return `${dom.offsetLeft - 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
+  const relativeSpan = macroInteractionUpdates ? dom.querySelector('span.relative') : null;
+  const leftAdjustment = relativeSpan ? relativeSpan.offsetLeft : 0;
+  return getComputedStyle(innerContainer).transform === 'none' ? `${innerContainer.offsetLeft + leftAdjustment - rootElementGap(nodeType) - widgetDimensions.width}px` : `${innerContainer.offsetLeft + leftAdjustment - innerContainer.offsetWidth / 2 - rootElementGap(nodeType) - widgetDimensions.width}px`;
+};

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

@@ -6,7 +6,6 @@ import { ArrowKeyNavigationType, DropdownMenu } from '@atlaskit/editor-common/ui
 import { akEditorFloatingOverlapPanelZIndex } from '@atlaskit/editor-shared-styles';
 import { getBlockMenuItems, menuItemsCallback } from './block-menu-items';
 import { BLOCK_MENU_WIDTH } from './consts';
-const dragHandleSelector = '[data-blocks-drag-handle-container="true"] button';
 const BlockMenu = ({
   editorView,
   mountPoint,
@@ -23,7 +22,8 @@ const BlockMenu = ({
   if (!(blockControlsState !== null && blockControlsState !== void 0 && blockControlsState.isMenuOpen)) {
     return null;
   }
-  const targetHandleRef = document.querySelector(dragHandleSelector);
+  const activeNodeSelector = `[data-drag-handler-anchor-name=${blockControlsState === null || blockControlsState === void 0 ? void 0 : blockControlsState.menuTriggerBy}]`;
+  const targetHandleRef = document.querySelector(activeNodeSelector);
   const items = getBlockMenuItems(formatMessage);
   const handleOpenChange = payload => {
     if (!(payload !== null && payload !== void 0 && payload.isOpen)) {
@@ -38,10 +38,13 @@ const BlockMenu = ({
     if (editorView) {
       var _menuItemsCallback, _menuItemsCallback$ca;
       (_menuItemsCallback = menuItemsCallback[item.value.name]) === null || _menuItemsCallback === void 0 ? void 0 : (_menuItemsCallback$ca = _menuItemsCallback.call(menuItemsCallback, api, formatMessage)) === null || _menuItemsCallback$ca === void 0 ? void 0 : _menuItemsCallback$ca(editorView.state, editorView.dispatch, editorView);
+      api === null || api === void 0 ? void 0 : api.core.actions.execute(api === null || api === void 0 ? void 0 : api.blockControls.commands.toggleBlockMenu({
+        closeMenu: true
+      }));
     }
   };
   return /*#__PURE__*/React.createElement(Popup, {
-    alignX: 'right',
+    alignX: 'left',
     alignY: 'start'
     // Ignored via go/ees005
     // eslint-disable-next-line @atlaskit/editor/no-as-casting
@@ -51,7 +54,7 @@ const BlockMenu = ({
     zIndex: akEditorFloatingOverlapPanelZIndex,
     forcePlacement: true,
     stick: true,
-    offset: [-18, 8]
+    offset: [-6, 8]
   }, /*#__PURE__*/React.createElement(DropdownMenu, {
     mountTo: mountPoint,
     boundariesElement: boundariesElement,

package/dist/es2019/ui/consts.js

@@ -26,6 +26,12 @@ export const DRAG_HANDLE_PARAGRAPH_TOP_ADJUSTMENT = 2;
  *  so we allow for some leniency to capture them all. e.g. Table is depth 3.
  */
 export const DRAG_HANDLE_MAX_SHIFT_CLICK_DEPTH = 3;
+export const QUICK_INSERT_HEIGHT = 24;
+export const QUICK_INSERT_WIDTH = 24;
+export const QUICK_INSERT_DIMENSIONS = {
+  width: QUICK_INSERT_WIDTH,
+  height: QUICK_INSERT_HEIGHT
+};
 const nodeTypeExcludeList = ['embedCard', 'mediaSingle', 'table'];
 export const dragHandleGap = (nodeType, parentNodeType) => {
   if (nodeType === 'layoutSection' && fg('platform_editor_advanced_layouts_post_fix_patch_2')) {
@@ -42,6 +48,17 @@ export const dragHandleGap = (nodeType, parentNodeType) => {
   }
   return DRAG_HANDLE_DEFAULT_GAP;
 };
+
+// use for returning hap only for root level elements
+export const 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;
+};
 export const getNestedNodeLeftPaddingMargin = nodeType => {
   switch (nodeType) {
     case 'bodiedExtension':

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

@@ -173,9 +173,12 @@ export const DragHandle = ({
         tr = selectNode(tr, startPos, nodeType);
         if (editorExperiment('platform_editor_controls', 'variant1')) {
           var _api$blockControls;
-          api === null || api === void 0 ? void 0 : (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.commands.toggleBlockMenu()({
+          api === null || api === void 0 ? void 0 : (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.commands.toggleBlockMenu({
+            anchorName
+          })({
             tr
           });
+          e.stopPropagation();
         }
       } else if (isTopLevelNode && $anchor.depth <= DRAG_HANDLE_MAX_SHIFT_CLICK_DEPTH && e.shiftKey) {
         var _api$blockControls2;
@@ -202,7 +205,7 @@ export const DragHandle = ({
       return tr;
     });
     view.focus();
-  }, [isMultiSelect, api === null || api === void 0 ? void 0 : (_api$core2 = api.core) === null || _api$core2 === void 0 ? void 0 : _api$core2.actions, api === null || api === void 0 ? void 0 : (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions, api === null || api === void 0 ? 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 ? void 0 : (_api$core2 = api.core) === null || _api$core2 === void 0 ? void 0 : _api$core2.actions, api === null || api === void 0 ? void 0 : (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions, api === null || api === void 0 ? 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,

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

@@ -0,0 +1,152 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import { bind } from 'bind-event-listener';
+import { ToolTipContent } from '@atlaskit/editor-common/keymaps';
+import { blockControlsMessages as messages } from '@atlaskit/editor-common/messages';
+import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
+import { TextSelection } from '@atlaskit/editor-prosemirror/state';
+import EditorAddIcon from '@atlaskit/icon/glyph/editor/add';
+import { Box, Pressable, xcss } from '@atlaskit/primitives';
+import Tooltip from '@atlaskit/tooltip';
+import { getTopPosition } from '../pm-plugins/utils/drag-handle-positions';
+import { getLeftPositionForRootElement } from '../pm-plugins/utils/widget-positions';
+import { QUICK_INSERT_DIMENSIONS, rootElementGap, topPositionAdjustment } from './consts';
+const buttonStyles = 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 ${"var(--ds-border-focused, #388BFF)"}`
+  }
+});
+const containerStaticStyles = xcss({
+  position: 'absolute',
+  zIndex: 'card'
+});
+
+// TODO: Share prop types between DragHandle - generic enough to create a type for block control decoration
+
+export const TypeAheadControl = ({
+  view,
+  api,
+  formatMessage,
+  getPos,
+  nodeType,
+  anchorName,
+  rootAnchorName,
+  rootNodeType
+}) => {
+  const macroInteractionUpdates = useSharedPluginStateSelector(api, 'featureFlags.macroInteractionUpdates');
+  const [positionStyles, setPositionStyles] = useState({});
+
+  // 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
+  const calculatePosition = useCallback(() => {
+    const supportsAnchor = CSS.supports('top', `anchor(${rootAnchorName} start)`) && CSS.supports('left', `anchor(${rootAnchorName} start)`);
+    const dom = view.dom.querySelector(`[data-drag-handler-anchor-name="${rootAnchorName}"]`);
+    const hasResizer = rootNodeType === 'table' || rootNodeType === 'mediaSingle';
+    const isExtension = rootNodeType === 'extension' || rootNodeType === 'bodiedExtension';
+    const isBlockCard = rootNodeType === 'blockCard';
+    const isEmbedCard = rootNodeType === 'embedCard';
+    const isMacroInteractionUpdates = macroInteractionUpdates && isExtension;
+    let 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');
+      }
+    }
+    const isEdgeCase = (hasResizer || isExtension || isEmbedCard || isBlockCard) && innerContainer;
+    const neighboringWidthOffset = anchorName === rootAnchorName ? '-16px' : '0px';
+    if (supportsAnchor) {
+      return {
+        left: isEdgeCase ? `calc(anchor(${rootAnchorName} start) + ${getLeftPositionForRootElement(dom, rootNodeType, QUICK_INSERT_DIMENSIONS, innerContainer, isMacroInteractionUpdates)} + ${neighboringWidthOffset})` : `calc(anchor(${rootAnchorName} start) - ${QUICK_INSERT_DIMENSIONS.width}px - ${rootElementGap(rootNodeType)}px + ${neighboringWidthOffset})`,
+        top: `calc(anchor(${rootAnchorName} start) + ${topPositionAdjustment(rootNodeType)}px)`
+      };
+    }
+    return {
+      left: isEdgeCase ? `calc(${(dom === null || dom === void 0 ? void 0 : dom.offsetLeft) || 0}px + ${getLeftPositionForRootElement(dom, rootNodeType, QUICK_INSERT_DIMENSIONS, innerContainer, isMacroInteractionUpdates)} + ${neighboringWidthOffset})` : `calc(${getLeftPositionForRootElement(dom, rootNodeType, QUICK_INSERT_DIMENSIONS, innerContainer, isMacroInteractionUpdates)} + ${neighboringWidthOffset})`,
+      top: getTopPosition(dom, rootNodeType)
+    };
+  }, [rootAnchorName, view.dom, rootNodeType, macroInteractionUpdates, anchorName]);
+  useEffect(() => {
+    let cleanUpTransitionListener;
+    if (rootNodeType === 'extension' || rootNodeType === 'embedCard') {
+      const dom = view.dom.querySelector(`[data-drag-handler-anchor-name="${rootAnchorName}"]`);
+      if (!dom) {
+        return;
+      }
+      cleanUpTransitionListener = bind(dom, {
+        type: 'transitionend',
+        listener: () => {
+          setPositionStyles(calculatePosition());
+        }
+      });
+    }
+    const calcPos = requestAnimationFrame(() => {
+      setPositionStyles(calculatePosition());
+    });
+    return () => {
+      var _cleanUpTransitionLis;
+      cancelAnimationFrame(calcPos);
+      (_cleanUpTransitionLis = cleanUpTransitionListener) === null || _cleanUpTransitionLis === void 0 ? void 0 : _cleanUpTransitionLis();
+    };
+  }, [calculatePosition, view.dom, rootAnchorName, rootNodeType]);
+  return (
+    /*#__PURE__*/
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
+    React.createElement(Box, {
+      style: positionStyles,
+      xcss: [containerStaticStyles]
+    }, /*#__PURE__*/React.createElement(Tooltip, {
+      content: /*#__PURE__*/React.createElement(ToolTipContent, {
+        description: formatMessage(messages.insert),
+        shortcutOverride: "/"
+      })
+    }, /*#__PURE__*/React.createElement(Pressable, {
+      type: "button",
+      "aria-label": formatMessage(messages.insert),
+      xcss: [buttonStyles],
+      onClick: () => {
+        var _api$core, _api$quickInsert;
+        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 = getPos();
+          if (!start) {
+            return null;
+          }
+          return tr.setSelection(TextSelection.create(tr.doc, start));
+        });
+        api === null || api === void 0 ? void 0 : (_api$quickInsert = api.quickInsert) === null || _api$quickInsert === void 0 ? void 0 : _api$quickInsert.actions.openTypeAhead('blockControl');
+      }
+    }, /*#__PURE__*/React.createElement(EditorAddIcon, {
+      label: "add",
+      size: "medium"
+    }))))
+  );
+};

package/dist/esm/blockControlsPlugin.js

@@ -29,7 +29,7 @@ export var blockControlsPlugin = function blockControlsPlugin(_ref) {
     commands: {
       moveNode: moveNode(api),
       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(key);
@@ -38,7 +38,10 @@ export var blockControlsPlugin = function blockControlsPlugin(_ref) {
               pos: pos,
               anchorName: anchorName,
               nodeType: nodeType,
-              handleOptions: handleOptions
+              handleOptions: handleOptions,
+              rootPos: rootPos,
+              rootAnchorName: rootAnchorName,
+              rootNodeType: rootNodeType
             },
             closeMenu: editorExperiment('platform_editor_controls', 'variant1') ? true : undefined
           }));
@@ -56,7 +59,9 @@ export var blockControlsPlugin = function blockControlsPlugin(_ref) {
             return tr;
           }
           tr.setMeta(key, _objectSpread(_objectSpread({}, currMeta), {}, {
-            toggleMenu: true
+            toggleMenu: {
+              anchorName: options === null || options === void 0 ? void 0 : options.anchorName
+            }
           }));
           return tr;
         };
@@ -130,17 +135,18 @@ export var blockControlsPlugin = function blockControlsPlugin(_ref) {
       }
     },
     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 = 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: function contentComponent(_ref7) {

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

@@ -0,0 +1,33 @@
+import { createElement } from 'react';
+import uuid from 'uuid';
+import { Decoration } from '@atlaskit/editor-prosemirror/view';
+import { TypeAheadControl } from '../ui/quick-insert-button';
+var TYPE_QUICK_INSERT = 'INSERT_BUTTON';
+export var findQuickInsertInsertButtonDecoration = function findQuickInsertInsertButtonDecoration(decorations, from, to) {
+  return decorations.find(from, to, function (spec) {
+    return spec.type === TYPE_QUICK_INSERT;
+  });
+};
+export var quickInsertButtonDecoration = function quickInsertButtonDecoration(api, formatMessage, rootPos, anchorName, nodeType, nodeViewPortalProviderAPI, rootAnchorName, rootNodeType) {
+  var key = uuid();
+  return Decoration.widget(rootPos, function (view, getPos) {
+    var element = document.createElement('span');
+    element.contentEditable = 'false';
+    nodeViewPortalProviderAPI.render(function () {
+      return /*#__PURE__*/createElement(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/esm/pm-plugins/handle-mouse-over.js

@@ -86,16 +86,35 @@ export var handleMouseOver = function handleMouseOver(view, event, api) {
       // Don't show drag handle for layout column in a single column layout
       return false;
     }
-    var rootPos;
+    var targetPos;
     if (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 (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 (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));
+      }
     }
   }
 };