@atlaskit/renderer 126.11.0 → 126.11.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +11 -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/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/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/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/ui/annotations/element/mark.d.ts +18 -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,16 @@
|
|
|
1
1
|
# @atlaskit/renderer
|
|
2
2
|
|
|
3
|
+
## 126.11.1
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [`39034774c001f`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/39034774c001f) -
|
|
8
|
+
[ux] Fixed regression CONFCLOUD-83763 where inline comments screen reader would see css variables
|
|
9
|
+
instead of start/end comment text markers
|
|
10
|
+
- [`d2f1426fe5b85`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/d2f1426fe5b85) -
|
|
11
|
+
[ux] ENGHEALTH-46817 Add feature gated a11y eslint fixes across editor packages
|
|
12
|
+
- Updated dependencies
|
|
13
|
+
|
|
3
14
|
## 126.11.0
|
|
4
15
|
|
|
5
16
|
### 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,
|
|
@@ -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 = "126.
|
|
74
|
+
var packageVersion = "126.11.0";
|
|
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,
|
|
@@ -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 = "126.
|
|
60
|
+
const packageVersion = "126.11.0";
|
|
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,
|
|
@@ -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 = "126.
|
|
65
|
+
var packageVersion = "126.11.0";
|
|
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
|
};
|
|
@@ -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;
|
|
@@ -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.11.
|
|
3
|
+
"version": "126.11.1",
|
|
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.3.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
|
},
|