@atlaskit/renderer 120.1.3 → 120.1.5
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 +15 -0
- package/afm-rovo-extension/tsconfig.json +129 -0
- package/dist/cjs/react/index.js +5 -1
- package/dist/cjs/react/nodes/extension.js +14 -4
- package/dist/cjs/ui/Renderer/index.js +2 -1
- package/dist/es2019/react/index.js +5 -1
- package/dist/es2019/react/nodes/extension.js +14 -5
- package/dist/es2019/ui/Renderer/index.js +2 -1
- package/dist/esm/react/index.js +5 -1
- package/dist/esm/react/nodes/extension.js +14 -4
- package/dist/esm/ui/Renderer/index.js +2 -1
- package/dist/types/react/index.d.ts +3 -0
- package/dist/types/react/nodes/extension.d.ts +2 -1
- package/dist/types/ui/renderer-props.d.ts +2 -0
- package/dist/types-ts4.5/react/index.d.ts +3 -0
- package/dist/types-ts4.5/react/nodes/extension.d.ts +2 -1
- package/dist/types-ts4.5/ui/renderer-props.d.ts +2 -0
- package/package.json +7 -7
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,20 @@
|
|
|
1
1
|
# @atlaskit/renderer
|
|
2
2
|
|
|
3
|
+
## 120.1.5
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#183363](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/183363)
|
|
8
|
+
[`01c81dc79f641`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/01c81dc79f641) -
|
|
9
|
+
add legacy extension node height reservation
|
|
10
|
+
- Updated dependencies
|
|
11
|
+
|
|
12
|
+
## 120.1.4
|
|
13
|
+
|
|
14
|
+
### Patch Changes
|
|
15
|
+
|
|
16
|
+
- Updated dependencies
|
|
17
|
+
|
|
3
18
|
## 120.1.3
|
|
4
19
|
|
|
5
20
|
### Patch Changes
|
|
@@ -0,0 +1,129 @@
|
|
|
1
|
+
{
|
|
2
|
+
"extends": "../../../../tsconfig.entry-points.rovo-extension.json",
|
|
3
|
+
"compilerOptions": {
|
|
4
|
+
"declaration": true,
|
|
5
|
+
"target": "es5",
|
|
6
|
+
"outDir": "../../../../../rovo-extension/tsDist/@atlaskit__renderer/app",
|
|
7
|
+
"rootDir": "../",
|
|
8
|
+
"composite": true
|
|
9
|
+
},
|
|
10
|
+
"include": [
|
|
11
|
+
"../src/**/*.ts",
|
|
12
|
+
"../src/**/*.tsx"
|
|
13
|
+
],
|
|
14
|
+
"exclude": [
|
|
15
|
+
"../src/**/__tests__/*",
|
|
16
|
+
"../src/**/*.test.*",
|
|
17
|
+
"../src/**/test.*"
|
|
18
|
+
],
|
|
19
|
+
"references": [
|
|
20
|
+
{
|
|
21
|
+
"path": "../../adf-utils/afm-rovo-extension/tsconfig.json"
|
|
22
|
+
},
|
|
23
|
+
{
|
|
24
|
+
"path": "../../../analytics/analytics-listeners/afm-rovo-extension/tsconfig.json"
|
|
25
|
+
},
|
|
26
|
+
{
|
|
27
|
+
"path": "../../../analytics/analytics-namespaced-context/afm-rovo-extension/tsconfig.json"
|
|
28
|
+
},
|
|
29
|
+
{
|
|
30
|
+
"path": "../../../analytics/analytics-next/afm-rovo-extension/tsconfig.json"
|
|
31
|
+
},
|
|
32
|
+
{
|
|
33
|
+
"path": "../../../design-system/button/afm-rovo-extension/tsconfig.json"
|
|
34
|
+
},
|
|
35
|
+
{
|
|
36
|
+
"path": "../../../design-system/code/afm-rovo-extension/tsconfig.json"
|
|
37
|
+
},
|
|
38
|
+
{
|
|
39
|
+
"path": "../../editor-json-transformer/afm-rovo-extension/tsconfig.json"
|
|
40
|
+
},
|
|
41
|
+
{
|
|
42
|
+
"path": "../../editor-palette/afm-rovo-extension/tsconfig.json"
|
|
43
|
+
},
|
|
44
|
+
{
|
|
45
|
+
"path": "../../editor-shared-styles/afm-rovo-extension/tsconfig.json"
|
|
46
|
+
},
|
|
47
|
+
{
|
|
48
|
+
"path": "../../editor-tables/afm-rovo-extension/tsconfig.json"
|
|
49
|
+
},
|
|
50
|
+
{
|
|
51
|
+
"path": "../../../elements/emoji/afm-rovo-extension/tsconfig.json"
|
|
52
|
+
},
|
|
53
|
+
{
|
|
54
|
+
"path": "../../../measurement/feature-gate-js-client/afm-rovo-extension/tsconfig.json"
|
|
55
|
+
},
|
|
56
|
+
{
|
|
57
|
+
"path": "../../../design-system/icon/afm-rovo-extension/tsconfig.json"
|
|
58
|
+
},
|
|
59
|
+
{
|
|
60
|
+
"path": "../../../design-system/link/afm-rovo-extension/tsconfig.json"
|
|
61
|
+
},
|
|
62
|
+
{
|
|
63
|
+
"path": "../../../linking-platform/link-datasource/afm-rovo-extension/tsconfig.json"
|
|
64
|
+
},
|
|
65
|
+
{
|
|
66
|
+
"path": "../../../media/media-card/afm-rovo-extension/tsconfig.json"
|
|
67
|
+
},
|
|
68
|
+
{
|
|
69
|
+
"path": "../../../media/media-client/afm-rovo-extension/tsconfig.json"
|
|
70
|
+
},
|
|
71
|
+
{
|
|
72
|
+
"path": "../../../media/media-client-react/afm-rovo-extension/tsconfig.json"
|
|
73
|
+
},
|
|
74
|
+
{
|
|
75
|
+
"path": "../../../media/media-common/afm-rovo-extension/tsconfig.json"
|
|
76
|
+
},
|
|
77
|
+
{
|
|
78
|
+
"path": "../../../media/media-filmstrip/afm-rovo-extension/tsconfig.json"
|
|
79
|
+
},
|
|
80
|
+
{
|
|
81
|
+
"path": "../../../media/media-ui/afm-rovo-extension/tsconfig.json"
|
|
82
|
+
},
|
|
83
|
+
{
|
|
84
|
+
"path": "../../../media/media-viewer/afm-rovo-extension/tsconfig.json"
|
|
85
|
+
},
|
|
86
|
+
{
|
|
87
|
+
"path": "../../../platform/feature-flags/afm-rovo-extension/tsconfig.json"
|
|
88
|
+
},
|
|
89
|
+
{
|
|
90
|
+
"path": "../../../platform/feature-flags-react/afm-rovo-extension/tsconfig.json"
|
|
91
|
+
},
|
|
92
|
+
{
|
|
93
|
+
"path": "../../../react-ufo/atlaskit/afm-rovo-extension/tsconfig.json"
|
|
94
|
+
},
|
|
95
|
+
{
|
|
96
|
+
"path": "../../../linking-platform/smart-card/afm-rovo-extension/tsconfig.json"
|
|
97
|
+
},
|
|
98
|
+
{
|
|
99
|
+
"path": "../../../elements/status/afm-rovo-extension/tsconfig.json"
|
|
100
|
+
},
|
|
101
|
+
{
|
|
102
|
+
"path": "../../../elements/task-decision/afm-rovo-extension/tsconfig.json"
|
|
103
|
+
},
|
|
104
|
+
{
|
|
105
|
+
"path": "../../../design-system/theme/afm-rovo-extension/tsconfig.json"
|
|
106
|
+
},
|
|
107
|
+
{
|
|
108
|
+
"path": "../../tmp-editor-statsig/afm-rovo-extension/tsconfig.json"
|
|
109
|
+
},
|
|
110
|
+
{
|
|
111
|
+
"path": "../../../design-system/tokens/afm-rovo-extension/tsconfig.json"
|
|
112
|
+
},
|
|
113
|
+
{
|
|
114
|
+
"path": "../../../design-system/tooltip/afm-rovo-extension/tsconfig.json"
|
|
115
|
+
},
|
|
116
|
+
{
|
|
117
|
+
"path": "../../../design-system/visually-hidden/afm-rovo-extension/tsconfig.json"
|
|
118
|
+
},
|
|
119
|
+
{
|
|
120
|
+
"path": "../../editor-common/afm-rovo-extension/tsconfig.json"
|
|
121
|
+
},
|
|
122
|
+
{
|
|
123
|
+
"path": "../../../linking-platform/link-provider/afm-rovo-extension/tsconfig.json"
|
|
124
|
+
},
|
|
125
|
+
{
|
|
126
|
+
"path": "../../../media/media-core/afm-rovo-extension/tsconfig.json"
|
|
127
|
+
}
|
|
128
|
+
]
|
|
129
|
+
}
|
package/dist/cjs/react/index.js
CHANGED
|
@@ -198,6 +198,7 @@ var ReactSerializer = exports.default = /*#__PURE__*/function () {
|
|
|
198
198
|
this.emojiResourceConfig = init.emojiResourceConfig;
|
|
199
199
|
this.smartLinks = init.smartLinks;
|
|
200
200
|
this.extensionViewportSizes = init.extensionViewportSizes;
|
|
201
|
+
this.getExtensionHeight = init.getExtensionHeight;
|
|
201
202
|
this.allowSelectAllTrap = init.allowSelectAllTrap;
|
|
202
203
|
this.nodeComponents = init.nodeComponents;
|
|
203
204
|
this.allowWindowedCodeBlock = init.allowWindowedCodeBlock;
|
|
@@ -495,9 +496,12 @@ var ReactSerializer = exports.default = /*#__PURE__*/function () {
|
|
|
495
496
|
}, {
|
|
496
497
|
key: "getExtensionProps",
|
|
497
498
|
value: function getExtensionProps(node) {
|
|
499
|
+
var _this$getExtensionHei;
|
|
498
500
|
var path = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
|
|
501
|
+
var testHeight = (_this$getExtensionHei = this.getExtensionHeight) === null || _this$getExtensionHei === void 0 ? void 0 : _this$getExtensionHei.call(this, node);
|
|
499
502
|
return _objectSpread(_objectSpread({}, this.getProps(node, path)), {}, {
|
|
500
|
-
extensionViewportSizes: this.extensionViewportSizes
|
|
503
|
+
extensionViewportSizes: this.extensionViewportSizes,
|
|
504
|
+
nodeHeight: testHeight
|
|
501
505
|
});
|
|
502
506
|
}
|
|
503
507
|
}, {
|
|
@@ -37,6 +37,7 @@ var renderExtension = exports.renderExtension = function renderExtension(content
|
|
|
37
37
|
var removeOverflow = arguments.length > 3 ? arguments[3] : undefined;
|
|
38
38
|
var extensionId = arguments.length > 4 ? arguments[4] : undefined;
|
|
39
39
|
var extensionViewportSizes = arguments.length > 5 ? arguments[5] : undefined;
|
|
40
|
+
var nodeHeight = arguments.length > 6 ? arguments[6] : undefined;
|
|
40
41
|
var overflowContainerClass = !removeOverflow ? _consts.RendererCssClassName.EXTENSION_OVERFLOW_CONTAINER : '';
|
|
41
42
|
|
|
42
43
|
// by default, we assume the extension is at top level, (direct child of doc node)
|
|
@@ -44,7 +45,14 @@ var renderExtension = exports.renderExtension = function renderExtension(content
|
|
|
44
45
|
_ref$isTopLevel = _ref.isTopLevel,
|
|
45
46
|
isTopLevel = _ref$isTopLevel === void 0 ? true : _ref$isTopLevel;
|
|
46
47
|
var centerAlignClass = isTopLevel && ['wide', 'full-width'].includes(layout) ? _consts.RendererCssClassName.EXTENSION_CENTER_ALIGN : '';
|
|
48
|
+
/**
|
|
49
|
+
* To reduce cumulative layout shift, we check installed manifest values (viewportSize) for Forge and extension node parameters
|
|
50
|
+
* for Connect (legacy). As Connect is being phased out, we want Forge to also start to store its expected height
|
|
51
|
+
* in node parameters, especially for dynamic content macros. LegacyMacroStyledElements implements logic similar to here
|
|
52
|
+
* as the extension handler in CFE for legacy macros and Connect.
|
|
53
|
+
*/
|
|
47
54
|
var viewportSize = getViewportSize(extensionId, extensionViewportSizes);
|
|
55
|
+
var extensionHeight = nodeHeight || viewportSize;
|
|
48
56
|
return /*#__PURE__*/_react.default.createElement(_ui.WidthConsumer, null, function (_ref2) {
|
|
49
57
|
var width = _ref2.width;
|
|
50
58
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
@@ -55,7 +63,8 @@ var renderExtension = exports.renderExtension = function renderExtension(content
|
|
|
55
63
|
style: {
|
|
56
64
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
57
65
|
width: isTopLevel ? (0, _utils.calcBreakoutWidth)(layout, width) : '100%',
|
|
58
|
-
|
|
66
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
|
|
67
|
+
minHeight: extensionHeight
|
|
59
68
|
},
|
|
60
69
|
"data-layout": layout
|
|
61
70
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
@@ -72,7 +81,8 @@ var Extension = function Extension(props) {
|
|
|
72
81
|
_props$path = props.path,
|
|
73
82
|
path = _props$path === void 0 ? [] : _props$path,
|
|
74
83
|
extensionViewportSizes = props.extensionViewportSizes,
|
|
75
|
-
parameters = props.parameters
|
|
84
|
+
parameters = props.parameters,
|
|
85
|
+
nodeHeight = props.nodeHeight;
|
|
76
86
|
return /*#__PURE__*/_react.default.createElement(_ExtensionRenderer.default
|
|
77
87
|
// Ignored via go/ees005
|
|
78
88
|
// eslint-disable-next-line react/jsx-props-no-spreading
|
|
@@ -87,7 +97,7 @@ var Extension = function Extension(props) {
|
|
|
87
97
|
isTopLevel: path.length < 1,
|
|
88
98
|
handleRef: handleRef,
|
|
89
99
|
shadowClassNames: shadowClassNames
|
|
90
|
-
}, undefined, parameters === null || parameters === void 0 ? void 0 : parameters.extensionId, extensionViewportSizes);
|
|
100
|
+
}, undefined, parameters === null || parameters === void 0 ? void 0 : parameters.extensionId, extensionViewportSizes, nodeHeight);
|
|
91
101
|
}
|
|
92
102
|
} catch (e) {
|
|
93
103
|
/** We don't want this error to block renderer */
|
|
@@ -98,7 +108,7 @@ var Extension = function Extension(props) {
|
|
|
98
108
|
isTopLevel: path.length < 1,
|
|
99
109
|
handleRef: handleRef,
|
|
100
110
|
shadowClassNames: shadowClassNames
|
|
101
|
-
}, undefined, parameters === null || parameters === void 0 ? void 0 : parameters.extensionId, extensionViewportSizes);
|
|
111
|
+
}, undefined, parameters === null || parameters === void 0 ? void 0 : parameters.extensionId, extensionViewportSizes, nodeHeight);
|
|
102
112
|
});
|
|
103
113
|
};
|
|
104
114
|
var _default = exports.default = (0, _ui.overflowShadow)(Extension, {
|
|
@@ -62,7 +62,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
|
|
|
62
62
|
var NORMAL_SEVERITY_THRESHOLD = exports.NORMAL_SEVERITY_THRESHOLD = 2000;
|
|
63
63
|
var DEGRADED_SEVERITY_THRESHOLD = exports.DEGRADED_SEVERITY_THRESHOLD = 3000;
|
|
64
64
|
var packageName = "@atlaskit/renderer";
|
|
65
|
-
var packageVersion = "120.1.
|
|
65
|
+
var packageVersion = "120.1.4";
|
|
66
66
|
var setAsQueryContainerStyles = (0, _react2.css)({
|
|
67
67
|
containerName: 'ak-renderer-wrapper',
|
|
68
68
|
containerType: 'inline-size'
|
|
@@ -239,6 +239,7 @@ var RendererFunctionalComponent = exports.RendererFunctionalComponent = function
|
|
|
239
239
|
emojiResourceConfig: props.emojiResourceConfig,
|
|
240
240
|
smartLinks: props.smartLinks,
|
|
241
241
|
extensionViewportSizes: props.extensionViewportSizes,
|
|
242
|
+
getExtensionHeight: props.getExtensionHeight,
|
|
242
243
|
allowCopyToClipboard: props.allowCopyToClipboard,
|
|
243
244
|
allowWrapCodeBlock: props.allowWrapCodeBlock,
|
|
244
245
|
allowCustomPanels: props.allowCustomPanels,
|
|
@@ -184,6 +184,7 @@ export default class ReactSerializer {
|
|
|
184
184
|
this.emojiResourceConfig = init.emojiResourceConfig;
|
|
185
185
|
this.smartLinks = init.smartLinks;
|
|
186
186
|
this.extensionViewportSizes = init.extensionViewportSizes;
|
|
187
|
+
this.getExtensionHeight = init.getExtensionHeight;
|
|
187
188
|
this.allowSelectAllTrap = init.allowSelectAllTrap;
|
|
188
189
|
this.nodeComponents = init.nodeComponents;
|
|
189
190
|
this.allowWindowedCodeBlock = init.allowWindowedCodeBlock;
|
|
@@ -447,9 +448,12 @@ export default class ReactSerializer {
|
|
|
447
448
|
};
|
|
448
449
|
}
|
|
449
450
|
getExtensionProps(node, path = []) {
|
|
451
|
+
var _this$getExtensionHei;
|
|
452
|
+
const testHeight = (_this$getExtensionHei = this.getExtensionHeight) === null || _this$getExtensionHei === void 0 ? void 0 : _this$getExtensionHei.call(this, node);
|
|
450
453
|
return {
|
|
451
454
|
...this.getProps(node, path),
|
|
452
|
-
extensionViewportSizes: this.extensionViewportSizes
|
|
455
|
+
extensionViewportSizes: this.extensionViewportSizes,
|
|
456
|
+
nodeHeight: testHeight
|
|
453
457
|
};
|
|
454
458
|
}
|
|
455
459
|
getEmojiProps(node) {
|
|
@@ -23,7 +23,7 @@ const getViewportSize = (extensionId, extensionViewportSizes) => {
|
|
|
23
23
|
return macroHeights[viewportSize];
|
|
24
24
|
}
|
|
25
25
|
};
|
|
26
|
-
export const renderExtension = (content, layout, options = {}, removeOverflow, extensionId, extensionViewportSizes) => {
|
|
26
|
+
export const renderExtension = (content, layout, options = {}, removeOverflow, extensionId, extensionViewportSizes, nodeHeight) => {
|
|
27
27
|
const overflowContainerClass = !removeOverflow ? RendererCssClassName.EXTENSION_OVERFLOW_CONTAINER : '';
|
|
28
28
|
|
|
29
29
|
// by default, we assume the extension is at top level, (direct child of doc node)
|
|
@@ -31,7 +31,14 @@ export const renderExtension = (content, layout, options = {}, removeOverflow, e
|
|
|
31
31
|
isTopLevel = true
|
|
32
32
|
} = options || {};
|
|
33
33
|
const centerAlignClass = isTopLevel && ['wide', 'full-width'].includes(layout) ? RendererCssClassName.EXTENSION_CENTER_ALIGN : '';
|
|
34
|
+
/**
|
|
35
|
+
* To reduce cumulative layout shift, we check installed manifest values (viewportSize) for Forge and extension node parameters
|
|
36
|
+
* for Connect (legacy). As Connect is being phased out, we want Forge to also start to store its expected height
|
|
37
|
+
* in node parameters, especially for dynamic content macros. LegacyMacroStyledElements implements logic similar to here
|
|
38
|
+
* as the extension handler in CFE for legacy macros and Connect.
|
|
39
|
+
*/
|
|
34
40
|
const viewportSize = getViewportSize(extensionId, extensionViewportSizes);
|
|
41
|
+
const extensionHeight = nodeHeight || viewportSize;
|
|
35
42
|
return /*#__PURE__*/React.createElement(WidthConsumer, null, ({
|
|
36
43
|
width
|
|
37
44
|
}) => /*#__PURE__*/React.createElement("div", {
|
|
@@ -42,7 +49,8 @@ export const renderExtension = (content, layout, options = {}, removeOverflow, e
|
|
|
42
49
|
style: {
|
|
43
50
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
44
51
|
width: isTopLevel ? calcBreakoutWidth(layout, width) : '100%',
|
|
45
|
-
|
|
52
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
|
|
53
|
+
minHeight: extensionHeight
|
|
46
54
|
},
|
|
47
55
|
"data-layout": layout
|
|
48
56
|
}, /*#__PURE__*/React.createElement("div", {
|
|
@@ -57,7 +65,8 @@ const Extension = props => {
|
|
|
57
65
|
shadowClassNames,
|
|
58
66
|
path = [],
|
|
59
67
|
extensionViewportSizes,
|
|
60
|
-
parameters
|
|
68
|
+
parameters,
|
|
69
|
+
nodeHeight
|
|
61
70
|
} = props;
|
|
62
71
|
return /*#__PURE__*/React.createElement(ExtensionRenderer
|
|
63
72
|
// Ignored via go/ees005
|
|
@@ -74,7 +83,7 @@ const Extension = props => {
|
|
|
74
83
|
isTopLevel: path.length < 1,
|
|
75
84
|
handleRef,
|
|
76
85
|
shadowClassNames
|
|
77
|
-
}, undefined, parameters === null || parameters === void 0 ? void 0 : parameters.extensionId, extensionViewportSizes);
|
|
86
|
+
}, undefined, parameters === null || parameters === void 0 ? void 0 : parameters.extensionId, extensionViewportSizes, nodeHeight);
|
|
78
87
|
}
|
|
79
88
|
} catch (e) {
|
|
80
89
|
/** We don't want this error to block renderer */
|
|
@@ -85,7 +94,7 @@ const Extension = props => {
|
|
|
85
94
|
isTopLevel: path.length < 1,
|
|
86
95
|
handleRef,
|
|
87
96
|
shadowClassNames
|
|
88
|
-
}, undefined, parameters === null || parameters === void 0 ? void 0 : parameters.extensionId, extensionViewportSizes);
|
|
97
|
+
}, undefined, parameters === null || parameters === void 0 ? void 0 : parameters.extensionId, extensionViewportSizes, nodeHeight);
|
|
89
98
|
});
|
|
90
99
|
};
|
|
91
100
|
export default overflowShadow(Extension, {
|
|
@@ -48,7 +48,7 @@ import { PortalContext } from './PortalContext';
|
|
|
48
48
|
export const NORMAL_SEVERITY_THRESHOLD = 2000;
|
|
49
49
|
export const DEGRADED_SEVERITY_THRESHOLD = 3000;
|
|
50
50
|
const packageName = "@atlaskit/renderer";
|
|
51
|
-
const packageVersion = "120.1.
|
|
51
|
+
const packageVersion = "120.1.4";
|
|
52
52
|
const setAsQueryContainerStyles = css({
|
|
53
53
|
containerName: 'ak-renderer-wrapper',
|
|
54
54
|
containerType: 'inline-size'
|
|
@@ -231,6 +231,7 @@ export const RendererFunctionalComponent = props => {
|
|
|
231
231
|
emojiResourceConfig: props.emojiResourceConfig,
|
|
232
232
|
smartLinks: props.smartLinks,
|
|
233
233
|
extensionViewportSizes: props.extensionViewportSizes,
|
|
234
|
+
getExtensionHeight: props.getExtensionHeight,
|
|
234
235
|
allowCopyToClipboard: props.allowCopyToClipboard,
|
|
235
236
|
allowWrapCodeBlock: props.allowWrapCodeBlock,
|
|
236
237
|
allowCustomPanels: props.allowCustomPanels,
|
package/dist/esm/react/index.js
CHANGED
|
@@ -191,6 +191,7 @@ var ReactSerializer = /*#__PURE__*/function () {
|
|
|
191
191
|
this.emojiResourceConfig = init.emojiResourceConfig;
|
|
192
192
|
this.smartLinks = init.smartLinks;
|
|
193
193
|
this.extensionViewportSizes = init.extensionViewportSizes;
|
|
194
|
+
this.getExtensionHeight = init.getExtensionHeight;
|
|
194
195
|
this.allowSelectAllTrap = init.allowSelectAllTrap;
|
|
195
196
|
this.nodeComponents = init.nodeComponents;
|
|
196
197
|
this.allowWindowedCodeBlock = init.allowWindowedCodeBlock;
|
|
@@ -488,9 +489,12 @@ var ReactSerializer = /*#__PURE__*/function () {
|
|
|
488
489
|
}, {
|
|
489
490
|
key: "getExtensionProps",
|
|
490
491
|
value: function getExtensionProps(node) {
|
|
492
|
+
var _this$getExtensionHei;
|
|
491
493
|
var path = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
|
|
494
|
+
var testHeight = (_this$getExtensionHei = this.getExtensionHeight) === null || _this$getExtensionHei === void 0 ? void 0 : _this$getExtensionHei.call(this, node);
|
|
492
495
|
return _objectSpread(_objectSpread({}, this.getProps(node, path)), {}, {
|
|
493
|
-
extensionViewportSizes: this.extensionViewportSizes
|
|
496
|
+
extensionViewportSizes: this.extensionViewportSizes,
|
|
497
|
+
nodeHeight: testHeight
|
|
494
498
|
});
|
|
495
499
|
}
|
|
496
500
|
}, {
|
|
@@ -30,6 +30,7 @@ export var renderExtension = function renderExtension(content, layout) {
|
|
|
30
30
|
var removeOverflow = arguments.length > 3 ? arguments[3] : undefined;
|
|
31
31
|
var extensionId = arguments.length > 4 ? arguments[4] : undefined;
|
|
32
32
|
var extensionViewportSizes = arguments.length > 5 ? arguments[5] : undefined;
|
|
33
|
+
var nodeHeight = arguments.length > 6 ? arguments[6] : undefined;
|
|
33
34
|
var overflowContainerClass = !removeOverflow ? RendererCssClassName.EXTENSION_OVERFLOW_CONTAINER : '';
|
|
34
35
|
|
|
35
36
|
// by default, we assume the extension is at top level, (direct child of doc node)
|
|
@@ -37,7 +38,14 @@ export var renderExtension = function renderExtension(content, layout) {
|
|
|
37
38
|
_ref$isTopLevel = _ref.isTopLevel,
|
|
38
39
|
isTopLevel = _ref$isTopLevel === void 0 ? true : _ref$isTopLevel;
|
|
39
40
|
var centerAlignClass = isTopLevel && ['wide', 'full-width'].includes(layout) ? RendererCssClassName.EXTENSION_CENTER_ALIGN : '';
|
|
41
|
+
/**
|
|
42
|
+
* To reduce cumulative layout shift, we check installed manifest values (viewportSize) for Forge and extension node parameters
|
|
43
|
+
* for Connect (legacy). As Connect is being phased out, we want Forge to also start to store its expected height
|
|
44
|
+
* in node parameters, especially for dynamic content macros. LegacyMacroStyledElements implements logic similar to here
|
|
45
|
+
* as the extension handler in CFE for legacy macros and Connect.
|
|
46
|
+
*/
|
|
40
47
|
var viewportSize = getViewportSize(extensionId, extensionViewportSizes);
|
|
48
|
+
var extensionHeight = nodeHeight || viewportSize;
|
|
41
49
|
return /*#__PURE__*/React.createElement(WidthConsumer, null, function (_ref2) {
|
|
42
50
|
var width = _ref2.width;
|
|
43
51
|
return /*#__PURE__*/React.createElement("div", {
|
|
@@ -48,7 +56,8 @@ export var renderExtension = function renderExtension(content, layout) {
|
|
|
48
56
|
style: {
|
|
49
57
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
50
58
|
width: isTopLevel ? calcBreakoutWidth(layout, width) : '100%',
|
|
51
|
-
|
|
59
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
|
|
60
|
+
minHeight: extensionHeight
|
|
52
61
|
},
|
|
53
62
|
"data-layout": layout
|
|
54
63
|
}, /*#__PURE__*/React.createElement("div", {
|
|
@@ -65,7 +74,8 @@ var Extension = function Extension(props) {
|
|
|
65
74
|
_props$path = props.path,
|
|
66
75
|
path = _props$path === void 0 ? [] : _props$path,
|
|
67
76
|
extensionViewportSizes = props.extensionViewportSizes,
|
|
68
|
-
parameters = props.parameters
|
|
77
|
+
parameters = props.parameters,
|
|
78
|
+
nodeHeight = props.nodeHeight;
|
|
69
79
|
return /*#__PURE__*/React.createElement(ExtensionRenderer
|
|
70
80
|
// Ignored via go/ees005
|
|
71
81
|
// eslint-disable-next-line react/jsx-props-no-spreading
|
|
@@ -80,7 +90,7 @@ var Extension = function Extension(props) {
|
|
|
80
90
|
isTopLevel: path.length < 1,
|
|
81
91
|
handleRef: handleRef,
|
|
82
92
|
shadowClassNames: shadowClassNames
|
|
83
|
-
}, undefined, parameters === null || parameters === void 0 ? void 0 : parameters.extensionId, extensionViewportSizes);
|
|
93
|
+
}, undefined, parameters === null || parameters === void 0 ? void 0 : parameters.extensionId, extensionViewportSizes, nodeHeight);
|
|
84
94
|
}
|
|
85
95
|
} catch (e) {
|
|
86
96
|
/** We don't want this error to block renderer */
|
|
@@ -91,7 +101,7 @@ var Extension = function Extension(props) {
|
|
|
91
101
|
isTopLevel: path.length < 1,
|
|
92
102
|
handleRef: handleRef,
|
|
93
103
|
shadowClassNames: shadowClassNames
|
|
94
|
-
}, undefined, parameters === null || parameters === void 0 ? void 0 : parameters.extensionId, extensionViewportSizes);
|
|
104
|
+
}, undefined, parameters === null || parameters === void 0 ? void 0 : parameters.extensionId, extensionViewportSizes, nodeHeight);
|
|
95
105
|
});
|
|
96
106
|
};
|
|
97
107
|
export default overflowShadow(Extension, {
|
|
@@ -53,7 +53,7 @@ import { PortalContext } from './PortalContext';
|
|
|
53
53
|
export var NORMAL_SEVERITY_THRESHOLD = 2000;
|
|
54
54
|
export var DEGRADED_SEVERITY_THRESHOLD = 3000;
|
|
55
55
|
var packageName = "@atlaskit/renderer";
|
|
56
|
-
var packageVersion = "120.1.
|
|
56
|
+
var packageVersion = "120.1.4";
|
|
57
57
|
var setAsQueryContainerStyles = css({
|
|
58
58
|
containerName: 'ak-renderer-wrapper',
|
|
59
59
|
containerType: 'inline-size'
|
|
@@ -230,6 +230,7 @@ export var RendererFunctionalComponent = function RendererFunctionalComponent(pr
|
|
|
230
230
|
emojiResourceConfig: props.emojiResourceConfig,
|
|
231
231
|
smartLinks: props.smartLinks,
|
|
232
232
|
extensionViewportSizes: props.extensionViewportSizes,
|
|
233
|
+
getExtensionHeight: props.getExtensionHeight,
|
|
233
234
|
allowCopyToClipboard: props.allowCopyToClipboard,
|
|
234
235
|
allowWrapCodeBlock: props.allowWrapCodeBlock,
|
|
235
236
|
allowCustomPanels: props.allowCustomPanels,
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import type { Fragment, Mark, Node } from '@atlaskit/editor-prosemirror/model';
|
|
3
|
+
import { type GetPMNodeHeight } from '@atlaskit/editor-common/extensibility';
|
|
3
4
|
import type { Serializer } from '../serializer';
|
|
4
5
|
import type { RendererAppearance, StickyHeaderConfig, HeadingAnchorLinksProps, NodeComponentsProps } from '../ui/Renderer/types';
|
|
5
6
|
import type { AnalyticsEventPayload } from '../analytics/events';
|
|
@@ -38,6 +39,7 @@ export interface ReactSerializerInit {
|
|
|
38
39
|
emojiResourceConfig?: EmojiResourceConfig;
|
|
39
40
|
smartLinks?: SmartLinksOptions;
|
|
40
41
|
extensionViewportSizes?: ExtensionViewportSize[];
|
|
42
|
+
getExtensionHeight?: GetPMNodeHeight;
|
|
41
43
|
allowCopyToClipboard?: boolean;
|
|
42
44
|
allowWrapCodeBlock?: boolean;
|
|
43
45
|
allowPlaceholderText?: boolean;
|
|
@@ -95,6 +97,7 @@ export default class ReactSerializer implements Serializer<JSX.Element> {
|
|
|
95
97
|
private emojiResourceConfig?;
|
|
96
98
|
private smartLinks?;
|
|
97
99
|
private extensionViewportSizes?;
|
|
100
|
+
private getExtensionHeight?;
|
|
98
101
|
private allowAnnotations;
|
|
99
102
|
private allowSelectAllTrap?;
|
|
100
103
|
private nodeComponents?;
|
|
@@ -18,6 +18,7 @@ interface Props {
|
|
|
18
18
|
localId?: string;
|
|
19
19
|
marks?: PMMark[];
|
|
20
20
|
extensionViewportSizes?: ExtensionViewportSize[];
|
|
21
|
+
nodeHeight?: string;
|
|
21
22
|
}
|
|
22
23
|
type AllOrNone<T> = T | {
|
|
23
24
|
[K in keyof T]?: never;
|
|
@@ -25,7 +26,7 @@ type AllOrNone<T> = T | {
|
|
|
25
26
|
type RenderExtensionOptions = {
|
|
26
27
|
isTopLevel?: boolean;
|
|
27
28
|
} & AllOrNone<OverflowShadowProps>;
|
|
28
|
-
export declare const renderExtension: (content: any, layout: string, options?: RenderExtensionOptions, removeOverflow?: boolean, extensionId?: string, extensionViewportSizes?: ExtensionViewportSize[]) => React.JSX.Element;
|
|
29
|
+
export declare const renderExtension: (content: any, layout: string, options?: RenderExtensionOptions, removeOverflow?: boolean, extensionId?: string, extensionViewportSizes?: ExtensionViewportSize[], nodeHeight?: string) => React.JSX.Element;
|
|
29
30
|
declare const _default: {
|
|
30
31
|
new (props: (Props & OverflowShadowProps) | Readonly<Props & OverflowShadowProps>): {
|
|
31
32
|
overflowContainer?: HTMLElement | null | undefined;
|
|
@@ -9,6 +9,7 @@ import type { UnsupportedContentLevelsTracking } from '@atlaskit/editor-common/u
|
|
|
9
9
|
import type { ADFStage } from '@atlaskit/editor-common/validator';
|
|
10
10
|
import type { Schema } from '@atlaskit/editor-prosemirror/model';
|
|
11
11
|
import type { EmojiResourceConfig } from '@atlaskit/emoji/resource';
|
|
12
|
+
import type { GetPMNodeHeight } from '@atlaskit/editor-common/extensibility';
|
|
12
13
|
import type { ReactSerializerInit, RendererContext, Serializer } from '../';
|
|
13
14
|
import type { TextHighlighter, ExtensionViewportSize } from '../react/types';
|
|
14
15
|
import type { RenderOutputStat } from '../render-document';
|
|
@@ -48,6 +49,7 @@ export interface RendererProps {
|
|
|
48
49
|
emojiResourceConfig?: EmojiResourceConfig;
|
|
49
50
|
smartLinks?: SmartLinksOptions;
|
|
50
51
|
extensionViewportSizes?: ExtensionViewportSize[];
|
|
52
|
+
getExtensionHeight?: GetPMNodeHeight;
|
|
51
53
|
allowAnnotations?: boolean;
|
|
52
54
|
annotationProvider?: AnnotationProviders | null;
|
|
53
55
|
innerRef?: React.RefObject<HTMLDivElement>;
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import type { Fragment, Mark, Node } from '@atlaskit/editor-prosemirror/model';
|
|
3
|
+
import { type GetPMNodeHeight } from '@atlaskit/editor-common/extensibility';
|
|
3
4
|
import type { Serializer } from '../serializer';
|
|
4
5
|
import type { RendererAppearance, StickyHeaderConfig, HeadingAnchorLinksProps, NodeComponentsProps } from '../ui/Renderer/types';
|
|
5
6
|
import type { AnalyticsEventPayload } from '../analytics/events';
|
|
@@ -38,6 +39,7 @@ export interface ReactSerializerInit {
|
|
|
38
39
|
emojiResourceConfig?: EmojiResourceConfig;
|
|
39
40
|
smartLinks?: SmartLinksOptions;
|
|
40
41
|
extensionViewportSizes?: ExtensionViewportSize[];
|
|
42
|
+
getExtensionHeight?: GetPMNodeHeight;
|
|
41
43
|
allowCopyToClipboard?: boolean;
|
|
42
44
|
allowWrapCodeBlock?: boolean;
|
|
43
45
|
allowPlaceholderText?: boolean;
|
|
@@ -95,6 +97,7 @@ export default class ReactSerializer implements Serializer<JSX.Element> {
|
|
|
95
97
|
private emojiResourceConfig?;
|
|
96
98
|
private smartLinks?;
|
|
97
99
|
private extensionViewportSizes?;
|
|
100
|
+
private getExtensionHeight?;
|
|
98
101
|
private allowAnnotations;
|
|
99
102
|
private allowSelectAllTrap?;
|
|
100
103
|
private nodeComponents?;
|
|
@@ -18,6 +18,7 @@ interface Props {
|
|
|
18
18
|
localId?: string;
|
|
19
19
|
marks?: PMMark[];
|
|
20
20
|
extensionViewportSizes?: ExtensionViewportSize[];
|
|
21
|
+
nodeHeight?: string;
|
|
21
22
|
}
|
|
22
23
|
type AllOrNone<T> = T | {
|
|
23
24
|
[K in keyof T]?: never;
|
|
@@ -25,7 +26,7 @@ type AllOrNone<T> = T | {
|
|
|
25
26
|
type RenderExtensionOptions = {
|
|
26
27
|
isTopLevel?: boolean;
|
|
27
28
|
} & AllOrNone<OverflowShadowProps>;
|
|
28
|
-
export declare const renderExtension: (content: any, layout: string, options?: RenderExtensionOptions, removeOverflow?: boolean, extensionId?: string, extensionViewportSizes?: ExtensionViewportSize[]) => React.JSX.Element;
|
|
29
|
+
export declare const renderExtension: (content: any, layout: string, options?: RenderExtensionOptions, removeOverflow?: boolean, extensionId?: string, extensionViewportSizes?: ExtensionViewportSize[], nodeHeight?: string) => React.JSX.Element;
|
|
29
30
|
declare const _default: {
|
|
30
31
|
new (props: (Props & OverflowShadowProps) | Readonly<Props & OverflowShadowProps>): {
|
|
31
32
|
overflowContainer?: HTMLElement | null | undefined;
|
|
@@ -9,6 +9,7 @@ import type { UnsupportedContentLevelsTracking } from '@atlaskit/editor-common/u
|
|
|
9
9
|
import type { ADFStage } from '@atlaskit/editor-common/validator';
|
|
10
10
|
import type { Schema } from '@atlaskit/editor-prosemirror/model';
|
|
11
11
|
import type { EmojiResourceConfig } from '@atlaskit/emoji/resource';
|
|
12
|
+
import type { GetPMNodeHeight } from '@atlaskit/editor-common/extensibility';
|
|
12
13
|
import type { ReactSerializerInit, RendererContext, Serializer } from '../';
|
|
13
14
|
import type { TextHighlighter, ExtensionViewportSize } from '../react/types';
|
|
14
15
|
import type { RenderOutputStat } from '../render-document';
|
|
@@ -48,6 +49,7 @@ export interface RendererProps {
|
|
|
48
49
|
emojiResourceConfig?: EmojiResourceConfig;
|
|
49
50
|
smartLinks?: SmartLinksOptions;
|
|
50
51
|
extensionViewportSizes?: ExtensionViewportSize[];
|
|
52
|
+
getExtensionHeight?: GetPMNodeHeight;
|
|
51
53
|
allowAnnotations?: boolean;
|
|
52
54
|
annotationProvider?: AnnotationProviders | null;
|
|
53
55
|
innerRef?: React.RefObject<HTMLDivElement>;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/renderer",
|
|
3
|
-
"version": "120.1.
|
|
3
|
+
"version": "120.1.5",
|
|
4
4
|
"description": "Renderer component",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -23,7 +23,7 @@
|
|
|
23
23
|
}
|
|
24
24
|
},
|
|
25
25
|
"dependencies": {
|
|
26
|
-
"@atlaskit/adf-schema": "^49.0.
|
|
26
|
+
"@atlaskit/adf-schema": "^49.0.6",
|
|
27
27
|
"@atlaskit/adf-utils": "^19.20.0",
|
|
28
28
|
"@atlaskit/analytics-listeners": "^9.0.0",
|
|
29
29
|
"@atlaskit/analytics-namespaced-context": "^7.0.0",
|
|
@@ -41,7 +41,7 @@
|
|
|
41
41
|
"@atlaskit/link": "^3.2.0",
|
|
42
42
|
"@atlaskit/link-datasource": "^4.13.0",
|
|
43
43
|
"@atlaskit/media-card": "^79.4.0",
|
|
44
|
-
"@atlaskit/media-client": "^35.
|
|
44
|
+
"@atlaskit/media-client": "^35.1.0",
|
|
45
45
|
"@atlaskit/media-client-react": "^4.1.0",
|
|
46
46
|
"@atlaskit/media-common": "^12.3.0",
|
|
47
47
|
"@atlaskit/media-filmstrip": "^51.0.0",
|
|
@@ -49,12 +49,12 @@
|
|
|
49
49
|
"@atlaskit/media-viewer": "^52.4.0",
|
|
50
50
|
"@atlaskit/platform-feature-flags": "^1.1.0",
|
|
51
51
|
"@atlaskit/platform-feature-flags-react": "^0.2.0",
|
|
52
|
-
"@atlaskit/react-ufo": "^
|
|
53
|
-
"@atlaskit/smart-card": "^40.
|
|
52
|
+
"@atlaskit/react-ufo": "^4.0.0",
|
|
53
|
+
"@atlaskit/smart-card": "^40.2.0",
|
|
54
54
|
"@atlaskit/status": "^3.0.0",
|
|
55
55
|
"@atlaskit/task-decision": "^19.2.0",
|
|
56
56
|
"@atlaskit/theme": "^19.0.0",
|
|
57
|
-
"@atlaskit/tmp-editor-statsig": "^9.
|
|
57
|
+
"@atlaskit/tmp-editor-statsig": "^9.7.0",
|
|
58
58
|
"@atlaskit/tokens": "^5.5.0",
|
|
59
59
|
"@atlaskit/tooltip": "^20.3.0",
|
|
60
60
|
"@atlaskit/visually-hidden": "^3.0.0",
|
|
@@ -68,7 +68,7 @@
|
|
|
68
68
|
"uuid": "^3.1.0"
|
|
69
69
|
},
|
|
70
70
|
"peerDependencies": {
|
|
71
|
-
"@atlaskit/editor-common": "^107.
|
|
71
|
+
"@atlaskit/editor-common": "^107.8.0",
|
|
72
72
|
"@atlaskit/link-provider": "^3.4.0",
|
|
73
73
|
"@atlaskit/media-core": "^37.0.0",
|
|
74
74
|
"react": "^18.2.0",
|