@atlaskit/editor-plugin-block-menu 3.2.7 → 3.2.8

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/editor-plugin-block-menu
 
+## 3.2.8
+
+### Patch Changes
+
+- [`3e49f15a87d52`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/3e49f15a87d52) -
+  Add analytics events for block menu discovery
+- Updated dependencies
+
 ## 3.2.7
 
 ### Patch Changes

package/dist/cjs/ui/block-menu-provider.js

@@ -8,7 +8,8 @@ exports.useBlockMenu = exports.BlockMenuProvider = void 0;
 var _react = _interopRequireWildcard(require("react"));
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var BlockMenuContext = /*#__PURE__*/(0, _react.createContext)({
-  onDropdownOpenChanged: function onDropdownOpenChanged() {}
+  onDropdownOpenChanged: function onDropdownOpenChanged() {},
+  fireAnalyticsEvent: function fireAnalyticsEvent() {}
 });
 var useBlockMenu = exports.useBlockMenu = function useBlockMenu() {
   var context = (0, _react.useContext)(BlockMenuContext);
@@ -32,9 +33,14 @@ var BlockMenuProvider = exports.BlockMenuProvider = function BlockMenuProvider(_
       }, 1);
     }
   }, [api]);
+  var fireAnalyticsEvent = (0, _react.useCallback)(function (payload) {
+    var _api$analytics;
+    api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 || _api$analytics.actions.fireAnalyticsEvent(payload);
+  }, [api]);
   return /*#__PURE__*/_react.default.createElement(BlockMenuContext.Provider, {
     value: {
-      onDropdownOpenChanged: onDropdownOpenChanged
+      onDropdownOpenChanged: onDropdownOpenChanged,
+      fireAnalyticsEvent: fireAnalyticsEvent
     }
   }, children);
 };

package/dist/cjs/ui/block-menu.js

@@ -11,6 +11,7 @@ var _runtime = require("@compiled/react/runtime");
 var _react = _interopRequireWildcard(require("react"));
 var _reactIntlNext = require("react-intl-next");
 var _css = require("@atlaskit/css");
+var _analytics = require("@atlaskit/editor-common/analytics");
 var _hooks = require("@atlaskit/editor-common/hooks");
 var _styles = require("@atlaskit/editor-common/styles");
 var _ui = require("@atlaskit/editor-common/ui");
@@ -76,8 +77,10 @@ var BlockMenu = function BlockMenu(_ref2) {
     isMenuOpen = _useSharedPluginState.isMenuOpen,
     currentUserIntent = _useSharedPluginState.currentUserIntent;
   var _useBlockMenu = (0, _blockMenuProvider.useBlockMenu)(),
-    onDropdownOpenChanged = _useBlockMenu.onDropdownOpenChanged;
+    onDropdownOpenChanged = _useBlockMenu.onDropdownOpenChanged,
+    fireAnalyticsEvent = _useBlockMenu.fireAnalyticsEvent;
   var targetHandleRef = editorView === null || editorView === void 0 || (_editorView$dom = editorView.dom) === null || _editorView$dom === void 0 ? void 0 : _editorView$dom.querySelector(_styles.DRAG_HANDLE_SELECTOR);
+  var prevIsMenuOpenRef = (0, _react.useRef)(false);
   var hasFocus = (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu_keyboard_navigation', 'isEnabled', true) ? (_ref3 = (editorView === null || editorView === void 0 ? void 0 : editorView.hasFocus()) || document.activeElement === targetHandleRef) !== null && _ref3 !== void 0 ? _ref3 : false : (_editorView$hasFocus = editorView === null || editorView === void 0 ? void 0 : editorView.hasFocus()) !== null && _editorView$hasFocus !== void 0 ? _editorView$hasFocus : false;
   var hasSelection = !!editorView && !editorView.state.selection.empty;
 
@@ -89,8 +92,23 @@ var BlockMenu = function BlockMenu(_ref2) {
     if (!isMenuOpen || !menuTriggerBy || !isSelectedViaDragHandle || !hasFocus || !shouldShowBlockMenuForEmptyLine || ['resizing', 'dragging'].includes(currentUserIntent || '')) {
       return;
     }
+
+    // Fire analytics event when block menu opens (only on first transition from closed to open)
+    if (!prevIsMenuOpenRef.current && isMenuOpen) {
+      fireAnalyticsEvent === null || fireAnalyticsEvent === void 0 || fireAnalyticsEvent({
+        action: _analytics.ACTION.OPENED,
+        actionSubject: _analytics.ACTION_SUBJECT.BLOCK_MENU,
+        eventType: _analytics.EVENT_TYPE.UI,
+        attributes: {
+          inputMethod: _analytics.INPUT_METHOD.MOUSE
+        }
+      });
+    }
+
+    // Update the previous state
+    prevIsMenuOpenRef.current = isMenuOpen;
     api === null || api === void 0 || api.core.actions.execute(api === null || api === void 0 || (_api$userIntent = api.userIntent) === null || _api$userIntent === void 0 ? void 0 : _api$userIntent.commands.setCurrentUserIntent('blockMenuOpen'));
-  }, [api, isMenuOpen, menuTriggerBy, isSelectedViaDragHandle, hasFocus, shouldShowBlockMenuForEmptyLine, currentUserIntent]);
+  }, [api, isMenuOpen, menuTriggerBy, isSelectedViaDragHandle, hasFocus, shouldShowBlockMenuForEmptyLine, currentUserIntent, fireAnalyticsEvent]);
   if (!isMenuOpen) {
     return null;
   }

package/dist/cjs/ui/copy-block.js

@@ -8,6 +8,7 @@ exports.default = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
 var _reactIntlNext = require("react-intl-next");
+var _analytics = require("@atlaskit/editor-common/analytics");
 var _blockMenu = require("@atlaskit/editor-common/block-menu");
 var _clipboard = require("@atlaskit/editor-common/clipboard");
 var _copyButton = require("@atlaskit/editor-common/copy-button");
@@ -18,6 +19,7 @@ var _utils = require("@atlaskit/editor-tables/utils");
 var _editorToolbar = require("@atlaskit/editor-toolbar");
 var _copy = _interopRequireDefault(require("@atlaskit/icon/core/copy"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _blockMenuProvider = require("./block-menu-provider");
 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 toDOMFromFragment = function toDOMFromFragment(fragment, schema) {
@@ -27,8 +29,20 @@ var CopyBlockMenuItem = function CopyBlockMenuItem(_ref) {
   var api = _ref.api;
   var _useIntl = (0, _reactIntlNext.useIntl)(),
     formatMessage = _useIntl.formatMessage;
+  var _useBlockMenu = (0, _blockMenuProvider.useBlockMenu)(),
+    fireAnalyticsEvent = _useBlockMenu.fireAnalyticsEvent;
   var copyHandler = function copyHandler(event) {
     var _api$selection;
+    fireAnalyticsEvent === null || fireAnalyticsEvent === void 0 || fireAnalyticsEvent({
+      action: _analytics.ACTION.CLICKED,
+      actionSubject: _analytics.ACTION_SUBJECT.BLOCK_MENU_ITEM,
+      actionSubjectId: _analytics.ACTION_SUBJECT_ID.COPY_BLOCK,
+      eventType: _analytics.EVENT_TYPE.UI,
+      attributes: {
+        inputMethod: _analytics.INPUT_METHOD.MOUSE
+      }
+    });
+
     // prevent click event from bubbling up to the ancestor elements
     event.stopPropagation();
     // get the current selection
@@ -108,9 +122,7 @@ var CopyBlockMenuItem = function CopyBlockMenuItem(_ref) {
     elemBefore: /*#__PURE__*/_react.default.createElement(_copy.default, {
       label: ""
     }),
-    onClick: function onClick(e) {
-      return copyHandler(e);
-    }
+    onClick: copyHandler
   }, text);
 };
 var _default = exports.default = (0, _reactIntlNext.injectIntl)(CopyBlockMenuItem);

package/dist/cjs/ui/copy-link.js

@@ -8,10 +8,12 @@ Object.defineProperty(exports, "__esModule", {
 exports.CopyLinkDropdownItem = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactIntlNext = require("react-intl-next");
+var _analytics = require("@atlaskit/editor-common/analytics");
 var _messages = require("@atlaskit/editor-common/messages");
 var _editorToolbar = require("@atlaskit/editor-toolbar");
 var _link = _interopRequireDefault(require("@atlaskit/icon/core/link"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _blockMenuProvider = require("./block-menu-provider");
 var _copyLink = require("./utils/copyLink");
 var _isNestedNode = require("./utils/isNestedNode");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
@@ -20,7 +22,18 @@ var CopyLinkDropdownItemContent = function CopyLinkDropdownItemContent(_ref) {
     config = _ref.config;
   var _useIntl = (0, _reactIntlNext.useIntl)(),
     formatMessage = _useIntl.formatMessage;
+  var _useBlockMenu = (0, _blockMenuProvider.useBlockMenu)(),
+    fireAnalyticsEvent = _useBlockMenu.fireAnalyticsEvent;
   var handleClick = (0, _react.useCallback)(function () {
+    fireAnalyticsEvent === null || fireAnalyticsEvent === void 0 || fireAnalyticsEvent({
+      action: _analytics.ACTION.CLICKED,
+      actionSubject: _analytics.ACTION_SUBJECT.BLOCK_MENU_ITEM,
+      actionSubjectId: _analytics.ACTION_SUBJECT_ID.COPY_LINK_TO_BLOCK,
+      eventType: _analytics.EVENT_TYPE.UI,
+      attributes: {
+        inputMethod: _analytics.INPUT_METHOD.MOUSE
+      }
+    });
     api === null || api === void 0 || api.core.actions.execute(function (_ref2) {
       var _api$blockControls;
       var tr = _ref2.tr;
@@ -33,7 +46,7 @@ var CopyLinkDropdownItemContent = function CopyLinkDropdownItemContent(_ref) {
     });
     api === null || api === void 0 || api.core.actions.focus();
     return (0, _copyLink.copyLink)(config === null || config === void 0 ? void 0 : config.getLinkPath, config === null || config === void 0 ? void 0 : config.blockQueryParam, api);
-  }, [config === null || config === void 0 ? void 0 : config.getLinkPath, config === null || config === void 0 ? void 0 : config.blockQueryParam, api]);
+  }, [config === null || config === void 0 ? void 0 : config.getLinkPath, config === null || config === void 0 ? void 0 : config.blockQueryParam, api, fireAnalyticsEvent]);
   var checkIsNestedNode = (0, _react.useCallback)(function () {
     var _api$selection, _api$blockControls2;
     var selection = api === null || api === void 0 || (_api$selection = api.selection) === null || _api$selection === void 0 || (_api$selection = _api$selection.sharedState) === null || _api$selection === void 0 || (_api$selection = _api$selection.currentState()) === null || _api$selection === void 0 ? void 0 : _api$selection.selection;

package/dist/cjs/ui/delete-button.js

@@ -8,6 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.DeleteDropdownItem = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactIntlNext = require("react-intl-next");
+var _analytics = require("@atlaskit/editor-common/analytics");
 var _blockMenu = require("@atlaskit/editor-common/block-menu");
 var _messages = require("@atlaskit/editor-common/messages");
 var _state = require("@atlaskit/editor-prosemirror/state");
@@ -17,14 +18,26 @@ var _delete = _interopRequireDefault(require("@atlaskit/icon/core/delete"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _box = require("@atlaskit/primitives/box");
 var _text = _interopRequireDefault(require("@atlaskit/primitives/text"));
+var _blockMenuProvider = require("./block-menu-provider");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var DeleteDropdownItemContent = function DeleteDropdownItemContent(_ref) {
   var _api$core$sharedState;
   var api = _ref.api;
   var _useIntl = (0, _reactIntlNext.useIntl)(),
     formatMessage = _useIntl.formatMessage;
+  var _useBlockMenu = (0, _blockMenuProvider.useBlockMenu)(),
+    fireAnalyticsEvent = _useBlockMenu.fireAnalyticsEvent;
   var nodeTypes = Object.values((api === null || api === void 0 || (_api$core$sharedState = api.core.sharedState.currentState()) === null || _api$core$sharedState === void 0 || (_api$core$sharedState = _api$core$sharedState.schema) === null || _api$core$sharedState === void 0 ? void 0 : _api$core$sharedState.nodes) || {});
   var onClick = function onClick() {
+    fireAnalyticsEvent === null || fireAnalyticsEvent === void 0 || fireAnalyticsEvent({
+      action: _analytics.ACTION.CLICKED,
+      actionSubject: _analytics.ACTION_SUBJECT.BLOCK_MENU_ITEM,
+      actionSubjectId: _analytics.ACTION_SUBJECT_ID.DELETE_BLOCK,
+      eventType: _analytics.EVENT_TYPE.UI,
+      attributes: {
+        inputMethod: _analytics.INPUT_METHOD.MOUSE
+      }
+    });
     api === null || api === void 0 || api.core.actions.execute(function (_ref2) {
       var _api$blockControls;
       var tr = _ref2.tr;

package/dist/cjs/ui/format-menu-nested.js

@@ -8,12 +8,14 @@ Object.defineProperty(exports, "__esModule", {
 exports.FormatMenuComponent = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactIntlNext = require("react-intl-next");
+var _analytics = require("@atlaskit/editor-common/analytics");
 var _blockMenu = require("@atlaskit/editor-common/block-menu");
 var _messages = require("@atlaskit/editor-common/messages");
 var _editorToolbar = require("@atlaskit/editor-toolbar");
 var _changes = _interopRequireDefault(require("@atlaskit/icon/core/changes"));
 var _chevronRight = _interopRequireDefault(require("@atlaskit/icon/core/chevron-right"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _blockMenuProvider = require("./block-menu-provider");
 var _checkIsFormatMenuHidden = require("./utils/checkIsFormatMenuHidden");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var FormatMenuComponent = exports.FormatMenuComponent = function FormatMenuComponent(_ref) {
@@ -21,10 +23,23 @@ var FormatMenuComponent = exports.FormatMenuComponent = function FormatMenuCompo
     children = _ref.children;
   var _useIntl = (0, _reactIntlNext.useIntl)(),
     formatMessage = _useIntl.formatMessage;
+  var _useBlockMenu = (0, _blockMenuProvider.useBlockMenu)(),
+    fireAnalyticsEvent = _useBlockMenu.fireAnalyticsEvent;
   var text = (0, _platformFeatureFlags.fg)('platform_editor_block_menu_patch_1') ? formatMessage(_messages.blockMenuMessages.turnInto) : formatMessage(_blockMenu.messages.turnInto);
   var isDisabled = (0, _react.useMemo)(function () {
     return (0, _platformFeatureFlags.fg)('platform_editor_block_menu_for_disabled_nodes') ? (0, _checkIsFormatMenuHidden.checkIsFormatMenuHidden)(api) : false;
   }, [api]);
+  var handleClick = (0, _react.useCallback)(function () {
+    fireAnalyticsEvent === null || fireAnalyticsEvent === void 0 || fireAnalyticsEvent({
+      action: _analytics.ACTION.CLICKED,
+      actionSubject: _analytics.ACTION_SUBJECT.BLOCK_MENU_ITEM,
+      actionSubjectId: _analytics.ACTION_SUBJECT_ID.FORMAT_MENU,
+      eventType: _analytics.EVENT_TYPE.UI,
+      attributes: {
+        inputMethod: _analytics.INPUT_METHOD.MOUSE
+      }
+    });
+  }, [fireAnalyticsEvent]);
   return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarNestedDropdownMenu, {
     text: text,
     elemBefore: /*#__PURE__*/_react.default.createElement(_changes.default, {
@@ -34,6 +49,7 @@ var FormatMenuComponent = exports.FormatMenuComponent = function FormatMenuCompo
       label: ""
     }),
     enableMaxHeight: true,
-    isDisabled: isDisabled
+    isDisabled: isDisabled,
+    onClick: handleClick
   }, children);
 };

package/dist/cjs/ui/move-down.js

@@ -7,15 +7,19 @@ Object.defineProperty(exports, "__esModule", {
 exports.MoveDownDropdownItem = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _reactIntlNext = require("react-intl-next");
+var _analytics = require("@atlaskit/editor-common/analytics");
 var _hooks = require("@atlaskit/editor-common/hooks");
 var _messages = require("@atlaskit/editor-common/messages");
 var _types = require("@atlaskit/editor-common/types");
 var _editorToolbar = require("@atlaskit/editor-toolbar");
 var _arrowDown = _interopRequireDefault(require("@atlaskit/icon/core/arrow-down"));
+var _blockMenuProvider = require("./block-menu-provider");
 var MoveDownDropdownItemContent = function MoveDownDropdownItemContent(_ref) {
   var api = _ref.api;
   var _useIntl = (0, _reactIntlNext.useIntl)(),
     formatMessage = _useIntl.formatMessage;
+  var _useBlockMenu = (0, _blockMenuProvider.useBlockMenu)(),
+    fireAnalyticsEvent = _useBlockMenu.fireAnalyticsEvent;
   var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api, ['blockControls'], function (_ref2) {
       var _blockControlsState$b;
       var blockControlsState = _ref2.blockControlsState;
@@ -25,6 +29,15 @@ var MoveDownDropdownItemContent = function MoveDownDropdownItemContent(_ref) {
     }),
     canMoveDown = _useSharedPluginState.canMoveDown;
   var handleClick = function handleClick() {
+    fireAnalyticsEvent === null || fireAnalyticsEvent === void 0 || fireAnalyticsEvent({
+      action: _analytics.ACTION.CLICKED,
+      actionSubject: _analytics.ACTION_SUBJECT.BLOCK_MENU_ITEM,
+      actionSubjectId: _analytics.ACTION_SUBJECT_ID.MOVE_DOWN_BLOCK,
+      eventType: _analytics.EVENT_TYPE.UI,
+      attributes: {
+        inputMethod: _analytics.INPUT_METHOD.MOUSE
+      }
+    });
     api === null || api === void 0 || api.core.actions.execute(function (_ref3) {
       var _api$blockControls, _api$blockControls2;
       var tr = _ref3.tr;

package/dist/cjs/ui/move-up.js

@@ -7,15 +7,19 @@ Object.defineProperty(exports, "__esModule", {
 exports.MoveUpDropdownItem = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _reactIntlNext = require("react-intl-next");
+var _analytics = require("@atlaskit/editor-common/analytics");
 var _hooks = require("@atlaskit/editor-common/hooks");
 var _messages = require("@atlaskit/editor-common/messages");
 var _types = require("@atlaskit/editor-common/types");
 var _editorToolbar = require("@atlaskit/editor-toolbar");
 var _arrowUp = _interopRequireDefault(require("@atlaskit/icon/core/arrow-up"));
+var _blockMenuProvider = require("./block-menu-provider");
 var MoveUpDropdownItemContent = function MoveUpDropdownItemContent(_ref) {
   var api = _ref.api;
   var _useIntl = (0, _reactIntlNext.useIntl)(),
     formatMessage = _useIntl.formatMessage;
+  var _useBlockMenu = (0, _blockMenuProvider.useBlockMenu)(),
+    fireAnalyticsEvent = _useBlockMenu.fireAnalyticsEvent;
   var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api, ['blockControls'], function (_ref2) {
       var _blockControlsState$b;
       var blockControlsState = _ref2.blockControlsState;
@@ -25,6 +29,15 @@ var MoveUpDropdownItemContent = function MoveUpDropdownItemContent(_ref) {
     }),
     canMoveUp = _useSharedPluginState.canMoveUp;
   var handleClick = function handleClick() {
+    fireAnalyticsEvent === null || fireAnalyticsEvent === void 0 || fireAnalyticsEvent({
+      action: _analytics.ACTION.CLICKED,
+      actionSubject: _analytics.ACTION_SUBJECT.BLOCK_MENU_ITEM,
+      actionSubjectId: _analytics.ACTION_SUBJECT_ID.MOVE_UP_BLOCK,
+      eventType: _analytics.EVENT_TYPE.UI,
+      attributes: {
+        inputMethod: _analytics.INPUT_METHOD.MOUSE
+      }
+    });
     api === null || api === void 0 || api.core.actions.execute(function (_ref3) {
       var _api$blockControls, _api$blockControls2;
       var tr = _ref3.tr;

package/dist/es2019/ui/block-menu-provider.js

@@ -1,6 +1,7 @@
 import React, { useCallback, createContext, useContext } from 'react';
 const BlockMenuContext = /*#__PURE__*/createContext({
-  onDropdownOpenChanged: () => {}
+  onDropdownOpenChanged: () => {},
+  fireAnalyticsEvent: () => {}
 });
 export const useBlockMenu = () => {
   const context = useContext(BlockMenuContext);
@@ -23,9 +24,14 @@ export const BlockMenuProvider = ({
       }), 1);
     }
   }, [api]);
+  const fireAnalyticsEvent = useCallback(payload => {
+    var _api$analytics;
+    api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions.fireAnalyticsEvent(payload);
+  }, [api]);
   return /*#__PURE__*/React.createElement(BlockMenuContext.Provider, {
     value: {
-      onDropdownOpenChanged
+      onDropdownOpenChanged,
+      fireAnalyticsEvent
     }
   }, children);
 };

package/dist/es2019/ui/block-menu.js

@@ -1,9 +1,10 @@
 /* block-menu.tsx generated by @compiled/babel-plugin v0.38.1 */
 import "./block-menu.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
-import React, { useContext, useEffect } from 'react';
+import React, { useContext, useEffect, useRef } from 'react';
 import { injectIntl } from 'react-intl-next';
 import { cx } from '@atlaskit/css';
+import { ACTION, ACTION_SUBJECT, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { DRAG_HANDLE_SELECTOR, DRAG_HANDLE_WIDTH } from '@atlaskit/editor-common/styles';
 import { Popup } from '@atlaskit/editor-common/ui';
@@ -65,9 +66,11 @@ const BlockMenu = ({
     };
   });
   const {
-    onDropdownOpenChanged
+    onDropdownOpenChanged,
+    fireAnalyticsEvent
   } = useBlockMenu();
   const targetHandleRef = editorView === null || editorView === void 0 ? void 0 : (_editorView$dom = editorView.dom) === null || _editorView$dom === void 0 ? void 0 : _editorView$dom.querySelector(DRAG_HANDLE_SELECTOR);
+  const prevIsMenuOpenRef = useRef(false);
   const hasFocus = expValEqualsNoExposure('platform_editor_block_menu_keyboard_navigation', 'isEnabled', true) ? (_ref = (editorView === null || editorView === void 0 ? void 0 : editorView.hasFocus()) || document.activeElement === targetHandleRef) !== null && _ref !== void 0 ? _ref : false : (_editorView$hasFocus = editorView === null || editorView === void 0 ? void 0 : editorView.hasFocus()) !== null && _editorView$hasFocus !== void 0 ? _editorView$hasFocus : false;
   const hasSelection = !!editorView && !editorView.state.selection.empty;
 
@@ -79,8 +82,23 @@ const BlockMenu = ({
     if (!isMenuOpen || !menuTriggerBy || !isSelectedViaDragHandle || !hasFocus || !shouldShowBlockMenuForEmptyLine || ['resizing', 'dragging'].includes(currentUserIntent || '')) {
       return;
     }
+
+    // Fire analytics event when block menu opens (only on first transition from closed to open)
+    if (!prevIsMenuOpenRef.current && isMenuOpen) {
+      fireAnalyticsEvent === null || fireAnalyticsEvent === void 0 ? void 0 : fireAnalyticsEvent({
+        action: ACTION.OPENED,
+        actionSubject: ACTION_SUBJECT.BLOCK_MENU,
+        eventType: EVENT_TYPE.UI,
+        attributes: {
+          inputMethod: INPUT_METHOD.MOUSE
+        }
+      });
+    }
+
+    // Update the previous state
+    prevIsMenuOpenRef.current = isMenuOpen;
     api === null || api === void 0 ? void 0 : api.core.actions.execute(api === null || api === void 0 ? void 0 : (_api$userIntent = api.userIntent) === null || _api$userIntent === void 0 ? void 0 : _api$userIntent.commands.setCurrentUserIntent('blockMenuOpen'));
-  }, [api, isMenuOpen, menuTriggerBy, isSelectedViaDragHandle, hasFocus, shouldShowBlockMenuForEmptyLine, currentUserIntent]);
+  }, [api, isMenuOpen, menuTriggerBy, isSelectedViaDragHandle, hasFocus, shouldShowBlockMenuForEmptyLine, currentUserIntent, fireAnalyticsEvent]);
   if (!isMenuOpen) {
     return null;
   }

package/dist/es2019/ui/copy-block.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { injectIntl, useIntl } from 'react-intl-next';
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { messages } from '@atlaskit/editor-common/block-menu';
 import { copyHTMLToClipboard } from '@atlaskit/editor-common/clipboard';
 import { toDOM, copyDomNode } from '@atlaskit/editor-common/copy-button';
@@ -10,6 +11,7 @@ import { isTableSelected } from '@atlaskit/editor-tables/utils';
 import { ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
 import CopyIcon from '@atlaskit/icon/core/copy';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { useBlockMenu } from './block-menu-provider';
 const toDOMFromFragment = (fragment, schema) => {
   return DOMSerializer.fromSchema(schema).serializeFragment(fragment);
 };
@@ -19,8 +21,21 @@ const CopyBlockMenuItem = ({
   const {
     formatMessage
   } = useIntl();
+  const {
+    fireAnalyticsEvent
+  } = useBlockMenu();
   const copyHandler = event => {
     var _api$selection, _api$selection$shared, _api$selection$shared2;
+    fireAnalyticsEvent === null || fireAnalyticsEvent === void 0 ? void 0 : fireAnalyticsEvent({
+      action: ACTION.CLICKED,
+      actionSubject: ACTION_SUBJECT.BLOCK_MENU_ITEM,
+      actionSubjectId: ACTION_SUBJECT_ID.COPY_BLOCK,
+      eventType: EVENT_TYPE.UI,
+      attributes: {
+        inputMethod: INPUT_METHOD.MOUSE
+      }
+    });
+
     // prevent click event from bubbling up to the ancestor elements
     event.stopPropagation();
     // get the current selection
@@ -101,7 +116,7 @@ const CopyBlockMenuItem = ({
     elemBefore: /*#__PURE__*/React.createElement(CopyIcon, {
       label: ""
     }),
-    onClick: e => copyHandler(e)
+    onClick: copyHandler
   }, text);
 };
 export default injectIntl(CopyBlockMenuItem);

package/dist/es2019/ui/copy-link.js

@@ -1,9 +1,11 @@
 import React, { useCallback } from 'react';
 import { useIntl, injectIntl } from 'react-intl-next';
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { blockMenuMessages as messages } from '@atlaskit/editor-common/messages';
 import { ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
 import LinkIcon from '@atlaskit/icon/core/link';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { useBlockMenu } from './block-menu-provider';
 import { copyLink } from './utils/copyLink';
 import { isNestedNode } from './utils/isNestedNode';
 const CopyLinkDropdownItemContent = ({
@@ -13,7 +15,19 @@ const CopyLinkDropdownItemContent = ({
   const {
     formatMessage
   } = useIntl();
+  const {
+    fireAnalyticsEvent
+  } = useBlockMenu();
   const handleClick = useCallback(() => {
+    fireAnalyticsEvent === null || fireAnalyticsEvent === void 0 ? void 0 : fireAnalyticsEvent({
+      action: ACTION.CLICKED,
+      actionSubject: ACTION_SUBJECT.BLOCK_MENU_ITEM,
+      actionSubjectId: ACTION_SUBJECT_ID.COPY_LINK_TO_BLOCK,
+      eventType: EVENT_TYPE.UI,
+      attributes: {
+        inputMethod: INPUT_METHOD.MOUSE
+      }
+    });
     api === null || api === void 0 ? void 0 : api.core.actions.execute(({
       tr
     }) => {
@@ -27,7 +41,7 @@ const CopyLinkDropdownItemContent = ({
     });
     api === null || api === void 0 ? void 0 : api.core.actions.focus();
     return copyLink(config === null || config === void 0 ? void 0 : config.getLinkPath, config === null || config === void 0 ? void 0 : config.blockQueryParam, api);
-  }, [config === null || config === void 0 ? void 0 : config.getLinkPath, config === null || config === void 0 ? void 0 : config.blockQueryParam, api]);
+  }, [config === null || config === void 0 ? void 0 : config.getLinkPath, config === null || config === void 0 ? void 0 : config.blockQueryParam, api, fireAnalyticsEvent]);
   const checkIsNestedNode = useCallback(() => {
     var _api$selection, _api$selection$shared, _api$selection$shared2, _api$blockControls2, _api$blockControls2$s, _api$blockControls2$s2;
     const selection = api === null || api === void 0 ? void 0 : (_api$selection = api.selection) === null || _api$selection === void 0 ? void 0 : (_api$selection$shared = _api$selection.sharedState) === null || _api$selection$shared === void 0 ? void 0 : (_api$selection$shared2 = _api$selection$shared.currentState()) === null || _api$selection$shared2 === void 0 ? void 0 : _api$selection$shared2.selection;

package/dist/es2019/ui/delete-button.js

@@ -1,5 +1,6 @@
 import React, { useCallback } from 'react';
 import { useIntl, injectIntl } from 'react-intl-next';
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { messages } from '@atlaskit/editor-common/block-menu';
 import { blockMenuMessages } from '@atlaskit/editor-common/messages';
 import { TextSelection } from '@atlaskit/editor-prosemirror/state';
@@ -9,6 +10,7 @@ import DeleteIcon from '@atlaskit/icon/core/delete';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { Box } from '@atlaskit/primitives/box';
 import Text from '@atlaskit/primitives/text';
+import { useBlockMenu } from './block-menu-provider';
 const DeleteDropdownItemContent = ({
   api
 }) => {
@@ -16,8 +18,20 @@ const DeleteDropdownItemContent = ({
   const {
     formatMessage
   } = useIntl();
+  const {
+    fireAnalyticsEvent
+  } = useBlockMenu();
   const nodeTypes = Object.values((api === null || api === void 0 ? void 0 : (_api$core$sharedState = api.core.sharedState.currentState()) === null || _api$core$sharedState === void 0 ? void 0 : (_api$core$sharedState2 = _api$core$sharedState.schema) === null || _api$core$sharedState2 === void 0 ? void 0 : _api$core$sharedState2.nodes) || {});
   const onClick = () => {
+    fireAnalyticsEvent === null || fireAnalyticsEvent === void 0 ? void 0 : fireAnalyticsEvent({
+      action: ACTION.CLICKED,
+      actionSubject: ACTION_SUBJECT.BLOCK_MENU_ITEM,
+      actionSubjectId: ACTION_SUBJECT_ID.DELETE_BLOCK,
+      eventType: EVENT_TYPE.UI,
+      attributes: {
+        inputMethod: INPUT_METHOD.MOUSE
+      }
+    });
     api === null || api === void 0 ? void 0 : api.core.actions.execute(({
       tr
     }) => {

package/dist/es2019/ui/format-menu-nested.js

@@ -1,11 +1,13 @@
-import React, { useMemo } from 'react';
+import React, { useMemo, useCallback } from 'react';
 import { useIntl } from 'react-intl-next';
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { messages } from '@atlaskit/editor-common/block-menu';
 import { blockMenuMessages } from '@atlaskit/editor-common/messages';
 import { ToolbarNestedDropdownMenu } from '@atlaskit/editor-toolbar';
 import ChangesIcon from '@atlaskit/icon/core/changes';
 import ChevronRightIcon from '@atlaskit/icon/core/chevron-right';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { useBlockMenu } from './block-menu-provider';
 import { checkIsFormatMenuHidden } from './utils/checkIsFormatMenuHidden';
 export const FormatMenuComponent = ({
   api,
@@ -14,10 +16,24 @@ export const FormatMenuComponent = ({
   const {
     formatMessage
   } = useIntl();
+  const {
+    fireAnalyticsEvent
+  } = useBlockMenu();
   const text = fg('platform_editor_block_menu_patch_1') ? formatMessage(blockMenuMessages.turnInto) : formatMessage(messages.turnInto);
   const isDisabled = useMemo(() => {
     return fg('platform_editor_block_menu_for_disabled_nodes') ? checkIsFormatMenuHidden(api) : false;
   }, [api]);
+  const handleClick = useCallback(() => {
+    fireAnalyticsEvent === null || fireAnalyticsEvent === void 0 ? void 0 : fireAnalyticsEvent({
+      action: ACTION.CLICKED,
+      actionSubject: ACTION_SUBJECT.BLOCK_MENU_ITEM,
+      actionSubjectId: ACTION_SUBJECT_ID.FORMAT_MENU,
+      eventType: EVENT_TYPE.UI,
+      attributes: {
+        inputMethod: INPUT_METHOD.MOUSE
+      }
+    });
+  }, [fireAnalyticsEvent]);
   return /*#__PURE__*/React.createElement(ToolbarNestedDropdownMenu, {
     text: text,
     elemBefore: /*#__PURE__*/React.createElement(ChangesIcon, {
@@ -27,6 +43,7 @@ export const FormatMenuComponent = ({
       label: ""
     }),
     enableMaxHeight: true,
-    isDisabled: isDisabled
+    isDisabled: isDisabled,
+    onClick: handleClick
   }, children);
 };

package/dist/es2019/ui/move-down.js

@@ -1,16 +1,21 @@
 import React from 'react';
 import { useIntl, injectIntl } from 'react-intl-next';
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { blockMenuMessages as messages } from '@atlaskit/editor-common/messages';
 import { DIRECTION } from '@atlaskit/editor-common/types';
 import { ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
 import ArrowDownIcon from '@atlaskit/icon/core/arrow-down';
+import { useBlockMenu } from './block-menu-provider';
 const MoveDownDropdownItemContent = ({
   api
 }) => {
   const {
     formatMessage
   } = useIntl();
+  const {
+    fireAnalyticsEvent
+  } = useBlockMenu();
   const {
     canMoveDown
   } = useSharedPluginStateWithSelector(api, ['blockControls'], ({
@@ -22,6 +27,15 @@ const MoveDownDropdownItemContent = ({
     };
   });
   const handleClick = () => {
+    fireAnalyticsEvent === null || fireAnalyticsEvent === void 0 ? void 0 : fireAnalyticsEvent({
+      action: ACTION.CLICKED,
+      actionSubject: ACTION_SUBJECT.BLOCK_MENU_ITEM,
+      actionSubjectId: ACTION_SUBJECT_ID.MOVE_DOWN_BLOCK,
+      eventType: EVENT_TYPE.UI,
+      attributes: {
+        inputMethod: INPUT_METHOD.MOUSE
+      }
+    });
     api === null || api === void 0 ? void 0 : api.core.actions.execute(({
       tr
     }) => {

package/dist/es2019/ui/move-up.js

@@ -1,16 +1,21 @@
 import React from 'react';
 import { useIntl, injectIntl } from 'react-intl-next';
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { blockMenuMessages as messages } from '@atlaskit/editor-common/messages';
 import { DIRECTION } from '@atlaskit/editor-common/types';
 import { ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
 import ArrowUpIcon from '@atlaskit/icon/core/arrow-up';
+import { useBlockMenu } from './block-menu-provider';
 const MoveUpDropdownItemContent = ({
   api
 }) => {
   const {
     formatMessage
   } = useIntl();
+  const {
+    fireAnalyticsEvent
+  } = useBlockMenu();
   const {
     canMoveUp
   } = useSharedPluginStateWithSelector(api, ['blockControls'], ({
@@ -22,6 +27,15 @@ const MoveUpDropdownItemContent = ({
     };
   });
   const handleClick = () => {
+    fireAnalyticsEvent === null || fireAnalyticsEvent === void 0 ? void 0 : fireAnalyticsEvent({
+      action: ACTION.CLICKED,
+      actionSubject: ACTION_SUBJECT.BLOCK_MENU_ITEM,
+      actionSubjectId: ACTION_SUBJECT_ID.MOVE_UP_BLOCK,
+      eventType: EVENT_TYPE.UI,
+      attributes: {
+        inputMethod: INPUT_METHOD.MOUSE
+      }
+    });
     api === null || api === void 0 ? void 0 : api.core.actions.execute(({
       tr
     }) => {

package/dist/esm/ui/block-menu-provider.js

@@ -1,6 +1,7 @@
 import React, { useCallback, createContext, useContext } from 'react';
 var BlockMenuContext = /*#__PURE__*/createContext({
-  onDropdownOpenChanged: function onDropdownOpenChanged() {}
+  onDropdownOpenChanged: function onDropdownOpenChanged() {},
+  fireAnalyticsEvent: function fireAnalyticsEvent() {}
 });
 export var useBlockMenu = function useBlockMenu() {
   var context = useContext(BlockMenuContext);
@@ -24,9 +25,14 @@ export var BlockMenuProvider = function BlockMenuProvider(_ref) {
       }, 1);
     }
   }, [api]);
+  var fireAnalyticsEvent = useCallback(function (payload) {
+    var _api$analytics;
+    api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 || _api$analytics.actions.fireAnalyticsEvent(payload);
+  }, [api]);
   return /*#__PURE__*/React.createElement(BlockMenuContext.Provider, {
     value: {
-      onDropdownOpenChanged: onDropdownOpenChanged
+      onDropdownOpenChanged: onDropdownOpenChanged,
+      fireAnalyticsEvent: fireAnalyticsEvent
     }
   }, children);
 };

package/dist/esm/ui/block-menu.js

@@ -1,9 +1,10 @@
 /* block-menu.tsx generated by @compiled/babel-plugin v0.38.1 */
 import "./block-menu.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
-import React, { useContext, useEffect } from 'react';
+import React, { useContext, useEffect, useRef } from 'react';
 import { injectIntl } from 'react-intl-next';
 import { cx } from '@atlaskit/css';
+import { ACTION, ACTION_SUBJECT, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { DRAG_HANDLE_SELECTOR, DRAG_HANDLE_WIDTH } from '@atlaskit/editor-common/styles';
 import { Popup } from '@atlaskit/editor-common/ui';
@@ -68,8 +69,10 @@ var BlockMenu = function BlockMenu(_ref2) {
     isMenuOpen = _useSharedPluginState.isMenuOpen,
     currentUserIntent = _useSharedPluginState.currentUserIntent;
   var _useBlockMenu = useBlockMenu(),
-    onDropdownOpenChanged = _useBlockMenu.onDropdownOpenChanged;
+    onDropdownOpenChanged = _useBlockMenu.onDropdownOpenChanged,
+    fireAnalyticsEvent = _useBlockMenu.fireAnalyticsEvent;
   var targetHandleRef = editorView === null || editorView === void 0 || (_editorView$dom = editorView.dom) === null || _editorView$dom === void 0 ? void 0 : _editorView$dom.querySelector(DRAG_HANDLE_SELECTOR);
+  var prevIsMenuOpenRef = useRef(false);
   var hasFocus = expValEqualsNoExposure('platform_editor_block_menu_keyboard_navigation', 'isEnabled', true) ? (_ref3 = (editorView === null || editorView === void 0 ? void 0 : editorView.hasFocus()) || document.activeElement === targetHandleRef) !== null && _ref3 !== void 0 ? _ref3 : false : (_editorView$hasFocus = editorView === null || editorView === void 0 ? void 0 : editorView.hasFocus()) !== null && _editorView$hasFocus !== void 0 ? _editorView$hasFocus : false;
   var hasSelection = !!editorView && !editorView.state.selection.empty;
 
@@ -81,8 +84,23 @@ var BlockMenu = function BlockMenu(_ref2) {
     if (!isMenuOpen || !menuTriggerBy || !isSelectedViaDragHandle || !hasFocus || !shouldShowBlockMenuForEmptyLine || ['resizing', 'dragging'].includes(currentUserIntent || '')) {
       return;
     }
+
+    // Fire analytics event when block menu opens (only on first transition from closed to open)
+    if (!prevIsMenuOpenRef.current && isMenuOpen) {
+      fireAnalyticsEvent === null || fireAnalyticsEvent === void 0 || fireAnalyticsEvent({
+        action: ACTION.OPENED,
+        actionSubject: ACTION_SUBJECT.BLOCK_MENU,
+        eventType: EVENT_TYPE.UI,
+        attributes: {
+          inputMethod: INPUT_METHOD.MOUSE
+        }
+      });
+    }
+
+    // Update the previous state
+    prevIsMenuOpenRef.current = isMenuOpen;
     api === null || api === void 0 || api.core.actions.execute(api === null || api === void 0 || (_api$userIntent = api.userIntent) === null || _api$userIntent === void 0 ? void 0 : _api$userIntent.commands.setCurrentUserIntent('blockMenuOpen'));
-  }, [api, isMenuOpen, menuTriggerBy, isSelectedViaDragHandle, hasFocus, shouldShowBlockMenuForEmptyLine, currentUserIntent]);
+  }, [api, isMenuOpen, menuTriggerBy, isSelectedViaDragHandle, hasFocus, shouldShowBlockMenuForEmptyLine, currentUserIntent, fireAnalyticsEvent]);
   if (!isMenuOpen) {
     return null;
   }

package/dist/esm/ui/copy-block.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 React from 'react';
 import { injectIntl, useIntl } from 'react-intl-next';
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { messages } from '@atlaskit/editor-common/block-menu';
 import { copyHTMLToClipboard } from '@atlaskit/editor-common/clipboard';
 import { toDOM, copyDomNode } from '@atlaskit/editor-common/copy-button';
@@ -13,6 +14,7 @@ import { isTableSelected } from '@atlaskit/editor-tables/utils';
 import { ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
 import CopyIcon from '@atlaskit/icon/core/copy';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { useBlockMenu } from './block-menu-provider';
 var toDOMFromFragment = function toDOMFromFragment(fragment, schema) {
   return DOMSerializer.fromSchema(schema).serializeFragment(fragment);
 };
@@ -20,8 +22,20 @@ var CopyBlockMenuItem = function CopyBlockMenuItem(_ref) {
   var api = _ref.api;
   var _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;
+  var _useBlockMenu = useBlockMenu(),
+    fireAnalyticsEvent = _useBlockMenu.fireAnalyticsEvent;
   var copyHandler = function copyHandler(event) {
     var _api$selection;
+    fireAnalyticsEvent === null || fireAnalyticsEvent === void 0 || fireAnalyticsEvent({
+      action: ACTION.CLICKED,
+      actionSubject: ACTION_SUBJECT.BLOCK_MENU_ITEM,
+      actionSubjectId: ACTION_SUBJECT_ID.COPY_BLOCK,
+      eventType: EVENT_TYPE.UI,
+      attributes: {
+        inputMethod: INPUT_METHOD.MOUSE
+      }
+    });
+
     // prevent click event from bubbling up to the ancestor elements
     event.stopPropagation();
     // get the current selection
@@ -101,9 +115,7 @@ var CopyBlockMenuItem = function CopyBlockMenuItem(_ref) {
     elemBefore: /*#__PURE__*/React.createElement(CopyIcon, {
       label: ""
     }),
-    onClick: function onClick(e) {
-      return copyHandler(e);
-    }
+    onClick: copyHandler
   }, text);
 };
 export default injectIntl(CopyBlockMenuItem);

package/dist/esm/ui/copy-link.js

@@ -1,9 +1,11 @@
 import React, { useCallback } from 'react';
 import { useIntl, injectIntl } from 'react-intl-next';
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { blockMenuMessages as messages } from '@atlaskit/editor-common/messages';
 import { ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
 import LinkIcon from '@atlaskit/icon/core/link';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { useBlockMenu } from './block-menu-provider';
 import { copyLink } from './utils/copyLink';
 import { isNestedNode } from './utils/isNestedNode';
 var CopyLinkDropdownItemContent = function CopyLinkDropdownItemContent(_ref) {
@@ -11,7 +13,18 @@ var CopyLinkDropdownItemContent = function CopyLinkDropdownItemContent(_ref) {
     config = _ref.config;
   var _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;
+  var _useBlockMenu = useBlockMenu(),
+    fireAnalyticsEvent = _useBlockMenu.fireAnalyticsEvent;
   var handleClick = useCallback(function () {
+    fireAnalyticsEvent === null || fireAnalyticsEvent === void 0 || fireAnalyticsEvent({
+      action: ACTION.CLICKED,
+      actionSubject: ACTION_SUBJECT.BLOCK_MENU_ITEM,
+      actionSubjectId: ACTION_SUBJECT_ID.COPY_LINK_TO_BLOCK,
+      eventType: EVENT_TYPE.UI,
+      attributes: {
+        inputMethod: INPUT_METHOD.MOUSE
+      }
+    });
     api === null || api === void 0 || api.core.actions.execute(function (_ref2) {
       var _api$blockControls;
       var tr = _ref2.tr;
@@ -24,7 +37,7 @@ var CopyLinkDropdownItemContent = function CopyLinkDropdownItemContent(_ref) {
     });
     api === null || api === void 0 || api.core.actions.focus();
     return copyLink(config === null || config === void 0 ? void 0 : config.getLinkPath, config === null || config === void 0 ? void 0 : config.blockQueryParam, api);
-  }, [config === null || config === void 0 ? void 0 : config.getLinkPath, config === null || config === void 0 ? void 0 : config.blockQueryParam, api]);
+  }, [config === null || config === void 0 ? void 0 : config.getLinkPath, config === null || config === void 0 ? void 0 : config.blockQueryParam, api, fireAnalyticsEvent]);
   var checkIsNestedNode = useCallback(function () {
     var _api$selection, _api$blockControls2;
     var selection = api === null || api === void 0 || (_api$selection = api.selection) === null || _api$selection === void 0 || (_api$selection = _api$selection.sharedState) === null || _api$selection === void 0 || (_api$selection = _api$selection.currentState()) === null || _api$selection === void 0 ? void 0 : _api$selection.selection;

package/dist/esm/ui/delete-button.js

@@ -1,5 +1,6 @@
 import React, { useCallback } from 'react';
 import { useIntl, injectIntl } from 'react-intl-next';
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { messages } from '@atlaskit/editor-common/block-menu';
 import { blockMenuMessages } from '@atlaskit/editor-common/messages';
 import { TextSelection } from '@atlaskit/editor-prosemirror/state';
@@ -9,13 +10,25 @@ import DeleteIcon from '@atlaskit/icon/core/delete';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { Box } from '@atlaskit/primitives/box';
 import Text from '@atlaskit/primitives/text';
+import { useBlockMenu } from './block-menu-provider';
 var DeleteDropdownItemContent = function DeleteDropdownItemContent(_ref) {
   var _api$core$sharedState;
   var api = _ref.api;
   var _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;
+  var _useBlockMenu = useBlockMenu(),
+    fireAnalyticsEvent = _useBlockMenu.fireAnalyticsEvent;
   var nodeTypes = Object.values((api === null || api === void 0 || (_api$core$sharedState = api.core.sharedState.currentState()) === null || _api$core$sharedState === void 0 || (_api$core$sharedState = _api$core$sharedState.schema) === null || _api$core$sharedState === void 0 ? void 0 : _api$core$sharedState.nodes) || {});
   var onClick = function onClick() {
+    fireAnalyticsEvent === null || fireAnalyticsEvent === void 0 || fireAnalyticsEvent({
+      action: ACTION.CLICKED,
+      actionSubject: ACTION_SUBJECT.BLOCK_MENU_ITEM,
+      actionSubjectId: ACTION_SUBJECT_ID.DELETE_BLOCK,
+      eventType: EVENT_TYPE.UI,
+      attributes: {
+        inputMethod: INPUT_METHOD.MOUSE
+      }
+    });
     api === null || api === void 0 || api.core.actions.execute(function (_ref2) {
       var _api$blockControls;
       var tr = _ref2.tr;

package/dist/esm/ui/format-menu-nested.js

@@ -1,21 +1,36 @@
-import React, { useMemo } from 'react';
+import React, { useMemo, useCallback } from 'react';
 import { useIntl } from 'react-intl-next';
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { messages } from '@atlaskit/editor-common/block-menu';
 import { blockMenuMessages } from '@atlaskit/editor-common/messages';
 import { ToolbarNestedDropdownMenu } from '@atlaskit/editor-toolbar';
 import ChangesIcon from '@atlaskit/icon/core/changes';
 import ChevronRightIcon from '@atlaskit/icon/core/chevron-right';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { useBlockMenu } from './block-menu-provider';
 import { checkIsFormatMenuHidden } from './utils/checkIsFormatMenuHidden';
 export var FormatMenuComponent = function FormatMenuComponent(_ref) {
   var api = _ref.api,
     children = _ref.children;
   var _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;
+  var _useBlockMenu = useBlockMenu(),
+    fireAnalyticsEvent = _useBlockMenu.fireAnalyticsEvent;
   var text = fg('platform_editor_block_menu_patch_1') ? formatMessage(blockMenuMessages.turnInto) : formatMessage(messages.turnInto);
   var isDisabled = useMemo(function () {
     return fg('platform_editor_block_menu_for_disabled_nodes') ? checkIsFormatMenuHidden(api) : false;
   }, [api]);
+  var handleClick = useCallback(function () {
+    fireAnalyticsEvent === null || fireAnalyticsEvent === void 0 || fireAnalyticsEvent({
+      action: ACTION.CLICKED,
+      actionSubject: ACTION_SUBJECT.BLOCK_MENU_ITEM,
+      actionSubjectId: ACTION_SUBJECT_ID.FORMAT_MENU,
+      eventType: EVENT_TYPE.UI,
+      attributes: {
+        inputMethod: INPUT_METHOD.MOUSE
+      }
+    });
+  }, [fireAnalyticsEvent]);
   return /*#__PURE__*/React.createElement(ToolbarNestedDropdownMenu, {
     text: text,
     elemBefore: /*#__PURE__*/React.createElement(ChangesIcon, {
@@ -25,6 +40,7 @@ export var FormatMenuComponent = function FormatMenuComponent(_ref) {
       label: ""
     }),
     enableMaxHeight: true,
-    isDisabled: isDisabled
+    isDisabled: isDisabled,
+    onClick: handleClick
   }, children);
 };

package/dist/esm/ui/move-down.js

@@ -1,14 +1,18 @@
 import React from 'react';
 import { useIntl, injectIntl } from 'react-intl-next';
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { blockMenuMessages as messages } from '@atlaskit/editor-common/messages';
 import { DIRECTION } from '@atlaskit/editor-common/types';
 import { ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
 import ArrowDownIcon from '@atlaskit/icon/core/arrow-down';
+import { useBlockMenu } from './block-menu-provider';
 var MoveDownDropdownItemContent = function MoveDownDropdownItemContent(_ref) {
   var api = _ref.api;
   var _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;
+  var _useBlockMenu = useBlockMenu(),
+    fireAnalyticsEvent = _useBlockMenu.fireAnalyticsEvent;
   var _useSharedPluginState = useSharedPluginStateWithSelector(api, ['blockControls'], function (_ref2) {
       var _blockControlsState$b;
       var blockControlsState = _ref2.blockControlsState;
@@ -18,6 +22,15 @@ var MoveDownDropdownItemContent = function MoveDownDropdownItemContent(_ref) {
     }),
     canMoveDown = _useSharedPluginState.canMoveDown;
   var handleClick = function handleClick() {
+    fireAnalyticsEvent === null || fireAnalyticsEvent === void 0 || fireAnalyticsEvent({
+      action: ACTION.CLICKED,
+      actionSubject: ACTION_SUBJECT.BLOCK_MENU_ITEM,
+      actionSubjectId: ACTION_SUBJECT_ID.MOVE_DOWN_BLOCK,
+      eventType: EVENT_TYPE.UI,
+      attributes: {
+        inputMethod: INPUT_METHOD.MOUSE
+      }
+    });
     api === null || api === void 0 || api.core.actions.execute(function (_ref3) {
       var _api$blockControls, _api$blockControls2;
       var tr = _ref3.tr;

package/dist/esm/ui/move-up.js

@@ -1,14 +1,18 @@
 import React from 'react';
 import { useIntl, injectIntl } from 'react-intl-next';
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { blockMenuMessages as messages } from '@atlaskit/editor-common/messages';
 import { DIRECTION } from '@atlaskit/editor-common/types';
 import { ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
 import ArrowUpIcon from '@atlaskit/icon/core/arrow-up';
+import { useBlockMenu } from './block-menu-provider';
 var MoveUpDropdownItemContent = function MoveUpDropdownItemContent(_ref) {
   var api = _ref.api;
   var _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;
+  var _useBlockMenu = useBlockMenu(),
+    fireAnalyticsEvent = _useBlockMenu.fireAnalyticsEvent;
   var _useSharedPluginState = useSharedPluginStateWithSelector(api, ['blockControls'], function (_ref2) {
       var _blockControlsState$b;
       var blockControlsState = _ref2.blockControlsState;
@@ -18,6 +22,15 @@ var MoveUpDropdownItemContent = function MoveUpDropdownItemContent(_ref) {
     }),
     canMoveUp = _useSharedPluginState.canMoveUp;
   var handleClick = function handleClick() {
+    fireAnalyticsEvent === null || fireAnalyticsEvent === void 0 || fireAnalyticsEvent({
+      action: ACTION.CLICKED,
+      actionSubject: ACTION_SUBJECT.BLOCK_MENU_ITEM,
+      actionSubjectId: ACTION_SUBJECT_ID.MOVE_UP_BLOCK,
+      eventType: EVENT_TYPE.UI,
+      attributes: {
+        inputMethod: INPUT_METHOD.MOUSE
+      }
+    });
     api === null || api === void 0 || api.core.actions.execute(function (_ref3) {
       var _api$blockControls, _api$blockControls2;
       var tr = _ref3.tr;

package/dist/types/blockMenuPluginType.d.ts

@@ -1,4 +1,5 @@
 import type { NextEditorPlugin, OptionalPlugin, EditorCommand } from '@atlaskit/editor-common/types';
+import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 import type { BlockControlsPlugin } from '@atlaskit/editor-plugin-block-controls';
 import type { DecorationsPlugin } from '@atlaskit/editor-plugin-decorations';
 import type { SelectionPlugin } from '@atlaskit/editor-plugin-selection';
@@ -16,7 +17,8 @@ export type BlockMenuPlugin = NextEditorPlugin<'blockMenu', {
         OptionalPlugin<BlockControlsPlugin>,
         OptionalPlugin<UserIntentPlugin>,
         OptionalPlugin<SelectionPlugin>,
-        OptionalPlugin<DecorationsPlugin>
+        OptionalPlugin<DecorationsPlugin>,
+        OptionalPlugin<AnalyticsPlugin>
     ];
     pluginConfiguration?: BlockMenuPluginOptions;
     sharedState: BlockMenuSharedState;

package/dist/types/ui/block-menu-provider.d.ts

@@ -1,11 +1,14 @@
 import React from 'react';
+import type { BlockMenuEventPayload } from '@atlaskit/editor-common/analytics';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type { BlockMenuPlugin } from '../blockMenuPluginType';
 type BlockMenuProviderProps = {
     api: ExtractInjectionAPI<BlockMenuPlugin> | undefined;
     children: React.ReactNode;
 };
+type FireAnalyticsEvent = (payload: BlockMenuEventPayload) => void | undefined;
 export type BlockMenuContextType = {
+    fireAnalyticsEvent?: FireAnalyticsEvent;
     /**
      * Callback for when the dropdown is open/closed. Receives an object with `isOpen` state.
      *

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

@@ -1,4 +1,5 @@
 import type { NextEditorPlugin, OptionalPlugin, EditorCommand } from '@atlaskit/editor-common/types';
+import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 import type { BlockControlsPlugin } from '@atlaskit/editor-plugin-block-controls';
 import type { DecorationsPlugin } from '@atlaskit/editor-plugin-decorations';
 import type { SelectionPlugin } from '@atlaskit/editor-plugin-selection';
@@ -16,7 +17,8 @@ export type BlockMenuPlugin = NextEditorPlugin<'blockMenu', {
         OptionalPlugin<BlockControlsPlugin>,
         OptionalPlugin<UserIntentPlugin>,
         OptionalPlugin<SelectionPlugin>,
-        OptionalPlugin<DecorationsPlugin>
+        OptionalPlugin<DecorationsPlugin>,
+        OptionalPlugin<AnalyticsPlugin>
     ];
     pluginConfiguration?: BlockMenuPluginOptions;
     sharedState: BlockMenuSharedState;

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

@@ -1,11 +1,14 @@
 import React from 'react';
+import type { BlockMenuEventPayload } from '@atlaskit/editor-common/analytics';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type { BlockMenuPlugin } from '../blockMenuPluginType';
 type BlockMenuProviderProps = {
     api: ExtractInjectionAPI<BlockMenuPlugin> | undefined;
     children: React.ReactNode;
 };
+type FireAnalyticsEvent = (payload: BlockMenuEventPayload) => void | undefined;
 export type BlockMenuContextType = {
+    fireAnalyticsEvent?: FireAnalyticsEvent;
     /**
      * Callback for when the dropdown is open/closed. Receives an object with `isOpen` state.
      *

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-block-menu",
-	"version": "3.2.7",
+	"version": "3.2.8",
 	"description": "BlockMenu plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -30,7 +30,7 @@
 	"dependencies": {
 		"@atlaskit/css": "^0.14.0",
 		"@atlaskit/dropdown-menu": "^16.3.0",
-		"@atlaskit/editor-plugin-block-controls": "^6.3.0",
+		"@atlaskit/editor-plugin-block-controls": "^6.4.0",
 		"@atlaskit/editor-plugin-decorations": "^5.0.0",
 		"@atlaskit/editor-plugin-selection": "^5.0.0",
 		"@atlaskit/editor-plugin-user-intent": "^3.0.0",
@@ -42,12 +42,12 @@
 		"@atlaskit/icon-lab": "^5.7.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/primitives": "^14.15.0",
-		"@atlaskit/tmp-editor-statsig": "^12.29.0",
+		"@atlaskit/tmp-editor-statsig": "^12.30.0",
 		"@atlaskit/tokens": "^6.3.0",
 		"@babel/runtime": "^7.0.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^109.14.0",
+		"@atlaskit/editor-common": "^109.16.0",
 		"react": "^18.2.0",
 		"react-intl-next": "npm:react-intl@^5.18.1"
 	},