@atlaskit/editor-plugin-card 11.0.0 → 11.0.2
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.
- package/CHANGELOG.md +16 -0
- package/dist/cjs/nodeviews/inlineCardWithAwareness.js +32 -5
- package/dist/cjs/pm-plugins/doc.js +1 -1
- package/dist/cjs/ui/OpenPreviewButton/index.js +19 -1
- package/dist/es2019/nodeviews/inlineCardWithAwareness.js +30 -2
- package/dist/es2019/pm-plugins/doc.js +1 -1
- package/dist/es2019/ui/OpenPreviewButton/index.js +17 -1
- package/dist/esm/nodeviews/inlineCardWithAwareness.js +32 -5
- package/dist/esm/pm-plugins/doc.js +1 -1
- package/dist/esm/ui/OpenPreviewButton/index.js +19 -1
- package/dist/types/ui/OpenPreviewButton/index.d.ts +4 -2
- package/dist/types-ts4.5/ui/OpenPreviewButton/index.d.ts +4 -2
- package/package.json +12 -9
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,21 @@
|
|
|
1
1
|
# @atlaskit/editor-plugin-card
|
|
2
2
|
|
|
3
|
+
## 11.0.2
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [`76ffc91d514f3`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/76ffc91d514f3) -
|
|
8
|
+
Changed packages over to using the generic AIFC FG rather then an experiment
|
|
9
|
+
- Updated dependencies
|
|
10
|
+
|
|
11
|
+
## 11.0.1
|
|
12
|
+
|
|
13
|
+
### Patch Changes
|
|
14
|
+
|
|
15
|
+
- [`49444f7239178`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/49444f7239178) -
|
|
16
|
+
Added analytics events to preview panel hover overlays and toolbar button
|
|
17
|
+
- Updated dependencies
|
|
18
|
+
|
|
3
19
|
## 11.0.0
|
|
4
20
|
|
|
5
21
|
### Patch Changes
|
|
@@ -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 (
|
|
159
|
-
var canPreview =
|
|
160
|
-
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$
|
|
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$
|
|
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, {
|
|
@@ -324,7 +324,7 @@ var changeSelectedCardToLinkFallback = exports.changeSelectedCardToLinkFallback
|
|
|
324
324
|
})(tr);
|
|
325
325
|
}
|
|
326
326
|
if (dispatch) {
|
|
327
|
-
if ((0,
|
|
327
|
+
if ((0, _platformFeatureFlags.fg)('aifc_create_enabled')) {
|
|
328
328
|
dispatch(tr.setMeta('addToHistory', false));
|
|
329
329
|
} else {
|
|
330
330
|
dispatch(tr.scrollIntoView());
|
|
@@ -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, {
|
|
@@ -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$
|
|
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$
|
|
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, {
|
|
@@ -296,7 +296,7 @@ export const changeSelectedCardToLinkFallback = (text, href, sendAnalytics, node
|
|
|
296
296
|
})(tr);
|
|
297
297
|
}
|
|
298
298
|
if (dispatch) {
|
|
299
|
-
if (
|
|
299
|
+
if (fg('aifc_create_enabled')) {
|
|
300
300
|
dispatch(tr.setMeta('addToHistory', false));
|
|
301
301
|
} else {
|
|
302
302
|
dispatch(tr.scrollIntoView());
|
|
@@ -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, {
|
|
@@ -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 (
|
|
150
|
-
var canPreview =
|
|
151
|
-
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$
|
|
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$
|
|
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, {
|
|
@@ -318,7 +318,7 @@ export var changeSelectedCardToLinkFallback = function changeSelectedCardToLinkF
|
|
|
318
318
|
})(tr);
|
|
319
319
|
}
|
|
320
320
|
if (dispatch) {
|
|
321
|
-
if (
|
|
321
|
+
if (fg('aifc_create_enabled')) {
|
|
322
322
|
dispatch(tr.setMeta('addToHistory', false));
|
|
323
323
|
} else {
|
|
324
324
|
dispatch(tr.scrollIntoView());
|
|
@@ -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, {
|
|
@@ -1,12 +1,14 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { type IntlShape } from 'react-intl-next';
|
|
3
|
-
import type
|
|
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 {};
|
|
@@ -1,12 +1,14 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { type IntlShape } from 'react-intl-next';
|
|
3
|
-
import type
|
|
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": "11.0.
|
|
3
|
+
"version": "11.0.2",
|
|
4
4
|
"description": "Card plugin for @atlaskit/editor-core",
|
|
5
5
|
"author": "Atlassian Pty Ltd",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -34,20 +34,20 @@
|
|
|
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": "^6.
|
|
37
|
+
"@atlaskit/editor-plugin-analytics": "^6.1.0",
|
|
38
38
|
"@atlaskit/editor-plugin-base": "^7.0.0",
|
|
39
39
|
"@atlaskit/editor-plugin-connectivity": "^6.0.0",
|
|
40
|
-
"@atlaskit/editor-plugin-decorations": "^6.
|
|
40
|
+
"@atlaskit/editor-plugin-decorations": "^6.1.0",
|
|
41
41
|
"@atlaskit/editor-plugin-editor-disabled": "^6.0.0",
|
|
42
42
|
"@atlaskit/editor-plugin-editor-viewmode": "^8.0.0",
|
|
43
43
|
"@atlaskit/editor-plugin-feature-flags": "^5.0.0",
|
|
44
|
-
"@atlaskit/editor-plugin-floating-toolbar": "^8.
|
|
44
|
+
"@atlaskit/editor-plugin-floating-toolbar": "^8.1.0",
|
|
45
45
|
"@atlaskit/editor-plugin-grid": "^6.0.0",
|
|
46
46
|
"@atlaskit/editor-plugin-toolbar": "^3.0.0",
|
|
47
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
|
-
"@atlaskit/frontend-utilities": "^3.
|
|
50
|
+
"@atlaskit/frontend-utilities": "^3.2.0",
|
|
51
51
|
"@atlaskit/icon": "^28.3.0",
|
|
52
52
|
"@atlaskit/link": "^3.2.0",
|
|
53
53
|
"@atlaskit/link-analytics": "^11.0.0",
|
|
@@ -59,10 +59,10 @@
|
|
|
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.
|
|
62
|
+
"@atlaskit/smart-card": "^42.3.0",
|
|
63
63
|
"@atlaskit/theme": "^21.0.0",
|
|
64
|
-
"@atlaskit/tmp-editor-statsig": "^12.
|
|
65
|
-
"@atlaskit/tokens": "^6.
|
|
64
|
+
"@atlaskit/tmp-editor-statsig": "^12.32.0",
|
|
65
|
+
"@atlaskit/tokens": "^6.4.0",
|
|
66
66
|
"@babel/runtime": "^7.0.0",
|
|
67
67
|
"@emotion/react": "^11.7.1",
|
|
68
68
|
"lodash": "^4.17.21",
|
|
@@ -71,7 +71,7 @@
|
|
|
71
71
|
"uuid": "^3.1.0"
|
|
72
72
|
},
|
|
73
73
|
"peerDependencies": {
|
|
74
|
-
"@atlaskit/editor-common": "^110.
|
|
74
|
+
"@atlaskit/editor-common": "^110.3.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"
|
|
@@ -124,6 +124,9 @@
|
|
|
124
124
|
},
|
|
125
125
|
"platform_editor_adf_with_localid": {
|
|
126
126
|
"type": "boolean"
|
|
127
|
+
},
|
|
128
|
+
"aifc_create_enabled": {
|
|
129
|
+
"type": "boolean"
|
|
127
130
|
}
|
|
128
131
|
},
|
|
129
132
|
"stricter": {
|