@atlaskit/editor-plugin-card 7.5.1 → 7.6.0
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/blockCard.js +75 -22
- package/dist/cjs/nodeviews/embedCard.js +76 -25
- package/dist/cjs/nodeviews/inlineCard.js +51 -6
- package/dist/cjs/nodeviews/inlineCardWithAwareness.js +7 -2
- package/dist/cjs/pm-plugins/main.js +7 -2
- package/dist/es2019/nodeviews/blockCard.js +33 -6
- package/dist/es2019/nodeviews/embedCard.js +36 -8
- package/dist/es2019/nodeviews/inlineCard.js +25 -3
- package/dist/es2019/nodeviews/inlineCardWithAwareness.js +7 -2
- package/dist/es2019/pm-plugins/main.js +5 -0
- package/dist/esm/nodeviews/blockCard.js +75 -23
- package/dist/esm/nodeviews/embedCard.js +76 -25
- package/dist/esm/nodeviews/inlineCard.js +52 -7
- package/dist/esm/nodeviews/inlineCardWithAwareness.js +7 -2
- package/dist/esm/pm-plugins/main.js +7 -2
- package/dist/types/nodeviews/blockCard.d.ts +10 -3
- package/dist/types/nodeviews/embedCard.d.ts +5 -2
- package/dist/types/nodeviews/genericCard.d.ts +2 -1
- package/dist/types/nodeviews/inlineCard.d.ts +2 -2
- package/dist/types/nodeviews/inlineCardWithAwareness.d.ts +1 -1
- package/dist/types-ts4.5/nodeviews/blockCard.d.ts +10 -3
- package/dist/types-ts4.5/nodeviews/embedCard.d.ts +5 -2
- package/dist/types-ts4.5/nodeviews/genericCard.d.ts +2 -1
- package/dist/types-ts4.5/nodeviews/inlineCard.d.ts +2 -2
- package/dist/types-ts4.5/nodeviews/inlineCardWithAwareness.d.ts +1 -1
- package/package.json +6 -8
|
@@ -2,6 +2,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
|
2
2
|
import React from 'react';
|
|
3
3
|
import rafSchedule from 'raf-schd';
|
|
4
4
|
import uuid from 'uuid/v4';
|
|
5
|
+
import { EditorCardProvider } from '@atlaskit/editor-card-provider';
|
|
5
6
|
import ReactNodeView from '@atlaskit/editor-common/react-node-view';
|
|
6
7
|
import { findOverflowScrollParent, UnsupportedBlock } from '@atlaskit/editor-common/ui';
|
|
7
8
|
import { browser, canRenderDatasource } from '@atlaskit/editor-common/utils';
|
|
@@ -12,13 +13,15 @@ import { Datasource } from '../nodeviews/datasource';
|
|
|
12
13
|
import { registerCard, removeCard } from '../pm-plugins/actions';
|
|
13
14
|
import { isDatasourceNode } from '../pm-plugins/utils';
|
|
14
15
|
import { Card } from './genericCard';
|
|
15
|
-
|
|
16
16
|
// eslint-disable-next-line @repo/internal/react/no-class-components
|
|
17
17
|
export class BlockCardComponent extends React.PureComponent {
|
|
18
18
|
constructor(props) {
|
|
19
19
|
super(props);
|
|
20
20
|
// Ignored via go/ees005
|
|
21
21
|
// eslint-disable-next-line @atlaskit/editor/no-as-casting
|
|
22
|
+
_defineProperty(this, "state", {
|
|
23
|
+
isSSRDataAvailable: false
|
|
24
|
+
});
|
|
22
25
|
_defineProperty(this, "onResolve", data => {
|
|
23
26
|
const {
|
|
24
27
|
getPos,
|
|
@@ -70,6 +73,25 @@ export class BlockCardComponent extends React.PureComponent {
|
|
|
70
73
|
});
|
|
71
74
|
this.scrollContainer = findOverflowScrollParent(props.view.dom) || undefined;
|
|
72
75
|
}
|
|
76
|
+
componentDidMount() {
|
|
77
|
+
if (!expValEquals('platform_editor_smart_card_otp', 'isEnabled', true)) {
|
|
78
|
+
return;
|
|
79
|
+
}
|
|
80
|
+
const provider = this.props.provider;
|
|
81
|
+
if (!provider) {
|
|
82
|
+
return;
|
|
83
|
+
}
|
|
84
|
+
const updateSSRDataAvailability = async () => {
|
|
85
|
+
const resolvedProvider = await provider;
|
|
86
|
+
if (resolvedProvider instanceof EditorCardProvider) {
|
|
87
|
+
this.setState(state => ({
|
|
88
|
+
...state,
|
|
89
|
+
isSSRDataAvailable: resolvedProvider.getCacheStatusForNode(this.props.node) === 'ssr'
|
|
90
|
+
}));
|
|
91
|
+
}
|
|
92
|
+
};
|
|
93
|
+
void updateSSRDataAvailability();
|
|
94
|
+
}
|
|
73
95
|
componentWillUnmount() {
|
|
74
96
|
this.removeCard();
|
|
75
97
|
}
|
|
@@ -109,7 +131,8 @@ export class BlockCardComponent extends React.PureComponent {
|
|
|
109
131
|
onError: this.onError,
|
|
110
132
|
platform: 'web',
|
|
111
133
|
actionOptions: actionOptions,
|
|
112
|
-
CompetitorPrompt: CompetitorPrompt
|
|
134
|
+
CompetitorPrompt: CompetitorPrompt,
|
|
135
|
+
hideIconLoadingSkeleton: expValEquals('platform_editor_smart_card_otp', 'isEnabled', true) && this.state.isSSRDataAvailable
|
|
113
136
|
}), this.gapCursorSpan()) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SmartCard, {
|
|
114
137
|
key: url,
|
|
115
138
|
url: url !== null && url !== void 0 ? url : data.url,
|
|
@@ -169,7 +192,8 @@ export class BlockCard extends ReactNodeView {
|
|
|
169
192
|
pluginInjectionApi,
|
|
170
193
|
onClickCallback,
|
|
171
194
|
CompetitorPrompt,
|
|
172
|
-
isPageSSRed
|
|
195
|
+
isPageSSRed,
|
|
196
|
+
provider
|
|
173
197
|
} = this.reactComponentProps;
|
|
174
198
|
return /*#__PURE__*/React.createElement(WrappedBlockCard, {
|
|
175
199
|
node: this.node,
|
|
@@ -180,7 +204,8 @@ export class BlockCard extends ReactNodeView {
|
|
|
180
204
|
onClickCallback: onClickCallback,
|
|
181
205
|
id: this.id,
|
|
182
206
|
CompetitorPrompt: CompetitorPrompt,
|
|
183
|
-
isPageSSRed: isPageSSRed
|
|
207
|
+
isPageSSRed: isPageSSRed,
|
|
208
|
+
provider: provider
|
|
184
209
|
});
|
|
185
210
|
}
|
|
186
211
|
destroy() {
|
|
@@ -197,7 +222,8 @@ export const blockCardNodeView = ({
|
|
|
197
222
|
allowDatasource,
|
|
198
223
|
inlineCardViewProducer,
|
|
199
224
|
CompetitorPrompt,
|
|
200
|
-
isPageSSRed
|
|
225
|
+
isPageSSRed,
|
|
226
|
+
provider
|
|
201
227
|
}) => (node, view, getPos, decorations) => {
|
|
202
228
|
const {
|
|
203
229
|
portalProviderAPI,
|
|
@@ -208,7 +234,8 @@ export const blockCardNodeView = ({
|
|
|
208
234
|
pluginInjectionApi,
|
|
209
235
|
onClickCallback: onClickCallback,
|
|
210
236
|
CompetitorPrompt,
|
|
211
|
-
isPageSSRed
|
|
237
|
+
isPageSSRed,
|
|
238
|
+
provider
|
|
212
239
|
};
|
|
213
240
|
const isDatasource = isDatasourceNode(node);
|
|
214
241
|
if (isDatasource) {
|
|
@@ -4,6 +4,7 @@ import React from 'react';
|
|
|
4
4
|
import rafSchedule from 'raf-schd';
|
|
5
5
|
import uuid from 'uuid/v4';
|
|
6
6
|
import { SetAttrsStep } from '@atlaskit/adf-schema/steps';
|
|
7
|
+
import { EditorCardProvider } from '@atlaskit/editor-card-provider';
|
|
7
8
|
import { sharedPluginStateHookMigratorFactory, useSharedPluginState, useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
|
|
8
9
|
import ReactNodeView from '@atlaskit/editor-common/react-node-view';
|
|
9
10
|
import { findOverflowScrollParent, MediaSingle as RichMediaWrapper, UnsupportedBlock } from '@atlaskit/editor-common/ui';
|
|
@@ -122,7 +123,8 @@ export class EmbedCardComponent extends React.PureComponent {
|
|
|
122
123
|
// eslint-disable-next-line @atlaskit/editor/no-as-casting
|
|
123
124
|
_defineProperty(this, "embedIframeRef", /*#__PURE__*/React.createRef());
|
|
124
125
|
_defineProperty(this, "state", {
|
|
125
|
-
hasPreview: true
|
|
126
|
+
hasPreview: true,
|
|
127
|
+
isSSRDataAvailable: false
|
|
126
128
|
});
|
|
127
129
|
_defineProperty(this, "getPosSafely", () => {
|
|
128
130
|
const {
|
|
@@ -274,6 +276,25 @@ export class EmbedCardComponent extends React.PureComponent {
|
|
|
274
276
|
_defineProperty(this, "removeCardDispatched", false);
|
|
275
277
|
this.scrollContainer = findOverflowScrollParent(props.view.dom) || undefined;
|
|
276
278
|
}
|
|
279
|
+
componentDidMount() {
|
|
280
|
+
if (!expValEquals('platform_editor_smart_card_otp', 'isEnabled', true)) {
|
|
281
|
+
return;
|
|
282
|
+
}
|
|
283
|
+
const provider = this.props.provider;
|
|
284
|
+
if (!provider) {
|
|
285
|
+
return;
|
|
286
|
+
}
|
|
287
|
+
const updateSSRDataAvailability = async () => {
|
|
288
|
+
const resolvedProvider = await provider;
|
|
289
|
+
if (resolvedProvider instanceof EditorCardProvider) {
|
|
290
|
+
this.setState(state => ({
|
|
291
|
+
...state,
|
|
292
|
+
isSSRDataAvailable: resolvedProvider.getCacheStatusForNode(this.props.node) === 'ssr'
|
|
293
|
+
}));
|
|
294
|
+
}
|
|
295
|
+
};
|
|
296
|
+
void updateSSRDataAvailability();
|
|
297
|
+
}
|
|
277
298
|
componentWillUnmount() {
|
|
278
299
|
this.removeCard();
|
|
279
300
|
}
|
|
@@ -345,7 +366,8 @@ export class EmbedCardComponent extends React.PureComponent {
|
|
|
345
366
|
container: this.scrollContainer,
|
|
346
367
|
embedIframeRef: this.embedIframeRef,
|
|
347
368
|
actionOptions: actionOptions,
|
|
348
|
-
CompetitorPrompt: CompetitorPrompt
|
|
369
|
+
CompetitorPrompt: CompetitorPrompt,
|
|
370
|
+
hideIconLoadingSkeleton: expValEquals('platform_editor_smart_card_otp', 'isEnabled', true) && this.state.isSSRDataAvailable
|
|
349
371
|
}) : /*#__PURE__*/React.createElement(SmartCard, {
|
|
350
372
|
key: url,
|
|
351
373
|
url: url,
|
|
@@ -403,7 +425,8 @@ export const EmbedOrBlockCardComponent = props => {
|
|
|
403
425
|
hasPreview: props.hasPreview,
|
|
404
426
|
liveHeight: props.liveHeight,
|
|
405
427
|
initialAspectRatio: props.initialAspectRatio,
|
|
406
|
-
isPageSSRed: props.isPageSSRed
|
|
428
|
+
isPageSSRed: props.isPageSSRed,
|
|
429
|
+
provider: props.provider
|
|
407
430
|
}) : /*#__PURE__*/React.createElement(EmbedCardComponent, {
|
|
408
431
|
id: props.id,
|
|
409
432
|
node: props.node,
|
|
@@ -422,7 +445,8 @@ export const EmbedOrBlockCardComponent = props => {
|
|
|
422
445
|
hasPreview: props.hasPreview,
|
|
423
446
|
liveHeight: props.liveHeight,
|
|
424
447
|
initialAspectRatio: props.initialAspectRatio,
|
|
425
|
-
isPageSSRed: props.isPageSSRed
|
|
448
|
+
isPageSSRed: props.isPageSSRed,
|
|
449
|
+
provider: props.provider
|
|
426
450
|
});
|
|
427
451
|
};
|
|
428
452
|
const WrappedEmbedCardWithCondition = componentWithCondition(() => expValEquals('platform_editor_preview_panel_responsiveness', 'isEnabled', true), EmbedOrBlockCardComponent, EmbedCardComponent);
|
|
@@ -461,7 +485,8 @@ export class EmbedCard extends ReactNodeView {
|
|
|
461
485
|
pluginInjectionApi,
|
|
462
486
|
onClickCallback,
|
|
463
487
|
CompetitorPrompt,
|
|
464
|
-
isPageSSRed
|
|
488
|
+
isPageSSRed,
|
|
489
|
+
provider
|
|
465
490
|
} = this.reactComponentProps;
|
|
466
491
|
return /*#__PURE__*/React.createElement(WrappedEmbedCard, {
|
|
467
492
|
node: this.node,
|
|
@@ -475,7 +500,8 @@ export class EmbedCard extends ReactNodeView {
|
|
|
475
500
|
onClickCallback: onClickCallback,
|
|
476
501
|
id: this.id,
|
|
477
502
|
CompetitorPrompt: CompetitorPrompt,
|
|
478
|
-
isPageSSRed: isPageSSRed
|
|
503
|
+
isPageSSRed: isPageSSRed,
|
|
504
|
+
provider: provider
|
|
479
505
|
});
|
|
480
506
|
}
|
|
481
507
|
destroy() {
|
|
@@ -492,7 +518,8 @@ export const embedCardNodeView = ({
|
|
|
492
518
|
actionOptions,
|
|
493
519
|
onClickCallback,
|
|
494
520
|
CompetitorPrompt,
|
|
495
|
-
isPageSSRed
|
|
521
|
+
isPageSSRed,
|
|
522
|
+
provider
|
|
496
523
|
}) => (node, view, getPos) => {
|
|
497
524
|
const {
|
|
498
525
|
portalProviderAPI,
|
|
@@ -508,7 +535,8 @@ export const embedCardNodeView = ({
|
|
|
508
535
|
actionOptions,
|
|
509
536
|
onClickCallback: onClickCallback,
|
|
510
537
|
CompetitorPrompt,
|
|
511
|
-
isPageSSRed
|
|
538
|
+
isPageSSRed,
|
|
539
|
+
provider
|
|
512
540
|
};
|
|
513
541
|
return new EmbedCard(node, view, getPos, portalProviderAPI, eventDispatcher, reactComponentProps).init();
|
|
514
542
|
};
|
|
@@ -1,13 +1,15 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/extends";
|
|
2
|
-
import React, { memo, useCallback, useEffect, useMemo, useRef } from 'react';
|
|
2
|
+
import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
|
3
3
|
import rafSchedule from 'raf-schd';
|
|
4
4
|
import uuid from 'uuid/v4';
|
|
5
|
+
import { EditorCardProvider } from '@atlaskit/editor-card-provider';
|
|
5
6
|
import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
|
|
6
7
|
import { sharedPluginStateHookMigratorFactory, useSharedPluginState, useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
|
|
7
8
|
import { UnsupportedInline, findOverflowScrollParent } from '@atlaskit/editor-common/ui';
|
|
8
9
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
9
10
|
import { Card as SmartCard } from '@atlaskit/smart-card';
|
|
10
11
|
import { CardSSR } from '@atlaskit/smart-card/ssr';
|
|
12
|
+
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
11
13
|
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
12
14
|
import { registerCard, removeCard } from '../pm-plugins/actions';
|
|
13
15
|
import { getAwarenessProps } from '../pm-plugins/utils';
|
|
@@ -27,6 +29,7 @@ export const InlineCard = /*#__PURE__*/memo(({
|
|
|
27
29
|
showHoverPreview,
|
|
28
30
|
hoverPreviewOptions,
|
|
29
31
|
isPageSSRed,
|
|
32
|
+
provider,
|
|
30
33
|
pluginInjectionApi,
|
|
31
34
|
disablePreviewPanel
|
|
32
35
|
}) => {
|
|
@@ -47,6 +50,22 @@ export const InlineCard = /*#__PURE__*/memo(({
|
|
|
47
50
|
view.dispatch(tr);
|
|
48
51
|
};
|
|
49
52
|
}, [getPos, view]);
|
|
53
|
+
const [isSSRDataAvailable, setIsSSRDataAvailable] = useState(false);
|
|
54
|
+
useEffect(() => {
|
|
55
|
+
if (!expValEquals('platform_editor_smart_card_otp', 'isEnabled', true)) {
|
|
56
|
+
return;
|
|
57
|
+
}
|
|
58
|
+
if (!provider) {
|
|
59
|
+
return;
|
|
60
|
+
}
|
|
61
|
+
const updateSSRDataAvailability = async () => {
|
|
62
|
+
const resolvedProvider = await provider;
|
|
63
|
+
if (resolvedProvider instanceof EditorCardProvider) {
|
|
64
|
+
setIsSSRDataAvailable(resolvedProvider.getCacheStatusForNode(node) === 'ssr');
|
|
65
|
+
}
|
|
66
|
+
};
|
|
67
|
+
void updateSSRDataAvailability();
|
|
68
|
+
}, [provider, node]);
|
|
50
69
|
const scrollContainer = useMemo(
|
|
51
70
|
// Ignored via go/ees005
|
|
52
71
|
// eslint-disable-next-line @atlaskit/editor/no-as-casting
|
|
@@ -121,7 +140,8 @@ export const InlineCard = /*#__PURE__*/memo(({
|
|
|
121
140
|
isHovered: isHovered,
|
|
122
141
|
showHoverPreview: showHoverPreview,
|
|
123
142
|
hoverPreviewOptions: hoverPreviewOptions,
|
|
124
|
-
disablePreviewPanel: disablePreviewPanel
|
|
143
|
+
disablePreviewPanel: disablePreviewPanel,
|
|
144
|
+
hideIconLoadingSkeleton: expValEquals('platform_editor_smart_card_otp', 'isEnabled', true) && isSSRDataAvailable
|
|
125
145
|
});
|
|
126
146
|
}
|
|
127
147
|
return /*#__PURE__*/React.createElement(SmartCard, {
|
|
@@ -139,7 +159,7 @@ export const InlineCard = /*#__PURE__*/memo(({
|
|
|
139
159
|
hoverPreviewOptions: hoverPreviewOptions,
|
|
140
160
|
disablePreviewPanel: disablePreviewPanel
|
|
141
161
|
});
|
|
142
|
-
}, [url, data, onClick, scrollContainer, onResolve, onError, useAlternativePreloader, actionOptions, isHovered, showHoverPreview, hoverPreviewOptions, isPageSSRed, disablePreviewPanel]);
|
|
162
|
+
}, [url, data, onClick, scrollContainer, onResolve, onError, useAlternativePreloader, actionOptions, isHovered, showHoverPreview, hoverPreviewOptions, isPageSSRed, disablePreviewPanel, isSSRDataAvailable]);
|
|
143
163
|
|
|
144
164
|
// [WS-2307]: we only render card wrapped into a Provider when the value is ready,
|
|
145
165
|
// otherwise if we got data, we can render the card directly since it doesn't need the Provider
|
|
@@ -186,6 +206,7 @@ export function InlineCardNodeView(props) {
|
|
|
186
206
|
pluginInjectionApi,
|
|
187
207
|
onClickCallback,
|
|
188
208
|
isPageSSRed,
|
|
209
|
+
provider,
|
|
189
210
|
CompetitorPrompt
|
|
190
211
|
} = props;
|
|
191
212
|
const {
|
|
@@ -205,6 +226,7 @@ export function InlineCardNodeView(props) {
|
|
|
205
226
|
pluginInjectionApi: pluginInjectionApi,
|
|
206
227
|
onClickCallback: onClickCallback,
|
|
207
228
|
isPageSSRed: isPageSSRed,
|
|
229
|
+
provider: provider,
|
|
208
230
|
appearance: "inline"
|
|
209
231
|
// Ignored via go/ees005
|
|
210
232
|
// eslint-disable-next-line react/jsx-props-no-spreading
|
|
@@ -42,6 +42,7 @@ export const InlineCardWithAwareness = /*#__PURE__*/memo(({
|
|
|
42
42
|
isOverlayEnabled,
|
|
43
43
|
isSelected,
|
|
44
44
|
isPageSSRed,
|
|
45
|
+
provider,
|
|
45
46
|
appearance
|
|
46
47
|
}) => {
|
|
47
48
|
var _pluginInjectionApi$c;
|
|
@@ -96,10 +97,11 @@ export const InlineCardWithAwareness = /*#__PURE__*/memo(({
|
|
|
96
97
|
cardContext: cardContext,
|
|
97
98
|
isHovered: isHovered,
|
|
98
99
|
isPageSSRed: isPageSSRed,
|
|
100
|
+
provider: provider,
|
|
99
101
|
pluginInjectionApi: pluginInjectionApi,
|
|
100
102
|
disablePreviewPanel: true
|
|
101
103
|
}));
|
|
102
|
-
}, [isResolvedViewRendered, node, editorAppearance, view, getPos, useAlternativePreloader, actionOptions, onResolve, onClick, cardContext, isHovered, isPageSSRed, pluginInjectionApi]);
|
|
104
|
+
}, [isResolvedViewRendered, node, editorAppearance, view, getPos, useAlternativePreloader, actionOptions, onResolve, onClick, cardContext, isHovered, isPageSSRed, provider, pluginInjectionApi]);
|
|
103
105
|
const innerCardOriginal = useMemo(() => /*#__PURE__*/React.createElement(InlineCard, {
|
|
104
106
|
node: node,
|
|
105
107
|
view: view,
|
|
@@ -111,9 +113,10 @@ export const InlineCardWithAwareness = /*#__PURE__*/memo(({
|
|
|
111
113
|
cardContext: cardContext,
|
|
112
114
|
isHovered: isHovered,
|
|
113
115
|
isPageSSRed: isPageSSRed,
|
|
116
|
+
provider: provider,
|
|
114
117
|
pluginInjectionApi: pluginInjectionApi,
|
|
115
118
|
showHoverPreview: false
|
|
116
|
-
}), [actionOptions, cardContext, getPos, isHovered, node, onClick, onResolve, useAlternativePreloader, view, isPageSSRed, pluginInjectionApi]);
|
|
119
|
+
}), [actionOptions, cardContext, getPos, isHovered, node, onClick, onResolve, useAlternativePreloader, view, isPageSSRed, provider, pluginInjectionApi]);
|
|
117
120
|
const shouldShowOpenButtonOverlay = useMemo(() => {
|
|
118
121
|
const shouldShowOpenButtonOverlayInChomeless = editorAppearance === 'chromeless';
|
|
119
122
|
return (mode === 'edit' || editorAppearance === 'comment' || shouldShowOpenButtonOverlayInChomeless) && (editorExperiment('platform_editor_controls', 'variant1') || expValEquals('platform_editor_preview_panel_linking_exp', 'isEnabled', true));
|
|
@@ -179,6 +182,7 @@ export const InlineCardWithAwareness = /*#__PURE__*/memo(({
|
|
|
179
182
|
cardContext: cardContext,
|
|
180
183
|
isHovered: isHovered,
|
|
181
184
|
isPageSSRed: isPageSSRed,
|
|
185
|
+
provider: provider,
|
|
182
186
|
pluginInjectionApi: pluginInjectionApi,
|
|
183
187
|
showHoverPreview: mode === 'view' && showHoverPreview,
|
|
184
188
|
disablePreviewPanel: true
|
|
@@ -195,6 +199,7 @@ export const InlineCardWithAwareness = /*#__PURE__*/memo(({
|
|
|
195
199
|
cardContext: cardContext,
|
|
196
200
|
isHovered: isHovered,
|
|
197
201
|
isPageSSRed: isPageSSRed,
|
|
202
|
+
provider: provider,
|
|
198
203
|
pluginInjectionApi: pluginInjectionApi,
|
|
199
204
|
showHoverPreview: mode === 'view' && showHoverPreview
|
|
200
205
|
});
|
|
@@ -43,6 +43,7 @@ export const createPlugin = (options, pluginInjectionApi) => pmPluginFactoryPara
|
|
|
43
43
|
allowBlockCards,
|
|
44
44
|
onClickCallback,
|
|
45
45
|
isPageSSRed,
|
|
46
|
+
provider,
|
|
46
47
|
CompetitorPrompt
|
|
47
48
|
} = options;
|
|
48
49
|
const enableInlineUpgradeFeatures = !!showUpgradeDiscoverability;
|
|
@@ -58,6 +59,7 @@ export const createPlugin = (options, pluginInjectionApi) => pmPluginFactoryPara
|
|
|
58
59
|
pluginInjectionApi,
|
|
59
60
|
onClickCallback,
|
|
60
61
|
isPageSSRed,
|
|
62
|
+
provider,
|
|
61
63
|
CompetitorPrompt
|
|
62
64
|
}
|
|
63
65
|
});
|
|
@@ -233,6 +235,7 @@ export const createPlugin = (options, pluginInjectionApi) => pmPluginFactoryPara
|
|
|
233
235
|
inlineCard: lazyInlineCardView({
|
|
234
236
|
inlineCardViewProducer,
|
|
235
237
|
isPageSSRed
|
|
238
|
+
// no need provider here, it's in the inlineCardViewProducer.extraComponentProps
|
|
236
239
|
}),
|
|
237
240
|
blockCard: lazyBlockCardView({
|
|
238
241
|
pmPluginFactoryParams,
|
|
@@ -242,6 +245,7 @@ export const createPlugin = (options, pluginInjectionApi) => pmPluginFactoryPara
|
|
|
242
245
|
allowDatasource: options.allowDatasource,
|
|
243
246
|
inlineCardViewProducer,
|
|
244
247
|
isPageSSRed,
|
|
248
|
+
provider,
|
|
245
249
|
CompetitorPrompt: options.CompetitorPrompt
|
|
246
250
|
}),
|
|
247
251
|
embedCard: lazyEmbedCardView({
|
|
@@ -252,6 +256,7 @@ export const createPlugin = (options, pluginInjectionApi) => pmPluginFactoryPara
|
|
|
252
256
|
actionOptions,
|
|
253
257
|
onClickCallback: options.onClickCallback,
|
|
254
258
|
isPageSSRed,
|
|
259
|
+
provider,
|
|
255
260
|
CompetitorPrompt: options.CompetitorPrompt
|
|
256
261
|
})
|
|
257
262
|
},
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import _get from "@babel/runtime/helpers/get";
|
|
2
|
+
import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
|
|
2
3
|
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
|
|
3
4
|
import _createClass from "@babel/runtime/helpers/createClass";
|
|
4
5
|
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
|
|
@@ -6,11 +7,15 @@ import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
|
|
|
6
7
|
import _inherits from "@babel/runtime/helpers/inherits";
|
|
7
8
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
8
9
|
function _superPropGet(t, o, e, r) { var p = _get(_getPrototypeOf(1 & r ? t.prototype : t), o, e); return 2 & r && "function" == typeof p ? function (t) { return p.apply(e, t); } : p; }
|
|
10
|
+
import _regeneratorRuntime from "@babel/runtime/regenerator";
|
|
11
|
+
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; }
|
|
12
|
+
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; }
|
|
9
13
|
function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
|
|
10
14
|
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
|
|
11
15
|
import React from 'react';
|
|
12
16
|
import rafSchedule from 'raf-schd';
|
|
13
17
|
import uuid from 'uuid/v4';
|
|
18
|
+
import { EditorCardProvider } from '@atlaskit/editor-card-provider';
|
|
14
19
|
import ReactNodeView from '@atlaskit/editor-common/react-node-view';
|
|
15
20
|
import { findOverflowScrollParent, UnsupportedBlock } from '@atlaskit/editor-common/ui';
|
|
16
21
|
import { browser, canRenderDatasource } from '@atlaskit/editor-common/utils';
|
|
@@ -21,7 +26,6 @@ import { Datasource } from '../nodeviews/datasource';
|
|
|
21
26
|
import { registerCard, removeCard as _removeCard } from '../pm-plugins/actions';
|
|
22
27
|
import { isDatasourceNode } from '../pm-plugins/utils';
|
|
23
28
|
import { Card } from './genericCard';
|
|
24
|
-
|
|
25
29
|
// eslint-disable-next-line @repo/internal/react/no-class-components
|
|
26
30
|
export var BlockCardComponent = /*#__PURE__*/function (_React$PureComponent) {
|
|
27
31
|
function BlockCardComponent(props) {
|
|
@@ -30,6 +34,9 @@ export var BlockCardComponent = /*#__PURE__*/function (_React$PureComponent) {
|
|
|
30
34
|
_this = _callSuper(this, BlockCardComponent, [props]);
|
|
31
35
|
// Ignored via go/ees005
|
|
32
36
|
// eslint-disable-next-line @atlaskit/editor/no-as-casting
|
|
37
|
+
_defineProperty(_this, "state", {
|
|
38
|
+
isSSRDataAvailable: false
|
|
39
|
+
});
|
|
33
40
|
_defineProperty(_this, "onResolve", function (data) {
|
|
34
41
|
var _this$props = _this.props,
|
|
35
42
|
getPos = _this$props.getPos,
|
|
@@ -80,6 +87,46 @@ export var BlockCardComponent = /*#__PURE__*/function (_React$PureComponent) {
|
|
|
80
87
|
}
|
|
81
88
|
_inherits(BlockCardComponent, _React$PureComponent);
|
|
82
89
|
return _createClass(BlockCardComponent, [{
|
|
90
|
+
key: "componentDidMount",
|
|
91
|
+
value: function componentDidMount() {
|
|
92
|
+
var _this2 = this;
|
|
93
|
+
if (!expValEquals('platform_editor_smart_card_otp', 'isEnabled', true)) {
|
|
94
|
+
return;
|
|
95
|
+
}
|
|
96
|
+
var provider = this.props.provider;
|
|
97
|
+
if (!provider) {
|
|
98
|
+
return;
|
|
99
|
+
}
|
|
100
|
+
var updateSSRDataAvailability = /*#__PURE__*/function () {
|
|
101
|
+
var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
|
|
102
|
+
var resolvedProvider;
|
|
103
|
+
return _regeneratorRuntime.wrap(function _callee$(_context) {
|
|
104
|
+
while (1) switch (_context.prev = _context.next) {
|
|
105
|
+
case 0:
|
|
106
|
+
_context.next = 2;
|
|
107
|
+
return provider;
|
|
108
|
+
case 2:
|
|
109
|
+
resolvedProvider = _context.sent;
|
|
110
|
+
if (resolvedProvider instanceof EditorCardProvider) {
|
|
111
|
+
_this2.setState(function (state) {
|
|
112
|
+
return _objectSpread(_objectSpread({}, state), {}, {
|
|
113
|
+
isSSRDataAvailable: resolvedProvider.getCacheStatusForNode(_this2.props.node) === 'ssr'
|
|
114
|
+
});
|
|
115
|
+
});
|
|
116
|
+
}
|
|
117
|
+
case 4:
|
|
118
|
+
case "end":
|
|
119
|
+
return _context.stop();
|
|
120
|
+
}
|
|
121
|
+
}, _callee);
|
|
122
|
+
}));
|
|
123
|
+
return function updateSSRDataAvailability() {
|
|
124
|
+
return _ref2.apply(this, arguments);
|
|
125
|
+
};
|
|
126
|
+
}();
|
|
127
|
+
void updateSSRDataAvailability();
|
|
128
|
+
}
|
|
129
|
+
}, {
|
|
83
130
|
key: "componentWillUnmount",
|
|
84
131
|
value: function componentWillUnmount() {
|
|
85
132
|
this.removeCard();
|
|
@@ -120,7 +167,8 @@ export var BlockCardComponent = /*#__PURE__*/function (_React$PureComponent) {
|
|
|
120
167
|
onError: this.onError,
|
|
121
168
|
platform: 'web',
|
|
122
169
|
actionOptions: actionOptions,
|
|
123
|
-
CompetitorPrompt: CompetitorPrompt
|
|
170
|
+
CompetitorPrompt: CompetitorPrompt,
|
|
171
|
+
hideIconLoadingSkeleton: expValEquals('platform_editor_smart_card_otp', 'isEnabled', true) && this.state.isSSRDataAvailable
|
|
124
172
|
}), this.gapCursorSpan()) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SmartCard, {
|
|
125
173
|
key: url,
|
|
126
174
|
url: url !== null && url !== void 0 ? url : data.url,
|
|
@@ -144,31 +192,31 @@ export var BlockCardComponent = /*#__PURE__*/function (_React$PureComponent) {
|
|
|
144
192
|
var WrappedBlockCard = Card(BlockCardComponent, UnsupportedBlock);
|
|
145
193
|
export var BlockCard = /*#__PURE__*/function (_ReactNodeView) {
|
|
146
194
|
function BlockCard() {
|
|
147
|
-
var
|
|
195
|
+
var _this3;
|
|
148
196
|
_classCallCheck(this, BlockCard);
|
|
149
197
|
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
150
198
|
args[_key] = arguments[_key];
|
|
151
199
|
}
|
|
152
|
-
|
|
153
|
-
_defineProperty(
|
|
154
|
-
_defineProperty(
|
|
200
|
+
_this3 = _callSuper(this, BlockCard, [].concat(args));
|
|
201
|
+
_defineProperty(_this3, "id", uuid());
|
|
202
|
+
_defineProperty(_this3, "updateContentEditable", function (editorViewModeState, divElement) {
|
|
155
203
|
divElement.contentEditable = (editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'view' ? 'false' : 'true';
|
|
156
204
|
});
|
|
157
|
-
return
|
|
205
|
+
return _this3;
|
|
158
206
|
}
|
|
159
207
|
_inherits(BlockCard, _ReactNodeView);
|
|
160
208
|
return _createClass(BlockCard, [{
|
|
161
209
|
key: "createDomRef",
|
|
162
210
|
value: function createDomRef() {
|
|
163
211
|
var _this$reactComponentP,
|
|
164
|
-
|
|
212
|
+
_this4 = this,
|
|
165
213
|
_this$reactComponentP2;
|
|
166
214
|
var domRef = document.createElement('div');
|
|
167
215
|
// workaround Chrome bug in https://product-fabric.atlassian.net/browse/ED-5379
|
|
168
216
|
// see also: https://github.com/ProseMirror/prosemirror/issues/884
|
|
169
|
-
this.unsubscribe = (_this$reactComponentP = this.reactComponentProps.pluginInjectionApi) === null || _this$reactComponentP === void 0 || (_this$reactComponentP = _this$reactComponentP.editorViewMode) === null || _this$reactComponentP === void 0 ? void 0 : _this$reactComponentP.sharedState.onChange(function (
|
|
170
|
-
var nextSharedState =
|
|
171
|
-
return
|
|
217
|
+
this.unsubscribe = (_this$reactComponentP = this.reactComponentProps.pluginInjectionApi) === null || _this$reactComponentP === void 0 || (_this$reactComponentP = _this$reactComponentP.editorViewMode) === null || _this$reactComponentP === void 0 ? void 0 : _this$reactComponentP.sharedState.onChange(function (_ref3) {
|
|
218
|
+
var nextSharedState = _ref3.nextSharedState;
|
|
219
|
+
return _this4.updateContentEditable(nextSharedState, domRef);
|
|
172
220
|
});
|
|
173
221
|
this.updateContentEditable((_this$reactComponentP2 = this.reactComponentProps.pluginInjectionApi) === null || _this$reactComponentP2 === void 0 || (_this$reactComponentP2 = _this$reactComponentP2.editorViewMode) === null || _this$reactComponentP2 === void 0 ? void 0 : _this$reactComponentP2.sharedState.currentState(), domRef);
|
|
174
222
|
domRef.setAttribute('spellcheck', 'false');
|
|
@@ -200,7 +248,8 @@ export var BlockCard = /*#__PURE__*/function (_ReactNodeView) {
|
|
|
200
248
|
pluginInjectionApi = _this$reactComponentP3.pluginInjectionApi,
|
|
201
249
|
onClickCallback = _this$reactComponentP3.onClickCallback,
|
|
202
250
|
CompetitorPrompt = _this$reactComponentP3.CompetitorPrompt,
|
|
203
|
-
isPageSSRed = _this$reactComponentP3.isPageSSRed
|
|
251
|
+
isPageSSRed = _this$reactComponentP3.isPageSSRed,
|
|
252
|
+
provider = _this$reactComponentP3.provider;
|
|
204
253
|
return /*#__PURE__*/React.createElement(WrappedBlockCard, {
|
|
205
254
|
node: this.node,
|
|
206
255
|
view: this.view,
|
|
@@ -210,7 +259,8 @@ export var BlockCard = /*#__PURE__*/function (_ReactNodeView) {
|
|
|
210
259
|
onClickCallback: onClickCallback,
|
|
211
260
|
id: this.id,
|
|
212
261
|
CompetitorPrompt: CompetitorPrompt,
|
|
213
|
-
isPageSSRed: isPageSSRed
|
|
262
|
+
isPageSSRed: isPageSSRed,
|
|
263
|
+
provider: provider
|
|
214
264
|
});
|
|
215
265
|
}
|
|
216
266
|
}, {
|
|
@@ -222,15 +272,16 @@ export var BlockCard = /*#__PURE__*/function (_ReactNodeView) {
|
|
|
222
272
|
}
|
|
223
273
|
}]);
|
|
224
274
|
}(ReactNodeView);
|
|
225
|
-
export var blockCardNodeView = function blockCardNodeView(
|
|
226
|
-
var pmPluginFactoryParams =
|
|
227
|
-
actionOptions =
|
|
228
|
-
pluginInjectionApi =
|
|
229
|
-
onClickCallback =
|
|
230
|
-
allowDatasource =
|
|
231
|
-
inlineCardViewProducer =
|
|
232
|
-
CompetitorPrompt =
|
|
233
|
-
isPageSSRed =
|
|
275
|
+
export var blockCardNodeView = function blockCardNodeView(_ref4) {
|
|
276
|
+
var pmPluginFactoryParams = _ref4.pmPluginFactoryParams,
|
|
277
|
+
actionOptions = _ref4.actionOptions,
|
|
278
|
+
pluginInjectionApi = _ref4.pluginInjectionApi,
|
|
279
|
+
onClickCallback = _ref4.onClickCallback,
|
|
280
|
+
allowDatasource = _ref4.allowDatasource,
|
|
281
|
+
inlineCardViewProducer = _ref4.inlineCardViewProducer,
|
|
282
|
+
CompetitorPrompt = _ref4.CompetitorPrompt,
|
|
283
|
+
isPageSSRed = _ref4.isPageSSRed,
|
|
284
|
+
provider = _ref4.provider;
|
|
234
285
|
return function (node, view, getPos, decorations) {
|
|
235
286
|
var portalProviderAPI = pmPluginFactoryParams.portalProviderAPI,
|
|
236
287
|
eventDispatcher = pmPluginFactoryParams.eventDispatcher;
|
|
@@ -239,7 +290,8 @@ export var blockCardNodeView = function blockCardNodeView(_ref3) {
|
|
|
239
290
|
pluginInjectionApi: pluginInjectionApi,
|
|
240
291
|
onClickCallback: onClickCallback,
|
|
241
292
|
CompetitorPrompt: CompetitorPrompt,
|
|
242
|
-
isPageSSRed: isPageSSRed
|
|
293
|
+
isPageSSRed: isPageSSRed,
|
|
294
|
+
provider: provider
|
|
243
295
|
};
|
|
244
296
|
var isDatasource = isDatasourceNode(node);
|
|
245
297
|
if (isDatasource) {
|