@atlaskit/editor-plugin-selection-extension 13.2.0 → 13.3.0

package/CHANGELOG.md

@@ -1,10 +1,30 @@
 # @atlaskit/editor-plugin-selection-extension
 
+## 13.3.0
+
+### Minor Changes
+
+- [`434b508cc2368`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/434b508cc2368) -
+  EDITOR-7104: Add `featured-section` placement to block menu selection extension API
+  - Add `featured-section` to `BlockMenuPlacement` type which registers a top-level section with a
+    separator
+  - Add `BLOCK_ACTIONS_TEMPLATE_SECTION` and `BLOCK_ACTIONS_FEATURED_EXTENSION_SECTION_KEYS`
+    constants to `editor-common`
+  - Render lozenge inline next to label text (not pushed to far right) for dropdown and nested
+    dropdown items
+  - Move "New" lozenge next to label for synced block dropdown items
+  - Block template/menu behaviour gated behind `platform_editor_block_menu_v2_patch_2`; synced-block
+    lozenge placement behaviour gated behind `platform_synced_block_patch_12`
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 13.2.0
 
 ### Minor Changes
 
-- [`41168b2bd2790`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/41168b2bd2790) -
+- [`ebab8f80bfc40`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/ebab8f80bfc40) -
   Autofix: add explicit package exports (barrel removal)
 
 ### Patch Changes

package/dist/cjs/ui/LegacyToolbarComponent.js

@@ -76,13 +76,14 @@ var LegacyExtensionToolbarItem = exports.LegacyExtensionToolbarItem = function L
   // eslint-disable-next-line @atlassian/perf-linting/no-expensive-computations-in-render -- Ignored via go/ees017 (to be fixed)
   getMenuItems().map(function (menuItem, i) {
     // Only process ExtensionMenuItemConfiguration, skip ExtensionMenuSectionConfiguration
-    if ('label' in menuItem && 'icon' in menuItem) {
+    if ('label' in menuItem) {
+      var _Icon = menuItem.icon;
       return {
         key: "menu-item-".concat(i),
         content: menuItem.label,
-        elemBefore: /*#__PURE__*/_react.default.createElement(menuItem.icon, {
+        elemBefore: _Icon ? /*#__PURE__*/_react.default.createElement(_Icon, {
           label: menuItem.label
-        }),
+        }) : undefined,
         onClick: function onClick() {
           var _menuItem$onClick;
           (_menuItem$onClick = menuItem.onClick) === null || _menuItem$onClick === void 0 || _menuItem$onClick.call(menuItem);

package/dist/cjs/ui/menu/SelectionExtensionDropdownItem.js

@@ -30,6 +30,7 @@ var styles = {
   lozenge: "_18u01b66 _1o9zidpf"
 };
 var SelectionExtensionDropdownItem = exports.SelectionExtensionDropdownItem = function SelectionExtensionDropdownItem(_ref) {
+  var _dropdownItem$lozenge;
   var dropdownItem = _ref.dropdownItem;
   var IconComponent = dropdownItem.icon;
   var _useSelectionExtensio = (0, _SelectionExtensionComponentContext.useSelectionExtensionComponentContext)(),
@@ -100,9 +101,33 @@ var SelectionExtensionDropdownItem = exports.SelectionExtensionDropdownItem = fu
     size: iconSize,
     label: ""
   }) : undefined;
+  var lozengeLabel = (_dropdownItem$lozenge = dropdownItem.lozenge) === null || _dropdownItem$lozenge === void 0 ? void 0 : _dropdownItem$lozenge.label;
+  var elemAfterText = lozengeLabel ? /*#__PURE__*/_react.default.createElement(_lozenge.default, {
+    appearance: (0, _platformFeatureFlags.fg)('confluence_fronend_labels_categorization_migration') ? 'discovery' : 'new'
+  }, lozengeLabel) : undefined;
   var elemBeforeIcon = iconElement && extensionLocation === 'block-menu' ? /*#__PURE__*/_react.default.createElement("span", {
     className: (0, _runtime.ax)([styles.svgOverflow])
   }, iconElement) : iconElement;
+  if ((0, _platformFeatureFlags.fg)('platform_editor_block_menu_v2_patch_2')) {
+    return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarTooltip, {
+      content: isTruncated ? dropdownItem.label : null,
+      position: "top"
+    }, /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItem, {
+      elemBefore: elemBeforeIcon,
+      elemAfterText: elemAfterText,
+      onClick: handleClick,
+      isDisabled: dropdownItem.isDisabled,
+      testId: _blockMenu.EXTENSION_MENU_ITEM_TEST_ID
+    }, /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+      as: "span",
+      xcss: !elemAfterText && (0, _platformFeatureFlags.fg)('platform_editor_block_menu_v2_patch_5') ? styles.contentWrapperWithJustifyContent : styles.contentWrapper,
+      onMouseOver: handleMouseEnter
+    }, /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+      as: "span",
+      xcss: styles.label,
+      ref: labelRef
+    }, dropdownItem.label))));
+  }
   return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarTooltip, {
     content: isTruncated ? dropdownItem.label : null,
     position: "top"

package/dist/cjs/ui/menu/SelectionExtensionNestedDropdownMenu.compiled.css

@@ -0,0 +1 @@
+._18u012x7{margin-left:var(--ds-space-075,6px)}

package/dist/cjs/ui/menu/SelectionExtensionNestedDropdownMenu.js

@@ -1,3 +1,4 @@
+/* SelectionExtensionNestedDropdownMenu.tsx generated by @compiled/babel-plugin v0.39.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -5,13 +6,21 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.SelectionExtensionNestedDropdownMenu = void 0;
+require("./SelectionExtensionNestedDropdownMenu.compiled.css");
+var _runtime = require("@compiled/react/runtime");
 var _react = _interopRequireDefault(require("react"));
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _blockMenu = require("@atlaskit/editor-common/block-menu");
 var _editorToolbar = require("@atlaskit/editor-toolbar");
 var _chevronRight = _interopRequireDefault(require("@atlaskit/icon/core/chevron-right"));
+var _lozenge = _interopRequireDefault(require("@atlaskit/lozenge"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _compiled = require("@atlaskit/primitives/compiled");
 var _SelectionExtensionComponentContext = require("../SelectionExtensionComponentContext");
 var _SelectionExtensionDropdownItem = require("./SelectionExtensionDropdownItem");
+var styles = {
+  lozenge: "_18u012x7"
+};
 var ChildItems = function ChildItems(_ref) {
   var nestedDropdownMenu = _ref.nestedDropdownMenu;
   var childItems = nestedDropdownMenu.getMenuItems();
@@ -23,6 +32,7 @@ var ChildItems = function ChildItems(_ref) {
   }));
 };
 var SelectionExtensionNestedDropdownMenu = exports.SelectionExtensionNestedDropdownMenu = function SelectionExtensionNestedDropdownMenu(_ref2) {
+  var _nestedDropdownMenu$l;
   var nestedDropdownMenu = _ref2.nestedDropdownMenu;
   var IconComponent = nestedDropdownMenu.icon;
   var _useSelectionExtensio = (0, _SelectionExtensionComponentContext.useSelectionExtensionComponentContext)(),
@@ -46,9 +56,17 @@ var SelectionExtensionNestedDropdownMenu = exports.SelectionExtensionNestedDropd
       }
     });
   };
+  var lozengeLabel = (_nestedDropdownMenu$l = nestedDropdownMenu.lozenge) === null || _nestedDropdownMenu$l === void 0 ? void 0 : _nestedDropdownMenu$l.label;
+  var elemAfterText = lozengeLabel && (0, _platformFeatureFlags.fg)('platform_editor_block_menu_v2_patch_2') ? /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+    as: "span",
+    xcss: styles.lozenge
+  }, /*#__PURE__*/_react.default.createElement(_lozenge.default, {
+    appearance: (0, _platformFeatureFlags.fg)('confluence_fronend_labels_categorization_migration') ? 'discovery' : 'new'
+  }, lozengeLabel)) : undefined;
   return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarNestedDropdownMenu, {
     testId: _blockMenu.EXTENSION_MENU_ITEM_TEST_ID,
     text: nestedDropdownMenu.label,
+    elemAfterText: elemAfterText,
     elemBefore: IconComponent ? /*#__PURE__*/_react.default.createElement(IconComponent, {
       label: "",
       size: "small"

package/dist/cjs/ui/toolbar-components/MenuItem.js

@@ -49,10 +49,10 @@ var MenuItem = exports.MenuItem = function MenuItem(_ref) {
     var Icon = extension.icon;
     return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItem, {
       key: extension.label,
-      elemBefore: /*#__PURE__*/_react.default.createElement(Icon, {
+      elemBefore: Icon ? /*#__PURE__*/_react.default.createElement(Icon, {
         size: "small",
         label: ""
-      }),
+      }) : undefined,
       onClick: onClickHandle(extension),
       isDisabled: extension.isDisabled
     }, extension.label, extension.lozenge && /*#__PURE__*/_react.default.createElement(_compiled.Box, {

package/dist/cjs/ui/utils/registerBlockMenuItems.js

@@ -7,12 +7,19 @@ Object.defineProperty(exports, "__esModule", {
 exports.registerBlockMenuItems = registerBlockMenuItems;
 var _react = _interopRequireDefault(require("react"));
 var _blockMenu = require("@atlaskit/editor-common/block-menu");
+var _editorToolbar = require("@atlaskit/editor-toolbar");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _SelectionExtensionMenuItems = require("../menu/SelectionExtensionMenuItems");
 var _SelectionExtensionComponentContext = require("../SelectionExtensionComponentContext");
+/**
+ * Registers first-party selection extension menu items with the block menu plugin.
+ */
 function registerBlockMenuItems(_ref) {
   var extensionList = _ref.extensionList,
     api = _ref.api,
     editorViewRef = _ref.editorViewRef;
+  var componentsToRegister = [];
+  var registeredFeaturedSectionKeys = new Set();
   extensionList.forEach(function (_ref2) {
     var source = _ref2.source,
       key = _ref2.key,
@@ -23,12 +30,68 @@ function registerBlockMenuItems(_ref) {
     if (!(api !== null && api !== void 0 && api.blockMenu)) {
       return;
     }
-    var componentsToRegister = [];
 
-    // Use placement from BlockMenuExtensionConfiguration
-    // Featured placement: register under TRANSFORM_MENU_SECTION
-    // Default placement: register under TRANSFORM_CREATE_MENU_SECTION
-    if (blockMenu.placement === 'featured') {
+    /**
+     * Renders the registered selection-extension menu items with the correct block-menu context.
+     */
+    var makeItemComponent = function makeItemComponent() {
+      var editorView = editorViewRef === null || editorViewRef === void 0 ? void 0 : editorViewRef.current;
+      if (!editorView) {
+        return null;
+      }
+      return /*#__PURE__*/_react.default.createElement(_SelectionExtensionComponentContext.SelectionExtensionComponentContextProvider
+      // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
+      , {
+        value: {
+          api: api,
+          editorView: editorView,
+          extensionKey: key,
+          extensionSource: source,
+          extensionLocation: 'block-menu'
+        }
+      }, /*#__PURE__*/_react.default.createElement(_SelectionExtensionMenuItems.SelectionExtensionMenuItems, {
+        getMenuItems: blockMenu.getMenuItems
+      }));
+    };
+    if (blockMenu.placement === 'featured-section' && (0, _platformFeatureFlags.fg)('platform_editor_block_menu_v2_patch_2')) {
+      // Block menu sections do not support isHidden. Check menu items before registering
+      // the section to avoid rendering an orphan separator when there are no items.
+      if (blockMenu.getMenuItems().length === 0 || !blockMenu.sectionKey) {
+        return;
+      }
+      var sectionRank = _blockMenu.MAIN_BLOCK_MENU_SECTION_RANK[blockMenu.sectionKey];
+      if (sectionRank === undefined) {
+        return;
+      }
+
+      // Register as its own top-level section with a separator
+      if (!registeredFeaturedSectionKeys.has(blockMenu.sectionKey)) {
+        componentsToRegister.push({
+          type: 'block-menu-section',
+          key: blockMenu.sectionKey,
+          rank: sectionRank,
+          component: function component(_ref3) {
+            var children = _ref3.children;
+            return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItemSection, {
+              hasSeparator: true
+            }, children);
+          }
+        });
+        registeredFeaturedSectionKeys.add(blockMenu.sectionKey);
+      }
+      componentsToRegister.push({
+        type: 'block-menu-item',
+        key: "selection-extension-".concat(key),
+        parent: {
+          type: 'block-menu-section',
+          key: blockMenu.sectionKey,
+          rank: _blockMenu.BLOCK_ACTIONS_FEATURED_EXTENSION_ITEM_RANK[_blockMenu.BLOCK_ACTIONS_FEATURED_EXTENSION_SLOT_MENU_ITEM.key]
+        },
+        component: makeItemComponent
+      });
+    } else if (blockMenu.placement === 'featured' || blockMenu.placement === 'featured-section' && !(0, _platformFeatureFlags.fg)('platform_editor_block_menu_v2_patch_2')) {
+      // Register as an item directly under TRANSFORM_MENU_SECTION
+      // (also used as fallback for featured-section when gate is off)
       componentsToRegister.push({
         type: 'block-menu-item',
         key: "selection-extension-".concat(key),
@@ -37,27 +100,10 @@ function registerBlockMenuItems(_ref) {
           key: _blockMenu.TRANSFORM_MENU_SECTION.key,
           rank: _blockMenu.TRANSFORM_MENU_SECTION_RANK[_blockMenu.BLOCK_ACTIONS_FEATURED_EXTENSION_SLOT_MENU_ITEM.key]
         },
-        component: function component() {
-          var editorView = editorViewRef === null || editorViewRef === void 0 ? void 0 : editorViewRef.current;
-          if (!editorView) {
-            return null;
-          }
-          return /*#__PURE__*/_react.default.createElement(_SelectionExtensionComponentContext.SelectionExtensionComponentContextProvider
-          // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
-          , {
-            value: {
-              api: api,
-              editorView: editorView,
-              extensionKey: key,
-              extensionSource: source,
-              extensionLocation: 'block-menu'
-            }
-          }, /*#__PURE__*/_react.default.createElement(_SelectionExtensionMenuItems.SelectionExtensionMenuItems, {
-            getMenuItems: blockMenu.getMenuItems
-          }));
-        }
+        component: makeItemComponent
       });
     } else {
+      // Default: register under TRANSFORM_CREATE_MENU_SECTION
       componentsToRegister.push({
         type: 'block-menu-item',
         key: "selection-extension-".concat(key),
@@ -69,29 +115,12 @@ function registerBlockMenuItems(_ref) {
           key: _blockMenu.TRANSFORM_CREATE_MENU_SECTION.key,
           rank: _blockMenu.TRANSFORM_CREATE_MENU_SECTION_RANK[_blockMenu.TRANSFORM_DEFAULT_EXTENSION_SLOT_MENU_ITEM.key]
         },
-        component: function component() {
-          var editorView = editorViewRef === null || editorViewRef === void 0 ? void 0 : editorViewRef.current;
-          if (!editorView) {
-            return null;
-          }
-          return /*#__PURE__*/_react.default.createElement(_SelectionExtensionComponentContext.SelectionExtensionComponentContextProvider
-          // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
-          , {
-            value: {
-              api: api,
-              editorView: editorView,
-              extensionKey: key,
-              extensionSource: source,
-              extensionLocation: 'block-menu'
-            }
-          }, /*#__PURE__*/_react.default.createElement(_SelectionExtensionMenuItems.SelectionExtensionMenuItems, {
-            getMenuItems: blockMenu.getMenuItems
-          }));
-        }
+        component: makeItemComponent
       });
     }
-    if (componentsToRegister.length > 0) {
-      api.blockMenu.actions.registerBlockMenuComponents(componentsToRegister);
-    }
   });
+  if (componentsToRegister.length > 0) {
+    var _api$blockMenu;
+    api === null || api === void 0 || (_api$blockMenu = api.blockMenu) === null || _api$blockMenu === void 0 || _api$blockMenu.actions.registerBlockMenuComponents(componentsToRegister);
+  }
 }

package/dist/es2019/ui/LegacyToolbarComponent.js

@@ -65,13 +65,14 @@ export const LegacyExtensionToolbarItem = ({
   // eslint-disable-next-line @atlassian/perf-linting/no-expensive-computations-in-render -- Ignored via go/ees017 (to be fixed)
   getMenuItems().map((menuItem, i) => {
     // Only process ExtensionMenuItemConfiguration, skip ExtensionMenuSectionConfiguration
-    if ('label' in menuItem && 'icon' in menuItem) {
+    if ('label' in menuItem) {
+      const Icon = menuItem.icon;
       return {
         key: `menu-item-${i}`,
         content: menuItem.label,
-        elemBefore: /*#__PURE__*/React.createElement(menuItem.icon, {
+        elemBefore: Icon ? /*#__PURE__*/React.createElement(Icon, {
           label: menuItem.label
-        }),
+        }) : undefined,
         onClick: () => {
           var _menuItem$onClick;
           (_menuItem$onClick = menuItem.onClick) === null || _menuItem$onClick === void 0 ? void 0 : _menuItem$onClick.call(menuItem);

package/dist/es2019/ui/menu/SelectionExtensionDropdownItem.js

@@ -22,6 +22,7 @@ const styles = {
 export const SelectionExtensionDropdownItem = ({
   dropdownItem
 }) => {
+  var _dropdownItem$lozenge;
   const IconComponent = dropdownItem.icon;
   const {
     api,
@@ -91,9 +92,33 @@ export const SelectionExtensionDropdownItem = ({
     size: iconSize,
     label: ""
   }) : undefined;
+  const lozengeLabel = (_dropdownItem$lozenge = dropdownItem.lozenge) === null || _dropdownItem$lozenge === void 0 ? void 0 : _dropdownItem$lozenge.label;
+  const elemAfterText = lozengeLabel ? /*#__PURE__*/React.createElement(Lozenge, {
+    appearance: fg('confluence_fronend_labels_categorization_migration') ? 'discovery' : 'new'
+  }, lozengeLabel) : undefined;
   const elemBeforeIcon = iconElement && extensionLocation === 'block-menu' ? /*#__PURE__*/React.createElement("span", {
     className: ax([styles.svgOverflow])
   }, iconElement) : iconElement;
+  if (fg('platform_editor_block_menu_v2_patch_2')) {
+    return /*#__PURE__*/React.createElement(ToolbarTooltip, {
+      content: isTruncated ? dropdownItem.label : null,
+      position: "top"
+    }, /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
+      elemBefore: elemBeforeIcon,
+      elemAfterText: elemAfterText,
+      onClick: handleClick,
+      isDisabled: dropdownItem.isDisabled,
+      testId: EXTENSION_MENU_ITEM_TEST_ID
+    }, /*#__PURE__*/React.createElement(Box, {
+      as: "span",
+      xcss: !elemAfterText && fg('platform_editor_block_menu_v2_patch_5') ? styles.contentWrapperWithJustifyContent : styles.contentWrapper,
+      onMouseOver: handleMouseEnter
+    }, /*#__PURE__*/React.createElement(Box, {
+      as: "span",
+      xcss: styles.label,
+      ref: labelRef
+    }, dropdownItem.label))));
+  }
   return /*#__PURE__*/React.createElement(ToolbarTooltip, {
     content: isTruncated ? dropdownItem.label : null,
     position: "top"

package/dist/es2019/ui/menu/SelectionExtensionNestedDropdownMenu.compiled.css

@@ -0,0 +1 @@
+._18u012x7{margin-left:var(--ds-space-075,6px)}

package/dist/es2019/ui/menu/SelectionExtensionNestedDropdownMenu.js

@@ -1,10 +1,19 @@
+/* SelectionExtensionNestedDropdownMenu.tsx generated by @compiled/babel-plugin v0.39.1 */
+import "./SelectionExtensionNestedDropdownMenu.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import { EXTENSION_MENU_ITEM_TEST_ID } from '@atlaskit/editor-common/block-menu';
 import { ToolbarDropdownItemSection, ToolbarNestedDropdownMenu } from '@atlaskit/editor-toolbar';
 import ChevronRightIcon from '@atlaskit/icon/core/chevron-right';
+import Lozenge from '@atlaskit/lozenge';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { Box } from '@atlaskit/primitives/compiled';
 import { useSelectionExtensionComponentContext } from '../SelectionExtensionComponentContext';
 import { SelectionExtensionDropdownItem } from './SelectionExtensionDropdownItem';
+const styles = {
+  lozenge: "_18u012x7"
+};
 const ChildItems = ({
   nestedDropdownMenu
 }) => {
@@ -17,6 +26,7 @@ const ChildItems = ({
 export const SelectionExtensionNestedDropdownMenu = ({
   nestedDropdownMenu
 }) => {
+  var _nestedDropdownMenu$l;
   const IconComponent = nestedDropdownMenu.icon;
   const {
     api,
@@ -40,9 +50,17 @@ export const SelectionExtensionNestedDropdownMenu = ({
       }
     });
   };
+  const lozengeLabel = (_nestedDropdownMenu$l = nestedDropdownMenu.lozenge) === null || _nestedDropdownMenu$l === void 0 ? void 0 : _nestedDropdownMenu$l.label;
+  const elemAfterText = lozengeLabel && fg('platform_editor_block_menu_v2_patch_2') ? /*#__PURE__*/React.createElement(Box, {
+    as: "span",
+    xcss: styles.lozenge
+  }, /*#__PURE__*/React.createElement(Lozenge, {
+    appearance: fg('confluence_fronend_labels_categorization_migration') ? 'discovery' : 'new'
+  }, lozengeLabel)) : undefined;
   return /*#__PURE__*/React.createElement(ToolbarNestedDropdownMenu, {
     testId: EXTENSION_MENU_ITEM_TEST_ID,
     text: nestedDropdownMenu.label,
+    elemAfterText: elemAfterText,
     elemBefore: IconComponent ? /*#__PURE__*/React.createElement(IconComponent, {
       label: "",
       size: "small"

package/dist/es2019/ui/toolbar-components/MenuItem.js

@@ -44,10 +44,10 @@ export const MenuItem = ({
     const Icon = extension.icon;
     return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
       key: extension.label,
-      elemBefore: /*#__PURE__*/React.createElement(Icon, {
+      elemBefore: Icon ? /*#__PURE__*/React.createElement(Icon, {
         size: "small",
         label: ""
-      }),
+      }) : undefined,
       onClick: onClickHandle(extension),
       isDisabled: extension.isDisabled
     }, extension.label, extension.lozenge && /*#__PURE__*/React.createElement(Box, {

package/dist/es2019/ui/utils/registerBlockMenuItems.js

@@ -1,12 +1,19 @@
 import React from 'react';
-import { TRANSFORM_MENU_SECTION, BLOCK_ACTIONS_FEATURED_EXTENSION_SLOT_MENU_ITEM, TRANSFORM_MENU_SECTION_RANK, TRANSFORM_CREATE_MENU_SECTION, TRANSFORM_CREATE_MENU_SECTION_RANK, TRANSFORM_DEFAULT_EXTENSION_SLOT_MENU_ITEM } from '@atlaskit/editor-common/block-menu';
+import { TRANSFORM_MENU_SECTION, TRANSFORM_MENU_SECTION_RANK, BLOCK_ACTIONS_FEATURED_EXTENSION_SLOT_MENU_ITEM, BLOCK_ACTIONS_FEATURED_EXTENSION_ITEM_RANK, MAIN_BLOCK_MENU_SECTION_RANK, TRANSFORM_CREATE_MENU_SECTION, TRANSFORM_CREATE_MENU_SECTION_RANK, TRANSFORM_DEFAULT_EXTENSION_SLOT_MENU_ITEM } from '@atlaskit/editor-common/block-menu';
+import { ToolbarDropdownItemSection } from '@atlaskit/editor-toolbar';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { SelectionExtensionMenuItems } from '../menu/SelectionExtensionMenuItems';
 import { SelectionExtensionComponentContextProvider } from '../SelectionExtensionComponentContext';
+/**
+ * Registers first-party selection extension menu items with the block menu plugin.
+ */
 export function registerBlockMenuItems({
   extensionList,
   api,
   editorViewRef
 }) {
+  const componentsToRegister = [];
+  const registeredFeaturedSectionKeys = new Set();
   extensionList.forEach(({
     source,
     key,
@@ -18,12 +25,67 @@ export function registerBlockMenuItems({
     if (!(api !== null && api !== void 0 && api.blockMenu)) {
       return;
     }
-    const componentsToRegister = [];
 
-    // Use placement from BlockMenuExtensionConfiguration
-    // Featured placement: register under TRANSFORM_MENU_SECTION
-    // Default placement: register under TRANSFORM_CREATE_MENU_SECTION
-    if (blockMenu.placement === 'featured') {
+    /**
+     * Renders the registered selection-extension menu items with the correct block-menu context.
+     */
+    const makeItemComponent = () => {
+      const editorView = editorViewRef === null || editorViewRef === void 0 ? void 0 : editorViewRef.current;
+      if (!editorView) {
+        return null;
+      }
+      return /*#__PURE__*/React.createElement(SelectionExtensionComponentContextProvider
+      // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
+      , {
+        value: {
+          api,
+          editorView,
+          extensionKey: key,
+          extensionSource: source,
+          extensionLocation: 'block-menu'
+        }
+      }, /*#__PURE__*/React.createElement(SelectionExtensionMenuItems, {
+        getMenuItems: blockMenu.getMenuItems
+      }));
+    };
+    if (blockMenu.placement === 'featured-section' && fg('platform_editor_block_menu_v2_patch_2')) {
+      // Block menu sections do not support isHidden. Check menu items before registering
+      // the section to avoid rendering an orphan separator when there are no items.
+      if (blockMenu.getMenuItems().length === 0 || !blockMenu.sectionKey) {
+        return;
+      }
+      const sectionRank = MAIN_BLOCK_MENU_SECTION_RANK[blockMenu.sectionKey];
+      if (sectionRank === undefined) {
+        return;
+      }
+
+      // Register as its own top-level section with a separator
+      if (!registeredFeaturedSectionKeys.has(blockMenu.sectionKey)) {
+        componentsToRegister.push({
+          type: 'block-menu-section',
+          key: blockMenu.sectionKey,
+          rank: sectionRank,
+          component: ({
+            children
+          }) => /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, {
+            hasSeparator: true
+          }, children)
+        });
+        registeredFeaturedSectionKeys.add(blockMenu.sectionKey);
+      }
+      componentsToRegister.push({
+        type: 'block-menu-item',
+        key: `selection-extension-${key}`,
+        parent: {
+          type: 'block-menu-section',
+          key: blockMenu.sectionKey,
+          rank: BLOCK_ACTIONS_FEATURED_EXTENSION_ITEM_RANK[BLOCK_ACTIONS_FEATURED_EXTENSION_SLOT_MENU_ITEM.key]
+        },
+        component: makeItemComponent
+      });
+    } else if (blockMenu.placement === 'featured' || blockMenu.placement === 'featured-section' && !fg('platform_editor_block_menu_v2_patch_2')) {
+      // Register as an item directly under TRANSFORM_MENU_SECTION
+      // (also used as fallback for featured-section when gate is off)
       componentsToRegister.push({
         type: 'block-menu-item',
         key: `selection-extension-${key}`,
@@ -32,27 +94,10 @@ export function registerBlockMenuItems({
           key: TRANSFORM_MENU_SECTION.key,
           rank: TRANSFORM_MENU_SECTION_RANK[BLOCK_ACTIONS_FEATURED_EXTENSION_SLOT_MENU_ITEM.key]
         },
-        component: () => {
-          const editorView = editorViewRef === null || editorViewRef === void 0 ? void 0 : editorViewRef.current;
-          if (!editorView) {
-            return null;
-          }
-          return /*#__PURE__*/React.createElement(SelectionExtensionComponentContextProvider
-          // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
-          , {
-            value: {
-              api,
-              editorView,
-              extensionKey: key,
-              extensionSource: source,
-              extensionLocation: 'block-menu'
-            }
-          }, /*#__PURE__*/React.createElement(SelectionExtensionMenuItems, {
-            getMenuItems: blockMenu.getMenuItems
-          }));
-        }
+        component: makeItemComponent
       });
     } else {
+      // Default: register under TRANSFORM_CREATE_MENU_SECTION
       componentsToRegister.push({
         type: 'block-menu-item',
         key: `selection-extension-${key}`,
@@ -62,29 +107,12 @@ export function registerBlockMenuItems({
           key: TRANSFORM_CREATE_MENU_SECTION.key,
           rank: TRANSFORM_CREATE_MENU_SECTION_RANK[TRANSFORM_DEFAULT_EXTENSION_SLOT_MENU_ITEM.key]
         },
-        component: () => {
-          const editorView = editorViewRef === null || editorViewRef === void 0 ? void 0 : editorViewRef.current;
-          if (!editorView) {
-            return null;
-          }
-          return /*#__PURE__*/React.createElement(SelectionExtensionComponentContextProvider
-          // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
-          , {
-            value: {
-              api,
-              editorView,
-              extensionKey: key,
-              extensionSource: source,
-              extensionLocation: 'block-menu'
-            }
-          }, /*#__PURE__*/React.createElement(SelectionExtensionMenuItems, {
-            getMenuItems: blockMenu.getMenuItems
-          }));
-        }
+        component: makeItemComponent
       });
     }
-    if (componentsToRegister.length > 0) {
-      api.blockMenu.actions.registerBlockMenuComponents(componentsToRegister);
-    }
   });
+  if (componentsToRegister.length > 0) {
+    var _api$blockMenu;
+    api === null || api === void 0 ? void 0 : (_api$blockMenu = api.blockMenu) === null || _api$blockMenu === void 0 ? void 0 : _api$blockMenu.actions.registerBlockMenuComponents(componentsToRegister);
+  }
 }

package/dist/esm/ui/LegacyToolbarComponent.js

@@ -67,13 +67,14 @@ export var LegacyExtensionToolbarItem = function LegacyExtensionToolbarItem(_ref
   // eslint-disable-next-line @atlassian/perf-linting/no-expensive-computations-in-render -- Ignored via go/ees017 (to be fixed)
   getMenuItems().map(function (menuItem, i) {
     // Only process ExtensionMenuItemConfiguration, skip ExtensionMenuSectionConfiguration
-    if ('label' in menuItem && 'icon' in menuItem) {
+    if ('label' in menuItem) {
+      var _Icon = menuItem.icon;
       return {
         key: "menu-item-".concat(i),
         content: menuItem.label,
-        elemBefore: /*#__PURE__*/React.createElement(menuItem.icon, {
+        elemBefore: _Icon ? /*#__PURE__*/React.createElement(_Icon, {
           label: menuItem.label
-        }),
+        }) : undefined,
         onClick: function onClick() {
           var _menuItem$onClick;
           (_menuItem$onClick = menuItem.onClick) === null || _menuItem$onClick === void 0 || _menuItem$onClick.call(menuItem);

package/dist/esm/ui/menu/SelectionExtensionDropdownItem.js

@@ -21,6 +21,7 @@ var styles = {
   lozenge: "_18u01b66 _1o9zidpf"
 };
 export var SelectionExtensionDropdownItem = function SelectionExtensionDropdownItem(_ref) {
+  var _dropdownItem$lozenge;
   var dropdownItem = _ref.dropdownItem;
   var IconComponent = dropdownItem.icon;
   var _useSelectionExtensio = useSelectionExtensionComponentContext(),
@@ -91,9 +92,33 @@ export var SelectionExtensionDropdownItem = function SelectionExtensionDropdownI
     size: iconSize,
     label: ""
   }) : undefined;
+  var lozengeLabel = (_dropdownItem$lozenge = dropdownItem.lozenge) === null || _dropdownItem$lozenge === void 0 ? void 0 : _dropdownItem$lozenge.label;
+  var elemAfterText = lozengeLabel ? /*#__PURE__*/React.createElement(Lozenge, {
+    appearance: fg('confluence_fronend_labels_categorization_migration') ? 'discovery' : 'new'
+  }, lozengeLabel) : undefined;
   var elemBeforeIcon = iconElement && extensionLocation === 'block-menu' ? /*#__PURE__*/React.createElement("span", {
     className: ax([styles.svgOverflow])
   }, iconElement) : iconElement;
+  if (fg('platform_editor_block_menu_v2_patch_2')) {
+    return /*#__PURE__*/React.createElement(ToolbarTooltip, {
+      content: isTruncated ? dropdownItem.label : null,
+      position: "top"
+    }, /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
+      elemBefore: elemBeforeIcon,
+      elemAfterText: elemAfterText,
+      onClick: handleClick,
+      isDisabled: dropdownItem.isDisabled,
+      testId: EXTENSION_MENU_ITEM_TEST_ID
+    }, /*#__PURE__*/React.createElement(Box, {
+      as: "span",
+      xcss: !elemAfterText && fg('platform_editor_block_menu_v2_patch_5') ? styles.contentWrapperWithJustifyContent : styles.contentWrapper,
+      onMouseOver: handleMouseEnter
+    }, /*#__PURE__*/React.createElement(Box, {
+      as: "span",
+      xcss: styles.label,
+      ref: labelRef
+    }, dropdownItem.label))));
+  }
   return /*#__PURE__*/React.createElement(ToolbarTooltip, {
     content: isTruncated ? dropdownItem.label : null,
     position: "top"

package/dist/esm/ui/menu/SelectionExtensionNestedDropdownMenu.compiled.css

@@ -0,0 +1 @@
+._18u012x7{margin-left:var(--ds-space-075,6px)}

package/dist/esm/ui/menu/SelectionExtensionNestedDropdownMenu.js

@@ -1,10 +1,19 @@
+/* SelectionExtensionNestedDropdownMenu.tsx generated by @compiled/babel-plugin v0.39.1 */
+import "./SelectionExtensionNestedDropdownMenu.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import { EXTENSION_MENU_ITEM_TEST_ID } from '@atlaskit/editor-common/block-menu';
 import { ToolbarDropdownItemSection, ToolbarNestedDropdownMenu } from '@atlaskit/editor-toolbar';
 import ChevronRightIcon from '@atlaskit/icon/core/chevron-right';
+import Lozenge from '@atlaskit/lozenge';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { Box } from '@atlaskit/primitives/compiled';
 import { useSelectionExtensionComponentContext } from '../SelectionExtensionComponentContext';
 import { SelectionExtensionDropdownItem } from './SelectionExtensionDropdownItem';
+var styles = {
+  lozenge: "_18u012x7"
+};
 var ChildItems = function ChildItems(_ref) {
   var nestedDropdownMenu = _ref.nestedDropdownMenu;
   var childItems = nestedDropdownMenu.getMenuItems();
@@ -16,6 +25,7 @@ var ChildItems = function ChildItems(_ref) {
   }));
 };
 export var SelectionExtensionNestedDropdownMenu = function SelectionExtensionNestedDropdownMenu(_ref2) {
+  var _nestedDropdownMenu$l;
   var nestedDropdownMenu = _ref2.nestedDropdownMenu;
   var IconComponent = nestedDropdownMenu.icon;
   var _useSelectionExtensio = useSelectionExtensionComponentContext(),
@@ -39,9 +49,17 @@ export var SelectionExtensionNestedDropdownMenu = function SelectionExtensionNes
       }
     });
   };
+  var lozengeLabel = (_nestedDropdownMenu$l = nestedDropdownMenu.lozenge) === null || _nestedDropdownMenu$l === void 0 ? void 0 : _nestedDropdownMenu$l.label;
+  var elemAfterText = lozengeLabel && fg('platform_editor_block_menu_v2_patch_2') ? /*#__PURE__*/React.createElement(Box, {
+    as: "span",
+    xcss: styles.lozenge
+  }, /*#__PURE__*/React.createElement(Lozenge, {
+    appearance: fg('confluence_fronend_labels_categorization_migration') ? 'discovery' : 'new'
+  }, lozengeLabel)) : undefined;
   return /*#__PURE__*/React.createElement(ToolbarNestedDropdownMenu, {
     testId: EXTENSION_MENU_ITEM_TEST_ID,
     text: nestedDropdownMenu.label,
+    elemAfterText: elemAfterText,
     elemBefore: IconComponent ? /*#__PURE__*/React.createElement(IconComponent, {
       label: "",
       size: "small"

package/dist/esm/ui/toolbar-components/MenuItem.js

@@ -42,10 +42,10 @@ export var MenuItem = function MenuItem(_ref) {
     var Icon = extension.icon;
     return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
       key: extension.label,
-      elemBefore: /*#__PURE__*/React.createElement(Icon, {
+      elemBefore: Icon ? /*#__PURE__*/React.createElement(Icon, {
         size: "small",
         label: ""
-      }),
+      }) : undefined,
       onClick: onClickHandle(extension),
       isDisabled: extension.isDisabled
     }, extension.label, extension.lozenge && /*#__PURE__*/React.createElement(Box, {

package/dist/esm/ui/utils/registerBlockMenuItems.js

@@ -1,11 +1,18 @@
 import React from 'react';
-import { TRANSFORM_MENU_SECTION, BLOCK_ACTIONS_FEATURED_EXTENSION_SLOT_MENU_ITEM, TRANSFORM_MENU_SECTION_RANK, TRANSFORM_CREATE_MENU_SECTION, TRANSFORM_CREATE_MENU_SECTION_RANK, TRANSFORM_DEFAULT_EXTENSION_SLOT_MENU_ITEM } from '@atlaskit/editor-common/block-menu';
+import { TRANSFORM_MENU_SECTION, TRANSFORM_MENU_SECTION_RANK, BLOCK_ACTIONS_FEATURED_EXTENSION_SLOT_MENU_ITEM, BLOCK_ACTIONS_FEATURED_EXTENSION_ITEM_RANK, MAIN_BLOCK_MENU_SECTION_RANK, TRANSFORM_CREATE_MENU_SECTION, TRANSFORM_CREATE_MENU_SECTION_RANK, TRANSFORM_DEFAULT_EXTENSION_SLOT_MENU_ITEM } from '@atlaskit/editor-common/block-menu';
+import { ToolbarDropdownItemSection } from '@atlaskit/editor-toolbar';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { SelectionExtensionMenuItems } from '../menu/SelectionExtensionMenuItems';
 import { SelectionExtensionComponentContextProvider } from '../SelectionExtensionComponentContext';
+/**
+ * Registers first-party selection extension menu items with the block menu plugin.
+ */
 export function registerBlockMenuItems(_ref) {
   var extensionList = _ref.extensionList,
     api = _ref.api,
     editorViewRef = _ref.editorViewRef;
+  var componentsToRegister = [];
+  var registeredFeaturedSectionKeys = new Set();
   extensionList.forEach(function (_ref2) {
     var source = _ref2.source,
       key = _ref2.key,
@@ -16,12 +23,68 @@ export function registerBlockMenuItems(_ref) {
     if (!(api !== null && api !== void 0 && api.blockMenu)) {
       return;
     }
-    var componentsToRegister = [];
 
-    // Use placement from BlockMenuExtensionConfiguration
-    // Featured placement: register under TRANSFORM_MENU_SECTION
-    // Default placement: register under TRANSFORM_CREATE_MENU_SECTION
-    if (blockMenu.placement === 'featured') {
+    /**
+     * Renders the registered selection-extension menu items with the correct block-menu context.
+     */
+    var makeItemComponent = function makeItemComponent() {
+      var editorView = editorViewRef === null || editorViewRef === void 0 ? void 0 : editorViewRef.current;
+      if (!editorView) {
+        return null;
+      }
+      return /*#__PURE__*/React.createElement(SelectionExtensionComponentContextProvider
+      // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
+      , {
+        value: {
+          api: api,
+          editorView: editorView,
+          extensionKey: key,
+          extensionSource: source,
+          extensionLocation: 'block-menu'
+        }
+      }, /*#__PURE__*/React.createElement(SelectionExtensionMenuItems, {
+        getMenuItems: blockMenu.getMenuItems
+      }));
+    };
+    if (blockMenu.placement === 'featured-section' && fg('platform_editor_block_menu_v2_patch_2')) {
+      // Block menu sections do not support isHidden. Check menu items before registering
+      // the section to avoid rendering an orphan separator when there are no items.
+      if (blockMenu.getMenuItems().length === 0 || !blockMenu.sectionKey) {
+        return;
+      }
+      var sectionRank = MAIN_BLOCK_MENU_SECTION_RANK[blockMenu.sectionKey];
+      if (sectionRank === undefined) {
+        return;
+      }
+
+      // Register as its own top-level section with a separator
+      if (!registeredFeaturedSectionKeys.has(blockMenu.sectionKey)) {
+        componentsToRegister.push({
+          type: 'block-menu-section',
+          key: blockMenu.sectionKey,
+          rank: sectionRank,
+          component: function component(_ref3) {
+            var children = _ref3.children;
+            return /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, {
+              hasSeparator: true
+            }, children);
+          }
+        });
+        registeredFeaturedSectionKeys.add(blockMenu.sectionKey);
+      }
+      componentsToRegister.push({
+        type: 'block-menu-item',
+        key: "selection-extension-".concat(key),
+        parent: {
+          type: 'block-menu-section',
+          key: blockMenu.sectionKey,
+          rank: BLOCK_ACTIONS_FEATURED_EXTENSION_ITEM_RANK[BLOCK_ACTIONS_FEATURED_EXTENSION_SLOT_MENU_ITEM.key]
+        },
+        component: makeItemComponent
+      });
+    } else if (blockMenu.placement === 'featured' || blockMenu.placement === 'featured-section' && !fg('platform_editor_block_menu_v2_patch_2')) {
+      // Register as an item directly under TRANSFORM_MENU_SECTION
+      // (also used as fallback for featured-section when gate is off)
       componentsToRegister.push({
         type: 'block-menu-item',
         key: "selection-extension-".concat(key),
@@ -30,27 +93,10 @@ export function registerBlockMenuItems(_ref) {
           key: TRANSFORM_MENU_SECTION.key,
           rank: TRANSFORM_MENU_SECTION_RANK[BLOCK_ACTIONS_FEATURED_EXTENSION_SLOT_MENU_ITEM.key]
         },
-        component: function component() {
-          var editorView = editorViewRef === null || editorViewRef === void 0 ? void 0 : editorViewRef.current;
-          if (!editorView) {
-            return null;
-          }
-          return /*#__PURE__*/React.createElement(SelectionExtensionComponentContextProvider
-          // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
-          , {
-            value: {
-              api: api,
-              editorView: editorView,
-              extensionKey: key,
-              extensionSource: source,
-              extensionLocation: 'block-menu'
-            }
-          }, /*#__PURE__*/React.createElement(SelectionExtensionMenuItems, {
-            getMenuItems: blockMenu.getMenuItems
-          }));
-        }
+        component: makeItemComponent
       });
     } else {
+      // Default: register under TRANSFORM_CREATE_MENU_SECTION
       componentsToRegister.push({
         type: 'block-menu-item',
         key: "selection-extension-".concat(key),
@@ -62,29 +108,12 @@ export function registerBlockMenuItems(_ref) {
           key: TRANSFORM_CREATE_MENU_SECTION.key,
           rank: TRANSFORM_CREATE_MENU_SECTION_RANK[TRANSFORM_DEFAULT_EXTENSION_SLOT_MENU_ITEM.key]
         },
-        component: function component() {
-          var editorView = editorViewRef === null || editorViewRef === void 0 ? void 0 : editorViewRef.current;
-          if (!editorView) {
-            return null;
-          }
-          return /*#__PURE__*/React.createElement(SelectionExtensionComponentContextProvider
-          // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
-          , {
-            value: {
-              api: api,
-              editorView: editorView,
-              extensionKey: key,
-              extensionSource: source,
-              extensionLocation: 'block-menu'
-            }
-          }, /*#__PURE__*/React.createElement(SelectionExtensionMenuItems, {
-            getMenuItems: blockMenu.getMenuItems
-          }));
-        }
+        component: makeItemComponent
       });
     }
-    if (componentsToRegister.length > 0) {
-      api.blockMenu.actions.registerBlockMenuComponents(componentsToRegister);
-    }
   });
+  if (componentsToRegister.length > 0) {
+    var _api$blockMenu;
+    api === null || api === void 0 || (_api$blockMenu = api.blockMenu) === null || _api$blockMenu === void 0 || _api$blockMenu.actions.registerBlockMenuComponents(componentsToRegister);
+  }
 }

package/dist/types/types/index.d.ts

@@ -1,6 +1,6 @@
 import type { ComponentType, PropsWithChildren } from 'react';
 import type { ADFEntity } from '@atlaskit/adf-utils/types';
-import type { BlockMenuPlacement } from '@atlaskit/editor-common/block-menu';
+import type { BLOCK_ACTIONS_FEATURED_EXTENSION_SECTION_KEYS, BlockMenuPlacement } from '@atlaskit/editor-common/block-menu';
 import type { MenuItem } from '@atlaskit/editor-common/ui-menu';
 import type { ViewMode } from '@atlaskit/editor-plugin-editor-viewmode';
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
@@ -133,15 +133,28 @@ export type ToolbarExtensionConfiguration = {
     getMenuItems?: GetMenuItemsFn;
     getToolbarItem?: GetToolbarItemFn;
 };
-export type BlockMenuExtensionConfiguration = {
+type BlockMenuFeaturedSectionKey = (typeof BLOCK_ACTIONS_FEATURED_EXTENSION_SECTION_KEYS)[number];
+type BlockMenuExtensionConfigurationBase = {
     getMenuItems: GetMenuItemsFn;
+};
+export type BlockMenuExtensionConfiguration = (BlockMenuExtensionConfigurationBase & {
+    /**
+     * Items are registered as their own top-level section with a separator above.
+     */
+    placement: 'featured-section';
+    /**
+     * Must be included in BLOCK_ACTIONS_FEATURED_EXTENSION_SECTION_KEYS and ranked in MAIN_BLOCK_MENU_SECTION_RANK.
+     */
+    sectionKey: BlockMenuFeaturedSectionKey;
+}) | (BlockMenuExtensionConfigurationBase & {
     /**
      * Optional placement hint to control where the menu items appear in the block menu
      * - 'default' (or undefined): Items appear in their normal nested location under create section
      * - 'featured': Items are promoted to top-level alongside the "Turn into" menu
      */
-    placement?: BlockMenuPlacement;
-};
+    placement?: Exclude<BlockMenuPlacement, 'featured-section'>;
+    sectionKey?: never;
+});
 export type ExtensionToolbarItemConfiguration = {
     icon: ComponentType<PropsWithChildren<{
         label: string;
@@ -159,7 +172,7 @@ export type ExtensionToolbarItemConfiguration = {
  * Common fields applicable to all extension menu items
  */
 type ExtensionMenuItemBaseConfiguration = {
-    icon: ComponentType<PropsWithChildren<{
+    icon?: ComponentType<PropsWithChildren<{
         label: string;
         size?: 'small' | 'medium';
     }>>;
@@ -169,6 +182,12 @@ type ExtensionMenuItemBaseConfiguration = {
      */
     key?: string;
     label: string;
+    /**
+     * Optional lozenge to display next to the label in the menu
+     */
+    lozenge?: {
+        label: string;
+    };
 };
 /**
  * Fields for a dropdown item (i.e., an item that does not have further nested menu items)
@@ -180,12 +199,6 @@ type ExtensionDropdownItemFields = {
      * Used for forge app extensions that need to render custom UI when selected from the block menu.
      */
     contentComponent?: ComponentType<SelectionExtensionComponentProps>;
-    /**
-     * Optional lozenge to display next to the label in the menu
-     */
-    lozenge?: {
-        label: string;
-    };
     onClick?: () => void;
 };
 /**

package/dist/types/ui/utils/registerBlockMenuItems.d.ts

@@ -9,5 +9,8 @@ type RegisterBlockMenuItemsOptions = {
     };
     extensionList: ExtensionConfiguration[];
 };
+/**
+ * Registers first-party selection extension menu items with the block menu plugin.
+ */
 export declare function registerBlockMenuItems({ extensionList, api, editorViewRef, }: RegisterBlockMenuItemsOptions): void;
 export {};

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

@@ -1,6 +1,6 @@
 import type { ComponentType, PropsWithChildren } from 'react';
 import type { ADFEntity } from '@atlaskit/adf-utils/types';
-import type { BlockMenuPlacement } from '@atlaskit/editor-common/block-menu';
+import type { BLOCK_ACTIONS_FEATURED_EXTENSION_SECTION_KEYS, BlockMenuPlacement } from '@atlaskit/editor-common/block-menu';
 import type { MenuItem } from '@atlaskit/editor-common/ui-menu';
 import type { ViewMode } from '@atlaskit/editor-plugin-editor-viewmode';
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
@@ -133,15 +133,28 @@ export type ToolbarExtensionConfiguration = {
     getMenuItems?: GetMenuItemsFn;
     getToolbarItem?: GetToolbarItemFn;
 };
-export type BlockMenuExtensionConfiguration = {
+type BlockMenuFeaturedSectionKey = (typeof BLOCK_ACTIONS_FEATURED_EXTENSION_SECTION_KEYS)[number];
+type BlockMenuExtensionConfigurationBase = {
     getMenuItems: GetMenuItemsFn;
+};
+export type BlockMenuExtensionConfiguration = (BlockMenuExtensionConfigurationBase & {
+    /**
+     * Items are registered as their own top-level section with a separator above.
+     */
+    placement: 'featured-section';
+    /**
+     * Must be included in BLOCK_ACTIONS_FEATURED_EXTENSION_SECTION_KEYS and ranked in MAIN_BLOCK_MENU_SECTION_RANK.
+     */
+    sectionKey: BlockMenuFeaturedSectionKey;
+}) | (BlockMenuExtensionConfigurationBase & {
     /**
      * Optional placement hint to control where the menu items appear in the block menu
      * - 'default' (or undefined): Items appear in their normal nested location under create section
      * - 'featured': Items are promoted to top-level alongside the "Turn into" menu
      */
-    placement?: BlockMenuPlacement;
-};
+    placement?: Exclude<BlockMenuPlacement, 'featured-section'>;
+    sectionKey?: never;
+});
 export type ExtensionToolbarItemConfiguration = {
     icon: ComponentType<PropsWithChildren<{
         label: string;
@@ -159,7 +172,7 @@ export type ExtensionToolbarItemConfiguration = {
  * Common fields applicable to all extension menu items
  */
 type ExtensionMenuItemBaseConfiguration = {
-    icon: ComponentType<PropsWithChildren<{
+    icon?: ComponentType<PropsWithChildren<{
         label: string;
         size?: 'small' | 'medium';
     }>>;
@@ -169,6 +182,12 @@ type ExtensionMenuItemBaseConfiguration = {
      */
     key?: string;
     label: string;
+    /**
+     * Optional lozenge to display next to the label in the menu
+     */
+    lozenge?: {
+        label: string;
+    };
 };
 /**
  * Fields for a dropdown item (i.e., an item that does not have further nested menu items)
@@ -180,12 +199,6 @@ type ExtensionDropdownItemFields = {
      * Used for forge app extensions that need to render custom UI when selected from the block menu.
      */
     contentComponent?: ComponentType<SelectionExtensionComponentProps>;
-    /**
-     * Optional lozenge to display next to the label in the menu
-     */
-    lozenge?: {
-        label: string;
-    };
     onClick?: () => void;
 };
 /**

package/dist/types-ts4.5/ui/utils/registerBlockMenuItems.d.ts

@@ -9,5 +9,8 @@ type RegisterBlockMenuItemsOptions = {
     };
     extensionList: ExtensionConfiguration[];
 };
+/**
+ * Registers first-party selection extension menu items with the block menu plugin.
+ */
 export declare function registerBlockMenuItems({ extensionList, api, editorViewRef, }: RegisterBlockMenuItemsOptions): void;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-selection-extension",
-	"version": "13.2.0",
+	"version": "13.3.0",
 	"description": "editor-plugin-selection-extension plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -36,8 +36,8 @@
 		"@atlaskit/css": "^0.19.0",
 		"@atlaskit/editor-json-transformer": "^8.31.0",
 		"@atlaskit/editor-plugin-analytics": "^10.0.0",
-		"@atlaskit/editor-plugin-block-controls": "^11.2.0",
-		"@atlaskit/editor-plugin-block-menu": "^9.1.0",
+		"@atlaskit/editor-plugin-block-controls": "^11.4.0",
+		"@atlaskit/editor-plugin-block-menu": "^9.2.0",
 		"@atlaskit/editor-plugin-editor-viewmode": "^12.1.0",
 		"@atlaskit/editor-plugin-editor-viewmode-effects": "^10.1.0",
 		"@atlaskit/editor-plugin-primary-toolbar": "^11.1.0",
@@ -45,14 +45,14 @@
 		"@atlaskit/editor-plugin-toolbar": "^7.3.0",
 		"@atlaskit/editor-plugin-user-preferences": "^8.2.0",
 		"@atlaskit/editor-prosemirror": "^7.3.0",
-		"@atlaskit/editor-shared-styles": "^3.10.0",
-		"@atlaskit/editor-tables": "^2.9.0",
-		"@atlaskit/editor-toolbar": "^1.2.0",
+		"@atlaskit/editor-shared-styles": "^3.11.0",
+		"@atlaskit/editor-tables": "^2.10.0",
+		"@atlaskit/editor-toolbar": "^1.4.0",
 		"@atlaskit/icon": "^34.5.0",
 		"@atlaskit/lozenge": "^13.8.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/primitives": "^19.0.0",
-		"@atlaskit/tmp-editor-statsig": "^80.0.0",
+		"@atlaskit/tmp-editor-statsig": "^80.3.0",
 		"@atlaskit/tokens": "^13.0.0",
 		"@babel/runtime": "^7.0.0",
 		"lodash": "^4.17.21",
@@ -117,6 +117,9 @@
 		"platform_editor_block_menu_v2_patch_5": {
 			"type": "boolean"
 		},
+		"platform_editor_block_menu_v2_patch_2": {
+			"type": "boolean"
+		},
 		"confluence_fronend_labels_categorization_migration": {
 			"type": "boolean"
 		}