@atlaskit/editor-plugin-selection-extension 2.1.0 → 2.1.2

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/editor-plugin-selection-extension
 
+## 2.1.2
+
+### Patch Changes
+
+- [#120385](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/120385)
+  [`0974c164df21e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/0974c164df21e) -
+  [ux] ED-26440 minor cosmetic updates to selection extension plugin
+- Updated dependencies
+
+## 2.1.1
+
+### Patch Changes
+
+- [#119729](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/119729)
+  [`beae885f06562`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/beae885f06562) -
+  ED-26710 add analytics events to selection extension plugin
+
 ## 2.1.0
 
 ### Minor Changes

package/dist/cjs/pm-plugins/main.js

@@ -8,6 +8,7 @@ exports.selectionExtensionPluginKey = exports.createPlugin = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
 var _state = require("@atlaskit/editor-prosemirror/state");
+var _types = require("../types");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var selectionExtensionPluginKey = exports.selectionExtensionPluginKey = new _state.PluginKey('selectionExtensionPlugin');
@@ -23,11 +24,11 @@ var createPlugin = exports.createPlugin = function createPlugin() {
       apply: function apply(tr, pluginState) {
         var meta = tr.getMeta(selectionExtensionPluginKey);
         switch (meta === null || meta === void 0 ? void 0 : meta.type) {
-          case 'set-active-extension':
+          case _types.SelectionExtensionActionTypes.SET_ACTIVE_EXTENSION:
             return _objectSpread(_objectSpread({}, pluginState), {}, {
               activeExtension: meta.extension
             });
-          case 'clear-active-extension':
+          case _types.SelectionExtensionActionTypes.CLEAR_ACTIVE_EXTENSION:
             return _objectSpread(_objectSpread({}, pluginState), {}, {
               activeExtension: undefined
             });

package/dist/cjs/selectionExtensionPlugin.js

@@ -41,10 +41,12 @@ var selectionExtensionPlugin = exports.selectionExtensionPlugin = function selec
       }
     },
     contentComponent: function contentComponent(_ref4) {
+      var _api$analytics;
       var editorView = _ref4.editorView;
       return /*#__PURE__*/_react.default.createElement(_SelectionExtensionComponentWrapper.SelectionExtensionComponentWrapper, {
         editorView: editorView,
-        api: api
+        api: api,
+        editorAnalyticsAPI: api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions
       });
     },
     pluginsOptions: {
@@ -87,6 +89,16 @@ var selectionExtensionPlugin = exports.selectionExtensionPlugin = function selec
             return;
           }
         }
+
+        /**
+         * Active Extension
+         *
+         * Check if there is an active extension and hide the selection extension dropdown
+         */
+        var selectionExtensionState = _main.selectionExtensionPluginKey.getState(state);
+        if (selectionExtensionState !== null && selectionExtensionState !== void 0 && selectionExtensionState.activeExtension) {
+          return;
+        }
         var handleOnExtensionClick = function handleOnExtensionClick(view) {
           return function (extension) {
             var currentSelection = state.selection;
@@ -123,14 +135,14 @@ var selectionExtensionPlugin = exports.selectionExtensionPlugin = function selec
           type: 'custom',
           supportsViewMode: true,
           render: function render(view) {
-            var _api$analytics;
+            var _api$analytics2;
             if (!view) {
               return;
             }
             return /*#__PURE__*/_react.default.createElement(_SelectionExtensionItems.SelectionExtensionItems, {
               api: api,
               editorView: view,
-              editorAnalyticsAPI: api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions,
+              editorAnalyticsAPI: api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions,
               extensions: extensions,
               onExtensionClick: handleOnExtensionClick(view)
             });

package/dist/cjs/types/index.js

@@ -2,4 +2,11 @@
 
 Object.defineProperty(exports, "__esModule", {
   value: true
-});
+});
+exports.SelectionExtensionActionTypes = void 0;
+var SelectionExtensionActionTypes = exports.SelectionExtensionActionTypes = /*#__PURE__*/function (SelectionExtensionActionTypes) {
+  SelectionExtensionActionTypes["SET_ACTIVE_EXTENSION"] = "set-active-extension";
+  SelectionExtensionActionTypes["UPDATE_ACTIVE_EXTENSION_COORDS"] = "update-active-extension-coords";
+  SelectionExtensionActionTypes["CLEAR_ACTIVE_EXTENSION"] = "clear-active-extension";
+  return SelectionExtensionActionTypes;
+}({});

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

@@ -6,22 +6,59 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.SelectionExtensionComponentWrapper = void 0;
 var _react = _interopRequireWildcard(require("react"));
+var _analytics = require("@atlaskit/editor-common/analytics");
 var _hooks = require("@atlaskit/editor-common/hooks");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 var SelectionExtensionComponentWrapper = exports.SelectionExtensionComponentWrapper = function SelectionExtensionComponentWrapper(_ref) {
-  var _selectionExtensionSt;
-  var api = _ref.api;
+  var _selectionExtensionSt4;
+  var api = _ref.api,
+    editorAnalyticsAPI = _ref.editorAnalyticsAPI;
+  var componentRef = (0, _react.useRef)();
   var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['selectionExtension', 'editorViewMode']),
     selectionExtensionState = _useSharedPluginState.selectionExtensionState,
     editorViewModeState = _useSharedPluginState.editorViewModeState;
+
+  // Closed from active extension
   var handleOnClose = (0, _react.useCallback)(function () {
     api === null || api === void 0 || api.core.actions.execute(api === null || api === void 0 ? void 0 : api.selectionExtension.commands.clearActiveExtension());
-  }, [api]);
+    // Clears reference to active component
+    componentRef.current = undefined;
+    if (editorAnalyticsAPI) {
+      editorAnalyticsAPI.fireAnalyticsEvent({
+        action: _analytics.ACTION.CLOSED,
+        actionSubject: _analytics.ACTION_SUBJECT.EDITOR_PLUGIN_SELECTION_EXTENSION,
+        actionSubjectId: _analytics.ACTION_SUBJECT_ID.EDITOR_PLUGIN_SELECTION_EXTENSION_COMPONENT,
+        eventType: _analytics.EVENT_TYPE.TRACK
+      });
+    }
+  }, [editorAnalyticsAPI, api]);
+
+  // Closed from editor page mode change
   (0, _react.useEffect)(function () {
-    api === null || api === void 0 || api.core.actions.execute(api === null || api === void 0 ? void 0 : api.selectionExtension.commands.clearActiveExtension());
-  }, [editorViewModeState, api]);
-  if (!(selectionExtensionState !== null && selectionExtensionState !== void 0 && (_selectionExtensionSt = selectionExtensionState.activeExtension) !== null && _selectionExtensionSt !== void 0 && _selectionExtensionSt.extension.component)) {
+    if (componentRef.current !== undefined) {
+      handleOnClose();
+    }
+  }, [handleOnClose, editorViewModeState]);
+
+  // Viewed analytics event for component mount
+  (0, _react.useEffect)(function () {
+    var _selectionExtensionSt, _selectionExtensionSt2;
+    if (componentRef.current !== (selectionExtensionState === null || selectionExtensionState === void 0 || (_selectionExtensionSt = selectionExtensionState.activeExtension) === null || _selectionExtensionSt === void 0 ? void 0 : _selectionExtensionSt.extension.component) && (selectionExtensionState === null || selectionExtensionState === void 0 || (_selectionExtensionSt2 = selectionExtensionState.activeExtension) === null || _selectionExtensionSt2 === void 0 ? void 0 : _selectionExtensionSt2.extension.component) !== undefined) {
+      var _selectionExtensionSt3;
+      if (editorAnalyticsAPI) {
+        editorAnalyticsAPI.fireAnalyticsEvent({
+          action: _analytics.ACTION.VIEWED,
+          actionSubject: _analytics.ACTION_SUBJECT.EDITOR_PLUGIN_SELECTION_EXTENSION,
+          actionSubjectId: _analytics.ACTION_SUBJECT_ID.EDITOR_PLUGIN_SELECTION_EXTENSION_COMPONENT,
+          eventType: _analytics.EVENT_TYPE.TRACK
+        });
+      }
+      // Sets reference to active component
+      componentRef.current = selectionExtensionState === null || selectionExtensionState === void 0 || (_selectionExtensionSt3 = selectionExtensionState.activeExtension) === null || _selectionExtensionSt3 === void 0 ? void 0 : _selectionExtensionSt3.extension.component;
+    }
+  }, [selectionExtensionState, editorAnalyticsAPI]);
+  if (!(selectionExtensionState !== null && selectionExtensionState !== void 0 && (_selectionExtensionSt4 = selectionExtensionState.activeExtension) !== null && _selectionExtensionSt4 !== void 0 && _selectionExtensionSt4.extension.component)) {
     return null;
   }
   var ExtensionComponent = selectionExtensionState.activeExtension.extension.component;

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

@@ -9,13 +9,15 @@ exports.SelectionExtensionDropdownMenu = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactIntlNext = require("react-intl-next");
+var _analytics = require("@atlaskit/editor-common/analytics");
 var _uiMenu = require("@atlaskit/editor-common/ui-menu");
 var _SelectionExtensionDropdownMenuButton = require("./SelectionExtensionDropdownMenuButton");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 var SelectionExtensionDropdownMenuComponent = /*#__PURE__*/_react.default.memo(function (_ref) {
   var items = _ref.items,
-    onItemActivated = _ref.onItemActivated;
+    onItemActivated = _ref.onItemActivated,
+    editorAnalyticsAPI = _ref.editorAnalyticsAPI;
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     isMenuOpen = _useState2[0],
@@ -31,9 +33,23 @@ var SelectionExtensionDropdownMenuComponent = /*#__PURE__*/_react.default.memo(f
     onItemActivated: onItemActivated,
     "data-testid": "selection-extension-dropdown-menu"
   }, /*#__PURE__*/_react.default.createElement(_SelectionExtensionDropdownMenuButton.SelectionExtensionDropdownMenuButton, {
+    "aria-expanded": isMenuOpen,
+    selected: isMenuOpen,
     onClick: function onClick() {
       return setIsMenuOpen(function (prevIsMenuOpen) {
-        return !prevIsMenuOpen;
+        var nextIsMenuOpen = !prevIsMenuOpen;
+        if (editorAnalyticsAPI) {
+          editorAnalyticsAPI.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: {
+              toggle: nextIsMenuOpen ? _analytics.ACTION.OPENED : _analytics.ACTION.CLOSED
+            }
+          });
+        }
+        return nextIsMenuOpen;
       });
     }
   }));

package/dist/cjs/ui/toolbar/SelectionExtensionDropdownMenuButton.js

@@ -7,15 +7,31 @@ Object.defineProperty(exports, "__esModule", {
 exports.SelectionExtensionDropdownMenuButton = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _reactIntlNext = require("react-intl-next");
+var _messages = require("@atlaskit/editor-common/messages");
 var _uiMenu = require("@atlaskit/editor-common/ui-menu");
 var _apps = _interopRequireDefault(require("@atlaskit/icon/core/apps"));
+var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/utility/migration/chevron-down"));
 var SelectionExtensionDropdownMenuButtonComponent = function SelectionExtensionDropdownMenuButtonComponent(_ref) {
-  var onClick = _ref.onClick;
+  var onClick = _ref.onClick,
+    selected = _ref.selected,
+    ariaExpanded = _ref['aria-expanded'],
+    intl = _ref.intl;
   return /*#__PURE__*/_react.default.createElement(_uiMenu.ToolbarButton, {
     testId: "selection-extension-dropdown-button",
-    onClick: onClick
+    "aria-label": intl.formatMessage(_messages.selectionExtensionMessages.selectionExtensionDropdownButtonLabel),
+    "aria-haspopup": "true",
+    spacing: "compact",
+    title: intl.formatMessage(_messages.selectionExtensionMessages.selectionExtensionDropdownButtonLabel),
+    onClick: onClick,
+    "aria-expanded": ariaExpanded,
+    selected: selected,
+    iconAfter: /*#__PURE__*/_react.default.createElement(_chevronDown.default, {
+      spacing: "none",
+      label: intl.formatMessage(_messages.selectionExtensionMessages.selectionExtensionDropdownButtonLabel)
+    })
   }, /*#__PURE__*/_react.default.createElement(_apps.default, {
-    label: "selection extension dropdown"
+    label: intl.formatMessage(_messages.selectionExtensionMessages.selectionExtensionDropdownButtonLabel),
+    spacing: "none"
   }));
 };
 var SelectionExtensionDropdownMenuButton = exports.SelectionExtensionDropdownMenuButton = (0, _reactIntlNext.injectIntl)(SelectionExtensionDropdownMenuButtonComponent);

package/dist/cjs/ui/toolbar/SelectionExtensionItems.js

@@ -10,6 +10,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _react = _interopRequireWildcard(require("react"));
 var _reactIntlNext = require("react-intl-next");
 var _uuid = require("uuid");
+var _analytics = require("@atlaskit/editor-common/analytics");
 var _SelectionExtensionDropdownMenu = require("./SelectionExtensionDropdownMenu");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -34,7 +35,8 @@ var transformExtensionsToItems = function transformExtensionsToItems(extensions)
 };
 var SelectionExtensionItemsComponent = exports.SelectionExtensionItemsComponent = function SelectionExtensionItemsComponent(_ref) {
   var extensions = _ref.extensions,
-    onExtensionClick = _ref.onExtensionClick;
+    onExtensionClick = _ref.onExtensionClick,
+    editorAnalyticsAPI = _ref.editorAnalyticsAPI;
   var extensionsWithIdentifier = (0, _react.useMemo)(function () {
     return extensions.map(function (extension) {
       return _objectSpread(_objectSpread({}, extension), {}, {
@@ -52,9 +54,18 @@ var SelectionExtensionItemsComponent = exports.SelectionExtensionItemsComponent
     });
     if (extension) {
       onExtensionClick(extension);
+      if (editorAnalyticsAPI) {
+        editorAnalyticsAPI.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
+        });
+      }
     }
   };
   return /*#__PURE__*/_react.default.createElement(_SelectionExtensionDropdownMenu.SelectionExtensionDropdownMenu, {
+    editorAnalyticsAPI: editorAnalyticsAPI,
     items: items,
     onItemActivated: handleOnItemActivated
   });

package/dist/es2019/pm-plugins/main.js

@@ -1,5 +1,6 @@
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+import { SelectionExtensionActionTypes } from '../types';
 export const selectionExtensionPluginKey = new PluginKey('selectionExtensionPlugin');
 export const createPlugin = () => {
   return new SafePlugin({
@@ -13,12 +14,12 @@ export const createPlugin = () => {
       apply: (tr, pluginState) => {
         const meta = tr.getMeta(selectionExtensionPluginKey);
         switch (meta === null || meta === void 0 ? void 0 : meta.type) {
-          case 'set-active-extension':
+          case SelectionExtensionActionTypes.SET_ACTIVE_EXTENSION:
             return {
               ...pluginState,
               activeExtension: meta.extension
             };
-          case 'clear-active-extension':
+          case SelectionExtensionActionTypes.CLEAR_ACTIVE_EXTENSION:
             return {
               ...pluginState,
               activeExtension: undefined

package/dist/es2019/selectionExtensionPlugin.js

@@ -35,9 +35,11 @@ export const selectionExtensionPlugin = ({
     contentComponent: ({
       editorView
     }) => {
+      var _api$analytics;
       return /*#__PURE__*/React.createElement(SelectionExtensionComponentWrapper, {
         editorView: editorView,
-        api: api
+        api: api,
+        editorAnalyticsAPI: api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions
       });
     },
     pluginsOptions: {
@@ -82,6 +84,16 @@ export const selectionExtensionPlugin = ({
             return;
           }
         }
+
+        /**
+         * Active Extension
+         *
+         * Check if there is an active extension and hide the selection extension dropdown
+         */
+        const selectionExtensionState = selectionExtensionPluginKey.getState(state);
+        if (selectionExtensionState !== null && selectionExtensionState !== void 0 && selectionExtensionState.activeExtension) {
+          return;
+        }
         const handleOnExtensionClick = view => extension => {
           const {
             selection: currentSelection
@@ -120,14 +132,14 @@ export const selectionExtensionPlugin = ({
           type: 'custom',
           supportsViewMode: true,
           render: view => {
-            var _api$analytics;
+            var _api$analytics2;
             if (!view) {
               return;
             }
             return /*#__PURE__*/React.createElement(SelectionExtensionItems, {
               api: api,
               editorView: view,
-              editorAnalyticsAPI: api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions,
+              editorAnalyticsAPI: api === null || api === void 0 ? void 0 : (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions,
               extensions: extensions,
               onExtensionClick: handleOnExtensionClick(view)
             });

package/dist/es2019/types/index.js

@@ -1 +1,6 @@
-export {};
+export let SelectionExtensionActionTypes = /*#__PURE__*/function (SelectionExtensionActionTypes) {
+  SelectionExtensionActionTypes["SET_ACTIVE_EXTENSION"] = "set-active-extension";
+  SelectionExtensionActionTypes["UPDATE_ACTIVE_EXTENSION_COORDS"] = "update-active-extension-coords";
+  SelectionExtensionActionTypes["CLEAR_ACTIVE_EXTENSION"] = "clear-active-extension";
+  return SelectionExtensionActionTypes;
+}({});

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

@@ -1,20 +1,57 @@
-import React, { useCallback, useEffect } from 'react';
+import React, { useCallback, useEffect, useRef } from 'react';
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 export const SelectionExtensionComponentWrapper = ({
-  api
+  api,
+  editorAnalyticsAPI
 }) => {
-  var _selectionExtensionSt;
+  var _selectionExtensionSt4;
+  const componentRef = useRef();
   const {
     selectionExtensionState,
     editorViewModeState
   } = useSharedPluginState(api, ['selectionExtension', 'editorViewMode']);
+
+  // Closed from active extension
   const handleOnClose = useCallback(() => {
     api === null || api === void 0 ? void 0 : api.core.actions.execute(api === null || api === void 0 ? void 0 : api.selectionExtension.commands.clearActiveExtension());
-  }, [api]);
+    // Clears reference to active component
+    componentRef.current = undefined;
+    if (editorAnalyticsAPI) {
+      editorAnalyticsAPI.fireAnalyticsEvent({
+        action: ACTION.CLOSED,
+        actionSubject: ACTION_SUBJECT.EDITOR_PLUGIN_SELECTION_EXTENSION,
+        actionSubjectId: ACTION_SUBJECT_ID.EDITOR_PLUGIN_SELECTION_EXTENSION_COMPONENT,
+        eventType: EVENT_TYPE.TRACK
+      });
+    }
+  }, [editorAnalyticsAPI, api]);
+
+  // Closed from editor page mode change
   useEffect(() => {
-    api === null || api === void 0 ? void 0 : api.core.actions.execute(api === null || api === void 0 ? void 0 : api.selectionExtension.commands.clearActiveExtension());
-  }, [editorViewModeState, api]);
-  if (!(selectionExtensionState !== null && selectionExtensionState !== void 0 && (_selectionExtensionSt = selectionExtensionState.activeExtension) !== null && _selectionExtensionSt !== void 0 && _selectionExtensionSt.extension.component)) {
+    if (componentRef.current !== undefined) {
+      handleOnClose();
+    }
+  }, [handleOnClose, editorViewModeState]);
+
+  // Viewed analytics event for component mount
+  useEffect(() => {
+    var _selectionExtensionSt, _selectionExtensionSt2;
+    if (componentRef.current !== (selectionExtensionState === null || selectionExtensionState === void 0 ? void 0 : (_selectionExtensionSt = selectionExtensionState.activeExtension) === null || _selectionExtensionSt === void 0 ? void 0 : _selectionExtensionSt.extension.component) && (selectionExtensionState === null || selectionExtensionState === void 0 ? void 0 : (_selectionExtensionSt2 = selectionExtensionState.activeExtension) === null || _selectionExtensionSt2 === void 0 ? void 0 : _selectionExtensionSt2.extension.component) !== undefined) {
+      var _selectionExtensionSt3;
+      if (editorAnalyticsAPI) {
+        editorAnalyticsAPI.fireAnalyticsEvent({
+          action: ACTION.VIEWED,
+          actionSubject: ACTION_SUBJECT.EDITOR_PLUGIN_SELECTION_EXTENSION,
+          actionSubjectId: ACTION_SUBJECT_ID.EDITOR_PLUGIN_SELECTION_EXTENSION_COMPONENT,
+          eventType: EVENT_TYPE.TRACK
+        });
+      }
+      // Sets reference to active component
+      componentRef.current = selectionExtensionState === null || selectionExtensionState === void 0 ? void 0 : (_selectionExtensionSt3 = selectionExtensionState.activeExtension) === null || _selectionExtensionSt3 === void 0 ? void 0 : _selectionExtensionSt3.extension.component;
+    }
+  }, [selectionExtensionState, editorAnalyticsAPI]);
+  if (!(selectionExtensionState !== null && selectionExtensionState !== void 0 && (_selectionExtensionSt4 = selectionExtensionState.activeExtension) !== null && _selectionExtensionSt4 !== void 0 && _selectionExtensionSt4.extension.component)) {
     return null;
   }
   const ExtensionComponent = selectionExtensionState.activeExtension.extension.component;

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

@@ -1,10 +1,12 @@
 import React, { useState } from 'react';
 import { injectIntl } from 'react-intl-next';
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import { DropdownMenuWithKeyboardNavigation as DropdownMenu } from '@atlaskit/editor-common/ui-menu';
 import { SelectionExtensionDropdownMenuButton } from './SelectionExtensionDropdownMenuButton';
 const SelectionExtensionDropdownMenuComponent = /*#__PURE__*/React.memo(({
   items,
-  onItemActivated
+  onItemActivated,
+  editorAnalyticsAPI
 }) => {
   const [isMenuOpen, setIsMenuOpen] = useState(false);
   return /*#__PURE__*/React.createElement(DropdownMenu, {
@@ -18,7 +20,23 @@ const SelectionExtensionDropdownMenuComponent = /*#__PURE__*/React.memo(({
     onItemActivated: onItemActivated,
     "data-testid": "selection-extension-dropdown-menu"
   }, /*#__PURE__*/React.createElement(SelectionExtensionDropdownMenuButton, {
-    onClick: () => setIsMenuOpen(prevIsMenuOpen => !prevIsMenuOpen)
+    "aria-expanded": isMenuOpen,
+    selected: isMenuOpen,
+    onClick: () => setIsMenuOpen(prevIsMenuOpen => {
+      const nextIsMenuOpen = !prevIsMenuOpen;
+      if (editorAnalyticsAPI) {
+        editorAnalyticsAPI.fireAnalyticsEvent({
+          action: ACTION.CLICKED,
+          actionSubject: ACTION_SUBJECT.BUTTON,
+          actionSubjectId: ACTION_SUBJECT_ID.EDITOR_PLUGIN_SELECTION_EXTENSION_DROPDOWN,
+          eventType: EVENT_TYPE.TRACK,
+          attributes: {
+            toggle: nextIsMenuOpen ? ACTION.OPENED : ACTION.CLOSED
+          }
+        });
+      }
+      return nextIsMenuOpen;
+    })
   }));
 });
 export const SelectionExtensionDropdownMenu = injectIntl(SelectionExtensionDropdownMenuComponent);

package/dist/es2019/ui/toolbar/SelectionExtensionDropdownMenuButton.js

@@ -1,15 +1,31 @@
 import React from 'react';
 import { injectIntl } from 'react-intl-next';
+import { selectionExtensionMessages } from '@atlaskit/editor-common/messages';
 import { ToolbarButton } from '@atlaskit/editor-common/ui-menu';
 import AppsIcon from '@atlaskit/icon/core/apps';
+import ChevronDownIcon from '@atlaskit/icon/utility/migration/chevron-down';
 const SelectionExtensionDropdownMenuButtonComponent = ({
-  onClick
+  onClick,
+  selected,
+  'aria-expanded': ariaExpanded,
+  intl
 }) => {
   return /*#__PURE__*/React.createElement(ToolbarButton, {
     testId: "selection-extension-dropdown-button",
-    onClick: onClick
+    "aria-label": intl.formatMessage(selectionExtensionMessages.selectionExtensionDropdownButtonLabel),
+    "aria-haspopup": "true",
+    spacing: "compact",
+    title: intl.formatMessage(selectionExtensionMessages.selectionExtensionDropdownButtonLabel),
+    onClick: onClick,
+    "aria-expanded": ariaExpanded,
+    selected: selected,
+    iconAfter: /*#__PURE__*/React.createElement(ChevronDownIcon, {
+      spacing: "none",
+      label: intl.formatMessage(selectionExtensionMessages.selectionExtensionDropdownButtonLabel)
+    })
   }, /*#__PURE__*/React.createElement(AppsIcon, {
-    label: "selection extension dropdown"
+    label: intl.formatMessage(selectionExtensionMessages.selectionExtensionDropdownButtonLabel),
+    spacing: "none"
   }));
 };
 export const SelectionExtensionDropdownMenuButton = injectIntl(SelectionExtensionDropdownMenuButtonComponent);

package/dist/es2019/ui/toolbar/SelectionExtensionItems.js

@@ -6,6 +6,7 @@
 import React, { useMemo } from 'react';
 import { injectIntl } from 'react-intl-next';
 import { v4 as uuid } from 'uuid';
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import { SelectionExtensionDropdownMenu } from './SelectionExtensionDropdownMenu';
 const transformExtensionsToItems = extensions => {
   const extensionToItems = extensions.map(extension => {
@@ -23,7 +24,8 @@ const transformExtensionsToItems = extensions => {
 };
 export const SelectionExtensionItemsComponent = ({
   extensions,
-  onExtensionClick
+  onExtensionClick,
+  editorAnalyticsAPI
 }) => {
   const extensionsWithIdentifier = useMemo(() => extensions.map(extension => ({
     ...extension,
@@ -36,9 +38,18 @@ export const SelectionExtensionItemsComponent = ({
     const extension = extensionsWithIdentifier.find(ext => ext.id === item.value.name);
     if (extension) {
       onExtensionClick(extension);
+      if (editorAnalyticsAPI) {
+        editorAnalyticsAPI.fireAnalyticsEvent({
+          action: ACTION.CLICKED,
+          actionSubject: ACTION_SUBJECT.BUTTON,
+          actionSubjectId: ACTION_SUBJECT_ID.EDITOR_PLUGIN_SELECTION_EXTENSION_ITEM,
+          eventType: EVENT_TYPE.TRACK
+        });
+      }
     }
   };
   return /*#__PURE__*/React.createElement(SelectionExtensionDropdownMenu, {
+    editorAnalyticsAPI: editorAnalyticsAPI,
     items: items,
     onItemActivated: handleOnItemActivated
   });

package/dist/esm/pm-plugins/main.js

@@ -3,6 +3,7 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+import { SelectionExtensionActionTypes } from '../types';
 export var selectionExtensionPluginKey = new PluginKey('selectionExtensionPlugin');
 export var createPlugin = function createPlugin() {
   return new SafePlugin({
@@ -16,11 +17,11 @@ export var createPlugin = function createPlugin() {
       apply: function apply(tr, pluginState) {
         var meta = tr.getMeta(selectionExtensionPluginKey);
         switch (meta === null || meta === void 0 ? void 0 : meta.type) {
-          case 'set-active-extension':
+          case SelectionExtensionActionTypes.SET_ACTIVE_EXTENSION:
             return _objectSpread(_objectSpread({}, pluginState), {}, {
               activeExtension: meta.extension
             });
-          case 'clear-active-extension':
+          case SelectionExtensionActionTypes.CLEAR_ACTIVE_EXTENSION:
             return _objectSpread(_objectSpread({}, pluginState), {}, {
               activeExtension: undefined
             });

package/dist/esm/selectionExtensionPlugin.js

@@ -34,10 +34,12 @@ export var selectionExtensionPlugin = function selectionExtensionPlugin(_ref) {
       }
     },
     contentComponent: function contentComponent(_ref4) {
+      var _api$analytics;
       var editorView = _ref4.editorView;
       return /*#__PURE__*/React.createElement(SelectionExtensionComponentWrapper, {
         editorView: editorView,
-        api: api
+        api: api,
+        editorAnalyticsAPI: api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions
       });
     },
     pluginsOptions: {
@@ -80,6 +82,16 @@ export var selectionExtensionPlugin = function selectionExtensionPlugin(_ref) {
             return;
           }
         }
+
+        /**
+         * Active Extension
+         *
+         * Check if there is an active extension and hide the selection extension dropdown
+         */
+        var selectionExtensionState = selectionExtensionPluginKey.getState(state);
+        if (selectionExtensionState !== null && selectionExtensionState !== void 0 && selectionExtensionState.activeExtension) {
+          return;
+        }
         var handleOnExtensionClick = function handleOnExtensionClick(view) {
           return function (extension) {
             var currentSelection = state.selection;
@@ -116,14 +128,14 @@ export var selectionExtensionPlugin = function selectionExtensionPlugin(_ref) {
           type: 'custom',
           supportsViewMode: true,
           render: function render(view) {
-            var _api$analytics;
+            var _api$analytics2;
             if (!view) {
               return;
             }
             return /*#__PURE__*/React.createElement(SelectionExtensionItems, {
               api: api,
               editorView: view,
-              editorAnalyticsAPI: api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions,
+              editorAnalyticsAPI: api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions,
               extensions: extensions,
               onExtensionClick: handleOnExtensionClick(view)
             });

package/dist/esm/types/index.js

@@ -1 +1,6 @@
-export {};
+export var SelectionExtensionActionTypes = /*#__PURE__*/function (SelectionExtensionActionTypes) {
+  SelectionExtensionActionTypes["SET_ACTIVE_EXTENSION"] = "set-active-extension";
+  SelectionExtensionActionTypes["UPDATE_ACTIVE_EXTENSION_COORDS"] = "update-active-extension-coords";
+  SelectionExtensionActionTypes["CLEAR_ACTIVE_EXTENSION"] = "clear-active-extension";
+  return SelectionExtensionActionTypes;
+}({});

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

@@ -1,18 +1,55 @@
-import React, { useCallback, useEffect } from 'react';
+import React, { useCallback, useEffect, useRef } from 'react';
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 export var SelectionExtensionComponentWrapper = function SelectionExtensionComponentWrapper(_ref) {
-  var _selectionExtensionSt;
-  var api = _ref.api;
+  var _selectionExtensionSt4;
+  var api = _ref.api,
+    editorAnalyticsAPI = _ref.editorAnalyticsAPI;
+  var componentRef = useRef();
   var _useSharedPluginState = useSharedPluginState(api, ['selectionExtension', 'editorViewMode']),
     selectionExtensionState = _useSharedPluginState.selectionExtensionState,
     editorViewModeState = _useSharedPluginState.editorViewModeState;
+
+  // Closed from active extension
   var handleOnClose = useCallback(function () {
     api === null || api === void 0 || api.core.actions.execute(api === null || api === void 0 ? void 0 : api.selectionExtension.commands.clearActiveExtension());
-  }, [api]);
+    // Clears reference to active component
+    componentRef.current = undefined;
+    if (editorAnalyticsAPI) {
+      editorAnalyticsAPI.fireAnalyticsEvent({
+        action: ACTION.CLOSED,
+        actionSubject: ACTION_SUBJECT.EDITOR_PLUGIN_SELECTION_EXTENSION,
+        actionSubjectId: ACTION_SUBJECT_ID.EDITOR_PLUGIN_SELECTION_EXTENSION_COMPONENT,
+        eventType: EVENT_TYPE.TRACK
+      });
+    }
+  }, [editorAnalyticsAPI, api]);
+
+  // Closed from editor page mode change
   useEffect(function () {
-    api === null || api === void 0 || api.core.actions.execute(api === null || api === void 0 ? void 0 : api.selectionExtension.commands.clearActiveExtension());
-  }, [editorViewModeState, api]);
-  if (!(selectionExtensionState !== null && selectionExtensionState !== void 0 && (_selectionExtensionSt = selectionExtensionState.activeExtension) !== null && _selectionExtensionSt !== void 0 && _selectionExtensionSt.extension.component)) {
+    if (componentRef.current !== undefined) {
+      handleOnClose();
+    }
+  }, [handleOnClose, editorViewModeState]);
+
+  // Viewed analytics event for component mount
+  useEffect(function () {
+    var _selectionExtensionSt, _selectionExtensionSt2;
+    if (componentRef.current !== (selectionExtensionState === null || selectionExtensionState === void 0 || (_selectionExtensionSt = selectionExtensionState.activeExtension) === null || _selectionExtensionSt === void 0 ? void 0 : _selectionExtensionSt.extension.component) && (selectionExtensionState === null || selectionExtensionState === void 0 || (_selectionExtensionSt2 = selectionExtensionState.activeExtension) === null || _selectionExtensionSt2 === void 0 ? void 0 : _selectionExtensionSt2.extension.component) !== undefined) {
+      var _selectionExtensionSt3;
+      if (editorAnalyticsAPI) {
+        editorAnalyticsAPI.fireAnalyticsEvent({
+          action: ACTION.VIEWED,
+          actionSubject: ACTION_SUBJECT.EDITOR_PLUGIN_SELECTION_EXTENSION,
+          actionSubjectId: ACTION_SUBJECT_ID.EDITOR_PLUGIN_SELECTION_EXTENSION_COMPONENT,
+          eventType: EVENT_TYPE.TRACK
+        });
+      }
+      // Sets reference to active component
+      componentRef.current = selectionExtensionState === null || selectionExtensionState === void 0 || (_selectionExtensionSt3 = selectionExtensionState.activeExtension) === null || _selectionExtensionSt3 === void 0 ? void 0 : _selectionExtensionSt3.extension.component;
+    }
+  }, [selectionExtensionState, editorAnalyticsAPI]);
+  if (!(selectionExtensionState !== null && selectionExtensionState !== void 0 && (_selectionExtensionSt4 = selectionExtensionState.activeExtension) !== null && _selectionExtensionSt4 !== void 0 && _selectionExtensionSt4.extension.component)) {
     return null;
   }
   var ExtensionComponent = selectionExtensionState.activeExtension.extension.component;

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

@@ -1,11 +1,13 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import React, { useState } from 'react';
 import { injectIntl } from 'react-intl-next';
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import { DropdownMenuWithKeyboardNavigation as DropdownMenu } from '@atlaskit/editor-common/ui-menu';
 import { SelectionExtensionDropdownMenuButton } from './SelectionExtensionDropdownMenuButton';
 var SelectionExtensionDropdownMenuComponent = /*#__PURE__*/React.memo(function (_ref) {
   var items = _ref.items,
-    onItemActivated = _ref.onItemActivated;
+    onItemActivated = _ref.onItemActivated,
+    editorAnalyticsAPI = _ref.editorAnalyticsAPI;
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     isMenuOpen = _useState2[0],
@@ -21,9 +23,23 @@ var SelectionExtensionDropdownMenuComponent = /*#__PURE__*/React.memo(function (
     onItemActivated: onItemActivated,
     "data-testid": "selection-extension-dropdown-menu"
   }, /*#__PURE__*/React.createElement(SelectionExtensionDropdownMenuButton, {
+    "aria-expanded": isMenuOpen,
+    selected: isMenuOpen,
     onClick: function onClick() {
       return setIsMenuOpen(function (prevIsMenuOpen) {
-        return !prevIsMenuOpen;
+        var nextIsMenuOpen = !prevIsMenuOpen;
+        if (editorAnalyticsAPI) {
+          editorAnalyticsAPI.fireAnalyticsEvent({
+            action: ACTION.CLICKED,
+            actionSubject: ACTION_SUBJECT.BUTTON,
+            actionSubjectId: ACTION_SUBJECT_ID.EDITOR_PLUGIN_SELECTION_EXTENSION_DROPDOWN,
+            eventType: EVENT_TYPE.TRACK,
+            attributes: {
+              toggle: nextIsMenuOpen ? ACTION.OPENED : ACTION.CLOSED
+            }
+          });
+        }
+        return nextIsMenuOpen;
       });
     }
   }));

package/dist/esm/ui/toolbar/SelectionExtensionDropdownMenuButton.js

@@ -1,14 +1,30 @@
 import React from 'react';
 import { injectIntl } from 'react-intl-next';
+import { selectionExtensionMessages } from '@atlaskit/editor-common/messages';
 import { ToolbarButton } from '@atlaskit/editor-common/ui-menu';
 import AppsIcon from '@atlaskit/icon/core/apps';
+import ChevronDownIcon from '@atlaskit/icon/utility/migration/chevron-down';
 var SelectionExtensionDropdownMenuButtonComponent = function SelectionExtensionDropdownMenuButtonComponent(_ref) {
-  var onClick = _ref.onClick;
+  var onClick = _ref.onClick,
+    selected = _ref.selected,
+    ariaExpanded = _ref['aria-expanded'],
+    intl = _ref.intl;
   return /*#__PURE__*/React.createElement(ToolbarButton, {
     testId: "selection-extension-dropdown-button",
-    onClick: onClick
+    "aria-label": intl.formatMessage(selectionExtensionMessages.selectionExtensionDropdownButtonLabel),
+    "aria-haspopup": "true",
+    spacing: "compact",
+    title: intl.formatMessage(selectionExtensionMessages.selectionExtensionDropdownButtonLabel),
+    onClick: onClick,
+    "aria-expanded": ariaExpanded,
+    selected: selected,
+    iconAfter: /*#__PURE__*/React.createElement(ChevronDownIcon, {
+      spacing: "none",
+      label: intl.formatMessage(selectionExtensionMessages.selectionExtensionDropdownButtonLabel)
+    })
   }, /*#__PURE__*/React.createElement(AppsIcon, {
-    label: "selection extension dropdown"
+    label: intl.formatMessage(selectionExtensionMessages.selectionExtensionDropdownButtonLabel),
+    spacing: "none"
   }));
 };
 export var SelectionExtensionDropdownMenuButton = injectIntl(SelectionExtensionDropdownMenuButtonComponent);

package/dist/esm/ui/toolbar/SelectionExtensionItems.js

@@ -9,6 +9,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import React, { useMemo } from 'react';
 import { injectIntl } from 'react-intl-next';
 import { v4 as uuid } from 'uuid';
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import { SelectionExtensionDropdownMenu } from './SelectionExtensionDropdownMenu';
 var transformExtensionsToItems = function transformExtensionsToItems(extensions) {
   var extensionToItems = extensions.map(function (extension) {
@@ -26,7 +27,8 @@ var transformExtensionsToItems = function transformExtensionsToItems(extensions)
 };
 export var SelectionExtensionItemsComponent = function SelectionExtensionItemsComponent(_ref) {
   var extensions = _ref.extensions,
-    onExtensionClick = _ref.onExtensionClick;
+    onExtensionClick = _ref.onExtensionClick,
+    editorAnalyticsAPI = _ref.editorAnalyticsAPI;
   var extensionsWithIdentifier = useMemo(function () {
     return extensions.map(function (extension) {
       return _objectSpread(_objectSpread({}, extension), {}, {
@@ -44,9 +46,18 @@ export var SelectionExtensionItemsComponent = function SelectionExtensionItemsCo
     });
     if (extension) {
       onExtensionClick(extension);
+      if (editorAnalyticsAPI) {
+        editorAnalyticsAPI.fireAnalyticsEvent({
+          action: ACTION.CLICKED,
+          actionSubject: ACTION_SUBJECT.BUTTON,
+          actionSubjectId: ACTION_SUBJECT_ID.EDITOR_PLUGIN_SELECTION_EXTENSION_ITEM,
+          eventType: EVENT_TYPE.TRACK
+        });
+      }
     }
   };
   return /*#__PURE__*/React.createElement(SelectionExtensionDropdownMenu, {
+    editorAnalyticsAPI: editorAnalyticsAPI,
     items: items,
     onItemActivated: handleOnItemActivated
   });

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

@@ -32,14 +32,19 @@ export type SelectionExtensionCoords = {
     top: number;
     bottom: number;
 };
+export declare enum SelectionExtensionActionTypes {
+    SET_ACTIVE_EXTENSION = "set-active-extension",
+    UPDATE_ACTIVE_EXTENSION_COORDS = "update-active-extension-coords",
+    CLEAR_ACTIVE_EXTENSION = "clear-active-extension"
+}
 export type UpdateActiveExtensionAction = {
-    type: 'set-active-extension';
+    type: SelectionExtensionActionTypes.SET_ACTIVE_EXTENSION;
     extension: SelectionExtensionContract;
 } | {
-    type: 'update-active-extension-coords';
+    type: SelectionExtensionActionTypes.UPDATE_ACTIVE_EXTENSION_COORDS;
     coords: SelectionExtensionCoords;
 } | {
-    type: 'clear-active-extension';
+    type: SelectionExtensionActionTypes.CLEAR_ACTIVE_EXTENSION;
 };
 export type SelectionExtensionPluginState = {
     activeExtension?: {

package/dist/types/ui/extension/SelectionExtensionComponentWrapper.d.ts

@@ -1,10 +1,12 @@
 import React from 'react';
+import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { SelectionExtensionPlugin } from '../../selectionExtensionPluginType';
 type SelectionExtensionComponentWrapperProps = {
     api: ExtractInjectionAPI<SelectionExtensionPlugin> | undefined;
     editorView: EditorView;
+    editorAnalyticsAPI?: EditorAnalyticsAPI;
 };
-export declare const SelectionExtensionComponentWrapper: ({ api, }: SelectionExtensionComponentWrapperProps) => React.JSX.Element | null;
+export declare const SelectionExtensionComponentWrapper: ({ api, editorAnalyticsAPI, }: SelectionExtensionComponentWrapperProps) => React.JSX.Element | null;
 export {};

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import type { WrappedComponentProps } from 'react-intl-next';
+import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 import { type MenuItem } from '@atlaskit/editor-common/ui-menu';
 import { type MenuItemsType } from '../../types';
 export type SelectionExtensionDropdownMenuProps = {
@@ -8,6 +9,7 @@ export type SelectionExtensionDropdownMenuProps = {
         item: MenuItem;
         shouldCloseMenu?: boolean;
     }) => void;
+    editorAnalyticsAPI?: EditorAnalyticsAPI;
 } & WrappedComponentProps;
 export declare const SelectionExtensionDropdownMenu: React.FC<import("react-intl-next").WithIntlProps<{
     items: MenuItemsType;
@@ -15,6 +17,7 @@ export declare const SelectionExtensionDropdownMenu: React.FC<import("react-intl
         item: MenuItem;
         shouldCloseMenu?: boolean;
     }) => void) | undefined;
+    editorAnalyticsAPI?: EditorAnalyticsAPI | undefined;
 } & WrappedComponentProps>> & {
     WrappedComponent: React.ComponentType<{
         items: MenuItemsType;
@@ -22,5 +25,6 @@ export declare const SelectionExtensionDropdownMenu: React.FC<import("react-intl
             item: MenuItem;
             shouldCloseMenu?: boolean;
         }) => void) | undefined;
+        editorAnalyticsAPI?: EditorAnalyticsAPI | undefined;
     } & WrappedComponentProps>;
 };

package/dist/types/ui/toolbar/SelectionExtensionItems.d.ts

@@ -16,7 +16,7 @@ type SelectionExtensionItemsProps = {
     extensions: SelectionExtensionContract[];
     onExtensionClick: (extension: SelectionExtensionContract) => void;
 } & WrappedComponentProps;
-export declare const SelectionExtensionItemsComponent: ({ extensions, onExtensionClick, }: SelectionExtensionItemsProps) => React.JSX.Element;
+export declare const SelectionExtensionItemsComponent: ({ extensions, onExtensionClick, editorAnalyticsAPI, }: SelectionExtensionItemsProps) => React.JSX.Element;
 export declare const SelectionExtensionItems: React.FC<import("react-intl-next").WithIntlProps<SelectionExtensionItemsProps>> & {
     WrappedComponent: React.ComponentType<SelectionExtensionItemsProps>;
 };

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

@@ -32,14 +32,19 @@ export type SelectionExtensionCoords = {
     top: number;
     bottom: number;
 };
+export declare enum SelectionExtensionActionTypes {
+    SET_ACTIVE_EXTENSION = "set-active-extension",
+    UPDATE_ACTIVE_EXTENSION_COORDS = "update-active-extension-coords",
+    CLEAR_ACTIVE_EXTENSION = "clear-active-extension"
+}
 export type UpdateActiveExtensionAction = {
-    type: 'set-active-extension';
+    type: SelectionExtensionActionTypes.SET_ACTIVE_EXTENSION;
     extension: SelectionExtensionContract;
 } | {
-    type: 'update-active-extension-coords';
+    type: SelectionExtensionActionTypes.UPDATE_ACTIVE_EXTENSION_COORDS;
     coords: SelectionExtensionCoords;
 } | {
-    type: 'clear-active-extension';
+    type: SelectionExtensionActionTypes.CLEAR_ACTIVE_EXTENSION;
 };
 export type SelectionExtensionPluginState = {
     activeExtension?: {

package/dist/types-ts4.5/ui/extension/SelectionExtensionComponentWrapper.d.ts

@@ -1,10 +1,12 @@
 import React from 'react';
+import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { SelectionExtensionPlugin } from '../../selectionExtensionPluginType';
 type SelectionExtensionComponentWrapperProps = {
     api: ExtractInjectionAPI<SelectionExtensionPlugin> | undefined;
     editorView: EditorView;
+    editorAnalyticsAPI?: EditorAnalyticsAPI;
 };
-export declare const SelectionExtensionComponentWrapper: ({ api, }: SelectionExtensionComponentWrapperProps) => React.JSX.Element | null;
+export declare const SelectionExtensionComponentWrapper: ({ api, editorAnalyticsAPI, }: SelectionExtensionComponentWrapperProps) => React.JSX.Element | null;
 export {};

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import type { WrappedComponentProps } from 'react-intl-next';
+import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 import { type MenuItem } from '@atlaskit/editor-common/ui-menu';
 import { type MenuItemsType } from '../../types';
 export type SelectionExtensionDropdownMenuProps = {
@@ -8,6 +9,7 @@ export type SelectionExtensionDropdownMenuProps = {
         item: MenuItem;
         shouldCloseMenu?: boolean;
     }) => void;
+    editorAnalyticsAPI?: EditorAnalyticsAPI;
 } & WrappedComponentProps;
 export declare const SelectionExtensionDropdownMenu: React.FC<import("react-intl-next").WithIntlProps<{
     items: MenuItemsType;
@@ -15,6 +17,7 @@ export declare const SelectionExtensionDropdownMenu: React.FC<import("react-intl
         item: MenuItem;
         shouldCloseMenu?: boolean;
     }) => void) | undefined;
+    editorAnalyticsAPI?: EditorAnalyticsAPI | undefined;
 } & WrappedComponentProps>> & {
     WrappedComponent: React.ComponentType<{
         items: MenuItemsType;
@@ -22,5 +25,6 @@ export declare const SelectionExtensionDropdownMenu: React.FC<import("react-intl
             item: MenuItem;
             shouldCloseMenu?: boolean;
         }) => void) | undefined;
+        editorAnalyticsAPI?: EditorAnalyticsAPI | undefined;
     } & WrappedComponentProps>;
 };

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

@@ -16,7 +16,7 @@ type SelectionExtensionItemsProps = {
     extensions: SelectionExtensionContract[];
     onExtensionClick: (extension: SelectionExtensionContract) => void;
 } & WrappedComponentProps;
-export declare const SelectionExtensionItemsComponent: ({ extensions, onExtensionClick, }: SelectionExtensionItemsProps) => React.JSX.Element;
+export declare const SelectionExtensionItemsComponent: ({ extensions, onExtensionClick, editorAnalyticsAPI, }: SelectionExtensionItemsProps) => React.JSX.Element;
 export declare const SelectionExtensionItems: React.FC<import("react-intl-next").WithIntlProps<SelectionExtensionItemsProps>> & {
     WrappedComponent: React.ComponentType<SelectionExtensionItemsProps>;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-selection-extension",
-	"version": "2.1.0",
+	"version": "2.1.2",
 	"description": "editor-plugin-selection-extension plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -36,7 +36,7 @@
 		".": "./src/index.ts"
 	},
 	"dependencies": {
-		"@atlaskit/editor-common": "^100.2.0",
+		"@atlaskit/editor-common": "^100.3.0",
 		"@atlaskit/editor-plugin-analytics": "^2.0.0",
 		"@atlaskit/editor-plugin-editor-viewmode": "^3.0.0",
 		"@atlaskit/editor-plugin-selection-toolbar": "^2.0.0",