@atlaskit/renderer 126.11.0 → 126.12.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/nodes/codeBlock/components/codeBlockCopyButton.js +3 -1
- package/dist/cjs/react/nodes/heading-anchor.js +2 -3
- package/dist/cjs/react/nodes/inlineCard.js +22 -10
- package/dist/cjs/ui/Renderer/RendererStyleContainer.js +26 -28
- package/dist/cjs/ui/Renderer/index.js +1 -1
- package/dist/cjs/ui/annotations/element/mark.js +17 -4
- package/dist/es2019/react/nodes/codeBlock/components/codeBlockCopyButton.js +3 -1
- package/dist/es2019/react/nodes/heading-anchor.js +2 -3
- package/dist/es2019/react/nodes/inlineCard.js +22 -10
- package/dist/es2019/ui/Renderer/RendererStyleContainer.js +26 -28
- package/dist/es2019/ui/Renderer/index.js +1 -1
- package/dist/es2019/ui/annotations/element/mark.js +18 -5
- package/dist/esm/react/nodes/codeBlock/components/codeBlockCopyButton.js +3 -1
- package/dist/esm/react/nodes/heading-anchor.js +2 -3
- package/dist/esm/react/nodes/inlineCard.js +22 -10
- package/dist/esm/ui/Renderer/RendererStyleContainer.js +26 -28
- package/dist/esm/ui/Renderer/index.js +1 -1
- package/dist/esm/ui/annotations/element/mark.js +18 -5
- package/dist/types/types/smartLinksOptions.d.ts +10 -0
- package/dist/types/ui/annotations/element/mark.d.ts +18 -0
- package/dist/types-ts4.5/types/smartLinksOptions.d.ts +10 -0
- package/dist/types-ts4.5/ui/annotations/element/mark.d.ts +18 -0
- package/package.json +7 -4
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,30 @@
|
|
|
1
1
|
# @atlaskit/renderer
|
|
2
2
|
|
|
3
|
+
## 126.12.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [`e1489e8d410d5`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/e1489e8d410d5) -
|
|
8
|
+
Exposing optional URL-based Suspense boundaries through SmartCardProvider for renderer inline card
|
|
9
|
+
nodes
|
|
10
|
+
|
|
11
|
+
### Patch Changes
|
|
12
|
+
|
|
13
|
+
- [`63173c2b1171a`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/63173c2b1171a) -
|
|
14
|
+
[ux] Enable sticky header for reference synced blocks in Editor
|
|
15
|
+
- Updated dependencies
|
|
16
|
+
|
|
17
|
+
## 126.11.1
|
|
18
|
+
|
|
19
|
+
### Patch Changes
|
|
20
|
+
|
|
21
|
+
- [`39034774c001f`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/39034774c001f) -
|
|
22
|
+
[ux] Fixed regression CONFCLOUD-83763 where inline comments screen reader would see css variables
|
|
23
|
+
instead of start/end comment text markers
|
|
24
|
+
- [`d2f1426fe5b85`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/d2f1426fe5b85) -
|
|
25
|
+
[ux] ENGHEALTH-46817 Add feature gated a11y eslint fixes across editor packages
|
|
26
|
+
- Updated dependencies
|
|
27
|
+
|
|
3
28
|
## 126.11.0
|
|
4
29
|
|
|
5
30
|
### Minor Changes
|
|
@@ -9,6 +9,7 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
|
|
|
9
9
|
var _customThemeButton = _interopRequireDefault(require("@atlaskit/button/custom-theme-button"));
|
|
10
10
|
var _messages = require("@atlaskit/editor-common/messages");
|
|
11
11
|
var _copy = _interopRequireDefault(require("@atlaskit/icon/core/copy"));
|
|
12
|
+
var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
|
|
12
13
|
var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
|
|
13
14
|
var _react = require("@emotion/react");
|
|
14
15
|
var _react2 = require("react");
|
|
@@ -45,7 +46,8 @@ var CopyButton = function CopyButton(_ref) {
|
|
|
45
46
|
hideTooltipOnClick: false,
|
|
46
47
|
position: "top"
|
|
47
48
|
}, (0, _react.jsx)("div", {
|
|
48
|
-
onMouseLeave: onMouseLeave
|
|
49
|
+
onMouseLeave: onMouseLeave,
|
|
50
|
+
onBlur: (0, _expValEquals.expValEquals)('platform_editor_a11y_eslint_fix', 'isEnabled', true) ? onMouseLeave : undefined
|
|
49
51
|
}, (0, _react.jsx)(_customThemeButton.default, {
|
|
50
52
|
appearance: "subtle",
|
|
51
53
|
"aria-haspopup": true,
|
|
@@ -118,10 +118,9 @@ var HeadingAnchor = /*#__PURE__*/function (_React$PureComponent) {
|
|
|
118
118
|
return (0, _react2.jsx)("button", {
|
|
119
119
|
"data-testid": "anchor-button",
|
|
120
120
|
id: _this.copyLinkId,
|
|
121
|
-
css: copyAnchorButtonStyles
|
|
122
|
-
// eslint-disable-next-line @atlassian/a11y/mouse-events-have-key-events
|
|
123
|
-
,
|
|
121
|
+
css: copyAnchorButtonStyles,
|
|
124
122
|
onMouseLeave: _this.resetMessage,
|
|
123
|
+
onBlur: (0, _expValEquals.expValEquals)('platform_editor_a11y_eslint_fix', 'isEnabled', true) ? _this.resetMessage : undefined,
|
|
125
124
|
onClick: _this.copyToClipboard,
|
|
126
125
|
"aria-hidden": hideFromScreenReader,
|
|
127
126
|
tabIndex: tabIndex,
|
|
@@ -31,6 +31,7 @@ var _linkExtractors = require("@atlaskit/link-extractors");
|
|
|
31
31
|
* @jsxRuntime classic
|
|
32
32
|
* @jsx jsx
|
|
33
33
|
*/
|
|
34
|
+
/* eslint-disable jsdoc/check-tag-names */
|
|
34
35
|
|
|
35
36
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
36
37
|
|
|
@@ -150,6 +151,17 @@ var InlineCard = function InlineCard(props) {
|
|
|
150
151
|
onSetLinkTarget = props.onSetLinkTarget;
|
|
151
152
|
var portal = (0, _PortalContext.usePortal)(props);
|
|
152
153
|
var cardContext = (0, _linkProvider.useSmartCardContext)();
|
|
154
|
+
var SuspenseWrapperForUrl = smartLinks === null || smartLinks === void 0 ? void 0 : smartLinks.SuspenseWrapperForUrl;
|
|
155
|
+
|
|
156
|
+
// Helper fn to conditionally wrap cards when suspense boundary is passed in via product
|
|
157
|
+
var wrapWithSuspense = function wrapWithSuspense(card) {
|
|
158
|
+
if (SuspenseWrapperForUrl && url) {
|
|
159
|
+
return (0, _react2.jsx)(SuspenseWrapperForUrl, {
|
|
160
|
+
url: url
|
|
161
|
+
}, card);
|
|
162
|
+
}
|
|
163
|
+
return card;
|
|
164
|
+
};
|
|
153
165
|
var reload = (0, _hooks.useSmartLinkReload)({
|
|
154
166
|
url: url || ''
|
|
155
167
|
});
|
|
@@ -209,23 +221,23 @@ var InlineCard = function InlineCard(props) {
|
|
|
209
221
|
// eslint-disable-next-line react/jsx-props-no-spreading
|
|
210
222
|
}, inlineAnnotationProps), (0, _react2.jsx)(_analyticsNext.AnalyticsContext, {
|
|
211
223
|
data: analyticsData
|
|
212
|
-
}, (0, _react2.jsx)(_ssr.CardSSR, {
|
|
224
|
+
}, wrapWithSuspense((0, _react2.jsx)(_ssr.CardSSR, {
|
|
213
225
|
appearance: "inline",
|
|
214
226
|
url: url,
|
|
215
227
|
showHoverPreview: !hideHoverPreview,
|
|
216
228
|
actionOptions: actionOptions,
|
|
217
229
|
onClick: onClick
|
|
218
|
-
})));
|
|
230
|
+
}))));
|
|
219
231
|
}
|
|
220
232
|
return (0, _react2.jsx)(_analyticsNext.AnalyticsContext, {
|
|
221
233
|
data: analyticsData
|
|
222
|
-
}, (0, _react2.jsx)(_ssr.CardSSR, {
|
|
234
|
+
}, wrapWithSuspense((0, _react2.jsx)(_ssr.CardSSR, {
|
|
223
235
|
appearance: "inline",
|
|
224
236
|
url: url,
|
|
225
237
|
showHoverPreview: !hideHoverPreview,
|
|
226
238
|
actionOptions: actionOptions,
|
|
227
239
|
onClick: onClick
|
|
228
|
-
}), CompetitorPromptComponent);
|
|
240
|
+
})), CompetitorPromptComponent);
|
|
229
241
|
} else if ((ssr || cardState && (0, _expValEquals.expValEquals)('platform_editor_smartlink_local_cache', 'isEnabled', true)) && url && (0, _experiments.editorExperiment)('platform_editor_preview_panel_linking_exp', true, {
|
|
230
242
|
exposure: true
|
|
231
243
|
})) {
|
|
@@ -248,7 +260,7 @@ var InlineCard = function InlineCard(props) {
|
|
|
248
260
|
rendererAppearance: rendererAppearance,
|
|
249
261
|
isResolvedViewRendered: isResolvedViewRendered,
|
|
250
262
|
fireAnalyticsEvent: fireAnalyticsEvent
|
|
251
|
-
}, (0, _react2.jsx)(_ssr.CardSSR, {
|
|
263
|
+
}, wrapWithSuspense((0, _react2.jsx)(_ssr.CardSSR, {
|
|
252
264
|
appearance: "inline",
|
|
253
265
|
url: url,
|
|
254
266
|
showHoverPreview: !hideHoverPreview,
|
|
@@ -265,7 +277,7 @@ var InlineCard = function InlineCard(props) {
|
|
|
265
277
|
},
|
|
266
278
|
onError: onError,
|
|
267
279
|
disablePreviewPanel: true
|
|
268
|
-
}))));
|
|
280
|
+
})))));
|
|
269
281
|
}
|
|
270
282
|
return (0, _react2.jsx)(_analyticsNext.AnalyticsContext, {
|
|
271
283
|
data: analyticsData
|
|
@@ -274,7 +286,7 @@ var InlineCard = function InlineCard(props) {
|
|
|
274
286
|
rendererAppearance: rendererAppearance,
|
|
275
287
|
isResolvedViewRendered: isResolvedViewRendered,
|
|
276
288
|
fireAnalyticsEvent: fireAnalyticsEvent
|
|
277
|
-
}, (0, _react2.jsx)(_ssr.CardSSR, {
|
|
289
|
+
}, wrapWithSuspense((0, _react2.jsx)(_ssr.CardSSR, {
|
|
278
290
|
appearance: "inline",
|
|
279
291
|
url: url,
|
|
280
292
|
showHoverPreview: !hideHoverPreview,
|
|
@@ -291,7 +303,7 @@ var InlineCard = function InlineCard(props) {
|
|
|
291
303
|
},
|
|
292
304
|
onError: onError,
|
|
293
305
|
disablePreviewPanel: true
|
|
294
|
-
})), CompetitorPromptComponent);
|
|
306
|
+
}))), CompetitorPromptComponent);
|
|
295
307
|
}
|
|
296
308
|
return (0, _react2.jsx)(_analyticsNext.AnalyticsContext, {
|
|
297
309
|
data: analyticsData
|
|
@@ -312,7 +324,7 @@ var InlineCard = function InlineCard(props) {
|
|
|
312
324
|
rendererAppearance: rendererAppearance,
|
|
313
325
|
isResolvedViewRendered: isResolvedViewRendered,
|
|
314
326
|
fireAnalyticsEvent: fireAnalyticsEvent
|
|
315
|
-
}, (0, _react2.jsx)(_smartCard.Card, (0, _extends2.default)({
|
|
327
|
+
}, wrapWithSuspense((0, _react2.jsx)(_smartCard.Card, (0, _extends2.default)({
|
|
316
328
|
appearance: "inline",
|
|
317
329
|
showHoverPreview: !hideHoverPreview,
|
|
318
330
|
actionOptions: actionOptions
|
|
@@ -332,7 +344,7 @@ var InlineCard = function InlineCard(props) {
|
|
|
332
344
|
disablePreviewPanel: (0, _experiments.editorExperiment)('platform_editor_preview_panel_linking_exp', true, {
|
|
333
345
|
exposure: true
|
|
334
346
|
})
|
|
335
|
-
}))), CompetitorPromptComponent)));
|
|
347
|
+
})))), CompetitorPromptComponent)));
|
|
336
348
|
};
|
|
337
349
|
var _default_1 = (0, _SmartCardStorage.withSmartCardStorage)(InlineCard);
|
|
338
350
|
var _default = exports.default = _default_1;
|
|
@@ -1993,32 +1993,30 @@ var RendererStyleContainer = exports.RendererStyleContainer = function RendererS
|
|
|
1993
1993
|
var isCompactModeEnabled = contentMode === 'compact' && isCompactModeSupported;
|
|
1994
1994
|
var baseFontSize = (0, _getBaseFontSize.getBaseFontSize)(appearance, contentMode);
|
|
1995
1995
|
var browser = (0, _expValEquals.expValEquals)('platform_editor_hydratable_ui', 'isEnabled', true) ? (0, _browser.getBrowserInfo)() : _browser.browser;
|
|
1996
|
-
return (
|
|
1997
|
-
|
|
1998
|
-
|
|
1999
|
-
|
|
2000
|
-
|
|
2001
|
-
|
|
2002
|
-
|
|
2003
|
-
|
|
2004
|
-
|
|
2005
|
-
|
|
2006
|
-
|
|
2007
|
-
|
|
2008
|
-
|
|
2009
|
-
|
|
2010
|
-
|
|
2011
|
-
|
|
2012
|
-
|
|
2013
|
-
|
|
2014
|
-
|
|
2015
|
-
|
|
2016
|
-
|
|
2017
|
-
|
|
2018
|
-
|
|
2019
|
-
|
|
2020
|
-
|
|
2021
|
-
|
|
2022
|
-
}, children)
|
|
2023
|
-
);
|
|
1996
|
+
return (0, _react.jsx)("div", {
|
|
1997
|
+
role: "none",
|
|
1998
|
+
ref: innerRef,
|
|
1999
|
+
onClick: onClick,
|
|
2000
|
+
onMouseDown: onMouseDown,
|
|
2001
|
+
style: {
|
|
2002
|
+
'--ak-renderer-base-font-size': "".concat(baseFontSize, "px"),
|
|
2003
|
+
'--ak-renderer-editor-font-heading-h1': "".concat((0, _ugcTokens.editorUGCToken)('editor.font.heading.h1')),
|
|
2004
|
+
'--ak-renderer-editor-font-heading-h2': "".concat((0, _ugcTokens.editorUGCToken)('editor.font.heading.h2')),
|
|
2005
|
+
'--ak-renderer-editor-font-heading-h3': "".concat((0, _ugcTokens.editorUGCToken)('editor.font.heading.h3')),
|
|
2006
|
+
'--ak-renderer-editor-font-heading-h4': "".concat((0, _ugcTokens.editorUGCToken)('editor.font.heading.h4')),
|
|
2007
|
+
'--ak-renderer-editor-font-heading-h5': "".concat((0, _ugcTokens.editorUGCToken)('editor.font.heading.h5')),
|
|
2008
|
+
'--ak-renderer-editor-font-heading-h6': "".concat((0, _ugcTokens.editorUGCToken)('editor.font.heading.h6')),
|
|
2009
|
+
'--ak-renderer-editor-font-normal-text': "".concat((0, _ugcTokens.editorUGCToken)('editor.font.body'))
|
|
2010
|
+
},
|
|
2011
|
+
css: [(0, _expValEquals.expValEquals)('confluence_ttvc_inline_extensions', 'isEnabled', true) ? baseFontStyle : originalBaseFontLineHeight, baseStyles, (0, _expValEquals.expValEquals)('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? headingAnchorStyles : headingAnchorStylesDuplicateAnchor, (0, _expValEquals.expValEquals)('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? hideHeadingCopyLinkWrapperStyles : hideHeadingCopyLinkWrapperStylesDuplicateAnchor, appearance === 'full-page' && isPreviewPanelResponsivenessOn && rendererFullPageStylesWithReducedPadding, appearance === 'full-page' && !isPreviewPanelResponsivenessOn && rendererFullPageStyles, appearance === 'full-width' && ((0, _expValEquals.expValEquals)('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? rendererFullWidthStyles : oldRendererFullWidthStyles), (appearance === 'full-width' || appearance === 'max' && ((0, _expValEquals.expValEquals)('editor_tinymce_full_width_mode', 'isEnabled', true) || (0, _expValEquals.expValEquals)('confluence_max_width_content_appearance', 'isEnabled', true))) && !(0, _table.isTableResizingEnabled)(appearance) && rendererFullWidthStylesForTableResizing, appearance === 'max' && ((0, _expValEquals.expValEquals)('editor_tinymce_full_width_mode', 'isEnabled', true) || (0, _expValEquals.expValEquals)('confluence_max_width_content_appearance', 'isEnabled', true)) && ((0, _expValEquals.expValEquals)('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? rendererMaxWidthStyles : oldRendererMaxWidthStyles), rovoTelepointerStyles, whitespaceSharedStyles, blockquoteSharedStyles, headingsSharedStyles, (0, _expValEquals.expValEquals)('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) && headingWrapperInlineFlowStyles, (0, _expValEquals.expValEquals)('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? headingWithAlignmentStyles : headingWithAlignmentStylesDuplicateAnchor, ruleSharedStyles, contentMode === 'compact' && isCompactModeSupported && extensionStyle, (0, _platformFeatureFlags.fg)('platform_editor_typography_ugc') ? isCompactModeSupported ? paragraphStylesUGCScaledMargin : paragraphSharedStylesWithEditorUGC : isCompactModeSupported ? paragraphSharedStyleScaledMargin : paragraphSharedStyles, listsSharedStyles, browser.gecko && listsSharedStylesForGekko, indentationSharedStyles, (0, _platformFeatureFlags.fg)('platform_editor__renderer_indentation_text_margin') && indentationSharedStylesWithMarginFix, (0, _expValEquals.expValEquals)('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? blockMarksSharedStyles : blockMarksSharedStylesDuplicateAnchor, codeMarkSharedStyles, shadowSharedStyle, dateSharedStyle, textColorStyles, backgroundColorStyles,
|
|
2012
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
2013
|
+
textHighlightPaddingStyles, tasksAndDecisionsStyles, (0, _expValEquals.expValEquals)('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) && headingPanelStyles, smartCardStyles, smartCardStylesAvatarFix, (0, _experiments.editorExperiment)('platform_editor_preview_panel_linking_exp', true) && headerSmartCardStyles, smartCardStylesAvatarMarginFix, smartCardStylesAvatarListZeroMarginTop, (0, _platformFeatureFlags.fg)('editor_inline_comments_on_inline_nodes') && rendererAnnotationStyles,
|
|
2014
|
+
// eslint-disable-next-line @atlaskit/platform/no-preconditioning
|
|
2015
|
+
(0, _platformFeatureFlags.fg)('editor_inline_comments_on_inline_nodes') && rendererAnnotationStylesCommentHeightFix, (0, _expValEquals.expValEquals)('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? baseOtherStyles : baseOtherStylesDuplicateAnchor, !(0, _expValEquals.expValEquals)('platform_editor_flex_based_centering', 'isEnabled', true) && extensionCenterAlignLegacyStyles,
|
|
2016
|
+
// this should be placed after baseOtherStyles
|
|
2017
|
+
(0, _expValEquals.expValEquals)('platform_editor_render_bodied_extension_as_inline', 'isEnabled', true) && ((0, _expValEquals.expValEquals)('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? extensionAsInlineStyle : oldExtensionAsInlineStyle), (0, _expValEquals.expValEquals)('confluence_insert_excerpt_inline_vertical_align', 'isEnabled', true) && inlineExtensionRendererMarginFix, allowNestedHeaderLinks && ((0, _expValEquals.expValEquals)('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? alignedHeadingAnchorStyle : alignedHeadingAnchorStyleDuplicateAnchor), mediaSingleSharedStyle,
|
|
2018
|
+
// merge firstWrappedMediaStyles with mediaSingleSharedStyle when clean up platform_editor_fix_media_in_renderer
|
|
2019
|
+
(0, _platformFeatureFlags.fg)('platform_editor_fix_media_in_renderer') && firstWrappedMediaStyles, tableSharedStyle, tableRendererHeaderStylesForTableCellOnly, (0, _platformFeatureFlags.fg)('platform_editor_bordered_panel_nested_in_table') && tableRendererNestedPanelStyles, isBackgroundClipBrowserFixNeeded() && tableStylesBackGroundClipForGeckoForTableCellOnly, (0, _platformFeatureFlags.fg)('platform_editor_nested_dnd_styles_changes') ? firstNodeWithNotMarginTopWithNestedDnD : firstNodeWithNotMarginTop, rendererTableStyles, (0, _table.isStickyScrollbarEnabled)(appearance) && stickyScrollbarStyles, rendererTableHeaderEqualHeightStylesForTableCellOnly, allowColumnSorting && rendererTableSortableColumnStyles, allowColumnSorting && allowNestedHeaderLinks && ((0, _expValEquals.expValEquals)('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinks : rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinksDuplicateAnchor), rendererTableColumnStyles, stickyHeaderStyles, codeBlockAndLayoutStyles, columnLayoutSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveRendererStyles, isAdvancedLayoutsOn && layoutSectionForAdvancedLayoutsStyles, !useBlockRenderForCodeBlock && gridRenderForCodeBlockStyles, browser.safari && codeBlockInListSafariFixStyles, appearance === 'full-page' && !isPreviewPanelResponsivenessOn && responsiveBreakoutWidth, appearance === 'full-page' && isPreviewPanelResponsivenessOn && responsiveBreakoutWidthWithReducedPadding, (appearance === 'full-width' || appearance === 'max' && ((0, _expValEquals.expValEquals)('editor_tinymce_full_width_mode', 'isEnabled', true) || (0, _expValEquals.expValEquals)('confluence_max_width_content_appearance', 'isEnabled', true))) && responsiveBreakoutWidthFullWidth, (0, _expValEquals.expValEquals)('platform_editor_lovability_emoji_scaling', 'isEnabled', true) ? isCompactModeEnabled ? scaledDenseEmojiStyles : scaledEmojiStyles : isCompactModeEnabled ? denseStyles : undefined, (0, _experiments.editorExperiment)('platform_synced_block', true) && syncBlockStyles, (0, _experiments.editorExperiment)('platform_synced_block', true) && syncBlockOverflowStyles, (0, _experiments.editorExperiment)('platform_synced_block', true) && (0, _platformFeatureFlags.fg)('platform_synced_block_patch_2') && syncBlockPatch2Styles, centerWrapperStyles],
|
|
2020
|
+
"data-testid": testId
|
|
2021
|
+
}, children);
|
|
2024
2022
|
};
|
|
@@ -71,7 +71,7 @@ var DEGRADED_SEVERITY_THRESHOLD = exports.DEGRADED_SEVERITY_THRESHOLD = 3000;
|
|
|
71
71
|
var TABLE_INFO_TIMEOUT = 10000;
|
|
72
72
|
var RENDER_EVENT_SAMPLE_RATE = 0.2;
|
|
73
73
|
var packageName = "@atlaskit/renderer";
|
|
74
|
-
var packageVersion = "
|
|
74
|
+
var packageVersion = "0.0.0-development";
|
|
75
75
|
var setAsQueryContainerStyles = (0, _react2.css)({
|
|
76
76
|
containerName: 'ak-renderer-wrapper',
|
|
77
77
|
containerType: 'inline-size'
|
|
@@ -93,7 +93,7 @@ var isMobile = function isMobile() {
|
|
|
93
93
|
// eslint-disable-next-line require-unicode-regexp
|
|
94
94
|
return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
|
|
95
95
|
};
|
|
96
|
-
var
|
|
96
|
+
var accessibilityStylesOld = (0, _react2.css)({
|
|
97
97
|
'&::before, &::after': {
|
|
98
98
|
clipPath: 'inset(100%)',
|
|
99
99
|
clip: 'rect(1px, 1px, 1px, 1px)',
|
|
@@ -112,6 +112,15 @@ var accessibilityStyles = (0, _react2.css)({
|
|
|
112
112
|
content: "' [var(--ak-renderer-annotation-endmarker)] '"
|
|
113
113
|
}
|
|
114
114
|
});
|
|
115
|
+
var accessibilityStylesNew = (0, _react2.css)({
|
|
116
|
+
clipPath: 'inset(100%)',
|
|
117
|
+
clip: 'rect(1px, 1px, 1px, 1px)',
|
|
118
|
+
height: '1px',
|
|
119
|
+
overflow: 'hidden',
|
|
120
|
+
position: 'absolute',
|
|
121
|
+
whiteSpace: 'nowrap',
|
|
122
|
+
width: '1px'
|
|
123
|
+
});
|
|
115
124
|
var MarkComponent = exports.MarkComponent = function MarkComponent(_ref) {
|
|
116
125
|
var annotationParentIds = _ref.annotationParentIds,
|
|
117
126
|
children = _ref.children,
|
|
@@ -214,10 +223,14 @@ var MarkComponent = exports.MarkComponent = function MarkComponent(_ref) {
|
|
|
214
223
|
ref: id === currentSelectedAnnotationId ? markRef : undefined,
|
|
215
224
|
id: id
|
|
216
225
|
}, (0, _platformFeatureFlags.fg)('editor_inline_comments_on_inline_nodes') ? 'onClickCapture' : 'onClick', onMarkClick), accessibility), overriddenData), !useBlockLevel && {
|
|
217
|
-
css: [markStyles, markStylesLayeringFix, (0, _platformFeatureFlags.fg)('editor_inline_comments_on_inline_nodes') && markStylesWithInlineComments, markStylesWithCommentsPanel, !isMobile() &&
|
|
218
|
-
style: {
|
|
226
|
+
css: [markStyles, markStylesLayeringFix, (0, _platformFeatureFlags.fg)('editor_inline_comments_on_inline_nodes') && markStylesWithInlineComments, markStylesWithCommentsPanel, !(0, _platformFeatureFlags.fg)('platform_renderer_a11y_inline_comment_fix') && !isMobile() && accessibilityStylesOld, markStylesWithUpdatedShadow],
|
|
227
|
+
style: (0, _platformFeatureFlags.fg)('platform_renderer_a11y_inline_comment_fix') ? {} : {
|
|
219
228
|
'--ak-renderer-annotation-startmarker': intl.formatMessage(_messages.inlineCommentMessages.contentRendererInlineCommentMarkerStart),
|
|
220
229
|
'--ak-renderer-annotation-endmarker': intl.formatMessage(_messages.inlineCommentMessages.contentRendererInlineCommentMarkerEnd)
|
|
221
230
|
}
|
|
222
|
-
}), children)
|
|
231
|
+
}), (0, _platformFeatureFlags.fg)('platform_renderer_a11y_inline_comment_fix') ? useBlockLevel || isMobile() ? children : (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)("span", {
|
|
232
|
+
css: accessibilityStylesNew
|
|
233
|
+
}, intl.formatMessage(_messages.inlineCommentMessages.contentRendererInlineCommentMarkerStart)), children, (0, _react2.jsx)("span", {
|
|
234
|
+
css: accessibilityStylesNew
|
|
235
|
+
}, intl.formatMessage(_messages.inlineCommentMessages.contentRendererInlineCommentMarkerEnd))) : children);
|
|
223
236
|
};
|
|
@@ -5,6 +5,7 @@
|
|
|
5
5
|
import Button from '@atlaskit/button/custom-theme-button';
|
|
6
6
|
import { codeBlockButtonMessages } from '@atlaskit/editor-common/messages';
|
|
7
7
|
import CopyIcon from '@atlaskit/icon/core/copy';
|
|
8
|
+
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
8
9
|
import Tooltip from '@atlaskit/tooltip';
|
|
9
10
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
10
11
|
import { jsx } from '@emotion/react';
|
|
@@ -30,7 +31,8 @@ const CopyButton = ({
|
|
|
30
31
|
hideTooltipOnClick: false,
|
|
31
32
|
position: "top"
|
|
32
33
|
}, jsx("div", {
|
|
33
|
-
onMouseLeave: onMouseLeave
|
|
34
|
+
onMouseLeave: onMouseLeave,
|
|
35
|
+
onBlur: expValEquals('platform_editor_a11y_eslint_fix', 'isEnabled', true) ? onMouseLeave : undefined
|
|
34
36
|
}, jsx(Button, {
|
|
35
37
|
appearance: "subtle",
|
|
36
38
|
"aria-haspopup": true,
|
|
@@ -86,10 +86,9 @@ class HeadingAnchor extends React.PureComponent {
|
|
|
86
86
|
return jsx("button", {
|
|
87
87
|
"data-testid": "anchor-button",
|
|
88
88
|
id: this.copyLinkId,
|
|
89
|
-
css: copyAnchorButtonStyles
|
|
90
|
-
// eslint-disable-next-line @atlassian/a11y/mouse-events-have-key-events
|
|
91
|
-
,
|
|
89
|
+
css: copyAnchorButtonStyles,
|
|
92
90
|
onMouseLeave: this.resetMessage,
|
|
91
|
+
onBlur: expValEquals('platform_editor_a11y_eslint_fix', 'isEnabled', true) ? this.resetMessage : undefined,
|
|
93
92
|
onClick: this.copyToClipboard,
|
|
94
93
|
"aria-hidden": hideFromScreenReader,
|
|
95
94
|
tabIndex: tabIndex,
|
|
@@ -3,6 +3,7 @@ import _extends from "@babel/runtime/helpers/extends";
|
|
|
3
3
|
* @jsxRuntime classic
|
|
4
4
|
* @jsx jsx
|
|
5
5
|
*/
|
|
6
|
+
/* eslint-disable jsdoc/check-tag-names */
|
|
6
7
|
import { Fragment, useState, useMemo, useEffect } from 'react';
|
|
7
8
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
8
9
|
import { jsx } from '@emotion/react';
|
|
@@ -135,6 +136,17 @@ const InlineCard = props => {
|
|
|
135
136
|
} = props;
|
|
136
137
|
const portal = usePortal(props);
|
|
137
138
|
const cardContext = useSmartCardContext();
|
|
139
|
+
const SuspenseWrapperForUrl = smartLinks === null || smartLinks === void 0 ? void 0 : smartLinks.SuspenseWrapperForUrl;
|
|
140
|
+
|
|
141
|
+
// Helper fn to conditionally wrap cards when suspense boundary is passed in via product
|
|
142
|
+
const wrapWithSuspense = card => {
|
|
143
|
+
if (SuspenseWrapperForUrl && url) {
|
|
144
|
+
return jsx(SuspenseWrapperForUrl, {
|
|
145
|
+
url: url
|
|
146
|
+
}, card);
|
|
147
|
+
}
|
|
148
|
+
return card;
|
|
149
|
+
};
|
|
138
150
|
const reload = useSmartLinkReload({
|
|
139
151
|
url: url || ''
|
|
140
152
|
});
|
|
@@ -193,23 +205,23 @@ const InlineCard = props => {
|
|
|
193
205
|
// eslint-disable-next-line react/jsx-props-no-spreading
|
|
194
206
|
}, inlineAnnotationProps), jsx(AnalyticsContext, {
|
|
195
207
|
data: analyticsData
|
|
196
|
-
}, jsx(CardSSR, {
|
|
208
|
+
}, wrapWithSuspense(jsx(CardSSR, {
|
|
197
209
|
appearance: "inline",
|
|
198
210
|
url: url,
|
|
199
211
|
showHoverPreview: !hideHoverPreview,
|
|
200
212
|
actionOptions: actionOptions,
|
|
201
213
|
onClick: onClick
|
|
202
|
-
})));
|
|
214
|
+
}))));
|
|
203
215
|
}
|
|
204
216
|
return jsx(AnalyticsContext, {
|
|
205
217
|
data: analyticsData
|
|
206
|
-
}, jsx(CardSSR, {
|
|
218
|
+
}, wrapWithSuspense(jsx(CardSSR, {
|
|
207
219
|
appearance: "inline",
|
|
208
220
|
url: url,
|
|
209
221
|
showHoverPreview: !hideHoverPreview,
|
|
210
222
|
actionOptions: actionOptions,
|
|
211
223
|
onClick: onClick
|
|
212
|
-
}), CompetitorPromptComponent);
|
|
224
|
+
})), CompetitorPromptComponent);
|
|
213
225
|
} else if ((ssr || cardState && expValEquals('platform_editor_smartlink_local_cache', 'isEnabled', true)) && url && editorExperiment('platform_editor_preview_panel_linking_exp', true, {
|
|
214
226
|
exposure: true
|
|
215
227
|
})) {
|
|
@@ -232,7 +244,7 @@ const InlineCard = props => {
|
|
|
232
244
|
rendererAppearance: rendererAppearance,
|
|
233
245
|
isResolvedViewRendered: isResolvedViewRendered,
|
|
234
246
|
fireAnalyticsEvent: fireAnalyticsEvent
|
|
235
|
-
}, jsx(CardSSR, {
|
|
247
|
+
}, wrapWithSuspense(jsx(CardSSR, {
|
|
236
248
|
appearance: "inline",
|
|
237
249
|
url: url,
|
|
238
250
|
showHoverPreview: !hideHoverPreview,
|
|
@@ -249,7 +261,7 @@ const InlineCard = props => {
|
|
|
249
261
|
},
|
|
250
262
|
onError: onError,
|
|
251
263
|
disablePreviewPanel: true
|
|
252
|
-
}))));
|
|
264
|
+
})))));
|
|
253
265
|
}
|
|
254
266
|
return jsx(AnalyticsContext, {
|
|
255
267
|
data: analyticsData
|
|
@@ -258,7 +270,7 @@ const InlineCard = props => {
|
|
|
258
270
|
rendererAppearance: rendererAppearance,
|
|
259
271
|
isResolvedViewRendered: isResolvedViewRendered,
|
|
260
272
|
fireAnalyticsEvent: fireAnalyticsEvent
|
|
261
|
-
}, jsx(CardSSR, {
|
|
273
|
+
}, wrapWithSuspense(jsx(CardSSR, {
|
|
262
274
|
appearance: "inline",
|
|
263
275
|
url: url,
|
|
264
276
|
showHoverPreview: !hideHoverPreview,
|
|
@@ -275,7 +287,7 @@ const InlineCard = props => {
|
|
|
275
287
|
},
|
|
276
288
|
onError: onError,
|
|
277
289
|
disablePreviewPanel: true
|
|
278
|
-
})), CompetitorPromptComponent);
|
|
290
|
+
}))), CompetitorPromptComponent);
|
|
279
291
|
}
|
|
280
292
|
return jsx(AnalyticsContext, {
|
|
281
293
|
data: analyticsData
|
|
@@ -296,7 +308,7 @@ const InlineCard = props => {
|
|
|
296
308
|
rendererAppearance: rendererAppearance,
|
|
297
309
|
isResolvedViewRendered: isResolvedViewRendered,
|
|
298
310
|
fireAnalyticsEvent: fireAnalyticsEvent
|
|
299
|
-
}, jsx(Card, _extends({
|
|
311
|
+
}, wrapWithSuspense(jsx(Card, _extends({
|
|
300
312
|
appearance: "inline",
|
|
301
313
|
showHoverPreview: !hideHoverPreview,
|
|
302
314
|
actionOptions: actionOptions
|
|
@@ -316,7 +328,7 @@ const InlineCard = props => {
|
|
|
316
328
|
disablePreviewPanel: editorExperiment('platform_editor_preview_panel_linking_exp', true, {
|
|
317
329
|
exposure: true
|
|
318
330
|
})
|
|
319
|
-
}))), CompetitorPromptComponent)));
|
|
331
|
+
})))), CompetitorPromptComponent)));
|
|
320
332
|
};
|
|
321
333
|
const _default_1 = withSmartCardStorage(InlineCard);
|
|
322
334
|
export default _default_1;
|
|
@@ -2560,32 +2560,30 @@ export const RendererStyleContainer = props => {
|
|
|
2560
2560
|
const isCompactModeEnabled = contentMode === 'compact' && isCompactModeSupported;
|
|
2561
2561
|
const baseFontSize = getBaseFontSize(appearance, contentMode);
|
|
2562
2562
|
const browser = expValEquals('platform_editor_hydratable_ui', 'isEnabled', true) ? getBrowserInfo() : browserLegacy;
|
|
2563
|
-
return (
|
|
2564
|
-
|
|
2565
|
-
|
|
2566
|
-
|
|
2567
|
-
|
|
2568
|
-
|
|
2569
|
-
|
|
2570
|
-
|
|
2571
|
-
|
|
2572
|
-
|
|
2573
|
-
|
|
2574
|
-
|
|
2575
|
-
|
|
2576
|
-
|
|
2577
|
-
|
|
2578
|
-
|
|
2579
|
-
|
|
2580
|
-
|
|
2581
|
-
|
|
2582
|
-
|
|
2583
|
-
|
|
2584
|
-
|
|
2585
|
-
|
|
2586
|
-
|
|
2587
|
-
|
|
2588
|
-
|
|
2589
|
-
}, children)
|
|
2590
|
-
);
|
|
2563
|
+
return jsx("div", {
|
|
2564
|
+
role: "none",
|
|
2565
|
+
ref: innerRef,
|
|
2566
|
+
onClick: onClick,
|
|
2567
|
+
onMouseDown: onMouseDown,
|
|
2568
|
+
style: {
|
|
2569
|
+
'--ak-renderer-base-font-size': `${baseFontSize}px`,
|
|
2570
|
+
'--ak-renderer-editor-font-heading-h1': `${editorUGCToken('editor.font.heading.h1')}`,
|
|
2571
|
+
'--ak-renderer-editor-font-heading-h2': `${editorUGCToken('editor.font.heading.h2')}`,
|
|
2572
|
+
'--ak-renderer-editor-font-heading-h3': `${editorUGCToken('editor.font.heading.h3')}`,
|
|
2573
|
+
'--ak-renderer-editor-font-heading-h4': `${editorUGCToken('editor.font.heading.h4')}`,
|
|
2574
|
+
'--ak-renderer-editor-font-heading-h5': `${editorUGCToken('editor.font.heading.h5')}`,
|
|
2575
|
+
'--ak-renderer-editor-font-heading-h6': `${editorUGCToken('editor.font.heading.h6')}`,
|
|
2576
|
+
'--ak-renderer-editor-font-normal-text': `${editorUGCToken('editor.font.body')}`
|
|
2577
|
+
},
|
|
2578
|
+
css: [expValEquals('confluence_ttvc_inline_extensions', 'isEnabled', true) ? baseFontStyle : originalBaseFontLineHeight, baseStyles, expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? headingAnchorStyles : headingAnchorStylesDuplicateAnchor, expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? hideHeadingCopyLinkWrapperStyles : hideHeadingCopyLinkWrapperStylesDuplicateAnchor, appearance === 'full-page' && isPreviewPanelResponsivenessOn && rendererFullPageStylesWithReducedPadding, appearance === 'full-page' && !isPreviewPanelResponsivenessOn && rendererFullPageStyles, appearance === 'full-width' && (expValEquals('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? rendererFullWidthStyles : oldRendererFullWidthStyles), (appearance === 'full-width' || appearance === 'max' && (expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) || expValEquals('confluence_max_width_content_appearance', 'isEnabled', true))) && !isTableResizingEnabled(appearance) && rendererFullWidthStylesForTableResizing, appearance === 'max' && (expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) || expValEquals('confluence_max_width_content_appearance', 'isEnabled', true)) && (expValEquals('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? rendererMaxWidthStyles : oldRendererMaxWidthStyles), rovoTelepointerStyles, whitespaceSharedStyles, blockquoteSharedStyles, headingsSharedStyles, expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) && headingWrapperInlineFlowStyles, expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? headingWithAlignmentStyles : headingWithAlignmentStylesDuplicateAnchor, ruleSharedStyles, contentMode === 'compact' && isCompactModeSupported && extensionStyle, fg('platform_editor_typography_ugc') ? isCompactModeSupported ? paragraphStylesUGCScaledMargin : paragraphSharedStylesWithEditorUGC : isCompactModeSupported ? paragraphSharedStyleScaledMargin : paragraphSharedStyles, listsSharedStyles, browser.gecko && listsSharedStylesForGekko, indentationSharedStyles, fg('platform_editor__renderer_indentation_text_margin') && indentationSharedStylesWithMarginFix, expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? blockMarksSharedStyles : blockMarksSharedStylesDuplicateAnchor, codeMarkSharedStyles, shadowSharedStyle, dateSharedStyle, textColorStyles, backgroundColorStyles,
|
|
2579
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
2580
|
+
textHighlightPaddingStyles, tasksAndDecisionsStyles, expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) && headingPanelStyles, smartCardStyles, smartCardStylesAvatarFix, editorExperiment('platform_editor_preview_panel_linking_exp', true) && headerSmartCardStyles, smartCardStylesAvatarMarginFix, smartCardStylesAvatarListZeroMarginTop, fg('editor_inline_comments_on_inline_nodes') && rendererAnnotationStyles,
|
|
2581
|
+
// eslint-disable-next-line @atlaskit/platform/no-preconditioning
|
|
2582
|
+
fg('editor_inline_comments_on_inline_nodes') && rendererAnnotationStylesCommentHeightFix, expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? baseOtherStyles : baseOtherStylesDuplicateAnchor, !expValEquals('platform_editor_flex_based_centering', 'isEnabled', true) && extensionCenterAlignLegacyStyles,
|
|
2583
|
+
// this should be placed after baseOtherStyles
|
|
2584
|
+
expValEquals('platform_editor_render_bodied_extension_as_inline', 'isEnabled', true) && (expValEquals('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? extensionAsInlineStyle : oldExtensionAsInlineStyle), expValEquals('confluence_insert_excerpt_inline_vertical_align', 'isEnabled', true) && inlineExtensionRendererMarginFix, allowNestedHeaderLinks && (expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? alignedHeadingAnchorStyle : alignedHeadingAnchorStyleDuplicateAnchor), mediaSingleSharedStyle,
|
|
2585
|
+
// merge firstWrappedMediaStyles with mediaSingleSharedStyle when clean up platform_editor_fix_media_in_renderer
|
|
2586
|
+
fg('platform_editor_fix_media_in_renderer') && firstWrappedMediaStyles, tableSharedStyle, tableRendererHeaderStylesForTableCellOnly, fg('platform_editor_bordered_panel_nested_in_table') && tableRendererNestedPanelStyles, isBackgroundClipBrowserFixNeeded() && tableStylesBackGroundClipForGeckoForTableCellOnly, fg('platform_editor_nested_dnd_styles_changes') ? firstNodeWithNotMarginTopWithNestedDnD : firstNodeWithNotMarginTop, rendererTableStyles, isStickyScrollbarEnabled(appearance) && stickyScrollbarStyles, rendererTableHeaderEqualHeightStylesForTableCellOnly, allowColumnSorting && rendererTableSortableColumnStyles, allowColumnSorting && allowNestedHeaderLinks && (expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinks : rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinksDuplicateAnchor), rendererTableColumnStyles, stickyHeaderStyles, codeBlockAndLayoutStyles, columnLayoutSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveRendererStyles, isAdvancedLayoutsOn && layoutSectionForAdvancedLayoutsStyles, !useBlockRenderForCodeBlock && gridRenderForCodeBlockStyles, browser.safari && codeBlockInListSafariFixStyles, appearance === 'full-page' && !isPreviewPanelResponsivenessOn && responsiveBreakoutWidth, appearance === 'full-page' && isPreviewPanelResponsivenessOn && responsiveBreakoutWidthWithReducedPadding, (appearance === 'full-width' || appearance === 'max' && (expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) || expValEquals('confluence_max_width_content_appearance', 'isEnabled', true))) && responsiveBreakoutWidthFullWidth, expValEquals('platform_editor_lovability_emoji_scaling', 'isEnabled', true) ? isCompactModeEnabled ? scaledDenseEmojiStyles : scaledEmojiStyles : isCompactModeEnabled ? denseStyles : undefined, editorExperiment('platform_synced_block', true) && syncBlockStyles, editorExperiment('platform_synced_block', true) && syncBlockOverflowStyles, editorExperiment('platform_synced_block', true) && fg('platform_synced_block_patch_2') && syncBlockPatch2Styles, centerWrapperStyles],
|
|
2587
|
+
"data-testid": testId
|
|
2588
|
+
}, children);
|
|
2591
2589
|
};
|
|
@@ -57,7 +57,7 @@ export const DEGRADED_SEVERITY_THRESHOLD = 3000;
|
|
|
57
57
|
const TABLE_INFO_TIMEOUT = 10000;
|
|
58
58
|
const RENDER_EVENT_SAMPLE_RATE = 0.2;
|
|
59
59
|
const packageName = "@atlaskit/renderer";
|
|
60
|
-
const packageVersion = "
|
|
60
|
+
const packageVersion = "0.0.0-development";
|
|
61
61
|
const setAsQueryContainerStyles = css({
|
|
62
62
|
containerName: 'ak-renderer-wrapper',
|
|
63
63
|
containerType: 'inline-size'
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
* @jsx jsx
|
|
4
4
|
*/
|
|
5
5
|
|
|
6
|
-
import { useMemo, useCallback } from 'react';
|
|
6
|
+
import { useMemo, useCallback, Fragment } from 'react';
|
|
7
7
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
8
8
|
import { css, jsx } from '@emotion/react';
|
|
9
9
|
import { AnnotationMarkStates } from '@atlaskit/adf-schema';
|
|
@@ -99,7 +99,7 @@ const isMobile = () => {
|
|
|
99
99
|
// eslint-disable-next-line require-unicode-regexp
|
|
100
100
|
return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
|
|
101
101
|
};
|
|
102
|
-
const
|
|
102
|
+
const accessibilityStylesOld = css({
|
|
103
103
|
'&::before, &::after': {
|
|
104
104
|
clipPath: 'inset(100%)',
|
|
105
105
|
clip: 'rect(1px, 1px, 1px, 1px)',
|
|
@@ -118,6 +118,15 @@ const accessibilityStyles = css({
|
|
|
118
118
|
content: `' [var(--ak-renderer-annotation-endmarker)] '`
|
|
119
119
|
}
|
|
120
120
|
});
|
|
121
|
+
const accessibilityStylesNew = css({
|
|
122
|
+
clipPath: 'inset(100%)',
|
|
123
|
+
clip: 'rect(1px, 1px, 1px, 1px)',
|
|
124
|
+
height: '1px',
|
|
125
|
+
overflow: 'hidden',
|
|
126
|
+
position: 'absolute',
|
|
127
|
+
whiteSpace: 'nowrap',
|
|
128
|
+
width: '1px'
|
|
129
|
+
});
|
|
121
130
|
export const MarkComponent = ({
|
|
122
131
|
annotationParentIds,
|
|
123
132
|
children,
|
|
@@ -226,11 +235,15 @@ export const MarkComponent = ({
|
|
|
226
235
|
...accessibility,
|
|
227
236
|
...overriddenData,
|
|
228
237
|
...(!useBlockLevel && {
|
|
229
|
-
css: [markStyles, markStylesLayeringFix, fg('editor_inline_comments_on_inline_nodes') && markStylesWithInlineComments, markStylesWithCommentsPanel, !isMobile() &&
|
|
230
|
-
style: {
|
|
238
|
+
css: [markStyles, markStylesLayeringFix, fg('editor_inline_comments_on_inline_nodes') && markStylesWithInlineComments, markStylesWithCommentsPanel, !fg('platform_renderer_a11y_inline_comment_fix') && !isMobile() && accessibilityStylesOld, markStylesWithUpdatedShadow],
|
|
239
|
+
style: fg('platform_renderer_a11y_inline_comment_fix') ? {} : {
|
|
231
240
|
'--ak-renderer-annotation-startmarker': intl.formatMessage(inlineCommentMessages.contentRendererInlineCommentMarkerStart),
|
|
232
241
|
'--ak-renderer-annotation-endmarker': intl.formatMessage(inlineCommentMessages.contentRendererInlineCommentMarkerEnd)
|
|
233
242
|
}
|
|
234
243
|
})
|
|
235
|
-
}, children
|
|
244
|
+
}, fg('platform_renderer_a11y_inline_comment_fix') ? useBlockLevel || isMobile() ? children : jsx(Fragment, null, jsx("span", {
|
|
245
|
+
css: accessibilityStylesNew
|
|
246
|
+
}, intl.formatMessage(inlineCommentMessages.contentRendererInlineCommentMarkerStart)), children, jsx("span", {
|
|
247
|
+
css: accessibilityStylesNew
|
|
248
|
+
}, intl.formatMessage(inlineCommentMessages.contentRendererInlineCommentMarkerEnd))) : children);
|
|
236
249
|
};
|
|
@@ -6,6 +6,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
|
6
6
|
import Button from '@atlaskit/button/custom-theme-button';
|
|
7
7
|
import { codeBlockButtonMessages } from '@atlaskit/editor-common/messages';
|
|
8
8
|
import CopyIcon from '@atlaskit/icon/core/copy';
|
|
9
|
+
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
9
10
|
import Tooltip from '@atlaskit/tooltip';
|
|
10
11
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
11
12
|
import { jsx } from '@emotion/react';
|
|
@@ -36,7 +37,8 @@ var CopyButton = function CopyButton(_ref) {
|
|
|
36
37
|
hideTooltipOnClick: false,
|
|
37
38
|
position: "top"
|
|
38
39
|
}, jsx("div", {
|
|
39
|
-
onMouseLeave: onMouseLeave
|
|
40
|
+
onMouseLeave: onMouseLeave,
|
|
41
|
+
onBlur: expValEquals('platform_editor_a11y_eslint_fix', 'isEnabled', true) ? onMouseLeave : undefined
|
|
40
42
|
}, jsx(Button, {
|
|
41
43
|
appearance: "subtle",
|
|
42
44
|
"aria-haspopup": true,
|
|
@@ -112,10 +112,9 @@ var HeadingAnchor = /*#__PURE__*/function (_React$PureComponent) {
|
|
|
112
112
|
return jsx("button", {
|
|
113
113
|
"data-testid": "anchor-button",
|
|
114
114
|
id: _this.copyLinkId,
|
|
115
|
-
css: copyAnchorButtonStyles
|
|
116
|
-
// eslint-disable-next-line @atlassian/a11y/mouse-events-have-key-events
|
|
117
|
-
,
|
|
115
|
+
css: copyAnchorButtonStyles,
|
|
118
116
|
onMouseLeave: _this.resetMessage,
|
|
117
|
+
onBlur: expValEquals('platform_editor_a11y_eslint_fix', 'isEnabled', true) ? _this.resetMessage : undefined,
|
|
119
118
|
onClick: _this.copyToClipboard,
|
|
120
119
|
"aria-hidden": hideFromScreenReader,
|
|
121
120
|
tabIndex: tabIndex,
|
|
@@ -4,6 +4,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
|
4
4
|
* @jsxRuntime classic
|
|
5
5
|
* @jsx jsx
|
|
6
6
|
*/
|
|
7
|
+
/* eslint-disable jsdoc/check-tag-names */
|
|
7
8
|
import { Fragment, useState, useMemo, useEffect } from 'react';
|
|
8
9
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
9
10
|
import { jsx } from '@emotion/react';
|
|
@@ -141,6 +142,17 @@ var InlineCard = function InlineCard(props) {
|
|
|
141
142
|
onSetLinkTarget = props.onSetLinkTarget;
|
|
142
143
|
var portal = usePortal(props);
|
|
143
144
|
var cardContext = useSmartCardContext();
|
|
145
|
+
var SuspenseWrapperForUrl = smartLinks === null || smartLinks === void 0 ? void 0 : smartLinks.SuspenseWrapperForUrl;
|
|
146
|
+
|
|
147
|
+
// Helper fn to conditionally wrap cards when suspense boundary is passed in via product
|
|
148
|
+
var wrapWithSuspense = function wrapWithSuspense(card) {
|
|
149
|
+
if (SuspenseWrapperForUrl && url) {
|
|
150
|
+
return jsx(SuspenseWrapperForUrl, {
|
|
151
|
+
url: url
|
|
152
|
+
}, card);
|
|
153
|
+
}
|
|
154
|
+
return card;
|
|
155
|
+
};
|
|
144
156
|
var reload = useSmartLinkReload({
|
|
145
157
|
url: url || ''
|
|
146
158
|
});
|
|
@@ -200,23 +212,23 @@ var InlineCard = function InlineCard(props) {
|
|
|
200
212
|
// eslint-disable-next-line react/jsx-props-no-spreading
|
|
201
213
|
}, inlineAnnotationProps), jsx(AnalyticsContext, {
|
|
202
214
|
data: analyticsData
|
|
203
|
-
}, jsx(CardSSR, {
|
|
215
|
+
}, wrapWithSuspense(jsx(CardSSR, {
|
|
204
216
|
appearance: "inline",
|
|
205
217
|
url: url,
|
|
206
218
|
showHoverPreview: !hideHoverPreview,
|
|
207
219
|
actionOptions: actionOptions,
|
|
208
220
|
onClick: onClick
|
|
209
|
-
})));
|
|
221
|
+
}))));
|
|
210
222
|
}
|
|
211
223
|
return jsx(AnalyticsContext, {
|
|
212
224
|
data: analyticsData
|
|
213
|
-
}, jsx(CardSSR, {
|
|
225
|
+
}, wrapWithSuspense(jsx(CardSSR, {
|
|
214
226
|
appearance: "inline",
|
|
215
227
|
url: url,
|
|
216
228
|
showHoverPreview: !hideHoverPreview,
|
|
217
229
|
actionOptions: actionOptions,
|
|
218
230
|
onClick: onClick
|
|
219
|
-
}), CompetitorPromptComponent);
|
|
231
|
+
})), CompetitorPromptComponent);
|
|
220
232
|
} else if ((ssr || cardState && expValEquals('platform_editor_smartlink_local_cache', 'isEnabled', true)) && url && editorExperiment('platform_editor_preview_panel_linking_exp', true, {
|
|
221
233
|
exposure: true
|
|
222
234
|
})) {
|
|
@@ -239,7 +251,7 @@ var InlineCard = function InlineCard(props) {
|
|
|
239
251
|
rendererAppearance: rendererAppearance,
|
|
240
252
|
isResolvedViewRendered: isResolvedViewRendered,
|
|
241
253
|
fireAnalyticsEvent: fireAnalyticsEvent
|
|
242
|
-
}, jsx(CardSSR, {
|
|
254
|
+
}, wrapWithSuspense(jsx(CardSSR, {
|
|
243
255
|
appearance: "inline",
|
|
244
256
|
url: url,
|
|
245
257
|
showHoverPreview: !hideHoverPreview,
|
|
@@ -256,7 +268,7 @@ var InlineCard = function InlineCard(props) {
|
|
|
256
268
|
},
|
|
257
269
|
onError: onError,
|
|
258
270
|
disablePreviewPanel: true
|
|
259
|
-
}))));
|
|
271
|
+
})))));
|
|
260
272
|
}
|
|
261
273
|
return jsx(AnalyticsContext, {
|
|
262
274
|
data: analyticsData
|
|
@@ -265,7 +277,7 @@ var InlineCard = function InlineCard(props) {
|
|
|
265
277
|
rendererAppearance: rendererAppearance,
|
|
266
278
|
isResolvedViewRendered: isResolvedViewRendered,
|
|
267
279
|
fireAnalyticsEvent: fireAnalyticsEvent
|
|
268
|
-
}, jsx(CardSSR, {
|
|
280
|
+
}, wrapWithSuspense(jsx(CardSSR, {
|
|
269
281
|
appearance: "inline",
|
|
270
282
|
url: url,
|
|
271
283
|
showHoverPreview: !hideHoverPreview,
|
|
@@ -282,7 +294,7 @@ var InlineCard = function InlineCard(props) {
|
|
|
282
294
|
},
|
|
283
295
|
onError: onError,
|
|
284
296
|
disablePreviewPanel: true
|
|
285
|
-
})), CompetitorPromptComponent);
|
|
297
|
+
}))), CompetitorPromptComponent);
|
|
286
298
|
}
|
|
287
299
|
return jsx(AnalyticsContext, {
|
|
288
300
|
data: analyticsData
|
|
@@ -303,7 +315,7 @@ var InlineCard = function InlineCard(props) {
|
|
|
303
315
|
rendererAppearance: rendererAppearance,
|
|
304
316
|
isResolvedViewRendered: isResolvedViewRendered,
|
|
305
317
|
fireAnalyticsEvent: fireAnalyticsEvent
|
|
306
|
-
}, jsx(Card, _extends({
|
|
318
|
+
}, wrapWithSuspense(jsx(Card, _extends({
|
|
307
319
|
appearance: "inline",
|
|
308
320
|
showHoverPreview: !hideHoverPreview,
|
|
309
321
|
actionOptions: actionOptions
|
|
@@ -323,7 +335,7 @@ var InlineCard = function InlineCard(props) {
|
|
|
323
335
|
disablePreviewPanel: editorExperiment('platform_editor_preview_panel_linking_exp', true, {
|
|
324
336
|
exposure: true
|
|
325
337
|
})
|
|
326
|
-
}))), CompetitorPromptComponent)));
|
|
338
|
+
})))), CompetitorPromptComponent)));
|
|
327
339
|
};
|
|
328
340
|
var _default_1 = withSmartCardStorage(InlineCard);
|
|
329
341
|
export default _default_1;
|
|
@@ -1986,32 +1986,30 @@ export var RendererStyleContainer = function RendererStyleContainer(props) {
|
|
|
1986
1986
|
var isCompactModeEnabled = contentMode === 'compact' && isCompactModeSupported;
|
|
1987
1987
|
var baseFontSize = getBaseFontSize(appearance, contentMode);
|
|
1988
1988
|
var browser = expValEquals('platform_editor_hydratable_ui', 'isEnabled', true) ? getBrowserInfo() : browserLegacy;
|
|
1989
|
-
return (
|
|
1990
|
-
|
|
1991
|
-
|
|
1992
|
-
|
|
1993
|
-
|
|
1994
|
-
|
|
1995
|
-
|
|
1996
|
-
|
|
1997
|
-
|
|
1998
|
-
|
|
1999
|
-
|
|
2000
|
-
|
|
2001
|
-
|
|
2002
|
-
|
|
2003
|
-
|
|
2004
|
-
|
|
2005
|
-
|
|
2006
|
-
|
|
2007
|
-
|
|
2008
|
-
|
|
2009
|
-
|
|
2010
|
-
|
|
2011
|
-
|
|
2012
|
-
|
|
2013
|
-
|
|
2014
|
-
|
|
2015
|
-
}, children)
|
|
2016
|
-
);
|
|
1989
|
+
return jsx("div", {
|
|
1990
|
+
role: "none",
|
|
1991
|
+
ref: innerRef,
|
|
1992
|
+
onClick: onClick,
|
|
1993
|
+
onMouseDown: onMouseDown,
|
|
1994
|
+
style: {
|
|
1995
|
+
'--ak-renderer-base-font-size': "".concat(baseFontSize, "px"),
|
|
1996
|
+
'--ak-renderer-editor-font-heading-h1': "".concat(editorUGCToken('editor.font.heading.h1')),
|
|
1997
|
+
'--ak-renderer-editor-font-heading-h2': "".concat(editorUGCToken('editor.font.heading.h2')),
|
|
1998
|
+
'--ak-renderer-editor-font-heading-h3': "".concat(editorUGCToken('editor.font.heading.h3')),
|
|
1999
|
+
'--ak-renderer-editor-font-heading-h4': "".concat(editorUGCToken('editor.font.heading.h4')),
|
|
2000
|
+
'--ak-renderer-editor-font-heading-h5': "".concat(editorUGCToken('editor.font.heading.h5')),
|
|
2001
|
+
'--ak-renderer-editor-font-heading-h6': "".concat(editorUGCToken('editor.font.heading.h6')),
|
|
2002
|
+
'--ak-renderer-editor-font-normal-text': "".concat(editorUGCToken('editor.font.body'))
|
|
2003
|
+
},
|
|
2004
|
+
css: [expValEquals('confluence_ttvc_inline_extensions', 'isEnabled', true) ? baseFontStyle : originalBaseFontLineHeight, baseStyles, expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? headingAnchorStyles : headingAnchorStylesDuplicateAnchor, expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? hideHeadingCopyLinkWrapperStyles : hideHeadingCopyLinkWrapperStylesDuplicateAnchor, appearance === 'full-page' && isPreviewPanelResponsivenessOn && rendererFullPageStylesWithReducedPadding, appearance === 'full-page' && !isPreviewPanelResponsivenessOn && rendererFullPageStyles, appearance === 'full-width' && (expValEquals('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? rendererFullWidthStyles : oldRendererFullWidthStyles), (appearance === 'full-width' || appearance === 'max' && (expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) || expValEquals('confluence_max_width_content_appearance', 'isEnabled', true))) && !isTableResizingEnabled(appearance) && rendererFullWidthStylesForTableResizing, appearance === 'max' && (expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) || expValEquals('confluence_max_width_content_appearance', 'isEnabled', true)) && (expValEquals('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? rendererMaxWidthStyles : oldRendererMaxWidthStyles), rovoTelepointerStyles, whitespaceSharedStyles, blockquoteSharedStyles, headingsSharedStyles, expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) && headingWrapperInlineFlowStyles, expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? headingWithAlignmentStyles : headingWithAlignmentStylesDuplicateAnchor, ruleSharedStyles, contentMode === 'compact' && isCompactModeSupported && extensionStyle, fg('platform_editor_typography_ugc') ? isCompactModeSupported ? paragraphStylesUGCScaledMargin : paragraphSharedStylesWithEditorUGC : isCompactModeSupported ? paragraphSharedStyleScaledMargin : paragraphSharedStyles, listsSharedStyles, browser.gecko && listsSharedStylesForGekko, indentationSharedStyles, fg('platform_editor__renderer_indentation_text_margin') && indentationSharedStylesWithMarginFix, expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? blockMarksSharedStyles : blockMarksSharedStylesDuplicateAnchor, codeMarkSharedStyles, shadowSharedStyle, dateSharedStyle, textColorStyles, backgroundColorStyles,
|
|
2005
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
2006
|
+
textHighlightPaddingStyles, tasksAndDecisionsStyles, expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) && headingPanelStyles, smartCardStyles, smartCardStylesAvatarFix, editorExperiment('platform_editor_preview_panel_linking_exp', true) && headerSmartCardStyles, smartCardStylesAvatarMarginFix, smartCardStylesAvatarListZeroMarginTop, fg('editor_inline_comments_on_inline_nodes') && rendererAnnotationStyles,
|
|
2007
|
+
// eslint-disable-next-line @atlaskit/platform/no-preconditioning
|
|
2008
|
+
fg('editor_inline_comments_on_inline_nodes') && rendererAnnotationStylesCommentHeightFix, expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? baseOtherStyles : baseOtherStylesDuplicateAnchor, !expValEquals('platform_editor_flex_based_centering', 'isEnabled', true) && extensionCenterAlignLegacyStyles,
|
|
2009
|
+
// this should be placed after baseOtherStyles
|
|
2010
|
+
expValEquals('platform_editor_render_bodied_extension_as_inline', 'isEnabled', true) && (expValEquals('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? extensionAsInlineStyle : oldExtensionAsInlineStyle), expValEquals('confluence_insert_excerpt_inline_vertical_align', 'isEnabled', true) && inlineExtensionRendererMarginFix, allowNestedHeaderLinks && (expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? alignedHeadingAnchorStyle : alignedHeadingAnchorStyleDuplicateAnchor), mediaSingleSharedStyle,
|
|
2011
|
+
// merge firstWrappedMediaStyles with mediaSingleSharedStyle when clean up platform_editor_fix_media_in_renderer
|
|
2012
|
+
fg('platform_editor_fix_media_in_renderer') && firstWrappedMediaStyles, tableSharedStyle, tableRendererHeaderStylesForTableCellOnly, fg('platform_editor_bordered_panel_nested_in_table') && tableRendererNestedPanelStyles, isBackgroundClipBrowserFixNeeded() && tableStylesBackGroundClipForGeckoForTableCellOnly, fg('platform_editor_nested_dnd_styles_changes') ? firstNodeWithNotMarginTopWithNestedDnD : firstNodeWithNotMarginTop, rendererTableStyles, isStickyScrollbarEnabled(appearance) && stickyScrollbarStyles, rendererTableHeaderEqualHeightStylesForTableCellOnly, allowColumnSorting && rendererTableSortableColumnStyles, allowColumnSorting && allowNestedHeaderLinks && (expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinks : rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinksDuplicateAnchor), rendererTableColumnStyles, stickyHeaderStyles, codeBlockAndLayoutStyles, columnLayoutSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveRendererStyles, isAdvancedLayoutsOn && layoutSectionForAdvancedLayoutsStyles, !useBlockRenderForCodeBlock && gridRenderForCodeBlockStyles, browser.safari && codeBlockInListSafariFixStyles, appearance === 'full-page' && !isPreviewPanelResponsivenessOn && responsiveBreakoutWidth, appearance === 'full-page' && isPreviewPanelResponsivenessOn && responsiveBreakoutWidthWithReducedPadding, (appearance === 'full-width' || appearance === 'max' && (expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) || expValEquals('confluence_max_width_content_appearance', 'isEnabled', true))) && responsiveBreakoutWidthFullWidth, expValEquals('platform_editor_lovability_emoji_scaling', 'isEnabled', true) ? isCompactModeEnabled ? scaledDenseEmojiStyles : scaledEmojiStyles : isCompactModeEnabled ? denseStyles : undefined, editorExperiment('platform_synced_block', true) && syncBlockStyles, editorExperiment('platform_synced_block', true) && syncBlockOverflowStyles, editorExperiment('platform_synced_block', true) && fg('platform_synced_block_patch_2') && syncBlockPatch2Styles, centerWrapperStyles],
|
|
2013
|
+
"data-testid": testId
|
|
2014
|
+
}, children);
|
|
2017
2015
|
};
|
|
@@ -62,7 +62,7 @@ export var DEGRADED_SEVERITY_THRESHOLD = 3000;
|
|
|
62
62
|
var TABLE_INFO_TIMEOUT = 10000;
|
|
63
63
|
var RENDER_EVENT_SAMPLE_RATE = 0.2;
|
|
64
64
|
var packageName = "@atlaskit/renderer";
|
|
65
|
-
var packageVersion = "
|
|
65
|
+
var packageVersion = "0.0.0-development";
|
|
66
66
|
var setAsQueryContainerStyles = css({
|
|
67
67
|
containerName: 'ak-renderer-wrapper',
|
|
68
68
|
containerType: 'inline-size'
|
|
@@ -7,7 +7,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
|
|
|
7
7
|
* @jsx jsx
|
|
8
8
|
*/
|
|
9
9
|
|
|
10
|
-
import { useMemo, useCallback } from 'react';
|
|
10
|
+
import { useMemo, useCallback, Fragment } from 'react';
|
|
11
11
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
12
12
|
import { css, jsx } from '@emotion/react';
|
|
13
13
|
import { AnnotationMarkStates } from '@atlaskit/adf-schema';
|
|
@@ -89,7 +89,7 @@ var isMobile = function isMobile() {
|
|
|
89
89
|
// eslint-disable-next-line require-unicode-regexp
|
|
90
90
|
return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
|
|
91
91
|
};
|
|
92
|
-
var
|
|
92
|
+
var accessibilityStylesOld = css({
|
|
93
93
|
'&::before, &::after': {
|
|
94
94
|
clipPath: 'inset(100%)',
|
|
95
95
|
clip: 'rect(1px, 1px, 1px, 1px)',
|
|
@@ -108,6 +108,15 @@ var accessibilityStyles = css({
|
|
|
108
108
|
content: "' [var(--ak-renderer-annotation-endmarker)] '"
|
|
109
109
|
}
|
|
110
110
|
});
|
|
111
|
+
var accessibilityStylesNew = css({
|
|
112
|
+
clipPath: 'inset(100%)',
|
|
113
|
+
clip: 'rect(1px, 1px, 1px, 1px)',
|
|
114
|
+
height: '1px',
|
|
115
|
+
overflow: 'hidden',
|
|
116
|
+
position: 'absolute',
|
|
117
|
+
whiteSpace: 'nowrap',
|
|
118
|
+
width: '1px'
|
|
119
|
+
});
|
|
111
120
|
export var MarkComponent = function MarkComponent(_ref) {
|
|
112
121
|
var annotationParentIds = _ref.annotationParentIds,
|
|
113
122
|
children = _ref.children,
|
|
@@ -210,10 +219,14 @@ export var MarkComponent = function MarkComponent(_ref) {
|
|
|
210
219
|
ref: id === currentSelectedAnnotationId ? markRef : undefined,
|
|
211
220
|
id: id
|
|
212
221
|
}, fg('editor_inline_comments_on_inline_nodes') ? 'onClickCapture' : 'onClick', onMarkClick), accessibility), overriddenData), !useBlockLevel && {
|
|
213
|
-
css: [markStyles, markStylesLayeringFix, fg('editor_inline_comments_on_inline_nodes') && markStylesWithInlineComments, markStylesWithCommentsPanel, !isMobile() &&
|
|
214
|
-
style: {
|
|
222
|
+
css: [markStyles, markStylesLayeringFix, fg('editor_inline_comments_on_inline_nodes') && markStylesWithInlineComments, markStylesWithCommentsPanel, !fg('platform_renderer_a11y_inline_comment_fix') && !isMobile() && accessibilityStylesOld, markStylesWithUpdatedShadow],
|
|
223
|
+
style: fg('platform_renderer_a11y_inline_comment_fix') ? {} : {
|
|
215
224
|
'--ak-renderer-annotation-startmarker': intl.formatMessage(inlineCommentMessages.contentRendererInlineCommentMarkerStart),
|
|
216
225
|
'--ak-renderer-annotation-endmarker': intl.formatMessage(inlineCommentMessages.contentRendererInlineCommentMarkerEnd)
|
|
217
226
|
}
|
|
218
|
-
}), children
|
|
227
|
+
}), fg('platform_renderer_a11y_inline_comment_fix') ? useBlockLevel || isMobile() ? children : jsx(Fragment, null, jsx("span", {
|
|
228
|
+
css: accessibilityStylesNew
|
|
229
|
+
}, intl.formatMessage(inlineCommentMessages.contentRendererInlineCommentMarkerStart)), children, jsx("span", {
|
|
230
|
+
css: accessibilityStylesNew
|
|
231
|
+
}, intl.formatMessage(inlineCommentMessages.contentRendererInlineCommentMarkerEnd))) : children);
|
|
219
232
|
};
|
|
@@ -39,4 +39,14 @@ export interface SmartLinksOptions {
|
|
|
39
39
|
* Component: inline
|
|
40
40
|
*/
|
|
41
41
|
ssr?: boolean;
|
|
42
|
+
/**
|
|
43
|
+
* A Suspense boundary wrapper to enable inline SmartLinks to wait until data fetchers have completed before rendering
|
|
44
|
+
* Default is undefined.
|
|
45
|
+
*
|
|
46
|
+
* Component: inline
|
|
47
|
+
*/
|
|
48
|
+
SuspenseWrapperForUrl?: React.ComponentType<{
|
|
49
|
+
children: React.ReactNode;
|
|
50
|
+
url?: string;
|
|
51
|
+
}>;
|
|
42
52
|
}
|
|
@@ -19,6 +19,9 @@ type MarkComponentProps = {
|
|
|
19
19
|
export declare const MarkComponent: ({ annotationParentIds, children, dataAttributes, id, state, hasFocus, isHovered, onClick, useBlockLevel, }: React.PropsWithChildren<MarkComponentProps>) => React.ReactElement<{
|
|
20
20
|
css?: (false | import("@emotion/utils").SerializedStyles)[] | undefined;
|
|
21
21
|
style?: {
|
|
22
|
+
'--ak-renderer-annotation-startmarker'?: undefined;
|
|
23
|
+
'--ak-renderer-annotation-endmarker'?: undefined;
|
|
24
|
+
} | {
|
|
22
25
|
'--ak-renderer-annotation-startmarker': string;
|
|
23
26
|
'--ak-renderer-annotation-endmarker': string;
|
|
24
27
|
} | undefined;
|
|
@@ -32,6 +35,9 @@ export declare const MarkComponent: ({ annotationParentIds, children, dataAttrib
|
|
|
32
35
|
} | {
|
|
33
36
|
css?: (false | import("@emotion/utils").SerializedStyles)[] | undefined;
|
|
34
37
|
style?: {
|
|
38
|
+
'--ak-renderer-annotation-startmarker'?: undefined;
|
|
39
|
+
'--ak-renderer-annotation-endmarker'?: undefined;
|
|
40
|
+
} | {
|
|
35
41
|
'--ak-renderer-annotation-startmarker': string;
|
|
36
42
|
'--ak-renderer-annotation-endmarker': string;
|
|
37
43
|
} | undefined;
|
|
@@ -47,6 +53,9 @@ export declare const MarkComponent: ({ annotationParentIds, children, dataAttrib
|
|
|
47
53
|
} | {
|
|
48
54
|
css?: (false | import("@emotion/utils").SerializedStyles)[] | undefined;
|
|
49
55
|
style?: {
|
|
56
|
+
'--ak-renderer-annotation-startmarker'?: undefined;
|
|
57
|
+
'--ak-renderer-annotation-endmarker'?: undefined;
|
|
58
|
+
} | {
|
|
50
59
|
'--ak-renderer-annotation-startmarker': string;
|
|
51
60
|
'--ak-renderer-annotation-endmarker': string;
|
|
52
61
|
} | undefined;
|
|
@@ -65,6 +74,9 @@ export declare const MarkComponent: ({ annotationParentIds, children, dataAttrib
|
|
|
65
74
|
} | {
|
|
66
75
|
css?: (false | import("@emotion/utils").SerializedStyles)[] | undefined;
|
|
67
76
|
style?: {
|
|
77
|
+
'--ak-renderer-annotation-startmarker'?: undefined;
|
|
78
|
+
'--ak-renderer-annotation-endmarker'?: undefined;
|
|
79
|
+
} | {
|
|
68
80
|
'--ak-renderer-annotation-startmarker': string;
|
|
69
81
|
'--ak-renderer-annotation-endmarker': string;
|
|
70
82
|
} | undefined;
|
|
@@ -85,6 +97,9 @@ export declare const MarkComponent: ({ annotationParentIds, children, dataAttrib
|
|
|
85
97
|
} | {
|
|
86
98
|
css?: (false | import("@emotion/utils").SerializedStyles)[] | undefined;
|
|
87
99
|
style?: {
|
|
100
|
+
'--ak-renderer-annotation-startmarker'?: undefined;
|
|
101
|
+
'--ak-renderer-annotation-endmarker'?: undefined;
|
|
102
|
+
} | {
|
|
88
103
|
'--ak-renderer-annotation-startmarker': string;
|
|
89
104
|
'--ak-renderer-annotation-endmarker': string;
|
|
90
105
|
} | undefined;
|
|
@@ -103,6 +118,9 @@ export declare const MarkComponent: ({ annotationParentIds, children, dataAttrib
|
|
|
103
118
|
} | {
|
|
104
119
|
css?: (false | import("@emotion/utils").SerializedStyles)[] | undefined;
|
|
105
120
|
style?: {
|
|
121
|
+
'--ak-renderer-annotation-startmarker'?: undefined;
|
|
122
|
+
'--ak-renderer-annotation-endmarker'?: undefined;
|
|
123
|
+
} | {
|
|
106
124
|
'--ak-renderer-annotation-startmarker': string;
|
|
107
125
|
'--ak-renderer-annotation-endmarker': string;
|
|
108
126
|
} | undefined;
|
|
@@ -39,4 +39,14 @@ export interface SmartLinksOptions {
|
|
|
39
39
|
* Component: inline
|
|
40
40
|
*/
|
|
41
41
|
ssr?: boolean;
|
|
42
|
+
/**
|
|
43
|
+
* A Suspense boundary wrapper to enable inline SmartLinks to wait until data fetchers have completed before rendering
|
|
44
|
+
* Default is undefined.
|
|
45
|
+
*
|
|
46
|
+
* Component: inline
|
|
47
|
+
*/
|
|
48
|
+
SuspenseWrapperForUrl?: React.ComponentType<{
|
|
49
|
+
children: React.ReactNode;
|
|
50
|
+
url?: string;
|
|
51
|
+
}>;
|
|
42
52
|
}
|
|
@@ -19,6 +19,9 @@ type MarkComponentProps = {
|
|
|
19
19
|
export declare const MarkComponent: ({ annotationParentIds, children, dataAttributes, id, state, hasFocus, isHovered, onClick, useBlockLevel, }: React.PropsWithChildren<MarkComponentProps>) => React.ReactElement<{
|
|
20
20
|
css?: (false | import("@emotion/utils").SerializedStyles)[] | undefined;
|
|
21
21
|
style?: {
|
|
22
|
+
'--ak-renderer-annotation-startmarker'?: undefined;
|
|
23
|
+
'--ak-renderer-annotation-endmarker'?: undefined;
|
|
24
|
+
} | {
|
|
22
25
|
'--ak-renderer-annotation-startmarker': string;
|
|
23
26
|
'--ak-renderer-annotation-endmarker': string;
|
|
24
27
|
} | undefined;
|
|
@@ -32,6 +35,9 @@ export declare const MarkComponent: ({ annotationParentIds, children, dataAttrib
|
|
|
32
35
|
} | {
|
|
33
36
|
css?: (false | import("@emotion/utils").SerializedStyles)[] | undefined;
|
|
34
37
|
style?: {
|
|
38
|
+
'--ak-renderer-annotation-startmarker'?: undefined;
|
|
39
|
+
'--ak-renderer-annotation-endmarker'?: undefined;
|
|
40
|
+
} | {
|
|
35
41
|
'--ak-renderer-annotation-startmarker': string;
|
|
36
42
|
'--ak-renderer-annotation-endmarker': string;
|
|
37
43
|
} | undefined;
|
|
@@ -47,6 +53,9 @@ export declare const MarkComponent: ({ annotationParentIds, children, dataAttrib
|
|
|
47
53
|
} | {
|
|
48
54
|
css?: (false | import("@emotion/utils").SerializedStyles)[] | undefined;
|
|
49
55
|
style?: {
|
|
56
|
+
'--ak-renderer-annotation-startmarker'?: undefined;
|
|
57
|
+
'--ak-renderer-annotation-endmarker'?: undefined;
|
|
58
|
+
} | {
|
|
50
59
|
'--ak-renderer-annotation-startmarker': string;
|
|
51
60
|
'--ak-renderer-annotation-endmarker': string;
|
|
52
61
|
} | undefined;
|
|
@@ -65,6 +74,9 @@ export declare const MarkComponent: ({ annotationParentIds, children, dataAttrib
|
|
|
65
74
|
} | {
|
|
66
75
|
css?: (false | import("@emotion/utils").SerializedStyles)[] | undefined;
|
|
67
76
|
style?: {
|
|
77
|
+
'--ak-renderer-annotation-startmarker'?: undefined;
|
|
78
|
+
'--ak-renderer-annotation-endmarker'?: undefined;
|
|
79
|
+
} | {
|
|
68
80
|
'--ak-renderer-annotation-startmarker': string;
|
|
69
81
|
'--ak-renderer-annotation-endmarker': string;
|
|
70
82
|
} | undefined;
|
|
@@ -85,6 +97,9 @@ export declare const MarkComponent: ({ annotationParentIds, children, dataAttrib
|
|
|
85
97
|
} | {
|
|
86
98
|
css?: (false | import("@emotion/utils").SerializedStyles)[] | undefined;
|
|
87
99
|
style?: {
|
|
100
|
+
'--ak-renderer-annotation-startmarker'?: undefined;
|
|
101
|
+
'--ak-renderer-annotation-endmarker'?: undefined;
|
|
102
|
+
} | {
|
|
88
103
|
'--ak-renderer-annotation-startmarker': string;
|
|
89
104
|
'--ak-renderer-annotation-endmarker': string;
|
|
90
105
|
} | undefined;
|
|
@@ -103,6 +118,9 @@ export declare const MarkComponent: ({ annotationParentIds, children, dataAttrib
|
|
|
103
118
|
} | {
|
|
104
119
|
css?: (false | import("@emotion/utils").SerializedStyles)[] | undefined;
|
|
105
120
|
style?: {
|
|
121
|
+
'--ak-renderer-annotation-startmarker'?: undefined;
|
|
122
|
+
'--ak-renderer-annotation-endmarker'?: undefined;
|
|
123
|
+
} | {
|
|
106
124
|
'--ak-renderer-annotation-startmarker': string;
|
|
107
125
|
'--ak-renderer-annotation-endmarker': string;
|
|
108
126
|
} | undefined;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/renderer",
|
|
3
|
-
"version": "126.
|
|
3
|
+
"version": "126.12.0",
|
|
4
4
|
"description": "Renderer component",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -47,7 +47,7 @@
|
|
|
47
47
|
"@atlaskit/media-client": "^35.8.0",
|
|
48
48
|
"@atlaskit/media-client-react": "^4.2.0",
|
|
49
49
|
"@atlaskit/media-common": "^12.4.0",
|
|
50
|
-
"@atlaskit/media-filmstrip": "^51.
|
|
50
|
+
"@atlaskit/media-filmstrip": "^51.2.0",
|
|
51
51
|
"@atlaskit/media-ui": "^28.7.0",
|
|
52
52
|
"@atlaskit/media-viewer": "^52.8.0",
|
|
53
53
|
"@atlaskit/platform-feature-flags": "^1.1.0",
|
|
@@ -57,7 +57,7 @@
|
|
|
57
57
|
"@atlaskit/status": "^3.1.0",
|
|
58
58
|
"@atlaskit/task-decision": "^19.2.0",
|
|
59
59
|
"@atlaskit/theme": "^21.0.0",
|
|
60
|
-
"@atlaskit/tmp-editor-statsig": "^29.
|
|
60
|
+
"@atlaskit/tmp-editor-statsig": "^29.4.0",
|
|
61
61
|
"@atlaskit/tokens": "^11.0.0",
|
|
62
62
|
"@atlaskit/tooltip": "^20.14.0",
|
|
63
63
|
"@atlaskit/visually-hidden": "^3.0.0",
|
|
@@ -88,7 +88,7 @@
|
|
|
88
88
|
"@atlaskit/media-integration-test-helpers": "workspace:^",
|
|
89
89
|
"@atlaskit/media-test-helpers": "^40.0.0",
|
|
90
90
|
"@atlaskit/mention": "^24.5.0",
|
|
91
|
-
"@atlaskit/modal-dialog": "^14.
|
|
91
|
+
"@atlaskit/modal-dialog": "^14.11.0",
|
|
92
92
|
"@atlaskit/navigation-next": "patch:@atlaskit/navigation-next@npm%3A9.0.17#~/.yarn/patches/@atlaskit-navigation-next-npm-9.0.17-958ca0ab9d.patch",
|
|
93
93
|
"@atlaskit/profilecard": "^24.37.0",
|
|
94
94
|
"@atlaskit/util-data-test": "^18.5.0",
|
|
@@ -148,6 +148,9 @@
|
|
|
148
148
|
"platform-fix-table-ssr-resizing": {
|
|
149
149
|
"type": "boolean"
|
|
150
150
|
},
|
|
151
|
+
"platform_renderer_a11y_inline_comment_fix": {
|
|
152
|
+
"type": "boolean"
|
|
153
|
+
},
|
|
151
154
|
"platform-component-visual-refresh": {
|
|
152
155
|
"type": "boolean"
|
|
153
156
|
},
|