@atlaskit/editor-plugin-block-menu 5.1.7 → 5.1.9

package/dist/esm/editor-commands/transform-node-utils/wrapMixedContentStep.js

@@ -0,0 +1,135 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import { Fragment } from '@atlaskit/editor-prosemirror/model';
+import { NODE_CATEGORY_BY_TYPE } from './types';
+import { unwrapStep } from './unwrapStep';
+
+/**
+ * Determines if a node can be flattened (unwrapped and its contents merged).
+ *
+ * According to the text transformations list, flattenable nodes are:
+ * - Bulleted list, Numbered list, Task list
+ * - Text nodes (heading, paragraph)
+ *
+ * Containers (panels, expands, layouts, blockquotes) and atomic nodes (tables, media, macros) break out.
+ */
+var canFlatten = function canFlatten(node) {
+  var category = NODE_CATEGORY_BY_TYPE[node.type.name];
+  // Text and list nodes can be flattened (converted to simpler forms)
+  return category === 'text' || category === 'list';
+};
+
+/**
+ * Flattens a node by extracting its contents using the appropriate unwrap step.
+ * This is only called for text and list nodes that can be converted to simpler forms.
+ * Uses unwrapStep to extract children from list containers.
+ */
+var flattenNode = function flattenNode(node, context) {
+  return unwrapStep([node], context);
+};
+
+/**
+ * Determines if a node can be wrapped in the target container type.
+ * Uses the schema's validContent to check if the target container can hold this node.
+ *
+ * Note: What can be wrapped depends on the target container type - for example:
+ * - Tables and media CAN go inside expand nodes
+ * - Tables CANNOT go inside panels or blockquotes
+ */
+var canWrapInTarget = function canWrapInTarget(node, targetNodeType, targetNodeTypeName) {
+  // Same-type containers should break out as separate containers
+  if (node.type.name === targetNodeTypeName) {
+    return false;
+  }
+
+  // Use the schema to determine if this node can be contained in the target
+  try {
+    return targetNodeType.validContent(Fragment.from(node));
+  } catch (_unused) {
+    return false;
+  }
+};
+
+/**
+ * Converts a nestedExpand to a regular expand node.
+ * NestedExpands can only exist inside expands, so when breaking out they must be converted.
+ */
+var convertNestedExpandToExpand = function convertNestedExpandToExpand(node, schema) {
+  var _node$attrs;
+  var expandType = schema.nodes.expand;
+  if (!expandType) {
+    return null;
+  }
+  return expandType.createAndFill({
+    title: ((_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.title) || ''
+  }, node.content);
+};
+
+/**
+ * A wrap step that handles mixed content according to the Compatibility Matrix:
+ * - Wraps consecutive compatible nodes into the target container
+ * - Same-type containers break out as separate containers (preserved as-is)
+ * - NestedExpands break out as regular expands (converted since nestedExpand can't exist outside expand)
+ * - Container structures that can't be nested in target break out (not flattened)
+ * - Text/list nodes that can't be wrapped are flattened and merged into the container
+ * - Atomic nodes (tables, media, macros) break out
+ *
+ * What can be wrapped depends on the target container's schema:
+ * - expand → panel: tables break out, nestedExpands convert to expands and break out
+ * - expand → blockquote: tables/media break out, nestedExpands convert to expands and break out
+ * - expand → expand: tables/media stay inside (expands can contain them)
+ *
+ * Example: expand(p('a'), table(), p('b')) → panel: [panel(p('a')), table(), panel(p('b'))]
+ * Example: expand(p('a'), panel(p('x')), p('b')) → panel: [panel(p('a')), panel(p('x')), panel(p('b'))]
+ * Example: expand(p('a'), nestedExpand({title: 'inner'})(p('x')), p('b')) → panel: [panel(p('a')), expand({title: 'inner'})(p('x')), panel(p('b'))]
+ */
+export var wrapMixedContentStep = function wrapMixedContentStep(nodes, context) {
+  var schema = context.schema,
+    targetNodeTypeName = context.targetNodeTypeName;
+  var targetNodeType = schema.nodes[targetNodeTypeName];
+  if (!targetNodeType) {
+    return nodes;
+  }
+  var result = [];
+  var currentContainerContent = [];
+  var flushCurrentContainer = function flushCurrentContainer() {
+    if (currentContainerContent.length > 0) {
+      var containerNode = targetNodeType.createAndFill({}, Fragment.fromArray(currentContainerContent));
+      if (containerNode) {
+        result.push(containerNode);
+      }
+      currentContainerContent = [];
+    }
+  };
+  nodes.forEach(function (node) {
+    if (canWrapInTarget(node, targetNodeType, targetNodeTypeName)) {
+      // Node can be wrapped - add to current container content
+      currentContainerContent.push(node);
+    } else if (node.type.name === targetNodeTypeName) {
+      // Same-type container - breaks out as a separate container (preserved as-is)
+      // This handles: "If there's a panel in the expand, it breaks out into a separate panel"
+      flushCurrentContainer();
+      result.push(node);
+    } else if (node.type.name === 'nestedExpand') {
+      // NestedExpand can't be wrapped and can't exist outside an expand
+      // Convert to regular expand and break out
+      flushCurrentContainer();
+      var expandNode = convertNestedExpandToExpand(node, schema);
+      if (expandNode) {
+        result.push(expandNode);
+      }
+    } else if (canFlatten(node)) {
+      var _currentContainerCont;
+      // Node cannot be wrapped but CAN be flattened - flatten and add to container
+      var flattenedNodes = flattenNode(node, context);
+      (_currentContainerCont = currentContainerContent).push.apply(_currentContainerCont, _toConsumableArray(flattenedNodes));
+    } else {
+      // Node cannot be wrapped AND cannot be flattened (containers, tables, media, macros) - break out
+      flushCurrentContainer();
+      result.push(node);
+    }
+  });
+
+  // Flush any remaining content into a container
+  flushCurrentContainer();
+  return result.length > 0 ? result : nodes;
+};

package/dist/esm/ui/block-menu-components.js

@@ -1,6 +1,6 @@
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import React from 'react';
-import { BLOCK_ACTIONS_COPY_LINK_TO_BLOCK_MENU_ITEM, BLOCK_ACTIONS_MENU_SECTION, BLOCK_ACTIONS_MENU_SECTION_RANK, DELETE_MENU_SECTION, DELETE_MENU_SECTION_RANK, DELETE_MENU_ITEM, POSITION_MENU_SECTION, POSITION_MENU_SECTION_RANK, POSITION_MOVE_DOWN_MENU_ITEM, POSITION_MOVE_UP_MENU_ITEM, TRANSFORM_MENU_ITEM, TRANSFORM_MENU_ITEM_RANK, TRANSFORM_MENU_SECTION, TRANSFORM_MENU_SECTION_RANK, TRANSFORM_CREATE_MENU_SECTION, TRANSFORM_SUGGESTED_MENU_SECTION, TRANSFORM_STRUCTURE_MENU_SECTION, TRANSFORM_HEADINGS_MENU_SECTION, MAIN_BLOCK_MENU_SECTION_RANK } from '@atlaskit/editor-common/block-menu';
+import { BLOCK_ACTIONS_COPY_LINK_TO_BLOCK_MENU_ITEM, BLOCK_ACTIONS_MENU_SECTION, BLOCK_ACTIONS_MENU_SECTION_RANK, DELETE_MENU_SECTION, DELETE_MENU_SECTION_RANK, DELETE_MENU_ITEM, POSITION_MENU_SECTION, POSITION_MENU_SECTION_RANK, POSITION_MOVE_DOWN_MENU_ITEM, POSITION_MOVE_UP_MENU_ITEM, TRANSFORM_MENU_ITEM, TRANSFORM_MENU_ITEM_RANK, TRANSFORM_MENU_SECTION, TRANSFORM_MENU_SECTION_RANK, TRANSFORM_CREATE_MENU_SECTION, TRANSFORM_SUGGESTED_MENU_SECTION, TRANSFORM_STRUCTURE_MENU_SECTION, TRANSFORM_HEADINGS_MENU_SECTION, MAIN_BLOCK_MENU_SECTION_RANK, TRANSFORM_SUGGESTED_MENU_SECTION_RANK, TRANSFORM_SUGGESTED_MENU_ITEM } from '@atlaskit/editor-common/block-menu';
 import { ToolbarDropdownItemSection } from '@atlaskit/editor-toolbar';
 import { CopyLinkDropdownItem } from './copy-link';
 import { CopySection } from './copy-section';
@@ -10,6 +10,7 @@ import { FormatMenuComponent } from './format-menu-nested';
 import { FormatMenuSection } from './format-menu-section';
 import { MoveDownDropdownItem } from './move-down';
 import { MoveUpDropdownItem } from './move-up';
+import { SuggestedItemsRenderer } from './suggested-items-renderer';
 var getMoveUpMoveDownMenuComponents = function getMoveUpMoveDownMenuComponents(api) {
   return [{
     type: 'block-menu-item',
@@ -66,13 +67,17 @@ var getTurnIntoMenuComponents = function getTurnIntoMenuComponents(api) {
       rank: TRANSFORM_MENU_ITEM_RANK[TRANSFORM_SUGGESTED_MENU_SECTION.key]
     },
     component: function component() {
-      var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
-          children: null
-        },
-        children = _ref2.children;
-      return /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, {
-        title: "Suggested"
-      }, children);
+      return /*#__PURE__*/React.createElement(SuggestedItemsRenderer, {
+        api: api
+      });
+    }
+  }, {
+    type: 'block-menu-item',
+    key: TRANSFORM_SUGGESTED_MENU_ITEM.key,
+    parent: {
+      type: 'block-menu-section',
+      key: TRANSFORM_SUGGESTED_MENU_SECTION.key,
+      rank: TRANSFORM_SUGGESTED_MENU_SECTION_RANK[TRANSFORM_SUGGESTED_MENU_ITEM.key]
     }
   }, {
     type: 'block-menu-section',
@@ -83,10 +88,10 @@ var getTurnIntoMenuComponents = function getTurnIntoMenuComponents(api) {
       rank: TRANSFORM_MENU_ITEM_RANK[TRANSFORM_CREATE_MENU_SECTION.key]
     },
     component: function component() {
-      var _ref3 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
+      var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
           children: null
         },
-        children = _ref3.children;
+        children = _ref2.children;
       return /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, {
         title: "Create"
       }, children);
@@ -100,10 +105,10 @@ var getTurnIntoMenuComponents = function getTurnIntoMenuComponents(api) {
       rank: TRANSFORM_MENU_ITEM_RANK[TRANSFORM_STRUCTURE_MENU_SECTION.key]
     },
     component: function component() {
-      var _ref4 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
+      var _ref3 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
           children: null
         },
-        children = _ref4.children;
+        children = _ref3.children;
       return /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, {
         title: "Structure"
       }, children);
@@ -117,10 +122,10 @@ var getTurnIntoMenuComponents = function getTurnIntoMenuComponents(api) {
       rank: TRANSFORM_MENU_ITEM_RANK[TRANSFORM_HEADINGS_MENU_SECTION.key]
     },
     component: function component() {
-      var _ref5 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
+      var _ref4 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
           children: null
         },
-        children = _ref5.children;
+        children = _ref4.children;
       return /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, {
         title: "Headings",
         hasSeparator: true
@@ -130,23 +135,23 @@ var getTurnIntoMenuComponents = function getTurnIntoMenuComponents(api) {
     type: 'block-menu-section',
     key: TRANSFORM_MENU_SECTION.key,
     rank: MAIN_BLOCK_MENU_SECTION_RANK[TRANSFORM_MENU_SECTION.key],
-    component: function component(_ref6) {
-      var children = _ref6.children;
+    component: function component(_ref5) {
+      var children = _ref5.children;
       return /*#__PURE__*/React.createElement(FormatMenuSection, {
         api: api
       }, children);
     }
   }];
 };
-export var getBlockMenuComponents = function getBlockMenuComponents(_ref7) {
-  var api = _ref7.api,
-    config = _ref7.config;
+export var getBlockMenuComponents = function getBlockMenuComponents(_ref6) {
+  var api = _ref6.api,
+    config = _ref6.config;
   return [].concat(_toConsumableArray(getTurnIntoMenuComponents(api)), [{
     type: 'block-menu-section',
     key: BLOCK_ACTIONS_MENU_SECTION.key,
     rank: MAIN_BLOCK_MENU_SECTION_RANK[BLOCK_ACTIONS_MENU_SECTION.key],
-    component: function component(_ref8) {
-      var children = _ref8.children;
+    component: function component(_ref7) {
+      var children = _ref7.children;
       return /*#__PURE__*/React.createElement(CopySection, {
         api: api
       }, children);
@@ -169,8 +174,8 @@ export var getBlockMenuComponents = function getBlockMenuComponents(_ref7) {
     type: 'block-menu-section',
     key: POSITION_MENU_SECTION.key,
     rank: MAIN_BLOCK_MENU_SECTION_RANK[POSITION_MENU_SECTION.key],
-    component: function component(_ref9) {
-      var children = _ref9.children;
+    component: function component(_ref8) {
+      var children = _ref8.children;
       return /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, {
         hasSeparator: true
       }, children);
@@ -179,8 +184,8 @@ export var getBlockMenuComponents = function getBlockMenuComponents(_ref7) {
     type: 'block-menu-section',
     key: DELETE_MENU_SECTION.key,
     rank: MAIN_BLOCK_MENU_SECTION_RANK[DELETE_MENU_SECTION.key],
-    component: function component(_ref0) {
-      var children = _ref0.children;
+    component: function component(_ref9) {
+      var children = _ref9.children;
       return /*#__PURE__*/React.createElement(DeleteSection, {
         api: api
       }, children);

package/dist/esm/ui/block-menu-provider.js

@@ -1,6 +1,9 @@
-import React, { useCallback, createContext, useContext } from 'react';
+import React, { useCallback, createContext, useContext, useRef } from 'react';
 var BlockMenuContext = /*#__PURE__*/createContext({
-  onDropdownOpenChanged: function onDropdownOpenChanged() {}
+  onDropdownOpenChanged: function onDropdownOpenChanged() {},
+  moveFocusTo: function moveFocusTo() {},
+  moveDownRef: /*#__PURE__*/React.createRef(),
+  moveUpRef: /*#__PURE__*/React.createRef()
 });
 export var useBlockMenu = function useBlockMenu() {
   var context = useContext(BlockMenuContext);
@@ -12,6 +15,8 @@ export var useBlockMenu = function useBlockMenu() {
 export var BlockMenuProvider = function BlockMenuProvider(_ref) {
   var children = _ref.children,
     api = _ref.api;
+  var moveUpRef = useRef(null);
+  var moveDownRef = useRef(null);
   var onDropdownOpenChanged = useCallback(function (isOpen) {
     if (!isOpen) {
       // On Dropdown closed, return focus to editor
@@ -24,9 +29,21 @@ export var BlockMenuProvider = function BlockMenuProvider(_ref) {
       }, 1);
     }
   }, [api]);
+  var moveFocusTo = useCallback(function (direction) {
+    if (direction === 'moveUp') {
+      var _moveUpRef$current;
+      (_moveUpRef$current = moveUpRef.current) === null || _moveUpRef$current === void 0 || _moveUpRef$current.focus();
+    } else if (direction === 'moveDown') {
+      var _moveDownRef$current;
+      (_moveDownRef$current = moveDownRef.current) === null || _moveDownRef$current === void 0 || _moveDownRef$current.focus();
+    }
+  }, []);
   return /*#__PURE__*/React.createElement(BlockMenuContext.Provider, {
     value: {
-      onDropdownOpenChanged: onDropdownOpenChanged
+      onDropdownOpenChanged: onDropdownOpenChanged,
+      moveFocusTo: moveFocusTo,
+      moveDownRef: moveDownRef,
+      moveUpRef: moveUpRef
     }
   }, children);
 };

package/dist/esm/ui/move-down.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { useIntl, injectIntl } from 'react-intl-next';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
@@ -6,11 +6,15 @@ import { blockMenuMessages as messages } from '@atlaskit/editor-common/messages'
 import { DIRECTION } from '@atlaskit/editor-common/types';
 import { ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
 import ArrowDownIcon from '@atlaskit/icon/core/arrow-down';
+import { useBlockMenu } from './block-menu-provider';
 import { BLOCK_MENU_ITEM_NAME } from './consts';
 var MoveDownDropdownItemContent = function MoveDownDropdownItemContent(_ref) {
   var api = _ref.api;
   var _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;
+  var _useBlockMenu = useBlockMenu(),
+    moveFocusTo = _useBlockMenu.moveFocusTo,
+    moveDownRef = _useBlockMenu.moveDownRef;
   var _useSharedPluginState = useSharedPluginStateWithSelector(api, ['blockControls'], function (_ref2) {
       var _blockControlsState$b;
       var blockControlsState = _ref2.blockControlsState;
@@ -19,9 +23,18 @@ var MoveDownDropdownItemContent = function MoveDownDropdownItemContent(_ref) {
       };
     }),
     canMoveDown = _useSharedPluginState.canMoveDown;
+  useEffect(function () {
+    var moveDownElement = moveDownRef.current;
+    if (!moveDownElement) {
+      return;
+    }
+    if (!canMoveDown && moveDownElement === document.activeElement) {
+      moveFocusTo('moveUp');
+    }
+  }, [canMoveDown, moveFocusTo, moveDownRef]);
   var handleClick = function handleClick() {
     api === null || api === void 0 || api.core.actions.execute(function (_ref3) {
-      var _api$analytics, _api$blockControls, _api$blockControls2;
+      var _api$analytics, _api$blockControls;
       var tr = _ref3.tr;
       var payload = {
         action: ACTION.CLICKED,
@@ -35,15 +48,11 @@ var MoveDownDropdownItemContent = function MoveDownDropdownItemContent(_ref) {
       api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 || (_api$blockControls = _api$blockControls.commands) === null || _api$blockControls === void 0 || _api$blockControls.moveNodeWithBlockMenu(DIRECTION.DOWN)({
         tr: tr
       });
-      api === null || api === void 0 || (_api$blockControls2 = api.blockControls) === null || _api$blockControls2 === void 0 || (_api$blockControls2 = _api$blockControls2.commands) === null || _api$blockControls2 === void 0 || _api$blockControls2.toggleBlockMenu({
-        closeMenu: true
-      })({
-        tr: tr
-      });
       return tr;
     });
   };
   return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
+    triggerRef: moveDownRef,
     onClick: handleClick,
     elemBefore: /*#__PURE__*/React.createElement(ArrowDownIcon, {
       label: ""

package/dist/esm/ui/move-up.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { useIntl, injectIntl } from 'react-intl-next';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
@@ -6,11 +6,15 @@ import { blockMenuMessages as messages } from '@atlaskit/editor-common/messages'
 import { DIRECTION } from '@atlaskit/editor-common/types';
 import { ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
 import ArrowUpIcon from '@atlaskit/icon/core/arrow-up';
+import { useBlockMenu } from './block-menu-provider';
 import { BLOCK_MENU_ITEM_NAME } from './consts';
 var MoveUpDropdownItemContent = function MoveUpDropdownItemContent(_ref) {
   var api = _ref.api;
   var _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;
+  var _useBlockMenu = useBlockMenu(),
+    moveFocusTo = _useBlockMenu.moveFocusTo,
+    moveUpRef = _useBlockMenu.moveUpRef;
   var _useSharedPluginState = useSharedPluginStateWithSelector(api, ['blockControls'], function (_ref2) {
       var _blockControlsState$b;
       var blockControlsState = _ref2.blockControlsState;
@@ -19,9 +23,18 @@ var MoveUpDropdownItemContent = function MoveUpDropdownItemContent(_ref) {
       };
     }),
     canMoveUp = _useSharedPluginState.canMoveUp;
+  useEffect(function () {
+    var moveUpElement = moveUpRef.current;
+    if (!moveUpElement) {
+      return;
+    }
+    if (!canMoveUp && moveUpElement === document.activeElement) {
+      moveFocusTo('moveDown');
+    }
+  }, [canMoveUp, moveFocusTo, moveUpRef]);
   var handleClick = function handleClick() {
     api === null || api === void 0 || api.core.actions.execute(function (_ref3) {
-      var _api$analytics, _api$blockControls, _api$blockControls2;
+      var _api$analytics, _api$blockControls;
       var tr = _ref3.tr;
       var payload = {
         action: ACTION.CLICKED,
@@ -35,15 +48,11 @@ var MoveUpDropdownItemContent = function MoveUpDropdownItemContent(_ref) {
       api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 || (_api$blockControls = _api$blockControls.commands) === null || _api$blockControls === void 0 || _api$blockControls.moveNodeWithBlockMenu(DIRECTION.UP)({
         tr: tr
       });
-      api === null || api === void 0 || (_api$blockControls2 = api.blockControls) === null || _api$blockControls2 === void 0 || (_api$blockControls2 = _api$blockControls2.commands) === null || _api$blockControls2 === void 0 || _api$blockControls2.toggleBlockMenu({
-        closeMenu: true
-      })({
-        tr: tr
-      });
       return tr;
     });
   };
   return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
+    triggerRef: moveUpRef,
     onClick: handleClick,
     elemBefore: /*#__PURE__*/React.createElement(ArrowUpIcon, {
       label: ""

package/dist/esm/ui/suggested-items-renderer.js

@@ -0,0 +1,54 @@
+import React, { useMemo } from 'react';
+import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
+import { ToolbarDropdownItemSection } from '@atlaskit/editor-toolbar';
+import { getSelectedNode } from '../editor-commands/transform-node-utils/utils';
+import { getSortedSuggestedItems } from './utils/suggested-items-rank';
+export var SuggestedItemsRenderer = /*#__PURE__*/React.memo(function (_ref) {
+  var _api$blockMenu;
+  var api = _ref.api;
+  var _useSharedPluginState = useSharedPluginStateWithSelector(api, ['blockControls'], function (states) {
+      var _states$blockControls;
+      return {
+        preservedSelection: (_states$blockControls = states.blockControlsState) === null || _states$blockControls === void 0 ? void 0 : _states$blockControls.preservedSelection
+      };
+    }),
+    preservedSelection = _useSharedPluginState.preservedSelection;
+  var blockMenuComponents = api === null || api === void 0 || (_api$blockMenu = api.blockMenu) === null || _api$blockMenu === void 0 ? void 0 : _api$blockMenu.actions.getBlockMenuComponents();
+  var menuItemsMap = useMemo(function () {
+    if (!blockMenuComponents) {
+      return new Map();
+    }
+    return new Map(blockMenuComponents.filter(function (c) {
+      return c.type === 'block-menu-item';
+    }).map(function (item) {
+      return [item.key, item];
+    }));
+  }, [blockMenuComponents]);
+  var suggestedItems = useMemo(function () {
+    if (!preservedSelection || menuItemsMap.size === 0) {
+      return [];
+    }
+    var selectedNode = getSelectedNode(preservedSelection);
+    if (!selectedNode) {
+      return [];
+    }
+    var nodeTypeName = selectedNode.node.type.name;
+    var sortedKeys = getSortedSuggestedItems(nodeTypeName);
+    return sortedKeys.map(function (key) {
+      return menuItemsMap.get(key);
+    }).filter(function (item) {
+      return item !== undefined;
+    });
+  }, [menuItemsMap, preservedSelection]);
+  if (suggestedItems.length === 0) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, {
+    title: "Suggested"
+  }, suggestedItems.map(function (item) {
+    var ItemComponent = item.component;
+    return ItemComponent ? /*#__PURE__*/React.createElement(ItemComponent, {
+      key: item.key
+    }) : null;
+  }));
+});

package/dist/esm/ui/utils/suggested-items-rank.js

@@ -18,22 +18,6 @@ var _TRANSFORM_SUGGESTED_;
  */
 
 import { TRANSFORM_STRUCTURE_PANEL_MENU_ITEM, TRANSFORM_STRUCTURE_EXPAND_MENU_ITEM, TRANSFORM_STRUCTURE_LAYOUT_MENU_ITEM, TRANSFORM_STRUCTURE_QUOTE_MENU_ITEM, TRANSFORM_STRUCTURE_CODE_BLOCK_MENU_ITEM, TRANSFORM_STRUCTURE_BULLETED_LIST_MENU_ITEM, TRANSFORM_STRUCTURE_NUMBERED_LIST_MENU_ITEM, TRANSFORM_STRUCTURE_TASK_LIST_MENU_ITEM, TRANSFORM_HEADINGS_H2_MENU_ITEM, TRANSFORM_HEADINGS_H3_MENU_ITEM, TRANSFORM_STRUCTURE_PARAGRAPH_MENU_ITEM } from '@atlaskit/editor-common/block-menu';
-/**
- * Node type keys that map to ProseMirror node types from the ADF schema.
- * These values must match the NodeTypeName type.
- *
- * TypeScript will enforce that all values are valid NodeTypeName values.
- * If a new node type is added, it must be added to NodeTypeName first.
- *
- * Reference: packages/editor/editor-plugin-block-menu/src/editor-commands/transform-node-utils/types.ts
- *
- * Note: 'heading' represents all heading levels (1-6) as a single node type.
- * The specific level is determined by the node's `attrs.level` property at runtime.
- *
- * @example
- * // Usage:
- * const nodeType = BLOCK_MENU_NODE_TYPES.PARAGRAPH; // Type: "paragraph"
- */
 export var BLOCK_MENU_NODE_TYPES = {
   PARAGRAPH: 'paragraph',
   EXPAND: 'expand',
@@ -53,35 +37,10 @@ export var BLOCK_MENU_NODE_TYPES = {
   EMBED_CARD: 'embedCard',
   TABLE: 'table'
 };
-
-/**
- * Type for node type values extracted from BLOCK_MENU_NODE_TYPES
- */
-
-/**
- * Type for the suggested items rank mapping
- */
-
-/**
- * Mapping of source node types to suggested transformation menu items with their ranks.
- * Lower rank number = higher priority in the suggested menu section.
- */
 export var TRANSFORM_SUGGESTED_ITEMS_RANK = (_TRANSFORM_SUGGESTED_ = {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_TRANSFORM_SUGGESTED_, BLOCK_MENU_NODE_TYPES.PARAGRAPH, _defineProperty(_defineProperty(_defineProperty({}, TRANSFORM_STRUCTURE_PANEL_MENU_ITEM.key, 100), TRANSFORM_HEADINGS_H2_MENU_ITEM.key, 200), TRANSFORM_HEADINGS_H3_MENU_ITEM.key, 300)), BLOCK_MENU_NODE_TYPES.EXPAND, _defineProperty(_defineProperty(_defineProperty({}, TRANSFORM_STRUCTURE_PANEL_MENU_ITEM.key, 100), TRANSFORM_STRUCTURE_LAYOUT_MENU_ITEM.key, 200), TRANSFORM_STRUCTURE_PARAGRAPH_MENU_ITEM.key, 300)), BLOCK_MENU_NODE_TYPES.BLOCKQUOTE, _defineProperty(_defineProperty(_defineProperty({}, TRANSFORM_STRUCTURE_PANEL_MENU_ITEM.key, 100), TRANSFORM_STRUCTURE_PARAGRAPH_MENU_ITEM.key, 200), TRANSFORM_STRUCTURE_LAYOUT_MENU_ITEM.key, 300)), BLOCK_MENU_NODE_TYPES.LAYOUT_SECTION, _defineProperty(_defineProperty(_defineProperty({}, TRANSFORM_STRUCTURE_PANEL_MENU_ITEM.key, 100), TRANSFORM_STRUCTURE_EXPAND_MENU_ITEM.key, 200), TRANSFORM_HEADINGS_H2_MENU_ITEM.key, 300)), BLOCK_MENU_NODE_TYPES.PANEL, _defineProperty(_defineProperty(_defineProperty({}, TRANSFORM_STRUCTURE_PARAGRAPH_MENU_ITEM.key, 100), TRANSFORM_STRUCTURE_QUOTE_MENU_ITEM.key, 200), TRANSFORM_STRUCTURE_CODE_BLOCK_MENU_ITEM.key, 300)), BLOCK_MENU_NODE_TYPES.CODE_BLOCK, _defineProperty(_defineProperty(_defineProperty({}, TRANSFORM_STRUCTURE_EXPAND_MENU_ITEM.key, 100), TRANSFORM_STRUCTURE_LAYOUT_MENU_ITEM.key, 200), TRANSFORM_STRUCTURE_PANEL_MENU_ITEM.key, 300)), BLOCK_MENU_NODE_TYPES.DECISION, _defineProperty(_defineProperty(_defineProperty({}, TRANSFORM_STRUCTURE_PANEL_MENU_ITEM.key, 100), TRANSFORM_STRUCTURE_PARAGRAPH_MENU_ITEM.key, 200), TRANSFORM_STRUCTURE_TASK_LIST_MENU_ITEM.key, 300)), BLOCK_MENU_NODE_TYPES.BULLET_LIST, _defineProperty(_defineProperty(_defineProperty({}, TRANSFORM_STRUCTURE_NUMBERED_LIST_MENU_ITEM.key, 100), TRANSFORM_STRUCTURE_QUOTE_MENU_ITEM.key, 200), TRANSFORM_STRUCTURE_PARAGRAPH_MENU_ITEM.key, 300)), BLOCK_MENU_NODE_TYPES.ORDERED_LIST, _defineProperty(_defineProperty(_defineProperty({}, TRANSFORM_STRUCTURE_BULLETED_LIST_MENU_ITEM.key, 100), TRANSFORM_STRUCTURE_TASK_LIST_MENU_ITEM.key, 200), TRANSFORM_STRUCTURE_PARAGRAPH_MENU_ITEM.key, 300)), BLOCK_MENU_NODE_TYPES.HEADING, _defineProperty(_defineProperty(_defineProperty({}, TRANSFORM_STRUCTURE_PARAGRAPH_MENU_ITEM.key, 100), TRANSFORM_HEADINGS_H2_MENU_ITEM.key, 200), TRANSFORM_STRUCTURE_PANEL_MENU_ITEM.key, 300)), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_TRANSFORM_SUGGESTED_, BLOCK_MENU_NODE_TYPES.TASK_LIST, _defineProperty(_defineProperty(_defineProperty({}, TRANSFORM_STRUCTURE_PARAGRAPH_MENU_ITEM.key, 100), TRANSFORM_STRUCTURE_NUMBERED_LIST_MENU_ITEM.key, 200), TRANSFORM_STRUCTURE_CODE_BLOCK_MENU_ITEM.key, 300)), BLOCK_MENU_NODE_TYPES.MEDIA_SINGLE, _defineProperty(_defineProperty(_defineProperty({}, TRANSFORM_STRUCTURE_PANEL_MENU_ITEM.key, 100), TRANSFORM_STRUCTURE_LAYOUT_MENU_ITEM.key, 200), TRANSFORM_STRUCTURE_PARAGRAPH_MENU_ITEM.key, 300)), BLOCK_MENU_NODE_TYPES.EXTENSION, _defineProperty(_defineProperty(_defineProperty({}, TRANSFORM_STRUCTURE_PANEL_MENU_ITEM.key, 100), TRANSFORM_STRUCTURE_PARAGRAPH_MENU_ITEM.key, 200), TRANSFORM_STRUCTURE_EXPAND_MENU_ITEM.key, 300)), BLOCK_MENU_NODE_TYPES.BODIED_EXTENSION, _defineProperty(_defineProperty(_defineProperty({}, TRANSFORM_STRUCTURE_PANEL_MENU_ITEM.key, 100), TRANSFORM_STRUCTURE_PARAGRAPH_MENU_ITEM.key, 200), TRANSFORM_STRUCTURE_EXPAND_MENU_ITEM.key, 300)), BLOCK_MENU_NODE_TYPES.BLOCK_CARD, _defineProperty(_defineProperty({}, TRANSFORM_STRUCTURE_PANEL_MENU_ITEM.key, 100), TRANSFORM_STRUCTURE_PARAGRAPH_MENU_ITEM.key, 200)), BLOCK_MENU_NODE_TYPES.EMBED_CARD, _defineProperty(_defineProperty({}, TRANSFORM_STRUCTURE_PANEL_MENU_ITEM.key, 100), TRANSFORM_STRUCTURE_PARAGRAPH_MENU_ITEM.key, 200)), BLOCK_MENU_NODE_TYPES.TABLE, _defineProperty(_defineProperty({}, TRANSFORM_STRUCTURE_EXPAND_MENU_ITEM.key, 100), TRANSFORM_STRUCTURE_LAYOUT_MENU_ITEM.key, 200)));
-
-/**
- * Get suggested menu items for a given node type
- * @param nodeType - The source node type (e.g., 'paragraph', 'heading')
- * @returns Object mapping menu item keys to their ranks, or undefined if no suggestions
- */
 export var getSuggestedItemsForNodeType = function getSuggestedItemsForNodeType(nodeType) {
   return TRANSFORM_SUGGESTED_ITEMS_RANK[nodeType];
 };
-
-/**
- * Get sorted suggested menu item keys for a given node type
- * @param nodeType - The source node type
- * @returns Array of menu item keys sorted by rank (highest priority first)
- */
 export var getSortedSuggestedItems = function getSortedSuggestedItems(nodeType) {
   var suggestions = getSuggestedItemsForNodeType(nodeType);
   if (!suggestions) {

package/dist/types/editor-commands/transform-node-utils/wrapMixedContentStep.d.ts

@@ -0,0 +1,20 @@
+import type { TransformStep } from './types';
+/**
+ * A wrap step that handles mixed content according to the Compatibility Matrix:
+ * - Wraps consecutive compatible nodes into the target container
+ * - Same-type containers break out as separate containers (preserved as-is)
+ * - NestedExpands break out as regular expands (converted since nestedExpand can't exist outside expand)
+ * - Container structures that can't be nested in target break out (not flattened)
+ * - Text/list nodes that can't be wrapped are flattened and merged into the container
+ * - Atomic nodes (tables, media, macros) break out
+ *
+ * What can be wrapped depends on the target container's schema:
+ * - expand → panel: tables break out, nestedExpands convert to expands and break out
+ * - expand → blockquote: tables/media break out, nestedExpands convert to expands and break out
+ * - expand → expand: tables/media stay inside (expands can contain them)
+ *
+ * Example: expand(p('a'), table(), p('b')) → panel: [panel(p('a')), table(), panel(p('b'))]
+ * Example: expand(p('a'), panel(p('x')), p('b')) → panel: [panel(p('a')), panel(p('x')), panel(p('b'))]
+ * Example: expand(p('a'), nestedExpand({title: 'inner'})(p('x')), p('b')) → panel: [panel(p('a')), expand({title: 'inner'})(p('x')), panel(p('b'))]
+ */
+export declare const wrapMixedContentStep: TransformStep;

package/dist/types/ui/block-menu-provider.d.ts

@@ -1,11 +1,19 @@
 import React from 'react';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type { BlockMenuPlugin } from '../blockMenuPluginType';
+export type Direction = 'moveUp' | 'moveDown';
 type BlockMenuProviderProps = {
     api: ExtractInjectionAPI<BlockMenuPlugin> | undefined;
     children: React.ReactNode;
 };
 export type BlockMenuContextType = {
+    moveDownRef: React.MutableRefObject<HTMLButtonElement | null>;
+    /**
+     * Function to move focus between move up and move down items.
+     * Used when one item is disabled and focused.
+     */
+    moveFocusTo: (direction: Direction) => void;
+    moveUpRef: React.MutableRefObject<HTMLButtonElement | null>;
     /**
      * Callback for when the dropdown is open/closed. Receives an object with `isOpen` state.
      *

package/dist/types/ui/suggested-items-renderer.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { BlockMenuPlugin } from '../blockMenuPluginType';
+type SuggestedItemsRendererProps = {
+    api: ExtractInjectionAPI<BlockMenuPlugin> | undefined;
+};
+export declare const SuggestedItemsRenderer: React.NamedExoticComponent<SuggestedItemsRendererProps>;
+export {};

package/dist/types/ui/utils/suggested-items-rank.d.ts

@@ -13,22 +13,6 @@
  *   }
  * }
  */
-/**
- * Node type keys that map to ProseMirror node types from the ADF schema.
- * These values must match the NodeTypeName type.
- *
- * TypeScript will enforce that all values are valid NodeTypeName values.
- * If a new node type is added, it must be added to NodeTypeName first.
- *
- * Reference: packages/editor/editor-plugin-block-menu/src/editor-commands/transform-node-utils/types.ts
- *
- * Note: 'heading' represents all heading levels (1-6) as a single node type.
- * The specific level is determined by the node's `attrs.level` property at runtime.
- *
- * @example
- * // Usage:
- * const nodeType = BLOCK_MENU_NODE_TYPES.PARAGRAPH; // Type: "paragraph"
- */
 export declare const BLOCK_MENU_NODE_TYPES: {
     readonly PARAGRAPH: "paragraph";
     readonly EXPAND: "expand";
@@ -48,34 +32,14 @@ export declare const BLOCK_MENU_NODE_TYPES: {
     readonly EMBED_CARD: "embedCard";
     readonly TABLE: "table";
 };
-/**
- * Type for node type values extracted from BLOCK_MENU_NODE_TYPES
- */
 export type BlockMenuNodeType = (typeof BLOCK_MENU_NODE_TYPES)[keyof typeof BLOCK_MENU_NODE_TYPES];
-/**
- * Type for the suggested items rank mapping
- */
 export type SuggestedItemsRankMap = {
     [nodeType: string]: {
         [menuItemKey: string]: number;
     };
 };
-/**
- * Mapping of source node types to suggested transformation menu items with their ranks.
- * Lower rank number = higher priority in the suggested menu section.
- */
 export declare const TRANSFORM_SUGGESTED_ITEMS_RANK: SuggestedItemsRankMap;
-/**
- * Get suggested menu items for a given node type
- * @param nodeType - The source node type (e.g., 'paragraph', 'heading')
- * @returns Object mapping menu item keys to their ranks, or undefined if no suggestions
- */
 export declare const getSuggestedItemsForNodeType: (nodeType: string) => {
     [menuItemKey: string]: number;
 } | undefined;
-/**
- * Get sorted suggested menu item keys for a given node type
- * @param nodeType - The source node type
- * @returns Array of menu item keys sorted by rank (highest priority first)
- */
 export declare const getSortedSuggestedItems: (nodeType: string) => string[];