@atlaskit/editor-plugin-selection-extension 4.0.0 → 4.1.1

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/editor-plugin-selection-extension
 
+## 4.1.1
+
+### Patch Changes
+
+- Updated dependencies
+
+## 4.1.0
+
+### Minor Changes
+
+- [`50976babce55d`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/50976babce55d) -
+  Add new 'onClick' to dropdown menu, hook up new toolbar api to regsiter components on selection
+  change, add new safeRegistry method to replace existing objects
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 4.0.0
 
 ### Patch Changes

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

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.getFragmentInfoFromSelection = void 0;
 exports.getSelectionAdfInfo = getSelectionAdfInfo;
+exports.getSelectionAdfInfoNew = getSelectionAdfInfoNew;
 exports.getSelectionTextInfo = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _monitoring = require("@atlaskit/editor-common/monitoring");
@@ -131,4 +132,26 @@ function getSelectionAdfInfo(state) {
   return _objectSpread(_objectSpread({}, selectionInfo), {}, {
     selectedNodeAdf: selectedNodeAdf
   });
+}
+function getSelectionAdfInfoNew(selection) {
+  var selectionInfo = {
+    selectedNode: selection.$from.node(),
+    nodePos: selection.$from.depth > 0 ? selection.$from.before() : selection.from
+  };
+  if (selection instanceof _state.TextSelection) {
+    var $from = selection.$from,
+      $to = selection.$to;
+    if ($from.parent === $to.parent) {
+      selectionInfo = getSelectionInfoFromSameNode(selection);
+    } else {
+      // TODO: ED-28405 - when selection spans multiple nodes including nested node, we need to iterate through the nodes
+    }
+  } else if (selection instanceof _editorTables.CellSelection) {
+    selectionInfo = getSelectionInfoFromCellSelection(selection);
+  }
+  var serializer = new _editorJsonTransformer.JSONTransformer();
+  var selectedNodeAdf = serializer.encodeNode(selectionInfo.selectedNode);
+  return _objectSpread(_objectSpread({}, selectionInfo), {}, {
+    selectedNodeAdf: selectedNodeAdf
+  });
 }

package/dist/cjs/selectionExtensionPlugin.js

@@ -11,6 +11,7 @@ var _messages = require("@atlaskit/editor-common/messages");
 var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
 var _usePluginStateEffect = require("@atlaskit/editor-common/use-plugin-state-effect");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
 var _insertAdfAtEndOfDoc2 = require("./pm-plugins/actions/insertAdfAtEndOfDoc");
 var _replaceWithAdf2 = require("./pm-plugins/actions/replaceWithAdf");
@@ -20,7 +21,8 @@ var _types = require("./types");
 var _SelectionExtensionComponentWrapper = require("./ui/extension/SelectionExtensionComponentWrapper");
 var _extensions = require("./ui/extensions");
 var _LegacyToolbarComponent = require("./ui/LegacyToolbarComponent");
-var _selectionToolbar2 = require("./ui/selectionToolbar");
+var _selectionToolbar = require("./ui/selectionToolbar");
+var _toolbarComponents = require("./ui/toolbar-components");
 var _registerBlockMenuItems = require("./ui/utils/registerBlockMenuItems");
 var selectionExtensionPlugin = exports.selectionExtensionPlugin = function selectionExtensionPlugin(_ref) {
   var api = _ref.api,
@@ -30,6 +32,7 @@ var selectionExtensionPlugin = exports.selectionExtensionPlugin = function selec
   };
   var cachedSelection;
   var cachedOverflowMenuOptions;
+  var isToolbarAIFCEnabled = (0, _expValEquals.expValEquals)('platform_editor_toolbar_aifc', 'isEnabled', true);
   var _ref2 = config || {},
     _ref2$extensionList = _ref2.extensionList,
     extensionList = _ref2$extensionList === void 0 ? [] : _ref2$extensionList,
@@ -40,7 +43,7 @@ var selectionExtensionPlugin = exports.selectionExtensionPlugin = function selec
     firstParty = _ref3$firstParty === void 0 ? [] : _ref3$firstParty,
     _ref3$external = _ref3.external,
     external = _ref3$external === void 0 ? [] : _ref3$external;
-  if ((0, _platformFeatureFlags.fg)('platform_editor_selection_extension_api_v2')) {
+  if (!isToolbarAIFCEnabled && (0, _platformFeatureFlags.fg)('platform_editor_selection_extension_api_v2')) {
     var primaryToolbarItemExtensions = (0, _extensions.getToolbarItemExtensions)(extensionList, 'primaryToolbar');
     if (primaryToolbarItemExtensions !== null && primaryToolbarItemExtensions !== void 0 && primaryToolbarItemExtensions.length) {
       var _api$primaryToolbar;
@@ -135,6 +138,13 @@ var selectionExtensionPlugin = exports.selectionExtensionPlugin = function selec
         if ((userIntentState === null || userIntentState === void 0 ? void 0 : userIntentState.currentUserIntent) === 'blockMenuOpen' && (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu', 'isEnabled', true)) {
           (0, _registerBlockMenuItems.registerBlockMenuItems)(extensionList, api);
         }
+        if (isToolbarAIFCEnabled && (0, _expValEquals.expValEquals)('platform_editor_toolbar_aifc_selection_extension', 'isEnabled', true)) {
+          var _api$toolbar;
+          api === null || api === void 0 || (_api$toolbar = api.toolbar) === null || _api$toolbar === void 0 || _api$toolbar.actions.registerComponents((0, _toolbarComponents.getToolbarComponents)({
+            api: api,
+            config: config
+          }), true);
+        }
       });
     },
     contentComponent: function contentComponent(_ref7) {
@@ -147,7 +157,7 @@ var selectionExtensionPlugin = exports.selectionExtensionPlugin = function selec
       });
     },
     pluginsOptions: {
-      selectionToolbar: function selectionToolbar(state, intl) {
+      selectionToolbar: isToolbarAIFCEnabled ? undefined : function (state, intl) {
         var _api$editorViewMode;
         if (!config) {
           return;
@@ -294,7 +304,7 @@ var selectionExtensionPlugin = exports.selectionExtensionPlugin = function selec
         // NEXT PR: Make sure we cache the whole generated selection toolbar
         // also debug this to make sure it's actually preventing unnecessary re-renders / work
         if (cachedOverflowMenuOptions && state.selection.eq(cachedSelection) && (0, _platformFeatureFlags.fg)('platform_editor_selection_extension_api_v2')) {
-          return (0, _selectionToolbar2.selectionToolbar)({
+          return (0, _selectionToolbar.selectionToolbar)({
             overflowOptions: cachedOverflowMenuOptions,
             extensionList: extensionList
           });
@@ -308,7 +318,7 @@ var selectionExtensionPlugin = exports.selectionExtensionPlugin = function selec
         var groupedExtensionsArray = [].concat((0, _toConsumableArray2.default)(getFirstPartyExtensions(allFirstParty)), (0, _toConsumableArray2.default)(getExternalExtensions(allExternal)));
         cachedOverflowMenuOptions = groupedExtensionsArray;
         cachedSelection = state.selection;
-        return (0, _selectionToolbar2.selectionToolbar)({
+        return (0, _selectionToolbar.selectionToolbar)({
           overflowOptions: cachedOverflowMenuOptions,
           extensionList: extensionList
         });

package/dist/cjs/ui/extension/SelectionExtensionComponentWrapper.js

@@ -63,6 +63,8 @@ var SelectionExtensionComponentWrapper = exports.SelectionExtensionComponentWrap
   if (!(activeExtension !== null && activeExtension !== void 0 && activeExtension.extension.component)) {
     return null;
   }
+
+  // TODO: ED-29142 - Currently this only accepts old extensions with `component` instead of `contentComponent`. Need to support ExtensionMenuItemConfiguration as well
   var ExtensionComponent = activeExtension.extension.component;
   return /*#__PURE__*/_react.default.createElement(ExtensionComponent, {
     closeExtension: handleOnClose,

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

@@ -0,0 +1,57 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MenuItem = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _toolbar = require("@atlaskit/editor-common/toolbar");
+var _editorToolbar = require("@atlaskit/editor-toolbar");
+var _main = require("../../pm-plugins/main");
+var _utils = require("../../pm-plugins/utils");
+var _types = require("../../types");
+var MenuItem = exports.MenuItem = function MenuItem(_ref) {
+  var extensionMenuItems = _ref.extensionMenuItems,
+    api = _ref.api;
+  var _useEditorToolbar = (0, _toolbar.useEditorToolbar)(),
+    editorView = _useEditorToolbar.editorView;
+  if (!(extensionMenuItems !== null && extensionMenuItems !== void 0 && extensionMenuItems.length) || !editorView || !api) {
+    return null;
+  }
+  var onClickHandle = function onClickHandle(extension) {
+    return function () {
+      if (extension.contentComponent) {
+        var selection = (0, _utils.getSelectionTextInfo)(editorView, api);
+        api.core.actions.execute(api.selectionExtension.commands.setActiveExtension({
+          extension: extension,
+          selection: selection
+        }));
+      }
+      api.core.actions.execute(function (_ref2) {
+        var tr = _ref2.tr;
+        var _getSelectionAdfInfoN = (0, _utils.getSelectionAdfInfoNew)(tr.selection),
+          selectedNode = _getSelectionAdfInfoN.selectedNode,
+          nodePos = _getSelectionAdfInfoN.nodePos;
+        tr.setMeta(_main.selectionExtensionPluginKey, {
+          type: _types.SelectionExtensionActionTypes.SET_SELECTED_NODE,
+          selectedNode: selectedNode,
+          nodePos: nodePos
+        });
+        return tr;
+      });
+      extension.onClick && extension.onClick();
+    };
+  };
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, extensionMenuItems.map(function (extension) {
+    var Icon = extension.icon;
+    return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItem, {
+      key: extension.label,
+      elemBefore: /*#__PURE__*/_react.default.createElement(Icon, {
+        label: ""
+      }),
+      onClick: onClickHandle(extension),
+      isDisabled: extension.isDisabled
+    }, extension.label);
+  }));
+};

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

@@ -0,0 +1,29 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ToolbarButton = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
+var _editorToolbar = require("@atlaskit/editor-toolbar");
+var ToolbarButton = exports.ToolbarButton = function ToolbarButton(_ref) {
+  var api = _ref.api,
+    config = _ref.config;
+  var dockingPreference = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'userPreferences.preferences.toolbarDockingPosition');
+  var isDockedAtTop = dockingPreference === 'top';
+  if (isDockedAtTop) {
+    return null;
+  }
+  var Icon = config.icon;
+  return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarTooltip, {
+    content: config.tooltip
+  }, /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarButton, {
+    iconBefore: /*#__PURE__*/_react.default.createElement(Icon, {
+      label: ""
+    }),
+    isDisabled: config.isDisabled,
+    onClick: config.onClick
+  }, config.label));
+};

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

@@ -0,0 +1,30 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ToolbarMenu = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
+var _editorToolbar = require("@atlaskit/editor-toolbar");
+var ToolbarMenu = exports.ToolbarMenu = function ToolbarMenu(_ref) {
+  var api = _ref.api,
+    config = _ref.config,
+    children = _ref.children;
+  var dockingPreference = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'userPreferences.preferences.toolbarDockingPosition');
+  var isDockedAtTop = dockingPreference === 'top';
+  if (isDockedAtTop) {
+    return null;
+  }
+  var Icon = config.icon;
+  return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarTooltip, {
+    content: config.tooltip
+  }, /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownMenu, {
+    iconBefore: /*#__PURE__*/_react.default.createElement(Icon, {
+      label: ""
+    }),
+    isDisabled: config.isDisabled,
+    onClick: config.onClick
+  }, children));
+};

package/dist/cjs/ui/toolbar-components/register-inline-toolbar.js

@@ -0,0 +1,114 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.registerInlineToolbar = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _toolbar = require("@atlaskit/editor-common/toolbar");
+var _MenuItem = require("./MenuItem");
+var _ToolbarButton = require("./ToolbarButton");
+var _ToolbarMenu = require("./ToolbarMenu");
+var EXTENSION_RANK_MULTIPLIER = 100;
+var registerInlineToolbar = exports.registerInlineToolbar = function registerInlineToolbar(_ref) {
+  var api = _ref.api,
+    extension = _ref.extension,
+    index = _ref.index;
+  var key = extension.key,
+    inlineToolbar = extension.inlineToolbar;
+  var baseKey = "selection-extension-".concat(key);
+  var components = [];
+  if (!inlineToolbar) {
+    return components;
+  }
+  var getToolbarItem = inlineToolbar.getToolbarItem,
+    getMenuItems = inlineToolbar.getMenuItems;
+  var groupKey = "".concat(baseKey, "-toolbar-group");
+  var toolbarItemKey = "".concat(baseKey, "-toolbar-").concat(getMenuItems ? 'menu' : 'button');
+  var menuSectionKey = "".concat(baseKey, "-toolbar-menu-section");
+  if (getToolbarItem) {
+    // first we register the group for the button or menu to be added to
+    components.push({
+      type: 'group',
+      key: groupKey,
+      parents: [{
+        type: _toolbar.APPS_SECTION.type,
+        key: _toolbar.APPS_SECTION.key,
+        rank: (index + 1) * EXTENSION_RANK_MULTIPLIER
+      }]
+    });
+    var toolbarItemConfig = getToolbarItem();
+
+    // if toolbar item has menu items, assume it's a menu
+    if (getMenuItems) {
+      components.push({
+        type: 'menu',
+        key: toolbarItemKey,
+        parents: [{
+          type: 'group',
+          key: groupKey,
+          rank: EXTENSION_RANK_MULTIPLIER
+        }],
+        component: function component() {
+          return /*#__PURE__*/_react.default.createElement(_ToolbarMenu.ToolbarMenu, {
+            api: api,
+            config: toolbarItemConfig
+          });
+        }
+      });
+    } else {
+      // else just regsiter a button
+      components.push({
+        type: 'button',
+        key: toolbarItemKey,
+        parents: [{
+          type: 'group',
+          key: groupKey,
+          rank: EXTENSION_RANK_MULTIPLIER
+        }],
+        component: function component() {
+          return /*#__PURE__*/_react.default.createElement(_ToolbarButton.ToolbarButton, {
+            api: api,
+            config: toolbarItemConfig
+          });
+        }
+      });
+    }
+  }
+  if (getMenuItems) {
+    if (getToolbarItem) {
+      components.push({
+        type: 'menu-section',
+        key: menuSectionKey,
+        parents: [{
+          type: 'menu',
+          key: toolbarItemKey,
+          rank: EXTENSION_RANK_MULTIPLIER
+        }]
+      });
+    }
+
+    // Remove ExtensionMenuSectionConfiguration - only care about items
+    var menuItems = getMenuItems().filter(function (item) {
+      return 'label' in item && 'icon' in item;
+    });
+    components.push({
+      type: 'menu-item',
+      key: key,
+      parents: [{
+        type: 'menu-section',
+        // if we have a custom menu, place items in there, otherwise in the overflow menu
+        key: getToolbarItem ? menuSectionKey : _toolbar.SELECTION_EXTENSION_MENU_SECTION.key,
+        rank: (index + 1) * EXTENSION_RANK_MULTIPLIER
+      }],
+      component: function component() {
+        return /*#__PURE__*/_react.default.createElement(_MenuItem.MenuItem, {
+          api: api,
+          extensionMenuItems: menuItems
+        });
+      }
+    });
+  }
+  return components;
+};

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

@@ -0,0 +1,80 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getToolbarComponents = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _react = _interopRequireDefault(require("react"));
+var _toolbar = require("@atlaskit/editor-common/toolbar");
+var _MenuItem = require("./toolbar-components/MenuItem");
+var _registerInlineToolbar = require("./toolbar-components/register-inline-toolbar");
+var _migrateSelectionExtention = require("./utils/migrate-selection-extention");
+var getToolbarComponents = exports.getToolbarComponents = function getToolbarComponents(_ref) {
+  var _config$extensionList, _config$extensions;
+  var api = _ref.api,
+    config = _ref.config;
+  var extensionToolbarComponents = (config === null || config === void 0 || (_config$extensionList = config.extensionList) === null || _config$extensionList === void 0 ? void 0 : _config$extensionList.flatMap(function (extension, index) {
+    return (0, _registerInlineToolbar.registerInlineToolbar)({
+      api: api,
+      extension: extension,
+      index: index
+    });
+  })) || [];
+
+  /**
+   * Continue to support firstParty apps for now as some apps haven't migrated yet, this simply converts apps to new ExtensionMenuItemConfiguration type
+   * to process easier. extensionList and extensions?.firstParty will most likely be mutually exclusive.
+   *
+   * **Warning:** This is called on every selection change to ensure calls to api?.selectionExtension.actions.getSelectionAdf() are
+   * fresh and up to date.
+   */
+  var firstPartyExtensions = (config === null || config === void 0 || (_config$extensions = config.extensions) === null || _config$extensions === void 0 || (_config$extensions = _config$extensions.firstParty) === null || _config$extensions === void 0 ? void 0 : _config$extensions.map(function (extension) {
+    return (0, _migrateSelectionExtention.migrateSelectionExtensionToMenuItem)(extension, api);
+  }).filter(function (extension) {
+    return extension !== undefined;
+  })) || [];
+  return [{
+    type: _toolbar.APPS_SECTION.type,
+    key: _toolbar.APPS_SECTION.key,
+    parents: [{
+      type: 'toolbar',
+      key: _toolbar.TOOLBARS.INLINE_TEXT_TOOLBAR,
+      rank: _toolbar.TOOLBAR_RANK[_toolbar.APPS_SECTION.key]
+    }, {
+      type: 'toolbar',
+      key: _toolbar.TOOLBARS.PRIMARY_TOOLBAR,
+      rank: _toolbar.TOOLBAR_RANK[_toolbar.APPS_SECTION.key]
+    }]
+  },
+  // also register a section inside the overflow menu for extensions which only have menu items
+  {
+    type: _toolbar.SELECTION_EXTENSION_MENU_SECTION.type,
+    key: _toolbar.SELECTION_EXTENSION_MENU_SECTION.key,
+    parents: [{
+      key: _toolbar.OVERFLOW_MENU.key,
+      type: _toolbar.OVERFLOW_MENU.type,
+      rank: _toolbar.OVERFLOW_MENU_RANK[_toolbar.SELECTION_EXTENSION_MENU_SECTION.key]
+    }]
+  }].concat((0, _toConsumableArray2.default)(extensionToolbarComponents), (0, _toConsumableArray2.default)(registerFirstPartyExtensions(api, firstPartyExtensions)));
+};
+var registerFirstPartyExtensions = function registerFirstPartyExtensions(api, extensions) {
+  var components = [];
+  components.push({
+    type: 'menu-item',
+    key: 'first-party-extensions-menu-item',
+    parents: [{
+      type: 'menu-section',
+      key: _toolbar.SELECTION_EXTENSION_MENU_SECTION.key,
+      rank: 100
+    }],
+    component: function component() {
+      return /*#__PURE__*/_react.default.createElement(_MenuItem.MenuItem, {
+        api: api,
+        extensionMenuItems: extensions
+      });
+    }
+  });
+  return components;
+};

package/dist/cjs/ui/utils/migrate-selection-extention.js

@@ -0,0 +1,52 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.migrateSelectionExtensionToMenuItem = void 0;
+/**
+ *
+ * TODO: ED-29157 - remove once Confluence migrates to `extensionList`API
+ *
+ * NOTES:
+ * - This is temporary until we deprecate SelectionExtension and DynamicSelectionExtension.
+ * - Only supporing SelectionExtension as DynamicSelectionExtension is not being used and will be deprecated.
+ *
+ * Converts a SelectionExtension -> ExtensionMenuItemConfiguration. This allows existing extensions to appear in the new toolbar.
+ */
+var migrateSelectionExtensionToMenuItem = exports.migrateSelectionExtensionToMenuItem = function migrateSelectionExtensionToMenuItem(extension, api) {
+  if (!extension.icon) {
+    return undefined;
+  }
+
+  // Warning! These are inlined because the onClick handler must have up to date references to selection (which is awkwaradly set during extension.onClick invocation).
+  var getSelection = function getSelection() {
+    var _sharedState$activeEx;
+    var sharedState = api === null || api === void 0 ? void 0 : api.selectionExtension.sharedState.currentState();
+    return sharedState === null || sharedState === void 0 || (_sharedState$activeEx = sharedState.activeExtension) === null || _sharedState$activeEx === void 0 ? void 0 : _sharedState$activeEx.selection;
+  };
+  return {
+    label: extension.name,
+    icon: extension.icon,
+    isDisabled: extension.isDisabled && extension.isDisabled({
+      selection: getSelection(),
+      // pass undefined as no consumers use this
+      selectedNodeAdf: undefined,
+      selectionRanges: undefined
+    }),
+    /**
+     * SelectionExtension supports passing through selection, selectionAdf, and selectionRanges.
+     *
+     * To support backwards compatibility wrap the onClick with these parameters here and let MenuItem invoke onClick using its expected signature.
+     */
+    onClick: function onClick() {
+      var selectionAdf = api === null || api === void 0 ? void 0 : api.selectionExtension.actions.getSelectionAdf();
+      extension.onClick && extension.onClick({
+        selection: getSelection(),
+        selectedNodeAdf: selectionAdf === null || selectionAdf === void 0 ? void 0 : selectionAdf.selectedNodeAdf,
+        selectionRanges: selectionAdf === null || selectionAdf === void 0 ? void 0 : selectionAdf.selectionRanges
+      });
+    },
+    contentComponent: extension.component
+  };
+};

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

@@ -134,4 +134,29 @@ export function getSelectionAdfInfo(state) {
     ...selectionInfo,
     selectedNodeAdf
   };
+}
+export function getSelectionAdfInfoNew(selection) {
+  let selectionInfo = {
+    selectedNode: selection.$from.node(),
+    nodePos: selection.$from.depth > 0 ? selection.$from.before() : selection.from
+  };
+  if (selection instanceof TextSelection) {
+    const {
+      $from,
+      $to
+    } = selection;
+    if ($from.parent === $to.parent) {
+      selectionInfo = getSelectionInfoFromSameNode(selection);
+    } else {
+      // TODO: ED-28405 - when selection spans multiple nodes including nested node, we need to iterate through the nodes
+    }
+  } else if (selection instanceof CellSelection) {
+    selectionInfo = getSelectionInfoFromCellSelection(selection);
+  }
+  const serializer = new JSONTransformer();
+  const selectedNodeAdf = serializer.encodeNode(selectionInfo.selectedNode);
+  return {
+    ...selectionInfo,
+    selectedNodeAdf
+  };
 }

package/dist/es2019/selectionExtensionPlugin.js

@@ -3,6 +3,7 @@ import { selectionExtensionMessages } from '@atlaskit/editor-common/messages';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { usePluginStateEffect } from '@atlaskit/editor-common/use-plugin-state-effect';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
 import { insertAdfAtEndOfDoc } from './pm-plugins/actions/insertAdfAtEndOfDoc';
 import { replaceWithAdf } from './pm-plugins/actions/replaceWithAdf';
@@ -13,6 +14,7 @@ import { SelectionExtensionComponentWrapper } from './ui/extension/SelectionExte
 import { getMenuItemExtensions, getToolbarItemExtensions } from './ui/extensions';
 import { LegacyPrimaryToolbarComponent } from './ui/LegacyToolbarComponent';
 import { selectionToolbar } from './ui/selectionToolbar';
+import { getToolbarComponents } from './ui/toolbar-components';
 import { registerBlockMenuItems } from './ui/utils/registerBlockMenuItems';
 export const selectionExtensionPlugin = ({
   api,
@@ -23,6 +25,7 @@ export const selectionExtensionPlugin = ({
   };
   let cachedSelection;
   let cachedOverflowMenuOptions;
+  const isToolbarAIFCEnabled = expValEquals('platform_editor_toolbar_aifc', 'isEnabled', true);
   const {
     extensionList = [],
     extensions = {}
@@ -31,7 +34,7 @@ export const selectionExtensionPlugin = ({
     firstParty = [],
     external = []
   } = extensions || {};
-  if (fg('platform_editor_selection_extension_api_v2')) {
+  if (!isToolbarAIFCEnabled && fg('platform_editor_selection_extension_api_v2')) {
     const primaryToolbarItemExtensions = getToolbarItemExtensions(extensionList, 'primaryToolbar');
     if (primaryToolbarItemExtensions !== null && primaryToolbarItemExtensions !== void 0 && primaryToolbarItemExtensions.length) {
       var _api$primaryToolbar, _api$primaryToolbar$a;
@@ -131,6 +134,13 @@ export const selectionExtensionPlugin = ({
         if ((userIntentState === null || userIntentState === void 0 ? void 0 : userIntentState.currentUserIntent) === 'blockMenuOpen' && expValEqualsNoExposure('platform_editor_block_menu', 'isEnabled', true)) {
           registerBlockMenuItems(extensionList, api);
         }
+        if (isToolbarAIFCEnabled && expValEquals('platform_editor_toolbar_aifc_selection_extension', 'isEnabled', true)) {
+          var _api$toolbar;
+          api === null || api === void 0 ? void 0 : (_api$toolbar = api.toolbar) === null || _api$toolbar === void 0 ? void 0 : _api$toolbar.actions.registerComponents(getToolbarComponents({
+            api,
+            config
+          }), true);
+        }
       });
     },
     contentComponent: ({
@@ -144,7 +154,7 @@ export const selectionExtensionPlugin = ({
       });
     },
     pluginsOptions: {
-      selectionToolbar: (state, intl) => {
+      selectionToolbar: isToolbarAIFCEnabled ? undefined : (state, intl) => {
         var _api$editorViewMode, _api$editorViewMode$s;
         if (!config) {
           return;

package/dist/es2019/ui/extension/SelectionExtensionComponentWrapper.js

@@ -57,6 +57,8 @@ export const SelectionExtensionComponentWrapper = ({
   if (!(activeExtension !== null && activeExtension !== void 0 && activeExtension.extension.component)) {
     return null;
   }
+
+  // TODO: ED-29142 - Currently this only accepts old extensions with `component` instead of `contentComponent`. Need to support ExtensionMenuItemConfiguration as well
   const ExtensionComponent = activeExtension.extension.component;
   return /*#__PURE__*/React.createElement(ExtensionComponent, {
     closeExtension: handleOnClose,

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

@@ -0,0 +1,52 @@
+import React from 'react';
+import { useEditorToolbar } from '@atlaskit/editor-common/toolbar';
+import { ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
+import { selectionExtensionPluginKey } from '../../pm-plugins/main';
+import { getSelectionAdfInfoNew, getSelectionTextInfo } from '../../pm-plugins/utils';
+import { SelectionExtensionActionTypes } from '../../types';
+export const MenuItem = ({
+  extensionMenuItems,
+  api
+}) => {
+  const {
+    editorView
+  } = useEditorToolbar();
+  if (!(extensionMenuItems !== null && extensionMenuItems !== void 0 && extensionMenuItems.length) || !editorView || !api) {
+    return null;
+  }
+  const onClickHandle = extension => () => {
+    if (extension.contentComponent) {
+      const selection = getSelectionTextInfo(editorView, api);
+      api.core.actions.execute(api.selectionExtension.commands.setActiveExtension({
+        extension,
+        selection
+      }));
+    }
+    api.core.actions.execute(({
+      tr
+    }) => {
+      const {
+        selectedNode,
+        nodePos
+      } = getSelectionAdfInfoNew(tr.selection);
+      tr.setMeta(selectionExtensionPluginKey, {
+        type: SelectionExtensionActionTypes.SET_SELECTED_NODE,
+        selectedNode,
+        nodePos
+      });
+      return tr;
+    });
+    extension.onClick && extension.onClick();
+  };
+  return /*#__PURE__*/React.createElement(React.Fragment, null, extensionMenuItems.map(extension => {
+    const Icon = extension.icon;
+    return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
+      key: extension.label,
+      elemBefore: /*#__PURE__*/React.createElement(Icon, {
+        label: ""
+      }),
+      onClick: onClickHandle(extension),
+      isDisabled: extension.isDisabled
+    }, extension.label);
+  }));
+};