@atlaskit/editor-plugin-selection-extension 9.0.1 → 9.0.3

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/editor-plugin-selection-extension
 
+## 9.0.3
+
+### Patch Changes
+
+- [`5a3efdfff9617`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/5a3efdfff9617) -
+  EDITOR-3911 Fix selection extension plugin to use preserved selection for block menu actions
+- Updated dependencies
+
+## 9.0.2
+
+### Patch Changes
+
+- [`609229c9d51fd`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/609229c9d51fd) -
+  EDITOR-2772 Implement new rendering of block menu selection extensions
+- Updated dependencies
+
 ## 9.0.1
 
 ### Patch Changes

package/dist/cjs/pm-plugins/utils/index.js

@@ -4,10 +4,10 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getFragmentInfoFromSelection = void 0;
+exports.getFragmentInfoFromSelectionNew = exports.getFragmentInfoFromSelection = void 0;
 exports.getSelectionAdfInfo = getSelectionAdfInfo;
 exports.getSelectionAdfInfoNew = getSelectionAdfInfoNew;
-exports.getSelectionTextInfo = void 0;
+exports.getSelectionTextInfoNew = exports.getSelectionTextInfo = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _monitoring = require("@atlaskit/editor-common/monitoring");
 var _editorJsonTransformer = require("@atlaskit/editor-json-transformer");
@@ -51,10 +51,15 @@ var getSelectionInfoFromCellSelection = function getSelectionInfoFromCellSelecti
     nodePos: nodePos
   };
 };
+
+/**
+ * @private
+ * @deprecated use getFragmentInfoFromSelectionNew instead
+ */
 var getSelectionTextInfo = exports.getSelectionTextInfo = function getSelectionTextInfo(view, api) {
-  var _api$userPreferences, _api$selectionToolbar, _api$editorViewMode;
+  var _api$userPreferences, _api$editorViewMode;
   var currentSelection = view.state.selection;
-  var toolbarDocking = (0, _platformFeatureFlags.fg)('platform_editor_use_preferences_plugin') ? api === null || api === void 0 || (_api$userPreferences = api.userPreferences) === null || _api$userPreferences === void 0 || (_api$userPreferences = _api$userPreferences.sharedState.currentState()) === null || _api$userPreferences === void 0 || (_api$userPreferences = _api$userPreferences.preferences) === null || _api$userPreferences === void 0 ? void 0 : _api$userPreferences.toolbarDockingPosition : api === null || api === void 0 || (_api$selectionToolbar = api.selectionToolbar) === null || _api$selectionToolbar === void 0 || (_api$selectionToolbar = _api$selectionToolbar.sharedState) === null || _api$selectionToolbar === void 0 || (_api$selectionToolbar = _api$selectionToolbar.currentState()) === null || _api$selectionToolbar === void 0 ? void 0 : _api$selectionToolbar.toolbarDocking;
+  var toolbarDocking = api === null || api === void 0 || (_api$userPreferences = api.userPreferences) === null || _api$userPreferences === void 0 || (_api$userPreferences = _api$userPreferences.sharedState.currentState()) === null || _api$userPreferences === void 0 || (_api$userPreferences = _api$userPreferences.preferences) === null || _api$userPreferences === void 0 ? void 0 : _api$userPreferences.toolbarDockingPosition;
   var isEditMode = Boolean((api === null || api === void 0 || (_api$editorViewMode = api.editorViewMode) === null || _api$editorViewMode === void 0 || (_api$editorViewMode = _api$editorViewMode.sharedState.currentState()) === null || _api$editorViewMode === void 0 ? void 0 : _api$editorViewMode.mode) === 'edit');
   var shouldOffsetToolbarHeight = toolbarDocking === 'top' && isEditMode;
   var from = currentSelection.from,
@@ -71,6 +76,30 @@ var getSelectionTextInfo = exports.getSelectionTextInfo = function getSelectionT
     coords: coords
   };
 };
+var getSelectionTextInfoNew = exports.getSelectionTextInfoNew = function getSelectionTextInfoNew(selection, view, api) {
+  var _api$userPreferences2, _api$selectionToolbar, _api$editorViewMode2;
+  var toolbarDocking = (0, _platformFeatureFlags.fg)('platform_editor_use_preferences_plugin') ? api === null || api === void 0 || (_api$userPreferences2 = api.userPreferences) === null || _api$userPreferences2 === void 0 || (_api$userPreferences2 = _api$userPreferences2.sharedState.currentState()) === null || _api$userPreferences2 === void 0 || (_api$userPreferences2 = _api$userPreferences2.preferences) === null || _api$userPreferences2 === void 0 ? void 0 : _api$userPreferences2.toolbarDockingPosition : api === null || api === void 0 || (_api$selectionToolbar = api.selectionToolbar) === null || _api$selectionToolbar === void 0 || (_api$selectionToolbar = _api$selectionToolbar.sharedState) === null || _api$selectionToolbar === void 0 || (_api$selectionToolbar = _api$selectionToolbar.currentState()) === null || _api$selectionToolbar === void 0 ? void 0 : _api$selectionToolbar.toolbarDocking;
+  var isEditMode = Boolean((api === null || api === void 0 || (_api$editorViewMode2 = api.editorViewMode) === null || _api$editorViewMode2 === void 0 || (_api$editorViewMode2 = _api$editorViewMode2.sharedState.currentState()) === null || _api$editorViewMode2 === void 0 ? void 0 : _api$editorViewMode2.mode) === 'edit');
+  var shouldOffsetToolbarHeight = toolbarDocking === 'top' && isEditMode;
+  var from = selection.from,
+    to = selection.to;
+  var text = view.state.doc.textBetween(from, to, '\n');
+  var coords = (0, _getBoundingBoxFromSelection.getBoundingBoxFromSelection)(view, from, to, {
+    top: shouldOffsetToolbarHeight ? _editorSharedStyles.akEditorFullPageToolbarHeight : 0,
+    bottom: shouldOffsetToolbarHeight ? _editorSharedStyles.akEditorFullPageToolbarHeight : 0
+  });
+  return {
+    text: text,
+    from: from,
+    to: to,
+    coords: coords
+  };
+};
+
+/**
+ * @private
+ * @deprecated use getFragmentInfoFromSelectionNew instead
+ */
 var getFragmentInfoFromSelection = exports.getFragmentInfoFromSelection = function getFragmentInfoFromSelection(state) {
   var schema = state.schema,
     selection = state.selection;
@@ -93,6 +122,31 @@ var getFragmentInfoFromSelection = exports.getFragmentInfoFromSelection = functi
     selectedNodeAdf: selectedNodeAdf
   };
 };
+var getFragmentInfoFromSelectionNew = exports.getFragmentInfoFromSelectionNew = function getFragmentInfoFromSelectionNew(selection) {
+  var schema = selection.$from.doc.type.schema;
+  var slice = selection.content();
+  var newDoc;
+  try {
+    var doc = schema.node('doc', null, [schema.node('paragraph', null, [])]);
+    var transform = new _transform.Transform(doc);
+    newDoc = transform.replaceRange(0, 2, slice).doc;
+  } catch (error) {
+    newDoc = schema.nodes.doc.createChecked({}, _model.Fragment.empty);
+    (0, _monitoring.logException)(error, {
+      location: 'editor-plugin-selection-extension'
+    });
+  }
+  var serializer = new _editorJsonTransformer.JSONTransformer();
+  var selectedNodeAdf = serializer.encodeNode(newDoc);
+  return {
+    selectedNodeAdf: selectedNodeAdf
+  };
+};
+
+/**
+ * @private
+ * @deprecated use getSelectionAdfInfoNew instead
+ */
 function getSelectionAdfInfo(state) {
   var selection = state.selection;
   var selectionInfo = {

package/dist/cjs/selectionExtensionPlugin.js

@@ -112,6 +112,11 @@ var selectionExtensionPlugin = exports.selectionExtensionPlugin = function selec
           return null;
         }
         var state = editorViewRef.current.state;
+        if ((0, _expValEquals.expValEquals)('platform_editor_block_menu', 'isEnabled', true)) {
+          var _api$blockControls;
+          var selection = (api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 || (_api$blockControls = _api$blockControls.sharedState.currentState()) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.preservedSelection) || state.selection;
+          return (0, _utils.getSelectionAdfInfoNew)(selection);
+        }
         var _getSelectionAdfInfo = (0, _utils.getSelectionAdfInfo)(state),
           selectionRanges = _getSelectionAdfInfo.selectionRanges,
           selectedNodeAdf = _getSelectionAdfInfo.selectedNodeAdf;
@@ -125,6 +130,11 @@ var selectionExtensionPlugin = exports.selectionExtensionPlugin = function selec
           return null;
         }
         var state = editorViewRef.current.state;
+        if ((0, _expValEquals.expValEquals)('platform_editor_block_menu', 'isEnabled', true)) {
+          var _api$blockControls2;
+          var selection = (api === null || api === void 0 || (_api$blockControls2 = api.blockControls) === null || _api$blockControls2 === void 0 || (_api$blockControls2 = _api$blockControls2.sharedState.currentState()) === null || _api$blockControls2 === void 0 ? void 0 : _api$blockControls2.preservedSelection) || state.selection;
+          return (0, _utils.getFragmentInfoFromSelectionNew)(selection);
+        }
         var _getFragmentInfoFromS = (0, _utils.getFragmentInfoFromSelection)(state),
           selectedNodeAdf = _getFragmentInfoFromS.selectedNodeAdf;
         return {

package/dist/cjs/types/index.js

@@ -22,16 +22,17 @@ var SelectionExtensionActionTypes = exports.SelectionExtensionActionTypes = /*#_
  * Common fields applicable to all extension menu items
  */
 /**
- * Fields for a leaf menu item (i.e., an item that does not have nested menu items)
+ * Fields for a dropdown item (i.e., an item that does not have further nested menu items)
  */
 /**
- * Fields for a dropdown menu item (i.e., an item that has nested menu items)
+ * Fields for a nested dropdown menu (i.e., an menu item that has further nested menu items)
  */
 /**
- * A type which marks all fields from ExtensionMenuItemDropdownMenuConfiguration and ExtensionMenuItemLeafConfiguration
- * as never, ensuring that only one of the two can be present at a time to avoid misconfigurations
+ * This type represents either a dropdown item or a dropdown menu, but not both.
+ *
+ * We mark all fields of the other type as `never` to enforce this exclusivity.
  */
 /**
- * We intentionally only support leaf menu items nested within dropdown menu items so that there will
- * be at max two levels of nesting from extension menu items.
+ * We intentionally only support dropdown items nested within dropdown menus, i.e. no menus nested
+ * within menus – so there will be at max two levels of nesting from extension menu items
  */

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

@@ -0,0 +1,20 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SelectionExtensionDropdownItem = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _editorToolbar = require("@atlaskit/editor-toolbar");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+var SelectionExtensionDropdownItem = exports.SelectionExtensionDropdownItem = function SelectionExtensionDropdownItem(_ref) {
+  var dropdownItem = _ref.dropdownItem;
+  return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItem, {
+    elemBefore: dropdownItem.icon ? /*#__PURE__*/(0, _react.createElement)(dropdownItem.icon, {
+      label: ''
+    }) : undefined,
+    onClick: dropdownItem.onClick,
+    isDisabled: dropdownItem.isDisabled
+  }, dropdownItem.label);
+};

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

@@ -0,0 +1,37 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SelectionExtensionNestedDropdownMenu = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _editorToolbar = require("@atlaskit/editor-toolbar");
+var _chevronRight = _interopRequireDefault(require("@atlaskit/icon/core/chevron-right"));
+var _SelectionExtensionDropdownItem = require("./SelectionExtensionDropdownItem");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+var ChildItems = function ChildItems(_ref) {
+  var nestedDropdownMenu = _ref.nestedDropdownMenu;
+  var childItems = nestedDropdownMenu.getMenuItems();
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, childItems.map(function (dropdownItem) {
+    return /*#__PURE__*/_react.default.createElement(_SelectionExtensionDropdownItem.SelectionExtensionDropdownItem, {
+      key: dropdownItem.label,
+      dropdownItem: dropdownItem
+    });
+  }));
+};
+var SelectionExtensionNestedDropdownMenu = exports.SelectionExtensionNestedDropdownMenu = function SelectionExtensionNestedDropdownMenu(_ref2) {
+  var nestedDropdownMenu = _ref2.nestedDropdownMenu;
+  return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarNestedDropdownMenu, {
+    text: nestedDropdownMenu.label,
+    elemBefore: nestedDropdownMenu.icon ? /*#__PURE__*/(0, _react.createElement)(nestedDropdownMenu.icon, {
+      label: ''
+    }) : undefined,
+    elemAfter: /*#__PURE__*/_react.default.createElement(_chevronRight.default, {
+      label: 'nested menu'
+    })
+  }, /*#__PURE__*/_react.default.createElement(ChildItems, {
+    nestedDropdownMenu: nestedDropdownMenu
+  }));
+};

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

@@ -0,0 +1,30 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SelectionExtensionMenuItems = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _menuItems = require("../utils/menu-items");
+var _SelectionExtensionDropdownItem = require("./SelectionExtensionDropdownItem");
+var _SelectionExtensionDropdownMenu = require("./SelectionExtensionDropdownMenu");
+var SelectionExtensionMenuItems = exports.SelectionExtensionMenuItems = function SelectionExtensionMenuItems(_ref) {
+  var getMenuItems = _ref.getMenuItems;
+  var extensionMenuItems = getMenuItems();
+  if (!(extensionMenuItems !== null && extensionMenuItems !== void 0 && extensionMenuItems.length)) {
+    return null;
+  }
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, extensionMenuItems.map(function (item) {
+    if ((0, _menuItems.isNestedDropdownMenuConfiguration)(item)) {
+      return /*#__PURE__*/_react.default.createElement(_SelectionExtensionDropdownMenu.SelectionExtensionNestedDropdownMenu, {
+        key: item.label,
+        nestedDropdownMenu: item
+      });
+    }
+    return /*#__PURE__*/_react.default.createElement(_SelectionExtensionDropdownItem.SelectionExtensionDropdownItem, {
+      key: item.label,
+      dropdownItem: item
+    });
+  }));
+};

package/dist/cjs/ui/utils/menu-items.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isNestedDropdownMenuConfiguration = void 0;
+/**
+ * Type guard to check if the given configuration is for a dropdown menu.
+ *
+ * @param item - The menu item configuration to check, either menu item or dropdown menu
+ * @returns True if the item configuration is for a dropdown menu, false otherwise
+ */
+var isNestedDropdownMenuConfiguration = exports.isNestedDropdownMenuConfiguration = function isNestedDropdownMenuConfiguration(item) {
+  return 'getMenuItems' in item && typeof item.getMenuItems === 'function';
+};

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

@@ -7,8 +7,9 @@ Object.defineProperty(exports, "__esModule", {
 exports.registerBlockMenuItems = registerBlockMenuItems;
 var _react = _interopRequireDefault(require("react"));
 var _blockMenu = require("@atlaskit/editor-common/block-menu");
+var _SelectionExtensionMenuItems = require("../menu/SelectionExtensionMenuItems");
 function registerBlockMenuItems(extensionList, api) {
-  extensionList.forEach(function (_ref, index) {
+  extensionList.forEach(function (_ref) {
     var _api$blockMenu;
     var source = _ref.source,
       key = _ref.key,
@@ -25,8 +26,9 @@ function registerBlockMenuItems(extensionList, api) {
         rank: _blockMenu.TRANSFORM_MENU_ITEM_RANK[_blockMenu.TRANSFORM_CREATE_MENU_SECTION.key]
       },
       component: function component() {
-        // EDITOR-2772 implementation of rendering in next PR
-        return /*#__PURE__*/_react.default.createElement("div", null, "Placeholder");
+        return /*#__PURE__*/_react.default.createElement(_SelectionExtensionMenuItems.SelectionExtensionMenuItems, {
+          getMenuItems: blockMenu.getMenuItems
+        });
       }
     }]);
   });

package/dist/es2019/pm-plugins/utils/index.js

@@ -40,12 +40,17 @@ const getSelectionInfoFromCellSelection = selection => {
     nodePos
   };
 };
+
+/**
+ * @private
+ * @deprecated use getFragmentInfoFromSelectionNew instead
+ */
 export const getSelectionTextInfo = (view, api) => {
-  var _api$userPreferences, _api$userPreferences$, _api$userPreferences$2, _api$selectionToolbar, _api$selectionToolbar2, _api$selectionToolbar3, _api$editorViewMode, _api$editorViewMode$s;
+  var _api$userPreferences, _api$userPreferences$, _api$userPreferences$2, _api$editorViewMode, _api$editorViewMode$s;
   const {
     selection: currentSelection
   } = view.state;
-  const toolbarDocking = fg('platform_editor_use_preferences_plugin') ? api === null || api === void 0 ? void 0 : (_api$userPreferences = api.userPreferences) === null || _api$userPreferences === void 0 ? void 0 : (_api$userPreferences$ = _api$userPreferences.sharedState.currentState()) === null || _api$userPreferences$ === void 0 ? void 0 : (_api$userPreferences$2 = _api$userPreferences$.preferences) === null || _api$userPreferences$2 === void 0 ? void 0 : _api$userPreferences$2.toolbarDockingPosition : api === null || api === void 0 ? void 0 : (_api$selectionToolbar = api.selectionToolbar) === null || _api$selectionToolbar === void 0 ? void 0 : (_api$selectionToolbar2 = _api$selectionToolbar.sharedState) === null || _api$selectionToolbar2 === void 0 ? void 0 : (_api$selectionToolbar3 = _api$selectionToolbar2.currentState()) === null || _api$selectionToolbar3 === void 0 ? void 0 : _api$selectionToolbar3.toolbarDocking;
+  const toolbarDocking = api === null || api === void 0 ? void 0 : (_api$userPreferences = api.userPreferences) === null || _api$userPreferences === void 0 ? void 0 : (_api$userPreferences$ = _api$userPreferences.sharedState.currentState()) === null || _api$userPreferences$ === void 0 ? void 0 : (_api$userPreferences$2 = _api$userPreferences$.preferences) === null || _api$userPreferences$2 === void 0 ? void 0 : _api$userPreferences$2.toolbarDockingPosition;
   const isEditMode = Boolean((api === null || api === void 0 ? void 0 : (_api$editorViewMode = api.editorViewMode) === null || _api$editorViewMode === void 0 ? void 0 : (_api$editorViewMode$s = _api$editorViewMode.sharedState.currentState()) === null || _api$editorViewMode$s === void 0 ? void 0 : _api$editorViewMode$s.mode) === 'edit');
   const shouldOffsetToolbarHeight = toolbarDocking === 'top' && isEditMode;
   const {
@@ -64,6 +69,32 @@ export const getSelectionTextInfo = (view, api) => {
     coords
   };
 };
+export const getSelectionTextInfoNew = (selection, view, api) => {
+  var _api$userPreferences2, _api$userPreferences3, _api$userPreferences4, _api$selectionToolbar, _api$selectionToolbar2, _api$selectionToolbar3, _api$editorViewMode2, _api$editorViewMode2$;
+  const toolbarDocking = fg('platform_editor_use_preferences_plugin') ? api === null || api === void 0 ? void 0 : (_api$userPreferences2 = api.userPreferences) === null || _api$userPreferences2 === void 0 ? void 0 : (_api$userPreferences3 = _api$userPreferences2.sharedState.currentState()) === null || _api$userPreferences3 === void 0 ? void 0 : (_api$userPreferences4 = _api$userPreferences3.preferences) === null || _api$userPreferences4 === void 0 ? void 0 : _api$userPreferences4.toolbarDockingPosition : api === null || api === void 0 ? void 0 : (_api$selectionToolbar = api.selectionToolbar) === null || _api$selectionToolbar === void 0 ? void 0 : (_api$selectionToolbar2 = _api$selectionToolbar.sharedState) === null || _api$selectionToolbar2 === void 0 ? void 0 : (_api$selectionToolbar3 = _api$selectionToolbar2.currentState()) === null || _api$selectionToolbar3 === void 0 ? void 0 : _api$selectionToolbar3.toolbarDocking;
+  const isEditMode = Boolean((api === null || api === void 0 ? void 0 : (_api$editorViewMode2 = api.editorViewMode) === null || _api$editorViewMode2 === void 0 ? void 0 : (_api$editorViewMode2$ = _api$editorViewMode2.sharedState.currentState()) === null || _api$editorViewMode2$ === void 0 ? void 0 : _api$editorViewMode2$.mode) === 'edit');
+  const shouldOffsetToolbarHeight = toolbarDocking === 'top' && isEditMode;
+  const {
+    from,
+    to
+  } = selection;
+  const text = view.state.doc.textBetween(from, to, '\n');
+  const coords = getBoundingBoxFromSelection(view, from, to, {
+    top: shouldOffsetToolbarHeight ? akEditorFullPageToolbarHeight : 0,
+    bottom: shouldOffsetToolbarHeight ? akEditorFullPageToolbarHeight : 0
+  });
+  return {
+    text,
+    from,
+    to,
+    coords
+  };
+};
+
+/**
+ * @private
+ * @deprecated use getFragmentInfoFromSelectionNew instead
+ */
 export const getFragmentInfoFromSelection = state => {
   const {
     schema,
@@ -90,6 +121,33 @@ export const getFragmentInfoFromSelection = state => {
     selectedNodeAdf
   };
 };
+export const getFragmentInfoFromSelectionNew = selection => {
+  const {
+    schema
+  } = selection.$from.doc.type;
+  const slice = selection.content();
+  let newDoc;
+  try {
+    const doc = schema.node('doc', null, [schema.node('paragraph', null, [])]);
+    const transform = new Transform(doc);
+    newDoc = transform.replaceRange(0, 2, slice).doc;
+  } catch (error) {
+    newDoc = schema.nodes.doc.createChecked({}, Fragment.empty);
+    logException(error, {
+      location: 'editor-plugin-selection-extension'
+    });
+  }
+  const serializer = new JSONTransformer();
+  const selectedNodeAdf = serializer.encodeNode(newDoc);
+  return {
+    selectedNodeAdf
+  };
+};
+
+/**
+ * @private
+ * @deprecated use getSelectionAdfInfoNew instead
+ */
 export function getSelectionAdfInfo(state) {
   const selection = state.selection;
   let selectionInfo = {

package/dist/es2019/selectionExtensionPlugin.js

@@ -8,7 +8,7 @@ import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equ
 import { insertAdfAtEndOfDoc } from './pm-plugins/actions/insertAdfAtEndOfDoc';
 import { replaceWithAdf } from './pm-plugins/actions/replaceWithAdf';
 import { createPlugin, selectionExtensionPluginKey } from './pm-plugins/main';
-import { getFragmentInfoFromSelection, getSelectionAdfInfo, getSelectionTextInfo } from './pm-plugins/utils';
+import { getFragmentInfoFromSelection, getFragmentInfoFromSelectionNew, getSelectionAdfInfo, getSelectionAdfInfoNew, getSelectionTextInfo } from './pm-plugins/utils';
 import { SelectionExtensionActionTypes } from './types';
 import { SelectionExtensionComponentWrapper } from './ui/extension/SelectionExtensionComponentWrapper';
 import { getMenuItemExtensions, getToolbarItemExtensions } from './ui/extensions';
@@ -103,6 +103,11 @@ export const selectionExtensionPlugin = ({
         const {
           state
         } = editorViewRef.current;
+        if (expValEquals('platform_editor_block_menu', 'isEnabled', true)) {
+          var _api$blockControls, _api$blockControls$sh;
+          const selection = (api === null || api === void 0 ? void 0 : (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : (_api$blockControls$sh = _api$blockControls.sharedState.currentState()) === null || _api$blockControls$sh === void 0 ? void 0 : _api$blockControls$sh.preservedSelection) || state.selection;
+          return getSelectionAdfInfoNew(selection);
+        }
         const {
           selectionRanges,
           selectedNodeAdf
@@ -119,6 +124,11 @@ export const selectionExtensionPlugin = ({
         const {
           state
         } = editorViewRef.current;
+        if (expValEquals('platform_editor_block_menu', 'isEnabled', true)) {
+          var _api$blockControls2, _api$blockControls2$s;
+          const selection = (api === null || api === void 0 ? void 0 : (_api$blockControls2 = api.blockControls) === null || _api$blockControls2 === void 0 ? void 0 : (_api$blockControls2$s = _api$blockControls2.sharedState.currentState()) === null || _api$blockControls2$s === void 0 ? void 0 : _api$blockControls2$s.preservedSelection) || state.selection;
+          return getFragmentInfoFromSelectionNew(selection);
+        }
         const {
           selectedNodeAdf
         } = getFragmentInfoFromSelection(state);

package/dist/es2019/types/index.js

@@ -20,19 +20,20 @@ export let SelectionExtensionActionTypes = /*#__PURE__*/function (SelectionExten
  */
 
 /**
- * Fields for a leaf menu item (i.e., an item that does not have nested menu items)
+ * Fields for a dropdown item (i.e., an item that does not have further nested menu items)
  */
 
 /**
- * Fields for a dropdown menu item (i.e., an item that has nested menu items)
+ * Fields for a nested dropdown menu (i.e., an menu item that has further nested menu items)
  */
 
 /**
- * A type which marks all fields from ExtensionMenuItemDropdownMenuConfiguration and ExtensionMenuItemLeafConfiguration
- * as never, ensuring that only one of the two can be present at a time to avoid misconfigurations
+ * This type represents either a dropdown item or a dropdown menu, but not both.
+ *
+ * We mark all fields of the other type as `never` to enforce this exclusivity.
  */
 
 /**
- * We intentionally only support leaf menu items nested within dropdown menu items so that there will
- * be at max two levels of nesting from extension menu items.
+ * We intentionally only support dropdown items nested within dropdown menus, i.e. no menus nested
+ * within menus – so there will be at max two levels of nesting from extension menu items
  */

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

@@ -0,0 +1,13 @@
+import React, { createElement } from 'react';
+import { ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
+export const SelectionExtensionDropdownItem = ({
+  dropdownItem
+}) => {
+  return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
+    elemBefore: dropdownItem.icon ? /*#__PURE__*/createElement(dropdownItem.icon, {
+      label: ''
+    }) : undefined,
+    onClick: dropdownItem.onClick,
+    isDisabled: dropdownItem.isDisabled
+  }, dropdownItem.label);
+};

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

@@ -0,0 +1,28 @@
+import React, { createElement } from 'react';
+import { ToolbarNestedDropdownMenu } from '@atlaskit/editor-toolbar';
+import ChevronRightIcon from '@atlaskit/icon/core/chevron-right';
+import { SelectionExtensionDropdownItem } from './SelectionExtensionDropdownItem';
+const ChildItems = ({
+  nestedDropdownMenu
+}) => {
+  const childItems = nestedDropdownMenu.getMenuItems();
+  return /*#__PURE__*/React.createElement(React.Fragment, null, childItems.map(dropdownItem => /*#__PURE__*/React.createElement(SelectionExtensionDropdownItem, {
+    key: dropdownItem.label,
+    dropdownItem: dropdownItem
+  })));
+};
+export const SelectionExtensionNestedDropdownMenu = ({
+  nestedDropdownMenu
+}) => {
+  return /*#__PURE__*/React.createElement(ToolbarNestedDropdownMenu, {
+    text: nestedDropdownMenu.label,
+    elemBefore: nestedDropdownMenu.icon ? /*#__PURE__*/createElement(nestedDropdownMenu.icon, {
+      label: ''
+    }) : undefined,
+    elemAfter: /*#__PURE__*/React.createElement(ChevronRightIcon, {
+      label: 'nested menu'
+    })
+  }, /*#__PURE__*/React.createElement(ChildItems, {
+    nestedDropdownMenu: nestedDropdownMenu
+  }));
+};

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

@@ -0,0 +1,24 @@
+import React from 'react';
+import { isNestedDropdownMenuConfiguration } from '../utils/menu-items';
+import { SelectionExtensionDropdownItem } from './SelectionExtensionDropdownItem';
+import { SelectionExtensionNestedDropdownMenu } from './SelectionExtensionDropdownMenu';
+export const SelectionExtensionMenuItems = ({
+  getMenuItems
+}) => {
+  const extensionMenuItems = getMenuItems();
+  if (!(extensionMenuItems !== null && extensionMenuItems !== void 0 && extensionMenuItems.length)) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(React.Fragment, null, extensionMenuItems.map(item => {
+    if (isNestedDropdownMenuConfiguration(item)) {
+      return /*#__PURE__*/React.createElement(SelectionExtensionNestedDropdownMenu, {
+        key: item.label,
+        nestedDropdownMenu: item
+      });
+    }
+    return /*#__PURE__*/React.createElement(SelectionExtensionDropdownItem, {
+      key: item.label,
+      dropdownItem: item
+    });
+  }));
+};

package/dist/es2019/ui/utils/menu-items.js

@@ -0,0 +1,9 @@
+/**
+ * Type guard to check if the given configuration is for a dropdown menu.
+ *
+ * @param item - The menu item configuration to check, either menu item or dropdown menu
+ * @returns True if the item configuration is for a dropdown menu, false otherwise
+ */
+export const isNestedDropdownMenuConfiguration = item => {
+  return 'getMenuItems' in item && typeof item.getMenuItems === 'function';
+};

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

@@ -1,11 +1,12 @@
 import React from 'react';
 import { TRANSFORM_CREATE_MENU_SECTION, TRANSFORM_MENU_ITEM_RANK } from '@atlaskit/editor-common/block-menu';
+import { SelectionExtensionMenuItems } from '../menu/SelectionExtensionMenuItems';
 export function registerBlockMenuItems(extensionList, api) {
   extensionList.forEach(({
     source,
     key,
     blockMenu
-  }, index) => {
+  }) => {
     var _api$blockMenu;
     if (source !== 'first-party' || !blockMenu) {
       return;
@@ -19,8 +20,9 @@ export function registerBlockMenuItems(extensionList, api) {
         rank: TRANSFORM_MENU_ITEM_RANK[TRANSFORM_CREATE_MENU_SECTION.key]
       },
       component: () => {
-        // EDITOR-2772 implementation of rendering in next PR
-        return /*#__PURE__*/React.createElement("div", null, "Placeholder");
+        return /*#__PURE__*/React.createElement(SelectionExtensionMenuItems, {
+          getMenuItems: blockMenu.getMenuItems
+        });
       }
     }]);
   });

package/dist/esm/pm-plugins/utils/index.js

@@ -41,10 +41,15 @@ var getSelectionInfoFromCellSelection = function getSelectionInfoFromCellSelecti
     nodePos: nodePos
   };
 };
+
+/**
+ * @private
+ * @deprecated use getFragmentInfoFromSelectionNew instead
+ */
 export var getSelectionTextInfo = function getSelectionTextInfo(view, api) {
-  var _api$userPreferences, _api$selectionToolbar, _api$editorViewMode;
+  var _api$userPreferences, _api$editorViewMode;
   var currentSelection = view.state.selection;
-  var toolbarDocking = fg('platform_editor_use_preferences_plugin') ? api === null || api === void 0 || (_api$userPreferences = api.userPreferences) === null || _api$userPreferences === void 0 || (_api$userPreferences = _api$userPreferences.sharedState.currentState()) === null || _api$userPreferences === void 0 || (_api$userPreferences = _api$userPreferences.preferences) === null || _api$userPreferences === void 0 ? void 0 : _api$userPreferences.toolbarDockingPosition : api === null || api === void 0 || (_api$selectionToolbar = api.selectionToolbar) === null || _api$selectionToolbar === void 0 || (_api$selectionToolbar = _api$selectionToolbar.sharedState) === null || _api$selectionToolbar === void 0 || (_api$selectionToolbar = _api$selectionToolbar.currentState()) === null || _api$selectionToolbar === void 0 ? void 0 : _api$selectionToolbar.toolbarDocking;
+  var toolbarDocking = api === null || api === void 0 || (_api$userPreferences = api.userPreferences) === null || _api$userPreferences === void 0 || (_api$userPreferences = _api$userPreferences.sharedState.currentState()) === null || _api$userPreferences === void 0 || (_api$userPreferences = _api$userPreferences.preferences) === null || _api$userPreferences === void 0 ? void 0 : _api$userPreferences.toolbarDockingPosition;
   var isEditMode = Boolean((api === null || api === void 0 || (_api$editorViewMode = api.editorViewMode) === null || _api$editorViewMode === void 0 || (_api$editorViewMode = _api$editorViewMode.sharedState.currentState()) === null || _api$editorViewMode === void 0 ? void 0 : _api$editorViewMode.mode) === 'edit');
   var shouldOffsetToolbarHeight = toolbarDocking === 'top' && isEditMode;
   var from = currentSelection.from,
@@ -61,6 +66,30 @@ export var getSelectionTextInfo = function getSelectionTextInfo(view, api) {
     coords: coords
   };
 };
+export var getSelectionTextInfoNew = function getSelectionTextInfoNew(selection, view, api) {
+  var _api$userPreferences2, _api$selectionToolbar, _api$editorViewMode2;
+  var toolbarDocking = fg('platform_editor_use_preferences_plugin') ? api === null || api === void 0 || (_api$userPreferences2 = api.userPreferences) === null || _api$userPreferences2 === void 0 || (_api$userPreferences2 = _api$userPreferences2.sharedState.currentState()) === null || _api$userPreferences2 === void 0 || (_api$userPreferences2 = _api$userPreferences2.preferences) === null || _api$userPreferences2 === void 0 ? void 0 : _api$userPreferences2.toolbarDockingPosition : api === null || api === void 0 || (_api$selectionToolbar = api.selectionToolbar) === null || _api$selectionToolbar === void 0 || (_api$selectionToolbar = _api$selectionToolbar.sharedState) === null || _api$selectionToolbar === void 0 || (_api$selectionToolbar = _api$selectionToolbar.currentState()) === null || _api$selectionToolbar === void 0 ? void 0 : _api$selectionToolbar.toolbarDocking;
+  var isEditMode = Boolean((api === null || api === void 0 || (_api$editorViewMode2 = api.editorViewMode) === null || _api$editorViewMode2 === void 0 || (_api$editorViewMode2 = _api$editorViewMode2.sharedState.currentState()) === null || _api$editorViewMode2 === void 0 ? void 0 : _api$editorViewMode2.mode) === 'edit');
+  var shouldOffsetToolbarHeight = toolbarDocking === 'top' && isEditMode;
+  var from = selection.from,
+    to = selection.to;
+  var text = view.state.doc.textBetween(from, to, '\n');
+  var coords = getBoundingBoxFromSelection(view, from, to, {
+    top: shouldOffsetToolbarHeight ? akEditorFullPageToolbarHeight : 0,
+    bottom: shouldOffsetToolbarHeight ? akEditorFullPageToolbarHeight : 0
+  });
+  return {
+    text: text,
+    from: from,
+    to: to,
+    coords: coords
+  };
+};
+
+/**
+ * @private
+ * @deprecated use getFragmentInfoFromSelectionNew instead
+ */
 export var getFragmentInfoFromSelection = function getFragmentInfoFromSelection(state) {
   var schema = state.schema,
     selection = state.selection;
@@ -83,6 +112,31 @@ export var getFragmentInfoFromSelection = function getFragmentInfoFromSelection(
     selectedNodeAdf: selectedNodeAdf
   };
 };
+export var getFragmentInfoFromSelectionNew = function getFragmentInfoFromSelectionNew(selection) {
+  var schema = selection.$from.doc.type.schema;
+  var slice = selection.content();
+  var newDoc;
+  try {
+    var doc = schema.node('doc', null, [schema.node('paragraph', null, [])]);
+    var transform = new Transform(doc);
+    newDoc = transform.replaceRange(0, 2, slice).doc;
+  } catch (error) {
+    newDoc = schema.nodes.doc.createChecked({}, Fragment.empty);
+    logException(error, {
+      location: 'editor-plugin-selection-extension'
+    });
+  }
+  var serializer = new JSONTransformer();
+  var selectedNodeAdf = serializer.encodeNode(newDoc);
+  return {
+    selectedNodeAdf: selectedNodeAdf
+  };
+};
+
+/**
+ * @private
+ * @deprecated use getSelectionAdfInfoNew instead
+ */
 export function getSelectionAdfInfo(state) {
   var selection = state.selection;
   var selectionInfo = {

package/dist/esm/selectionExtensionPlugin.js

@@ -9,7 +9,7 @@ import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equ
 import { insertAdfAtEndOfDoc as _insertAdfAtEndOfDoc } from './pm-plugins/actions/insertAdfAtEndOfDoc';
 import { replaceWithAdf as _replaceWithAdf } from './pm-plugins/actions/replaceWithAdf';
 import { createPlugin, selectionExtensionPluginKey } from './pm-plugins/main';
-import { getFragmentInfoFromSelection, getSelectionAdfInfo, getSelectionTextInfo } from './pm-plugins/utils';
+import { getFragmentInfoFromSelection, getFragmentInfoFromSelectionNew, getSelectionAdfInfo, getSelectionAdfInfoNew, getSelectionTextInfo } from './pm-plugins/utils';
 import { SelectionExtensionActionTypes } from './types';
 import { SelectionExtensionComponentWrapper } from './ui/extension/SelectionExtensionComponentWrapper';
 import { getMenuItemExtensions, getToolbarItemExtensions } from './ui/extensions';
@@ -105,6 +105,11 @@ export var selectionExtensionPlugin = function selectionExtensionPlugin(_ref) {
           return null;
         }
         var state = editorViewRef.current.state;
+        if (expValEquals('platform_editor_block_menu', 'isEnabled', true)) {
+          var _api$blockControls;
+          var selection = (api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 || (_api$blockControls = _api$blockControls.sharedState.currentState()) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.preservedSelection) || state.selection;
+          return getSelectionAdfInfoNew(selection);
+        }
         var _getSelectionAdfInfo = getSelectionAdfInfo(state),
           selectionRanges = _getSelectionAdfInfo.selectionRanges,
           selectedNodeAdf = _getSelectionAdfInfo.selectedNodeAdf;
@@ -118,6 +123,11 @@ export var selectionExtensionPlugin = function selectionExtensionPlugin(_ref) {
           return null;
         }
         var state = editorViewRef.current.state;
+        if (expValEquals('platform_editor_block_menu', 'isEnabled', true)) {
+          var _api$blockControls2;
+          var selection = (api === null || api === void 0 || (_api$blockControls2 = api.blockControls) === null || _api$blockControls2 === void 0 || (_api$blockControls2 = _api$blockControls2.sharedState.currentState()) === null || _api$blockControls2 === void 0 ? void 0 : _api$blockControls2.preservedSelection) || state.selection;
+          return getFragmentInfoFromSelectionNew(selection);
+        }
         var _getFragmentInfoFromS = getFragmentInfoFromSelection(state),
           selectedNodeAdf = _getFragmentInfoFromS.selectedNodeAdf;
         return {

package/dist/esm/types/index.js

@@ -20,19 +20,20 @@ export var SelectionExtensionActionTypes = /*#__PURE__*/function (SelectionExten
  */
 
 /**
- * Fields for a leaf menu item (i.e., an item that does not have nested menu items)
+ * Fields for a dropdown item (i.e., an item that does not have further nested menu items)
  */
 
 /**
- * Fields for a dropdown menu item (i.e., an item that has nested menu items)
+ * Fields for a nested dropdown menu (i.e., an menu item that has further nested menu items)
  */
 
 /**
- * A type which marks all fields from ExtensionMenuItemDropdownMenuConfiguration and ExtensionMenuItemLeafConfiguration
- * as never, ensuring that only one of the two can be present at a time to avoid misconfigurations
+ * This type represents either a dropdown item or a dropdown menu, but not both.
+ *
+ * We mark all fields of the other type as `never` to enforce this exclusivity.
  */
 
 /**
- * We intentionally only support leaf menu items nested within dropdown menu items so that there will
- * be at max two levels of nesting from extension menu items.
+ * We intentionally only support dropdown items nested within dropdown menus, i.e. no menus nested
+ * within menus – so there will be at max two levels of nesting from extension menu items
  */

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

@@ -0,0 +1,12 @@
+import React, { createElement } from 'react';
+import { ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
+export var SelectionExtensionDropdownItem = function SelectionExtensionDropdownItem(_ref) {
+  var dropdownItem = _ref.dropdownItem;
+  return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
+    elemBefore: dropdownItem.icon ? /*#__PURE__*/createElement(dropdownItem.icon, {
+      label: ''
+    }) : undefined,
+    onClick: dropdownItem.onClick,
+    isDisabled: dropdownItem.isDisabled
+  }, dropdownItem.label);
+};

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

@@ -0,0 +1,28 @@
+import React, { createElement } from 'react';
+import { ToolbarNestedDropdownMenu } from '@atlaskit/editor-toolbar';
+import ChevronRightIcon from '@atlaskit/icon/core/chevron-right';
+import { SelectionExtensionDropdownItem } from './SelectionExtensionDropdownItem';
+var ChildItems = function ChildItems(_ref) {
+  var nestedDropdownMenu = _ref.nestedDropdownMenu;
+  var childItems = nestedDropdownMenu.getMenuItems();
+  return /*#__PURE__*/React.createElement(React.Fragment, null, childItems.map(function (dropdownItem) {
+    return /*#__PURE__*/React.createElement(SelectionExtensionDropdownItem, {
+      key: dropdownItem.label,
+      dropdownItem: dropdownItem
+    });
+  }));
+};
+export var SelectionExtensionNestedDropdownMenu = function SelectionExtensionNestedDropdownMenu(_ref2) {
+  var nestedDropdownMenu = _ref2.nestedDropdownMenu;
+  return /*#__PURE__*/React.createElement(ToolbarNestedDropdownMenu, {
+    text: nestedDropdownMenu.label,
+    elemBefore: nestedDropdownMenu.icon ? /*#__PURE__*/createElement(nestedDropdownMenu.icon, {
+      label: ''
+    }) : undefined,
+    elemAfter: /*#__PURE__*/React.createElement(ChevronRightIcon, {
+      label: 'nested menu'
+    })
+  }, /*#__PURE__*/React.createElement(ChildItems, {
+    nestedDropdownMenu: nestedDropdownMenu
+  }));
+};

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

@@ -0,0 +1,23 @@
+import React from 'react';
+import { isNestedDropdownMenuConfiguration } from '../utils/menu-items';
+import { SelectionExtensionDropdownItem } from './SelectionExtensionDropdownItem';
+import { SelectionExtensionNestedDropdownMenu } from './SelectionExtensionDropdownMenu';
+export var SelectionExtensionMenuItems = function SelectionExtensionMenuItems(_ref) {
+  var getMenuItems = _ref.getMenuItems;
+  var extensionMenuItems = getMenuItems();
+  if (!(extensionMenuItems !== null && extensionMenuItems !== void 0 && extensionMenuItems.length)) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(React.Fragment, null, extensionMenuItems.map(function (item) {
+    if (isNestedDropdownMenuConfiguration(item)) {
+      return /*#__PURE__*/React.createElement(SelectionExtensionNestedDropdownMenu, {
+        key: item.label,
+        nestedDropdownMenu: item
+      });
+    }
+    return /*#__PURE__*/React.createElement(SelectionExtensionDropdownItem, {
+      key: item.label,
+      dropdownItem: item
+    });
+  }));
+};

package/dist/esm/ui/utils/menu-items.js

@@ -0,0 +1,9 @@
+/**
+ * Type guard to check if the given configuration is for a dropdown menu.
+ *
+ * @param item - The menu item configuration to check, either menu item or dropdown menu
+ * @returns True if the item configuration is for a dropdown menu, false otherwise
+ */
+export var isNestedDropdownMenuConfiguration = function isNestedDropdownMenuConfiguration(item) {
+  return 'getMenuItems' in item && typeof item.getMenuItems === 'function';
+};

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

@@ -1,7 +1,8 @@
 import React from 'react';
 import { TRANSFORM_CREATE_MENU_SECTION, TRANSFORM_MENU_ITEM_RANK } from '@atlaskit/editor-common/block-menu';
+import { SelectionExtensionMenuItems } from '../menu/SelectionExtensionMenuItems';
 export function registerBlockMenuItems(extensionList, api) {
-  extensionList.forEach(function (_ref, index) {
+  extensionList.forEach(function (_ref) {
     var _api$blockMenu;
     var source = _ref.source,
       key = _ref.key,
@@ -18,8 +19,9 @@ export function registerBlockMenuItems(extensionList, api) {
         rank: TRANSFORM_MENU_ITEM_RANK[TRANSFORM_CREATE_MENU_SECTION.key]
       },
       component: function component() {
-        // EDITOR-2772 implementation of rendering in next PR
-        return /*#__PURE__*/React.createElement("div", null, "Placeholder");
+        return /*#__PURE__*/React.createElement(SelectionExtensionMenuItems, {
+          getMenuItems: blockMenu.getMenuItems
+        });
       }
     }]);
   });

package/dist/types/pm-plugins/utils/index.d.ts

@@ -12,10 +12,26 @@ type SelectionInfo = {
     selectedNodeAdf: ADFEntity;
     selectionRanges?: SelectionRange[];
 };
+/**
+ * @private
+ * @deprecated use getFragmentInfoFromSelectionNew instead
+ */
 export declare const getSelectionTextInfo: (view: EditorView, api?: ExtractInjectionAPI<SelectionExtensionPlugin>) => SelectionExtensionSelectionInfo;
+export declare const getSelectionTextInfoNew: (selection: Selection, view: EditorView, api?: ExtractInjectionAPI<SelectionExtensionPlugin>) => SelectionExtensionSelectionInfo;
+/**
+ * @private
+ * @deprecated use getFragmentInfoFromSelectionNew instead
+ */
 export declare const getFragmentInfoFromSelection: (state: EditorState) => {
     selectedNodeAdf: ADFEntity;
 };
+export declare const getFragmentInfoFromSelectionNew: (selection: Selection) => {
+    selectedNodeAdf: ADFEntity;
+};
+/**
+ * @private
+ * @deprecated use getSelectionAdfInfoNew instead
+ */
 export declare function getSelectionAdfInfo(state: EditorState): SelectionInfo;
 export declare function getSelectionAdfInfoNew(selection: Selection): SelectionInfo;
 export {};

package/dist/types/selectionExtensionPluginType.d.ts

@@ -1,6 +1,7 @@
 import { type ADFEntity } from '@atlaskit/adf-utils/types';
 import type { EditorCommand, NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
 import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
+import type { BlockControlsPlugin } from '@atlaskit/editor-plugin-block-controls';
 import type { BlockMenuPlugin } from '@atlaskit/editor-plugin-block-menu';
 import type { EditorViewModePlugin } from '@atlaskit/editor-plugin-editor-viewmode';
 import type { EditorViewModeEffectsPlugin } from '@atlaskit/editor-plugin-editor-viewmode-effects';
@@ -10,7 +11,7 @@ import type { SelectionToolbarPlugin } from '@atlaskit/editor-plugin-selection-t
 import type { ToolbarPlugin } from '@atlaskit/editor-plugin-toolbar';
 import type { UserIntentPlugin } from '@atlaskit/editor-plugin-user-intent';
 import type { UserPreferencesPlugin } from '@atlaskit/editor-plugin-user-preferences';
-import type { SelectionAdfResult, InsertAdfAtEndOfDocResult, ReplaceWithAdfResult, SelectionExtension, SelectionExtensionPluginOptions, SelectionExtensionPluginState, SelectionExtensionSelectionInfo, ExtensionMenuItemConfiguration } from './types';
+import type { ExtensionMenuItemConfiguration, InsertAdfAtEndOfDocResult, ReplaceWithAdfResult, SelectionAdfResult, SelectionExtension, SelectionExtensionPluginOptions, SelectionExtensionPluginState, SelectionExtensionSelectionInfo } from './types';
 export type SelectionExtensionPlugin = NextEditorPlugin<'selectionExtension', {
     actions: {
         getDocumentFromSelection: () => {
@@ -35,6 +36,7 @@ export type SelectionExtensionPlugin = NextEditorPlugin<'selectionExtension', {
         OptionalPlugin<UserPreferencesPlugin>,
         OptionalPlugin<UserIntentPlugin>,
         OptionalPlugin<SelectionPlugin>,
+        OptionalPlugin<BlockControlsPlugin>,
         OptionalPlugin<BlockMenuPlugin>,
         OptionalPlugin<ToolbarPlugin>,
         SelectionToolbarPlugin

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

@@ -156,9 +156,9 @@ type ExtensionMenuItemBaseConfiguration = {
     isDisabled?: boolean;
 };
 /**
- * Fields for a leaf menu item (i.e., an item that does not have nested menu items)
+ * Fields for a dropdown item (i.e., an item that does not have further nested menu items)
  */
-type ExtensionMenuItemLeafConfiguration = {
+type ExtensionDropdownItemFields = {
     /**
      * Optional content component to render when this menu item is selected
      *
@@ -174,23 +174,25 @@ type ExtensionMenuItemLeafConfiguration = {
     onClick?: () => void;
 };
 /**
- * Fields for a dropdown menu item (i.e., an item that has nested menu items)
+ * Fields for a nested dropdown menu (i.e., an menu item that has further nested menu items)
  */
-type ExtensionMenuItemDropdownMenuConfiguration = {
+type ExtensionNestedDropdownMenuFields = {
     getMenuItems: GetNestedMenuItemsFn;
 };
+export type ExtensionDropdownItemConfiguration = ExtensionMenuItemBaseConfiguration & AllNever<ExtensionNestedDropdownMenuFields> & ExtensionDropdownItemFields;
+export type ExtensionNestedDropdownMenuConfiguration = ExtensionMenuItemBaseConfiguration & AllNever<ExtensionDropdownItemFields> & ExtensionNestedDropdownMenuFields;
 type AllNever<T> = {
     [K in keyof T]?: never;
 };
 /**
- * A type which marks all fields from ExtensionMenuItemDropdownMenuConfiguration and ExtensionMenuItemLeafConfiguration
- * as never, ensuring that only one of the two can be present at a time to avoid misconfigurations
+ * This type represents either a dropdown item or a dropdown menu, but not both.
+ *
+ * We mark all fields of the other type as `never` to enforce this exclusivity.
  */
-type ExtensionMenuItemUnsupportedConfiguration = AllNever<ExtensionMenuItemDropdownMenuConfiguration | ExtensionMenuItemLeafConfiguration>;
-export type ExtensionMenuItemConfiguration = ExtensionMenuItemBaseConfiguration & ExtensionMenuItemUnsupportedConfiguration & (ExtensionMenuItemLeafConfiguration | ExtensionMenuItemDropdownMenuConfiguration);
+export type ExtensionMenuItemConfiguration = ExtensionDropdownItemConfiguration | ExtensionNestedDropdownMenuConfiguration;
 /**
- * We intentionally only support leaf menu items nested within dropdown menu items so that there will
- * be at max two levels of nesting from extension menu items.
+ * We intentionally only support dropdown items nested within dropdown menus, i.e. no menus nested
+ * within menus – so there will be at max two levels of nesting from extension menu items
  */
-type ExtensionMenuItemNestedConfiguration = ExtensionMenuItemBaseConfiguration & ExtensionMenuItemLeafConfiguration;
+type ExtensionMenuItemNestedConfiguration = ExtensionDropdownItemConfiguration;
 export {};

package/dist/types/ui/menu/SelectionExtensionDropdownItem.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { ExtensionDropdownItemConfiguration } from '../../types';
+type SelectionExtensionDropdownItemProps = {
+    dropdownItem: ExtensionDropdownItemConfiguration;
+};
+export declare const SelectionExtensionDropdownItem: ({ dropdownItem, }: SelectionExtensionDropdownItemProps) => React.JSX.Element;
+export {};

package/dist/types/ui/menu/SelectionExtensionDropdownMenu.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { type ExtensionNestedDropdownMenuConfiguration } from '../../types';
+export type SelectionExtensionNestedDropdownMenuProps = {
+    nestedDropdownMenu: ExtensionNestedDropdownMenuConfiguration;
+};
+export declare const SelectionExtensionNestedDropdownMenu: ({ nestedDropdownMenu, }: SelectionExtensionNestedDropdownMenuProps) => React.JSX.Element;

package/dist/types/ui/menu/SelectionExtensionMenuItems.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { ExtensionMenuItemConfiguration } from '../../types';
+type SelectionExtensionMenuItemsProps = {
+    getMenuItems: () => ExtensionMenuItemConfiguration[];
+};
+export declare const SelectionExtensionMenuItems: ({ getMenuItems }: SelectionExtensionMenuItemsProps) => React.JSX.Element | null;
+export {};

package/dist/types/ui/toolbar-components/ToolbarMenu.d.ts

@@ -6,5 +6,5 @@ type ToolbarMenuProps = React.PropsWithChildren<{
     api: ExtractInjectionAPI<SelectionExtensionPlugin> | undefined;
     config: ExtensionToolbarItemConfiguration;
 }>;
-export declare const ToolbarMenu: ({ api, config, children }: ToolbarMenuProps) => React.JSX.Element | null;
+export declare const ToolbarMenu: ({ api, config, children, }: ToolbarMenuProps) => React.JSX.Element | null;
 export {};

package/dist/types/ui/utils/menu-items.d.ts

@@ -0,0 +1,8 @@
+import type { ExtensionMenuItemConfiguration, ExtensionNestedDropdownMenuConfiguration } from '../../types';
+/**
+ * Type guard to check if the given configuration is for a dropdown menu.
+ *
+ * @param item - The menu item configuration to check, either menu item or dropdown menu
+ * @returns True if the item configuration is for a dropdown menu, false otherwise
+ */
+export declare const isNestedDropdownMenuConfiguration: (item: ExtensionMenuItemConfiguration) => item is ExtensionNestedDropdownMenuConfiguration;

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

@@ -12,10 +12,26 @@ type SelectionInfo = {
     selectedNodeAdf: ADFEntity;
     selectionRanges?: SelectionRange[];
 };
+/**
+ * @private
+ * @deprecated use getFragmentInfoFromSelectionNew instead
+ */
 export declare const getSelectionTextInfo: (view: EditorView, api?: ExtractInjectionAPI<SelectionExtensionPlugin>) => SelectionExtensionSelectionInfo;
+export declare const getSelectionTextInfoNew: (selection: Selection, view: EditorView, api?: ExtractInjectionAPI<SelectionExtensionPlugin>) => SelectionExtensionSelectionInfo;
+/**
+ * @private
+ * @deprecated use getFragmentInfoFromSelectionNew instead
+ */
 export declare const getFragmentInfoFromSelection: (state: EditorState) => {
     selectedNodeAdf: ADFEntity;
 };
+export declare const getFragmentInfoFromSelectionNew: (selection: Selection) => {
+    selectedNodeAdf: ADFEntity;
+};
+/**
+ * @private
+ * @deprecated use getSelectionAdfInfoNew instead
+ */
 export declare function getSelectionAdfInfo(state: EditorState): SelectionInfo;
 export declare function getSelectionAdfInfoNew(selection: Selection): SelectionInfo;
 export {};

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

@@ -1,6 +1,7 @@
 import { type ADFEntity } from '@atlaskit/adf-utils/types';
 import type { EditorCommand, NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
 import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
+import type { BlockControlsPlugin } from '@atlaskit/editor-plugin-block-controls';
 import type { BlockMenuPlugin } from '@atlaskit/editor-plugin-block-menu';
 import type { EditorViewModePlugin } from '@atlaskit/editor-plugin-editor-viewmode';
 import type { EditorViewModeEffectsPlugin } from '@atlaskit/editor-plugin-editor-viewmode-effects';
@@ -10,7 +11,7 @@ import type { SelectionToolbarPlugin } from '@atlaskit/editor-plugin-selection-t
 import type { ToolbarPlugin } from '@atlaskit/editor-plugin-toolbar';
 import type { UserIntentPlugin } from '@atlaskit/editor-plugin-user-intent';
 import type { UserPreferencesPlugin } from '@atlaskit/editor-plugin-user-preferences';
-import type { SelectionAdfResult, InsertAdfAtEndOfDocResult, ReplaceWithAdfResult, SelectionExtension, SelectionExtensionPluginOptions, SelectionExtensionPluginState, SelectionExtensionSelectionInfo, ExtensionMenuItemConfiguration } from './types';
+import type { ExtensionMenuItemConfiguration, InsertAdfAtEndOfDocResult, ReplaceWithAdfResult, SelectionAdfResult, SelectionExtension, SelectionExtensionPluginOptions, SelectionExtensionPluginState, SelectionExtensionSelectionInfo } from './types';
 export type SelectionExtensionPlugin = NextEditorPlugin<'selectionExtension', {
     actions: {
         getDocumentFromSelection: () => {
@@ -35,6 +36,7 @@ export type SelectionExtensionPlugin = NextEditorPlugin<'selectionExtension', {
         OptionalPlugin<UserPreferencesPlugin>,
         OptionalPlugin<UserIntentPlugin>,
         OptionalPlugin<SelectionPlugin>,
+        OptionalPlugin<BlockControlsPlugin>,
         OptionalPlugin<BlockMenuPlugin>,
         OptionalPlugin<ToolbarPlugin>,
         SelectionToolbarPlugin

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

@@ -156,9 +156,9 @@ type ExtensionMenuItemBaseConfiguration = {
     isDisabled?: boolean;
 };
 /**
- * Fields for a leaf menu item (i.e., an item that does not have nested menu items)
+ * Fields for a dropdown item (i.e., an item that does not have further nested menu items)
  */
-type ExtensionMenuItemLeafConfiguration = {
+type ExtensionDropdownItemFields = {
     /**
      * Optional content component to render when this menu item is selected
      *
@@ -174,23 +174,25 @@ type ExtensionMenuItemLeafConfiguration = {
     onClick?: () => void;
 };
 /**
- * Fields for a dropdown menu item (i.e., an item that has nested menu items)
+ * Fields for a nested dropdown menu (i.e., an menu item that has further nested menu items)
  */
-type ExtensionMenuItemDropdownMenuConfiguration = {
+type ExtensionNestedDropdownMenuFields = {
     getMenuItems: GetNestedMenuItemsFn;
 };
+export type ExtensionDropdownItemConfiguration = ExtensionMenuItemBaseConfiguration & AllNever<ExtensionNestedDropdownMenuFields> & ExtensionDropdownItemFields;
+export type ExtensionNestedDropdownMenuConfiguration = ExtensionMenuItemBaseConfiguration & AllNever<ExtensionDropdownItemFields> & ExtensionNestedDropdownMenuFields;
 type AllNever<T> = {
     [K in keyof T]?: never;
 };
 /**
- * A type which marks all fields from ExtensionMenuItemDropdownMenuConfiguration and ExtensionMenuItemLeafConfiguration
- * as never, ensuring that only one of the two can be present at a time to avoid misconfigurations
+ * This type represents either a dropdown item or a dropdown menu, but not both.
+ *
+ * We mark all fields of the other type as `never` to enforce this exclusivity.
  */
-type ExtensionMenuItemUnsupportedConfiguration = AllNever<ExtensionMenuItemDropdownMenuConfiguration | ExtensionMenuItemLeafConfiguration>;
-export type ExtensionMenuItemConfiguration = ExtensionMenuItemBaseConfiguration & ExtensionMenuItemUnsupportedConfiguration & (ExtensionMenuItemLeafConfiguration | ExtensionMenuItemDropdownMenuConfiguration);
+export type ExtensionMenuItemConfiguration = ExtensionDropdownItemConfiguration | ExtensionNestedDropdownMenuConfiguration;
 /**
- * We intentionally only support leaf menu items nested within dropdown menu items so that there will
- * be at max two levels of nesting from extension menu items.
+ * We intentionally only support dropdown items nested within dropdown menus, i.e. no menus nested
+ * within menus – so there will be at max two levels of nesting from extension menu items
  */
-type ExtensionMenuItemNestedConfiguration = ExtensionMenuItemBaseConfiguration & ExtensionMenuItemLeafConfiguration;
+type ExtensionMenuItemNestedConfiguration = ExtensionDropdownItemConfiguration;
 export {};

package/dist/types-ts4.5/ui/menu/SelectionExtensionDropdownItem.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { ExtensionDropdownItemConfiguration } from '../../types';
+type SelectionExtensionDropdownItemProps = {
+    dropdownItem: ExtensionDropdownItemConfiguration;
+};
+export declare const SelectionExtensionDropdownItem: ({ dropdownItem, }: SelectionExtensionDropdownItemProps) => React.JSX.Element;
+export {};

package/dist/types-ts4.5/ui/menu/SelectionExtensionDropdownMenu.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { type ExtensionNestedDropdownMenuConfiguration } from '../../types';
+export type SelectionExtensionNestedDropdownMenuProps = {
+    nestedDropdownMenu: ExtensionNestedDropdownMenuConfiguration;
+};
+export declare const SelectionExtensionNestedDropdownMenu: ({ nestedDropdownMenu, }: SelectionExtensionNestedDropdownMenuProps) => React.JSX.Element;

package/dist/types-ts4.5/ui/menu/SelectionExtensionMenuItems.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { ExtensionMenuItemConfiguration } from '../../types';
+type SelectionExtensionMenuItemsProps = {
+    getMenuItems: () => ExtensionMenuItemConfiguration[];
+};
+export declare const SelectionExtensionMenuItems: ({ getMenuItems }: SelectionExtensionMenuItemsProps) => React.JSX.Element | null;
+export {};

package/dist/types-ts4.5/ui/toolbar-components/ToolbarMenu.d.ts

@@ -6,5 +6,5 @@ type ToolbarMenuProps = React.PropsWithChildren<{
     api: ExtractInjectionAPI<SelectionExtensionPlugin> | undefined;
     config: ExtensionToolbarItemConfiguration;
 }>;
-export declare const ToolbarMenu: ({ api, config, children }: ToolbarMenuProps) => React.JSX.Element | null;
+export declare const ToolbarMenu: ({ api, config, children, }: ToolbarMenuProps) => React.JSX.Element | null;
 export {};

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

@@ -0,0 +1,8 @@
+import type { ExtensionMenuItemConfiguration, ExtensionNestedDropdownMenuConfiguration } from '../../types';
+/**
+ * Type guard to check if the given configuration is for a dropdown menu.
+ *
+ * @param item - The menu item configuration to check, either menu item or dropdown menu
+ * @returns True if the item configuration is for a dropdown menu, false otherwise
+ */
+export declare const isNestedDropdownMenuConfiguration: (item: ExtensionMenuItemConfiguration) => item is ExtensionNestedDropdownMenuConfiguration;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-selection-extension",
-	"version": "9.0.1",
+	"version": "9.0.3",
 	"description": "editor-plugin-selection-extension plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -35,34 +35,35 @@
 		"@atlaskit/adf-utils": "^19.26.0",
 		"@atlaskit/editor-json-transformer": "^8.31.0",
 		"@atlaskit/editor-plugin-analytics": "^6.2.0",
-		"@atlaskit/editor-plugin-block-menu": "^5.1.0",
+		"@atlaskit/editor-plugin-block-controls": "^7.14.0",
+		"@atlaskit/editor-plugin-block-menu": "^5.2.0",
 		"@atlaskit/editor-plugin-editor-viewmode": "^8.0.0",
 		"@atlaskit/editor-plugin-editor-viewmode-effects": "^6.1.0",
 		"@atlaskit/editor-plugin-primary-toolbar": "^7.0.0",
 		"@atlaskit/editor-plugin-selection-toolbar": "^7.1.0",
 		"@atlaskit/editor-plugin-toolbar": "^3.4.0",
 		"@atlaskit/editor-plugin-user-preferences": "^4.0.0",
-		"@atlaskit/editor-prosemirror": "7.0.0",
+		"@atlaskit/editor-prosemirror": "^7.2.0",
 		"@atlaskit/editor-shared-styles": "^3.10.0",
 		"@atlaskit/editor-tables": "^2.9.0",
 		"@atlaskit/editor-toolbar": "^0.18.0",
-		"@atlaskit/icon": "^29.0.0",
+		"@atlaskit/icon": "^29.1.0",
 		"@atlaskit/lozenge": "^13.1.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/platform-feature-flags-react": "^0.4.0",
 		"@atlaskit/primitives": "^16.4.0",
-		"@atlaskit/tmp-editor-statsig": "^15.0.0",
+		"@atlaskit/tmp-editor-statsig": "^15.10.0",
 		"@babel/runtime": "^7.0.0",
 		"lodash": "^4.17.21",
 		"react-intl-next": "npm:react-intl@^5.18.1",
 		"uuid": "^3.1.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^110.40.0",
+		"@atlaskit/editor-common": "^110.42.0",
 		"react": "^18.2.0"
 	},
 	"devDependencies": {
-		"@testing-library/react": "^13.4.0",
+		"@testing-library/react": "^16.3.0",
 		"react-dom": "^18.2.0",
 		"wait-for-expect": "^1.2.0"
 	},