@atlaskit/editor-plugin-selection-extension 9.0.7 → 9.0.8

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/editor-plugin-selection-extension
 
+## 9.0.8
+
+### Patch Changes
+
+- [`342bed74cf6e9`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/342bed74cf6e9) -
+  EDITOR-4037 Block menu selection extension click handling
+- Updated dependencies
+
 ## 9.0.7
 
 ### Patch Changes

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

@@ -54,7 +54,7 @@ var getSelectionInfoFromCellSelection = function getSelectionInfoFromCellSelecti
 
 /**
  * @private
- * @deprecated use getFragmentInfoFromSelectionNew instead
+ * @deprecated use getSelectionTextInfoNew instead
  */
 var getSelectionTextInfo = exports.getSelectionTextInfo = function getSelectionTextInfo(view, api) {
   var _api$userPreferences, _api$editorViewMode;

package/dist/cjs/selectionExtensionPlugin.js

@@ -26,9 +26,7 @@ var _registerBlockMenuItems = require("./ui/utils/registerBlockMenuItems");
 var selectionExtensionPlugin = exports.selectionExtensionPlugin = function selectionExtensionPlugin(_ref) {
   var api = _ref.api,
     config = _ref.config;
-  var editorViewRef = {
-    current: null
-  };
+  var editorViewRef = {};
   var cachedSelection;
   var cachedOverflowMenuOptions;
   var isToolbarAIFCEnabled = Boolean(api === null || api === void 0 ? void 0 : api.toolbar);
@@ -57,7 +55,11 @@ var selectionExtensionPlugin = exports.selectionExtensionPlugin = function selec
     }
   }
   if ((0, _expValEquals.expValEquals)('platform_editor_block_menu', 'isEnabled', true)) {
-    (0, _registerBlockMenuItems.registerBlockMenuItems)(extensionList, api);
+    (0, _registerBlockMenuItems.registerBlockMenuItems)({
+      extensionList: extensionList,
+      api: api,
+      editorViewRef: editorViewRef
+    });
   }
   return {
     name: 'selectionExtension',
@@ -313,7 +315,7 @@ var selectionExtensionPlugin = exports.selectionExtensionPlugin = function selec
               editorViewRef.current = editorView;
               return {
                 destroy: function destroy() {
-                  editorViewRef.current = null;
+                  delete editorViewRef.current;
                 }
               };
             }

package/dist/cjs/ui/SelectionExtensionComponentContext.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useSelectionExtensionComponentContext = exports.SelectionExtensionComponentContextProvider = void 0;
+var _react = require("react");
+/*
+ * Common context passed down to selection extension components
+ */
+
+var SelectionExtensionComponentContext = /*#__PURE__*/(0, _react.createContext)(undefined);
+var SelectionExtensionComponentContextProvider = exports.SelectionExtensionComponentContextProvider = SelectionExtensionComponentContext.Provider;
+var useSelectionExtensionComponentContext = exports.useSelectionExtensionComponentContext = function useSelectionExtensionComponentContext() {
+  var context = (0, _react.useContext)(SelectionExtensionComponentContext);
+  if (!context) {
+    throw new Error('useSelectionExtensionComponentContext must be used within SelectionExtensionComponentContextProvider');
+  }
+  return context;
+};

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

@@ -6,15 +6,65 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.SelectionExtensionDropdownItem = void 0;
 var _react = _interopRequireDefault(require("react"));
+var _analytics = require("@atlaskit/editor-common/analytics");
 var _editorToolbar = require("@atlaskit/editor-toolbar");
+var _main = require("../../pm-plugins/main");
+var _utils = require("../../pm-plugins/utils");
+var _types = require("../../types");
+var _SelectionExtensionComponentContext = require("../SelectionExtensionComponentContext");
 var SelectionExtensionDropdownItem = exports.SelectionExtensionDropdownItem = function SelectionExtensionDropdownItem(_ref) {
   var dropdownItem = _ref.dropdownItem;
   var IconComponent = dropdownItem.icon;
+  var _useSelectionExtensio = (0, _SelectionExtensionComponentContext.useSelectionExtensionComponentContext)(),
+    api = _useSelectionExtensio.api,
+    editorView = _useSelectionExtensio.editorView,
+    extensionKey = _useSelectionExtensio.extensionKey,
+    extensionSource = _useSelectionExtensio.extensionSource,
+    extensionLocation = _useSelectionExtensio.extensionLocation;
+  var handleClick = function handleClick() {
+    var _api$analytics;
+    if (dropdownItem.contentComponent) {
+      var _api$blockControls;
+      var preservedSelection = 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;
+      var selection = preservedSelection || editorView.state.selection;
+      var selectionInfo = (0, _utils.getSelectionTextInfoNew)(selection, editorView, api);
+      api.core.actions.execute(api.selectionExtension.commands.setActiveExtension({
+        extension: dropdownItem,
+        selection: selectionInfo
+      }));
+    }
+    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;
+    });
+    dropdownItem.onClick && dropdownItem.onClick();
+    (_api$analytics = api.analytics) === null || _api$analytics === void 0 || _api$analytics.actions.fireAnalyticsEvent({
+      action: _analytics.ACTION.CLICKED,
+      actionSubject: _analytics.ACTION_SUBJECT.BUTTON,
+      actionSubjectId: _analytics.ACTION_SUBJECT_ID.EDITOR_PLUGIN_SELECTION_EXTENSION_ITEM,
+      eventType: _analytics.EVENT_TYPE.TRACK,
+      attributes: {
+        extensionKey: extensionKey,
+        extensionSource: extensionSource,
+        extensionLocation: extensionLocation,
+        extensionElement: 'dropdown-item',
+        extensionItemKey: dropdownItem.key
+      }
+    });
+  };
   return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItem, {
     elemBefore: IconComponent ? /*#__PURE__*/_react.default.createElement(IconComponent, {
       label: ""
     }) : undefined,
-    onClick: dropdownItem.onClick,
+    onClick: handleClick,
     isDisabled: dropdownItem.isDisabled
   }, dropdownItem.label);
 };

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

@@ -18,12 +18,12 @@ var SelectionExtensionMenuItems = exports.SelectionExtensionMenuItems = function
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, extensionMenuItems.map(function (item) {
     if ((0, _menuItems.isNestedDropdownMenuConfiguration)(item)) {
       return /*#__PURE__*/_react.default.createElement(_SelectionExtensionNestedDropdownMenu.SelectionExtensionNestedDropdownMenu, {
-        key: item.label,
+        key: item.key || item.label,
         nestedDropdownMenu: item
       });
     }
     return /*#__PURE__*/_react.default.createElement(_SelectionExtensionDropdownItem.SelectionExtensionDropdownItem, {
-      key: item.label,
+      key: item.key || item.label,
       dropdownItem: item
     });
   }));

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

@@ -6,15 +6,17 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.SelectionExtensionNestedDropdownMenu = void 0;
 var _react = _interopRequireDefault(require("react"));
+var _analytics = require("@atlaskit/editor-common/analytics");
 var _editorToolbar = require("@atlaskit/editor-toolbar");
 var _chevronRight = _interopRequireDefault(require("@atlaskit/icon/core/chevron-right"));
+var _SelectionExtensionComponentContext = require("../SelectionExtensionComponentContext");
 var _SelectionExtensionDropdownItem = require("./SelectionExtensionDropdownItem");
 var ChildItems = function ChildItems(_ref) {
   var nestedDropdownMenu = _ref.nestedDropdownMenu;
   var childItems = nestedDropdownMenu.getMenuItems();
   return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItemSection, null, childItems.map(function (dropdownItem) {
     return /*#__PURE__*/_react.default.createElement(_SelectionExtensionDropdownItem.SelectionExtensionDropdownItem, {
-      key: dropdownItem.label,
+      key: dropdownItem.key || dropdownItem.label,
       dropdownItem: dropdownItem
     });
   }));
@@ -22,6 +24,27 @@ var ChildItems = function ChildItems(_ref) {
 var SelectionExtensionNestedDropdownMenu = exports.SelectionExtensionNestedDropdownMenu = function SelectionExtensionNestedDropdownMenu(_ref2) {
   var nestedDropdownMenu = _ref2.nestedDropdownMenu;
   var IconComponent = nestedDropdownMenu.icon;
+  var _useSelectionExtensio = (0, _SelectionExtensionComponentContext.useSelectionExtensionComponentContext)(),
+    api = _useSelectionExtensio.api,
+    extensionKey = _useSelectionExtensio.extensionKey,
+    extensionSource = _useSelectionExtensio.extensionSource,
+    extensionLocation = _useSelectionExtensio.extensionLocation;
+  var handleClick = function handleClick() {
+    var _api$analytics;
+    (_api$analytics = api.analytics) === null || _api$analytics === void 0 || _api$analytics.actions.fireAnalyticsEvent({
+      action: _analytics.ACTION.CLICKED,
+      actionSubject: _analytics.ACTION_SUBJECT.BUTTON,
+      actionSubjectId: _analytics.ACTION_SUBJECT_ID.EDITOR_PLUGIN_SELECTION_EXTENSION_DROPDOWN,
+      eventType: _analytics.EVENT_TYPE.TRACK,
+      attributes: {
+        extensionKey: extensionKey,
+        extensionSource: extensionSource,
+        extensionLocation: extensionLocation,
+        extensionElement: 'nested-dropdown',
+        extensionItemKey: nestedDropdownMenu.key
+      }
+    });
+  };
   return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarNestedDropdownMenu, {
     text: nestedDropdownMenu.label,
     elemBefore: IconComponent ? /*#__PURE__*/_react.default.createElement(IconComponent, {
@@ -29,7 +52,8 @@ var SelectionExtensionNestedDropdownMenu = exports.SelectionExtensionNestedDropd
     }) : undefined,
     elemAfter: /*#__PURE__*/_react.default.createElement(_chevronRight.default, {
       label: 'nested menu'
-    })
+    }),
+    onClick: handleClick
   }, /*#__PURE__*/_react.default.createElement(ChildItems, {
     nestedDropdownMenu: nestedDropdownMenu
   }));

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

@@ -8,16 +8,39 @@ 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) {
-    var _api$blockMenu;
-    var source = _ref.source,
-      key = _ref.key,
-      blockMenu = _ref.blockMenu;
+var _SelectionExtensionComponentContext = require("../SelectionExtensionComponentContext");
+function registerBlockMenuItems(_ref) {
+  var extensionList = _ref.extensionList,
+    api = _ref.api,
+    editorViewRef = _ref.editorViewRef;
+  extensionList.forEach(function (_ref2) {
+    var source = _ref2.source,
+      key = _ref2.key,
+      blockMenu = _ref2.blockMenu;
     if (source !== 'first-party' || !blockMenu) {
       return;
     }
-    api === null || api === void 0 || (_api$blockMenu = api.blockMenu) === null || _api$blockMenu === void 0 || _api$blockMenu.actions.registerBlockMenuComponents([{
+    if (!(api !== null && api !== void 0 && api.blockMenu)) {
+      return;
+    }
+    var component = function component() {
+      var editorView = editorViewRef === null || editorViewRef === void 0 ? void 0 : editorViewRef.current;
+      if (!editorView) {
+        return null;
+      }
+      return /*#__PURE__*/_react.default.createElement(_SelectionExtensionComponentContext.SelectionExtensionComponentContextProvider, {
+        value: {
+          api: api,
+          editorView: editorView,
+          extensionKey: key,
+          extensionSource: source,
+          extensionLocation: 'block-menu'
+        }
+      }, /*#__PURE__*/_react.default.createElement(_SelectionExtensionMenuItems.SelectionExtensionMenuItems, {
+        getMenuItems: blockMenu.getMenuItems
+      }));
+    };
+    api.blockMenu.actions.registerBlockMenuComponents([{
       type: 'block-menu-item',
       key: "selection-extension-".concat(key),
       parent: {
@@ -25,11 +48,7 @@ function registerBlockMenuItems(extensionList, api) {
         key: _blockMenu.TRANSFORM_CREATE_MENU_SECTION.key,
         rank: _blockMenu.TRANSFORM_MENU_ITEM_RANK[_blockMenu.TRANSFORM_CREATE_MENU_SECTION.key]
       },
-      component: function component() {
-        return /*#__PURE__*/_react.default.createElement(_SelectionExtensionMenuItems.SelectionExtensionMenuItems, {
-          getMenuItems: blockMenu.getMenuItems
-        });
-      }
+      component: component
     }]);
   });
 }

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

@@ -43,7 +43,7 @@ const getSelectionInfoFromCellSelection = selection => {
 
 /**
  * @private
- * @deprecated use getFragmentInfoFromSelectionNew instead
+ * @deprecated use getSelectionTextInfoNew instead
  */
 export const getSelectionTextInfo = (view, api) => {
   var _api$userPreferences, _api$userPreferences$, _api$userPreferences$2, _api$editorViewMode, _api$editorViewMode$s;

package/dist/es2019/selectionExtensionPlugin.js

@@ -19,9 +19,7 @@ export const selectionExtensionPlugin = ({
   api,
   config
 }) => {
-  const editorViewRef = {
-    current: null
-  };
+  const editorViewRef = {};
   let cachedSelection;
   let cachedOverflowMenuOptions;
   const isToolbarAIFCEnabled = Boolean(api === null || api === void 0 ? void 0 : api.toolbar);
@@ -46,7 +44,11 @@ export const selectionExtensionPlugin = ({
     }
   }
   if (expValEquals('platform_editor_block_menu', 'isEnabled', true)) {
-    registerBlockMenuItems(extensionList, api);
+    registerBlockMenuItems({
+      extensionList,
+      api,
+      editorViewRef
+    });
   }
   return {
     name: 'selectionExtension',
@@ -308,7 +310,7 @@ export const selectionExtensionPlugin = ({
             editorViewRef.current = editorView;
             return {
               destroy: () => {
-                editorViewRef.current = null;
+                delete editorViewRef.current;
               }
             };
           }

package/dist/es2019/ui/SelectionExtensionComponentContext.js

@@ -0,0 +1,15 @@
+import { createContext, useContext } from 'react';
+
+/*
+ * Common context passed down to selection extension components
+ */
+
+const SelectionExtensionComponentContext = /*#__PURE__*/createContext(undefined);
+export const SelectionExtensionComponentContextProvider = SelectionExtensionComponentContext.Provider;
+export const useSelectionExtensionComponentContext = () => {
+  const context = useContext(SelectionExtensionComponentContext);
+  if (!context) {
+    throw new Error('useSelectionExtensionComponentContext must be used within SelectionExtensionComponentContextProvider');
+  }
+  return context;
+};

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

@@ -1,14 +1,67 @@
 import React from 'react';
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import { ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
+import { selectionExtensionPluginKey } from '../../pm-plugins/main';
+import { getSelectionAdfInfoNew, getSelectionTextInfoNew } from '../../pm-plugins/utils';
+import { SelectionExtensionActionTypes } from '../../types';
+import { useSelectionExtensionComponentContext } from '../SelectionExtensionComponentContext';
 export const SelectionExtensionDropdownItem = ({
   dropdownItem
 }) => {
   const IconComponent = dropdownItem.icon;
+  const {
+    api,
+    editorView,
+    extensionKey,
+    extensionSource,
+    extensionLocation
+  } = useSelectionExtensionComponentContext();
+  const handleClick = () => {
+    var _api$analytics;
+    if (dropdownItem.contentComponent) {
+      var _api$blockControls, _api$blockControls$sh;
+      const preservedSelection = 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;
+      const selection = preservedSelection || editorView.state.selection;
+      const selectionInfo = getSelectionTextInfoNew(selection, editorView, api);
+      api.core.actions.execute(api.selectionExtension.commands.setActiveExtension({
+        extension: dropdownItem,
+        selection: selectionInfo
+      }));
+    }
+    api.core.actions.execute(({
+      tr
+    }) => {
+      const {
+        selectedNode,
+        nodePos
+      } = getSelectionAdfInfoNew(tr.selection);
+      tr.setMeta(selectionExtensionPluginKey, {
+        type: SelectionExtensionActionTypes.SET_SELECTED_NODE,
+        selectedNode,
+        nodePos
+      });
+      return tr;
+    });
+    dropdownItem.onClick && dropdownItem.onClick();
+    (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions.fireAnalyticsEvent({
+      action: ACTION.CLICKED,
+      actionSubject: ACTION_SUBJECT.BUTTON,
+      actionSubjectId: ACTION_SUBJECT_ID.EDITOR_PLUGIN_SELECTION_EXTENSION_ITEM,
+      eventType: EVENT_TYPE.TRACK,
+      attributes: {
+        extensionKey,
+        extensionSource,
+        extensionLocation,
+        extensionElement: 'dropdown-item',
+        extensionItemKey: dropdownItem.key
+      }
+    });
+  };
   return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
     elemBefore: IconComponent ? /*#__PURE__*/React.createElement(IconComponent, {
       label: ""
     }) : undefined,
-    onClick: dropdownItem.onClick,
+    onClick: handleClick,
     isDisabled: dropdownItem.isDisabled
   }, dropdownItem.label);
 };

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

@@ -12,12 +12,12 @@ export const SelectionExtensionMenuItems = ({
   return /*#__PURE__*/React.createElement(React.Fragment, null, extensionMenuItems.map(item => {
     if (isNestedDropdownMenuConfiguration(item)) {
       return /*#__PURE__*/React.createElement(SelectionExtensionNestedDropdownMenu, {
-        key: item.label,
+        key: item.key || item.label,
         nestedDropdownMenu: item
       });
     }
     return /*#__PURE__*/React.createElement(SelectionExtensionDropdownItem, {
-      key: item.label,
+      key: item.key || item.label,
       dropdownItem: item
     });
   }));

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

@@ -1,13 +1,15 @@
 import React from 'react';
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import { ToolbarDropdownItemSection, ToolbarNestedDropdownMenu } from '@atlaskit/editor-toolbar';
 import ChevronRightIcon from '@atlaskit/icon/core/chevron-right';
+import { useSelectionExtensionComponentContext } from '../SelectionExtensionComponentContext';
 import { SelectionExtensionDropdownItem } from './SelectionExtensionDropdownItem';
 const ChildItems = ({
   nestedDropdownMenu
 }) => {
   const childItems = nestedDropdownMenu.getMenuItems();
   return /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, null, childItems.map(dropdownItem => /*#__PURE__*/React.createElement(SelectionExtensionDropdownItem, {
-    key: dropdownItem.label,
+    key: dropdownItem.key || dropdownItem.label,
     dropdownItem: dropdownItem
   })));
 };
@@ -15,6 +17,28 @@ export const SelectionExtensionNestedDropdownMenu = ({
   nestedDropdownMenu
 }) => {
   const IconComponent = nestedDropdownMenu.icon;
+  const {
+    api,
+    extensionKey,
+    extensionSource,
+    extensionLocation
+  } = useSelectionExtensionComponentContext();
+  const handleClick = () => {
+    var _api$analytics;
+    (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions.fireAnalyticsEvent({
+      action: ACTION.CLICKED,
+      actionSubject: ACTION_SUBJECT.BUTTON,
+      actionSubjectId: ACTION_SUBJECT_ID.EDITOR_PLUGIN_SELECTION_EXTENSION_DROPDOWN,
+      eventType: EVENT_TYPE.TRACK,
+      attributes: {
+        extensionKey,
+        extensionSource,
+        extensionLocation,
+        extensionElement: 'nested-dropdown',
+        extensionItemKey: nestedDropdownMenu.key
+      }
+    });
+  };
   return /*#__PURE__*/React.createElement(ToolbarNestedDropdownMenu, {
     text: nestedDropdownMenu.label,
     elemBefore: IconComponent ? /*#__PURE__*/React.createElement(IconComponent, {
@@ -22,7 +46,8 @@ export const SelectionExtensionNestedDropdownMenu = ({
     }) : undefined,
     elemAfter: /*#__PURE__*/React.createElement(ChevronRightIcon, {
       label: 'nested menu'
-    })
+    }),
+    onClick: handleClick
   }, /*#__PURE__*/React.createElement(ChildItems, {
     nestedDropdownMenu: nestedDropdownMenu
   }));

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

@@ -1,17 +1,41 @@
 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) {
+import { SelectionExtensionComponentContextProvider } from '../SelectionExtensionComponentContext';
+export function registerBlockMenuItems({
+  extensionList,
+  api,
+  editorViewRef
+}) {
   extensionList.forEach(({
     source,
     key,
     blockMenu
   }) => {
-    var _api$blockMenu;
     if (source !== 'first-party' || !blockMenu) {
       return;
     }
-    api === null || api === void 0 ? void 0 : (_api$blockMenu = api.blockMenu) === null || _api$blockMenu === void 0 ? void 0 : _api$blockMenu.actions.registerBlockMenuComponents([{
+    if (!(api !== null && api !== void 0 && api.blockMenu)) {
+      return;
+    }
+    const component = () => {
+      const editorView = editorViewRef === null || editorViewRef === void 0 ? void 0 : editorViewRef.current;
+      if (!editorView) {
+        return null;
+      }
+      return /*#__PURE__*/React.createElement(SelectionExtensionComponentContextProvider, {
+        value: {
+          api,
+          editorView,
+          extensionKey: key,
+          extensionSource: source,
+          extensionLocation: 'block-menu'
+        }
+      }, /*#__PURE__*/React.createElement(SelectionExtensionMenuItems, {
+        getMenuItems: blockMenu.getMenuItems
+      }));
+    };
+    api.blockMenu.actions.registerBlockMenuComponents([{
       type: 'block-menu-item',
       key: `selection-extension-${key}`,
       parent: {
@@ -19,11 +43,7 @@ export function registerBlockMenuItems(extensionList, api) {
         key: TRANSFORM_CREATE_MENU_SECTION.key,
         rank: TRANSFORM_MENU_ITEM_RANK[TRANSFORM_CREATE_MENU_SECTION.key]
       },
-      component: () => {
-        return /*#__PURE__*/React.createElement(SelectionExtensionMenuItems, {
-          getMenuItems: blockMenu.getMenuItems
-        });
-      }
+      component
     }]);
   });
 }

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

@@ -44,7 +44,7 @@ var getSelectionInfoFromCellSelection = function getSelectionInfoFromCellSelecti
 
 /**
  * @private
- * @deprecated use getFragmentInfoFromSelectionNew instead
+ * @deprecated use getSelectionTextInfoNew instead
  */
 export var getSelectionTextInfo = function getSelectionTextInfo(view, api) {
   var _api$userPreferences, _api$editorViewMode;

package/dist/esm/selectionExtensionPlugin.js

@@ -19,9 +19,7 @@ import { registerBlockMenuItems } from './ui/utils/registerBlockMenuItems';
 export var selectionExtensionPlugin = function selectionExtensionPlugin(_ref) {
   var api = _ref.api,
     config = _ref.config;
-  var editorViewRef = {
-    current: null
-  };
+  var editorViewRef = {};
   var cachedSelection;
   var cachedOverflowMenuOptions;
   var isToolbarAIFCEnabled = Boolean(api === null || api === void 0 ? void 0 : api.toolbar);
@@ -50,7 +48,11 @@ export var selectionExtensionPlugin = function selectionExtensionPlugin(_ref) {
     }
   }
   if (expValEquals('platform_editor_block_menu', 'isEnabled', true)) {
-    registerBlockMenuItems(extensionList, api);
+    registerBlockMenuItems({
+      extensionList: extensionList,
+      api: api,
+      editorViewRef: editorViewRef
+    });
   }
   return {
     name: 'selectionExtension',
@@ -306,7 +308,7 @@ export var selectionExtensionPlugin = function selectionExtensionPlugin(_ref) {
               editorViewRef.current = editorView;
               return {
                 destroy: function destroy() {
-                  editorViewRef.current = null;
+                  delete editorViewRef.current;
                 }
               };
             }

package/dist/esm/ui/SelectionExtensionComponentContext.js

@@ -0,0 +1,15 @@
+import { createContext, useContext } from 'react';
+
+/*
+ * Common context passed down to selection extension components
+ */
+
+var SelectionExtensionComponentContext = /*#__PURE__*/createContext(undefined);
+export var SelectionExtensionComponentContextProvider = SelectionExtensionComponentContext.Provider;
+export var useSelectionExtensionComponentContext = function useSelectionExtensionComponentContext() {
+  var context = useContext(SelectionExtensionComponentContext);
+  if (!context) {
+    throw new Error('useSelectionExtensionComponentContext must be used within SelectionExtensionComponentContextProvider');
+  }
+  return context;
+};

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

@@ -1,13 +1,63 @@
 import React from 'react';
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import { ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
+import { selectionExtensionPluginKey } from '../../pm-plugins/main';
+import { getSelectionAdfInfoNew, getSelectionTextInfoNew } from '../../pm-plugins/utils';
+import { SelectionExtensionActionTypes } from '../../types';
+import { useSelectionExtensionComponentContext } from '../SelectionExtensionComponentContext';
 export var SelectionExtensionDropdownItem = function SelectionExtensionDropdownItem(_ref) {
   var dropdownItem = _ref.dropdownItem;
   var IconComponent = dropdownItem.icon;
+  var _useSelectionExtensio = useSelectionExtensionComponentContext(),
+    api = _useSelectionExtensio.api,
+    editorView = _useSelectionExtensio.editorView,
+    extensionKey = _useSelectionExtensio.extensionKey,
+    extensionSource = _useSelectionExtensio.extensionSource,
+    extensionLocation = _useSelectionExtensio.extensionLocation;
+  var handleClick = function handleClick() {
+    var _api$analytics;
+    if (dropdownItem.contentComponent) {
+      var _api$blockControls;
+      var preservedSelection = 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;
+      var selection = preservedSelection || editorView.state.selection;
+      var selectionInfo = getSelectionTextInfoNew(selection, editorView, api);
+      api.core.actions.execute(api.selectionExtension.commands.setActiveExtension({
+        extension: dropdownItem,
+        selection: selectionInfo
+      }));
+    }
+    api.core.actions.execute(function (_ref2) {
+      var tr = _ref2.tr;
+      var _getSelectionAdfInfoN = getSelectionAdfInfoNew(tr.selection),
+        selectedNode = _getSelectionAdfInfoN.selectedNode,
+        nodePos = _getSelectionAdfInfoN.nodePos;
+      tr.setMeta(selectionExtensionPluginKey, {
+        type: SelectionExtensionActionTypes.SET_SELECTED_NODE,
+        selectedNode: selectedNode,
+        nodePos: nodePos
+      });
+      return tr;
+    });
+    dropdownItem.onClick && dropdownItem.onClick();
+    (_api$analytics = api.analytics) === null || _api$analytics === void 0 || _api$analytics.actions.fireAnalyticsEvent({
+      action: ACTION.CLICKED,
+      actionSubject: ACTION_SUBJECT.BUTTON,
+      actionSubjectId: ACTION_SUBJECT_ID.EDITOR_PLUGIN_SELECTION_EXTENSION_ITEM,
+      eventType: EVENT_TYPE.TRACK,
+      attributes: {
+        extensionKey: extensionKey,
+        extensionSource: extensionSource,
+        extensionLocation: extensionLocation,
+        extensionElement: 'dropdown-item',
+        extensionItemKey: dropdownItem.key
+      }
+    });
+  };
   return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
     elemBefore: IconComponent ? /*#__PURE__*/React.createElement(IconComponent, {
       label: ""
     }) : undefined,
-    onClick: dropdownItem.onClick,
+    onClick: handleClick,
     isDisabled: dropdownItem.isDisabled
   }, dropdownItem.label);
 };

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

@@ -11,12 +11,12 @@ export var SelectionExtensionMenuItems = function SelectionExtensionMenuItems(_r
   return /*#__PURE__*/React.createElement(React.Fragment, null, extensionMenuItems.map(function (item) {
     if (isNestedDropdownMenuConfiguration(item)) {
       return /*#__PURE__*/React.createElement(SelectionExtensionNestedDropdownMenu, {
-        key: item.label,
+        key: item.key || item.label,
         nestedDropdownMenu: item
       });
     }
     return /*#__PURE__*/React.createElement(SelectionExtensionDropdownItem, {
-      key: item.label,
+      key: item.key || item.label,
       dropdownItem: item
     });
   }));

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

@@ -1,13 +1,15 @@
 import React from 'react';
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import { ToolbarDropdownItemSection, ToolbarNestedDropdownMenu } from '@atlaskit/editor-toolbar';
 import ChevronRightIcon from '@atlaskit/icon/core/chevron-right';
+import { useSelectionExtensionComponentContext } from '../SelectionExtensionComponentContext';
 import { SelectionExtensionDropdownItem } from './SelectionExtensionDropdownItem';
 var ChildItems = function ChildItems(_ref) {
   var nestedDropdownMenu = _ref.nestedDropdownMenu;
   var childItems = nestedDropdownMenu.getMenuItems();
   return /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, null, childItems.map(function (dropdownItem) {
     return /*#__PURE__*/React.createElement(SelectionExtensionDropdownItem, {
-      key: dropdownItem.label,
+      key: dropdownItem.key || dropdownItem.label,
       dropdownItem: dropdownItem
     });
   }));
@@ -15,6 +17,27 @@ var ChildItems = function ChildItems(_ref) {
 export var SelectionExtensionNestedDropdownMenu = function SelectionExtensionNestedDropdownMenu(_ref2) {
   var nestedDropdownMenu = _ref2.nestedDropdownMenu;
   var IconComponent = nestedDropdownMenu.icon;
+  var _useSelectionExtensio = useSelectionExtensionComponentContext(),
+    api = _useSelectionExtensio.api,
+    extensionKey = _useSelectionExtensio.extensionKey,
+    extensionSource = _useSelectionExtensio.extensionSource,
+    extensionLocation = _useSelectionExtensio.extensionLocation;
+  var handleClick = function handleClick() {
+    var _api$analytics;
+    (_api$analytics = api.analytics) === null || _api$analytics === void 0 || _api$analytics.actions.fireAnalyticsEvent({
+      action: ACTION.CLICKED,
+      actionSubject: ACTION_SUBJECT.BUTTON,
+      actionSubjectId: ACTION_SUBJECT_ID.EDITOR_PLUGIN_SELECTION_EXTENSION_DROPDOWN,
+      eventType: EVENT_TYPE.TRACK,
+      attributes: {
+        extensionKey: extensionKey,
+        extensionSource: extensionSource,
+        extensionLocation: extensionLocation,
+        extensionElement: 'nested-dropdown',
+        extensionItemKey: nestedDropdownMenu.key
+      }
+    });
+  };
   return /*#__PURE__*/React.createElement(ToolbarNestedDropdownMenu, {
     text: nestedDropdownMenu.label,
     elemBefore: IconComponent ? /*#__PURE__*/React.createElement(IconComponent, {
@@ -22,7 +45,8 @@ export var SelectionExtensionNestedDropdownMenu = function SelectionExtensionNes
     }) : undefined,
     elemAfter: /*#__PURE__*/React.createElement(ChevronRightIcon, {
       label: 'nested menu'
-    })
+    }),
+    onClick: handleClick
   }, /*#__PURE__*/React.createElement(ChildItems, {
     nestedDropdownMenu: nestedDropdownMenu
   }));

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

@@ -1,16 +1,39 @@
 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) {
-    var _api$blockMenu;
-    var source = _ref.source,
-      key = _ref.key,
-      blockMenu = _ref.blockMenu;
+import { SelectionExtensionComponentContextProvider } from '../SelectionExtensionComponentContext';
+export function registerBlockMenuItems(_ref) {
+  var extensionList = _ref.extensionList,
+    api = _ref.api,
+    editorViewRef = _ref.editorViewRef;
+  extensionList.forEach(function (_ref2) {
+    var source = _ref2.source,
+      key = _ref2.key,
+      blockMenu = _ref2.blockMenu;
     if (source !== 'first-party' || !blockMenu) {
       return;
     }
-    api === null || api === void 0 || (_api$blockMenu = api.blockMenu) === null || _api$blockMenu === void 0 || _api$blockMenu.actions.registerBlockMenuComponents([{
+    if (!(api !== null && api !== void 0 && api.blockMenu)) {
+      return;
+    }
+    var component = function component() {
+      var editorView = editorViewRef === null || editorViewRef === void 0 ? void 0 : editorViewRef.current;
+      if (!editorView) {
+        return null;
+      }
+      return /*#__PURE__*/React.createElement(SelectionExtensionComponentContextProvider, {
+        value: {
+          api: api,
+          editorView: editorView,
+          extensionKey: key,
+          extensionSource: source,
+          extensionLocation: 'block-menu'
+        }
+      }, /*#__PURE__*/React.createElement(SelectionExtensionMenuItems, {
+        getMenuItems: blockMenu.getMenuItems
+      }));
+    };
+    api.blockMenu.actions.registerBlockMenuComponents([{
       type: 'block-menu-item',
       key: "selection-extension-".concat(key),
       parent: {
@@ -18,11 +41,7 @@ export function registerBlockMenuItems(extensionList, api) {
         key: TRANSFORM_CREATE_MENU_SECTION.key,
         rank: TRANSFORM_MENU_ITEM_RANK[TRANSFORM_CREATE_MENU_SECTION.key]
       },
-      component: function component() {
-        return /*#__PURE__*/React.createElement(SelectionExtensionMenuItems, {
-          getMenuItems: blockMenu.getMenuItems
-        });
-      }
+      component: component
     }]);
   });
 }

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

@@ -14,7 +14,7 @@ type SelectionInfo = {
 };
 /**
  * @private
- * @deprecated use getFragmentInfoFromSelectionNew instead
+ * @deprecated use getSelectionTextInfoNew instead
  */
 export declare const getSelectionTextInfo: (view: EditorView, api?: ExtractInjectionAPI<SelectionExtensionPlugin>) => SelectionExtensionSelectionInfo;
 export declare const getSelectionTextInfoNew: (selection: Selection, view: EditorView, api?: ExtractInjectionAPI<SelectionExtensionPlugin>) => SelectionExtensionSelectionInfo;

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

@@ -136,6 +136,10 @@ export type BlockMenuExtensionConfiguration = {
     getMenuItems: GetMenuItemsFn;
 };
 export type ExtensionToolbarItemConfiguration = {
+    /**
+     * Optional key to identify the toolbar item in analytics events
+     */
+    key?: string;
     icon: ComponentType<PropsWithChildren<{
         label: string;
     }>>;
@@ -148,6 +152,10 @@ export type ExtensionToolbarItemConfiguration = {
  * Common fields applicable to all extension menu items
  */
 type ExtensionMenuItemBaseConfiguration = {
+    /**
+     * Optional key to identify the menu item in analytics events
+     */
+    key?: string;
     icon: ComponentType<PropsWithChildren<{
         label: string;
         size?: 'small' | 'medium';

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

@@ -0,0 +1,12 @@
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { SelectionExtensionPlugin } from '../selectionExtensionPluginType';
+export type SelectionExtensionComponentContextValue = {
+    api: ExtractInjectionAPI<SelectionExtensionPlugin>;
+    editorView: EditorView;
+    extensionKey: string;
+    extensionSource: string;
+    extensionLocation: 'inline-toolbar' | 'primary-toolbar' | 'block-menu';
+};
+export declare const SelectionExtensionComponentContextProvider: import("react").Provider<SelectionExtensionComponentContextValue | undefined>;
+export declare const useSelectionExtensionComponentContext: () => SelectionExtensionComponentContextValue;

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

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

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

@@ -1,4 +1,13 @@
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { SelectionExtensionPlugin } from '../../selectionExtensionPluginType';
 import type { ExtensionConfiguration } from '../../types';
-export declare function registerBlockMenuItems(extensionList: ExtensionConfiguration[], api: ExtractInjectionAPI<SelectionExtensionPlugin> | undefined): void;
+type RegisterBlockMenuItemsOptions = {
+    extensionList: ExtensionConfiguration[];
+    api: ExtractInjectionAPI<SelectionExtensionPlugin> | undefined;
+    editorViewRef?: {
+        current?: EditorView;
+    };
+};
+export declare function registerBlockMenuItems({ extensionList, api, editorViewRef, }: RegisterBlockMenuItemsOptions): void;
+export {};

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

@@ -14,7 +14,7 @@ type SelectionInfo = {
 };
 /**
  * @private
- * @deprecated use getFragmentInfoFromSelectionNew instead
+ * @deprecated use getSelectionTextInfoNew instead
  */
 export declare const getSelectionTextInfo: (view: EditorView, api?: ExtractInjectionAPI<SelectionExtensionPlugin>) => SelectionExtensionSelectionInfo;
 export declare const getSelectionTextInfoNew: (selection: Selection, view: EditorView, api?: ExtractInjectionAPI<SelectionExtensionPlugin>) => SelectionExtensionSelectionInfo;

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

@@ -136,6 +136,10 @@ export type BlockMenuExtensionConfiguration = {
     getMenuItems: GetMenuItemsFn;
 };
 export type ExtensionToolbarItemConfiguration = {
+    /**
+     * Optional key to identify the toolbar item in analytics events
+     */
+    key?: string;
     icon: ComponentType<PropsWithChildren<{
         label: string;
     }>>;
@@ -148,6 +152,10 @@ export type ExtensionToolbarItemConfiguration = {
  * Common fields applicable to all extension menu items
  */
 type ExtensionMenuItemBaseConfiguration = {
+    /**
+     * Optional key to identify the menu item in analytics events
+     */
+    key?: string;
     icon: ComponentType<PropsWithChildren<{
         label: string;
         size?: 'small' | 'medium';

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

@@ -0,0 +1,12 @@
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { SelectionExtensionPlugin } from '../selectionExtensionPluginType';
+export type SelectionExtensionComponentContextValue = {
+    api: ExtractInjectionAPI<SelectionExtensionPlugin>;
+    editorView: EditorView;
+    extensionKey: string;
+    extensionSource: string;
+    extensionLocation: 'inline-toolbar' | 'primary-toolbar' | 'block-menu';
+};
+export declare const SelectionExtensionComponentContextProvider: import("react").Provider<SelectionExtensionComponentContextValue | undefined>;
+export declare const useSelectionExtensionComponentContext: () => SelectionExtensionComponentContextValue;

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

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

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

@@ -1,4 +1,13 @@
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { SelectionExtensionPlugin } from '../../selectionExtensionPluginType';
 import type { ExtensionConfiguration } from '../../types';
-export declare function registerBlockMenuItems(extensionList: ExtensionConfiguration[], api: ExtractInjectionAPI<SelectionExtensionPlugin> | undefined): void;
+type RegisterBlockMenuItemsOptions = {
+    extensionList: ExtensionConfiguration[];
+    api: ExtractInjectionAPI<SelectionExtensionPlugin> | undefined;
+    editorViewRef?: {
+        current?: EditorView;
+    };
+};
+export declare function registerBlockMenuItems({ extensionList, api, editorViewRef, }: RegisterBlockMenuItemsOptions): void;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-selection-extension",
-	"version": "9.0.7",
+	"version": "9.0.8",
 	"description": "editor-plugin-selection-extension plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -35,31 +35,31 @@
 		"@atlaskit/adf-utils": "^19.26.0",
 		"@atlaskit/editor-json-transformer": "^8.31.0",
 		"@atlaskit/editor-plugin-analytics": "^6.2.0",
-		"@atlaskit/editor-plugin-block-controls": "^7.15.0",
+		"@atlaskit/editor-plugin-block-controls": "^7.17.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-selection-toolbar": "^7.2.0",
+		"@atlaskit/editor-plugin-toolbar": "^3.5.0",
 		"@atlaskit/editor-plugin-user-preferences": "^4.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.3.0",
-		"@atlaskit/lozenge": "^13.2.0",
+		"@atlaskit/lozenge": "^13.3.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/platform-feature-flags-react": "^0.4.0",
 		"@atlaskit/primitives": "^17.0.0",
-		"@atlaskit/tmp-editor-statsig": "^16.0.0",
+		"@atlaskit/tmp-editor-statsig": "^16.2.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.46.0",
+		"@atlaskit/editor-common": "^110.48.0",
 		"react": "^18.2.0"
 	},
 	"devDependencies": {