@atlaskit/editor-plugin-card 7.4.0 → 7.4.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 (13) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/dist/cjs/nodeviews/inlineCardWithAwareness.js +75 -42
  3. package/dist/cjs/ui/AwarenessWrapper/index.js +6 -8
  4. package/dist/cjs/ui/preview/PreviewInvoker.js +33 -0
  5. package/dist/es2019/nodeviews/inlineCardWithAwareness.js +76 -42
  6. package/dist/es2019/ui/AwarenessWrapper/index.js +6 -8
  7. package/dist/es2019/ui/preview/PreviewInvoker.js +22 -0
  8. package/dist/esm/nodeviews/inlineCardWithAwareness.js +75 -42
  9. package/dist/esm/ui/AwarenessWrapper/index.js +6 -8
  10. package/dist/esm/ui/preview/PreviewInvoker.js +25 -0
  11. package/dist/types/ui/preview/PreviewInvoker.d.ts +12 -0
  12. package/dist/types-ts4.5/ui/preview/PreviewInvoker.d.ts +12 -0
  13. package/package.json +2 -2
package/CHANGELOG.md CHANGED
@@ -1,5 +1,13 @@
1
1
  # @atlaskit/editor-plugin-card
2
2
 
3
+ ## 7.4.1
4
+
5
+ ### Patch Changes
6
+
7
+ - [`598cea2432fa9`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/598cea2432fa9) -
8
+ [ux] UI and behaviour updates of the HoverLinkOverlay for the Preview Panels.
9
+ - Updated dependencies
10
+
3
11
  ## 7.4.0
4
12
 
5
13
  ### Minor Changes
package/dist/cjs/nodeviews/inlineCardWithAwareness.js CHANGED
@@ -17,6 +17,7 @@ var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
17
17
  var _actions = require("../pm-plugins/actions");
18
18
  var _pluginKey = require("../pm-plugins/plugin-key");
19
19
  var _AwarenessWrapper = require("../ui/AwarenessWrapper");
20
+ var _PreviewInvoker = require("../ui/preview/PreviewInvoker");
20
21
  var _inlineCard = require("./inlineCard");
21
22
  function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
22
23
  var selector = function selector(states) {
@@ -94,6 +95,7 @@ var InlineCardWithAwareness = exports.InlineCardWithAwareness = /*#__PURE__*/(0,
94
95
  mode = _useSharedState.mode,
95
96
  selection = _useSharedState.selection;
96
97
  var floatingToolbarNode = selection instanceof _state.NodeSelection && selection.node;
98
+ // This is a prop to show Hover card, Hover card should be shown only in Live View and Classic Renderer (note when only Editor controls enabled we don't show in Live view)
97
99
  var showHoverPreview = floatingToolbarNode !== node && (0, _platformFeatureFlags.fg)('platform_editor_preview_panel_linking');
98
100
  var innerCardWithOpenButtonOverlay = (0, _react.useMemo)(function () {
99
101
  var _pluginInjectionApi$a;
@@ -114,10 +116,9 @@ var InlineCardWithAwareness = exports.InlineCardWithAwareness = /*#__PURE__*/(0,
114
116
  cardContext: cardContext,
115
117
  isHovered: isHovered,
116
118
  isPageSSRed: isPageSSRed,
117
- pluginInjectionApi: pluginInjectionApi,
118
- showHoverPreview: showHoverPreview
119
+ pluginInjectionApi: pluginInjectionApi
119
120
  }));
120
- }, [isResolvedViewRendered, node, editorAppearance, view, getPos, useAlternativePreloader, actionOptions, onResolve, onClick, cardContext, isHovered, isPageSSRed, pluginInjectionApi, showHoverPreview]);
121
+ }, [isResolvedViewRendered, node, editorAppearance, view, getPos, useAlternativePreloader, actionOptions, onResolve, onClick, cardContext, isHovered, isPageSSRed, pluginInjectionApi]);
121
122
  var innerCardOriginal = (0, _react.useMemo)(function () {
122
123
  return /*#__PURE__*/_react.default.createElement(_inlineCard.InlineCard, {
123
124
  node: node,
@@ -131,19 +132,20 @@ var InlineCardWithAwareness = exports.InlineCardWithAwareness = /*#__PURE__*/(0,
131
132
  isHovered: isHovered,
132
133
  isPageSSRed: isPageSSRed,
133
134
  pluginInjectionApi: pluginInjectionApi,
134
- showHoverPreview: showHoverPreview
135
+ showHoverPreview: false
135
136
  });
136
- }, [actionOptions, cardContext, getPos, isHovered, node, onClick, onResolve, useAlternativePreloader, view, isPageSSRed, pluginInjectionApi, showHoverPreview]);
137
+ }, [actionOptions, cardContext, getPos, isHovered, node, onClick, onResolve, useAlternativePreloader, view, isPageSSRed, pluginInjectionApi]);
137
138
  var shouldShowOpenButtonOverlay = (0, _react.useMemo)(function () {
138
139
  var shouldShowOpenButtonOverlayInChomeless = editorAppearance === 'chromeless';
139
140
  return (mode === 'edit' || editorAppearance === 'comment' || shouldShowOpenButtonOverlayInChomeless) && ((0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') || (0, _platformFeatureFlags.fg)('platform_editor_preview_panel_linking'));
140
141
  }, [mode, editorAppearance]);
141
142
  var innerCard = shouldShowOpenButtonOverlay ? innerCardWithOpenButtonOverlay : innerCardOriginal;
142
- if ((0, _platformFeatureFlags.fg)('platform_editor_preview_panel_linking')) {
143
+ if (mode === 'view' && (0, _platformFeatureFlags.fg)('platform_editor_preview_panel_linking')) {
143
144
  var _cardContext$value;
144
- var cardState = cardContext === null || cardContext === void 0 || (_cardContext$value = cardContext.value) === null || _cardContext$value === void 0 || (_cardContext$value = _cardContext$value.store) === null || _cardContext$value === void 0 ? void 0 : _cardContext$value.getState()[node.attrs.url];
145
+ var url = node.attrs.url;
146
+ var cardState = cardContext === null || cardContext === void 0 || (_cardContext$value = cardContext.value) === null || _cardContext$value === void 0 || (_cardContext$value = _cardContext$value.store) === null || _cardContext$value === void 0 ? void 0 : _cardContext$value.getState()[url];
145
147
  if (cardState) {
146
- var _cardContext$value2, _cardContext$value2$i, _cardContext$value3, _pluginInjectionApi$a2;
148
+ var _cardContext$value2, _cardContext$value2$i, _cardContext$value3;
147
149
  var ari = (0, _smartCard.getObjectAri)(cardState.details);
148
150
  var name = (0, _smartCard.getObjectName)(cardState.details);
149
151
  var iconUrl = (0, _smartCard.getObjectIconUrl)(cardState.details);
@@ -151,42 +153,73 @@ var InlineCardWithAwareness = exports.InlineCardWithAwareness = /*#__PURE__*/(0,
151
153
  ari: ari
152
154
  }));
153
155
  var openPreviewPanel = cardContext === null || cardContext === void 0 || (_cardContext$value3 = cardContext.value) === null || _cardContext$value3 === void 0 ? void 0 : _cardContext$value3.openPreviewPanel;
154
- var handleOpenGlancePanelClick = function handleOpenGlancePanelClick(event) {
155
- if (openPreviewPanel && isPanelAvailable) {
156
- // Prevent anchor default behaviour(click to open the anchor link)
157
- // When glance panel is available, let openPreviewPanel handle it
158
- event.preventDefault();
159
- openPreviewPanel({
160
- url: node.attrs.url,
161
- ari: ari,
162
- name: name || '',
163
- iconUrl: iconUrl
156
+ var isPreviewPanelAvailable = Boolean(openPreviewPanel && isPanelAvailable);
157
+ var innerCardWithPanelButtonOverlay = /*#__PURE__*/_react.default.createElement(_PreviewInvoker.PreviewInvoker, {
158
+ url: url,
159
+ appearance: "inline"
160
+ }, function (_ref2) {
161
+ var canPreview = _ref2.canPreview,
162
+ invokePreview = _ref2.invokePreview;
163
+ var isPreviewModalAvailable = Boolean(canPreview && invokePreview);
164
+ // In view mode we show HoverLinkOverlay only with if preview mode or panel is available
165
+ // otherwise a use can click on smartlink itself to open the link in a new tab.
166
+ var isPreviewAvailable = isPreviewPanelAvailable || isPreviewModalAvailable;
167
+ if (isPreviewAvailable) {
168
+ var _pluginInjectionApi$a2;
169
+ return /*#__PURE__*/_react.default.createElement(_ui.HoverLinkOverlay, {
170
+ isVisible: isResolvedViewRendered,
171
+ url: url,
172
+ compactPadding: editorAppearance === 'comment' || editorAppearance === 'chromeless',
173
+ editorAnalyticsApi: pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a2 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a2 === void 0 ? void 0 : _pluginInjectionApi$a2.actions,
174
+ view: view,
175
+ showPanelButton: isPreviewAvailable,
176
+ showPanelButtonIcon: isPreviewAvailable && isPreviewPanelAvailable ? 'panel' : 'modal',
177
+ onClick: function onClick(event) {
178
+ if (isPreviewPanelAvailable) {
179
+ event.preventDefault();
180
+ openPreviewPanel === null || openPreviewPanel === void 0 || openPreviewPanel({
181
+ url: url,
182
+ ari: ari || '',
183
+ name: name || '',
184
+ iconUrl: iconUrl
185
+ });
186
+ } else if (isPreviewModalAvailable) {
187
+ event.preventDefault();
188
+ invokePreview === null || invokePreview === void 0 || invokePreview();
189
+ }
190
+ }
191
+ }, /*#__PURE__*/_react.default.createElement(_inlineCard.InlineCard, {
192
+ node: node,
193
+ view: view,
194
+ getPos: getPos,
195
+ useAlternativePreloader: useAlternativePreloader,
196
+ actionOptions: actionOptions,
197
+ onResolve: onResolve,
198
+ onClick: onClick,
199
+ cardContext: cardContext,
200
+ isHovered: isHovered,
201
+ isPageSSRed: isPageSSRed,
202
+ pluginInjectionApi: pluginInjectionApi,
203
+ showHoverPreview: mode === 'view' && showHoverPreview
204
+ }));
205
+ } else {
206
+ return /*#__PURE__*/_react.default.createElement(_inlineCard.InlineCard, {
207
+ node: node,
208
+ view: view,
209
+ getPos: getPos,
210
+ useAlternativePreloader: useAlternativePreloader,
211
+ actionOptions: actionOptions,
212
+ onResolve: onResolve,
213
+ onClick: onClick,
214
+ cardContext: cardContext,
215
+ isHovered: isHovered,
216
+ isPageSSRed: isPageSSRed,
217
+ pluginInjectionApi: pluginInjectionApi,
218
+ showHoverPreview: mode === 'view' && showHoverPreview
164
219
  });
165
220
  }
166
- };
167
- var innerCardWithPanelButtonOverlay = /*#__PURE__*/_react.default.createElement(_ui.HoverLinkOverlay, {
168
- isVisible: isResolvedViewRendered,
169
- url: node.attrs.url,
170
- 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,
172
- view: view,
173
- showPanelButton: !!isPanelAvailable,
174
- onClick: handleOpenGlancePanelClick
175
- }, /*#__PURE__*/_react.default.createElement(_inlineCard.InlineCard, {
176
- node: node,
177
- view: view,
178
- getPos: getPos,
179
- useAlternativePreloader: useAlternativePreloader,
180
- actionOptions: actionOptions,
181
- onResolve: onResolve,
182
- onClick: onClick,
183
- cardContext: cardContext,
184
- isHovered: isHovered,
185
- isPageSSRed: isPageSSRed,
186
- pluginInjectionApi: pluginInjectionApi,
187
- showHoverPreview: showHoverPreview
188
- }));
189
- innerCard = isPanelAvailable && openPreviewPanel ? innerCardWithPanelButtonOverlay : innerCard;
221
+ });
222
+ innerCard = innerCardWithPanelButtonOverlay;
190
223
  }
191
224
  }
192
225
  var getPosFunction = typeof getPos === 'function' ? getPos : undefined;
package/dist/cjs/ui/AwarenessWrapper/index.js CHANGED
@@ -33,7 +33,7 @@ var loaderWrapperStyles = (0, _react2.css)({
33
33
  }
34
34
  });
35
35
  var AwarenessWrapper = exports.AwarenessWrapper = function AwarenessWrapper(_ref) {
36
- var _cardContext$value, _cardContext$value3;
36
+ var _cardContext$value2;
37
37
  var cardContext = _ref.cardContext,
38
38
  children = _ref.children,
39
39
  getPos = _ref.getPos,
@@ -85,10 +85,8 @@ var AwarenessWrapper = exports.AwarenessWrapper = function AwarenessWrapper(_ref
85
85
  setIsHovered(isHovered);
86
86
  setOverlayHoveredStyles(isHovered);
87
87
  }, [setOverlayHoveredStyles]);
88
- var isPreviewPanelAvailable = cardContext === null || cardContext === void 0 || (_cardContext$value = cardContext.value) === null || _cardContext$value === void 0 ? void 0 : _cardContext$value.isPreviewPanelAvailable;
89
- var shouldShowGlancePanel = (isPreviewPanelAvailable || false) && (0, _platformFeatureFlags.fg)('platform_editor_preview_panel_linking');
90
88
  var cardWithOverlay = (0, _react.useMemo)(function () {
91
- if (shouldShowLinkOverlay && !shouldShowGlancePanel && !(0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
89
+ if (shouldShowLinkOverlay && !(0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && !(0, _platformFeatureFlags.fg)('platform_editor_preview_panel_linking')) {
92
90
  return (0, _react2.jsx)(_InlineCardOverlay.default, {
93
91
  isSelected: isSelected,
94
92
  isVisible: isResolvedViewRendered && (isInserted || isHovered || isSelected),
@@ -102,11 +100,11 @@ var AwarenessWrapper = exports.AwarenessWrapper = function AwarenessWrapper(_ref
102
100
  }, children);
103
101
  }
104
102
  return children;
105
- }, [shouldShowLinkOverlay, children, isSelected, isResolvedViewRendered, isInserted, isHovered, url, handleOverlayChange, shouldShowGlancePanel]);
103
+ }, [shouldShowLinkOverlay, children, isSelected, isResolvedViewRendered, isInserted, isHovered, url, handleOverlayChange]);
106
104
  var isInline = appearance === 'inline';
107
105
  var placeholderUniqId = linkPosition || 0;
108
106
  return (0, _react.useMemo)(function () {
109
- var _cardContext$value2;
107
+ var _cardContext$value;
110
108
  return (0, _react2.jsx)("span", {
111
109
  css: shouldShowLinkPulse && loaderWrapperStyles
112
110
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
@@ -117,7 +115,7 @@ var AwarenessWrapper = exports.AwarenessWrapper = function AwarenessWrapper(_ref
117
115
  "data-ssr-placeholder-replace": "awareness-wrapper-".concat(placeholderUniqId)
118
116
  }, (0, _react2.jsx)(_analyticsNext.AnalyticsContext, {
119
117
  data: {
120
- attributes: (0, _utils.getResolvedAttributesFromStore)(url, 'inline', cardContext === null || cardContext === void 0 || (_cardContext$value2 = cardContext.value) === null || _cardContext$value2 === void 0 ? void 0 : _cardContext$value2.store)
118
+ attributes: (0, _utils.getResolvedAttributesFromStore)(url, 'inline', cardContext === null || cardContext === void 0 || (_cardContext$value = cardContext.value) === null || _cardContext$value === void 0 ? void 0 : _cardContext$value.store)
121
119
  }
122
120
  }, (0, _react2.jsx)(_Pulse.DiscoveryPulse, {
123
121
  localStorageKey: _localStorage.LOCAL_STORAGE_DISCOVERY_KEY_SMART_LINK,
@@ -127,5 +125,5 @@ var AwarenessWrapper = exports.AwarenessWrapper = function AwarenessWrapper(_ref
127
125
  testId: "link-discovery-pulse",
128
126
  isInline: isInline
129
127
  }, cardWithOverlay)));
130
- }, [shouldShowLinkPulse, url, cardContext === null || cardContext === void 0 || (_cardContext$value3 = cardContext.value) === null || _cardContext$value3 === void 0 ? void 0 : _cardContext$value3.store, isResolvedViewRendered, cardWithOverlay, isInline, placeholderUniqId]);
128
+ }, [shouldShowLinkPulse, url, cardContext === null || cardContext === void 0 || (_cardContext$value2 = cardContext.value) === null || _cardContext$value2 === void 0 ? void 0 : _cardContext$value2.store, isResolvedViewRendered, cardWithOverlay, isInline, placeholderUniqId]);
131
129
  };
package/dist/cjs/ui/preview/PreviewInvoker.js ADDED
@@ -0,0 +1,33 @@
1
+ "use strict";
2
+
3
+ var _typeof = require("@babel/runtime/helpers/typeof");
4
+ Object.defineProperty(exports, "__esModule", {
5
+ value: true
6
+ });
7
+ exports.PreviewInvoker = void 0;
8
+ var _react = _interopRequireWildcard(require("react"));
9
+ var _hooks = require("@atlaskit/smart-card/hooks");
10
+ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
11
+ var PreviewInvoker = exports.PreviewInvoker = function PreviewInvoker(_ref) {
12
+ var url = _ref.url,
13
+ appearance = _ref.appearance,
14
+ children = _ref.children;
15
+ var actions = (0, _hooks.useSmartLinkActions)({
16
+ url: url,
17
+ appearance: appearance
18
+ });
19
+ var preview = (0, _react.useMemo)(function () {
20
+ return actions.find(function (action) {
21
+ return action.id === 'preview-content';
22
+ });
23
+ }, [actions]);
24
+ var invokePreview = (0, _react.useCallback)(function () {
25
+ try {
26
+ preview === null || preview === void 0 || preview.invoke();
27
+ } catch (_unused) {}
28
+ }, [preview]);
29
+ return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children({
30
+ canPreview: !!preview,
31
+ invokePreview: invokePreview
32
+ }));
33
+ };
package/dist/es2019/nodeviews/inlineCardWithAwareness.js CHANGED
@@ -8,6 +8,7 @@ import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
8
8
  import { registerRemoveOverlay } from '../pm-plugins/actions';
9
9
  import { pluginKey } from '../pm-plugins/plugin-key';
10
10
  import { AwarenessWrapper } from '../ui/AwarenessWrapper';
11
+ import { PreviewInvoker } from '../ui/preview/PreviewInvoker';
11
12
  import { InlineCard } from './inlineCard';
12
13
  const selector = states => {
13
14
  var _states$editorViewMod, _states$selectionStat;
@@ -74,6 +75,7 @@ export const InlineCardWithAwareness = /*#__PURE__*/memo(({
74
75
  selection
75
76
  } = useSharedState(pluginInjectionApi);
76
77
  const floatingToolbarNode = selection instanceof NodeSelection && selection.node;
78
+ // This is a prop to show Hover card, Hover card should be shown only in Live View and Classic Renderer (note when only Editor controls enabled we don't show in Live view)
77
79
  const showHoverPreview = floatingToolbarNode !== node && fg('platform_editor_preview_panel_linking');
78
80
  const innerCardWithOpenButtonOverlay = useMemo(() => {
79
81
  var _pluginInjectionApi$a;
@@ -94,10 +96,9 @@ export const InlineCardWithAwareness = /*#__PURE__*/memo(({
94
96
  cardContext: cardContext,
95
97
  isHovered: isHovered,
96
98
  isPageSSRed: isPageSSRed,
97
- pluginInjectionApi: pluginInjectionApi,
98
- showHoverPreview: showHoverPreview
99
+ pluginInjectionApi: pluginInjectionApi
99
100
  }));
100
- }, [isResolvedViewRendered, node, editorAppearance, view, getPos, useAlternativePreloader, actionOptions, onResolve, onClick, cardContext, isHovered, isPageSSRed, pluginInjectionApi, showHoverPreview]);
101
+ }, [isResolvedViewRendered, node, editorAppearance, view, getPos, useAlternativePreloader, actionOptions, onResolve, onClick, cardContext, isHovered, isPageSSRed, pluginInjectionApi]);
101
102
  const innerCardOriginal = useMemo(() => /*#__PURE__*/React.createElement(InlineCard, {
102
103
  node: node,
103
104
  view: view,
@@ -110,18 +111,19 @@ export const InlineCardWithAwareness = /*#__PURE__*/memo(({
110
111
  isHovered: isHovered,
111
112
  isPageSSRed: isPageSSRed,
112
113
  pluginInjectionApi: pluginInjectionApi,
113
- showHoverPreview: showHoverPreview
114
- }), [actionOptions, cardContext, getPos, isHovered, node, onClick, onResolve, useAlternativePreloader, view, isPageSSRed, pluginInjectionApi, showHoverPreview]);
114
+ showHoverPreview: false
115
+ }), [actionOptions, cardContext, getPos, isHovered, node, onClick, onResolve, useAlternativePreloader, view, isPageSSRed, pluginInjectionApi]);
115
116
  const shouldShowOpenButtonOverlay = useMemo(() => {
116
117
  const shouldShowOpenButtonOverlayInChomeless = editorAppearance === 'chromeless';
117
118
  return (mode === 'edit' || editorAppearance === 'comment' || shouldShowOpenButtonOverlayInChomeless) && (editorExperiment('platform_editor_controls', 'variant1') || fg('platform_editor_preview_panel_linking'));
118
119
  }, [mode, editorAppearance]);
119
120
  let innerCard = shouldShowOpenButtonOverlay ? innerCardWithOpenButtonOverlay : innerCardOriginal;
120
- if (fg('platform_editor_preview_panel_linking')) {
121
+ if (mode === 'view' && fg('platform_editor_preview_panel_linking')) {
121
122
  var _cardContext$value, _cardContext$value$st;
122
- const cardState = cardContext === null || cardContext === void 0 ? void 0 : (_cardContext$value = cardContext.value) === null || _cardContext$value === void 0 ? void 0 : (_cardContext$value$st = _cardContext$value.store) === null || _cardContext$value$st === void 0 ? void 0 : _cardContext$value$st.getState()[node.attrs.url];
123
+ const url = node.attrs.url;
124
+ const cardState = cardContext === null || cardContext === void 0 ? void 0 : (_cardContext$value = cardContext.value) === null || _cardContext$value === void 0 ? void 0 : (_cardContext$value$st = _cardContext$value.store) === null || _cardContext$value$st === void 0 ? void 0 : _cardContext$value$st.getState()[url];
123
125
  if (cardState) {
124
- var _cardContext$value2, _cardContext$value2$i, _cardContext$value3, _pluginInjectionApi$a2;
126
+ var _cardContext$value2, _cardContext$value2$i, _cardContext$value3;
125
127
  const ari = getObjectAri(cardState.details);
126
128
  const name = getObjectName(cardState.details);
127
129
  const iconUrl = getObjectIconUrl(cardState.details);
@@ -129,42 +131,74 @@ export const InlineCardWithAwareness = /*#__PURE__*/memo(({
129
131
  ari
130
132
  }));
131
133
  const openPreviewPanel = cardContext === null || cardContext === void 0 ? void 0 : (_cardContext$value3 = cardContext.value) === null || _cardContext$value3 === void 0 ? void 0 : _cardContext$value3.openPreviewPanel;
132
- const handleOpenGlancePanelClick = event => {
133
- if (openPreviewPanel && isPanelAvailable) {
134
- // Prevent anchor default behaviour(click to open the anchor link)
135
- // When glance panel is available, let openPreviewPanel handle it
136
- event.preventDefault();
137
- openPreviewPanel({
138
- url: node.attrs.url,
139
- ari,
140
- name: name || '',
141
- iconUrl
134
+ const isPreviewPanelAvailable = Boolean(openPreviewPanel && isPanelAvailable);
135
+ const innerCardWithPanelButtonOverlay = /*#__PURE__*/React.createElement(PreviewInvoker, {
136
+ url: url,
137
+ appearance: "inline"
138
+ }, ({
139
+ canPreview,
140
+ invokePreview
141
+ }) => {
142
+ const isPreviewModalAvailable = Boolean(canPreview && invokePreview);
143
+ // In view mode we show HoverLinkOverlay only with if preview mode or panel is available
144
+ // otherwise a use can click on smartlink itself to open the link in a new tab.
145
+ const isPreviewAvailable = isPreviewPanelAvailable || isPreviewModalAvailable;
146
+ if (isPreviewAvailable) {
147
+ var _pluginInjectionApi$a2;
148
+ return /*#__PURE__*/React.createElement(HoverLinkOverlay, {
149
+ isVisible: isResolvedViewRendered,
150
+ url: url,
151
+ compactPadding: editorAppearance === 'comment' || editorAppearance === 'chromeless',
152
+ editorAnalyticsApi: pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a2 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a2 === void 0 ? void 0 : _pluginInjectionApi$a2.actions,
153
+ view: view,
154
+ showPanelButton: isPreviewAvailable,
155
+ showPanelButtonIcon: isPreviewAvailable && isPreviewPanelAvailable ? 'panel' : 'modal',
156
+ onClick: event => {
157
+ if (isPreviewPanelAvailable) {
158
+ event.preventDefault();
159
+ openPreviewPanel === null || openPreviewPanel === void 0 ? void 0 : openPreviewPanel({
160
+ url,
161
+ ari: ari || '',
162
+ name: name || '',
163
+ iconUrl
164
+ });
165
+ } else if (isPreviewModalAvailable) {
166
+ event.preventDefault();
167
+ invokePreview === null || invokePreview === void 0 ? void 0 : invokePreview();
168
+ }
169
+ }
170
+ }, /*#__PURE__*/React.createElement(InlineCard, {
171
+ node: node,
172
+ view: view,
173
+ getPos: getPos,
174
+ useAlternativePreloader: useAlternativePreloader,
175
+ actionOptions: actionOptions,
176
+ onResolve: onResolve,
177
+ onClick: onClick,
178
+ cardContext: cardContext,
179
+ isHovered: isHovered,
180
+ isPageSSRed: isPageSSRed,
181
+ pluginInjectionApi: pluginInjectionApi,
182
+ showHoverPreview: mode === 'view' && showHoverPreview
183
+ }));
184
+ } else {
185
+ return /*#__PURE__*/React.createElement(InlineCard, {
186
+ node: node,
187
+ view: view,
188
+ getPos: getPos,
189
+ useAlternativePreloader: useAlternativePreloader,
190
+ actionOptions: actionOptions,
191
+ onResolve: onResolve,
192
+ onClick: onClick,
193
+ cardContext: cardContext,
194
+ isHovered: isHovered,
195
+ isPageSSRed: isPageSSRed,
196
+ pluginInjectionApi: pluginInjectionApi,
197
+ showHoverPreview: mode === 'view' && showHoverPreview
142
198
  });
143
199
  }
144
- };
145
- const innerCardWithPanelButtonOverlay = /*#__PURE__*/React.createElement(HoverLinkOverlay, {
146
- isVisible: isResolvedViewRendered,
147
- url: node.attrs.url,
148
- 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,
150
- view: view,
151
- showPanelButton: !!isPanelAvailable,
152
- onClick: handleOpenGlancePanelClick
153
- }, /*#__PURE__*/React.createElement(InlineCard, {
154
- node: node,
155
- view: view,
156
- getPos: getPos,
157
- useAlternativePreloader: useAlternativePreloader,
158
- actionOptions: actionOptions,
159
- onResolve: onResolve,
160
- onClick: onClick,
161
- cardContext: cardContext,
162
- isHovered: isHovered,
163
- isPageSSRed: isPageSSRed,
164
- pluginInjectionApi: pluginInjectionApi,
165
- showHoverPreview: showHoverPreview
166
- }));
167
- innerCard = isPanelAvailable && openPreviewPanel ? innerCardWithPanelButtonOverlay : innerCard;
200
+ });
201
+ innerCard = innerCardWithPanelButtonOverlay;
168
202
  }
169
203
  }
170
204
  const getPosFunction = typeof getPos === 'function' ? getPos : undefined;
package/dist/es2019/ui/AwarenessWrapper/index.js CHANGED
@@ -38,7 +38,7 @@ export const AwarenessWrapper = ({
38
38
  url,
39
39
  appearance
40
40
  }) => {
41
- var _cardContext$value, _cardContext$value3;
41
+ var _cardContext$value2;
42
42
  const [isHovered, setIsHovered] = useState(false);
43
43
  const linkPosition = useMemo(() => {
44
44
  if (!getPos || typeof getPos === 'boolean') {
@@ -75,10 +75,8 @@ export const AwarenessWrapper = ({
75
75
  setIsHovered(isHovered);
76
76
  setOverlayHoveredStyles(isHovered);
77
77
  }, [setOverlayHoveredStyles]);
78
- const isPreviewPanelAvailable = cardContext === null || cardContext === void 0 ? void 0 : (_cardContext$value = cardContext.value) === null || _cardContext$value === void 0 ? void 0 : _cardContext$value.isPreviewPanelAvailable;
79
- const shouldShowGlancePanel = (isPreviewPanelAvailable || false) && fg('platform_editor_preview_panel_linking');
80
78
  const cardWithOverlay = useMemo(() => {
81
- if (shouldShowLinkOverlay && !shouldShowGlancePanel && !editorExperiment('platform_editor_controls', 'variant1')) {
79
+ if (shouldShowLinkOverlay && !editorExperiment('platform_editor_controls', 'variant1') && !fg('platform_editor_preview_panel_linking')) {
82
80
  return jsx(InlineCardOverlay, {
83
81
  isSelected: isSelected,
84
82
  isVisible: isResolvedViewRendered && (isInserted || isHovered || isSelected),
@@ -88,11 +86,11 @@ export const AwarenessWrapper = ({
88
86
  }, children);
89
87
  }
90
88
  return children;
91
- }, [shouldShowLinkOverlay, children, isSelected, isResolvedViewRendered, isInserted, isHovered, url, handleOverlayChange, shouldShowGlancePanel]);
89
+ }, [shouldShowLinkOverlay, children, isSelected, isResolvedViewRendered, isInserted, isHovered, url, handleOverlayChange]);
92
90
  const isInline = appearance === 'inline';
93
91
  const placeholderUniqId = linkPosition || 0;
94
92
  return useMemo(() => {
95
- var _cardContext$value2;
93
+ var _cardContext$value;
96
94
  return jsx("span", {
97
95
  css: shouldShowLinkPulse && loaderWrapperStyles
98
96
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
@@ -103,7 +101,7 @@ export const AwarenessWrapper = ({
103
101
  "data-ssr-placeholder-replace": `awareness-wrapper-${placeholderUniqId}`
104
102
  }, jsx(AnalyticsContext, {
105
103
  data: {
106
- attributes: getResolvedAttributesFromStore(url, 'inline', cardContext === null || cardContext === void 0 ? void 0 : (_cardContext$value2 = cardContext.value) === null || _cardContext$value2 === void 0 ? void 0 : _cardContext$value2.store)
104
+ attributes: getResolvedAttributesFromStore(url, 'inline', cardContext === null || cardContext === void 0 ? void 0 : (_cardContext$value = cardContext.value) === null || _cardContext$value === void 0 ? void 0 : _cardContext$value.store)
107
105
  }
108
106
  }, jsx(DiscoveryPulse, {
109
107
  localStorageKey: LOCAL_STORAGE_DISCOVERY_KEY_SMART_LINK,
@@ -113,5 +111,5 @@ export const AwarenessWrapper = ({
113
111
  testId: "link-discovery-pulse",
114
112
  isInline: isInline
115
113
  }, cardWithOverlay)));
116
- }, [shouldShowLinkPulse, url, cardContext === null || cardContext === void 0 ? void 0 : (_cardContext$value3 = cardContext.value) === null || _cardContext$value3 === void 0 ? void 0 : _cardContext$value3.store, isResolvedViewRendered, cardWithOverlay, isInline, placeholderUniqId]);
114
+ }, [shouldShowLinkPulse, url, cardContext === null || cardContext === void 0 ? void 0 : (_cardContext$value2 = cardContext.value) === null || _cardContext$value2 === void 0 ? void 0 : _cardContext$value2.store, isResolvedViewRendered, cardWithOverlay, isInline, placeholderUniqId]);
117
115
  };
package/dist/es2019/ui/preview/PreviewInvoker.js ADDED
@@ -0,0 +1,22 @@
1
+ import React, { useCallback, useMemo } from 'react';
2
+ import { useSmartLinkActions } from '@atlaskit/smart-card/hooks';
3
+ export const PreviewInvoker = ({
4
+ url,
5
+ appearance,
6
+ children
7
+ }) => {
8
+ const actions = useSmartLinkActions({
9
+ url,
10
+ appearance
11
+ });
12
+ const preview = useMemo(() => actions.find(action => action.id === 'preview-content'), [actions]);
13
+ const invokePreview = useCallback(() => {
14
+ try {
15
+ preview === null || preview === void 0 ? void 0 : preview.invoke();
16
+ } catch {}
17
+ }, [preview]);
18
+ return /*#__PURE__*/React.createElement(React.Fragment, null, children({
19
+ canPreview: !!preview,
20
+ invokePreview
21
+ }));
22
+ };
package/dist/esm/nodeviews/inlineCardWithAwareness.js CHANGED
@@ -9,6 +9,7 @@ import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
9
9
  import { registerRemoveOverlay } from '../pm-plugins/actions';
10
10
  import { pluginKey } from '../pm-plugins/plugin-key';
11
11
  import { AwarenessWrapper } from '../ui/AwarenessWrapper';
12
+ import { PreviewInvoker } from '../ui/preview/PreviewInvoker';
12
13
  import { InlineCard } from './inlineCard';
13
14
  var selector = function selector(states) {
14
15
  var _states$editorViewMod, _states$selectionStat;
@@ -85,6 +86,7 @@ export var InlineCardWithAwareness = /*#__PURE__*/memo(function (_ref) {
85
86
  mode = _useSharedState.mode,
86
87
  selection = _useSharedState.selection;
87
88
  var floatingToolbarNode = selection instanceof NodeSelection && selection.node;
89
+ // This is a prop to show Hover card, Hover card should be shown only in Live View and Classic Renderer (note when only Editor controls enabled we don't show in Live view)
88
90
  var showHoverPreview = floatingToolbarNode !== node && fg('platform_editor_preview_panel_linking');
89
91
  var innerCardWithOpenButtonOverlay = useMemo(function () {
90
92
  var _pluginInjectionApi$a;
@@ -105,10 +107,9 @@ export var InlineCardWithAwareness = /*#__PURE__*/memo(function (_ref) {
105
107
  cardContext: cardContext,
106
108
  isHovered: isHovered,
107
109
  isPageSSRed: isPageSSRed,
108
- pluginInjectionApi: pluginInjectionApi,
109
- showHoverPreview: showHoverPreview
110
+ pluginInjectionApi: pluginInjectionApi
110
111
  }));
111
- }, [isResolvedViewRendered, node, editorAppearance, view, getPos, useAlternativePreloader, actionOptions, onResolve, onClick, cardContext, isHovered, isPageSSRed, pluginInjectionApi, showHoverPreview]);
112
+ }, [isResolvedViewRendered, node, editorAppearance, view, getPos, useAlternativePreloader, actionOptions, onResolve, onClick, cardContext, isHovered, isPageSSRed, pluginInjectionApi]);
112
113
  var innerCardOriginal = useMemo(function () {
113
114
  return /*#__PURE__*/React.createElement(InlineCard, {
114
115
  node: node,
@@ -122,19 +123,20 @@ export var InlineCardWithAwareness = /*#__PURE__*/memo(function (_ref) {
122
123
  isHovered: isHovered,
123
124
  isPageSSRed: isPageSSRed,
124
125
  pluginInjectionApi: pluginInjectionApi,
125
- showHoverPreview: showHoverPreview
126
+ showHoverPreview: false
126
127
  });
127
- }, [actionOptions, cardContext, getPos, isHovered, node, onClick, onResolve, useAlternativePreloader, view, isPageSSRed, pluginInjectionApi, showHoverPreview]);
128
+ }, [actionOptions, cardContext, getPos, isHovered, node, onClick, onResolve, useAlternativePreloader, view, isPageSSRed, pluginInjectionApi]);
128
129
  var shouldShowOpenButtonOverlay = useMemo(function () {
129
130
  var shouldShowOpenButtonOverlayInChomeless = editorAppearance === 'chromeless';
130
131
  return (mode === 'edit' || editorAppearance === 'comment' || shouldShowOpenButtonOverlayInChomeless) && (editorExperiment('platform_editor_controls', 'variant1') || fg('platform_editor_preview_panel_linking'));
131
132
  }, [mode, editorAppearance]);
132
133
  var innerCard = shouldShowOpenButtonOverlay ? innerCardWithOpenButtonOverlay : innerCardOriginal;
133
- if (fg('platform_editor_preview_panel_linking')) {
134
+ if (mode === 'view' && fg('platform_editor_preview_panel_linking')) {
134
135
  var _cardContext$value;
135
- var cardState = cardContext === null || cardContext === void 0 || (_cardContext$value = cardContext.value) === null || _cardContext$value === void 0 || (_cardContext$value = _cardContext$value.store) === null || _cardContext$value === void 0 ? void 0 : _cardContext$value.getState()[node.attrs.url];
136
+ var url = node.attrs.url;
137
+ var cardState = cardContext === null || cardContext === void 0 || (_cardContext$value = cardContext.value) === null || _cardContext$value === void 0 || (_cardContext$value = _cardContext$value.store) === null || _cardContext$value === void 0 ? void 0 : _cardContext$value.getState()[url];
136
138
  if (cardState) {
137
- var _cardContext$value2, _cardContext$value2$i, _cardContext$value3, _pluginInjectionApi$a2;
139
+ var _cardContext$value2, _cardContext$value2$i, _cardContext$value3;
138
140
  var ari = getObjectAri(cardState.details);
139
141
  var name = getObjectName(cardState.details);
140
142
  var iconUrl = getObjectIconUrl(cardState.details);
@@ -142,42 +144,73 @@ export var InlineCardWithAwareness = /*#__PURE__*/memo(function (_ref) {
142
144
  ari: ari
143
145
  }));
144
146
  var openPreviewPanel = cardContext === null || cardContext === void 0 || (_cardContext$value3 = cardContext.value) === null || _cardContext$value3 === void 0 ? void 0 : _cardContext$value3.openPreviewPanel;
145
- var handleOpenGlancePanelClick = function handleOpenGlancePanelClick(event) {
146
- if (openPreviewPanel && isPanelAvailable) {
147
- // Prevent anchor default behaviour(click to open the anchor link)
148
- // When glance panel is available, let openPreviewPanel handle it
149
- event.preventDefault();
150
- openPreviewPanel({
151
- url: node.attrs.url,
152
- ari: ari,
153
- name: name || '',
154
- iconUrl: iconUrl
147
+ var isPreviewPanelAvailable = Boolean(openPreviewPanel && isPanelAvailable);
148
+ var innerCardWithPanelButtonOverlay = /*#__PURE__*/React.createElement(PreviewInvoker, {
149
+ url: url,
150
+ appearance: "inline"
151
+ }, function (_ref2) {
152
+ var canPreview = _ref2.canPreview,
153
+ invokePreview = _ref2.invokePreview;
154
+ var isPreviewModalAvailable = Boolean(canPreview && invokePreview);
155
+ // In view mode we show HoverLinkOverlay only with if preview mode or panel is available
156
+ // otherwise a use can click on smartlink itself to open the link in a new tab.
157
+ var isPreviewAvailable = isPreviewPanelAvailable || isPreviewModalAvailable;
158
+ if (isPreviewAvailable) {
159
+ var _pluginInjectionApi$a2;
160
+ return /*#__PURE__*/React.createElement(HoverLinkOverlay, {
161
+ isVisible: isResolvedViewRendered,
162
+ url: url,
163
+ compactPadding: editorAppearance === 'comment' || editorAppearance === 'chromeless',
164
+ editorAnalyticsApi: pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a2 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a2 === void 0 ? void 0 : _pluginInjectionApi$a2.actions,
165
+ view: view,
166
+ showPanelButton: isPreviewAvailable,
167
+ showPanelButtonIcon: isPreviewAvailable && isPreviewPanelAvailable ? 'panel' : 'modal',
168
+ onClick: function onClick(event) {
169
+ if (isPreviewPanelAvailable) {
170
+ event.preventDefault();
171
+ openPreviewPanel === null || openPreviewPanel === void 0 || openPreviewPanel({
172
+ url: url,
173
+ ari: ari || '',
174
+ name: name || '',
175
+ iconUrl: iconUrl
176
+ });
177
+ } else if (isPreviewModalAvailable) {
178
+ event.preventDefault();
179
+ invokePreview === null || invokePreview === void 0 || invokePreview();
180
+ }
181
+ }
182
+ }, /*#__PURE__*/React.createElement(InlineCard, {
183
+ node: node,
184
+ view: view,
185
+ getPos: getPos,
186
+ useAlternativePreloader: useAlternativePreloader,
187
+ actionOptions: actionOptions,
188
+ onResolve: onResolve,
189
+ onClick: onClick,
190
+ cardContext: cardContext,
191
+ isHovered: isHovered,
192
+ isPageSSRed: isPageSSRed,
193
+ pluginInjectionApi: pluginInjectionApi,
194
+ showHoverPreview: mode === 'view' && showHoverPreview
195
+ }));
196
+ } else {
197
+ return /*#__PURE__*/React.createElement(InlineCard, {
198
+ node: node,
199
+ view: view,
200
+ getPos: getPos,
201
+ useAlternativePreloader: useAlternativePreloader,
202
+ actionOptions: actionOptions,
203
+ onResolve: onResolve,
204
+ onClick: onClick,
205
+ cardContext: cardContext,
206
+ isHovered: isHovered,
207
+ isPageSSRed: isPageSSRed,
208
+ pluginInjectionApi: pluginInjectionApi,
209
+ showHoverPreview: mode === 'view' && showHoverPreview
155
210
  });
156
211
  }
157
- };
158
- var innerCardWithPanelButtonOverlay = /*#__PURE__*/React.createElement(HoverLinkOverlay, {
159
- isVisible: isResolvedViewRendered,
160
- url: node.attrs.url,
161
- 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,
163
- view: view,
164
- showPanelButton: !!isPanelAvailable,
165
- onClick: handleOpenGlancePanelClick
166
- }, /*#__PURE__*/React.createElement(InlineCard, {
167
- node: node,
168
- view: view,
169
- getPos: getPos,
170
- useAlternativePreloader: useAlternativePreloader,
171
- actionOptions: actionOptions,
172
- onResolve: onResolve,
173
- onClick: onClick,
174
- cardContext: cardContext,
175
- isHovered: isHovered,
176
- isPageSSRed: isPageSSRed,
177
- pluginInjectionApi: pluginInjectionApi,
178
- showHoverPreview: showHoverPreview
179
- }));
180
- innerCard = isPanelAvailable && openPreviewPanel ? innerCardWithPanelButtonOverlay : innerCard;
212
+ });
213
+ innerCard = innerCardWithPanelButtonOverlay;
181
214
  }
182
215
  }
183
216
  var getPosFunction = typeof getPos === 'function' ? getPos : undefined;
package/dist/esm/ui/AwarenessWrapper/index.js CHANGED
@@ -25,7 +25,7 @@ var loaderWrapperStyles = css({
25
25
  }
26
26
  });
27
27
  export var AwarenessWrapper = function AwarenessWrapper(_ref) {
28
- var _cardContext$value, _cardContext$value3;
28
+ var _cardContext$value2;
29
29
  var cardContext = _ref.cardContext,
30
30
  children = _ref.children,
31
31
  getPos = _ref.getPos,
@@ -77,10 +77,8 @@ export var AwarenessWrapper = function AwarenessWrapper(_ref) {
77
77
  setIsHovered(isHovered);
78
78
  setOverlayHoveredStyles(isHovered);
79
79
  }, [setOverlayHoveredStyles]);
80
- var isPreviewPanelAvailable = cardContext === null || cardContext === void 0 || (_cardContext$value = cardContext.value) === null || _cardContext$value === void 0 ? void 0 : _cardContext$value.isPreviewPanelAvailable;
81
- var shouldShowGlancePanel = (isPreviewPanelAvailable || false) && fg('platform_editor_preview_panel_linking');
82
80
  var cardWithOverlay = useMemo(function () {
83
- if (shouldShowLinkOverlay && !shouldShowGlancePanel && !editorExperiment('platform_editor_controls', 'variant1')) {
81
+ if (shouldShowLinkOverlay && !editorExperiment('platform_editor_controls', 'variant1') && !fg('platform_editor_preview_panel_linking')) {
84
82
  return jsx(InlineCardOverlay, {
85
83
  isSelected: isSelected,
86
84
  isVisible: isResolvedViewRendered && (isInserted || isHovered || isSelected),
@@ -94,11 +92,11 @@ export var AwarenessWrapper = function AwarenessWrapper(_ref) {
94
92
  }, children);
95
93
  }
96
94
  return children;
97
- }, [shouldShowLinkOverlay, children, isSelected, isResolvedViewRendered, isInserted, isHovered, url, handleOverlayChange, shouldShowGlancePanel]);
95
+ }, [shouldShowLinkOverlay, children, isSelected, isResolvedViewRendered, isInserted, isHovered, url, handleOverlayChange]);
98
96
  var isInline = appearance === 'inline';
99
97
  var placeholderUniqId = linkPosition || 0;
100
98
  return useMemo(function () {
101
- var _cardContext$value2;
99
+ var _cardContext$value;
102
100
  return jsx("span", {
103
101
  css: shouldShowLinkPulse && loaderWrapperStyles
104
102
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
@@ -109,7 +107,7 @@ export var AwarenessWrapper = function AwarenessWrapper(_ref) {
109
107
  "data-ssr-placeholder-replace": "awareness-wrapper-".concat(placeholderUniqId)
110
108
  }, jsx(AnalyticsContext, {
111
109
  data: {
112
- attributes: getResolvedAttributesFromStore(url, 'inline', cardContext === null || cardContext === void 0 || (_cardContext$value2 = cardContext.value) === null || _cardContext$value2 === void 0 ? void 0 : _cardContext$value2.store)
110
+ attributes: getResolvedAttributesFromStore(url, 'inline', cardContext === null || cardContext === void 0 || (_cardContext$value = cardContext.value) === null || _cardContext$value === void 0 ? void 0 : _cardContext$value.store)
113
111
  }
114
112
  }, jsx(DiscoveryPulse, {
115
113
  localStorageKey: LOCAL_STORAGE_DISCOVERY_KEY_SMART_LINK,
@@ -119,5 +117,5 @@ export var AwarenessWrapper = function AwarenessWrapper(_ref) {
119
117
  testId: "link-discovery-pulse",
120
118
  isInline: isInline
121
119
  }, cardWithOverlay)));
122
- }, [shouldShowLinkPulse, url, cardContext === null || cardContext === void 0 || (_cardContext$value3 = cardContext.value) === null || _cardContext$value3 === void 0 ? void 0 : _cardContext$value3.store, isResolvedViewRendered, cardWithOverlay, isInline, placeholderUniqId]);
120
+ }, [shouldShowLinkPulse, url, cardContext === null || cardContext === void 0 || (_cardContext$value2 = cardContext.value) === null || _cardContext$value2 === void 0 ? void 0 : _cardContext$value2.store, isResolvedViewRendered, cardWithOverlay, isInline, placeholderUniqId]);
123
121
  };
package/dist/esm/ui/preview/PreviewInvoker.js ADDED
@@ -0,0 +1,25 @@
1
+ import React, { useCallback, useMemo } from 'react';
2
+ import { useSmartLinkActions } from '@atlaskit/smart-card/hooks';
3
+ export var PreviewInvoker = function PreviewInvoker(_ref) {
4
+ var url = _ref.url,
5
+ appearance = _ref.appearance,
6
+ children = _ref.children;
7
+ var actions = useSmartLinkActions({
8
+ url: url,
9
+ appearance: appearance
10
+ });
11
+ var preview = useMemo(function () {
12
+ return actions.find(function (action) {
13
+ return action.id === 'preview-content';
14
+ });
15
+ }, [actions]);
16
+ var invokePreview = useCallback(function () {
17
+ try {
18
+ preview === null || preview === void 0 || preview.invoke();
19
+ } catch (_unused) {}
20
+ }, [preview]);
21
+ return /*#__PURE__*/React.createElement(React.Fragment, null, children({
22
+ canPreview: !!preview,
23
+ invokePreview: invokePreview
24
+ }));
25
+ };
package/dist/types/ui/preview/PreviewInvoker.d.ts ADDED
@@ -0,0 +1,12 @@
1
+ import type { ReactNode } from 'react';
2
+ import React from 'react';
3
+ type PreviewInvokerProps = {
4
+ url: string;
5
+ appearance: 'inline' | 'block' | 'embed';
6
+ children: (api: {
7
+ canPreview: boolean;
8
+ invokePreview?: () => void;
9
+ }) => ReactNode;
10
+ };
11
+ export declare const PreviewInvoker: ({ url, appearance, children }: PreviewInvokerProps) => React.JSX.Element;
12
+ export {};
package/dist/types-ts4.5/ui/preview/PreviewInvoker.d.ts ADDED
@@ -0,0 +1,12 @@
1
+ import type { ReactNode } from 'react';
2
+ import React from 'react';
3
+ type PreviewInvokerProps = {
4
+ url: string;
5
+ appearance: 'inline' | 'block' | 'embed';
6
+ children: (api: {
7
+ canPreview: boolean;
8
+ invokePreview?: () => void;
9
+ }) => ReactNode;
10
+ };
11
+ export declare const PreviewInvoker: ({ url, appearance, children }: PreviewInvokerProps) => React.JSX.Element;
12
+ export {};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-card",
3
- "version": "7.4.0",
3
+ "version": "7.4.1",
4
4
  "description": "Card plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -62,7 +62,7 @@
62
62
  "@atlaskit/primitives": "^14.11.0",
63
63
  "@atlaskit/smart-card": "^40.10.0",
64
64
  "@atlaskit/theme": "^19.0.0",
65
- "@atlaskit/tmp-editor-statsig": "^9.27.0",
65
+ "@atlaskit/tmp-editor-statsig": "^9.28.0",
66
66
  "@atlaskit/tokens": "^6.0.0",
67
67
  "@babel/runtime": "^7.0.0",
68
68
  "@emotion/react": "^11.7.1",