@atlaskit/editor-common 93.1.6 → 93.2.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.
- package/CHANGELOG.md +24 -0
- package/afm-jira/tsconfig.json +3 -0
- package/afm-post-office/tsconfig.json +3 -0
- package/dist/cjs/analytics/types/enums.js +1 -0
- package/dist/cjs/extensibility/ExtensionComponent.js +263 -10
- package/dist/cjs/monitoring/error.js +1 -1
- package/dist/cjs/ui/DropList/index.js +1 -1
- package/dist/cjs/utils/imageLoader.js +91 -2
- package/dist/es2019/analytics/types/enums.js +1 -0
- package/dist/es2019/extensibility/ExtensionComponent.js +231 -3
- package/dist/es2019/monitoring/error.js +1 -1
- package/dist/es2019/ui/DropList/index.js +1 -1
- package/dist/es2019/utils/imageLoader.js +73 -1
- package/dist/esm/analytics/types/enums.js +1 -0
- package/dist/esm/extensibility/ExtensionComponent.js +266 -9
- package/dist/esm/monitoring/error.js +1 -1
- package/dist/esm/ui/DropList/index.js +1 -1
- package/dist/esm/utils/imageLoader.js +90 -1
- package/dist/types/analytics/types/enums.d.ts +1 -0
- package/dist/types/analytics/types/general-events.d.ts +7 -1
- package/dist/types/extensibility/ExtensionComponent.d.ts +7 -1
- package/dist/types/utils/imageLoader.d.ts +3 -1
- package/dist/types-ts4.5/analytics/types/enums.d.ts +1 -0
- package/dist/types-ts4.5/analytics/types/general-events.d.ts +7 -1
- package/dist/types-ts4.5/extensibility/ExtensionComponent.d.ts +7 -1
- package/dist/types-ts4.5/utils/imageLoader.d.ts +3 -1
- package/package.json +9 -3
|
@@ -1,13 +1,21 @@
|
|
|
1
|
+
import _extends from "@babel/runtime/helpers/extends";
|
|
1
2
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
2
|
-
|
|
3
|
+
/* eslint-disable @repo/internal/react/no-class-components */
|
|
4
|
+
import React, { Component, useEffect, useLayoutEffect, useRef, useState } from 'react';
|
|
3
5
|
import memoizeOne from 'memoize-one';
|
|
4
6
|
import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
|
|
7
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
5
8
|
import { getExtensionModuleNodePrivateProps, getNodeRenderer } from '../extensions';
|
|
6
9
|
import { getExtensionRenderer } from '../utils';
|
|
7
10
|
import Extension from './Extension/Extension';
|
|
8
11
|
import InlineExtension from './Extension/InlineExtension';
|
|
9
12
|
import MultiBodiedExtension from './MultiBodiedExtension';
|
|
10
|
-
|
|
13
|
+
|
|
14
|
+
/* temporary type until FG cleaned up */
|
|
15
|
+
|
|
16
|
+
/* temporary type until FG cleaned up */
|
|
17
|
+
|
|
18
|
+
export class ExtensionComponentOld extends Component {
|
|
11
19
|
constructor(...args) {
|
|
12
20
|
super(...args);
|
|
13
21
|
_defineProperty(this, "privatePropsParsed", false);
|
|
@@ -228,4 +236,224 @@ export class ExtensionComponent extends Component {
|
|
|
228
236
|
}
|
|
229
237
|
return null;
|
|
230
238
|
}
|
|
231
|
-
}
|
|
239
|
+
}
|
|
240
|
+
export const ExtensionComponentNew = props => {
|
|
241
|
+
const {
|
|
242
|
+
extensionProvider: extensionProviderResolver,
|
|
243
|
+
...restProps
|
|
244
|
+
} = props;
|
|
245
|
+
const [extensionProvider, setExtensionProvider] = useState(undefined);
|
|
246
|
+
const mountedRef = useRef(true);
|
|
247
|
+
useLayoutEffect(() => {
|
|
248
|
+
mountedRef.current = true;
|
|
249
|
+
return () => {
|
|
250
|
+
mountedRef.current = false;
|
|
251
|
+
};
|
|
252
|
+
}, []);
|
|
253
|
+
useEffect(() => {
|
|
254
|
+
extensionProviderResolver === null || extensionProviderResolver === void 0 ? void 0 : extensionProviderResolver.then(provider => {
|
|
255
|
+
if (mountedRef.current) {
|
|
256
|
+
setExtensionProvider(provider);
|
|
257
|
+
}
|
|
258
|
+
});
|
|
259
|
+
}, [extensionProviderResolver]);
|
|
260
|
+
return /*#__PURE__*/React.createElement(ExtensionComponentInner, _extends({}, restProps, {
|
|
261
|
+
extensionProvider: extensionProvider
|
|
262
|
+
}));
|
|
263
|
+
};
|
|
264
|
+
class ExtensionComponentInner extends Component {
|
|
265
|
+
constructor(...args) {
|
|
266
|
+
super(...args);
|
|
267
|
+
_defineProperty(this, "privatePropsParsed", false);
|
|
268
|
+
_defineProperty(this, "state", {});
|
|
269
|
+
// memoized to avoid rerender on extension state changes
|
|
270
|
+
_defineProperty(this, "getNodeRenderer", memoizeOne(getNodeRenderer));
|
|
271
|
+
_defineProperty(this, "getExtensionModuleNodePrivateProps", memoizeOne(getExtensionModuleNodePrivateProps));
|
|
272
|
+
_defineProperty(this, "setIsNodeHovered", isHovered => {
|
|
273
|
+
this.setState({
|
|
274
|
+
isNodeHovered: isHovered
|
|
275
|
+
});
|
|
276
|
+
});
|
|
277
|
+
/**
|
|
278
|
+
* Parses any private nodes once an extension provider is available.
|
|
279
|
+
*
|
|
280
|
+
* We do this separately from resolving a node renderer component since the
|
|
281
|
+
* private props come from extension provider, rather than an extension
|
|
282
|
+
* handler which only handles `render`/component concerns.
|
|
283
|
+
*/
|
|
284
|
+
_defineProperty(this, "parsePrivateNodePropsIfNeeded", async () => {
|
|
285
|
+
if (this.privatePropsParsed || !this.props.extensionProvider) {
|
|
286
|
+
return;
|
|
287
|
+
}
|
|
288
|
+
this.privatePropsParsed = true;
|
|
289
|
+
const {
|
|
290
|
+
extensionType,
|
|
291
|
+
extensionKey
|
|
292
|
+
} = this.props.node.attrs;
|
|
293
|
+
|
|
294
|
+
/**
|
|
295
|
+
* getExtensionModuleNodePrivateProps can throw if there are issues in the
|
|
296
|
+
* manifest
|
|
297
|
+
*/
|
|
298
|
+
try {
|
|
299
|
+
const privateProps = await this.getExtensionModuleNodePrivateProps(this.props.extensionProvider, extensionType, extensionKey);
|
|
300
|
+
this.setState({
|
|
301
|
+
_privateProps: privateProps
|
|
302
|
+
});
|
|
303
|
+
} catch (e) {
|
|
304
|
+
// eslint-disable-next-line no-console
|
|
305
|
+
console.error('Provided extension handler has thrown an error\n', e);
|
|
306
|
+
/** We don't want this error to block renderer */
|
|
307
|
+
/** We keep rendering the default content */
|
|
308
|
+
}
|
|
309
|
+
});
|
|
310
|
+
_defineProperty(this, "handleExtension", (pmNode, actions) => {
|
|
311
|
+
var _pmNode$marks2, _pmNode$marks2$find, _pmNode$marks2$find$a;
|
|
312
|
+
const {
|
|
313
|
+
extensionHandlers,
|
|
314
|
+
editorView
|
|
315
|
+
} = this.props;
|
|
316
|
+
const {
|
|
317
|
+
extensionType,
|
|
318
|
+
extensionKey,
|
|
319
|
+
parameters,
|
|
320
|
+
text
|
|
321
|
+
} = pmNode.attrs;
|
|
322
|
+
const isBodiedExtension = pmNode.type.name === 'bodiedExtension';
|
|
323
|
+
if (isBodiedExtension) {
|
|
324
|
+
return;
|
|
325
|
+
}
|
|
326
|
+
const fragmentLocalId = pmNode === null || pmNode === void 0 ? void 0 : (_pmNode$marks2 = pmNode.marks) === null || _pmNode$marks2 === void 0 ? void 0 : (_pmNode$marks2$find = _pmNode$marks2.find(m => m.type.name === 'fragment')) === null || _pmNode$marks2$find === void 0 ? void 0 : (_pmNode$marks2$find$a = _pmNode$marks2$find.attrs) === null || _pmNode$marks2$find$a === void 0 ? void 0 : _pmNode$marks2$find$a.localId;
|
|
327
|
+
const node = {
|
|
328
|
+
type: pmNode.type.name,
|
|
329
|
+
extensionType,
|
|
330
|
+
extensionKey,
|
|
331
|
+
parameters,
|
|
332
|
+
content: text,
|
|
333
|
+
localId: pmNode.attrs.localId,
|
|
334
|
+
fragmentLocalId
|
|
335
|
+
};
|
|
336
|
+
let result;
|
|
337
|
+
if (extensionHandlers && extensionHandlers[extensionType]) {
|
|
338
|
+
const render = getExtensionRenderer(extensionHandlers[extensionType]);
|
|
339
|
+
result = render(node, editorView.state.doc, actions);
|
|
340
|
+
}
|
|
341
|
+
if (!result) {
|
|
342
|
+
const extensionHandlerFromProvider = this.props.extensionProvider && this.getNodeRenderer(this.props.extensionProvider, extensionType, extensionKey);
|
|
343
|
+
if (extensionHandlerFromProvider) {
|
|
344
|
+
const NodeRenderer = extensionHandlerFromProvider;
|
|
345
|
+
if (node.type === 'multiBodiedExtension') {
|
|
346
|
+
return /*#__PURE__*/React.createElement(NodeRenderer, {
|
|
347
|
+
node: node,
|
|
348
|
+
references: this.props.references,
|
|
349
|
+
actions: actions
|
|
350
|
+
});
|
|
351
|
+
} else {
|
|
352
|
+
return /*#__PURE__*/React.createElement(NodeRenderer, {
|
|
353
|
+
node: node,
|
|
354
|
+
references: this.props.references
|
|
355
|
+
});
|
|
356
|
+
}
|
|
357
|
+
}
|
|
358
|
+
}
|
|
359
|
+
return result;
|
|
360
|
+
});
|
|
361
|
+
}
|
|
362
|
+
componentDidUpdate() {
|
|
363
|
+
this.parsePrivateNodePropsIfNeeded();
|
|
364
|
+
}
|
|
365
|
+
render() {
|
|
366
|
+
var _this$state$_privateP2;
|
|
367
|
+
const {
|
|
368
|
+
node,
|
|
369
|
+
handleContentDOMRef,
|
|
370
|
+
editorView,
|
|
371
|
+
references,
|
|
372
|
+
editorAppearance,
|
|
373
|
+
pluginInjectionApi,
|
|
374
|
+
getPos,
|
|
375
|
+
eventDispatcher,
|
|
376
|
+
macroInteractionDesignFeatureFlags,
|
|
377
|
+
extensionProvider
|
|
378
|
+
} = this.props;
|
|
379
|
+
const {
|
|
380
|
+
selection
|
|
381
|
+
} = editorView.state;
|
|
382
|
+
const selectedNode = selection instanceof NodeSelection && selection.node;
|
|
383
|
+
const position = typeof getPos === 'function' && getPos();
|
|
384
|
+
const resolvedPosition = position && editorView.state.doc.resolve(position);
|
|
385
|
+
const isNodeNested = !!(resolvedPosition && resolvedPosition.depth > 0);
|
|
386
|
+
if (node.type.name === 'multiBodiedExtension') {
|
|
387
|
+
return /*#__PURE__*/React.createElement(MultiBodiedExtension, {
|
|
388
|
+
node: node,
|
|
389
|
+
editorView: editorView,
|
|
390
|
+
getPos: getPos,
|
|
391
|
+
handleContentDOMRef: handleContentDOMRef,
|
|
392
|
+
tryExtensionHandler: this.tryExtensionHandler.bind(this),
|
|
393
|
+
eventDispatcher: eventDispatcher,
|
|
394
|
+
pluginInjectionApi: pluginInjectionApi,
|
|
395
|
+
editorAppearance: editorAppearance,
|
|
396
|
+
macroInteractionDesignFeatureFlags: macroInteractionDesignFeatureFlags,
|
|
397
|
+
isNodeSelected: selectedNode === node,
|
|
398
|
+
isNodeNested: isNodeNested,
|
|
399
|
+
isNodeHovered: this.state.isNodeHovered,
|
|
400
|
+
setIsNodeHovered: this.setIsNodeHovered
|
|
401
|
+
});
|
|
402
|
+
}
|
|
403
|
+
const extensionHandlerResult = this.tryExtensionHandler(undefined);
|
|
404
|
+
switch (node.type.name) {
|
|
405
|
+
case 'extension':
|
|
406
|
+
case 'bodiedExtension':
|
|
407
|
+
return /*#__PURE__*/React.createElement(Extension, {
|
|
408
|
+
node: node,
|
|
409
|
+
getPos: this.props.getPos,
|
|
410
|
+
references: references,
|
|
411
|
+
extensionProvider: extensionProvider,
|
|
412
|
+
handleContentDOMRef: handleContentDOMRef,
|
|
413
|
+
view: editorView,
|
|
414
|
+
editorAppearance: editorAppearance,
|
|
415
|
+
hideFrame: (_this$state$_privateP2 = this.state._privateProps) === null || _this$state$_privateP2 === void 0 ? void 0 : _this$state$_privateP2.__hideFrame,
|
|
416
|
+
pluginInjectionApi: pluginInjectionApi,
|
|
417
|
+
macroInteractionDesignFeatureFlags: macroInteractionDesignFeatureFlags,
|
|
418
|
+
isNodeSelected: selectedNode === node,
|
|
419
|
+
isNodeHovered: this.state.isNodeHovered,
|
|
420
|
+
isNodeNested: isNodeNested,
|
|
421
|
+
setIsNodeHovered: this.setIsNodeHovered
|
|
422
|
+
}, extensionHandlerResult);
|
|
423
|
+
case 'inlineExtension':
|
|
424
|
+
return /*#__PURE__*/React.createElement(InlineExtension, {
|
|
425
|
+
node: node,
|
|
426
|
+
macroInteractionDesignFeatureFlags: macroInteractionDesignFeatureFlags,
|
|
427
|
+
isNodeSelected: selectedNode === node,
|
|
428
|
+
pluginInjectionApi: pluginInjectionApi,
|
|
429
|
+
isNodeHovered: this.state.isNodeHovered,
|
|
430
|
+
setIsNodeHovered: this.setIsNodeHovered
|
|
431
|
+
}, extensionHandlerResult);
|
|
432
|
+
default:
|
|
433
|
+
return null;
|
|
434
|
+
}
|
|
435
|
+
}
|
|
436
|
+
tryExtensionHandler(actions) {
|
|
437
|
+
const {
|
|
438
|
+
node
|
|
439
|
+
} = this.props;
|
|
440
|
+
try {
|
|
441
|
+
const extensionContent = this.handleExtension(node, actions);
|
|
442
|
+
if (extensionContent && /*#__PURE__*/React.isValidElement(extensionContent)) {
|
|
443
|
+
return extensionContent;
|
|
444
|
+
}
|
|
445
|
+
} catch (e) {
|
|
446
|
+
// eslint-disable-next-line no-console
|
|
447
|
+
console.error('Provided extension handler has thrown an error\n', e);
|
|
448
|
+
/** We don't want this error to block renderer */
|
|
449
|
+
/** We keep rendering the default content */
|
|
450
|
+
}
|
|
451
|
+
return null;
|
|
452
|
+
}
|
|
453
|
+
}
|
|
454
|
+
export const ExtensionComponent = props => {
|
|
455
|
+
if (fg('platform_editor_react18_extension_component')) {
|
|
456
|
+
return /*#__PURE__*/React.createElement(ExtensionComponentNew, props);
|
|
457
|
+
}
|
|
458
|
+
return /*#__PURE__*/React.createElement(ExtensionComponentOld, props);
|
|
459
|
+
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { isFedRamp } from './environment';
|
|
2
2
|
const SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
|
|
3
3
|
const packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
|
|
4
|
-
const packageVersion = "93.1
|
|
4
|
+
const packageVersion = "93.2.1";
|
|
5
5
|
const sanitiseSentryEvents = (data, _hint) => {
|
|
6
6
|
// Remove URL as it has UGC
|
|
7
7
|
// TODO: Sanitise the URL instead of just removing it
|
|
@@ -13,7 +13,7 @@ import withAnalyticsContext from '@atlaskit/analytics-next/withAnalyticsContext'
|
|
|
13
13
|
import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
|
|
14
14
|
import Layer from '../Layer';
|
|
15
15
|
const packageName = "@atlaskit/editor-common";
|
|
16
|
-
const packageVersion = "93.1
|
|
16
|
+
const packageVersion = "93.2.1";
|
|
17
17
|
const halfFocusRing = 1;
|
|
18
18
|
const dropOffset = '0, 8';
|
|
19
19
|
class DropList extends Component {
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/extends";
|
|
2
2
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
3
3
|
import React, { Component } from 'react';
|
|
4
|
-
|
|
4
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
5
|
+
export const withImageLoaderOld = Wrapped => class WithImageLoader extends Component {
|
|
5
6
|
constructor(...args) {
|
|
6
7
|
super(...args);
|
|
7
8
|
_defineProperty(this, "state", {
|
|
@@ -65,4 +66,75 @@ export const withImageLoader = Wrapped => class WithImageLoader extends Componen
|
|
|
65
66
|
imageStatus: imageStatus
|
|
66
67
|
}));
|
|
67
68
|
}
|
|
69
|
+
};
|
|
70
|
+
const withImageLoaderNew = Wrapped => class WithImageLoader extends Component {
|
|
71
|
+
constructor(...args) {
|
|
72
|
+
super(...args);
|
|
73
|
+
_defineProperty(this, "state", {
|
|
74
|
+
imageStatus: 'loading'
|
|
75
|
+
});
|
|
76
|
+
_defineProperty(this, "onLoad", () => {
|
|
77
|
+
this.setState({
|
|
78
|
+
imageStatus: 'complete'
|
|
79
|
+
});
|
|
80
|
+
const {
|
|
81
|
+
onExternalImageLoaded
|
|
82
|
+
} = this.props;
|
|
83
|
+
if (onExternalImageLoaded && this.img) {
|
|
84
|
+
onExternalImageLoaded({
|
|
85
|
+
width: this.img.naturalWidth,
|
|
86
|
+
height: this.img.naturalHeight
|
|
87
|
+
});
|
|
88
|
+
}
|
|
89
|
+
});
|
|
90
|
+
_defineProperty(this, "onError", () => {
|
|
91
|
+
this.setState({
|
|
92
|
+
imageStatus: 'error'
|
|
93
|
+
});
|
|
94
|
+
});
|
|
95
|
+
}
|
|
96
|
+
componentDidMount() {
|
|
97
|
+
this.fetchImage(this.props);
|
|
98
|
+
}
|
|
99
|
+
componentDidUpdate(newProps) {
|
|
100
|
+
if (newProps.url !== this.props.url) {
|
|
101
|
+
this.setState({
|
|
102
|
+
imageStatus: 'loading'
|
|
103
|
+
});
|
|
104
|
+
this.fetchImage(newProps);
|
|
105
|
+
}
|
|
106
|
+
}
|
|
107
|
+
componentWillUnmount() {
|
|
108
|
+
if (this.img) {
|
|
109
|
+
this.img.removeEventListener('load', this.onLoad);
|
|
110
|
+
this.img.removeEventListener('error', this.onError);
|
|
111
|
+
this.img = null;
|
|
112
|
+
}
|
|
113
|
+
}
|
|
114
|
+
fetchImage({
|
|
115
|
+
url
|
|
116
|
+
}) {
|
|
117
|
+
if (url) {
|
|
118
|
+
if (!this.img) {
|
|
119
|
+
this.img = new Image();
|
|
120
|
+
this.img.addEventListener('load', this.onLoad);
|
|
121
|
+
this.img.addEventListener('error', this.onError);
|
|
122
|
+
}
|
|
123
|
+
this.img.src = url;
|
|
124
|
+
}
|
|
125
|
+
}
|
|
126
|
+
render() {
|
|
127
|
+
const {
|
|
128
|
+
imageStatus
|
|
129
|
+
} = this.state;
|
|
130
|
+
return /*#__PURE__*/React.createElement(Wrapped, _extends({}, this.props, {
|
|
131
|
+
imageStatus: imageStatus
|
|
132
|
+
}));
|
|
133
|
+
}
|
|
134
|
+
};
|
|
135
|
+
export const withImageLoader = Wrapped => {
|
|
136
|
+
if (fg('platform_editor_react18_phase2')) {
|
|
137
|
+
return withImageLoaderNew(Wrapped);
|
|
138
|
+
}
|
|
139
|
+
return withImageLoaderOld(Wrapped);
|
|
68
140
|
};
|
|
@@ -275,6 +275,7 @@ export var ACTION_SUBJECT_ID = /*#__PURE__*/function (ACTION_SUBJECT_ID) {
|
|
|
275
275
|
ACTION_SUBJECT_ID["CODE_BLOCK"] = "codeBlock";
|
|
276
276
|
ACTION_SUBJECT_ID["CODEBLOCK_COPY"] = "codeBlockCopy";
|
|
277
277
|
ACTION_SUBJECT_ID["CODEBLOCK_WRAP"] = "codeBlockWrap";
|
|
278
|
+
ACTION_SUBJECT_ID["COPY_LINK_TO_ANCHOR"] = "copyLinkToAnchor";
|
|
278
279
|
ACTION_SUBJECT_ID["CREATE_INLINE_COMMENT_FROM_HIGHLIGHT_ACTIONS_MENU"] = "createInlineCommentFromHighlightActionsMenu";
|
|
279
280
|
ACTION_SUBJECT_ID["DATE"] = "date";
|
|
280
281
|
ACTION_SUBJECT_ID["DATE_DAY"] = "day";
|
|
@@ -1,3 +1,6 @@
|
|
|
1
|
+
import _extends from "@babel/runtime/helpers/extends";
|
|
2
|
+
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
3
|
+
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
|
1
4
|
import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
|
|
2
5
|
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
|
|
3
6
|
import _createClass from "@babel/runtime/helpers/createClass";
|
|
@@ -6,23 +9,31 @@ import _inherits from "@babel/runtime/helpers/inherits";
|
|
|
6
9
|
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
|
|
7
10
|
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
|
|
8
11
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
12
|
+
var _excluded = ["extensionProvider"];
|
|
9
13
|
import _regeneratorRuntime from "@babel/runtime/regenerator";
|
|
10
14
|
function _createSuper(t) { var r = _isNativeReflectConstruct(); return function () { var e, o = _getPrototypeOf(t); if (r) { var s = _getPrototypeOf(this).constructor; e = Reflect.construct(o, arguments, s); } else e = o.apply(this, arguments); return _possibleConstructorReturn(this, e); }; }
|
|
11
15
|
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
|
|
12
|
-
|
|
16
|
+
/* eslint-disable @repo/internal/react/no-class-components */
|
|
17
|
+
import React, { Component, useEffect, useLayoutEffect, useRef, useState } from 'react';
|
|
13
18
|
import memoizeOne from 'memoize-one';
|
|
14
19
|
import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
|
|
20
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
15
21
|
import { getExtensionModuleNodePrivateProps, getNodeRenderer } from '../extensions';
|
|
16
22
|
import { getExtensionRenderer } from '../utils';
|
|
17
23
|
import Extension from './Extension/Extension';
|
|
18
24
|
import InlineExtension from './Extension/InlineExtension';
|
|
19
25
|
import MultiBodiedExtension from './MultiBodiedExtension';
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
26
|
+
|
|
27
|
+
/* temporary type until FG cleaned up */
|
|
28
|
+
|
|
29
|
+
/* temporary type until FG cleaned up */
|
|
30
|
+
|
|
31
|
+
export var ExtensionComponentOld = /*#__PURE__*/function (_Component) {
|
|
32
|
+
_inherits(ExtensionComponentOld, _Component);
|
|
33
|
+
var _super = _createSuper(ExtensionComponentOld);
|
|
34
|
+
function ExtensionComponentOld() {
|
|
24
35
|
var _this;
|
|
25
|
-
_classCallCheck(this,
|
|
36
|
+
_classCallCheck(this, ExtensionComponentOld);
|
|
26
37
|
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
27
38
|
args[_key] = arguments[_key];
|
|
28
39
|
}
|
|
@@ -146,7 +157,7 @@ export var ExtensionComponent = /*#__PURE__*/function (_Component) {
|
|
|
146
157
|
});
|
|
147
158
|
return _this;
|
|
148
159
|
}
|
|
149
|
-
_createClass(
|
|
160
|
+
_createClass(ExtensionComponentOld, [{
|
|
150
161
|
key: "UNSAFE_componentWillMount",
|
|
151
162
|
value: function UNSAFE_componentWillMount() {
|
|
152
163
|
this.mounted = true;
|
|
@@ -264,5 +275,251 @@ export var ExtensionComponent = /*#__PURE__*/function (_Component) {
|
|
|
264
275
|
return null;
|
|
265
276
|
}
|
|
266
277
|
}]);
|
|
267
|
-
return
|
|
268
|
-
}(Component);
|
|
278
|
+
return ExtensionComponentOld;
|
|
279
|
+
}(Component);
|
|
280
|
+
export var ExtensionComponentNew = function ExtensionComponentNew(props) {
|
|
281
|
+
var extensionProviderResolver = props.extensionProvider,
|
|
282
|
+
restProps = _objectWithoutProperties(props, _excluded);
|
|
283
|
+
var _useState = useState(undefined),
|
|
284
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
285
|
+
extensionProvider = _useState2[0],
|
|
286
|
+
setExtensionProvider = _useState2[1];
|
|
287
|
+
var mountedRef = useRef(true);
|
|
288
|
+
useLayoutEffect(function () {
|
|
289
|
+
mountedRef.current = true;
|
|
290
|
+
return function () {
|
|
291
|
+
mountedRef.current = false;
|
|
292
|
+
};
|
|
293
|
+
}, []);
|
|
294
|
+
useEffect(function () {
|
|
295
|
+
extensionProviderResolver === null || extensionProviderResolver === void 0 || extensionProviderResolver.then(function (provider) {
|
|
296
|
+
if (mountedRef.current) {
|
|
297
|
+
setExtensionProvider(provider);
|
|
298
|
+
}
|
|
299
|
+
});
|
|
300
|
+
}, [extensionProviderResolver]);
|
|
301
|
+
return /*#__PURE__*/React.createElement(ExtensionComponentInner, _extends({}, restProps, {
|
|
302
|
+
extensionProvider: extensionProvider
|
|
303
|
+
}));
|
|
304
|
+
};
|
|
305
|
+
var ExtensionComponentInner = /*#__PURE__*/function (_Component2) {
|
|
306
|
+
_inherits(ExtensionComponentInner, _Component2);
|
|
307
|
+
var _super2 = _createSuper(ExtensionComponentInner);
|
|
308
|
+
function ExtensionComponentInner() {
|
|
309
|
+
var _this2;
|
|
310
|
+
_classCallCheck(this, ExtensionComponentInner);
|
|
311
|
+
for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
|
|
312
|
+
args[_key2] = arguments[_key2];
|
|
313
|
+
}
|
|
314
|
+
_this2 = _super2.call.apply(_super2, [this].concat(args));
|
|
315
|
+
_defineProperty(_assertThisInitialized(_this2), "privatePropsParsed", false);
|
|
316
|
+
_defineProperty(_assertThisInitialized(_this2), "state", {});
|
|
317
|
+
// memoized to avoid rerender on extension state changes
|
|
318
|
+
_defineProperty(_assertThisInitialized(_this2), "getNodeRenderer", memoizeOne(getNodeRenderer));
|
|
319
|
+
_defineProperty(_assertThisInitialized(_this2), "getExtensionModuleNodePrivateProps", memoizeOne(getExtensionModuleNodePrivateProps));
|
|
320
|
+
_defineProperty(_assertThisInitialized(_this2), "setIsNodeHovered", function (isHovered) {
|
|
321
|
+
_this2.setState({
|
|
322
|
+
isNodeHovered: isHovered
|
|
323
|
+
});
|
|
324
|
+
});
|
|
325
|
+
/**
|
|
326
|
+
* Parses any private nodes once an extension provider is available.
|
|
327
|
+
*
|
|
328
|
+
* We do this separately from resolving a node renderer component since the
|
|
329
|
+
* private props come from extension provider, rather than an extension
|
|
330
|
+
* handler which only handles `render`/component concerns.
|
|
331
|
+
*/
|
|
332
|
+
_defineProperty(_assertThisInitialized(_this2), "parsePrivateNodePropsIfNeeded", /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
|
|
333
|
+
var _this2$props$node$att, extensionType, extensionKey, privateProps;
|
|
334
|
+
return _regeneratorRuntime.wrap(function _callee2$(_context2) {
|
|
335
|
+
while (1) switch (_context2.prev = _context2.next) {
|
|
336
|
+
case 0:
|
|
337
|
+
if (!(_this2.privatePropsParsed || !_this2.props.extensionProvider)) {
|
|
338
|
+
_context2.next = 2;
|
|
339
|
+
break;
|
|
340
|
+
}
|
|
341
|
+
return _context2.abrupt("return");
|
|
342
|
+
case 2:
|
|
343
|
+
_this2.privatePropsParsed = true;
|
|
344
|
+
_this2$props$node$att = _this2.props.node.attrs, extensionType = _this2$props$node$att.extensionType, extensionKey = _this2$props$node$att.extensionKey;
|
|
345
|
+
/**
|
|
346
|
+
* getExtensionModuleNodePrivateProps can throw if there are issues in the
|
|
347
|
+
* manifest
|
|
348
|
+
*/
|
|
349
|
+
_context2.prev = 4;
|
|
350
|
+
_context2.next = 7;
|
|
351
|
+
return _this2.getExtensionModuleNodePrivateProps(_this2.props.extensionProvider, extensionType, extensionKey);
|
|
352
|
+
case 7:
|
|
353
|
+
privateProps = _context2.sent;
|
|
354
|
+
_this2.setState({
|
|
355
|
+
_privateProps: privateProps
|
|
356
|
+
});
|
|
357
|
+
_context2.next = 14;
|
|
358
|
+
break;
|
|
359
|
+
case 11:
|
|
360
|
+
_context2.prev = 11;
|
|
361
|
+
_context2.t0 = _context2["catch"](4);
|
|
362
|
+
// eslint-disable-next-line no-console
|
|
363
|
+
console.error('Provided extension handler has thrown an error\n', _context2.t0);
|
|
364
|
+
/** We don't want this error to block renderer */
|
|
365
|
+
/** We keep rendering the default content */
|
|
366
|
+
case 14:
|
|
367
|
+
case "end":
|
|
368
|
+
return _context2.stop();
|
|
369
|
+
}
|
|
370
|
+
}, _callee2, null, [[4, 11]]);
|
|
371
|
+
})));
|
|
372
|
+
_defineProperty(_assertThisInitialized(_this2), "handleExtension", function (pmNode, actions) {
|
|
373
|
+
var _pmNode$marks2;
|
|
374
|
+
var _this2$props = _this2.props,
|
|
375
|
+
extensionHandlers = _this2$props.extensionHandlers,
|
|
376
|
+
editorView = _this2$props.editorView;
|
|
377
|
+
var _pmNode$attrs2 = pmNode.attrs,
|
|
378
|
+
extensionType = _pmNode$attrs2.extensionType,
|
|
379
|
+
extensionKey = _pmNode$attrs2.extensionKey,
|
|
380
|
+
parameters = _pmNode$attrs2.parameters,
|
|
381
|
+
text = _pmNode$attrs2.text;
|
|
382
|
+
var isBodiedExtension = pmNode.type.name === 'bodiedExtension';
|
|
383
|
+
if (isBodiedExtension) {
|
|
384
|
+
return;
|
|
385
|
+
}
|
|
386
|
+
var fragmentLocalId = pmNode === null || pmNode === void 0 || (_pmNode$marks2 = pmNode.marks) === null || _pmNode$marks2 === void 0 || (_pmNode$marks2 = _pmNode$marks2.find(function (m) {
|
|
387
|
+
return m.type.name === 'fragment';
|
|
388
|
+
})) === null || _pmNode$marks2 === void 0 || (_pmNode$marks2 = _pmNode$marks2.attrs) === null || _pmNode$marks2 === void 0 ? void 0 : _pmNode$marks2.localId;
|
|
389
|
+
var node = {
|
|
390
|
+
type: pmNode.type.name,
|
|
391
|
+
extensionType: extensionType,
|
|
392
|
+
extensionKey: extensionKey,
|
|
393
|
+
parameters: parameters,
|
|
394
|
+
content: text,
|
|
395
|
+
localId: pmNode.attrs.localId,
|
|
396
|
+
fragmentLocalId: fragmentLocalId
|
|
397
|
+
};
|
|
398
|
+
var result;
|
|
399
|
+
if (extensionHandlers && extensionHandlers[extensionType]) {
|
|
400
|
+
var render = getExtensionRenderer(extensionHandlers[extensionType]);
|
|
401
|
+
result = render(node, editorView.state.doc, actions);
|
|
402
|
+
}
|
|
403
|
+
if (!result) {
|
|
404
|
+
var extensionHandlerFromProvider = _this2.props.extensionProvider && _this2.getNodeRenderer(_this2.props.extensionProvider, extensionType, extensionKey);
|
|
405
|
+
if (extensionHandlerFromProvider) {
|
|
406
|
+
var NodeRenderer = extensionHandlerFromProvider;
|
|
407
|
+
if (node.type === 'multiBodiedExtension') {
|
|
408
|
+
return /*#__PURE__*/React.createElement(NodeRenderer, {
|
|
409
|
+
node: node,
|
|
410
|
+
references: _this2.props.references,
|
|
411
|
+
actions: actions
|
|
412
|
+
});
|
|
413
|
+
} else {
|
|
414
|
+
return /*#__PURE__*/React.createElement(NodeRenderer, {
|
|
415
|
+
node: node,
|
|
416
|
+
references: _this2.props.references
|
|
417
|
+
});
|
|
418
|
+
}
|
|
419
|
+
}
|
|
420
|
+
}
|
|
421
|
+
return result;
|
|
422
|
+
});
|
|
423
|
+
return _this2;
|
|
424
|
+
}
|
|
425
|
+
_createClass(ExtensionComponentInner, [{
|
|
426
|
+
key: "componentDidUpdate",
|
|
427
|
+
value: function componentDidUpdate() {
|
|
428
|
+
this.parsePrivateNodePropsIfNeeded();
|
|
429
|
+
}
|
|
430
|
+
}, {
|
|
431
|
+
key: "render",
|
|
432
|
+
value: function render() {
|
|
433
|
+
var _this$state$_privateP2;
|
|
434
|
+
var _this$props3 = this.props,
|
|
435
|
+
node = _this$props3.node,
|
|
436
|
+
handleContentDOMRef = _this$props3.handleContentDOMRef,
|
|
437
|
+
editorView = _this$props3.editorView,
|
|
438
|
+
references = _this$props3.references,
|
|
439
|
+
editorAppearance = _this$props3.editorAppearance,
|
|
440
|
+
pluginInjectionApi = _this$props3.pluginInjectionApi,
|
|
441
|
+
getPos = _this$props3.getPos,
|
|
442
|
+
eventDispatcher = _this$props3.eventDispatcher,
|
|
443
|
+
macroInteractionDesignFeatureFlags = _this$props3.macroInteractionDesignFeatureFlags,
|
|
444
|
+
extensionProvider = _this$props3.extensionProvider;
|
|
445
|
+
var selection = editorView.state.selection;
|
|
446
|
+
var selectedNode = selection instanceof NodeSelection && selection.node;
|
|
447
|
+
var position = typeof getPos === 'function' && getPos();
|
|
448
|
+
var resolvedPosition = position && editorView.state.doc.resolve(position);
|
|
449
|
+
var isNodeNested = !!(resolvedPosition && resolvedPosition.depth > 0);
|
|
450
|
+
if (node.type.name === 'multiBodiedExtension') {
|
|
451
|
+
return /*#__PURE__*/React.createElement(MultiBodiedExtension, {
|
|
452
|
+
node: node,
|
|
453
|
+
editorView: editorView,
|
|
454
|
+
getPos: getPos,
|
|
455
|
+
handleContentDOMRef: handleContentDOMRef,
|
|
456
|
+
tryExtensionHandler: this.tryExtensionHandler.bind(this),
|
|
457
|
+
eventDispatcher: eventDispatcher,
|
|
458
|
+
pluginInjectionApi: pluginInjectionApi,
|
|
459
|
+
editorAppearance: editorAppearance,
|
|
460
|
+
macroInteractionDesignFeatureFlags: macroInteractionDesignFeatureFlags,
|
|
461
|
+
isNodeSelected: selectedNode === node,
|
|
462
|
+
isNodeNested: isNodeNested,
|
|
463
|
+
isNodeHovered: this.state.isNodeHovered,
|
|
464
|
+
setIsNodeHovered: this.setIsNodeHovered
|
|
465
|
+
});
|
|
466
|
+
}
|
|
467
|
+
var extensionHandlerResult = this.tryExtensionHandler(undefined);
|
|
468
|
+
switch (node.type.name) {
|
|
469
|
+
case 'extension':
|
|
470
|
+
case 'bodiedExtension':
|
|
471
|
+
return /*#__PURE__*/React.createElement(Extension, {
|
|
472
|
+
node: node,
|
|
473
|
+
getPos: this.props.getPos,
|
|
474
|
+
references: references,
|
|
475
|
+
extensionProvider: extensionProvider,
|
|
476
|
+
handleContentDOMRef: handleContentDOMRef,
|
|
477
|
+
view: editorView,
|
|
478
|
+
editorAppearance: editorAppearance,
|
|
479
|
+
hideFrame: (_this$state$_privateP2 = this.state._privateProps) === null || _this$state$_privateP2 === void 0 ? void 0 : _this$state$_privateP2.__hideFrame,
|
|
480
|
+
pluginInjectionApi: pluginInjectionApi,
|
|
481
|
+
macroInteractionDesignFeatureFlags: macroInteractionDesignFeatureFlags,
|
|
482
|
+
isNodeSelected: selectedNode === node,
|
|
483
|
+
isNodeHovered: this.state.isNodeHovered,
|
|
484
|
+
isNodeNested: isNodeNested,
|
|
485
|
+
setIsNodeHovered: this.setIsNodeHovered
|
|
486
|
+
}, extensionHandlerResult);
|
|
487
|
+
case 'inlineExtension':
|
|
488
|
+
return /*#__PURE__*/React.createElement(InlineExtension, {
|
|
489
|
+
node: node,
|
|
490
|
+
macroInteractionDesignFeatureFlags: macroInteractionDesignFeatureFlags,
|
|
491
|
+
isNodeSelected: selectedNode === node,
|
|
492
|
+
pluginInjectionApi: pluginInjectionApi,
|
|
493
|
+
isNodeHovered: this.state.isNodeHovered,
|
|
494
|
+
setIsNodeHovered: this.setIsNodeHovered
|
|
495
|
+
}, extensionHandlerResult);
|
|
496
|
+
default:
|
|
497
|
+
return null;
|
|
498
|
+
}
|
|
499
|
+
}
|
|
500
|
+
}, {
|
|
501
|
+
key: "tryExtensionHandler",
|
|
502
|
+
value: function tryExtensionHandler(actions) {
|
|
503
|
+
var node = this.props.node;
|
|
504
|
+
try {
|
|
505
|
+
var extensionContent = this.handleExtension(node, actions);
|
|
506
|
+
if (extensionContent && /*#__PURE__*/React.isValidElement(extensionContent)) {
|
|
507
|
+
return extensionContent;
|
|
508
|
+
}
|
|
509
|
+
} catch (e) {
|
|
510
|
+
// eslint-disable-next-line no-console
|
|
511
|
+
console.error('Provided extension handler has thrown an error\n', e);
|
|
512
|
+
/** We don't want this error to block renderer */
|
|
513
|
+
/** We keep rendering the default content */
|
|
514
|
+
}
|
|
515
|
+
return null;
|
|
516
|
+
}
|
|
517
|
+
}]);
|
|
518
|
+
return ExtensionComponentInner;
|
|
519
|
+
}(Component);
|
|
520
|
+
export var ExtensionComponent = function ExtensionComponent(props) {
|
|
521
|
+
if (fg('platform_editor_react18_extension_component')) {
|
|
522
|
+
return /*#__PURE__*/React.createElement(ExtensionComponentNew, props);
|
|
523
|
+
}
|
|
524
|
+
return /*#__PURE__*/React.createElement(ExtensionComponentOld, props);
|
|
525
|
+
};
|
|
@@ -7,7 +7,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
|
|
|
7
7
|
import { isFedRamp } from './environment';
|
|
8
8
|
var SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
|
|
9
9
|
var packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
|
|
10
|
-
var packageVersion = "93.1
|
|
10
|
+
var packageVersion = "93.2.1";
|
|
11
11
|
var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
|
|
12
12
|
// Remove URL as it has UGC
|
|
13
13
|
// TODO: Sanitise the URL instead of just removing it
|