@atlaskit/renderer 95.0.1 → 96.0.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 +25 -0
- package/dist/cjs/react/index.js +0 -2
- package/dist/cjs/react/nodes/embedCard.js +2 -5
- package/dist/cjs/react/nodes/inlineCard.js +5 -1
- package/dist/cjs/react/nodes/mediaInline.js +41 -4
- package/dist/cjs/react/nodes/mediaSingle/index.js +3 -7
- package/dist/cjs/react/nodes/table/colgroup.js +6 -12
- package/dist/cjs/react/nodes/table/sticky.js +2 -4
- package/dist/cjs/react/nodes/table/table.js +1 -3
- package/dist/cjs/react/nodes/table.js +20 -9
- package/dist/cjs/react/nodes/tableCell.js +5 -3
- package/dist/cjs/render-document.js +2 -2
- package/dist/cjs/ui/MediaCard.js +2 -2
- package/dist/cjs/ui/Renderer/breakout-ssr.js +6 -8
- package/dist/cjs/ui/Renderer/index.js +4 -12
- package/dist/cjs/ui/Renderer/style.js +3 -3
- package/dist/cjs/ui/annotations/hooks/use-events.js +4 -2
- package/dist/cjs/version.json +1 -1
- package/dist/es2019/react/index.js +0 -2
- package/dist/es2019/react/nodes/embedCard.js +4 -7
- package/dist/es2019/react/nodes/inlineCard.js +4 -1
- package/dist/es2019/react/nodes/mediaInline.js +36 -4
- package/dist/es2019/react/nodes/mediaSingle/index.js +5 -9
- package/dist/es2019/react/nodes/table/colgroup.js +2 -8
- package/dist/es2019/react/nodes/table/sticky.js +2 -4
- package/dist/es2019/react/nodes/table/table.js +1 -3
- package/dist/es2019/react/nodes/table.js +18 -9
- package/dist/es2019/react/nodes/tableCell.js +4 -1
- package/dist/es2019/render-document.js +1 -1
- package/dist/es2019/ui/MediaCard.js +1 -1
- package/dist/es2019/ui/Renderer/breakout-ssr.js +6 -8
- package/dist/es2019/ui/Renderer/index.js +3 -11
- package/dist/es2019/ui/Renderer/style.js +16 -3
- package/dist/es2019/ui/annotations/hooks/use-events.js +2 -2
- package/dist/es2019/version.json +1 -1
- package/dist/esm/react/index.js +0 -2
- package/dist/esm/react/nodes/embedCard.js +4 -7
- package/dist/esm/react/nodes/inlineCard.js +4 -1
- package/dist/esm/react/nodes/mediaInline.js +36 -4
- package/dist/esm/react/nodes/mediaSingle/index.js +5 -9
- package/dist/esm/react/nodes/table/colgroup.js +6 -12
- package/dist/esm/react/nodes/table/sticky.js +2 -4
- package/dist/esm/react/nodes/table/table.js +1 -3
- package/dist/esm/react/nodes/table.js +20 -9
- package/dist/esm/react/nodes/tableCell.js +5 -3
- package/dist/esm/render-document.js +1 -1
- package/dist/esm/ui/MediaCard.js +1 -1
- package/dist/esm/ui/Renderer/breakout-ssr.js +6 -8
- package/dist/esm/ui/Renderer/index.js +3 -11
- package/dist/esm/ui/Renderer/style.js +4 -3
- package/dist/esm/ui/annotations/hooks/use-events.js +4 -2
- package/dist/esm/version.json +1 -1
- package/dist/types/react/index.d.ts +0 -2
- package/dist/types/react/nodes/embedCard.d.ts +0 -1
- package/dist/types/react/nodes/extension.d.ts +6 -0
- package/dist/types/react/nodes/index.d.ts +1 -2
- package/dist/types/react/nodes/media.d.ts +0 -1
- package/dist/types/react/nodes/mediaInline.d.ts +6 -3
- package/dist/types/react/nodes/mediaSingle/index.d.ts +0 -1
- package/dist/types/react/nodes/table/sticky.d.ts +1 -2
- package/dist/types/react/nodes/table/table.d.ts +1 -1
- package/dist/types/react/nodes/table/types.d.ts +0 -1
- package/dist/types/react/types.d.ts +0 -1
- package/dist/types/renderer-context.d.ts +1 -0
- package/dist/types/ui/MediaCard.d.ts +1 -1
- package/dist/types/ui/Renderer/breakout-ssr.d.ts +2 -4
- package/dist/types/ui/renderer-props.d.ts +1 -0
- package/package.json +13 -12
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,30 @@
|
|
|
1
1
|
# @atlaskit/renderer
|
|
2
2
|
|
|
3
|
+
## 96.0.0
|
|
4
|
+
|
|
5
|
+
### Major Changes
|
|
6
|
+
|
|
7
|
+
- [`d8b3bc73330`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d8b3bc73330) - [ED-14507] Deprecate the allowDynamicTextSizing editor prop and remove all code related to it. This feature has been unused since 2020.
|
|
8
|
+
|
|
9
|
+
### Minor Changes
|
|
10
|
+
|
|
11
|
+
- [`8949731bc6a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8949731bc6a) - ED-14608: Migrate adf-utils imports in atlassian-frontend to new child entry points to improve treeshaking
|
|
12
|
+
- [`b7b72b61dca`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b7b72b61dca) - ED-10337 Refactor overflow shadows using intersection observer to improve renderer performance on initial load and when scrolling contents of the tables and extensions horizontally.
|
|
13
|
+
This is affecting vertical shadows inside tables and extensions in renderer.
|
|
14
|
+
On the OverflowShadowOptions interface of the shadows component exported from editor-common we are also removing scrollableSelector option which is no longer used.
|
|
15
|
+
|
|
16
|
+
### Patch Changes
|
|
17
|
+
|
|
18
|
+
- [`edc63f42fbb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/edc63f42fbb) - Fix: Media inline renderer sometimes stuck in loading view state
|
|
19
|
+
- [`b68e80d658f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b68e80d658f) - add hover previews feature flag
|
|
20
|
+
- [`d15a5a556af`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d15a5a556af) - ED-15037 fixed issue with extensions not showing correctly inside tables nested in expands
|
|
21
|
+
- [`27b079fa0a5`](https://bitbucket.org/atlassian/atlassian-frontend/commits/27b079fa0a5) - [ED-14111] Allow spaces in input field in renderer table cell header
|
|
22
|
+
- [`789b211a5e5`](https://bitbucket.org/atlassian/atlassian-frontend/commits/789b211a5e5) - Removed the use of :first-child and nth-child selectors in CSS
|
|
23
|
+
- [`420808687d2`](https://bitbucket.org/atlassian/atlassian-frontend/commits/420808687d2) - EDM-3072: fix copy-paste of media inline stuck on loading and renderer copy-paste copying only text
|
|
24
|
+
- [`c5ef8dd9621`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c5ef8dd9621) - [ux] ED-14913 Fix expand text in renderer dark mode
|
|
25
|
+
- [`c4829f17445`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c4829f17445) - [ux] ED-10642 Fix null annotation ids in renderer
|
|
26
|
+
- Updated dependencies
|
|
27
|
+
|
|
3
28
|
## 95.0.1
|
|
4
29
|
|
|
5
30
|
### Patch Changes
|
package/dist/cjs/react/index.js
CHANGED
|
@@ -190,7 +190,6 @@ var ReactSerializer = /*#__PURE__*/function () {
|
|
|
190
190
|
this.appearance = init.appearance;
|
|
191
191
|
this.disableHeadingIDs = init.disableHeadingIDs;
|
|
192
192
|
this.disableActions = init.disableActions;
|
|
193
|
-
this.allowDynamicTextSizing = init.allowDynamicTextSizing;
|
|
194
193
|
this.allowHeadingAnchorLinks = init.allowHeadingAnchorLinks;
|
|
195
194
|
this.allowCopyToClipboard = init.allowCopyToClipboard;
|
|
196
195
|
this.allowPlaceholderText = init.allowPlaceholderText;
|
|
@@ -561,7 +560,6 @@ var ReactSerializer = /*#__PURE__*/function () {
|
|
|
561
560
|
rendererContext: this.rendererContext,
|
|
562
561
|
serializer: this,
|
|
563
562
|
content: node.content ? node.content.toJSON() : undefined,
|
|
564
|
-
allowDynamicTextSizing: this.allowDynamicTextSizing,
|
|
565
563
|
allowHeadingAnchorLinks: this.allowHeadingAnchorLinks,
|
|
566
564
|
allowCopyToClipboard: this.allowCopyToClipboard,
|
|
567
565
|
allowPlaceholderText: this.allowPlaceholderText,
|
|
@@ -44,7 +44,6 @@ function EmbedCard(props) {
|
|
|
44
44
|
layout = props.layout,
|
|
45
45
|
width = props.width,
|
|
46
46
|
isInsideOfBlockNode = props.isInsideOfBlockNode,
|
|
47
|
-
allowDynamicTextSizing = props.allowDynamicTextSizing,
|
|
48
47
|
rendererAppearance = props.rendererAppearance;
|
|
49
48
|
var embedIframeRef = (0, _react2.useRef)(null);
|
|
50
49
|
var onClick = (0, _getCardClickHandler.getCardClickHandler)(eventHandlers, url);
|
|
@@ -123,10 +122,8 @@ function EmbedCard(props) {
|
|
|
123
122
|
if (!isInsideOfBlockNode && rendererAppearance !== 'comment') {
|
|
124
123
|
var isContainerSizeGreaterThanMaxFullPageWidth = containerWidth - padding >= _editorSharedStyles.akEditorDefaultLayoutWidth;
|
|
125
124
|
|
|
126
|
-
if (isContainerSizeGreaterThanMaxFullPageWidth
|
|
127
|
-
nonFullWidthSize =
|
|
128
|
-
} else if (isContainerSizeGreaterThanMaxFullPageWidth) {
|
|
129
|
-
nonFullWidthSize = (0, _editorSharedStyles.getAkEditorFullPageMaxWidth)(allowDynamicTextSizing);
|
|
125
|
+
if (isContainerSizeGreaterThanMaxFullPageWidth) {
|
|
126
|
+
nonFullWidthSize = _editorSharedStyles.akEditorDefaultLayoutWidth;
|
|
130
127
|
} else {
|
|
131
128
|
nonFullWidthSize = containerWidth - padding;
|
|
132
129
|
}
|
|
@@ -23,6 +23,8 @@ var _SmartCardStorage = require("../../ui/SmartCardStorage");
|
|
|
23
23
|
|
|
24
24
|
var _getCardClickHandler = require("../utils/getCardClickHandler");
|
|
25
25
|
|
|
26
|
+
var _useFeatureFlags = require("../../use-feature-flags");
|
|
27
|
+
|
|
26
28
|
var InlineCard = function InlineCard(props) {
|
|
27
29
|
var url = props.url,
|
|
28
30
|
data = props.data,
|
|
@@ -36,6 +38,7 @@ var InlineCard = function InlineCard(props) {
|
|
|
36
38
|
onClick: onClick,
|
|
37
39
|
container: portal
|
|
38
40
|
};
|
|
41
|
+
var featureFlags = (0, _useFeatureFlags.useFeatureFlags)();
|
|
39
42
|
|
|
40
43
|
if (smartLinks !== null && smartLinks !== void 0 && smartLinks.ssr && url) {
|
|
41
44
|
return /*#__PURE__*/_react.default.createElement(_ssr.CardSSR, {
|
|
@@ -51,7 +54,8 @@ var InlineCard = function InlineCard(props) {
|
|
|
51
54
|
}, /*#__PURE__*/_react.default.createElement(_fallback.CardErrorBoundary, (0, _extends2.default)({
|
|
52
55
|
unsupportedComponent: _ui.UnsupportedInline
|
|
53
56
|
}, cardProps), /*#__PURE__*/_react.default.createElement(_smartCard.Card, (0, _extends2.default)({
|
|
54
|
-
appearance: "inline"
|
|
57
|
+
appearance: "inline",
|
|
58
|
+
showHoverPreview: featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.showHoverPreview
|
|
55
59
|
}, cardProps, {
|
|
56
60
|
onResolve: function onResolve(data) {
|
|
57
61
|
if (!data.url || !data.title) {
|
|
@@ -9,6 +9,8 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
9
9
|
});
|
|
10
10
|
exports.default = exports.RenderMediaInline = void 0;
|
|
11
11
|
|
|
12
|
+
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
13
|
+
|
|
12
14
|
var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
|
|
13
15
|
|
|
14
16
|
var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
|
|
@@ -19,8 +21,14 @@ var _react = _interopRequireWildcard(require("react"));
|
|
|
19
21
|
|
|
20
22
|
var _mediaCard = require("@atlaskit/media-card");
|
|
21
23
|
|
|
24
|
+
var _mediaUi = require("@atlaskit/media-ui");
|
|
25
|
+
|
|
22
26
|
var _providerFactory = require("@atlaskit/editor-common/provider-factory");
|
|
23
27
|
|
|
28
|
+
var _MediaCard = require("../../ui/MediaCard");
|
|
29
|
+
|
|
30
|
+
var _reactIntlNext = require("react-intl-next");
|
|
31
|
+
|
|
24
32
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
25
33
|
|
|
26
34
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
@@ -28,7 +36,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
|
|
|
28
36
|
var RenderMediaInline = function RenderMediaInline(props) {
|
|
29
37
|
var mediaProvider = props.mediaProvider;
|
|
30
38
|
|
|
31
|
-
var _useState = (0, _react.useState)(
|
|
39
|
+
var _useState = (0, _react.useState)(),
|
|
32
40
|
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
|
33
41
|
viewMediaClientConfigState = _useState2[0],
|
|
34
42
|
setViewMediaClientConfigState = _useState2[1];
|
|
@@ -68,6 +76,18 @@ var RenderMediaInline = function RenderMediaInline(props) {
|
|
|
68
76
|
return _ref.apply(this, arguments);
|
|
69
77
|
};
|
|
70
78
|
}();
|
|
79
|
+
/*
|
|
80
|
+
* Only show the loading view if the media provider is not ready
|
|
81
|
+
* prevents calling the media API before the provider is ready
|
|
82
|
+
*/
|
|
83
|
+
|
|
84
|
+
|
|
85
|
+
if (!viewMediaClientConfigState) {
|
|
86
|
+
return /*#__PURE__*/_react.default.createElement(_mediaUi.MediaInlineCardLoadingView, {
|
|
87
|
+
message: "",
|
|
88
|
+
isSelected: false
|
|
89
|
+
});
|
|
90
|
+
}
|
|
71
91
|
|
|
72
92
|
return /*#__PURE__*/_react.default.createElement(_mediaCard.MediaInlineCard, {
|
|
73
93
|
identifier: props.identifier,
|
|
@@ -81,17 +101,33 @@ exports.RenderMediaInline = RenderMediaInline;
|
|
|
81
101
|
var MediaInline = function MediaInline(props) {
|
|
82
102
|
var collection = props.collection,
|
|
83
103
|
id = props.id,
|
|
84
|
-
providers = props.providers
|
|
104
|
+
providers = props.providers,
|
|
105
|
+
intl = props.intl;
|
|
85
106
|
var identifier = {
|
|
86
107
|
id: id,
|
|
87
108
|
mediaItemType: 'file',
|
|
88
109
|
collectionName: collection
|
|
89
110
|
};
|
|
90
|
-
|
|
111
|
+
var defaultIntl = (0, _reactIntlNext.createIntl)({
|
|
112
|
+
locale: 'en'
|
|
113
|
+
});
|
|
114
|
+
return /*#__PURE__*/_react.default.createElement("span", (0, _extends2.default)({}, (0, _MediaCard.getClipboardAttrs)({
|
|
115
|
+
id: id,
|
|
116
|
+
collection: collection
|
|
117
|
+
}), {
|
|
118
|
+
"data-node-type": "mediaInline"
|
|
119
|
+
}), /*#__PURE__*/_react.default.createElement(_providerFactory.WithProviders, {
|
|
91
120
|
providers: ['mediaProvider'],
|
|
92
121
|
providerFactory: providers,
|
|
93
122
|
renderNode: function renderNode(providers) {
|
|
94
123
|
var mediaProvider = providers.mediaProvider;
|
|
124
|
+
|
|
125
|
+
if (!mediaProvider) {
|
|
126
|
+
return /*#__PURE__*/_react.default.createElement(_mediaUi.MediaInlineCardErroredView, {
|
|
127
|
+
message: (intl || defaultIntl).formatMessage(_mediaUi.messages.couldnt_load_file)
|
|
128
|
+
});
|
|
129
|
+
}
|
|
130
|
+
|
|
95
131
|
return /*#__PURE__*/_react.default.createElement(RenderMediaInline, {
|
|
96
132
|
identifier: identifier,
|
|
97
133
|
mediaProvider: mediaProvider
|
|
@@ -100,5 +136,6 @@ var MediaInline = function MediaInline(props) {
|
|
|
100
136
|
}));
|
|
101
137
|
};
|
|
102
138
|
|
|
103
|
-
var _default = MediaInline;
|
|
139
|
+
var _default = (0, _reactIntlNext.injectIntl)(MediaInline);
|
|
140
|
+
|
|
104
141
|
exports.default = _default;
|
|
@@ -77,7 +77,6 @@ var MediaSingle = function MediaSingle(props) {
|
|
|
77
77
|
var rendererAppearance = props.rendererAppearance,
|
|
78
78
|
featureFlags = props.featureFlags,
|
|
79
79
|
isInsideOfBlockNode = props.isInsideOfBlockNode,
|
|
80
|
-
allowDynamicTextSizing = props.allowDynamicTextSizing,
|
|
81
80
|
layout = props.layout,
|
|
82
81
|
children = props.children,
|
|
83
82
|
pctWidth = props.width;
|
|
@@ -157,7 +156,6 @@ var MediaSingle = function MediaSingle(props) {
|
|
|
157
156
|
|
|
158
157
|
var calcDimensions = function calcDimensions(mediaContainerWidth, mediaBreakpoint) {
|
|
159
158
|
var containerWidth = getMediaContainerWidth(mediaContainerWidth, layout);
|
|
160
|
-
var breakpoint = mediaBreakpoint || (0, _ui.getBreakpoint)(containerWidth);
|
|
161
159
|
var maxWidth = containerWidth;
|
|
162
160
|
var maxHeight = height / width * maxWidth;
|
|
163
161
|
var cardDimensions = {
|
|
@@ -167,12 +165,10 @@ var MediaSingle = function MediaSingle(props) {
|
|
|
167
165
|
var nonFullWidthSize = containerWidth;
|
|
168
166
|
|
|
169
167
|
if (!isInsideOfBlockNode && rendererAppearance !== 'comment') {
|
|
170
|
-
var isContainerSizeGreaterThanMaxFullPageWidth = containerWidth - padding >=
|
|
168
|
+
var isContainerSizeGreaterThanMaxFullPageWidth = containerWidth - padding >= _editorSharedStyles.akEditorDefaultLayoutWidth;
|
|
171
169
|
|
|
172
|
-
if (isContainerSizeGreaterThanMaxFullPageWidth
|
|
173
|
-
nonFullWidthSize =
|
|
174
|
-
} else if (isContainerSizeGreaterThanMaxFullPageWidth) {
|
|
175
|
-
nonFullWidthSize = (0, _editorSharedStyles.getAkEditorFullPageMaxWidth)(allowDynamicTextSizing);
|
|
170
|
+
if (isContainerSizeGreaterThanMaxFullPageWidth) {
|
|
171
|
+
nonFullWidthSize = _editorSharedStyles.akEditorDefaultLayoutWidth;
|
|
176
172
|
} else {
|
|
177
173
|
nonFullWidthSize = containerWidth - padding;
|
|
178
174
|
}
|
|
@@ -27,11 +27,7 @@ var getTableLayoutWidth = function getTableLayoutWidth(layout, opts) {
|
|
|
27
27
|
return _editorSharedStyles.akEditorWideLayoutWidth;
|
|
28
28
|
|
|
29
29
|
default:
|
|
30
|
-
|
|
31
|
-
containerWidth = _ref.containerWidth,
|
|
32
|
-
isDynamicTextSizingEnabled = _ref.isDynamicTextSizingEnabled;
|
|
33
|
-
|
|
34
|
-
return (0, _breakoutSsr.calcLineLength)(containerWidth, isDynamicTextSizingEnabled);
|
|
30
|
+
return (0, _breakoutSsr.calcLineLength)();
|
|
35
31
|
}
|
|
36
32
|
};
|
|
37
33
|
|
|
@@ -57,10 +53,10 @@ var fixColumnWidth = function fixColumnWidth(columnWidth, _tableWidth, _layoutWi
|
|
|
57
53
|
columnWidth - _styles.tableCellBorderWidth, zeroWidthColumnsCount ? _editorSharedStyles.akEditorTableLegacyCellMinWidth : _styles.tableCellMinWidth);
|
|
58
54
|
};
|
|
59
55
|
|
|
60
|
-
var calcScalePercent = function calcScalePercent(
|
|
61
|
-
var renderWidth =
|
|
62
|
-
tableWidth =
|
|
63
|
-
maxScale =
|
|
56
|
+
var calcScalePercent = function calcScalePercent(_ref) {
|
|
57
|
+
var renderWidth = _ref.renderWidth,
|
|
58
|
+
tableWidth = _ref.tableWidth,
|
|
59
|
+
maxScale = _ref.maxScale;
|
|
64
60
|
var diffPercent = 1 - renderWidth / tableWidth;
|
|
65
61
|
return diffPercent < maxScale ? diffPercent : maxScale;
|
|
66
62
|
};
|
|
@@ -71,8 +67,7 @@ var Colgroup = function Colgroup(props) {
|
|
|
71
67
|
var columnWidths = props.columnWidths,
|
|
72
68
|
layout = props.layout,
|
|
73
69
|
isNumberColumnEnabled = props.isNumberColumnEnabled,
|
|
74
|
-
renderWidth = props.renderWidth
|
|
75
|
-
allowDynamicTextSizing = props.allowDynamicTextSizing;
|
|
70
|
+
renderWidth = props.renderWidth;
|
|
76
71
|
|
|
77
72
|
if (!columnWidths || !isTableResized(columnWidths)) {
|
|
78
73
|
return null;
|
|
@@ -80,7 +75,6 @@ var Colgroup = function Colgroup(props) {
|
|
|
80
75
|
|
|
81
76
|
|
|
82
77
|
var layoutWidth = getTableLayoutWidth(layout, {
|
|
83
|
-
isDynamicTextSizingEnabled: allowDynamicTextSizing,
|
|
84
78
|
containerWidth: renderWidth
|
|
85
79
|
});
|
|
86
80
|
var maxTableWidth = renderWidth < layoutWidth ? renderWidth : layoutWidth; // If table has a layout of default, it is confined by the defined column width.
|
|
@@ -84,7 +84,6 @@ var StickyTable = function StickyTable(_ref) {
|
|
|
84
84
|
children = _ref.children,
|
|
85
85
|
columnWidths = _ref.columnWidths,
|
|
86
86
|
renderWidth = _ref.renderWidth,
|
|
87
|
-
allowDynamicTextSizing = _ref.allowDynamicTextSizing,
|
|
88
87
|
rowHeight = _ref.rowHeight;
|
|
89
88
|
return (0, _react2.jsx)("div", {
|
|
90
89
|
css: {
|
|
@@ -97,7 +96,7 @@ var StickyTable = function StickyTable(_ref) {
|
|
|
97
96
|
mode: rowHeight > 300 ? 'none' : mode,
|
|
98
97
|
wrapperWidth: wrapperWidth
|
|
99
98
|
}, (0, _react2.jsx)("div", {
|
|
100
|
-
className: "".concat(_styles.TableSharedCssClassName.TABLE_CONTAINER, " ").concat(shadowClassNames),
|
|
99
|
+
className: "".concat(_styles.TableSharedCssClassName.TABLE_CONTAINER, " ").concat(shadowClassNames || ''),
|
|
101
100
|
"data-layout": layout,
|
|
102
101
|
style: {
|
|
103
102
|
width: tableWidth
|
|
@@ -112,8 +111,7 @@ var StickyTable = function StickyTable(_ref) {
|
|
|
112
111
|
columnWidths: columnWidths,
|
|
113
112
|
layout: layout,
|
|
114
113
|
isNumberColumnEnabled: isNumberColumnEnabled,
|
|
115
|
-
renderWidth: renderWidth
|
|
116
|
-
allowDynamicTextSizing: allowDynamicTextSizing
|
|
114
|
+
renderWidth: renderWidth
|
|
117
115
|
},
|
|
118
116
|
/**
|
|
119
117
|
* @see https://product-fabric.atlassian.net/browse/ED-10235
|
|
@@ -17,7 +17,6 @@ var Table = /*#__PURE__*/_react.default.memo(function (_ref) {
|
|
|
17
17
|
columnWidths = _ref.columnWidths,
|
|
18
18
|
layout = _ref.layout,
|
|
19
19
|
renderWidth = _ref.renderWidth,
|
|
20
|
-
allowDynamicTextSizing = _ref.allowDynamicTextSizing,
|
|
21
20
|
children = _ref.children;
|
|
22
21
|
return /*#__PURE__*/_react.default.createElement("table", {
|
|
23
22
|
"data-number-column": isNumberColumnEnabled,
|
|
@@ -26,8 +25,7 @@ var Table = /*#__PURE__*/_react.default.memo(function (_ref) {
|
|
|
26
25
|
columnWidths: columnWidths,
|
|
27
26
|
layout: layout,
|
|
28
27
|
isNumberColumnEnabled: isNumberColumnEnabled,
|
|
29
|
-
renderWidth: renderWidth
|
|
30
|
-
allowDynamicTextSizing: allowDynamicTextSizing
|
|
28
|
+
renderWidth: renderWidth
|
|
31
29
|
}), /*#__PURE__*/_react.default.createElement("tbody", null, children));
|
|
32
30
|
});
|
|
33
31
|
|
|
@@ -307,13 +307,12 @@ var TableContainer = /*#__PURE__*/function (_React$Component) {
|
|
|
307
307
|
isNumberColumnEnabled = _this$props.isNumberColumnEnabled,
|
|
308
308
|
layout = _this$props.layout,
|
|
309
309
|
renderWidth = _this$props.renderWidth,
|
|
310
|
-
allowDynamicTextSizing = _this$props.allowDynamicTextSizing,
|
|
311
310
|
columnWidths = _this$props.columnWidths,
|
|
312
311
|
stickyHeaders = _this$props.stickyHeaders,
|
|
313
312
|
tableNode = _this$props.tableNode;
|
|
314
313
|
var stickyMode = this.state.stickyMode;
|
|
315
314
|
var tableWidth = (0, _styles.calcTableWidth)(layout, renderWidth, false);
|
|
316
|
-
var lineLength = (0, _breakoutSsr.calcLineLength)(
|
|
315
|
+
var lineLength = (0, _breakoutSsr.calcLineLength)();
|
|
317
316
|
var left;
|
|
318
317
|
|
|
319
318
|
if (canUseLinelength(this.props.rendererAppearance) && tableWidth !== 'inherit') {
|
|
@@ -338,10 +337,9 @@ var TableContainer = /*#__PURE__*/function (_React$Component) {
|
|
|
338
337
|
innerRef: this.stickyWrapperRef,
|
|
339
338
|
wrapperWidth: wrapperWidth,
|
|
340
339
|
columnWidths: columnWidths,
|
|
341
|
-
rowHeight: this.headerRowHeight
|
|
342
|
-
allowDynamicTextSizing: allowDynamicTextSizing
|
|
340
|
+
rowHeight: this.headerRowHeight
|
|
343
341
|
}, [children && children[0]]), /*#__PURE__*/_react.default.createElement("div", {
|
|
344
|
-
className: "".concat(_styles.TableSharedCssClassName.TABLE_CONTAINER, " ").concat(this.props.shadowClassNames),
|
|
342
|
+
className: "".concat(_styles.TableSharedCssClassName.TABLE_CONTAINER, " ").concat(this.props.shadowClassNames || ''),
|
|
345
343
|
"data-layout": layout,
|
|
346
344
|
ref: this.props.handleRef,
|
|
347
345
|
style: {
|
|
@@ -357,8 +355,7 @@ var TableContainer = /*#__PURE__*/function (_React$Component) {
|
|
|
357
355
|
columnWidths: columnWidths,
|
|
358
356
|
layout: layout,
|
|
359
357
|
isNumberColumnEnabled: isNumberColumnEnabled,
|
|
360
|
-
renderWidth: renderWidth
|
|
361
|
-
allowDynamicTextSizing: allowDynamicTextSizing
|
|
358
|
+
renderWidth: renderWidth
|
|
362
359
|
}, this.grabFirstRowRef(children)))));
|
|
363
360
|
}
|
|
364
361
|
}]);
|
|
@@ -440,14 +437,28 @@ var TableProcessor = /*#__PURE__*/function (_React$Component2) {
|
|
|
440
437
|
|
|
441
438
|
exports.TableProcessor = TableProcessor;
|
|
442
439
|
var TableWithShadows = (0, _ui.overflowShadow)(TableProcessor, {
|
|
443
|
-
overflowSelector: ".".concat(_styles.TableSharedCssClassName.TABLE_NODE_WRAPPER)
|
|
440
|
+
overflowSelector: ".".concat(_styles.TableSharedCssClassName.TABLE_NODE_WRAPPER),
|
|
441
|
+
useShadowObserver: true
|
|
444
442
|
});
|
|
445
443
|
|
|
446
444
|
var TableWithWidth = function TableWithWidth(props) {
|
|
447
445
|
return /*#__PURE__*/_react.default.createElement(_ui.WidthConsumer, null, function (_ref2) {
|
|
446
|
+
var _props$columnWidths;
|
|
447
|
+
|
|
448
448
|
var width = _ref2.width;
|
|
449
449
|
var renderWidth = props.rendererAppearance === 'full-page' ? width - _style.FullPagePadding * 2 : width;
|
|
450
|
-
|
|
450
|
+
var colWidthsSum = ((_props$columnWidths = props.columnWidths) === null || _props$columnWidths === void 0 ? void 0 : _props$columnWidths.reduce(function (total, val) {
|
|
451
|
+
return total + val;
|
|
452
|
+
}, 0)) || 0;
|
|
453
|
+
|
|
454
|
+
if (colWidthsSum) {
|
|
455
|
+
return /*#__PURE__*/_react.default.createElement(TableWithShadows, (0, _extends2.default)({
|
|
456
|
+
renderWidth: renderWidth
|
|
457
|
+
}, props));
|
|
458
|
+
} // there should not be a case when colWidthsSum is 0 and table is in overflow state - so no need to render shadows in this case
|
|
459
|
+
|
|
460
|
+
|
|
461
|
+
return /*#__PURE__*/_react.default.createElement(TableProcessor, (0, _extends2.default)({
|
|
451
462
|
renderWidth: renderWidth
|
|
452
463
|
}, props));
|
|
453
464
|
});
|
|
@@ -168,8 +168,10 @@ var withSortableColumn = function withSortableColumn(WrapperComponent) {
|
|
|
168
168
|
_this = _super2.call(this, props);
|
|
169
169
|
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onKeyPress", function (event) {
|
|
170
170
|
var keys = [' ', 'Enter', 'Spacebar'];
|
|
171
|
+
var _ref = event.target,
|
|
172
|
+
tagName = _ref.tagName; // trigger sorting if space or enter are clicked but not when in an input field (template variables)
|
|
171
173
|
|
|
172
|
-
if (keys.includes(event.key)) {
|
|
174
|
+
if (keys.includes(event.key) && !IgnoreSorting.includes(tagName)) {
|
|
173
175
|
event.preventDefault();
|
|
174
176
|
|
|
175
177
|
_this.onClick(event);
|
|
@@ -177,8 +179,8 @@ var withSortableColumn = function withSortableColumn(WrapperComponent) {
|
|
|
177
179
|
});
|
|
178
180
|
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onClick", function (event) {
|
|
179
181
|
// ignore sorting when specific elements are clicked
|
|
180
|
-
var
|
|
181
|
-
tagName =
|
|
182
|
+
var _ref2 = event.target,
|
|
183
|
+
tagName = _ref2.tagName;
|
|
182
184
|
|
|
183
185
|
if (IgnoreSorting.includes(tagName)) {
|
|
184
186
|
return;
|
|
@@ -23,7 +23,7 @@ var _events = require("./analytics/events");
|
|
|
23
23
|
|
|
24
24
|
var _unsupportedContent = require("./analytics/unsupported-content");
|
|
25
25
|
|
|
26
|
-
var
|
|
26
|
+
var _transforms = require("@atlaskit/adf-utils/transforms");
|
|
27
27
|
|
|
28
28
|
var SUPPORTS_HIRES_TIMER_API = !!(window.performance && performance.now);
|
|
29
29
|
|
|
@@ -44,7 +44,7 @@ var _validation = function _validation(doc, schema, adfStage, useSpecBasedValida
|
|
|
44
44
|
if (useSpecBasedValidator) {
|
|
45
45
|
// link mark on mediaSingle is deprecated, need to move link mark to child media node
|
|
46
46
|
// https://product-fabric.atlassian.net/browse/ED-14043
|
|
47
|
-
var _transformMediaLinkMa = (0,
|
|
47
|
+
var _transformMediaLinkMa = (0, _transforms.transformMediaLinkMarks)(doc),
|
|
48
48
|
transformedAdf = _transformMediaLinkMa.transformedAdf,
|
|
49
49
|
isTransformed = _transformMediaLinkMa.isTransformed;
|
|
50
50
|
|
package/dist/cjs/ui/MediaCard.js
CHANGED
|
@@ -29,7 +29,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
|
|
|
29
29
|
|
|
30
30
|
var _react = _interopRequireWildcard(require("react"));
|
|
31
31
|
|
|
32
|
-
var
|
|
32
|
+
var _traverse = require("@atlaskit/adf-utils/traverse");
|
|
33
33
|
|
|
34
34
|
var _mediaCard = require("@atlaskit/media-card");
|
|
35
35
|
|
|
@@ -56,7 +56,7 @@ var getListOfIdentifiersFromDoc = function getListOfIdentifiersFromDoc(doc) {
|
|
|
56
56
|
return [];
|
|
57
57
|
}
|
|
58
58
|
|
|
59
|
-
return (0,
|
|
59
|
+
return (0, _traverse.filter)(doc, function (node) {
|
|
60
60
|
return node.type === 'media';
|
|
61
61
|
}).reduce(function (identifierList, mediaNode) {
|
|
62
62
|
if (mediaNode.attrs) {
|
|
@@ -19,9 +19,7 @@ var _utils = require("@atlaskit/editor-common/utils");
|
|
|
19
19
|
*
|
|
20
20
|
* More info: https://product-fabric.atlassian.net/wiki/spaces/E/pages/1216218119/Renderer+SSR+for+Breakout+Nodes
|
|
21
21
|
*/
|
|
22
|
-
function BreakoutSSRInlineScript(
|
|
23
|
-
var allowDynamicTextSizing = _ref.allowDynamicTextSizing;
|
|
24
|
-
|
|
22
|
+
function BreakoutSSRInlineScript() {
|
|
25
23
|
/**
|
|
26
24
|
* Should only inline this script while SSR,
|
|
27
25
|
* not needed on the client side.
|
|
@@ -31,7 +29,7 @@ function BreakoutSSRInlineScript(_ref) {
|
|
|
31
29
|
}
|
|
32
30
|
|
|
33
31
|
var id = Math.floor(Math.random() * (9999999999 - 9999 + 1)) + 9999;
|
|
34
|
-
var context = createBreakoutInlineScript(id
|
|
32
|
+
var context = createBreakoutInlineScript(id);
|
|
35
33
|
return /*#__PURE__*/_react.default.createElement("script", {
|
|
36
34
|
"data-breakout-script-id": id,
|
|
37
35
|
dangerouslySetInnerHTML: {
|
|
@@ -40,14 +38,14 @@ function BreakoutSSRInlineScript(_ref) {
|
|
|
40
38
|
});
|
|
41
39
|
}
|
|
42
40
|
|
|
43
|
-
function createBreakoutInlineScript(id
|
|
44
|
-
return "\n (function(window){\n ".concat(breakoutInlineScriptContext, ";\n (").concat(applyBreakoutAfterSSR.toString(), ")(\"").concat(id, "\",
|
|
41
|
+
function createBreakoutInlineScript(id) {
|
|
42
|
+
return "\n (function(window){\n ".concat(breakoutInlineScriptContext, ";\n (").concat(applyBreakoutAfterSSR.toString(), ")(\"").concat(id, "\", breakoutConsts);\n })(window);\n");
|
|
45
43
|
}
|
|
46
44
|
|
|
47
45
|
var breakoutInlineScriptContext = "\n var breakoutConsts = ".concat(JSON.stringify(_utils.breakoutConsts), ";\n breakoutConsts.mapBreakpointToLayoutMaxWidth = ").concat(_utils.breakoutConsts.mapBreakpointToLayoutMaxWidth.toString(), ";\n breakoutConsts.getBreakpoint = ").concat(_utils.breakoutConsts.getBreakpoint.toString(), ";\n breakoutConsts.calcBreakoutWidth = ").concat(_utils.breakoutConsts.calcBreakoutWidth.toString(), ";\n breakoutConsts.calcLineLength = ").concat(_utils.breakoutConsts.calcLineLength.toString(), ";\n breakoutConsts.calcWideWidth = ").concat(_utils.breakoutConsts.calcWideWidth.toString(), ";\n");
|
|
48
46
|
exports.breakoutInlineScriptContext = breakoutInlineScriptContext;
|
|
49
47
|
|
|
50
|
-
function applyBreakoutAfterSSR(id,
|
|
48
|
+
function applyBreakoutAfterSSR(id, breakoutConsts) {
|
|
51
49
|
var MEDIA_NODE_TYPE = 'mediaSingle';
|
|
52
50
|
var WIDE_LAYOUT_MODES = ['full-width', 'wide'];
|
|
53
51
|
|
|
@@ -101,7 +99,7 @@ function applyBreakoutAfterSSR(id, allowDynamicTextSizing, breakoutConsts) {
|
|
|
101
99
|
// https://bitbucket.org/atlassian/atlassian-frontend/src/77938aee0c140d02ff99b98a03849be1236865b4/packages/editor/renderer/src/react/nodes/table.tsx#table.tsx-235:245
|
|
102
100
|
|
|
103
101
|
if (node.classList.contains('pm-table-container')) {
|
|
104
|
-
var lineLength = breakoutConsts.calcLineLength(
|
|
102
|
+
var lineLength = breakoutConsts.calcLineLength();
|
|
105
103
|
var left = lineLength / 2 - parseInt(width) / 2;
|
|
106
104
|
|
|
107
105
|
if (left < 0) {
|
|
@@ -31,7 +31,7 @@ var _react2 = require("@emotion/react");
|
|
|
31
31
|
|
|
32
32
|
var _schemaDefault = require("@atlaskit/adf-schema/schema-default");
|
|
33
33
|
|
|
34
|
-
var
|
|
34
|
+
var _traverse = require("@atlaskit/adf-utils/traverse");
|
|
35
35
|
|
|
36
36
|
var _providerFactory = require("@atlaskit/editor-common/provider-factory");
|
|
37
37
|
|
|
@@ -224,7 +224,7 @@ var Renderer = /*#__PURE__*/function (_PureComponent) {
|
|
|
224
224
|
platform: _events.PLATFORM.WEB,
|
|
225
225
|
duration: duration,
|
|
226
226
|
ttfb: (0, _utils.getResponseEndTime)(),
|
|
227
|
-
nodes: (0,
|
|
227
|
+
nodes: (0, _traverse.reduce)(_this2.props.document, function (acc, node) {
|
|
228
228
|
acc[node.type] = (acc[node.type] || 0) + 1;
|
|
229
229
|
return acc;
|
|
230
230
|
}, {}),
|
|
@@ -266,7 +266,6 @@ var Renderer = /*#__PURE__*/function (_PureComponent) {
|
|
|
266
266
|
appearance: props.appearance,
|
|
267
267
|
disableHeadingIDs: props.disableHeadingIDs,
|
|
268
268
|
disableActions: props.disableActions,
|
|
269
|
-
allowDynamicTextSizing: props.allowDynamicTextSizing,
|
|
270
269
|
allowHeadingAnchorLinks: props.allowHeadingAnchorLinks,
|
|
271
270
|
allowColumnSorting: props.allowColumnSorting,
|
|
272
271
|
fireAnalyticsEvent: this.fireAnalyticsEvent,
|
|
@@ -295,7 +294,6 @@ var Renderer = /*#__PURE__*/function (_PureComponent) {
|
|
|
295
294
|
onError = _this$props.onError,
|
|
296
295
|
appearance = _this$props.appearance,
|
|
297
296
|
adfStage = _this$props.adfStage,
|
|
298
|
-
allowDynamicTextSizing = _this$props.allowDynamicTextSizing,
|
|
299
297
|
truncated = _this$props.truncated,
|
|
300
298
|
maxHeight = _this$props.maxHeight,
|
|
301
299
|
fadeOutHeight = _this$props.fadeOutHeight,
|
|
@@ -377,7 +375,6 @@ var Renderer = /*#__PURE__*/function (_PureComponent) {
|
|
|
377
375
|
}
|
|
378
376
|
}, (0, _react2.jsx)(_SmartCardStorage.Provider, null, (0, _react2.jsx)(RendererWrapper, {
|
|
379
377
|
appearance: appearance,
|
|
380
|
-
dynamicTextSizing: !!allowDynamicTextSizing,
|
|
381
378
|
allowNestedHeaderLinks: allowNestedHeaderLinks,
|
|
382
379
|
allowColumnSorting: allowColumnSorting,
|
|
383
380
|
allowCopyToClipboard: allowCopyToClipboard,
|
|
@@ -386,9 +383,7 @@ var Renderer = /*#__PURE__*/function (_PureComponent) {
|
|
|
386
383
|
innerRef: this.editorRef,
|
|
387
384
|
onClick: handleWrapperOnClick,
|
|
388
385
|
onMouseDown: this.onMouseDownEditView
|
|
389
|
-
}, enableSsrInlineScripts ? (0, _react2.jsx)(_breakoutSsr.BreakoutSSRInlineScript, {
|
|
390
|
-
allowDynamicTextSizing: !!allowDynamicTextSizing
|
|
391
|
-
}) : null, (0, _react2.jsx)(RendererActionsInternalUpdater, {
|
|
386
|
+
}, enableSsrInlineScripts ? (0, _react2.jsx)(_breakoutSsr.BreakoutSSRInlineScript, null) : null, (0, _react2.jsx)(RendererActionsInternalUpdater, {
|
|
392
387
|
doc: pmDoc,
|
|
393
388
|
schema: schema,
|
|
394
389
|
onAnalyticsEvent: this.fireAnalyticsEvent
|
|
@@ -413,7 +408,6 @@ var Renderer = /*#__PURE__*/function (_PureComponent) {
|
|
|
413
408
|
|
|
414
409
|
return (0, _react2.jsx)(RendererWrapper, {
|
|
415
410
|
appearance: appearance,
|
|
416
|
-
dynamicTextSizing: !!allowDynamicTextSizing,
|
|
417
411
|
allowCopyToClipboard: allowCopyToClipboard,
|
|
418
412
|
allowPlaceholderText: allowPlaceholderText,
|
|
419
413
|
allowColumnSorting: allowColumnSorting,
|
|
@@ -469,7 +463,6 @@ var RendererWithAnalytics = /*#__PURE__*/_react.default.memo(function (props) {
|
|
|
469
463
|
|
|
470
464
|
var RendererWrapper = /*#__PURE__*/_react.default.memo(function (props) {
|
|
471
465
|
var allowColumnSorting = props.allowColumnSorting,
|
|
472
|
-
dynamicTextSizing = props.dynamicTextSizing,
|
|
473
466
|
allowNestedHeaderLinks = props.allowNestedHeaderLinks,
|
|
474
467
|
innerRef = props.innerRef,
|
|
475
468
|
appearance = props.appearance,
|
|
@@ -479,8 +472,7 @@ var RendererWrapper = /*#__PURE__*/_react.default.memo(function (props) {
|
|
|
479
472
|
return (0, _react2.jsx)(_ui.WidthProvider, {
|
|
480
473
|
className: "ak-renderer-wrapper"
|
|
481
474
|
}, (0, _react2.jsx)(_ui.BaseTheme, {
|
|
482
|
-
|
|
483
|
-
baseFontSize: !dynamicTextSizing && appearance && appearance !== 'comment' ? _editorSharedStyles.akEditorFullPageDefaultFontSize : undefined
|
|
475
|
+
baseFontSize: appearance && appearance !== 'comment' ? _editorSharedStyles.akEditorFullPageDefaultFontSize : undefined
|
|
484
476
|
}, (0, _react2.jsx)("div", {
|
|
485
477
|
ref: innerRef,
|
|
486
478
|
onClick: onClick,
|