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

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

@@ -21,6 +21,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';
@@ -150,7 +151,7 @@ export var getDecorations = function getDecorations(state) {
   return (_key$getState = key.getState(state)) === null || _key$getState === void 0 ? void 0 : _key$getState.decorations;
 };
 export var 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,
@@ -160,6 +161,7 @@ export var newApply = function newApply(api, formatMessage, tr, currentState, ne
     editorWidthRight = currentState.editorWidthRight,
     isDragging = currentState.isDragging,
     isMenuOpen = currentState.isMenuOpen,
+    menuTriggerBy = currentState.menuTriggerBy,
     isPMDragging = currentState.isPMDragging,
     isShiftDown = currentState.isShiftDown;
   var isActiveNodeDeleted = false;
@@ -173,7 +175,10 @@ export var newApply = function newApply(api, formatMessage, tr, currentState, ne
       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) {
@@ -245,12 +250,25 @@ export var newApply = function newApply(api, formatMessage, tr, currentState, ne
     var _activeNode3, _activeNode4;
     var 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;
+      var 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;
-    var _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;
+    var _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);
     var 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;
+      var _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);
+      var 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
@@ -277,12 +295,23 @@ export var newApply = function newApply(api, formatMessage, tr, currentState, ne
     }
   }
   var 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;
-  var 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;
+  var 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) {
+      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: 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/esm/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 var getLeftPositionForRootElement = function getLeftPositionForRootElement(dom, nodeType, widgetDimensions, innerContainer, macroInteractionUpdates) {
+  if (!dom) {
+    return 'auto';
+  }
+  if (!innerContainer) {
+    return "".concat(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
+  var relativeSpan = macroInteractionUpdates ? dom.querySelector('span.relative') : null;
+  var leftAdjustment = relativeSpan ? relativeSpan.offsetLeft : 0;
+  return getComputedStyle(innerContainer).transform === 'none' ? "".concat(innerContainer.offsetLeft + leftAdjustment - rootElementGap(nodeType) - widgetDimensions.width, "px") : "".concat(innerContainer.offsetLeft + leftAdjustment - innerContainer.offsetWidth / 2 - rootElementGap(nodeType) - widgetDimensions.width, "px");
+};

package/dist/esm/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';
-var dragHandleSelector = '[data-blocks-drag-handle-container="true"] button';
 var BlockMenu = function BlockMenu(_ref) {
   var editorView = _ref.editorView,
     mountPoint = _ref.mountPoint,
@@ -19,7 +18,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 = getBlockMenuItems(formatMessage);
   var handleOpenChange = function handleOpenChange(payload) {
     if (!(payload !== null && payload !== void 0 && payload.isOpen)) {
@@ -33,10 +33,13 @@ var BlockMenu = function BlockMenu(_ref) {
     if (editorView) {
       var _menuItemsCallback, _menuItemsCallback$ca;
       (_menuItemsCallback = menuItemsCallback[item.value.name]) === null || _menuItemsCallback === void 0 || (_menuItemsCallback$ca = _menuItemsCallback.call(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.createElement(Popup, {
-    alignX: 'right',
+    alignX: 'left',
     alignY: 'start'
     // Ignored via go/ees005
     // eslint-disable-next-line @atlaskit/editor/no-as-casting
@@ -46,7 +49,7 @@ var BlockMenu = function BlockMenu(_ref) {
     zIndex: akEditorFloatingOverlapPanelZIndex,
     forcePlacement: true,
     stick: true,
-    offset: [-18, 8]
+    offset: [-6, 8]
   }, /*#__PURE__*/React.createElement(DropdownMenu, {
     mountTo: mountPoint,
     boundariesElement: boundariesElement,

package/dist/esm/ui/consts.js

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

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

@@ -187,9 +187,12 @@ export var DragHandle = function DragHandle(_ref) {
         tr = selectNode(tr, startPos, nodeType);
         if (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 <= DRAG_HANDLE_MAX_SHIFT_CLICK_DEPTH && e.shiftKey) {
         var _api$blockControls2;
@@ -216,7 +219,7 @@ export var 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,

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

@@ -0,0 +1,154 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+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';
+var 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 ".concat("var(--ds-border-focused, #388BFF)")
+  }
+});
+var containerStaticStyles = xcss({
+  position: 'absolute',
+  zIndex: 'card'
+});
+
+// TODO: Share prop types between DragHandle - generic enough to create a type for block control decoration
+
+export var 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 = useSharedPluginStateSelector(api, 'featureFlags.macroInteractionUpdates');
+  var _useState = useState({}),
+    _useState2 = _slicedToArray(_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 = 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(getLeftPositionForRootElement(dom, rootNodeType, QUICK_INSERT_DIMENSIONS, innerContainer, isMacroInteractionUpdates), " + ").concat(neighboringWidthOffset, ")") : "calc(anchor(".concat(rootAnchorName, " start) - ").concat(QUICK_INSERT_DIMENSIONS.width, "px - ").concat(rootElementGap(rootNodeType), "px + ").concat(neighboringWidthOffset, ")"),
+        top: "calc(anchor(".concat(rootAnchorName, " start) + ").concat(topPositionAdjustment(rootNodeType), "px)")
+      };
+    }
+    return {
+      left: isEdgeCase ? "calc(".concat((dom === null || dom === void 0 ? void 0 : dom.offsetLeft) || 0, "px + ").concat(getLeftPositionForRootElement(dom, rootNodeType, QUICK_INSERT_DIMENSIONS, innerContainer, isMacroInteractionUpdates), " + ").concat(neighboringWidthOffset, ")") : "calc(".concat(getLeftPositionForRootElement(dom, rootNodeType, QUICK_INSERT_DIMENSIONS, innerContainer, isMacroInteractionUpdates), " + ").concat(neighboringWidthOffset, ")"),
+      top: getTopPosition(dom, rootNodeType)
+    };
+  }, [rootAnchorName, view.dom, rootNodeType, macroInteractionUpdates, anchorName]);
+  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 = 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.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: 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(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.createElement(EditorAddIcon, {
+      label: "add",
+      size: "medium"
+    }))))
+  );
+};

package/dist/types/blockControlsPluginType.d.ts

@@ -14,6 +14,9 @@ export type ActiveNode = {
     anchorName: string;
     nodeType: string;
     handleOptions?: HandleOptions;
+    rootPos?: number;
+    rootAnchorName?: string;
+    rootNodeType?: string;
 };
 export type MultiSelectDnD = {
     anchor: number;
@@ -27,6 +30,7 @@ export interface PluginState {
     decorations: DecorationSet;
     isDragging: boolean;
     isMenuOpen?: boolean;
+    menuTriggerBy?: string;
     editorHeight: number;
     editorWidthLeft: number;
     editorWidthRight: number;
@@ -47,6 +51,7 @@ export interface PluginState {
 export type ReleaseHiddenDecoration = () => boolean | undefined;
 export type BlockControlsSharedState = {
     isMenuOpen: boolean;
+    menuTriggerBy?: string;
     activeNode?: ActiveNode;
     isDragging: boolean;
     isPMDragging: boolean;
@@ -87,9 +92,10 @@ export type BlockControlsPlugin = NextEditorPlugin<'blockControls', {
             moveNodeAtCursorPos?: boolean;
         }) => EditorCommand;
         moveNode: MoveNode;
-        showDragHandleAt: (pos: number, anchorName: string, nodeType: string, handleOptions?: HandleOptions) => EditorCommand;
+        showDragHandleAt: (pos: number, anchorName: string, nodeType: string, handleOptions?: HandleOptions, rootPos?: number, rootAnchorName?: string, rootNodeType?: string) => EditorCommand;
         toggleBlockMenu: (options?: {
             closeMenu?: boolean;
+            anchorName?: string;
         }) => EditorCommand;
         setNodeDragged: (getPos: () => number | undefined, anchorName: string, nodeType: string) => EditorCommand;
         setMultiSelectPositions: (anchor?: number, head?: number) => EditorCommand;

package/dist/types/pm-plugins/decorations-quick-insert-button.d.ts

@@ -0,0 +1,7 @@
+import { type IntlShape } from 'react-intl-next';
+import type { PortalProviderAPI } from '@atlaskit/editor-common/portal';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import { Decoration, type DecorationSet } from '@atlaskit/editor-prosemirror/view';
+import type { BlockControlsPlugin } from '../blockControlsPluginType';
+export declare const findQuickInsertInsertButtonDecoration: (decorations: DecorationSet, from?: number, to?: number) => Decoration[];
+export declare const quickInsertButtonDecoration: (api: ExtractInjectionAPI<BlockControlsPlugin>, formatMessage: IntlShape['formatMessage'], rootPos: number, anchorName: string, nodeType: string, nodeViewPortalProviderAPI: PortalProviderAPI, rootAnchorName?: string, rootNodeType?: string) => Decoration;

package/dist/types/pm-plugins/main.d.ts

@@ -18,6 +18,7 @@ export declare const newApply: (api: ExtractInjectionAPI<BlockControlsPlugin> |
     activeNode: any;
     isDragging: any;
     isMenuOpen: boolean | undefined;
+    menuTriggerBy: any;
     editorHeight: any;
     editorWidthLeft: any;
     editorWidthRight: any;

package/dist/types/pm-plugins/utils/widget-positions.d.ts

@@ -0,0 +1,4 @@
+export declare const getLeftPositionForRootElement: (dom: HTMLElement | null, nodeType: string, widgetDimensions: {
+    width: number;
+    height: number;
+}, innerContainer?: HTMLElement | null, macroInteractionUpdates?: boolean) => string;

package/dist/types/ui/consts.d.ts

@@ -22,7 +22,14 @@ export declare const DRAG_HANDLE_PARAGRAPH_TOP_ADJUSTMENT = 2;
  *  so we allow for some leniency to capture them all. e.g. Table is depth 3.
  */
 export declare const DRAG_HANDLE_MAX_SHIFT_CLICK_DEPTH = 3;
+export declare const QUICK_INSERT_HEIGHT = 24;
+export declare const QUICK_INSERT_WIDTH = 24;
+export declare const QUICK_INSERT_DIMENSIONS: {
+    width: number;
+    height: number;
+};
 export declare const dragHandleGap: (nodeType: string, parentNodeType?: string) => number;
+export declare const rootElementGap: (nodeType: string) => number;
 export declare const getNestedNodeLeftPaddingMargin: (nodeType?: string) => "8px" | "16px" | "20px" | "24px" | "28px" | "40px";
 export declare const topPositionAdjustment: (nodeType: string) => number;
 export declare const dropTargetMarginMap: {

package/dist/types/ui/quick-insert-button.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { type IntlShape } from 'react-intl-next';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { BlockControlsPlugin } from '../blockControlsPluginType';
+type Props = {
+    view: EditorView;
+    api: ExtractInjectionAPI<BlockControlsPlugin>;
+    formatMessage: IntlShape['formatMessage'];
+    getPos: () => number | undefined;
+    nodeType: string;
+    anchorName: string;
+    rootAnchorName?: string;
+    rootNodeType: string;
+};
+export declare const TypeAheadControl: ({ view, api, formatMessage, getPos, nodeType, anchorName, rootAnchorName, rootNodeType, }: Props) => React.JSX.Element;
+export {};

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

@@ -14,6 +14,9 @@ export type ActiveNode = {
     anchorName: string;
     nodeType: string;
     handleOptions?: HandleOptions;
+    rootPos?: number;
+    rootAnchorName?: string;
+    rootNodeType?: string;
 };
 export type MultiSelectDnD = {
     anchor: number;
@@ -27,6 +30,7 @@ export interface PluginState {
     decorations: DecorationSet;
     isDragging: boolean;
     isMenuOpen?: boolean;
+    menuTriggerBy?: string;
     editorHeight: number;
     editorWidthLeft: number;
     editorWidthRight: number;
@@ -47,6 +51,7 @@ export interface PluginState {
 export type ReleaseHiddenDecoration = () => boolean | undefined;
 export type BlockControlsSharedState = {
     isMenuOpen: boolean;
+    menuTriggerBy?: string;
     activeNode?: ActiveNode;
     isDragging: boolean;
     isPMDragging: boolean;
@@ -87,9 +92,10 @@ export type BlockControlsPlugin = NextEditorPlugin<'blockControls', {
             moveNodeAtCursorPos?: boolean;
         }) => EditorCommand;
         moveNode: MoveNode;
-        showDragHandleAt: (pos: number, anchorName: string, nodeType: string, handleOptions?: HandleOptions) => EditorCommand;
+        showDragHandleAt: (pos: number, anchorName: string, nodeType: string, handleOptions?: HandleOptions, rootPos?: number, rootAnchorName?: string, rootNodeType?: string) => EditorCommand;
         toggleBlockMenu: (options?: {
             closeMenu?: boolean;
+            anchorName?: string;
         }) => EditorCommand;
         setNodeDragged: (getPos: () => number | undefined, anchorName: string, nodeType: string) => EditorCommand;
         setMultiSelectPositions: (anchor?: number, head?: number) => EditorCommand;

package/dist/types-ts4.5/pm-plugins/decorations-quick-insert-button.d.ts

@@ -0,0 +1,7 @@
+import { type IntlShape } from 'react-intl-next';
+import type { PortalProviderAPI } from '@atlaskit/editor-common/portal';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import { Decoration, type DecorationSet } from '@atlaskit/editor-prosemirror/view';
+import type { BlockControlsPlugin } from '../blockControlsPluginType';
+export declare const findQuickInsertInsertButtonDecoration: (decorations: DecorationSet, from?: number, to?: number) => Decoration[];
+export declare const quickInsertButtonDecoration: (api: ExtractInjectionAPI<BlockControlsPlugin>, formatMessage: IntlShape['formatMessage'], rootPos: number, anchorName: string, nodeType: string, nodeViewPortalProviderAPI: PortalProviderAPI, rootAnchorName?: string, rootNodeType?: string) => Decoration;

package/dist/types-ts4.5/pm-plugins/main.d.ts

@@ -18,6 +18,7 @@ export declare const newApply: (api: ExtractInjectionAPI<BlockControlsPlugin> |
     activeNode: any;
     isDragging: any;
     isMenuOpen: boolean | undefined;
+    menuTriggerBy: any;
     editorHeight: any;
     editorWidthLeft: any;
     editorWidthRight: any;

package/dist/types-ts4.5/pm-plugins/utils/widget-positions.d.ts

@@ -0,0 +1,4 @@
+export declare const getLeftPositionForRootElement: (dom: HTMLElement | null, nodeType: string, widgetDimensions: {
+    width: number;
+    height: number;
+}, innerContainer?: HTMLElement | null, macroInteractionUpdates?: boolean) => string;

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

@@ -22,7 +22,14 @@ export declare const DRAG_HANDLE_PARAGRAPH_TOP_ADJUSTMENT = 2;
  *  so we allow for some leniency to capture them all. e.g. Table is depth 3.
  */
 export declare const DRAG_HANDLE_MAX_SHIFT_CLICK_DEPTH = 3;
+export declare const QUICK_INSERT_HEIGHT = 24;
+export declare const QUICK_INSERT_WIDTH = 24;
+export declare const QUICK_INSERT_DIMENSIONS: {
+    width: number;
+    height: number;
+};
 export declare const dragHandleGap: (nodeType: string, parentNodeType?: string) => number;
+export declare const rootElementGap: (nodeType: string) => number;
 export declare const getNestedNodeLeftPaddingMargin: (nodeType?: string) => "8px" | "16px" | "20px" | "24px" | "28px" | "40px";
 export declare const topPositionAdjustment: (nodeType: string) => number;
 export declare const dropTargetMarginMap: {

package/dist/types-ts4.5/ui/quick-insert-button.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { type IntlShape } from 'react-intl-next';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { BlockControlsPlugin } from '../blockControlsPluginType';
+type Props = {
+    view: EditorView;
+    api: ExtractInjectionAPI<BlockControlsPlugin>;
+    formatMessage: IntlShape['formatMessage'];
+    getPos: () => number | undefined;
+    nodeType: string;
+    anchorName: string;
+    rootAnchorName?: string;
+    rootNodeType: string;
+};
+export declare const TypeAheadControl: ({ view, api, formatMessage, getPos, nodeType, anchorName, rootAnchorName, rootNodeType, }: Props) => React.JSX.Element;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-block-controls",
-	"version": "3.1.2",
+	"version": "3.1.3",
 	"description": "Block controls plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -31,7 +31,7 @@
 	},
 	"dependencies": {
 		"@atlaskit/adf-schema": "^47.2.1",
-		"@atlaskit/editor-common": "^100.1.0",
+		"@atlaskit/editor-common": "^100.2.0",
 		"@atlaskit/editor-plugin-accessibility-utils": "^2.0.0",
 		"@atlaskit/editor-plugin-analytics": "^2.0.0",
 		"@atlaskit/editor-plugin-editor-disabled": "^2.0.0",