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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (38) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/dist/cjs/ui/block-menu-components.js +3 -1
  3. package/dist/cjs/ui/block-menu-provider.js +8 -2
  4. package/dist/cjs/ui/block-menu.js +20 -2
  5. package/dist/cjs/ui/copy-block.js +15 -3
  6. package/dist/cjs/ui/copy-link.js +14 -1
  7. package/dist/cjs/ui/delete-button.js +13 -0
  8. package/dist/cjs/ui/format-menu-nested.js +27 -3
  9. package/dist/cjs/ui/format-menu-section.js +4 -1
  10. package/dist/cjs/ui/move-down.js +13 -0
  11. package/dist/cjs/ui/move-up.js +13 -0
  12. package/dist/es2019/ui/block-menu-components.js +3 -1
  13. package/dist/es2019/ui/block-menu-provider.js +8 -2
  14. package/dist/es2019/ui/block-menu.js +21 -3
  15. package/dist/es2019/ui/copy-block.js +16 -1
  16. package/dist/es2019/ui/copy-link.js +15 -1
  17. package/dist/es2019/ui/delete-button.js +14 -0
  18. package/dist/es2019/ui/format-menu-nested.js +25 -2
  19. package/dist/es2019/ui/format-menu-section.js +4 -1
  20. package/dist/es2019/ui/move-down.js +14 -0
  21. package/dist/es2019/ui/move-up.js +14 -0
  22. package/dist/esm/ui/block-menu-components.js +3 -1
  23. package/dist/esm/ui/block-menu-provider.js +8 -2
  24. package/dist/esm/ui/block-menu.js +21 -3
  25. package/dist/esm/ui/copy-block.js +15 -3
  26. package/dist/esm/ui/copy-link.js +14 -1
  27. package/dist/esm/ui/delete-button.js +13 -0
  28. package/dist/esm/ui/format-menu-nested.js +25 -3
  29. package/dist/esm/ui/format-menu-section.js +4 -1
  30. package/dist/esm/ui/move-down.js +13 -0
  31. package/dist/esm/ui/move-up.js +13 -0
  32. package/dist/types/blockMenuPluginType.d.ts +3 -1
  33. package/dist/types/ui/block-menu-provider.d.ts +3 -0
  34. package/dist/types/ui/format-menu-nested.d.ts +4 -1
  35. package/dist/types-ts4.5/blockMenuPluginType.d.ts +3 -1
  36. package/dist/types-ts4.5/ui/block-menu-provider.d.ts +3 -0
  37. package/dist/types-ts4.5/ui/format-menu-nested.d.ts +4 -1
  38. package/package.json +7 -4
package/CHANGELOG.md CHANGED
@@ -1,5 +1,21 @@
1
1
  # @atlaskit/editor-plugin-block-menu
2
2
 
3
+ ## 3.2.8
4
+
5
+ ### Patch Changes
6
+
7
+ - [`3e49f15a87d52`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/3e49f15a87d52) -
8
+ Add analytics events for block menu discovery
9
+ - Updated dependencies
10
+
11
+ ## 3.2.7
12
+
13
+ ### Patch Changes
14
+
15
+ - [`0ef848d2118aa`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/0ef848d2118aa) -
16
+ Grey out `Turn Into` option on block menu where it is not supported
17
+ - Updated dependencies
18
+
3
19
  ## 3.2.6
4
20
 
5
21
  ### Patch Changes
@@ -61,7 +61,9 @@ var getFormatMenuComponents = function getFormatMenuComponents(api) {
61
61
  children: null
62
62
  },
63
63
  children = _ref.children;
64
- return /*#__PURE__*/_react.default.createElement(_formatMenuNested.FormatMenuComponent, null, children);
64
+ return /*#__PURE__*/_react.default.createElement(_formatMenuNested.FormatMenuComponent, {
65
+ api: api
66
+ }, children);
65
67
  }
66
68
  }, {
67
69
  type: 'block-menu-section',
@@ -8,7 +8,8 @@ exports.useBlockMenu = exports.BlockMenuProvider = void 0;
8
8
  var _react = _interopRequireWildcard(require("react"));
9
9
  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); }
10
10
  var BlockMenuContext = /*#__PURE__*/(0, _react.createContext)({
11
- onDropdownOpenChanged: function onDropdownOpenChanged() {}
11
+ onDropdownOpenChanged: function onDropdownOpenChanged() {},
12
+ fireAnalyticsEvent: function fireAnalyticsEvent() {}
12
13
  });
13
14
  var useBlockMenu = exports.useBlockMenu = function useBlockMenu() {
14
15
  var context = (0, _react.useContext)(BlockMenuContext);
@@ -32,9 +33,14 @@ var BlockMenuProvider = exports.BlockMenuProvider = function BlockMenuProvider(_
32
33
  }, 1);
33
34
  }
34
35
  }, [api]);
36
+ var fireAnalyticsEvent = (0, _react.useCallback)(function (payload) {
37
+ var _api$analytics;
38
+ api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 || _api$analytics.actions.fireAnalyticsEvent(payload);
39
+ }, [api]);
35
40
  return /*#__PURE__*/_react.default.createElement(BlockMenuContext.Provider, {
36
41
  value: {
37
- onDropdownOpenChanged: onDropdownOpenChanged
42
+ onDropdownOpenChanged: onDropdownOpenChanged,
43
+ fireAnalyticsEvent: fireAnalyticsEvent
38
44
  }
39
45
  }, children);
40
46
  };
@@ -11,6 +11,7 @@ var _runtime = require("@compiled/react/runtime");
11
11
  var _react = _interopRequireWildcard(require("react"));
12
12
  var _reactIntlNext = require("react-intl-next");
13
13
  var _css = require("@atlaskit/css");
14
+ var _analytics = require("@atlaskit/editor-common/analytics");
14
15
  var _hooks = require("@atlaskit/editor-common/hooks");
15
16
  var _styles = require("@atlaskit/editor-common/styles");
16
17
  var _ui = require("@atlaskit/editor-common/ui");
@@ -76,8 +77,10 @@ var BlockMenu = function BlockMenu(_ref2) {
76
77
  isMenuOpen = _useSharedPluginState.isMenuOpen,
77
78
  currentUserIntent = _useSharedPluginState.currentUserIntent;
78
79
  var _useBlockMenu = (0, _blockMenuProvider.useBlockMenu)(),
79
- onDropdownOpenChanged = _useBlockMenu.onDropdownOpenChanged;
80
+ onDropdownOpenChanged = _useBlockMenu.onDropdownOpenChanged,
81
+ fireAnalyticsEvent = _useBlockMenu.fireAnalyticsEvent;
80
82
  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);
83
+ var prevIsMenuOpenRef = (0, _react.useRef)(false);
81
84
  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;
82
85
  var hasSelection = !!editorView && !editorView.state.selection.empty;
83
86
 
@@ -89,8 +92,23 @@ var BlockMenu = function BlockMenu(_ref2) {
89
92
  if (!isMenuOpen || !menuTriggerBy || !isSelectedViaDragHandle || !hasFocus || !shouldShowBlockMenuForEmptyLine || ['resizing', 'dragging'].includes(currentUserIntent || '')) {
90
93
  return;
91
94
  }
95
+
96
+ // Fire analytics event when block menu opens (only on first transition from closed to open)
97
+ if (!prevIsMenuOpenRef.current && isMenuOpen) {
98
+ fireAnalyticsEvent === null || fireAnalyticsEvent === void 0 || fireAnalyticsEvent({
99
+ action: _analytics.ACTION.OPENED,
100
+ actionSubject: _analytics.ACTION_SUBJECT.BLOCK_MENU,
101
+ eventType: _analytics.EVENT_TYPE.UI,
102
+ attributes: {
103
+ inputMethod: _analytics.INPUT_METHOD.MOUSE
104
+ }
105
+ });
106
+ }
107
+
108
+ // Update the previous state
109
+ prevIsMenuOpenRef.current = isMenuOpen;
92
110
  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'));
93
- }, [api, isMenuOpen, menuTriggerBy, isSelectedViaDragHandle, hasFocus, shouldShowBlockMenuForEmptyLine, currentUserIntent]);
111
+ }, [api, isMenuOpen, menuTriggerBy, isSelectedViaDragHandle, hasFocus, shouldShowBlockMenuForEmptyLine, currentUserIntent, fireAnalyticsEvent]);
94
112
  if (!isMenuOpen) {
95
113
  return null;
96
114
  }
@@ -8,6 +8,7 @@ exports.default = void 0;
8
8
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
9
9
  var _react = _interopRequireDefault(require("react"));
10
10
  var _reactIntlNext = require("react-intl-next");
11
+ var _analytics = require("@atlaskit/editor-common/analytics");
11
12
  var _blockMenu = require("@atlaskit/editor-common/block-menu");
12
13
  var _clipboard = require("@atlaskit/editor-common/clipboard");
13
14
  var _copyButton = require("@atlaskit/editor-common/copy-button");
@@ -18,6 +19,7 @@ var _utils = require("@atlaskit/editor-tables/utils");
18
19
  var _editorToolbar = require("@atlaskit/editor-toolbar");
19
20
  var _copy = _interopRequireDefault(require("@atlaskit/icon/core/copy"));
20
21
  var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
22
+ var _blockMenuProvider = require("./block-menu-provider");
21
23
  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; }
22
24
  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; }
23
25
  var toDOMFromFragment = function toDOMFromFragment(fragment, schema) {
@@ -27,8 +29,20 @@ var CopyBlockMenuItem = function CopyBlockMenuItem(_ref) {
27
29
  var api = _ref.api;
28
30
  var _useIntl = (0, _reactIntlNext.useIntl)(),
29
31
  formatMessage = _useIntl.formatMessage;
32
+ var _useBlockMenu = (0, _blockMenuProvider.useBlockMenu)(),
33
+ fireAnalyticsEvent = _useBlockMenu.fireAnalyticsEvent;
30
34
  var copyHandler = function copyHandler(event) {
31
35
  var _api$selection;
36
+ fireAnalyticsEvent === null || fireAnalyticsEvent === void 0 || fireAnalyticsEvent({
37
+ action: _analytics.ACTION.CLICKED,
38
+ actionSubject: _analytics.ACTION_SUBJECT.BLOCK_MENU_ITEM,
39
+ actionSubjectId: _analytics.ACTION_SUBJECT_ID.COPY_BLOCK,
40
+ eventType: _analytics.EVENT_TYPE.UI,
41
+ attributes: {
42
+ inputMethod: _analytics.INPUT_METHOD.MOUSE
43
+ }
44
+ });
45
+
32
46
  // prevent click event from bubbling up to the ancestor elements
33
47
  event.stopPropagation();
34
48
  // get the current selection
@@ -108,9 +122,7 @@ var CopyBlockMenuItem = function CopyBlockMenuItem(_ref) {
108
122
  elemBefore: /*#__PURE__*/_react.default.createElement(_copy.default, {
109
123
  label: ""
110
124
  }),
111
- onClick: function onClick(e) {
112
- return copyHandler(e);
113
- }
125
+ onClick: copyHandler
114
126
  }, text);
115
127
  };
116
128
  var _default = exports.default = (0, _reactIntlNext.injectIntl)(CopyBlockMenuItem);
@@ -8,10 +8,12 @@ Object.defineProperty(exports, "__esModule", {
8
8
  exports.CopyLinkDropdownItem = void 0;
9
9
  var _react = _interopRequireWildcard(require("react"));
10
10
  var _reactIntlNext = require("react-intl-next");
11
+ var _analytics = require("@atlaskit/editor-common/analytics");
11
12
  var _messages = require("@atlaskit/editor-common/messages");
12
13
  var _editorToolbar = require("@atlaskit/editor-toolbar");
13
14
  var _link = _interopRequireDefault(require("@atlaskit/icon/core/link"));
14
15
  var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
16
+ var _blockMenuProvider = require("./block-menu-provider");
15
17
  var _copyLink = require("./utils/copyLink");
16
18
  var _isNestedNode = require("./utils/isNestedNode");
17
19
  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) {
20
22
  config = _ref.config;
21
23
  var _useIntl = (0, _reactIntlNext.useIntl)(),
22
24
  formatMessage = _useIntl.formatMessage;
25
+ var _useBlockMenu = (0, _blockMenuProvider.useBlockMenu)(),
26
+ fireAnalyticsEvent = _useBlockMenu.fireAnalyticsEvent;
23
27
  var handleClick = (0, _react.useCallback)(function () {
28
+ fireAnalyticsEvent === null || fireAnalyticsEvent === void 0 || fireAnalyticsEvent({
29
+ action: _analytics.ACTION.CLICKED,
30
+ actionSubject: _analytics.ACTION_SUBJECT.BLOCK_MENU_ITEM,
31
+ actionSubjectId: _analytics.ACTION_SUBJECT_ID.COPY_LINK_TO_BLOCK,
32
+ eventType: _analytics.EVENT_TYPE.UI,
33
+ attributes: {
34
+ inputMethod: _analytics.INPUT_METHOD.MOUSE
35
+ }
36
+ });
24
37
  api === null || api === void 0 || api.core.actions.execute(function (_ref2) {
25
38
  var _api$blockControls;
26
39
  var tr = _ref2.tr;
@@ -33,7 +46,7 @@ var CopyLinkDropdownItemContent = function CopyLinkDropdownItemContent(_ref) {
33
46
  });
34
47
  api === null || api === void 0 || api.core.actions.focus();
35
48
  return (0, _copyLink.copyLink)(config === null || config === void 0 ? void 0 : config.getLinkPath, config === null || config === void 0 ? void 0 : config.blockQueryParam, api);
36
- }, [config === null || config === void 0 ? void 0 : config.getLinkPath, config === null || config === void 0 ? void 0 : config.blockQueryParam, api]);
49
+ }, [config === null || config === void 0 ? void 0 : config.getLinkPath, config === null || config === void 0 ? void 0 : config.blockQueryParam, api, fireAnalyticsEvent]);
37
50
  var checkIsNestedNode = (0, _react.useCallback)(function () {
38
51
  var _api$selection, _api$blockControls2;
39
52
  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;
@@ -8,6 +8,7 @@ Object.defineProperty(exports, "__esModule", {
8
8
  exports.DeleteDropdownItem = void 0;
9
9
  var _react = _interopRequireWildcard(require("react"));
10
10
  var _reactIntlNext = require("react-intl-next");
11
+ var _analytics = require("@atlaskit/editor-common/analytics");
11
12
  var _blockMenu = require("@atlaskit/editor-common/block-menu");
12
13
  var _messages = require("@atlaskit/editor-common/messages");
13
14
  var _state = require("@atlaskit/editor-prosemirror/state");
@@ -17,14 +18,26 @@ var _delete = _interopRequireDefault(require("@atlaskit/icon/core/delete"));
17
18
  var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
18
19
  var _box = require("@atlaskit/primitives/box");
19
20
  var _text = _interopRequireDefault(require("@atlaskit/primitives/text"));
21
+ var _blockMenuProvider = require("./block-menu-provider");
20
22
  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); }
21
23
  var DeleteDropdownItemContent = function DeleteDropdownItemContent(_ref) {
22
24
  var _api$core$sharedState;
23
25
  var api = _ref.api;
24
26
  var _useIntl = (0, _reactIntlNext.useIntl)(),
25
27
  formatMessage = _useIntl.formatMessage;
28
+ var _useBlockMenu = (0, _blockMenuProvider.useBlockMenu)(),
29
+ fireAnalyticsEvent = _useBlockMenu.fireAnalyticsEvent;
26
30
  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) || {});
27
31
  var onClick = function onClick() {
32
+ fireAnalyticsEvent === null || fireAnalyticsEvent === void 0 || fireAnalyticsEvent({
33
+ action: _analytics.ACTION.CLICKED,
34
+ actionSubject: _analytics.ACTION_SUBJECT.BLOCK_MENU_ITEM,
35
+ actionSubjectId: _analytics.ACTION_SUBJECT_ID.DELETE_BLOCK,
36
+ eventType: _analytics.EVENT_TYPE.UI,
37
+ attributes: {
38
+ inputMethod: _analytics.INPUT_METHOD.MOUSE
39
+ }
40
+ });
28
41
  api === null || api === void 0 || api.core.actions.execute(function (_ref2) {
29
42
  var _api$blockControls;
30
43
  var tr = _ref2.tr;
@@ -1,23 +1,45 @@
1
1
  "use strict";
2
2
 
3
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+ var _typeof = require("@babel/runtime/helpers/typeof");
4
5
  Object.defineProperty(exports, "__esModule", {
5
6
  value: true
6
7
  });
7
8
  exports.FormatMenuComponent = void 0;
8
- var _react = _interopRequireDefault(require("react"));
9
+ var _react = _interopRequireWildcard(require("react"));
9
10
  var _reactIntlNext = require("react-intl-next");
11
+ var _analytics = require("@atlaskit/editor-common/analytics");
10
12
  var _blockMenu = require("@atlaskit/editor-common/block-menu");
11
13
  var _messages = require("@atlaskit/editor-common/messages");
12
14
  var _editorToolbar = require("@atlaskit/editor-toolbar");
13
15
  var _changes = _interopRequireDefault(require("@atlaskit/icon/core/changes"));
14
16
  var _chevronRight = _interopRequireDefault(require("@atlaskit/icon/core/chevron-right"));
15
17
  var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
18
+ var _blockMenuProvider = require("./block-menu-provider");
19
+ var _checkIsFormatMenuHidden = require("./utils/checkIsFormatMenuHidden");
20
+ 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); }
16
21
  var FormatMenuComponent = exports.FormatMenuComponent = function FormatMenuComponent(_ref) {
17
- var children = _ref.children;
22
+ var api = _ref.api,
23
+ children = _ref.children;
18
24
  var _useIntl = (0, _reactIntlNext.useIntl)(),
19
25
  formatMessage = _useIntl.formatMessage;
26
+ var _useBlockMenu = (0, _blockMenuProvider.useBlockMenu)(),
27
+ fireAnalyticsEvent = _useBlockMenu.fireAnalyticsEvent;
20
28
  var text = (0, _platformFeatureFlags.fg)('platform_editor_block_menu_patch_1') ? formatMessage(_messages.blockMenuMessages.turnInto) : formatMessage(_blockMenu.messages.turnInto);
29
+ var isDisabled = (0, _react.useMemo)(function () {
30
+ return (0, _platformFeatureFlags.fg)('platform_editor_block_menu_for_disabled_nodes') ? (0, _checkIsFormatMenuHidden.checkIsFormatMenuHidden)(api) : false;
31
+ }, [api]);
32
+ var handleClick = (0, _react.useCallback)(function () {
33
+ fireAnalyticsEvent === null || fireAnalyticsEvent === void 0 || fireAnalyticsEvent({
34
+ action: _analytics.ACTION.CLICKED,
35
+ actionSubject: _analytics.ACTION_SUBJECT.BLOCK_MENU_ITEM,
36
+ actionSubjectId: _analytics.ACTION_SUBJECT_ID.FORMAT_MENU,
37
+ eventType: _analytics.EVENT_TYPE.UI,
38
+ attributes: {
39
+ inputMethod: _analytics.INPUT_METHOD.MOUSE
40
+ }
41
+ });
42
+ }, [fireAnalyticsEvent]);
21
43
  return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarNestedDropdownMenu, {
22
44
  text: text,
23
45
  elemBefore: /*#__PURE__*/_react.default.createElement(_changes.default, {
@@ -26,6 +48,8 @@ var FormatMenuComponent = exports.FormatMenuComponent = function FormatMenuCompo
26
48
  elemAfter: /*#__PURE__*/_react.default.createElement(_chevronRight.default, {
27
49
  label: ""
28
50
  }),
29
- enableMaxHeight: true
51
+ enableMaxHeight: true,
52
+ isDisabled: isDisabled,
53
+ onClick: handleClick
30
54
  }, children);
31
55
  };
@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
7
7
  exports.FormatMenuSection = void 0;
8
8
  var _react = _interopRequireWildcard(require("react"));
9
9
  var _editorToolbar = require("@atlaskit/editor-toolbar");
10
+ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
10
11
  var _checkIsFormatMenuHidden = require("./utils/checkIsFormatMenuHidden");
11
12
  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); }
12
13
  var FormatMenuSection = exports.FormatMenuSection = function FormatMenuSection(_ref) {
@@ -15,7 +16,9 @@ var FormatMenuSection = exports.FormatMenuSection = function FormatMenuSection(_
15
16
  var isFormatMenuHidden = (0, _react.useCallback)(function () {
16
17
  return (0, _checkIsFormatMenuHidden.checkIsFormatMenuHidden)(api);
17
18
  }, [api]);
18
- if (isFormatMenuHidden()) {
19
+
20
+ // When platform_editor_block_menu_for_disabled_nodes feature flag is OFF, use the original behavior (hide the menu)
21
+ if (isFormatMenuHidden() && !(0, _platformFeatureFlags.fg)('platform_editor_block_menu_for_disabled_nodes')) {
19
22
  return null;
20
23
  }
21
24
  return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItemSection, null, children);
@@ -7,15 +7,19 @@ Object.defineProperty(exports, "__esModule", {
7
7
  exports.MoveDownDropdownItem = void 0;
8
8
  var _react = _interopRequireDefault(require("react"));
9
9
  var _reactIntlNext = require("react-intl-next");
10
+ var _analytics = require("@atlaskit/editor-common/analytics");
10
11
  var _hooks = require("@atlaskit/editor-common/hooks");
11
12
  var _messages = require("@atlaskit/editor-common/messages");
12
13
  var _types = require("@atlaskit/editor-common/types");
13
14
  var _editorToolbar = require("@atlaskit/editor-toolbar");
14
15
  var _arrowDown = _interopRequireDefault(require("@atlaskit/icon/core/arrow-down"));
16
+ var _blockMenuProvider = require("./block-menu-provider");
15
17
  var MoveDownDropdownItemContent = function MoveDownDropdownItemContent(_ref) {
16
18
  var api = _ref.api;
17
19
  var _useIntl = (0, _reactIntlNext.useIntl)(),
18
20
  formatMessage = _useIntl.formatMessage;
21
+ var _useBlockMenu = (0, _blockMenuProvider.useBlockMenu)(),
22
+ fireAnalyticsEvent = _useBlockMenu.fireAnalyticsEvent;
19
23
  var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api, ['blockControls'], function (_ref2) {
20
24
  var _blockControlsState$b;
21
25
  var blockControlsState = _ref2.blockControlsState;
@@ -25,6 +29,15 @@ var MoveDownDropdownItemContent = function MoveDownDropdownItemContent(_ref) {
25
29
  }),
26
30
  canMoveDown = _useSharedPluginState.canMoveDown;
27
31
  var handleClick = function handleClick() {
32
+ fireAnalyticsEvent === null || fireAnalyticsEvent === void 0 || fireAnalyticsEvent({
33
+ action: _analytics.ACTION.CLICKED,
34
+ actionSubject: _analytics.ACTION_SUBJECT.BLOCK_MENU_ITEM,
35
+ actionSubjectId: _analytics.ACTION_SUBJECT_ID.MOVE_DOWN_BLOCK,
36
+ eventType: _analytics.EVENT_TYPE.UI,
37
+ attributes: {
38
+ inputMethod: _analytics.INPUT_METHOD.MOUSE
39
+ }
40
+ });
28
41
  api === null || api === void 0 || api.core.actions.execute(function (_ref3) {
29
42
  var _api$blockControls, _api$blockControls2;
30
43
  var tr = _ref3.tr;
@@ -7,15 +7,19 @@ Object.defineProperty(exports, "__esModule", {
7
7
  exports.MoveUpDropdownItem = void 0;
8
8
  var _react = _interopRequireDefault(require("react"));
9
9
  var _reactIntlNext = require("react-intl-next");
10
+ var _analytics = require("@atlaskit/editor-common/analytics");
10
11
  var _hooks = require("@atlaskit/editor-common/hooks");
11
12
  var _messages = require("@atlaskit/editor-common/messages");
12
13
  var _types = require("@atlaskit/editor-common/types");
13
14
  var _editorToolbar = require("@atlaskit/editor-toolbar");
14
15
  var _arrowUp = _interopRequireDefault(require("@atlaskit/icon/core/arrow-up"));
16
+ var _blockMenuProvider = require("./block-menu-provider");
15
17
  var MoveUpDropdownItemContent = function MoveUpDropdownItemContent(_ref) {
16
18
  var api = _ref.api;
17
19
  var _useIntl = (0, _reactIntlNext.useIntl)(),
18
20
  formatMessage = _useIntl.formatMessage;
21
+ var _useBlockMenu = (0, _blockMenuProvider.useBlockMenu)(),
22
+ fireAnalyticsEvent = _useBlockMenu.fireAnalyticsEvent;
19
23
  var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api, ['blockControls'], function (_ref2) {
20
24
  var _blockControlsState$b;
21
25
  var blockControlsState = _ref2.blockControlsState;
@@ -25,6 +29,15 @@ var MoveUpDropdownItemContent = function MoveUpDropdownItemContent(_ref) {
25
29
  }),
26
30
  canMoveUp = _useSharedPluginState.canMoveUp;
27
31
  var handleClick = function handleClick() {
32
+ fireAnalyticsEvent === null || fireAnalyticsEvent === void 0 || fireAnalyticsEvent({
33
+ action: _analytics.ACTION.CLICKED,
34
+ actionSubject: _analytics.ACTION_SUBJECT.BLOCK_MENU_ITEM,
35
+ actionSubjectId: _analytics.ACTION_SUBJECT_ID.MOVE_UP_BLOCK,
36
+ eventType: _analytics.EVENT_TYPE.UI,
37
+ attributes: {
38
+ inputMethod: _analytics.INPUT_METHOD.MOUSE
39
+ }
40
+ });
28
41
  api === null || api === void 0 || api.core.actions.execute(function (_ref3) {
29
42
  var _api$blockControls, _api$blockControls2;
30
43
  var tr = _ref3.tr;
@@ -49,7 +49,9 @@ const getFormatMenuComponents = api => {
49
49
  } = {
50
50
  children: null
51
51
  }) => {
52
- return /*#__PURE__*/React.createElement(FormatMenuComponent, null, children);
52
+ return /*#__PURE__*/React.createElement(FormatMenuComponent, {
53
+ api: api
54
+ }, children);
53
55
  }
54
56
  }, {
55
57
  type: 'block-menu-section',
@@ -1,6 +1,7 @@
1
1
  import React, { useCallback, createContext, useContext } from 'react';
2
2
  const BlockMenuContext = /*#__PURE__*/createContext({
3
- onDropdownOpenChanged: () => {}
3
+ onDropdownOpenChanged: () => {},
4
+ fireAnalyticsEvent: () => {}
4
5
  });
5
6
  export const useBlockMenu = () => {
6
7
  const context = useContext(BlockMenuContext);
@@ -23,9 +24,14 @@ export const BlockMenuProvider = ({
23
24
  }), 1);
24
25
  }
25
26
  }, [api]);
27
+ const fireAnalyticsEvent = useCallback(payload => {
28
+ var _api$analytics;
29
+ api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions.fireAnalyticsEvent(payload);
30
+ }, [api]);
26
31
  return /*#__PURE__*/React.createElement(BlockMenuContext.Provider, {
27
32
  value: {
28
- onDropdownOpenChanged
33
+ onDropdownOpenChanged,
34
+ fireAnalyticsEvent
29
35
  }
30
36
  }, children);
31
37
  };
@@ -1,9 +1,10 @@
1
1
  /* block-menu.tsx generated by @compiled/babel-plugin v0.38.1 */
2
2
  import "./block-menu.compiled.css";
3
3
  import { ax, ix } from "@compiled/react/runtime";
4
- import React, { useContext, useEffect } from 'react';
4
+ import React, { useContext, useEffect, useRef } from 'react';
5
5
  import { injectIntl } from 'react-intl-next';
6
6
  import { cx } from '@atlaskit/css';
7
+ import { ACTION, ACTION_SUBJECT, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
7
8
  import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
8
9
  import { DRAG_HANDLE_SELECTOR, DRAG_HANDLE_WIDTH } from '@atlaskit/editor-common/styles';
9
10
  import { Popup } from '@atlaskit/editor-common/ui';
@@ -65,9 +66,11 @@ const BlockMenu = ({
65
66
  };
66
67
  });
67
68
  const {
68
- onDropdownOpenChanged
69
+ onDropdownOpenChanged,
70
+ fireAnalyticsEvent
69
71
  } = useBlockMenu();
70
72
  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);
73
+ const prevIsMenuOpenRef = useRef(false);
71
74
  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;
72
75
  const hasSelection = !!editorView && !editorView.state.selection.empty;
73
76
 
@@ -79,8 +82,23 @@ const BlockMenu = ({
79
82
  if (!isMenuOpen || !menuTriggerBy || !isSelectedViaDragHandle || !hasFocus || !shouldShowBlockMenuForEmptyLine || ['resizing', 'dragging'].includes(currentUserIntent || '')) {
80
83
  return;
81
84
  }
85
+
86
+ // Fire analytics event when block menu opens (only on first transition from closed to open)
87
+ if (!prevIsMenuOpenRef.current && isMenuOpen) {
88
+ fireAnalyticsEvent === null || fireAnalyticsEvent === void 0 ? void 0 : fireAnalyticsEvent({
89
+ action: ACTION.OPENED,
90
+ actionSubject: ACTION_SUBJECT.BLOCK_MENU,
91
+ eventType: EVENT_TYPE.UI,
92
+ attributes: {
93
+ inputMethod: INPUT_METHOD.MOUSE
94
+ }
95
+ });
96
+ }
97
+
98
+ // Update the previous state
99
+ prevIsMenuOpenRef.current = isMenuOpen;
82
100
  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'));
83
- }, [api, isMenuOpen, menuTriggerBy, isSelectedViaDragHandle, hasFocus, shouldShowBlockMenuForEmptyLine, currentUserIntent]);
101
+ }, [api, isMenuOpen, menuTriggerBy, isSelectedViaDragHandle, hasFocus, shouldShowBlockMenuForEmptyLine, currentUserIntent, fireAnalyticsEvent]);
84
102
  if (!isMenuOpen) {
85
103
  return null;
86
104
  }
@@ -1,5 +1,6 @@
1
1
  import React from 'react';
2
2
  import { injectIntl, useIntl } from 'react-intl-next';
3
+ import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
3
4
  import { messages } from '@atlaskit/editor-common/block-menu';
4
5
  import { copyHTMLToClipboard } from '@atlaskit/editor-common/clipboard';
5
6
  import { toDOM, copyDomNode } from '@atlaskit/editor-common/copy-button';
@@ -10,6 +11,7 @@ import { isTableSelected } from '@atlaskit/editor-tables/utils';
10
11
  import { ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
11
12
  import CopyIcon from '@atlaskit/icon/core/copy';
12
13
  import { fg } from '@atlaskit/platform-feature-flags';
14
+ import { useBlockMenu } from './block-menu-provider';
13
15
  const toDOMFromFragment = (fragment, schema) => {
14
16
  return DOMSerializer.fromSchema(schema).serializeFragment(fragment);
15
17
  };
@@ -19,8 +21,21 @@ const CopyBlockMenuItem = ({
19
21
  const {
20
22
  formatMessage
21
23
  } = useIntl();
24
+ const {
25
+ fireAnalyticsEvent
26
+ } = useBlockMenu();
22
27
  const copyHandler = event => {
23
28
  var _api$selection, _api$selection$shared, _api$selection$shared2;
29
+ fireAnalyticsEvent === null || fireAnalyticsEvent === void 0 ? void 0 : fireAnalyticsEvent({
30
+ action: ACTION.CLICKED,
31
+ actionSubject: ACTION_SUBJECT.BLOCK_MENU_ITEM,
32
+ actionSubjectId: ACTION_SUBJECT_ID.COPY_BLOCK,
33
+ eventType: EVENT_TYPE.UI,
34
+ attributes: {
35
+ inputMethod: INPUT_METHOD.MOUSE
36
+ }
37
+ });
38
+
24
39
  // prevent click event from bubbling up to the ancestor elements
25
40
  event.stopPropagation();
26
41
  // get the current selection
@@ -101,7 +116,7 @@ const CopyBlockMenuItem = ({
101
116
  elemBefore: /*#__PURE__*/React.createElement(CopyIcon, {
102
117
  label: ""
103
118
  }),
104
- onClick: e => copyHandler(e)
119
+ onClick: copyHandler
105
120
  }, text);
106
121
  };
107
122
  export default injectIntl(CopyBlockMenuItem);
@@ -1,9 +1,11 @@
1
1
  import React, { useCallback } from 'react';
2
2
  import { useIntl, injectIntl } from 'react-intl-next';
3
+ import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
3
4
  import { blockMenuMessages as messages } from '@atlaskit/editor-common/messages';
4
5
  import { ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
5
6
  import LinkIcon from '@atlaskit/icon/core/link';
6
7
  import { fg } from '@atlaskit/platform-feature-flags';
8
+ import { useBlockMenu } from './block-menu-provider';
7
9
  import { copyLink } from './utils/copyLink';
8
10
  import { isNestedNode } from './utils/isNestedNode';
9
11
  const CopyLinkDropdownItemContent = ({
@@ -13,7 +15,19 @@ const CopyLinkDropdownItemContent = ({
13
15
  const {
14
16
  formatMessage
15
17
  } = useIntl();
18
+ const {
19
+ fireAnalyticsEvent
20
+ } = useBlockMenu();
16
21
  const handleClick = useCallback(() => {
22
+ fireAnalyticsEvent === null || fireAnalyticsEvent === void 0 ? void 0 : fireAnalyticsEvent({
23
+ action: ACTION.CLICKED,
24
+ actionSubject: ACTION_SUBJECT.BLOCK_MENU_ITEM,
25
+ actionSubjectId: ACTION_SUBJECT_ID.COPY_LINK_TO_BLOCK,
26
+ eventType: EVENT_TYPE.UI,
27
+ attributes: {
28
+ inputMethod: INPUT_METHOD.MOUSE
29
+ }
30
+ });
17
31
  api === null || api === void 0 ? void 0 : api.core.actions.execute(({
18
32
  tr
19
33
  }) => {
@@ -27,7 +41,7 @@ const CopyLinkDropdownItemContent = ({
27
41
  });
28
42
  api === null || api === void 0 ? void 0 : api.core.actions.focus();
29
43
  return copyLink(config === null || config === void 0 ? void 0 : config.getLinkPath, config === null || config === void 0 ? void 0 : config.blockQueryParam, api);
30
- }, [config === null || config === void 0 ? void 0 : config.getLinkPath, config === null || config === void 0 ? void 0 : config.blockQueryParam, api]);
44
+ }, [config === null || config === void 0 ? void 0 : config.getLinkPath, config === null || config === void 0 ? void 0 : config.blockQueryParam, api, fireAnalyticsEvent]);
31
45
  const checkIsNestedNode = useCallback(() => {
32
46
  var _api$selection, _api$selection$shared, _api$selection$shared2, _api$blockControls2, _api$blockControls2$s, _api$blockControls2$s2;
33
47
  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;
@@ -1,5 +1,6 @@
1
1
  import React, { useCallback } from 'react';
2
2
  import { useIntl, injectIntl } from 'react-intl-next';
3
+ import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
3
4
  import { messages } from '@atlaskit/editor-common/block-menu';
4
5
  import { blockMenuMessages } from '@atlaskit/editor-common/messages';
5
6
  import { TextSelection } from '@atlaskit/editor-prosemirror/state';
@@ -9,6 +10,7 @@ import DeleteIcon from '@atlaskit/icon/core/delete';
9
10
  import { fg } from '@atlaskit/platform-feature-flags';
10
11
  import { Box } from '@atlaskit/primitives/box';
11
12
  import Text from '@atlaskit/primitives/text';
13
+ import { useBlockMenu } from './block-menu-provider';
12
14
  const DeleteDropdownItemContent = ({
13
15
  api
14
16
  }) => {
@@ -16,8 +18,20 @@ const DeleteDropdownItemContent = ({
16
18
  const {
17
19
  formatMessage
18
20
  } = useIntl();
21
+ const {
22
+ fireAnalyticsEvent
23
+ } = useBlockMenu();
19
24
  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) || {});
20
25
  const onClick = () => {
26
+ fireAnalyticsEvent === null || fireAnalyticsEvent === void 0 ? void 0 : fireAnalyticsEvent({
27
+ action: ACTION.CLICKED,
28
+ actionSubject: ACTION_SUBJECT.BLOCK_MENU_ITEM,
29
+ actionSubjectId: ACTION_SUBJECT_ID.DELETE_BLOCK,
30
+ eventType: EVENT_TYPE.UI,
31
+ attributes: {
32
+ inputMethod: INPUT_METHOD.MOUSE
33
+ }
34
+ });
21
35
  api === null || api === void 0 ? void 0 : api.core.actions.execute(({
22
36
  tr
23
37
  }) => {
@@ -1,18 +1,39 @@
1
- import React from 'react';
1
+ import React, { useMemo, useCallback } from 'react';
2
2
  import { useIntl } from 'react-intl-next';
3
+ import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
3
4
  import { messages } from '@atlaskit/editor-common/block-menu';
4
5
  import { blockMenuMessages } from '@atlaskit/editor-common/messages';
5
6
  import { ToolbarNestedDropdownMenu } from '@atlaskit/editor-toolbar';
6
7
  import ChangesIcon from '@atlaskit/icon/core/changes';
7
8
  import ChevronRightIcon from '@atlaskit/icon/core/chevron-right';
8
9
  import { fg } from '@atlaskit/platform-feature-flags';
10
+ import { useBlockMenu } from './block-menu-provider';
11
+ import { checkIsFormatMenuHidden } from './utils/checkIsFormatMenuHidden';
9
12
  export const FormatMenuComponent = ({
13
+ api,
10
14
  children
11
15
  }) => {
12
16
  const {
13
17
  formatMessage
14
18
  } = useIntl();
19
+ const {
20
+ fireAnalyticsEvent
21
+ } = useBlockMenu();
15
22
  const text = fg('platform_editor_block_menu_patch_1') ? formatMessage(blockMenuMessages.turnInto) : formatMessage(messages.turnInto);
23
+ const isDisabled = useMemo(() => {
24
+ return fg('platform_editor_block_menu_for_disabled_nodes') ? checkIsFormatMenuHidden(api) : false;
25
+ }, [api]);
26
+ const handleClick = useCallback(() => {
27
+ fireAnalyticsEvent === null || fireAnalyticsEvent === void 0 ? void 0 : fireAnalyticsEvent({
28
+ action: ACTION.CLICKED,
29
+ actionSubject: ACTION_SUBJECT.BLOCK_MENU_ITEM,
30
+ actionSubjectId: ACTION_SUBJECT_ID.FORMAT_MENU,
31
+ eventType: EVENT_TYPE.UI,
32
+ attributes: {
33
+ inputMethod: INPUT_METHOD.MOUSE
34
+ }
35
+ });
36
+ }, [fireAnalyticsEvent]);
16
37
  return /*#__PURE__*/React.createElement(ToolbarNestedDropdownMenu, {
17
38
  text: text,
18
39
  elemBefore: /*#__PURE__*/React.createElement(ChangesIcon, {
@@ -21,6 +42,8 @@ export const FormatMenuComponent = ({
21
42
  elemAfter: /*#__PURE__*/React.createElement(ChevronRightIcon, {
22
43
  label: ""
23
44
  }),
24
- enableMaxHeight: true
45
+ enableMaxHeight: true,
46
+ isDisabled: isDisabled,
47
+ onClick: handleClick
25
48
  }, children);
26
49
  };
@@ -1,5 +1,6 @@
1
1
  import React, { useCallback } from 'react';
2
2
  import { ToolbarDropdownItemSection } from '@atlaskit/editor-toolbar';
3
+ import { fg } from '@atlaskit/platform-feature-flags';
3
4
  import { checkIsFormatMenuHidden } from './utils/checkIsFormatMenuHidden';
4
5
  export const FormatMenuSection = ({
5
6
  children,
@@ -8,7 +9,9 @@ export const FormatMenuSection = ({
8
9
  const isFormatMenuHidden = useCallback(() => {
9
10
  return checkIsFormatMenuHidden(api);
10
11
  }, [api]);
11
- if (isFormatMenuHidden()) {
12
+
13
+ // When platform_editor_block_menu_for_disabled_nodes feature flag is OFF, use the original behavior (hide the menu)
14
+ if (isFormatMenuHidden() && !fg('platform_editor_block_menu_for_disabled_nodes')) {
12
15
  return null;
13
16
  }
14
17
  return /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, null, children);
@@ -1,16 +1,21 @@
1
1
  import React from 'react';
2
2
  import { useIntl, injectIntl } from 'react-intl-next';
3
+ import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
3
4
  import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
4
5
  import { blockMenuMessages as messages } from '@atlaskit/editor-common/messages';
5
6
  import { DIRECTION } from '@atlaskit/editor-common/types';
6
7
  import { ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
7
8
  import ArrowDownIcon from '@atlaskit/icon/core/arrow-down';
9
+ import { useBlockMenu } from './block-menu-provider';
8
10
  const MoveDownDropdownItemContent = ({
9
11
  api
10
12
  }) => {
11
13
  const {
12
14
  formatMessage
13
15
  } = useIntl();
16
+ const {
17
+ fireAnalyticsEvent
18
+ } = useBlockMenu();
14
19
  const {
15
20
  canMoveDown
16
21
  } = useSharedPluginStateWithSelector(api, ['blockControls'], ({
@@ -22,6 +27,15 @@ const MoveDownDropdownItemContent = ({
22
27
  };
23
28
  });
24
29
  const handleClick = () => {
30
+ fireAnalyticsEvent === null || fireAnalyticsEvent === void 0 ? void 0 : fireAnalyticsEvent({
31
+ action: ACTION.CLICKED,
32
+ actionSubject: ACTION_SUBJECT.BLOCK_MENU_ITEM,
33
+ actionSubjectId: ACTION_SUBJECT_ID.MOVE_DOWN_BLOCK,
34
+ eventType: EVENT_TYPE.UI,
35
+ attributes: {
36
+ inputMethod: INPUT_METHOD.MOUSE
37
+ }
38
+ });
25
39
  api === null || api === void 0 ? void 0 : api.core.actions.execute(({
26
40
  tr
27
41
  }) => {
@@ -1,16 +1,21 @@
1
1
  import React from 'react';
2
2
  import { useIntl, injectIntl } from 'react-intl-next';
3
+ import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
3
4
  import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
4
5
  import { blockMenuMessages as messages } from '@atlaskit/editor-common/messages';
5
6
  import { DIRECTION } from '@atlaskit/editor-common/types';
6
7
  import { ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
7
8
  import ArrowUpIcon from '@atlaskit/icon/core/arrow-up';
9
+ import { useBlockMenu } from './block-menu-provider';
8
10
  const MoveUpDropdownItemContent = ({
9
11
  api
10
12
  }) => {
11
13
  const {
12
14
  formatMessage
13
15
  } = useIntl();
16
+ const {
17
+ fireAnalyticsEvent
18
+ } = useBlockMenu();
14
19
  const {
15
20
  canMoveUp
16
21
  } = useSharedPluginStateWithSelector(api, ['blockControls'], ({
@@ -22,6 +27,15 @@ const MoveUpDropdownItemContent = ({
22
27
  };
23
28
  });
24
29
  const handleClick = () => {
30
+ fireAnalyticsEvent === null || fireAnalyticsEvent === void 0 ? void 0 : fireAnalyticsEvent({
31
+ action: ACTION.CLICKED,
32
+ actionSubject: ACTION_SUBJECT.BLOCK_MENU_ITEM,
33
+ actionSubjectId: ACTION_SUBJECT_ID.MOVE_UP_BLOCK,
34
+ eventType: EVENT_TYPE.UI,
35
+ attributes: {
36
+ inputMethod: INPUT_METHOD.MOUSE
37
+ }
38
+ });
25
39
  api === null || api === void 0 ? void 0 : api.core.actions.execute(({
26
40
  tr
27
41
  }) => {
@@ -54,7 +54,9 @@ var getFormatMenuComponents = function getFormatMenuComponents(api) {
54
54
  children: null
55
55
  },
56
56
  children = _ref.children;
57
- return /*#__PURE__*/React.createElement(FormatMenuComponent, null, children);
57
+ return /*#__PURE__*/React.createElement(FormatMenuComponent, {
58
+ api: api
59
+ }, children);
58
60
  }
59
61
  }, {
60
62
  type: 'block-menu-section',
@@ -1,6 +1,7 @@
1
1
  import React, { useCallback, createContext, useContext } from 'react';
2
2
  var BlockMenuContext = /*#__PURE__*/createContext({
3
- onDropdownOpenChanged: function onDropdownOpenChanged() {}
3
+ onDropdownOpenChanged: function onDropdownOpenChanged() {},
4
+ fireAnalyticsEvent: function fireAnalyticsEvent() {}
4
5
  });
5
6
  export var useBlockMenu = function useBlockMenu() {
6
7
  var context = useContext(BlockMenuContext);
@@ -24,9 +25,14 @@ export var BlockMenuProvider = function BlockMenuProvider(_ref) {
24
25
  }, 1);
25
26
  }
26
27
  }, [api]);
28
+ var fireAnalyticsEvent = useCallback(function (payload) {
29
+ var _api$analytics;
30
+ api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 || _api$analytics.actions.fireAnalyticsEvent(payload);
31
+ }, [api]);
27
32
  return /*#__PURE__*/React.createElement(BlockMenuContext.Provider, {
28
33
  value: {
29
- onDropdownOpenChanged: onDropdownOpenChanged
34
+ onDropdownOpenChanged: onDropdownOpenChanged,
35
+ fireAnalyticsEvent: fireAnalyticsEvent
30
36
  }
31
37
  }, children);
32
38
  };
@@ -1,9 +1,10 @@
1
1
  /* block-menu.tsx generated by @compiled/babel-plugin v0.38.1 */
2
2
  import "./block-menu.compiled.css";
3
3
  import { ax, ix } from "@compiled/react/runtime";
4
- import React, { useContext, useEffect } from 'react';
4
+ import React, { useContext, useEffect, useRef } from 'react';
5
5
  import { injectIntl } from 'react-intl-next';
6
6
  import { cx } from '@atlaskit/css';
7
+ import { ACTION, ACTION_SUBJECT, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
7
8
  import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
8
9
  import { DRAG_HANDLE_SELECTOR, DRAG_HANDLE_WIDTH } from '@atlaskit/editor-common/styles';
9
10
  import { Popup } from '@atlaskit/editor-common/ui';
@@ -68,8 +69,10 @@ var BlockMenu = function BlockMenu(_ref2) {
68
69
  isMenuOpen = _useSharedPluginState.isMenuOpen,
69
70
  currentUserIntent = _useSharedPluginState.currentUserIntent;
70
71
  var _useBlockMenu = useBlockMenu(),
71
- onDropdownOpenChanged = _useBlockMenu.onDropdownOpenChanged;
72
+ onDropdownOpenChanged = _useBlockMenu.onDropdownOpenChanged,
73
+ fireAnalyticsEvent = _useBlockMenu.fireAnalyticsEvent;
72
74
  var targetHandleRef = editorView === null || editorView === void 0 || (_editorView$dom = editorView.dom) === null || _editorView$dom === void 0 ? void 0 : _editorView$dom.querySelector(DRAG_HANDLE_SELECTOR);
75
+ var prevIsMenuOpenRef = useRef(false);
73
76
  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;
74
77
  var hasSelection = !!editorView && !editorView.state.selection.empty;
75
78
 
@@ -81,8 +84,23 @@ var BlockMenu = function BlockMenu(_ref2) {
81
84
  if (!isMenuOpen || !menuTriggerBy || !isSelectedViaDragHandle || !hasFocus || !shouldShowBlockMenuForEmptyLine || ['resizing', 'dragging'].includes(currentUserIntent || '')) {
82
85
  return;
83
86
  }
87
+
88
+ // Fire analytics event when block menu opens (only on first transition from closed to open)
89
+ if (!prevIsMenuOpenRef.current && isMenuOpen) {
90
+ fireAnalyticsEvent === null || fireAnalyticsEvent === void 0 || fireAnalyticsEvent({
91
+ action: ACTION.OPENED,
92
+ actionSubject: ACTION_SUBJECT.BLOCK_MENU,
93
+ eventType: EVENT_TYPE.UI,
94
+ attributes: {
95
+ inputMethod: INPUT_METHOD.MOUSE
96
+ }
97
+ });
98
+ }
99
+
100
+ // Update the previous state
101
+ prevIsMenuOpenRef.current = isMenuOpen;
84
102
  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'));
85
- }, [api, isMenuOpen, menuTriggerBy, isSelectedViaDragHandle, hasFocus, shouldShowBlockMenuForEmptyLine, currentUserIntent]);
103
+ }, [api, isMenuOpen, menuTriggerBy, isSelectedViaDragHandle, hasFocus, shouldShowBlockMenuForEmptyLine, currentUserIntent, fireAnalyticsEvent]);
86
104
  if (!isMenuOpen) {
87
105
  return null;
88
106
  }
@@ -3,6 +3,7 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
3
3
  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; }
4
4
  import React from 'react';
5
5
  import { injectIntl, useIntl } from 'react-intl-next';
6
+ import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
6
7
  import { messages } from '@atlaskit/editor-common/block-menu';
7
8
  import { copyHTMLToClipboard } from '@atlaskit/editor-common/clipboard';
8
9
  import { toDOM, copyDomNode } from '@atlaskit/editor-common/copy-button';
@@ -13,6 +14,7 @@ import { isTableSelected } from '@atlaskit/editor-tables/utils';
13
14
  import { ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
14
15
  import CopyIcon from '@atlaskit/icon/core/copy';
15
16
  import { fg } from '@atlaskit/platform-feature-flags';
17
+ import { useBlockMenu } from './block-menu-provider';
16
18
  var toDOMFromFragment = function toDOMFromFragment(fragment, schema) {
17
19
  return DOMSerializer.fromSchema(schema).serializeFragment(fragment);
18
20
  };
@@ -20,8 +22,20 @@ var CopyBlockMenuItem = function CopyBlockMenuItem(_ref) {
20
22
  var api = _ref.api;
21
23
  var _useIntl = useIntl(),
22
24
  formatMessage = _useIntl.formatMessage;
25
+ var _useBlockMenu = useBlockMenu(),
26
+ fireAnalyticsEvent = _useBlockMenu.fireAnalyticsEvent;
23
27
  var copyHandler = function copyHandler(event) {
24
28
  var _api$selection;
29
+ fireAnalyticsEvent === null || fireAnalyticsEvent === void 0 || fireAnalyticsEvent({
30
+ action: ACTION.CLICKED,
31
+ actionSubject: ACTION_SUBJECT.BLOCK_MENU_ITEM,
32
+ actionSubjectId: ACTION_SUBJECT_ID.COPY_BLOCK,
33
+ eventType: EVENT_TYPE.UI,
34
+ attributes: {
35
+ inputMethod: INPUT_METHOD.MOUSE
36
+ }
37
+ });
38
+
25
39
  // prevent click event from bubbling up to the ancestor elements
26
40
  event.stopPropagation();
27
41
  // get the current selection
@@ -101,9 +115,7 @@ var CopyBlockMenuItem = function CopyBlockMenuItem(_ref) {
101
115
  elemBefore: /*#__PURE__*/React.createElement(CopyIcon, {
102
116
  label: ""
103
117
  }),
104
- onClick: function onClick(e) {
105
- return copyHandler(e);
106
- }
118
+ onClick: copyHandler
107
119
  }, text);
108
120
  };
109
121
  export default injectIntl(CopyBlockMenuItem);
@@ -1,9 +1,11 @@
1
1
  import React, { useCallback } from 'react';
2
2
  import { useIntl, injectIntl } from 'react-intl-next';
3
+ import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
3
4
  import { blockMenuMessages as messages } from '@atlaskit/editor-common/messages';
4
5
  import { ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
5
6
  import LinkIcon from '@atlaskit/icon/core/link';
6
7
  import { fg } from '@atlaskit/platform-feature-flags';
8
+ import { useBlockMenu } from './block-menu-provider';
7
9
  import { copyLink } from './utils/copyLink';
8
10
  import { isNestedNode } from './utils/isNestedNode';
9
11
  var CopyLinkDropdownItemContent = function CopyLinkDropdownItemContent(_ref) {
@@ -11,7 +13,18 @@ var CopyLinkDropdownItemContent = function CopyLinkDropdownItemContent(_ref) {
11
13
  config = _ref.config;
12
14
  var _useIntl = useIntl(),
13
15
  formatMessage = _useIntl.formatMessage;
16
+ var _useBlockMenu = useBlockMenu(),
17
+ fireAnalyticsEvent = _useBlockMenu.fireAnalyticsEvent;
14
18
  var handleClick = useCallback(function () {
19
+ fireAnalyticsEvent === null || fireAnalyticsEvent === void 0 || fireAnalyticsEvent({
20
+ action: ACTION.CLICKED,
21
+ actionSubject: ACTION_SUBJECT.BLOCK_MENU_ITEM,
22
+ actionSubjectId: ACTION_SUBJECT_ID.COPY_LINK_TO_BLOCK,
23
+ eventType: EVENT_TYPE.UI,
24
+ attributes: {
25
+ inputMethod: INPUT_METHOD.MOUSE
26
+ }
27
+ });
15
28
  api === null || api === void 0 || api.core.actions.execute(function (_ref2) {
16
29
  var _api$blockControls;
17
30
  var tr = _ref2.tr;
@@ -24,7 +37,7 @@ var CopyLinkDropdownItemContent = function CopyLinkDropdownItemContent(_ref) {
24
37
  });
25
38
  api === null || api === void 0 || api.core.actions.focus();
26
39
  return copyLink(config === null || config === void 0 ? void 0 : config.getLinkPath, config === null || config === void 0 ? void 0 : config.blockQueryParam, api);
27
- }, [config === null || config === void 0 ? void 0 : config.getLinkPath, config === null || config === void 0 ? void 0 : config.blockQueryParam, api]);
40
+ }, [config === null || config === void 0 ? void 0 : config.getLinkPath, config === null || config === void 0 ? void 0 : config.blockQueryParam, api, fireAnalyticsEvent]);
28
41
  var checkIsNestedNode = useCallback(function () {
29
42
  var _api$selection, _api$blockControls2;
30
43
  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;
@@ -1,5 +1,6 @@
1
1
  import React, { useCallback } from 'react';
2
2
  import { useIntl, injectIntl } from 'react-intl-next';
3
+ import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
3
4
  import { messages } from '@atlaskit/editor-common/block-menu';
4
5
  import { blockMenuMessages } from '@atlaskit/editor-common/messages';
5
6
  import { TextSelection } from '@atlaskit/editor-prosemirror/state';
@@ -9,13 +10,25 @@ import DeleteIcon from '@atlaskit/icon/core/delete';
9
10
  import { fg } from '@atlaskit/platform-feature-flags';
10
11
  import { Box } from '@atlaskit/primitives/box';
11
12
  import Text from '@atlaskit/primitives/text';
13
+ import { useBlockMenu } from './block-menu-provider';
12
14
  var DeleteDropdownItemContent = function DeleteDropdownItemContent(_ref) {
13
15
  var _api$core$sharedState;
14
16
  var api = _ref.api;
15
17
  var _useIntl = useIntl(),
16
18
  formatMessage = _useIntl.formatMessage;
19
+ var _useBlockMenu = useBlockMenu(),
20
+ fireAnalyticsEvent = _useBlockMenu.fireAnalyticsEvent;
17
21
  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) || {});
18
22
  var onClick = function onClick() {
23
+ fireAnalyticsEvent === null || fireAnalyticsEvent === void 0 || fireAnalyticsEvent({
24
+ action: ACTION.CLICKED,
25
+ actionSubject: ACTION_SUBJECT.BLOCK_MENU_ITEM,
26
+ actionSubjectId: ACTION_SUBJECT_ID.DELETE_BLOCK,
27
+ eventType: EVENT_TYPE.UI,
28
+ attributes: {
29
+ inputMethod: INPUT_METHOD.MOUSE
30
+ }
31
+ });
19
32
  api === null || api === void 0 || api.core.actions.execute(function (_ref2) {
20
33
  var _api$blockControls;
21
34
  var tr = _ref2.tr;
@@ -1,16 +1,36 @@
1
- import React from 'react';
1
+ import React, { useMemo, useCallback } from 'react';
2
2
  import { useIntl } from 'react-intl-next';
3
+ import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
3
4
  import { messages } from '@atlaskit/editor-common/block-menu';
4
5
  import { blockMenuMessages } from '@atlaskit/editor-common/messages';
5
6
  import { ToolbarNestedDropdownMenu } from '@atlaskit/editor-toolbar';
6
7
  import ChangesIcon from '@atlaskit/icon/core/changes';
7
8
  import ChevronRightIcon from '@atlaskit/icon/core/chevron-right';
8
9
  import { fg } from '@atlaskit/platform-feature-flags';
10
+ import { useBlockMenu } from './block-menu-provider';
11
+ import { checkIsFormatMenuHidden } from './utils/checkIsFormatMenuHidden';
9
12
  export var FormatMenuComponent = function FormatMenuComponent(_ref) {
10
- var children = _ref.children;
13
+ var api = _ref.api,
14
+ children = _ref.children;
11
15
  var _useIntl = useIntl(),
12
16
  formatMessage = _useIntl.formatMessage;
17
+ var _useBlockMenu = useBlockMenu(),
18
+ fireAnalyticsEvent = _useBlockMenu.fireAnalyticsEvent;
13
19
  var text = fg('platform_editor_block_menu_patch_1') ? formatMessage(blockMenuMessages.turnInto) : formatMessage(messages.turnInto);
20
+ var isDisabled = useMemo(function () {
21
+ return fg('platform_editor_block_menu_for_disabled_nodes') ? checkIsFormatMenuHidden(api) : false;
22
+ }, [api]);
23
+ var handleClick = useCallback(function () {
24
+ fireAnalyticsEvent === null || fireAnalyticsEvent === void 0 || fireAnalyticsEvent({
25
+ action: ACTION.CLICKED,
26
+ actionSubject: ACTION_SUBJECT.BLOCK_MENU_ITEM,
27
+ actionSubjectId: ACTION_SUBJECT_ID.FORMAT_MENU,
28
+ eventType: EVENT_TYPE.UI,
29
+ attributes: {
30
+ inputMethod: INPUT_METHOD.MOUSE
31
+ }
32
+ });
33
+ }, [fireAnalyticsEvent]);
14
34
  return /*#__PURE__*/React.createElement(ToolbarNestedDropdownMenu, {
15
35
  text: text,
16
36
  elemBefore: /*#__PURE__*/React.createElement(ChangesIcon, {
@@ -19,6 +39,8 @@ export var FormatMenuComponent = function FormatMenuComponent(_ref) {
19
39
  elemAfter: /*#__PURE__*/React.createElement(ChevronRightIcon, {
20
40
  label: ""
21
41
  }),
22
- enableMaxHeight: true
42
+ enableMaxHeight: true,
43
+ isDisabled: isDisabled,
44
+ onClick: handleClick
23
45
  }, children);
24
46
  };
@@ -1,5 +1,6 @@
1
1
  import React, { useCallback } from 'react';
2
2
  import { ToolbarDropdownItemSection } from '@atlaskit/editor-toolbar';
3
+ import { fg } from '@atlaskit/platform-feature-flags';
3
4
  import { checkIsFormatMenuHidden } from './utils/checkIsFormatMenuHidden';
4
5
  export var FormatMenuSection = function FormatMenuSection(_ref) {
5
6
  var children = _ref.children,
@@ -7,7 +8,9 @@ export var FormatMenuSection = function FormatMenuSection(_ref) {
7
8
  var isFormatMenuHidden = useCallback(function () {
8
9
  return checkIsFormatMenuHidden(api);
9
10
  }, [api]);
10
- if (isFormatMenuHidden()) {
11
+
12
+ // When platform_editor_block_menu_for_disabled_nodes feature flag is OFF, use the original behavior (hide the menu)
13
+ if (isFormatMenuHidden() && !fg('platform_editor_block_menu_for_disabled_nodes')) {
11
14
  return null;
12
15
  }
13
16
  return /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, null, children);
@@ -1,14 +1,18 @@
1
1
  import React from 'react';
2
2
  import { useIntl, injectIntl } from 'react-intl-next';
3
+ import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
3
4
  import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
4
5
  import { blockMenuMessages as messages } from '@atlaskit/editor-common/messages';
5
6
  import { DIRECTION } from '@atlaskit/editor-common/types';
6
7
  import { ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
7
8
  import ArrowDownIcon from '@atlaskit/icon/core/arrow-down';
9
+ import { useBlockMenu } from './block-menu-provider';
8
10
  var MoveDownDropdownItemContent = function MoveDownDropdownItemContent(_ref) {
9
11
  var api = _ref.api;
10
12
  var _useIntl = useIntl(),
11
13
  formatMessage = _useIntl.formatMessage;
14
+ var _useBlockMenu = useBlockMenu(),
15
+ fireAnalyticsEvent = _useBlockMenu.fireAnalyticsEvent;
12
16
  var _useSharedPluginState = useSharedPluginStateWithSelector(api, ['blockControls'], function (_ref2) {
13
17
  var _blockControlsState$b;
14
18
  var blockControlsState = _ref2.blockControlsState;
@@ -18,6 +22,15 @@ var MoveDownDropdownItemContent = function MoveDownDropdownItemContent(_ref) {
18
22
  }),
19
23
  canMoveDown = _useSharedPluginState.canMoveDown;
20
24
  var handleClick = function handleClick() {
25
+ fireAnalyticsEvent === null || fireAnalyticsEvent === void 0 || fireAnalyticsEvent({
26
+ action: ACTION.CLICKED,
27
+ actionSubject: ACTION_SUBJECT.BLOCK_MENU_ITEM,
28
+ actionSubjectId: ACTION_SUBJECT_ID.MOVE_DOWN_BLOCK,
29
+ eventType: EVENT_TYPE.UI,
30
+ attributes: {
31
+ inputMethod: INPUT_METHOD.MOUSE
32
+ }
33
+ });
21
34
  api === null || api === void 0 || api.core.actions.execute(function (_ref3) {
22
35
  var _api$blockControls, _api$blockControls2;
23
36
  var tr = _ref3.tr;
@@ -1,14 +1,18 @@
1
1
  import React from 'react';
2
2
  import { useIntl, injectIntl } from 'react-intl-next';
3
+ import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
3
4
  import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
4
5
  import { blockMenuMessages as messages } from '@atlaskit/editor-common/messages';
5
6
  import { DIRECTION } from '@atlaskit/editor-common/types';
6
7
  import { ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
7
8
  import ArrowUpIcon from '@atlaskit/icon/core/arrow-up';
9
+ import { useBlockMenu } from './block-menu-provider';
8
10
  var MoveUpDropdownItemContent = function MoveUpDropdownItemContent(_ref) {
9
11
  var api = _ref.api;
10
12
  var _useIntl = useIntl(),
11
13
  formatMessage = _useIntl.formatMessage;
14
+ var _useBlockMenu = useBlockMenu(),
15
+ fireAnalyticsEvent = _useBlockMenu.fireAnalyticsEvent;
12
16
  var _useSharedPluginState = useSharedPluginStateWithSelector(api, ['blockControls'], function (_ref2) {
13
17
  var _blockControlsState$b;
14
18
  var blockControlsState = _ref2.blockControlsState;
@@ -18,6 +22,15 @@ var MoveUpDropdownItemContent = function MoveUpDropdownItemContent(_ref) {
18
22
  }),
19
23
  canMoveUp = _useSharedPluginState.canMoveUp;
20
24
  var handleClick = function handleClick() {
25
+ fireAnalyticsEvent === null || fireAnalyticsEvent === void 0 || fireAnalyticsEvent({
26
+ action: ACTION.CLICKED,
27
+ actionSubject: ACTION_SUBJECT.BLOCK_MENU_ITEM,
28
+ actionSubjectId: ACTION_SUBJECT_ID.MOVE_UP_BLOCK,
29
+ eventType: EVENT_TYPE.UI,
30
+ attributes: {
31
+ inputMethod: INPUT_METHOD.MOUSE
32
+ }
33
+ });
21
34
  api === null || api === void 0 || api.core.actions.execute(function (_ref3) {
22
35
  var _api$blockControls, _api$blockControls2;
23
36
  var tr = _ref3.tr;
@@ -1,4 +1,5 @@
1
1
  import type { NextEditorPlugin, OptionalPlugin, EditorCommand } from '@atlaskit/editor-common/types';
2
+ import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
2
3
  import type { BlockControlsPlugin } from '@atlaskit/editor-plugin-block-controls';
3
4
  import type { DecorationsPlugin } from '@atlaskit/editor-plugin-decorations';
4
5
  import type { SelectionPlugin } from '@atlaskit/editor-plugin-selection';
@@ -16,7 +17,8 @@ export type BlockMenuPlugin = NextEditorPlugin<'blockMenu', {
16
17
  OptionalPlugin<BlockControlsPlugin>,
17
18
  OptionalPlugin<UserIntentPlugin>,
18
19
  OptionalPlugin<SelectionPlugin>,
19
- OptionalPlugin<DecorationsPlugin>
20
+ OptionalPlugin<DecorationsPlugin>,
21
+ OptionalPlugin<AnalyticsPlugin>
20
22
  ];
21
23
  pluginConfiguration?: BlockMenuPluginOptions;
22
24
  sharedState: BlockMenuSharedState;
@@ -1,11 +1,14 @@
1
1
  import React from 'react';
2
+ import type { BlockMenuEventPayload } from '@atlaskit/editor-common/analytics';
2
3
  import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
3
4
  import type { BlockMenuPlugin } from '../blockMenuPluginType';
4
5
  type BlockMenuProviderProps = {
5
6
  api: ExtractInjectionAPI<BlockMenuPlugin> | undefined;
6
7
  children: React.ReactNode;
7
8
  };
9
+ type FireAnalyticsEvent = (payload: BlockMenuEventPayload) => void | undefined;
8
10
  export type BlockMenuContextType = {
11
+ fireAnalyticsEvent?: FireAnalyticsEvent;
9
12
  /**
10
13
  * Callback for when the dropdown is open/closed. Receives an object with `isOpen` state.
11
14
  *
@@ -1,4 +1,7 @@
1
1
  import React from 'react';
2
- export declare const FormatMenuComponent: ({ children }: {
2
+ import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
3
+ import type { BlockMenuPlugin } from '../blockMenuPluginType';
4
+ export declare const FormatMenuComponent: ({ api, children, }: {
5
+ api: ExtractInjectionAPI<BlockMenuPlugin> | undefined;
3
6
  children: React.ReactNode;
4
7
  }) => React.JSX.Element;
@@ -1,4 +1,5 @@
1
1
  import type { NextEditorPlugin, OptionalPlugin, EditorCommand } from '@atlaskit/editor-common/types';
2
+ import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
2
3
  import type { BlockControlsPlugin } from '@atlaskit/editor-plugin-block-controls';
3
4
  import type { DecorationsPlugin } from '@atlaskit/editor-plugin-decorations';
4
5
  import type { SelectionPlugin } from '@atlaskit/editor-plugin-selection';
@@ -16,7 +17,8 @@ export type BlockMenuPlugin = NextEditorPlugin<'blockMenu', {
16
17
  OptionalPlugin<BlockControlsPlugin>,
17
18
  OptionalPlugin<UserIntentPlugin>,
18
19
  OptionalPlugin<SelectionPlugin>,
19
- OptionalPlugin<DecorationsPlugin>
20
+ OptionalPlugin<DecorationsPlugin>,
21
+ OptionalPlugin<AnalyticsPlugin>
20
22
  ];
21
23
  pluginConfiguration?: BlockMenuPluginOptions;
22
24
  sharedState: BlockMenuSharedState;
@@ -1,11 +1,14 @@
1
1
  import React from 'react';
2
+ import type { BlockMenuEventPayload } from '@atlaskit/editor-common/analytics';
2
3
  import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
3
4
  import type { BlockMenuPlugin } from '../blockMenuPluginType';
4
5
  type BlockMenuProviderProps = {
5
6
  api: ExtractInjectionAPI<BlockMenuPlugin> | undefined;
6
7
  children: React.ReactNode;
7
8
  };
9
+ type FireAnalyticsEvent = (payload: BlockMenuEventPayload) => void | undefined;
8
10
  export type BlockMenuContextType = {
11
+ fireAnalyticsEvent?: FireAnalyticsEvent;
9
12
  /**
10
13
  * Callback for when the dropdown is open/closed. Receives an object with `isOpen` state.
11
14
  *
@@ -1,4 +1,7 @@
1
1
  import React from 'react';
2
- export declare const FormatMenuComponent: ({ children }: {
2
+ import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
3
+ import type { BlockMenuPlugin } from '../blockMenuPluginType';
4
+ export declare const FormatMenuComponent: ({ api, children, }: {
5
+ api: ExtractInjectionAPI<BlockMenuPlugin> | undefined;
3
6
  children: React.ReactNode;
4
7
  }) => React.JSX.Element;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-block-menu",
3
- "version": "3.2.6",
3
+ "version": "3.2.8",
4
4
  "description": "BlockMenu plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -30,7 +30,7 @@
30
30
  "dependencies": {
31
31
  "@atlaskit/css": "^0.14.0",
32
32
  "@atlaskit/dropdown-menu": "^16.3.0",
33
- "@atlaskit/editor-plugin-block-controls": "^6.3.0",
33
+ "@atlaskit/editor-plugin-block-controls": "^6.4.0",
34
34
  "@atlaskit/editor-plugin-decorations": "^5.0.0",
35
35
  "@atlaskit/editor-plugin-selection": "^5.0.0",
36
36
  "@atlaskit/editor-plugin-user-intent": "^3.0.0",
@@ -42,12 +42,12 @@
42
42
  "@atlaskit/icon-lab": "^5.7.0",
43
43
  "@atlaskit/platform-feature-flags": "^1.1.0",
44
44
  "@atlaskit/primitives": "^14.15.0",
45
- "@atlaskit/tmp-editor-statsig": "^12.29.0",
45
+ "@atlaskit/tmp-editor-statsig": "^12.30.0",
46
46
  "@atlaskit/tokens": "^6.3.0",
47
47
  "@babel/runtime": "^7.0.0"
48
48
  },
49
49
  "peerDependencies": {
50
- "@atlaskit/editor-common": "^109.14.0",
50
+ "@atlaskit/editor-common": "^109.16.0",
51
51
  "react": "^18.2.0",
52
52
  "react-intl-next": "npm:react-intl@^5.18.1"
53
53
  },
@@ -99,6 +99,9 @@
99
99
  },
100
100
  "platform_editor_block_menu_patch_1": {
101
101
  "type": "boolean"
102
+ },
103
+ "platform_editor_block_menu_for_disabled_nodes": {
104
+ "type": "boolean"
102
105
  }
103
106
  }
104
107
  }