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

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 (20) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/dist/cjs/selectionExtensionPlugin.js +5 -3
  3. package/dist/cjs/ui/extension/SelectionExtensionComponentWrapper.js +43 -6
  4. package/dist/cjs/ui/toolbar/SelectionExtensionDropdownMenu.js +16 -2
  5. package/dist/cjs/ui/toolbar/SelectionExtensionItems.js +12 -1
  6. package/dist/es2019/selectionExtensionPlugin.js +5 -3
  7. package/dist/es2019/ui/extension/SelectionExtensionComponentWrapper.js +44 -7
  8. package/dist/es2019/ui/toolbar/SelectionExtensionDropdownMenu.js +18 -2
  9. package/dist/es2019/ui/toolbar/SelectionExtensionItems.js +12 -1
  10. package/dist/esm/selectionExtensionPlugin.js +5 -3
  11. package/dist/esm/ui/extension/SelectionExtensionComponentWrapper.js +44 -7
  12. package/dist/esm/ui/toolbar/SelectionExtensionDropdownMenu.js +16 -2
  13. package/dist/esm/ui/toolbar/SelectionExtensionItems.js +12 -1
  14. package/dist/types/ui/extension/SelectionExtensionComponentWrapper.d.ts +3 -1
  15. package/dist/types/ui/toolbar/SelectionExtensionDropdownMenu.d.ts +4 -0
  16. package/dist/types/ui/toolbar/SelectionExtensionItems.d.ts +1 -1
  17. package/dist/types-ts4.5/ui/extension/SelectionExtensionComponentWrapper.d.ts +3 -1
  18. package/dist/types-ts4.5/ui/toolbar/SelectionExtensionDropdownMenu.d.ts +4 -0
  19. package/dist/types-ts4.5/ui/toolbar/SelectionExtensionItems.d.ts +1 -1
  20. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,13 @@
1
1
  # @atlaskit/editor-plugin-selection-extension
2
2
 
3
+ ## 2.1.1
4
+
5
+ ### Patch Changes
6
+
7
+ - [#119729](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/119729)
8
+ [`beae885f06562`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/beae885f06562) -
9
+ ED-26710 add analytics events to selection extension plugin
10
+
3
11
  ## 2.1.0
4
12
 
5
13
  ### Minor Changes
package/dist/cjs/selectionExtensionPlugin.js CHANGED
@@ -41,10 +41,12 @@ var selectionExtensionPlugin = exports.selectionExtensionPlugin = function selec
41
41
  }
42
42
  },
43
43
  contentComponent: function contentComponent(_ref4) {
44
+ var _api$analytics;
44
45
  var editorView = _ref4.editorView;
45
46
  return /*#__PURE__*/_react.default.createElement(_SelectionExtensionComponentWrapper.SelectionExtensionComponentWrapper, {
46
47
  editorView: editorView,
47
- api: api
48
+ api: api,
49
+ editorAnalyticsAPI: api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions
48
50
  });
49
51
  },
50
52
  pluginsOptions: {
@@ -123,14 +125,14 @@ var selectionExtensionPlugin = exports.selectionExtensionPlugin = function selec
123
125
  type: 'custom',
124
126
  supportsViewMode: true,
125
127
  render: function render(view) {
126
- var _api$analytics;
128
+ var _api$analytics2;
127
129
  if (!view) {
128
130
  return;
129
131
  }
130
132
  return /*#__PURE__*/_react.default.createElement(_SelectionExtensionItems.SelectionExtensionItems, {
131
133
  api: api,
132
134
  editorView: view,
133
- editorAnalyticsAPI: api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions,
135
+ editorAnalyticsAPI: api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions,
134
136
  extensions: extensions,
135
137
  onExtensionClick: handleOnExtensionClick(view)
136
138
  });
package/dist/cjs/ui/extension/SelectionExtensionComponentWrapper.js CHANGED
@@ -6,22 +6,59 @@ Object.defineProperty(exports, "__esModule", {
6
6
  });
7
7
  exports.SelectionExtensionComponentWrapper = void 0;
8
8
  var _react = _interopRequireWildcard(require("react"));
9
+ var _analytics = require("@atlaskit/editor-common/analytics");
9
10
  var _hooks = require("@atlaskit/editor-common/hooks");
10
11
  function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
11
12
  function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
12
13
  var SelectionExtensionComponentWrapper = exports.SelectionExtensionComponentWrapper = function SelectionExtensionComponentWrapper(_ref) {
13
- var _selectionExtensionSt;
14
- var api = _ref.api;
14
+ var _selectionExtensionSt4;
15
+ var api = _ref.api,
16
+ editorAnalyticsAPI = _ref.editorAnalyticsAPI;
17
+ var componentRef = (0, _react.useRef)();
15
18
  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['selectionExtension', 'editorViewMode']),
16
19
  selectionExtensionState = _useSharedPluginState.selectionExtensionState,
17
20
  editorViewModeState = _useSharedPluginState.editorViewModeState;
21
+
22
+ // Closed from active extension
18
23
  var handleOnClose = (0, _react.useCallback)(function () {
19
24
  api === null || api === void 0 || api.core.actions.execute(api === null || api === void 0 ? void 0 : api.selectionExtension.commands.clearActiveExtension());
20
- }, [api]);
25
+ // Clears reference to active component
26
+ componentRef.current = undefined;
27
+ if (editorAnalyticsAPI) {
28
+ editorAnalyticsAPI.fireAnalyticsEvent({
29
+ action: _analytics.ACTION.CLOSED,
30
+ actionSubject: _analytics.ACTION_SUBJECT.EDITOR_PLUGIN_SELECTION_EXTENSION,
31
+ actionSubjectId: _analytics.ACTION_SUBJECT_ID.EDITOR_PLUGIN_SELECTION_EXTENSION_COMPONENT,
32
+ eventType: _analytics.EVENT_TYPE.TRACK
33
+ });
34
+ }
35
+ }, [editorAnalyticsAPI, api]);
36
+
37
+ // Closed from editor page mode change
21
38
  (0, _react.useEffect)(function () {
22
- api === null || api === void 0 || api.core.actions.execute(api === null || api === void 0 ? void 0 : api.selectionExtension.commands.clearActiveExtension());
23
- }, [editorViewModeState, api]);
24
- if (!(selectionExtensionState !== null && selectionExtensionState !== void 0 && (_selectionExtensionSt = selectionExtensionState.activeExtension) !== null && _selectionExtensionSt !== void 0 && _selectionExtensionSt.extension.component)) {
39
+ if (componentRef.current !== undefined) {
40
+ handleOnClose();
41
+ }
42
+ }, [handleOnClose, editorViewModeState]);
43
+
44
+ // Viewed analytics event for component mount
45
+ (0, _react.useEffect)(function () {
46
+ var _selectionExtensionSt, _selectionExtensionSt2;
47
+ if (componentRef.current !== (selectionExtensionState === null || selectionExtensionState === void 0 || (_selectionExtensionSt = selectionExtensionState.activeExtension) === null || _selectionExtensionSt === void 0 ? void 0 : _selectionExtensionSt.extension.component) && (selectionExtensionState === null || selectionExtensionState === void 0 || (_selectionExtensionSt2 = selectionExtensionState.activeExtension) === null || _selectionExtensionSt2 === void 0 ? void 0 : _selectionExtensionSt2.extension.component) !== undefined) {
48
+ var _selectionExtensionSt3;
49
+ if (editorAnalyticsAPI) {
50
+ editorAnalyticsAPI.fireAnalyticsEvent({
51
+ action: _analytics.ACTION.VIEWED,
52
+ actionSubject: _analytics.ACTION_SUBJECT.EDITOR_PLUGIN_SELECTION_EXTENSION,
53
+ actionSubjectId: _analytics.ACTION_SUBJECT_ID.EDITOR_PLUGIN_SELECTION_EXTENSION_COMPONENT,
54
+ eventType: _analytics.EVENT_TYPE.TRACK
55
+ });
56
+ }
57
+ // Sets reference to active component
58
+ componentRef.current = selectionExtensionState === null || selectionExtensionState === void 0 || (_selectionExtensionSt3 = selectionExtensionState.activeExtension) === null || _selectionExtensionSt3 === void 0 ? void 0 : _selectionExtensionSt3.extension.component;
59
+ }
60
+ }, [selectionExtensionState, editorAnalyticsAPI]);
61
+ if (!(selectionExtensionState !== null && selectionExtensionState !== void 0 && (_selectionExtensionSt4 = selectionExtensionState.activeExtension) !== null && _selectionExtensionSt4 !== void 0 && _selectionExtensionSt4.extension.component)) {
25
62
  return null;
26
63
  }
27
64
  var ExtensionComponent = selectionExtensionState.activeExtension.extension.component;
package/dist/cjs/ui/toolbar/SelectionExtensionDropdownMenu.js CHANGED
@@ -9,13 +9,15 @@ exports.SelectionExtensionDropdownMenu = void 0;
9
9
  var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
10
10
  var _react = _interopRequireWildcard(require("react"));
11
11
  var _reactIntlNext = require("react-intl-next");
12
+ var _analytics = require("@atlaskit/editor-common/analytics");
12
13
  var _uiMenu = require("@atlaskit/editor-common/ui-menu");
13
14
  var _SelectionExtensionDropdownMenuButton = require("./SelectionExtensionDropdownMenuButton");
14
15
  function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
15
16
  function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
16
17
  var SelectionExtensionDropdownMenuComponent = /*#__PURE__*/_react.default.memo(function (_ref) {
17
18
  var items = _ref.items,
18
- onItemActivated = _ref.onItemActivated;
19
+ onItemActivated = _ref.onItemActivated,
20
+ editorAnalyticsAPI = _ref.editorAnalyticsAPI;
19
21
  var _useState = (0, _react.useState)(false),
20
22
  _useState2 = (0, _slicedToArray2.default)(_useState, 2),
21
23
  isMenuOpen = _useState2[0],
@@ -33,7 +35,19 @@ var SelectionExtensionDropdownMenuComponent = /*#__PURE__*/_react.default.memo(f
33
35
  }, /*#__PURE__*/_react.default.createElement(_SelectionExtensionDropdownMenuButton.SelectionExtensionDropdownMenuButton, {
34
36
  onClick: function onClick() {
35
37
  return setIsMenuOpen(function (prevIsMenuOpen) {
36
- return !prevIsMenuOpen;
38
+ var nextIsMenuOpen = !prevIsMenuOpen;
39
+ if (editorAnalyticsAPI) {
40
+ editorAnalyticsAPI.fireAnalyticsEvent({
41
+ action: _analytics.ACTION.CLICKED,
42
+ actionSubject: _analytics.ACTION_SUBJECT.BUTTON,
43
+ actionSubjectId: _analytics.ACTION_SUBJECT_ID.EDITOR_PLUGIN_SELECTION_EXTENSION_DROPDOWN,
44
+ eventType: _analytics.EVENT_TYPE.TRACK,
45
+ attributes: {
46
+ toggle: nextIsMenuOpen ? _analytics.ACTION.OPENED : _analytics.ACTION.CLOSED
47
+ }
48
+ });
49
+ }
50
+ return nextIsMenuOpen;
37
51
  });
38
52
  }
39
53
  }));
package/dist/cjs/ui/toolbar/SelectionExtensionItems.js CHANGED
@@ -10,6 +10,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
10
10
  var _react = _interopRequireWildcard(require("react"));
11
11
  var _reactIntlNext = require("react-intl-next");
12
12
  var _uuid = require("uuid");
13
+ var _analytics = require("@atlaskit/editor-common/analytics");
13
14
  var _SelectionExtensionDropdownMenu = require("./SelectionExtensionDropdownMenu");
14
15
  function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
15
16
  function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -34,7 +35,8 @@ var transformExtensionsToItems = function transformExtensionsToItems(extensions)
34
35
  };
35
36
  var SelectionExtensionItemsComponent = exports.SelectionExtensionItemsComponent = function SelectionExtensionItemsComponent(_ref) {
36
37
  var extensions = _ref.extensions,
37
- onExtensionClick = _ref.onExtensionClick;
38
+ onExtensionClick = _ref.onExtensionClick,
39
+ editorAnalyticsAPI = _ref.editorAnalyticsAPI;
38
40
  var extensionsWithIdentifier = (0, _react.useMemo)(function () {
39
41
  return extensions.map(function (extension) {
40
42
  return _objectSpread(_objectSpread({}, extension), {}, {
@@ -52,9 +54,18 @@ var SelectionExtensionItemsComponent = exports.SelectionExtensionItemsComponent
52
54
  });
53
55
  if (extension) {
54
56
  onExtensionClick(extension);
57
+ if (editorAnalyticsAPI) {
58
+ editorAnalyticsAPI.fireAnalyticsEvent({
59
+ action: _analytics.ACTION.CLICKED,
60
+ actionSubject: _analytics.ACTION_SUBJECT.BUTTON,
61
+ actionSubjectId: _analytics.ACTION_SUBJECT_ID.EDITOR_PLUGIN_SELECTION_EXTENSION_ITEM,
62
+ eventType: _analytics.EVENT_TYPE.TRACK
63
+ });
64
+ }
55
65
  }
56
66
  };
57
67
  return /*#__PURE__*/_react.default.createElement(_SelectionExtensionDropdownMenu.SelectionExtensionDropdownMenu, {
68
+ editorAnalyticsAPI: editorAnalyticsAPI,
58
69
  items: items,
59
70
  onItemActivated: handleOnItemActivated
60
71
  });
package/dist/es2019/selectionExtensionPlugin.js CHANGED
@@ -35,9 +35,11 @@ export const selectionExtensionPlugin = ({
35
35
  contentComponent: ({
36
36
  editorView
37
37
  }) => {
38
+ var _api$analytics;
38
39
  return /*#__PURE__*/React.createElement(SelectionExtensionComponentWrapper, {
39
40
  editorView: editorView,
40
- api: api
41
+ api: api,
42
+ editorAnalyticsAPI: api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions
41
43
  });
42
44
  },
43
45
  pluginsOptions: {
@@ -120,14 +122,14 @@ export const selectionExtensionPlugin = ({
120
122
  type: 'custom',
121
123
  supportsViewMode: true,
122
124
  render: view => {
123
- var _api$analytics;
125
+ var _api$analytics2;
124
126
  if (!view) {
125
127
  return;
126
128
  }
127
129
  return /*#__PURE__*/React.createElement(SelectionExtensionItems, {
128
130
  api: api,
129
131
  editorView: view,
130
- editorAnalyticsAPI: api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions,
132
+ editorAnalyticsAPI: api === null || api === void 0 ? void 0 : (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions,
131
133
  extensions: extensions,
132
134
  onExtensionClick: handleOnExtensionClick(view)
133
135
  });
package/dist/es2019/ui/extension/SelectionExtensionComponentWrapper.js CHANGED
@@ -1,20 +1,57 @@
1
- import React, { useCallback, useEffect } from 'react';
1
+ import React, { useCallback, useEffect, useRef } from 'react';
2
+ import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
2
3
  import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
3
4
  export const SelectionExtensionComponentWrapper = ({
4
- api
5
+ api,
6
+ editorAnalyticsAPI
5
7
  }) => {
6
- var _selectionExtensionSt;
8
+ var _selectionExtensionSt4;
9
+ const componentRef = useRef();
7
10
  const {
8
11
  selectionExtensionState,
9
12
  editorViewModeState
10
13
  } = useSharedPluginState(api, ['selectionExtension', 'editorViewMode']);
14
+
15
+ // Closed from active extension
11
16
  const handleOnClose = useCallback(() => {
12
17
  api === null || api === void 0 ? void 0 : api.core.actions.execute(api === null || api === void 0 ? void 0 : api.selectionExtension.commands.clearActiveExtension());
13
- }, [api]);
18
+ // Clears reference to active component
19
+ componentRef.current = undefined;
20
+ if (editorAnalyticsAPI) {
21
+ editorAnalyticsAPI.fireAnalyticsEvent({
22
+ action: ACTION.CLOSED,
23
+ actionSubject: ACTION_SUBJECT.EDITOR_PLUGIN_SELECTION_EXTENSION,
24
+ actionSubjectId: ACTION_SUBJECT_ID.EDITOR_PLUGIN_SELECTION_EXTENSION_COMPONENT,
25
+ eventType: EVENT_TYPE.TRACK
26
+ });
27
+ }
28
+ }, [editorAnalyticsAPI, api]);
29
+
30
+ // Closed from editor page mode change
14
31
  useEffect(() => {
15
- api === null || api === void 0 ? void 0 : api.core.actions.execute(api === null || api === void 0 ? void 0 : api.selectionExtension.commands.clearActiveExtension());
16
- }, [editorViewModeState, api]);
17
- if (!(selectionExtensionState !== null && selectionExtensionState !== void 0 && (_selectionExtensionSt = selectionExtensionState.activeExtension) !== null && _selectionExtensionSt !== void 0 && _selectionExtensionSt.extension.component)) {
32
+ if (componentRef.current !== undefined) {
33
+ handleOnClose();
34
+ }
35
+ }, [handleOnClose, editorViewModeState]);
36
+
37
+ // Viewed analytics event for component mount
38
+ useEffect(() => {
39
+ var _selectionExtensionSt, _selectionExtensionSt2;
40
+ if (componentRef.current !== (selectionExtensionState === null || selectionExtensionState === void 0 ? void 0 : (_selectionExtensionSt = selectionExtensionState.activeExtension) === null || _selectionExtensionSt === void 0 ? void 0 : _selectionExtensionSt.extension.component) && (selectionExtensionState === null || selectionExtensionState === void 0 ? void 0 : (_selectionExtensionSt2 = selectionExtensionState.activeExtension) === null || _selectionExtensionSt2 === void 0 ? void 0 : _selectionExtensionSt2.extension.component) !== undefined) {
41
+ var _selectionExtensionSt3;
42
+ if (editorAnalyticsAPI) {
43
+ editorAnalyticsAPI.fireAnalyticsEvent({
44
+ action: ACTION.VIEWED,
45
+ actionSubject: ACTION_SUBJECT.EDITOR_PLUGIN_SELECTION_EXTENSION,
46
+ actionSubjectId: ACTION_SUBJECT_ID.EDITOR_PLUGIN_SELECTION_EXTENSION_COMPONENT,
47
+ eventType: EVENT_TYPE.TRACK
48
+ });
49
+ }
50
+ // Sets reference to active component
51
+ componentRef.current = selectionExtensionState === null || selectionExtensionState === void 0 ? void 0 : (_selectionExtensionSt3 = selectionExtensionState.activeExtension) === null || _selectionExtensionSt3 === void 0 ? void 0 : _selectionExtensionSt3.extension.component;
52
+ }
53
+ }, [selectionExtensionState, editorAnalyticsAPI]);
54
+ if (!(selectionExtensionState !== null && selectionExtensionState !== void 0 && (_selectionExtensionSt4 = selectionExtensionState.activeExtension) !== null && _selectionExtensionSt4 !== void 0 && _selectionExtensionSt4.extension.component)) {
18
55
  return null;
19
56
  }
20
57
  const ExtensionComponent = selectionExtensionState.activeExtension.extension.component;
package/dist/es2019/ui/toolbar/SelectionExtensionDropdownMenu.js CHANGED
@@ -1,10 +1,12 @@
1
1
  import React, { useState } from 'react';
2
2
  import { injectIntl } from 'react-intl-next';
3
+ import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
3
4
  import { DropdownMenuWithKeyboardNavigation as DropdownMenu } from '@atlaskit/editor-common/ui-menu';
4
5
  import { SelectionExtensionDropdownMenuButton } from './SelectionExtensionDropdownMenuButton';
5
6
  const SelectionExtensionDropdownMenuComponent = /*#__PURE__*/React.memo(({
6
7
  items,
7
- onItemActivated
8
+ onItemActivated,
9
+ editorAnalyticsAPI
8
10
  }) => {
9
11
  const [isMenuOpen, setIsMenuOpen] = useState(false);
10
12
  return /*#__PURE__*/React.createElement(DropdownMenu, {
@@ -18,7 +20,21 @@ const SelectionExtensionDropdownMenuComponent = /*#__PURE__*/React.memo(({
18
20
  onItemActivated: onItemActivated,
19
21
  "data-testid": "selection-extension-dropdown-menu"
20
22
  }, /*#__PURE__*/React.createElement(SelectionExtensionDropdownMenuButton, {
21
- onClick: () => setIsMenuOpen(prevIsMenuOpen => !prevIsMenuOpen)
23
+ onClick: () => setIsMenuOpen(prevIsMenuOpen => {
24
+ const nextIsMenuOpen = !prevIsMenuOpen;
25
+ if (editorAnalyticsAPI) {
26
+ editorAnalyticsAPI.fireAnalyticsEvent({
27
+ action: ACTION.CLICKED,
28
+ actionSubject: ACTION_SUBJECT.BUTTON,
29
+ actionSubjectId: ACTION_SUBJECT_ID.EDITOR_PLUGIN_SELECTION_EXTENSION_DROPDOWN,
30
+ eventType: EVENT_TYPE.TRACK,
31
+ attributes: {
32
+ toggle: nextIsMenuOpen ? ACTION.OPENED : ACTION.CLOSED
33
+ }
34
+ });
35
+ }
36
+ return nextIsMenuOpen;
37
+ })
22
38
  }));
23
39
  });
24
40
  export const SelectionExtensionDropdownMenu = injectIntl(SelectionExtensionDropdownMenuComponent);
package/dist/es2019/ui/toolbar/SelectionExtensionItems.js CHANGED
@@ -6,6 +6,7 @@
6
6
  import React, { useMemo } from 'react';
7
7
  import { injectIntl } from 'react-intl-next';
8
8
  import { v4 as uuid } from 'uuid';
9
+ import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
9
10
  import { SelectionExtensionDropdownMenu } from './SelectionExtensionDropdownMenu';
10
11
  const transformExtensionsToItems = extensions => {
11
12
  const extensionToItems = extensions.map(extension => {
@@ -23,7 +24,8 @@ const transformExtensionsToItems = extensions => {
23
24
  };
24
25
  export const SelectionExtensionItemsComponent = ({
25
26
  extensions,
26
- onExtensionClick
27
+ onExtensionClick,
28
+ editorAnalyticsAPI
27
29
  }) => {
28
30
  const extensionsWithIdentifier = useMemo(() => extensions.map(extension => ({
29
31
  ...extension,
@@ -36,9 +38,18 @@ export const SelectionExtensionItemsComponent = ({
36
38
  const extension = extensionsWithIdentifier.find(ext => ext.id === item.value.name);
37
39
  if (extension) {
38
40
  onExtensionClick(extension);
41
+ if (editorAnalyticsAPI) {
42
+ editorAnalyticsAPI.fireAnalyticsEvent({
43
+ action: ACTION.CLICKED,
44
+ actionSubject: ACTION_SUBJECT.BUTTON,
45
+ actionSubjectId: ACTION_SUBJECT_ID.EDITOR_PLUGIN_SELECTION_EXTENSION_ITEM,
46
+ eventType: EVENT_TYPE.TRACK
47
+ });
48
+ }
39
49
  }
40
50
  };
41
51
  return /*#__PURE__*/React.createElement(SelectionExtensionDropdownMenu, {
52
+ editorAnalyticsAPI: editorAnalyticsAPI,
42
53
  items: items,
43
54
  onItemActivated: handleOnItemActivated
44
55
  });
package/dist/esm/selectionExtensionPlugin.js CHANGED
@@ -34,10 +34,12 @@ export var selectionExtensionPlugin = function selectionExtensionPlugin(_ref) {
34
34
  }
35
35
  },
36
36
  contentComponent: function contentComponent(_ref4) {
37
+ var _api$analytics;
37
38
  var editorView = _ref4.editorView;
38
39
  return /*#__PURE__*/React.createElement(SelectionExtensionComponentWrapper, {
39
40
  editorView: editorView,
40
- api: api
41
+ api: api,
42
+ editorAnalyticsAPI: api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions
41
43
  });
42
44
  },
43
45
  pluginsOptions: {
@@ -116,14 +118,14 @@ export var selectionExtensionPlugin = function selectionExtensionPlugin(_ref) {
116
118
  type: 'custom',
117
119
  supportsViewMode: true,
118
120
  render: function render(view) {
119
- var _api$analytics;
121
+ var _api$analytics2;
120
122
  if (!view) {
121
123
  return;
122
124
  }
123
125
  return /*#__PURE__*/React.createElement(SelectionExtensionItems, {
124
126
  api: api,
125
127
  editorView: view,
126
- editorAnalyticsAPI: api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions,
128
+ editorAnalyticsAPI: api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions,
127
129
  extensions: extensions,
128
130
  onExtensionClick: handleOnExtensionClick(view)
129
131
  });
package/dist/esm/ui/extension/SelectionExtensionComponentWrapper.js CHANGED
@@ -1,18 +1,55 @@
1
- import React, { useCallback, useEffect } from 'react';
1
+ import React, { useCallback, useEffect, useRef } from 'react';
2
+ import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
2
3
  import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
3
4
  export var SelectionExtensionComponentWrapper = function SelectionExtensionComponentWrapper(_ref) {
4
- var _selectionExtensionSt;
5
- var api = _ref.api;
5
+ var _selectionExtensionSt4;
6
+ var api = _ref.api,
7
+ editorAnalyticsAPI = _ref.editorAnalyticsAPI;
8
+ var componentRef = useRef();
6
9
  var _useSharedPluginState = useSharedPluginState(api, ['selectionExtension', 'editorViewMode']),
7
10
  selectionExtensionState = _useSharedPluginState.selectionExtensionState,
8
11
  editorViewModeState = _useSharedPluginState.editorViewModeState;
12
+
13
+ // Closed from active extension
9
14
  var handleOnClose = useCallback(function () {
10
15
  api === null || api === void 0 || api.core.actions.execute(api === null || api === void 0 ? void 0 : api.selectionExtension.commands.clearActiveExtension());
11
- }, [api]);
16
+ // Clears reference to active component
17
+ componentRef.current = undefined;
18
+ if (editorAnalyticsAPI) {
19
+ editorAnalyticsAPI.fireAnalyticsEvent({
20
+ action: ACTION.CLOSED,
21
+ actionSubject: ACTION_SUBJECT.EDITOR_PLUGIN_SELECTION_EXTENSION,
22
+ actionSubjectId: ACTION_SUBJECT_ID.EDITOR_PLUGIN_SELECTION_EXTENSION_COMPONENT,
23
+ eventType: EVENT_TYPE.TRACK
24
+ });
25
+ }
26
+ }, [editorAnalyticsAPI, api]);
27
+
28
+ // Closed from editor page mode change
12
29
  useEffect(function () {
13
- api === null || api === void 0 || api.core.actions.execute(api === null || api === void 0 ? void 0 : api.selectionExtension.commands.clearActiveExtension());
14
- }, [editorViewModeState, api]);
15
- if (!(selectionExtensionState !== null && selectionExtensionState !== void 0 && (_selectionExtensionSt = selectionExtensionState.activeExtension) !== null && _selectionExtensionSt !== void 0 && _selectionExtensionSt.extension.component)) {
30
+ if (componentRef.current !== undefined) {
31
+ handleOnClose();
32
+ }
33
+ }, [handleOnClose, editorViewModeState]);
34
+
35
+ // Viewed analytics event for component mount
36
+ useEffect(function () {
37
+ var _selectionExtensionSt, _selectionExtensionSt2;
38
+ if (componentRef.current !== (selectionExtensionState === null || selectionExtensionState === void 0 || (_selectionExtensionSt = selectionExtensionState.activeExtension) === null || _selectionExtensionSt === void 0 ? void 0 : _selectionExtensionSt.extension.component) && (selectionExtensionState === null || selectionExtensionState === void 0 || (_selectionExtensionSt2 = selectionExtensionState.activeExtension) === null || _selectionExtensionSt2 === void 0 ? void 0 : _selectionExtensionSt2.extension.component) !== undefined) {
39
+ var _selectionExtensionSt3;
40
+ if (editorAnalyticsAPI) {
41
+ editorAnalyticsAPI.fireAnalyticsEvent({
42
+ action: ACTION.VIEWED,
43
+ actionSubject: ACTION_SUBJECT.EDITOR_PLUGIN_SELECTION_EXTENSION,
44
+ actionSubjectId: ACTION_SUBJECT_ID.EDITOR_PLUGIN_SELECTION_EXTENSION_COMPONENT,
45
+ eventType: EVENT_TYPE.TRACK
46
+ });
47
+ }
48
+ // Sets reference to active component
49
+ componentRef.current = selectionExtensionState === null || selectionExtensionState === void 0 || (_selectionExtensionSt3 = selectionExtensionState.activeExtension) === null || _selectionExtensionSt3 === void 0 ? void 0 : _selectionExtensionSt3.extension.component;
50
+ }
51
+ }, [selectionExtensionState, editorAnalyticsAPI]);
52
+ if (!(selectionExtensionState !== null && selectionExtensionState !== void 0 && (_selectionExtensionSt4 = selectionExtensionState.activeExtension) !== null && _selectionExtensionSt4 !== void 0 && _selectionExtensionSt4.extension.component)) {
16
53
  return null;
17
54
  }
18
55
  var ExtensionComponent = selectionExtensionState.activeExtension.extension.component;
package/dist/esm/ui/toolbar/SelectionExtensionDropdownMenu.js CHANGED
@@ -1,11 +1,13 @@
1
1
  import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
2
2
  import React, { useState } from 'react';
3
3
  import { injectIntl } from 'react-intl-next';
4
+ import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
4
5
  import { DropdownMenuWithKeyboardNavigation as DropdownMenu } from '@atlaskit/editor-common/ui-menu';
5
6
  import { SelectionExtensionDropdownMenuButton } from './SelectionExtensionDropdownMenuButton';
6
7
  var SelectionExtensionDropdownMenuComponent = /*#__PURE__*/React.memo(function (_ref) {
7
8
  var items = _ref.items,
8
- onItemActivated = _ref.onItemActivated;
9
+ onItemActivated = _ref.onItemActivated,
10
+ editorAnalyticsAPI = _ref.editorAnalyticsAPI;
9
11
  var _useState = useState(false),
10
12
  _useState2 = _slicedToArray(_useState, 2),
11
13
  isMenuOpen = _useState2[0],
@@ -23,7 +25,19 @@ var SelectionExtensionDropdownMenuComponent = /*#__PURE__*/React.memo(function (
23
25
  }, /*#__PURE__*/React.createElement(SelectionExtensionDropdownMenuButton, {
24
26
  onClick: function onClick() {
25
27
  return setIsMenuOpen(function (prevIsMenuOpen) {
26
- return !prevIsMenuOpen;
28
+ var nextIsMenuOpen = !prevIsMenuOpen;
29
+ if (editorAnalyticsAPI) {
30
+ editorAnalyticsAPI.fireAnalyticsEvent({
31
+ action: ACTION.CLICKED,
32
+ actionSubject: ACTION_SUBJECT.BUTTON,
33
+ actionSubjectId: ACTION_SUBJECT_ID.EDITOR_PLUGIN_SELECTION_EXTENSION_DROPDOWN,
34
+ eventType: EVENT_TYPE.TRACK,
35
+ attributes: {
36
+ toggle: nextIsMenuOpen ? ACTION.OPENED : ACTION.CLOSED
37
+ }
38
+ });
39
+ }
40
+ return nextIsMenuOpen;
27
41
  });
28
42
  }
29
43
  }));
package/dist/esm/ui/toolbar/SelectionExtensionItems.js CHANGED
@@ -9,6 +9,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
9
9
  import React, { useMemo } from 'react';
10
10
  import { injectIntl } from 'react-intl-next';
11
11
  import { v4 as uuid } from 'uuid';
12
+ import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
12
13
  import { SelectionExtensionDropdownMenu } from './SelectionExtensionDropdownMenu';
13
14
  var transformExtensionsToItems = function transformExtensionsToItems(extensions) {
14
15
  var extensionToItems = extensions.map(function (extension) {
@@ -26,7 +27,8 @@ var transformExtensionsToItems = function transformExtensionsToItems(extensions)
26
27
  };
27
28
  export var SelectionExtensionItemsComponent = function SelectionExtensionItemsComponent(_ref) {
28
29
  var extensions = _ref.extensions,
29
- onExtensionClick = _ref.onExtensionClick;
30
+ onExtensionClick = _ref.onExtensionClick,
31
+ editorAnalyticsAPI = _ref.editorAnalyticsAPI;
30
32
  var extensionsWithIdentifier = useMemo(function () {
31
33
  return extensions.map(function (extension) {
32
34
  return _objectSpread(_objectSpread({}, extension), {}, {
@@ -44,9 +46,18 @@ export var SelectionExtensionItemsComponent = function SelectionExtensionItemsCo
44
46
  });
45
47
  if (extension) {
46
48
  onExtensionClick(extension);
49
+ if (editorAnalyticsAPI) {
50
+ editorAnalyticsAPI.fireAnalyticsEvent({
51
+ action: ACTION.CLICKED,
52
+ actionSubject: ACTION_SUBJECT.BUTTON,
53
+ actionSubjectId: ACTION_SUBJECT_ID.EDITOR_PLUGIN_SELECTION_EXTENSION_ITEM,
54
+ eventType: EVENT_TYPE.TRACK
55
+ });
56
+ }
47
57
  }
48
58
  };
49
59
  return /*#__PURE__*/React.createElement(SelectionExtensionDropdownMenu, {
60
+ editorAnalyticsAPI: editorAnalyticsAPI,
50
61
  items: items,
51
62
  onItemActivated: handleOnItemActivated
52
63
  });
package/dist/types/ui/extension/SelectionExtensionComponentWrapper.d.ts CHANGED
@@ -1,10 +1,12 @@
1
1
  import React from 'react';
2
+ import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
2
3
  import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
3
4
  import type { EditorView } from '@atlaskit/editor-prosemirror/view';
4
5
  import type { SelectionExtensionPlugin } from '../../selectionExtensionPluginType';
5
6
  type SelectionExtensionComponentWrapperProps = {
6
7
  api: ExtractInjectionAPI<SelectionExtensionPlugin> | undefined;
7
8
  editorView: EditorView;
9
+ editorAnalyticsAPI?: EditorAnalyticsAPI;
8
10
  };
9
- export declare const SelectionExtensionComponentWrapper: ({ api, }: SelectionExtensionComponentWrapperProps) => React.JSX.Element | null;
11
+ export declare const SelectionExtensionComponentWrapper: ({ api, editorAnalyticsAPI, }: SelectionExtensionComponentWrapperProps) => React.JSX.Element | null;
10
12
  export {};
package/dist/types/ui/toolbar/SelectionExtensionDropdownMenu.d.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  import React from 'react';
2
2
  import type { WrappedComponentProps } from 'react-intl-next';
3
+ import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
3
4
  import { type MenuItem } from '@atlaskit/editor-common/ui-menu';
4
5
  import { type MenuItemsType } from '../../types';
5
6
  export type SelectionExtensionDropdownMenuProps = {
@@ -8,6 +9,7 @@ export type SelectionExtensionDropdownMenuProps = {
8
9
  item: MenuItem;
9
10
  shouldCloseMenu?: boolean;
10
11
  }) => void;
12
+ editorAnalyticsAPI?: EditorAnalyticsAPI;
11
13
  } & WrappedComponentProps;
12
14
  export declare const SelectionExtensionDropdownMenu: React.FC<import("react-intl-next").WithIntlProps<{
13
15
  items: MenuItemsType;
@@ -15,6 +17,7 @@ export declare const SelectionExtensionDropdownMenu: React.FC<import("react-intl
15
17
  item: MenuItem;
16
18
  shouldCloseMenu?: boolean;
17
19
  }) => void) | undefined;
20
+ editorAnalyticsAPI?: EditorAnalyticsAPI | undefined;
18
21
  } & WrappedComponentProps>> & {
19
22
  WrappedComponent: React.ComponentType<{
20
23
  items: MenuItemsType;
@@ -22,5 +25,6 @@ export declare const SelectionExtensionDropdownMenu: React.FC<import("react-intl
22
25
  item: MenuItem;
23
26
  shouldCloseMenu?: boolean;
24
27
  }) => void) | undefined;
28
+ editorAnalyticsAPI?: EditorAnalyticsAPI | undefined;
25
29
  } & WrappedComponentProps>;
26
30
  };
package/dist/types/ui/toolbar/SelectionExtensionItems.d.ts CHANGED
@@ -16,7 +16,7 @@ type SelectionExtensionItemsProps = {
16
16
  extensions: SelectionExtensionContract[];
17
17
  onExtensionClick: (extension: SelectionExtensionContract) => void;
18
18
  } & WrappedComponentProps;
19
- export declare const SelectionExtensionItemsComponent: ({ extensions, onExtensionClick, }: SelectionExtensionItemsProps) => React.JSX.Element;
19
+ export declare const SelectionExtensionItemsComponent: ({ extensions, onExtensionClick, editorAnalyticsAPI, }: SelectionExtensionItemsProps) => React.JSX.Element;
20
20
  export declare const SelectionExtensionItems: React.FC<import("react-intl-next").WithIntlProps<SelectionExtensionItemsProps>> & {
21
21
  WrappedComponent: React.ComponentType<SelectionExtensionItemsProps>;
22
22
  };
package/dist/types-ts4.5/ui/extension/SelectionExtensionComponentWrapper.d.ts CHANGED
@@ -1,10 +1,12 @@
1
1
  import React from 'react';
2
+ import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
2
3
  import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
3
4
  import type { EditorView } from '@atlaskit/editor-prosemirror/view';
4
5
  import type { SelectionExtensionPlugin } from '../../selectionExtensionPluginType';
5
6
  type SelectionExtensionComponentWrapperProps = {
6
7
  api: ExtractInjectionAPI<SelectionExtensionPlugin> | undefined;
7
8
  editorView: EditorView;
9
+ editorAnalyticsAPI?: EditorAnalyticsAPI;
8
10
  };
9
- export declare const SelectionExtensionComponentWrapper: ({ api, }: SelectionExtensionComponentWrapperProps) => React.JSX.Element | null;
11
+ export declare const SelectionExtensionComponentWrapper: ({ api, editorAnalyticsAPI, }: SelectionExtensionComponentWrapperProps) => React.JSX.Element | null;
10
12
  export {};
package/dist/types-ts4.5/ui/toolbar/SelectionExtensionDropdownMenu.d.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  import React from 'react';
2
2
  import type { WrappedComponentProps } from 'react-intl-next';
3
+ import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
3
4
  import { type MenuItem } from '@atlaskit/editor-common/ui-menu';
4
5
  import { type MenuItemsType } from '../../types';
5
6
  export type SelectionExtensionDropdownMenuProps = {
@@ -8,6 +9,7 @@ export type SelectionExtensionDropdownMenuProps = {
8
9
  item: MenuItem;
9
10
  shouldCloseMenu?: boolean;
10
11
  }) => void;
12
+ editorAnalyticsAPI?: EditorAnalyticsAPI;
11
13
  } & WrappedComponentProps;
12
14
  export declare const SelectionExtensionDropdownMenu: React.FC<import("react-intl-next").WithIntlProps<{
13
15
  items: MenuItemsType;
@@ -15,6 +17,7 @@ export declare const SelectionExtensionDropdownMenu: React.FC<import("react-intl
15
17
  item: MenuItem;
16
18
  shouldCloseMenu?: boolean;
17
19
  }) => void) | undefined;
20
+ editorAnalyticsAPI?: EditorAnalyticsAPI | undefined;
18
21
  } & WrappedComponentProps>> & {
19
22
  WrappedComponent: React.ComponentType<{
20
23
  items: MenuItemsType;
@@ -22,5 +25,6 @@ export declare const SelectionExtensionDropdownMenu: React.FC<import("react-intl
22
25
  item: MenuItem;
23
26
  shouldCloseMenu?: boolean;
24
27
  }) => void) | undefined;
28
+ editorAnalyticsAPI?: EditorAnalyticsAPI | undefined;
25
29
  } & WrappedComponentProps>;
26
30
  };
package/dist/types-ts4.5/ui/toolbar/SelectionExtensionItems.d.ts CHANGED
@@ -16,7 +16,7 @@ type SelectionExtensionItemsProps = {
16
16
  extensions: SelectionExtensionContract[];
17
17
  onExtensionClick: (extension: SelectionExtensionContract) => void;
18
18
  } & WrappedComponentProps;
19
- export declare const SelectionExtensionItemsComponent: ({ extensions, onExtensionClick, }: SelectionExtensionItemsProps) => React.JSX.Element;
19
+ export declare const SelectionExtensionItemsComponent: ({ extensions, onExtensionClick, editorAnalyticsAPI, }: SelectionExtensionItemsProps) => React.JSX.Element;
20
20
  export declare const SelectionExtensionItems: React.FC<import("react-intl-next").WithIntlProps<SelectionExtensionItemsProps>> & {
21
21
  WrappedComponent: React.ComponentType<SelectionExtensionItemsProps>;
22
22
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-selection-extension",
3
- "version": "2.1.0",
3
+ "version": "2.1.1",
4
4
  "description": "editor-plugin-selection-extension plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",