@atlaskit/editor-plugin-card 10.2.0 → 11.0.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 (10) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/dist/cjs/nodeviews/inlineCardWithAwareness.js +32 -5
  3. package/dist/cjs/ui/OpenPreviewButton/index.js +19 -1
  4. package/dist/es2019/nodeviews/inlineCardWithAwareness.js +30 -2
  5. package/dist/es2019/ui/OpenPreviewButton/index.js +17 -1
  6. package/dist/esm/nodeviews/inlineCardWithAwareness.js +32 -5
  7. package/dist/esm/ui/OpenPreviewButton/index.js +19 -1
  8. package/dist/types/ui/OpenPreviewButton/index.d.ts +4 -2
  9. package/dist/types-ts4.5/ui/OpenPreviewButton/index.d.ts +4 -2
  10. package/package.json +15 -15
package/CHANGELOG.md CHANGED
@@ -1,5 +1,19 @@
1
1
  # @atlaskit/editor-plugin-card
2
2
 
3
+ ## 11.0.1
4
+
5
+ ### Patch Changes
6
+
7
+ - [`49444f7239178`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/49444f7239178) -
8
+ Added analytics events to preview panel hover overlays and toolbar button
9
+ - Updated dependencies
10
+
11
+ ## 11.0.0
12
+
13
+ ### Patch Changes
14
+
15
+ - Updated dependencies
16
+
3
17
  ## 10.2.0
4
18
 
5
19
  ### Minor Changes
package/dist/cjs/nodeviews/inlineCardWithAwareness.js CHANGED
@@ -8,6 +8,7 @@ Object.defineProperty(exports, "__esModule", {
8
8
  exports.InlineCardWithAwareness = void 0;
9
9
  var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
10
10
  var _react = _interopRequireWildcard(require("react"));
11
+ var _analytics = require("@atlaskit/editor-common/analytics");
11
12
  var _hooks = require("@atlaskit/editor-common/hooks");
12
13
  var _ui = require("@atlaskit/editor-common/ui");
13
14
  var _state = require("@atlaskit/editor-prosemirror/state");
@@ -152,23 +153,43 @@ var InlineCardWithAwareness = exports.InlineCardWithAwareness = /*#__PURE__*/(0,
152
153
  }));
153
154
  var openPreviewPanel = cardContext === null || cardContext === void 0 || (_cardContext$value3 = cardContext.value) === null || _cardContext$value3 === void 0 ? void 0 : _cardContext$value3.openPreviewPanel;
154
155
  var isPreviewPanelAvailable = Boolean(openPreviewPanel && isPanelAvailable);
156
+ var firePreviewPanelClickEvent = function firePreviewPanelClickEvent(_ref2) {
157
+ var _cardContext$value4, _pluginInjectionApi$a2;
158
+ var previewType = _ref2.previewType;
159
+ var store = cardContext === null || cardContext === void 0 || (_cardContext$value4 = cardContext.value) === null || _cardContext$value4 === void 0 ? void 0 : _cardContext$value4.store;
160
+ var urlState = store === null || store === void 0 ? void 0 : store.getState()[url || ''];
161
+ if (pluginInjectionApi !== null && pluginInjectionApi !== void 0 && (_pluginInjectionApi$a2 = pluginInjectionApi.analytics) !== null && _pluginInjectionApi$a2 !== void 0 && _pluginInjectionApi$a2.actions) {
162
+ var _pluginInjectionApi$a3, _urlState$details$met, _urlState$details, _urlState$details$met2, _urlState$details2;
163
+ pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a3 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a3 === void 0 || (_pluginInjectionApi$a3 = _pluginInjectionApi$a3.actions) === null || _pluginInjectionApi$a3 === void 0 || _pluginInjectionApi$a3.fireAnalyticsEvent({
164
+ action: _analytics.ACTION.CLICKED,
165
+ actionSubject: _analytics.ACTION_SUBJECT.SMART_LINK,
166
+ actionSubjectId: _analytics.ACTION_SUBJECT_ID.HOVER_LABEL,
167
+ eventType: _analytics.EVENT_TYPE.UI,
168
+ attributes: {
169
+ previewType: previewType,
170
+ destinationProduct: (_urlState$details$met = urlState === null || urlState === void 0 || (_urlState$details = urlState.details) === null || _urlState$details === void 0 || (_urlState$details = _urlState$details.meta) === null || _urlState$details === void 0 ? void 0 : _urlState$details.product) !== null && _urlState$details$met !== void 0 ? _urlState$details$met : null,
171
+ destinationSubproduct: (_urlState$details$met2 = urlState === null || urlState === void 0 || (_urlState$details2 = urlState.details) === null || _urlState$details2 === void 0 || (_urlState$details2 = _urlState$details2.meta) === null || _urlState$details2 === void 0 ? void 0 : _urlState$details2.subproduct) !== null && _urlState$details$met2 !== void 0 ? _urlState$details$met2 : null
172
+ }
173
+ });
174
+ }
175
+ };
155
176
  var innerCardWithPanelButtonOverlay = /*#__PURE__*/_react.default.createElement(_PreviewInvoker.PreviewInvoker, {
156
177
  url: url,
157
178
  appearance: "inline"
158
- }, function (_ref2) {
159
- var canPreview = _ref2.canPreview,
160
- invokePreview = _ref2.invokePreview;
179
+ }, function (_ref3) {
180
+ var canPreview = _ref3.canPreview,
181
+ invokePreview = _ref3.invokePreview;
161
182
  var isPreviewModalAvailable = Boolean(canPreview && invokePreview);
162
183
  // In view mode we show HoverLinkOverlay only with if preview mode or panel is available
163
184
  // otherwise a use can click on smartlink itself to open the link in a new tab.
164
185
  var isPreviewAvailable = isPreviewPanelAvailable || isPreviewModalAvailable;
165
186
  if (isPreviewAvailable) {
166
- var _pluginInjectionApi$a2;
187
+ var _pluginInjectionApi$a4;
167
188
  return /*#__PURE__*/_react.default.createElement(_ui.HoverLinkOverlay, {
168
189
  isVisible: isResolvedViewRendered,
169
190
  url: url,
170
191
  compactPadding: editorAppearance === 'comment' || editorAppearance === 'chromeless',
171
- editorAnalyticsApi: pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a2 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a2 === void 0 ? void 0 : _pluginInjectionApi$a2.actions,
192
+ editorAnalyticsApi: pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a4 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a4 === void 0 ? void 0 : _pluginInjectionApi$a4.actions,
172
193
  view: view,
173
194
  showPanelButton: isPreviewAvailable,
174
195
  showPanelButtonIcon: isPreviewAvailable && isPreviewPanelAvailable ? 'panel' : 'modal',
@@ -181,9 +202,15 @@ var InlineCardWithAwareness = exports.InlineCardWithAwareness = /*#__PURE__*/(0,
181
202
  name: name || '',
182
203
  iconUrl: iconUrl
183
204
  });
205
+ firePreviewPanelClickEvent({
206
+ previewType: 'panel'
207
+ });
184
208
  } else if (isPreviewModalAvailable) {
185
209
  event.preventDefault();
186
210
  invokePreview === null || invokePreview === void 0 || invokePreview();
211
+ firePreviewPanelClickEvent({
212
+ previewType: 'modal'
213
+ });
187
214
  }
188
215
  }
189
216
  }, /*#__PURE__*/_react.default.createElement(_inlineCard.InlineCard, {
package/dist/cjs/ui/OpenPreviewButton/index.js CHANGED
@@ -5,22 +5,31 @@ Object.defineProperty(exports, "__esModule", {
5
5
  value: true
6
6
  });
7
7
  exports.OpenPreviewPanelToolbarButton = void 0;
8
+ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
8
9
  var _react = _interopRequireDefault(require("react"));
10
+ var _analytics = require("@atlaskit/editor-common/analytics");
9
11
  var _messages = require("@atlaskit/editor-common/messages");
10
12
  var _ui = require("@atlaskit/editor-common/ui");
11
13
  var _panelRight = _interopRequireDefault(require("@atlaskit/icon/core/panel-right"));
12
14
  var _linkProvider = require("@atlaskit/link-provider");
13
15
  var _compiled = require("@atlaskit/primitives/compiled");
14
16
  var _smartCard = require("@atlaskit/smart-card");
17
+ var _utils = require("../../pm-plugins/utils");
18
+ var _utils2 = require("../analytics/utils");
19
+ 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; }
20
+ 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; }
15
21
  var OpenPreviewPanelToolbarButton = exports.OpenPreviewPanelToolbarButton = function OpenPreviewPanelToolbarButton(_ref) {
16
22
  var node = _ref.node,
17
23
  intl = _ref.intl,
18
- areAnyNewToolbarFlagsEnabled = _ref.areAnyNewToolbarFlagsEnabled;
24
+ areAnyNewToolbarFlagsEnabled = _ref.areAnyNewToolbarFlagsEnabled,
25
+ editorAnalyticsApi = _ref.editorAnalyticsApi,
26
+ editorView = _ref.editorView;
19
27
  var _useSmartLinkContext = (0, _linkProvider.useSmartLinkContext)(),
20
28
  store = _useSmartLinkContext.store,
21
29
  isPreviewPanelAvailable = _useSmartLinkContext.isPreviewPanelAvailable,
22
30
  openPreviewPanel = _useSmartLinkContext.openPreviewPanel;
23
31
  var url = node.attrs.url;
32
+ var display = (0, _utils2.appearanceForLink)(node);
24
33
  var cardState = store === null || store === void 0 ? void 0 : store.getState()[url];
25
34
  if (cardState) {
26
35
  var ari = (0, _smartCard.getObjectAri)(cardState.details);
@@ -38,6 +47,15 @@ var OpenPreviewPanelToolbarButton = exports.OpenPreviewPanelToolbarButton = func
38
47
  iconUrl: iconUrl
39
48
  });
40
49
  }
50
+ editorAnalyticsApi === null || editorAnalyticsApi === void 0 || editorAnalyticsApi.fireAnalyticsEvent({
51
+ action: _analytics.ACTION.CLICKED,
52
+ actionSubject: _analytics.ACTION_SUBJECT.SMART_LINK,
53
+ actionSubjectId: _analytics.ACTION_SUBJECT_ID.TOOLBAR_PREVIEW,
54
+ attributes: _objectSpread({
55
+ previewType: 'panel'
56
+ }, (0, _utils.getResolvedAttributesFromStore)(url, display, store)),
57
+ eventType: _analytics.EVENT_TYPE.UI
58
+ });
41
59
  };
42
60
  var title = intl.formatMessage(_messages.linkMessages.openPreviewPanel);
43
61
  var icon = areAnyNewToolbarFlagsEnabled ? /*#__PURE__*/_react.default.createElement(_panelRight.default, {
package/dist/es2019/nodeviews/inlineCardWithAwareness.js CHANGED
@@ -1,4 +1,5 @@
1
1
  import React, { memo, useCallback, useMemo, useState } from 'react';
2
+ import { ACTION_SUBJECT_ID, EVENT_TYPE, ACTION, ACTION_SUBJECT } from '@atlaskit/editor-common/analytics';
2
3
  import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
3
4
  import { HoverLinkOverlay } from '@atlaskit/editor-common/ui';
4
5
  import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
@@ -129,6 +130,27 @@ export const InlineCardWithAwareness = /*#__PURE__*/memo(({
129
130
  }));
130
131
  const openPreviewPanel = cardContext === null || cardContext === void 0 ? void 0 : (_cardContext$value3 = cardContext.value) === null || _cardContext$value3 === void 0 ? void 0 : _cardContext$value3.openPreviewPanel;
131
132
  const isPreviewPanelAvailable = Boolean(openPreviewPanel && isPanelAvailable);
133
+ const firePreviewPanelClickEvent = ({
134
+ previewType
135
+ }) => {
136
+ var _cardContext$value4, _pluginInjectionApi$a2;
137
+ const store = cardContext === null || cardContext === void 0 ? void 0 : (_cardContext$value4 = cardContext.value) === null || _cardContext$value4 === void 0 ? void 0 : _cardContext$value4.store;
138
+ const urlState = store === null || store === void 0 ? void 0 : store.getState()[url || ''];
139
+ if (pluginInjectionApi !== null && pluginInjectionApi !== void 0 && (_pluginInjectionApi$a2 = pluginInjectionApi.analytics) !== null && _pluginInjectionApi$a2 !== void 0 && _pluginInjectionApi$a2.actions) {
140
+ var _pluginInjectionApi$a3, _pluginInjectionApi$a4, _urlState$details$met, _urlState$details, _urlState$details$met2, _urlState$details$met3, _urlState$details2, _urlState$details2$me;
141
+ pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a3 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a3 === void 0 ? void 0 : (_pluginInjectionApi$a4 = _pluginInjectionApi$a3.actions) === null || _pluginInjectionApi$a4 === void 0 ? void 0 : _pluginInjectionApi$a4.fireAnalyticsEvent({
142
+ action: ACTION.CLICKED,
143
+ actionSubject: ACTION_SUBJECT.SMART_LINK,
144
+ actionSubjectId: ACTION_SUBJECT_ID.HOVER_LABEL,
145
+ eventType: EVENT_TYPE.UI,
146
+ attributes: {
147
+ previewType,
148
+ destinationProduct: (_urlState$details$met = urlState === null || urlState === void 0 ? void 0 : (_urlState$details = urlState.details) === null || _urlState$details === void 0 ? void 0 : (_urlState$details$met2 = _urlState$details.meta) === null || _urlState$details$met2 === void 0 ? void 0 : _urlState$details$met2.product) !== null && _urlState$details$met !== void 0 ? _urlState$details$met : null,
149
+ destinationSubproduct: (_urlState$details$met3 = urlState === null || urlState === void 0 ? void 0 : (_urlState$details2 = urlState.details) === null || _urlState$details2 === void 0 ? void 0 : (_urlState$details2$me = _urlState$details2.meta) === null || _urlState$details2$me === void 0 ? void 0 : _urlState$details2$me.subproduct) !== null && _urlState$details$met3 !== void 0 ? _urlState$details$met3 : null
150
+ }
151
+ });
152
+ }
153
+ };
132
154
  const innerCardWithPanelButtonOverlay = /*#__PURE__*/React.createElement(PreviewInvoker, {
133
155
  url: url,
134
156
  appearance: "inline"
@@ -141,12 +163,12 @@ export const InlineCardWithAwareness = /*#__PURE__*/memo(({
141
163
  // otherwise a use can click on smartlink itself to open the link in a new tab.
142
164
  const isPreviewAvailable = isPreviewPanelAvailable || isPreviewModalAvailable;
143
165
  if (isPreviewAvailable) {
144
- var _pluginInjectionApi$a2;
166
+ var _pluginInjectionApi$a5;
145
167
  return /*#__PURE__*/React.createElement(HoverLinkOverlay, {
146
168
  isVisible: isResolvedViewRendered,
147
169
  url: url,
148
170
  compactPadding: editorAppearance === 'comment' || editorAppearance === 'chromeless',
149
- editorAnalyticsApi: pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a2 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a2 === void 0 ? void 0 : _pluginInjectionApi$a2.actions,
171
+ editorAnalyticsApi: pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a5 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a5 === void 0 ? void 0 : _pluginInjectionApi$a5.actions,
150
172
  view: view,
151
173
  showPanelButton: isPreviewAvailable,
152
174
  showPanelButtonIcon: isPreviewAvailable && isPreviewPanelAvailable ? 'panel' : 'modal',
@@ -159,9 +181,15 @@ export const InlineCardWithAwareness = /*#__PURE__*/memo(({
159
181
  name: name || '',
160
182
  iconUrl
161
183
  });
184
+ firePreviewPanelClickEvent({
185
+ previewType: 'panel'
186
+ });
162
187
  } else if (isPreviewModalAvailable) {
163
188
  event.preventDefault();
164
189
  invokePreview === null || invokePreview === void 0 ? void 0 : invokePreview();
190
+ firePreviewPanelClickEvent({
191
+ previewType: 'modal'
192
+ });
165
193
  }
166
194
  }
167
195
  }, /*#__PURE__*/React.createElement(InlineCard, {
package/dist/es2019/ui/OpenPreviewButton/index.js CHANGED
@@ -1,14 +1,19 @@
1
1
  import React from 'react';
2
+ import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
2
3
  import { linkMessages } from '@atlaskit/editor-common/messages';
3
4
  import { FloatingToolbarButton as Button } from '@atlaskit/editor-common/ui';
4
5
  import PanelRightIcon from '@atlaskit/icon/core/panel-right';
5
6
  import { useSmartLinkContext } from '@atlaskit/link-provider';
6
7
  import { Inline, Box, Flex } from '@atlaskit/primitives/compiled';
7
8
  import { getObjectAri, getObjectIconUrl, getObjectName } from '@atlaskit/smart-card';
9
+ import { getResolvedAttributesFromStore } from '../../pm-plugins/utils';
10
+ import { appearanceForLink } from '../analytics/utils';
8
11
  export const OpenPreviewPanelToolbarButton = ({
9
12
  node,
10
13
  intl,
11
- areAnyNewToolbarFlagsEnabled
14
+ areAnyNewToolbarFlagsEnabled,
15
+ editorAnalyticsApi,
16
+ editorView
12
17
  }) => {
13
18
  const {
14
19
  store,
@@ -16,6 +21,7 @@ export const OpenPreviewPanelToolbarButton = ({
16
21
  openPreviewPanel
17
22
  } = useSmartLinkContext();
18
23
  const url = node.attrs.url;
24
+ const display = appearanceForLink(node);
19
25
  const cardState = store === null || store === void 0 ? void 0 : store.getState()[url];
20
26
  if (cardState) {
21
27
  const ari = getObjectAri(cardState.details);
@@ -33,6 +39,16 @@ export const OpenPreviewPanelToolbarButton = ({
33
39
  iconUrl
34
40
  });
35
41
  }
42
+ editorAnalyticsApi === null || editorAnalyticsApi === void 0 ? void 0 : editorAnalyticsApi.fireAnalyticsEvent({
43
+ action: ACTION.CLICKED,
44
+ actionSubject: ACTION_SUBJECT.SMART_LINK,
45
+ actionSubjectId: ACTION_SUBJECT_ID.TOOLBAR_PREVIEW,
46
+ attributes: {
47
+ previewType: 'panel',
48
+ ...getResolvedAttributesFromStore(url, display, store)
49
+ },
50
+ eventType: EVENT_TYPE.UI
51
+ });
36
52
  };
37
53
  const title = intl.formatMessage(linkMessages.openPreviewPanel);
38
54
  const icon = areAnyNewToolbarFlagsEnabled ? /*#__PURE__*/React.createElement(PanelRightIcon, {
package/dist/esm/nodeviews/inlineCardWithAwareness.js CHANGED
@@ -1,5 +1,6 @@
1
1
  import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
2
2
  import React, { memo, useCallback, useMemo, useState } from 'react';
3
+ import { ACTION_SUBJECT_ID, EVENT_TYPE, ACTION, ACTION_SUBJECT } from '@atlaskit/editor-common/analytics';
3
4
  import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
4
5
  import { HoverLinkOverlay } from '@atlaskit/editor-common/ui';
5
6
  import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
@@ -143,23 +144,43 @@ export var InlineCardWithAwareness = /*#__PURE__*/memo(function (_ref) {
143
144
  }));
144
145
  var openPreviewPanel = cardContext === null || cardContext === void 0 || (_cardContext$value3 = cardContext.value) === null || _cardContext$value3 === void 0 ? void 0 : _cardContext$value3.openPreviewPanel;
145
146
  var isPreviewPanelAvailable = Boolean(openPreviewPanel && isPanelAvailable);
147
+ var firePreviewPanelClickEvent = function firePreviewPanelClickEvent(_ref2) {
148
+ var _cardContext$value4, _pluginInjectionApi$a2;
149
+ var previewType = _ref2.previewType;
150
+ var store = cardContext === null || cardContext === void 0 || (_cardContext$value4 = cardContext.value) === null || _cardContext$value4 === void 0 ? void 0 : _cardContext$value4.store;
151
+ var urlState = store === null || store === void 0 ? void 0 : store.getState()[url || ''];
152
+ if (pluginInjectionApi !== null && pluginInjectionApi !== void 0 && (_pluginInjectionApi$a2 = pluginInjectionApi.analytics) !== null && _pluginInjectionApi$a2 !== void 0 && _pluginInjectionApi$a2.actions) {
153
+ var _pluginInjectionApi$a3, _urlState$details$met, _urlState$details, _urlState$details$met2, _urlState$details2;
154
+ pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a3 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a3 === void 0 || (_pluginInjectionApi$a3 = _pluginInjectionApi$a3.actions) === null || _pluginInjectionApi$a3 === void 0 || _pluginInjectionApi$a3.fireAnalyticsEvent({
155
+ action: ACTION.CLICKED,
156
+ actionSubject: ACTION_SUBJECT.SMART_LINK,
157
+ actionSubjectId: ACTION_SUBJECT_ID.HOVER_LABEL,
158
+ eventType: EVENT_TYPE.UI,
159
+ attributes: {
160
+ previewType: previewType,
161
+ destinationProduct: (_urlState$details$met = urlState === null || urlState === void 0 || (_urlState$details = urlState.details) === null || _urlState$details === void 0 || (_urlState$details = _urlState$details.meta) === null || _urlState$details === void 0 ? void 0 : _urlState$details.product) !== null && _urlState$details$met !== void 0 ? _urlState$details$met : null,
162
+ destinationSubproduct: (_urlState$details$met2 = urlState === null || urlState === void 0 || (_urlState$details2 = urlState.details) === null || _urlState$details2 === void 0 || (_urlState$details2 = _urlState$details2.meta) === null || _urlState$details2 === void 0 ? void 0 : _urlState$details2.subproduct) !== null && _urlState$details$met2 !== void 0 ? _urlState$details$met2 : null
163
+ }
164
+ });
165
+ }
166
+ };
146
167
  var innerCardWithPanelButtonOverlay = /*#__PURE__*/React.createElement(PreviewInvoker, {
147
168
  url: url,
148
169
  appearance: "inline"
149
- }, function (_ref2) {
150
- var canPreview = _ref2.canPreview,
151
- invokePreview = _ref2.invokePreview;
170
+ }, function (_ref3) {
171
+ var canPreview = _ref3.canPreview,
172
+ invokePreview = _ref3.invokePreview;
152
173
  var isPreviewModalAvailable = Boolean(canPreview && invokePreview);
153
174
  // In view mode we show HoverLinkOverlay only with if preview mode or panel is available
154
175
  // otherwise a use can click on smartlink itself to open the link in a new tab.
155
176
  var isPreviewAvailable = isPreviewPanelAvailable || isPreviewModalAvailable;
156
177
  if (isPreviewAvailable) {
157
- var _pluginInjectionApi$a2;
178
+ var _pluginInjectionApi$a4;
158
179
  return /*#__PURE__*/React.createElement(HoverLinkOverlay, {
159
180
  isVisible: isResolvedViewRendered,
160
181
  url: url,
161
182
  compactPadding: editorAppearance === 'comment' || editorAppearance === 'chromeless',
162
- editorAnalyticsApi: pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a2 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a2 === void 0 ? void 0 : _pluginInjectionApi$a2.actions,
183
+ editorAnalyticsApi: pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a4 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a4 === void 0 ? void 0 : _pluginInjectionApi$a4.actions,
163
184
  view: view,
164
185
  showPanelButton: isPreviewAvailable,
165
186
  showPanelButtonIcon: isPreviewAvailable && isPreviewPanelAvailable ? 'panel' : 'modal',
@@ -172,9 +193,15 @@ export var InlineCardWithAwareness = /*#__PURE__*/memo(function (_ref) {
172
193
  name: name || '',
173
194
  iconUrl: iconUrl
174
195
  });
196
+ firePreviewPanelClickEvent({
197
+ previewType: 'panel'
198
+ });
175
199
  } else if (isPreviewModalAvailable) {
176
200
  event.preventDefault();
177
201
  invokePreview === null || invokePreview === void 0 || invokePreview();
202
+ firePreviewPanelClickEvent({
203
+ previewType: 'modal'
204
+ });
178
205
  }
179
206
  }
180
207
  }, /*#__PURE__*/React.createElement(InlineCard, {
package/dist/esm/ui/OpenPreviewButton/index.js CHANGED
@@ -1,19 +1,28 @@
1
+ import _defineProperty from "@babel/runtime/helpers/defineProperty";
2
+ 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; }
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; }
1
4
  import React from 'react';
5
+ import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
2
6
  import { linkMessages } from '@atlaskit/editor-common/messages';
3
7
  import { FloatingToolbarButton as Button } from '@atlaskit/editor-common/ui';
4
8
  import PanelRightIcon from '@atlaskit/icon/core/panel-right';
5
9
  import { useSmartLinkContext } from '@atlaskit/link-provider';
6
10
  import { Inline, Box, Flex } from '@atlaskit/primitives/compiled';
7
11
  import { getObjectAri, getObjectIconUrl, getObjectName } from '@atlaskit/smart-card';
12
+ import { getResolvedAttributesFromStore } from '../../pm-plugins/utils';
13
+ import { appearanceForLink } from '../analytics/utils';
8
14
  export var OpenPreviewPanelToolbarButton = function OpenPreviewPanelToolbarButton(_ref) {
9
15
  var node = _ref.node,
10
16
  intl = _ref.intl,
11
- areAnyNewToolbarFlagsEnabled = _ref.areAnyNewToolbarFlagsEnabled;
17
+ areAnyNewToolbarFlagsEnabled = _ref.areAnyNewToolbarFlagsEnabled,
18
+ editorAnalyticsApi = _ref.editorAnalyticsApi,
19
+ editorView = _ref.editorView;
12
20
  var _useSmartLinkContext = useSmartLinkContext(),
13
21
  store = _useSmartLinkContext.store,
14
22
  isPreviewPanelAvailable = _useSmartLinkContext.isPreviewPanelAvailable,
15
23
  openPreviewPanel = _useSmartLinkContext.openPreviewPanel;
16
24
  var url = node.attrs.url;
25
+ var display = appearanceForLink(node);
17
26
  var cardState = store === null || store === void 0 ? void 0 : store.getState()[url];
18
27
  if (cardState) {
19
28
  var ari = getObjectAri(cardState.details);
@@ -31,6 +40,15 @@ export var OpenPreviewPanelToolbarButton = function OpenPreviewPanelToolbarButto
31
40
  iconUrl: iconUrl
32
41
  });
33
42
  }
43
+ editorAnalyticsApi === null || editorAnalyticsApi === void 0 || editorAnalyticsApi.fireAnalyticsEvent({
44
+ action: ACTION.CLICKED,
45
+ actionSubject: ACTION_SUBJECT.SMART_LINK,
46
+ actionSubjectId: ACTION_SUBJECT_ID.TOOLBAR_PREVIEW,
47
+ attributes: _objectSpread({
48
+ previewType: 'panel'
49
+ }, getResolvedAttributesFromStore(url, display, store)),
50
+ eventType: EVENT_TYPE.UI
51
+ });
34
52
  };
35
53
  var title = intl.formatMessage(linkMessages.openPreviewPanel);
36
54
  var icon = areAnyNewToolbarFlagsEnabled ? /*#__PURE__*/React.createElement(PanelRightIcon, {
package/dist/types/ui/OpenPreviewButton/index.d.ts CHANGED
@@ -1,12 +1,14 @@
1
1
  import React from 'react';
2
2
  import { type IntlShape } from 'react-intl-next';
3
- import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
3
+ import { type EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
4
4
  import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
5
+ import type { EditorView } from '@atlaskit/editor-prosemirror/view';
5
6
  type OpenPreviewPanelToolbarButtonProps = {
6
7
  areAnyNewToolbarFlagsEnabled: boolean;
7
8
  editorAnalyticsApi?: EditorAnalyticsAPI;
9
+ editorView?: EditorView;
8
10
  intl: IntlShape;
9
11
  node: PMNode;
10
12
  };
11
- export declare const OpenPreviewPanelToolbarButton: ({ node, intl, areAnyNewToolbarFlagsEnabled, }: OpenPreviewPanelToolbarButtonProps) => React.JSX.Element | null;
13
+ export declare const OpenPreviewPanelToolbarButton: ({ node, intl, areAnyNewToolbarFlagsEnabled, editorAnalyticsApi, editorView, }: OpenPreviewPanelToolbarButtonProps) => React.JSX.Element | null;
12
14
  export {};
package/dist/types-ts4.5/ui/OpenPreviewButton/index.d.ts CHANGED
@@ -1,12 +1,14 @@
1
1
  import React from 'react';
2
2
  import { type IntlShape } from 'react-intl-next';
3
- import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
3
+ import { type EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
4
4
  import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
5
+ import type { EditorView } from '@atlaskit/editor-prosemirror/view';
5
6
  type OpenPreviewPanelToolbarButtonProps = {
6
7
  areAnyNewToolbarFlagsEnabled: boolean;
7
8
  editorAnalyticsApi?: EditorAnalyticsAPI;
9
+ editorView?: EditorView;
8
10
  intl: IntlShape;
9
11
  node: PMNode;
10
12
  };
11
- export declare const OpenPreviewPanelToolbarButton: ({ node, intl, areAnyNewToolbarFlagsEnabled, }: OpenPreviewPanelToolbarButtonProps) => React.JSX.Element | null;
13
+ export declare const OpenPreviewPanelToolbarButton: ({ node, intl, areAnyNewToolbarFlagsEnabled, editorAnalyticsApi, editorView, }: OpenPreviewPanelToolbarButtonProps) => React.JSX.Element | null;
12
14
  export {};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-card",
3
- "version": "10.2.0",
3
+ "version": "11.0.1",
4
4
  "description": "Card plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -34,17 +34,17 @@
34
34
  "@atlaskit/button": "^23.4.0",
35
35
  "@atlaskit/custom-steps": "^0.14.0",
36
36
  "@atlaskit/editor-card-provider": "^6.0.0",
37
- "@atlaskit/editor-plugin-analytics": "^5.3.0",
38
- "@atlaskit/editor-plugin-base": "^6.3.0",
39
- "@atlaskit/editor-plugin-connectivity": "^5.0.0",
40
- "@atlaskit/editor-plugin-decorations": "^5.0.0",
41
- "@atlaskit/editor-plugin-editor-disabled": "^5.0.0",
42
- "@atlaskit/editor-plugin-editor-viewmode": "^7.0.0",
43
- "@atlaskit/editor-plugin-feature-flags": "^4.0.0",
44
- "@atlaskit/editor-plugin-floating-toolbar": "^7.0.0",
45
- "@atlaskit/editor-plugin-grid": "^5.0.0",
46
- "@atlaskit/editor-plugin-toolbar": "^2.1.0",
47
- "@atlaskit/editor-plugin-width": "^6.0.0",
37
+ "@atlaskit/editor-plugin-analytics": "^6.0.0",
38
+ "@atlaskit/editor-plugin-base": "^7.0.0",
39
+ "@atlaskit/editor-plugin-connectivity": "^6.0.0",
40
+ "@atlaskit/editor-plugin-decorations": "^6.1.0",
41
+ "@atlaskit/editor-plugin-editor-disabled": "^6.0.0",
42
+ "@atlaskit/editor-plugin-editor-viewmode": "^8.0.0",
43
+ "@atlaskit/editor-plugin-feature-flags": "^5.0.0",
44
+ "@atlaskit/editor-plugin-floating-toolbar": "^8.0.0",
45
+ "@atlaskit/editor-plugin-grid": "^6.0.0",
46
+ "@atlaskit/editor-plugin-toolbar": "^3.0.0",
47
+ "@atlaskit/editor-plugin-width": "^7.0.0",
48
48
  "@atlaskit/editor-prosemirror": "7.0.0",
49
49
  "@atlaskit/editor-shared-styles": "^3.6.0",
50
50
  "@atlaskit/frontend-utilities": "^3.1.0",
@@ -59,9 +59,9 @@
59
59
  "@atlaskit/platform-feature-flags": "^1.1.0",
60
60
  "@atlaskit/platform-feature-flags-react": "^0.3.0",
61
61
  "@atlaskit/primitives": "^14.15.0",
62
- "@atlaskit/smart-card": "^42.2.0",
62
+ "@atlaskit/smart-card": "^42.3.0",
63
63
  "@atlaskit/theme": "^21.0.0",
64
- "@atlaskit/tmp-editor-statsig": "^12.30.0",
64
+ "@atlaskit/tmp-editor-statsig": "^12.32.0",
65
65
  "@atlaskit/tokens": "^6.3.0",
66
66
  "@babel/runtime": "^7.0.0",
67
67
  "@emotion/react": "^11.7.1",
@@ -71,7 +71,7 @@
71
71
  "uuid": "^3.1.0"
72
72
  },
73
73
  "peerDependencies": {
74
- "@atlaskit/editor-common": "^109.16.0",
74
+ "@atlaskit/editor-common": "^110.2.0",
75
75
  "@atlaskit/link-provider": "^4.0.0",
76
76
  "react": "^18.2.0",
77
77
  "react-intl-next": "npm:react-intl@^5.18.1"