@atlaskit/renderer 141.0.2 → 141.0.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +24 -0
- package/dist/cjs/react/nodes/heading-anchor-button.compiled.css +16 -0
- package/dist/cjs/react/nodes/heading-anchor-button.js +24 -0
- package/dist/cjs/react/nodes/heading-anchor.js +37 -0
- package/dist/cjs/react/nodes/layoutColumn-compiled.js +2 -0
- package/dist/cjs/react/nodes/layoutColumn-emotion.js +2 -0
- package/dist/cjs/react/nodes/media/index.js +1 -6
- package/dist/cjs/ui/Renderer/RendererStyleContainer.js +42 -7
- package/dist/cjs/ui/Renderer/index.js +1 -1
- package/dist/es2019/react/nodes/heading-anchor-button.compiled.css +16 -0
- package/dist/es2019/react/nodes/heading-anchor-button.js +15 -0
- package/dist/es2019/react/nodes/heading-anchor.js +37 -0
- package/dist/es2019/react/nodes/layoutColumn-compiled.js +2 -0
- package/dist/es2019/react/nodes/layoutColumn-emotion.js +2 -0
- package/dist/es2019/react/nodes/media/index.js +1 -6
- package/dist/es2019/ui/Renderer/RendererStyleContainer.js +42 -3
- package/dist/es2019/ui/Renderer/index.js +1 -1
- package/dist/esm/react/nodes/heading-anchor-button.compiled.css +16 -0
- package/dist/esm/react/nodes/heading-anchor-button.js +15 -0
- package/dist/esm/react/nodes/heading-anchor.js +37 -0
- package/dist/esm/react/nodes/layoutColumn-compiled.js +2 -0
- package/dist/esm/react/nodes/layoutColumn-emotion.js +2 -0
- package/dist/esm/react/nodes/media/index.js +1 -6
- package/dist/esm/ui/Renderer/RendererStyleContainer.js +42 -7
- package/dist/esm/ui/Renderer/index.js +1 -1
- package/dist/types/react/nodes/heading-anchor-button.d.ts +7 -0
- package/package.json +5 -8
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,29 @@
|
|
|
1
1
|
# @atlaskit/renderer
|
|
2
2
|
|
|
3
|
+
## 141.0.4
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [`16d6aded8d25a`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/16d6aded8d25a) -
|
|
8
|
+
Prevent code block and media group top margins from changing when streaming SSR style elements
|
|
9
|
+
move to the document head during hydration, behind platform_renderer_ssr_block_margin_fix.
|
|
10
|
+
Preserve spacing after content and the top-level lightweight code block override.
|
|
11
|
+
|
|
12
|
+
Keep the fully rolled-out Expand SSR margin fix enabled unconditionally.
|
|
13
|
+
|
|
14
|
+
- Updated dependencies
|
|
15
|
+
|
|
16
|
+
## 141.0.3
|
|
17
|
+
|
|
18
|
+
### Patch Changes
|
|
19
|
+
|
|
20
|
+
- [`22e02fb26ca02`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/22e02fb26ca02) -
|
|
21
|
+
Make the shipped media border radius styling permanent and remove the obsolete feature gate.
|
|
22
|
+
- [`78074078c4d8e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/78074078c4d8e) -
|
|
23
|
+
Increase heading link targets to at least 24 by 24 pixels when
|
|
24
|
+
platform_editor_heading_link_target_size is enabled.
|
|
25
|
+
- Updated dependencies
|
|
26
|
+
|
|
3
27
|
## 141.0.2
|
|
4
28
|
|
|
5
29
|
### Patch Changes
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
._1dqoglyw{border-style:none}._12ji1r31{outline-color:currentColor}
|
|
2
|
+
._12y31o36{outline-width:medium}
|
|
3
|
+
._19bvidpf{padding-left:0}
|
|
4
|
+
._1bah1h6o{justify-content:center}
|
|
5
|
+
._1bsb1tcg{width:24px}
|
|
6
|
+
._1e0c116y{display:inline-flex}
|
|
7
|
+
._1qu2glyw{outline-style:none}
|
|
8
|
+
._4cvr1h6o{align-items:center}
|
|
9
|
+
._4t3i1tcg{height:24px}
|
|
10
|
+
._80omtlke{cursor:pointer}
|
|
11
|
+
._bfhk1j28{background-color:transparent}
|
|
12
|
+
._ca0qidpf{padding-top:0}
|
|
13
|
+
._n3tdidpf{padding-bottom:0}
|
|
14
|
+
._s7n4nkob{vertical-align:middle}
|
|
15
|
+
._u5f3idpf{padding-right:0}
|
|
16
|
+
._vchhusvi{box-sizing:border-box}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
/* heading-anchor-button.tsx generated by @compiled/babel-plugin v3.0.2 */
|
|
2
|
+
"use strict";
|
|
3
|
+
|
|
4
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
5
|
+
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
6
|
+
Object.defineProperty(exports, "__esModule", {
|
|
7
|
+
value: true
|
|
8
|
+
});
|
|
9
|
+
exports.default = HeadingAnchorButton;
|
|
10
|
+
require("./heading-anchor-button.compiled.css");
|
|
11
|
+
var React = _interopRequireWildcard(require("react"));
|
|
12
|
+
var _runtime = require("@compiled/react/runtime");
|
|
13
|
+
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
14
|
+
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
|
|
15
|
+
var buttonStyles = null;
|
|
16
|
+
|
|
17
|
+
/** Heading link button with a minimum 24px pointer target. */
|
|
18
|
+
function HeadingAnchorButton(props) {
|
|
19
|
+
// eslint-disable-next-line react/jsx-props-no-spreading -- Forward the existing heading anchor's accessibility and event props.
|
|
20
|
+
return /*#__PURE__*/React.createElement("button", (0, _extends2.default)({}, props, {
|
|
21
|
+
type: "button",
|
|
22
|
+
className: (0, _runtime.ax)(["_12ji1r31 _1qu2glyw _12y31o36 _1dqoglyw _1e0c116y _vchhusvi _4cvr1h6o _1bah1h6o _1bsb1tcg _4t3i1tcg _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _s7n4nkob _bfhk1j28 _80omtlke"])
|
|
23
|
+
}));
|
|
24
|
+
}
|
|
@@ -23,6 +23,7 @@ var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-ex
|
|
|
23
23
|
var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
|
|
24
24
|
var _Tooltip = _interopRequireDefault(require("@atlaskit/tooltip/Tooltip"));
|
|
25
25
|
var _messages = require("../../messages");
|
|
26
|
+
var _headingAnchorButton = _interopRequireDefault(require("./heading-anchor-button"));
|
|
26
27
|
var _excluded = ["children"];
|
|
27
28
|
/**
|
|
28
29
|
* @jsxRuntime classic
|
|
@@ -32,12 +33,22 @@ var _excluded = ["children"];
|
|
|
32
33
|
function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
|
|
33
34
|
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
|
|
34
35
|
var HeadingAnchorWrapperClassName = exports.HeadingAnchorWrapperClassName = 'heading-anchor-wrapper';
|
|
36
|
+
var headingAnchorWrapperTargetSizeStyles = (0, _react2.css)({
|
|
37
|
+
display: 'inline-flex',
|
|
38
|
+
boxSizing: 'border-box',
|
|
39
|
+
alignItems: 'center',
|
|
40
|
+
justifyContent: 'center',
|
|
41
|
+
width: '24px',
|
|
42
|
+
height: '24px',
|
|
43
|
+
verticalAlign: 'middle'
|
|
44
|
+
});
|
|
35
45
|
var CopyAnchorWrapperWithRef = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
|
|
36
46
|
var children = props.children,
|
|
37
47
|
rest = (0, _objectWithoutProperties2.default)(props, _excluded);
|
|
38
48
|
return (0, _react2.jsx)("span", (0, _extends2.default)({}, rest, {
|
|
39
49
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
40
50
|
className: HeadingAnchorWrapperClassName,
|
|
51
|
+
css: (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_heading_link_target_size') ? headingAnchorWrapperTargetSizeStyles : undefined,
|
|
41
52
|
ref: ref
|
|
42
53
|
}), children);
|
|
43
54
|
});
|
|
@@ -50,6 +61,11 @@ var copyAnchorButtonStyles = (0, _react2.css)({
|
|
|
50
61
|
cursor: 'pointer',
|
|
51
62
|
right: 0
|
|
52
63
|
});
|
|
64
|
+
var scaledLinkIconStyles = (0, _react2.css)({
|
|
65
|
+
display: 'inline-flex',
|
|
66
|
+
transform: 'scale(1.5)',
|
|
67
|
+
transformOrigin: 'center'
|
|
68
|
+
});
|
|
53
69
|
// Ignored via go/ees005
|
|
54
70
|
// eslint-disable-next-line @repo/internal/react/no-class-components
|
|
55
71
|
var HeadingAnchor = /*#__PURE__*/function (_React$PureComponent) {
|
|
@@ -128,6 +144,27 @@ var HeadingAnchor = /*#__PURE__*/function (_React$PureComponent) {
|
|
|
128
144
|
heading: headingId
|
|
129
145
|
}) : headingId;
|
|
130
146
|
var tabIndex = (0, _expValEquals.expValEquals)('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? 0 : hideFromScreenReader ? undefined : -1;
|
|
147
|
+
if ((0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_heading_link_target_size')) {
|
|
148
|
+
return (0, _react2.jsx)(_headingAnchorButton.default, {
|
|
149
|
+
"data-testid": "anchor-button",
|
|
150
|
+
id: _this.copyLinkId,
|
|
151
|
+
onMouseLeave: _this.resetMessage,
|
|
152
|
+
onBlur: _this.resetMessage,
|
|
153
|
+
onClick: _this.copyToClipboard,
|
|
154
|
+
"aria-hidden": hideFromScreenReader,
|
|
155
|
+
tabIndex: tabIndex,
|
|
156
|
+
"aria-label": hideFromScreenReader ? undefined : _this.state.tooltipMessage,
|
|
157
|
+
"aria-labelledby": hideFromScreenReader ? undefined : labelledBy,
|
|
158
|
+
type: "button"
|
|
159
|
+
}, (0, _react2.jsx)("span", {
|
|
160
|
+
css: scaledLinkIconStyles,
|
|
161
|
+
"data-testid": "scaled-link-icon"
|
|
162
|
+
}, (0, _react2.jsx)(_link.default, {
|
|
163
|
+
label: _this.getCopyAriaLabel(),
|
|
164
|
+
size: "medium",
|
|
165
|
+
color: _this.state.isClicked ? "var(--ds-icon-selected, #1868DB)" : "var(--ds-icon-subtle, #505258)"
|
|
166
|
+
})));
|
|
167
|
+
}
|
|
131
168
|
return (0, _react2.jsx)("button", {
|
|
132
169
|
"data-testid": "anchor-button",
|
|
133
170
|
id: _this.copyLinkId,
|
|
@@ -16,6 +16,7 @@ require("./layoutColumn-compiled.compiled.css");
|
|
|
16
16
|
var _runtime = require("@compiled/react/runtime");
|
|
17
17
|
var _react = _interopRequireDefault(require("react"));
|
|
18
18
|
var _ui = require("@atlaskit/editor-common/ui");
|
|
19
|
+
var _fg = require("@atlaskit/platform-feature-flags/fg");
|
|
19
20
|
var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
|
|
20
21
|
// localized styles, was from clearNextSiblingMarginTopStyle in @atlaskit/editor-common/ui
|
|
21
22
|
var clearNextSiblingMarginTopStyle = null;
|
|
@@ -39,6 +40,7 @@ var LayoutSectionCompiled = exports.LayoutSectionCompiled = function LayoutSecti
|
|
|
39
40
|
},
|
|
40
41
|
className: (0, _runtime.ax)([(isLayoutColumnValignRenderingEnabled || isLayoutColumnMenuEnabled) && props.valign === 'middle' && "_1e0c1txw _2lx21bp4 _1bah1h6o", (isLayoutColumnValignRenderingEnabled || isLayoutColumnMenuEnabled) && props.valign === 'bottom' && "_1e0c1txw _2lx21bp4 _1bahesu3", "_1tihidpf _12kpidpf"])
|
|
41
42
|
}, /*#__PURE__*/_react.default.createElement(_ui.WidthProvider, null, /*#__PURE__*/_react.default.createElement("div", {
|
|
43
|
+
"data-layout-column-start": (0, _fg.fg)('platform_renderer_ssr_block_margin_fix') ? 'true' : undefined,
|
|
42
44
|
className: (0, _runtime.ax)(["_1skbgrf3", "_19segrf3 _1ki1grf3 _bmdegrf3 _166hgrf3 _7g1ogrf3 _sk2jgrf3 _hgeogrf3"])
|
|
43
45
|
}), props.children));
|
|
44
46
|
};
|
|
@@ -9,6 +9,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
|
|
|
9
9
|
var _react = _interopRequireDefault(require("react"));
|
|
10
10
|
var _react2 = require("@emotion/react");
|
|
11
11
|
var _ui = require("@atlaskit/editor-common/ui");
|
|
12
|
+
var _fg = require("@atlaskit/platform-feature-flags/fg");
|
|
12
13
|
var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
|
|
13
14
|
/**
|
|
14
15
|
* @jsxRuntime classic
|
|
@@ -71,6 +72,7 @@ var LayoutSectionEmotion = exports.LayoutSectionEmotion = function LayoutSection
|
|
|
71
72
|
// Keep separate: Compiled crashes on ternary/object lookup here.
|
|
72
73
|
(isLayoutColumnValignRenderingEnabled || isLayoutColumnMenuEnabled) && props.valign === 'middle' && verticalAlignMiddleStyles, (isLayoutColumnValignRenderingEnabled || isLayoutColumnMenuEnabled) && props.valign === 'bottom' && verticalAlignBottomStyles, multipleWrappedImagesStyle]
|
|
73
74
|
}, (0, _react2.jsx)(_ui.WidthProvider, null, (0, _react2.jsx)("div", {
|
|
75
|
+
"data-layout-column-start": (0, _fg.fg)('platform_renderer_ssr_block_margin_fix') ? 'true' : undefined,
|
|
74
76
|
css: [clearNextSiblingMarginTopStyle, clearNextSiblingBlockMarkMarginTopStyle]
|
|
75
77
|
}), props.children));
|
|
76
78
|
};
|
|
@@ -84,12 +84,7 @@ var MediaBorder = function MediaBorder(_ref) {
|
|
|
84
84
|
var borderColor = (_mark$attrs$color = mark === null || mark === void 0 ? void 0 : mark.attrs.color) !== null && _mark$attrs$color !== void 0 ? _mark$attrs$color : '';
|
|
85
85
|
var borderWidth = (_mark$attrs$size = mark === null || mark === void 0 ? void 0 : mark.attrs.size) !== null && _mark$attrs$size !== void 0 ? _mark$attrs$size : 0;
|
|
86
86
|
var paletteColorValue = (0, _editorPalette.hexToEditorBorderPaletteColor)(borderColor) || borderColor;
|
|
87
|
-
|
|
88
|
-
// [FEATURE FLAG: platform_editor_media_border_radius_fix]
|
|
89
|
-
// Fixes border radius to properly match image with 8px radius
|
|
90
|
-
// To clean up: keep only flag-on behavior ('8px')
|
|
91
|
-
var borderRadius = (0, _fg.fg)('platform_editor_media_border_radius_fix') ? "var(--ds-radius-large, 8px)" : "".concat(borderWidth, "px"); // OLD BEHAVIOR (to be removed when flag is cleaned up)
|
|
92
|
-
|
|
87
|
+
var borderRadius = "var(--ds-radius-large, 8px)";
|
|
93
88
|
return (0, _react2.jsx)("div", {
|
|
94
89
|
"data-mark-type": "border",
|
|
95
90
|
"data-color": borderColor,
|
|
@@ -30,7 +30,7 @@ var _table2 = require("../../react/nodes/table");
|
|
|
30
30
|
var _collapsibleHeadingsDom = require("../collapsible-headings-dom");
|
|
31
31
|
var _getBaseFontSize = require("./get-base-font-size");
|
|
32
32
|
var _style = require("./style");
|
|
33
|
-
var
|
|
33
|
+
var _css0, _$concat3, _$concat5;
|
|
34
34
|
/* eslint-disable @atlaskit/ui-styling-standard/no-important-styles, @atlaskit/ui-styling-standard/no-unsafe-selectors */
|
|
35
35
|
/* eslint-disable @atlaskit/ui-styling-standard/no-imported-style-values */
|
|
36
36
|
/* eslint-disable @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values */
|
|
@@ -554,6 +554,16 @@ var headingWrapperInlineFlowStyles = (0, _react.css)((0, _defineProperty2.defaul
|
|
|
554
554
|
// eslint-disable-next-line @atlaskit/design-system/use-tokens-space
|
|
555
555
|
marginTop: '1.59091em'
|
|
556
556
|
}));
|
|
557
|
+
var headingAnchorWrapperTargetSizeStyles = (0, _react.css)((0, _defineProperty2.default)({
|
|
558
|
+
'& .renderer-heading-wrapper > h1, & .renderer-heading-wrapper > h2, & .renderer-heading-wrapper > h3, & .renderer-heading-wrapper > h4, & .renderer-heading-wrapper > h5, & .renderer-heading-wrapper > h6': {
|
|
559
|
+
verticalAlign: 'middle'
|
|
560
|
+
}
|
|
561
|
+
}, "& .renderer-heading-wrapper > .".concat(_headingAnchor.HeadingAnchorWrapperClassName), {
|
|
562
|
+
display: 'inline-flex',
|
|
563
|
+
alignItems: 'center',
|
|
564
|
+
justifyContent: 'center',
|
|
565
|
+
verticalAlign: 'middle'
|
|
566
|
+
}));
|
|
557
567
|
var headingWithAlignmentStylesDuplicateAnchor = (0, _react.css)({
|
|
558
568
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
|
|
559
569
|
'.fabric-editor-block-mark.fabric-editor-alignment:not(:first-child)': {
|
|
@@ -644,13 +654,13 @@ var paragraphStylesUGCScaledMargin = (0, _react.css)({
|
|
|
644
654
|
marginBottom: 0
|
|
645
655
|
}
|
|
646
656
|
});
|
|
647
|
-
var listsSharedStyles = (0, _react.css)((
|
|
657
|
+
var listsSharedStyles = (0, _react.css)((_css0 = {
|
|
648
658
|
/* =============== INDENTATION SPACING ========= */
|
|
649
659
|
'ul, ol': {
|
|
650
660
|
boxSizing: 'border-box',
|
|
651
661
|
paddingLeft: "var(--ed--list--item-counter--padding, ".concat(_styles.listItemCounterPadding, "px)")
|
|
652
662
|
}
|
|
653
|
-
}, (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)(
|
|
663
|
+
}, (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)(_css0, "".concat(_orderedList.orderedListSelector, ", ").concat(_bulletList.bulletListSelector), {
|
|
654
664
|
/*
|
|
655
665
|
Ensures list item content adheres to the list's margin instead
|
|
656
666
|
of filling the entire block row. This is important to allow
|
|
@@ -682,7 +692,7 @@ var listsSharedStyles = (0, _react.css)((_css9 = {
|
|
|
682
692
|
listStyleType: 'lower-alpha'
|
|
683
693
|
}), 'ol[data-indent-level="3"], ol[data-indent-level="6"]', {
|
|
684
694
|
listStyleType: 'lower-roman'
|
|
685
|
-
}), (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)(
|
|
695
|
+
}), (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)(_css0, 'ul[data-indent-level="1"], ul[data-indent-level="4"]', {
|
|
686
696
|
listStyleType: 'disc'
|
|
687
697
|
}), 'ul[data-indent-level="2"], ul[data-indent-level="5"]', {
|
|
688
698
|
listStyleType: 'circle'
|
|
@@ -1926,6 +1936,31 @@ var codeBlockAndLayoutStyles = (0, _react.css)((0, _defineProperty2.default)((0,
|
|
|
1926
1936
|
marginBottom: _editorSharedStyles.blockNodesVerticalMargin
|
|
1927
1937
|
}
|
|
1928
1938
|
}));
|
|
1939
|
+
|
|
1940
|
+
// Match the first content sibling throughout streaming SSR and hydration. Emotion moves
|
|
1941
|
+
// style elements to the head, which must not change code block or media group spacing.
|
|
1942
|
+
// Keep these selectors less specific than the top-level lightweight code block override.
|
|
1943
|
+
var blockSsrMarginStyles = (0, _react.css)({
|
|
1944
|
+
'& .MediaGroup:not(:not(style, script) ~ *), & .code-block:not(:not(style, script) ~ *)': {
|
|
1945
|
+
marginTop: 0
|
|
1946
|
+
},
|
|
1947
|
+
'& [data-layout-section] .MediaGroup:not(:not(style, script) ~ *), & [data-layout-section] .code-block:not(:not(style, script) ~ *), & li > .code-block:not(:not(style, script) ~ *)': {
|
|
1948
|
+
marginTop: 0
|
|
1949
|
+
}
|
|
1950
|
+
});
|
|
1951
|
+
|
|
1952
|
+
// Layout columns start with an empty margin-reset element. Ignore only streamed siblings
|
|
1953
|
+
// between that element and the first code block/media group, preserving later block spacing.
|
|
1954
|
+
var layoutBlockSsrMarginStyles = (0, _react.css)({
|
|
1955
|
+
'& [data-layout-column-start] ~ .code-block:not([data-layout-column-start] ~ :not(style, script) ~ *), & [data-layout-column-start] ~ .MediaGroup:not([data-layout-column-start] ~ :not(style, script) ~ *)': {
|
|
1956
|
+
marginTop: 0
|
|
1957
|
+
}
|
|
1958
|
+
});
|
|
1959
|
+
var codeBlockInListSsrMarginSafariFixStyles = (0, _react.css)((0, _defineProperty2.default)({}, "&:not([data-node-type='decisionList']) > li,\n\t\t&:not(.".concat(_styles.SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER, ") > li"), {
|
|
1960
|
+
'> .code-block:not(:not(style, script) ~ *)': {
|
|
1961
|
+
marginTop: "-".concat(_editorSharedStyles.akEditorLineHeight, "em !important")
|
|
1962
|
+
}
|
|
1963
|
+
}));
|
|
1929
1964
|
var layoutSectionForAdvancedLayoutsStyles = (0, _react.css)({
|
|
1930
1965
|
'& [data-layout-section]': {
|
|
1931
1966
|
'& > div + div': {
|
|
@@ -2288,13 +2323,13 @@ var RendererStyleContainer = exports.RendererStyleContainer = function RendererS
|
|
|
2288
2323
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- CSS custom properties for UGC font tokens
|
|
2289
2324
|
'--ak-renderer-editor-font-small-text': _ugcTokens.editorUGCTokensRefreshed['editor.font.body.small']
|
|
2290
2325
|
},
|
|
2291
|
-
css: [(0, _expValEquals.expValEquals)('confluence_ttvc_inline_extensions', 'isEnabled', true) ? baseFontStyle : originalBaseFontLineHeight, baseStyles, fontSizeStyles, (0, _expValEquals.expValEquals)('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? headingAnchorStyles : headingAnchorStylesDuplicateAnchor, headingAnchorButtonFocusVisibleStyles, (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, _table2.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' && extensionStyle, contentMode === 'compact' ? paragraphStylesUGCScaledMargin : paragraphSharedStylesWithEditorUGC, listsSharedStyles, browser.gecko && listsSharedStylesForGekko, listItemHiddenMarkerStyles, indentationSharedStyles, indentationSharedStylesWithMarginFix, (0, _expValEquals.expValEquals)('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? blockMarksSharedStyles : blockMarksSharedStylesDuplicateAnchor, codeMarkSharedStyles, shadowSharedStyle, dateSharedStyle, textColorStyles, backgroundColorStyles, !(0, _expValEquals.expValEquals)('platform_editor_lovability_text_bg_color', 'isEnabled', true) && highlightLinksUnsetStyles,
|
|
2326
|
+
css: [(0, _expValEquals.expValEquals)('confluence_ttvc_inline_extensions', 'isEnabled', true) ? baseFontStyle : originalBaseFontLineHeight, baseStyles, fontSizeStyles, (0, _expValEquals.expValEquals)('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? headingAnchorStyles : headingAnchorStylesDuplicateAnchor, headingAnchorButtonFocusVisibleStyles, (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, _table2.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, _isExperimentEnabled.isExperimentEnabled)('platform_editor_heading_link_target_size') && headingAnchorWrapperTargetSizeStyles, (0, _expValEquals.expValEquals)('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? headingWithAlignmentStyles : headingWithAlignmentStylesDuplicateAnchor, ruleSharedStyles, contentMode === 'compact' && extensionStyle, contentMode === 'compact' ? paragraphStylesUGCScaledMargin : paragraphSharedStylesWithEditorUGC, listsSharedStyles, browser.gecko && listsSharedStylesForGekko, listItemHiddenMarkerStyles, indentationSharedStyles, indentationSharedStylesWithMarginFix, (0, _expValEquals.expValEquals)('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? blockMarksSharedStyles : blockMarksSharedStylesDuplicateAnchor, codeMarkSharedStyles, shadowSharedStyle, dateSharedStyle, textColorStyles, backgroundColorStyles, !(0, _expValEquals.expValEquals)('platform_editor_lovability_text_bg_color', 'isEnabled', true) && highlightLinksUnsetStyles,
|
|
2292
2327
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
2293
2328
|
textHighlightPaddingStyles, tasksAndDecisionsStyles, (0, _expValEquals.expValEquals)('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) && headingPanelStyles, smartCardStyles, smartCardStylesAvatarFix, headerSmartCardStyles, smartCardStylesAvatarMarginFix, smartCardStylesAvatarListZeroMarginTop, (0, _fg.fg)('editor_inline_comments_on_inline_nodes') && ((0, _expValEquals.expValEquals)('confluence_fe_renderer_inline_node_mark_color_fix', 'isEnabled', true) ? rendererAnnotationStyles : rendererAnnotationStylesOld),
|
|
2294
2329
|
// eslint-disable-next-line @atlaskit/platform/no-preconditioning
|
|
2295
|
-
(0, _fg.fg)('editor_inline_comments_on_inline_nodes') && rendererAnnotationStylesCommentHeightFix, (0, _expValEquals.expValEquals)('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? baseOtherStyles : baseOtherStylesDuplicateAnchor,
|
|
2330
|
+
(0, _fg.fg)('editor_inline_comments_on_inline_nodes') && rendererAnnotationStylesCommentHeightFix, (0, _expValEquals.expValEquals)('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? baseOtherStyles : baseOtherStylesDuplicateAnchor, expandSsrMarginStyles,
|
|
2296
2331
|
// this should be placed after baseOtherStyles
|
|
2297
|
-
(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, _fg.fg)('platform_forge_inline_bodied_macro') && [migratedInlineBodiedFlowStyle, forgeInlineBodiedSpacingStyle], inlineExtensionRendererMarginFix, allowNestedHeaderLinks && ((0, _expValEquals.expValEquals)('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? alignedHeadingAnchorStyle : alignedHeadingAnchorStyleDuplicateAnchor), mediaSingleSharedStyle, firstWrappedMediaStyles, tableSharedStyle, (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) && roundedTableOuterBorderOverlayStyles, (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) && roundedTableRemixBlockHighlightStyles, tableContentModeScopedStyles, (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_table_fit_to_content_patch_2') && tableContentModeExtensionContainmentStyles, tableContentModeNestedTableStyles, tableRendererHeaderStylesForTableCellOnly, (0, _fg.fg)('platform_editor_bordered_panel_nested_in_table') && tableRendererNestedPanelStyles, isBackgroundClipBrowserFixNeeded() && tableStylesBackGroundClipForGeckoForTableCellOnly, firstNodeWithNotMarginTopWithNestedDnD, rendererTableStyles, isStickyScrollbarOn && stickyScrollbarStyles, isStickyScrollbarOn && (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_table_css_overflow_shadow') && stickyScrollbarOverflowShadowFixStyles, rendererTableHeaderEqualHeightStylesForTableCellOnly, allowColumnSorting && rendererTableSortableColumnStyles, allowColumnSorting && (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_table_menu_updates', 'isEnabled', true) && rendererTableSortableColumnValignStyles, 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) ? contentMode === 'compact' ? scaledDenseEmojiStyles : scaledEmojiStyles : contentMode === 'compact' ? denseStyles : undefined, contentMode === 'compact' ? scaledDenseUnicodeEmojiStylesNew : scaledUnicodeEmojiStylesNew, syncBlockStyles, centerWrapperStyles, isInsideSyncBlock ? syncBlockRendererStyles : null, isInsideSyncBlock && tableFakeBorderStyles, isInsideSyncBlock && (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) ? roundedTableFakeBorderOverlayStyles : null, (0, _expValEquals.expValEquals)('platform_editor_hide_extension_renderer_support', 'isEnabled', true) && hideExtensionStyles],
|
|
2332
|
+
(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, _fg.fg)('platform_forge_inline_bodied_macro') && [migratedInlineBodiedFlowStyle, forgeInlineBodiedSpacingStyle], inlineExtensionRendererMarginFix, allowNestedHeaderLinks && ((0, _expValEquals.expValEquals)('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? alignedHeadingAnchorStyle : alignedHeadingAnchorStyleDuplicateAnchor), mediaSingleSharedStyle, firstWrappedMediaStyles, tableSharedStyle, (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) && roundedTableOuterBorderOverlayStyles, (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) && roundedTableRemixBlockHighlightStyles, tableContentModeScopedStyles, (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_table_fit_to_content_patch_2') && tableContentModeExtensionContainmentStyles, tableContentModeNestedTableStyles, tableRendererHeaderStylesForTableCellOnly, (0, _fg.fg)('platform_editor_bordered_panel_nested_in_table') && tableRendererNestedPanelStyles, isBackgroundClipBrowserFixNeeded() && tableStylesBackGroundClipForGeckoForTableCellOnly, firstNodeWithNotMarginTopWithNestedDnD, rendererTableStyles, isStickyScrollbarOn && stickyScrollbarStyles, isStickyScrollbarOn && (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_table_css_overflow_shadow') && stickyScrollbarOverflowShadowFixStyles, rendererTableHeaderEqualHeightStylesForTableCellOnly, allowColumnSorting && rendererTableSortableColumnStyles, allowColumnSorting && (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_table_menu_updates', 'isEnabled', true) && rendererTableSortableColumnValignStyles, 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, (0, _fg.fg)('platform_renderer_ssr_block_margin_fix') && [blockSsrMarginStyles, layoutBlockSsrMarginStyles, browser.safari && codeBlockInListSsrMarginSafariFixStyles], 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) ? contentMode === 'compact' ? scaledDenseEmojiStyles : scaledEmojiStyles : contentMode === 'compact' ? denseStyles : undefined, contentMode === 'compact' ? scaledDenseUnicodeEmojiStylesNew : scaledUnicodeEmojiStylesNew, syncBlockStyles, centerWrapperStyles, isInsideSyncBlock ? syncBlockRendererStyles : null, isInsideSyncBlock && tableFakeBorderStyles, isInsideSyncBlock && (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) ? roundedTableFakeBorderOverlayStyles : null, (0, _expValEquals.expValEquals)('platform_editor_hide_extension_renderer_support', 'isEnabled', true) && hideExtensionStyles],
|
|
2298
2333
|
"data-testid": testId
|
|
2299
2334
|
}, children);
|
|
2300
2335
|
};
|
|
@@ -73,7 +73,7 @@ var DEGRADED_SEVERITY_THRESHOLD = exports.DEGRADED_SEVERITY_THRESHOLD = 3000;
|
|
|
73
73
|
var TABLE_INFO_TIMEOUT = 10000;
|
|
74
74
|
var RENDER_EVENT_SAMPLE_RATE = 0.1;
|
|
75
75
|
var packageName = "@atlaskit/renderer";
|
|
76
|
-
var packageVersion = "141.0.
|
|
76
|
+
var packageVersion = "141.0.3";
|
|
77
77
|
var setAsQueryContainerStyles = (0, _react2.css)({
|
|
78
78
|
containerName: 'ak-renderer-wrapper',
|
|
79
79
|
containerType: 'inline-size'
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
._1dqoglyw{border-style:none}._12ji1r31{outline-color:currentColor}
|
|
2
|
+
._12y31o36{outline-width:medium}
|
|
3
|
+
._19bvidpf{padding-left:0}
|
|
4
|
+
._1bah1h6o{justify-content:center}
|
|
5
|
+
._1bsb1tcg{width:24px}
|
|
6
|
+
._1e0c116y{display:inline-flex}
|
|
7
|
+
._1qu2glyw{outline-style:none}
|
|
8
|
+
._4cvr1h6o{align-items:center}
|
|
9
|
+
._4t3i1tcg{height:24px}
|
|
10
|
+
._80omtlke{cursor:pointer}
|
|
11
|
+
._bfhk1j28{background-color:transparent}
|
|
12
|
+
._ca0qidpf{padding-top:0}
|
|
13
|
+
._n3tdidpf{padding-bottom:0}
|
|
14
|
+
._s7n4nkob{vertical-align:middle}
|
|
15
|
+
._u5f3idpf{padding-right:0}
|
|
16
|
+
._vchhusvi{box-sizing:border-box}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
/* heading-anchor-button.tsx generated by @compiled/babel-plugin v3.0.2 */
|
|
2
|
+
import _extends from "@babel/runtime/helpers/extends";
|
|
3
|
+
import "./heading-anchor-button.compiled.css";
|
|
4
|
+
import * as React from 'react';
|
|
5
|
+
import { ax, ix } from "@compiled/react/runtime";
|
|
6
|
+
const buttonStyles = null;
|
|
7
|
+
|
|
8
|
+
/** Heading link button with a minimum 24px pointer target. */
|
|
9
|
+
export default function HeadingAnchorButton(props) {
|
|
10
|
+
// eslint-disable-next-line react/jsx-props-no-spreading -- Forward the existing heading anchor's accessibility and event props.
|
|
11
|
+
return /*#__PURE__*/React.createElement("button", _extends({}, props, {
|
|
12
|
+
type: "button",
|
|
13
|
+
className: ax(["_12ji1r31 _1qu2glyw _12y31o36 _1dqoglyw _1e0c116y _vchhusvi _4cvr1h6o _1bah1h6o _1bsb1tcg _4t3i1tcg _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _s7n4nkob _bfhk1j28 _80omtlke"])
|
|
14
|
+
}));
|
|
15
|
+
}
|
|
@@ -15,7 +15,17 @@ import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-e
|
|
|
15
15
|
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
16
16
|
import Tooltip from '@atlaskit/tooltip/Tooltip';
|
|
17
17
|
import { headingAnchorLinkMessages } from '../../messages';
|
|
18
|
+
import HeadingAnchorButton from './heading-anchor-button';
|
|
18
19
|
export const HeadingAnchorWrapperClassName = 'heading-anchor-wrapper';
|
|
20
|
+
const headingAnchorWrapperTargetSizeStyles = css({
|
|
21
|
+
display: 'inline-flex',
|
|
22
|
+
boxSizing: 'border-box',
|
|
23
|
+
alignItems: 'center',
|
|
24
|
+
justifyContent: 'center',
|
|
25
|
+
width: '24px',
|
|
26
|
+
height: '24px',
|
|
27
|
+
verticalAlign: 'middle'
|
|
28
|
+
});
|
|
19
29
|
const CopyAnchorWrapperWithRef = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
20
30
|
const {
|
|
21
31
|
children,
|
|
@@ -24,6 +34,7 @@ const CopyAnchorWrapperWithRef = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
|
24
34
|
return jsx("span", _extends({}, rest, {
|
|
25
35
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
26
36
|
className: HeadingAnchorWrapperClassName,
|
|
37
|
+
css: isExperimentEnabled('platform_editor_heading_link_target_size') ? headingAnchorWrapperTargetSizeStyles : undefined,
|
|
27
38
|
ref: ref
|
|
28
39
|
}), children);
|
|
29
40
|
});
|
|
@@ -36,6 +47,11 @@ const copyAnchorButtonStyles = css({
|
|
|
36
47
|
cursor: 'pointer',
|
|
37
48
|
right: 0
|
|
38
49
|
});
|
|
50
|
+
const scaledLinkIconStyles = css({
|
|
51
|
+
display: 'inline-flex',
|
|
52
|
+
transform: 'scale(1.5)',
|
|
53
|
+
transformOrigin: 'center'
|
|
54
|
+
});
|
|
39
55
|
// Ignored via go/ees005
|
|
40
56
|
// eslint-disable-next-line @repo/internal/react/no-class-components
|
|
41
57
|
class HeadingAnchor extends React.PureComponent {
|
|
@@ -98,6 +114,27 @@ class HeadingAnchor extends React.PureComponent {
|
|
|
98
114
|
heading: headingId
|
|
99
115
|
}) : headingId;
|
|
100
116
|
const tabIndex = expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? 0 : hideFromScreenReader ? undefined : -1;
|
|
117
|
+
if (isExperimentEnabled('platform_editor_heading_link_target_size')) {
|
|
118
|
+
return jsx(HeadingAnchorButton, {
|
|
119
|
+
"data-testid": "anchor-button",
|
|
120
|
+
id: this.copyLinkId,
|
|
121
|
+
onMouseLeave: this.resetMessage,
|
|
122
|
+
onBlur: this.resetMessage,
|
|
123
|
+
onClick: this.copyToClipboard,
|
|
124
|
+
"aria-hidden": hideFromScreenReader,
|
|
125
|
+
tabIndex: tabIndex,
|
|
126
|
+
"aria-label": hideFromScreenReader ? undefined : this.state.tooltipMessage,
|
|
127
|
+
"aria-labelledby": hideFromScreenReader ? undefined : labelledBy,
|
|
128
|
+
type: "button"
|
|
129
|
+
}, jsx("span", {
|
|
130
|
+
css: scaledLinkIconStyles,
|
|
131
|
+
"data-testid": "scaled-link-icon"
|
|
132
|
+
}, jsx(LinkIcon, {
|
|
133
|
+
label: this.getCopyAriaLabel(),
|
|
134
|
+
size: "medium",
|
|
135
|
+
color: this.state.isClicked ? "var(--ds-icon-selected, #1868DB)" : "var(--ds-icon-subtle, #505258)"
|
|
136
|
+
})));
|
|
137
|
+
}
|
|
101
138
|
return jsx("button", {
|
|
102
139
|
"data-testid": "anchor-button",
|
|
103
140
|
id: this.copyLinkId,
|
|
@@ -9,6 +9,7 @@ import "./layoutColumn-compiled.compiled.css";
|
|
|
9
9
|
import { ax, ix } from "@compiled/react/runtime";
|
|
10
10
|
import React from 'react';
|
|
11
11
|
import { WidthProvider } from '@atlaskit/editor-common/ui';
|
|
12
|
+
import { fg } from '@atlaskit/platform-feature-flags/fg';
|
|
12
13
|
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
13
14
|
|
|
14
15
|
// localized styles, was from clearNextSiblingMarginTopStyle in @atlaskit/editor-common/ui
|
|
@@ -33,6 +34,7 @@ export const LayoutSectionCompiled = props => {
|
|
|
33
34
|
},
|
|
34
35
|
className: ax([(isLayoutColumnValignRenderingEnabled || isLayoutColumnMenuEnabled) && props.valign === 'middle' && "_1e0c1txw _2lx21bp4 _1bah1h6o", (isLayoutColumnValignRenderingEnabled || isLayoutColumnMenuEnabled) && props.valign === 'bottom' && "_1e0c1txw _2lx21bp4 _1bahesu3", "_1tihidpf _12kpidpf"])
|
|
35
36
|
}, /*#__PURE__*/React.createElement(WidthProvider, null, /*#__PURE__*/React.createElement("div", {
|
|
37
|
+
"data-layout-column-start": fg('platform_renderer_ssr_block_margin_fix') ? 'true' : undefined,
|
|
36
38
|
className: ax(["_1skbgrf3", "_19segrf3 _1ki1grf3 _bmdegrf3 _166hgrf3 _7g1ogrf3 _sk2jgrf3 _hgeogrf3"])
|
|
37
39
|
}), props.children));
|
|
38
40
|
};
|
|
@@ -13,6 +13,7 @@ import React from 'react';
|
|
|
13
13
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- intentional: emotion fallback for compiled migration
|
|
14
14
|
import { css, jsx } from '@emotion/react';
|
|
15
15
|
import { WidthProvider } from '@atlaskit/editor-common/ui';
|
|
16
|
+
import { fg } from '@atlaskit/platform-feature-flags/fg';
|
|
16
17
|
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
17
18
|
|
|
18
19
|
// localized styles, was from clearNextSiblingMarginTopStyle in @atlaskit/editor-common/ui
|
|
@@ -73,6 +74,7 @@ export const LayoutSectionEmotion = props => {
|
|
|
73
74
|
// Keep separate: Compiled crashes on ternary/object lookup here.
|
|
74
75
|
(isLayoutColumnValignRenderingEnabled || isLayoutColumnMenuEnabled) && props.valign === 'middle' && verticalAlignMiddleStyles, (isLayoutColumnValignRenderingEnabled || isLayoutColumnMenuEnabled) && props.valign === 'bottom' && verticalAlignBottomStyles, multipleWrappedImagesStyle]
|
|
75
76
|
}, jsx(WidthProvider, null, jsx("div", {
|
|
77
|
+
"data-layout-column-start": fg('platform_renderer_ssr_block_margin_fix') ? 'true' : undefined,
|
|
76
78
|
css: [clearNextSiblingMarginTopStyle, clearNextSiblingBlockMarkMarginTopStyle]
|
|
77
79
|
}), props.children));
|
|
78
80
|
};
|
|
@@ -62,12 +62,7 @@ const MediaBorder = ({
|
|
|
62
62
|
const borderColor = (_mark$attrs$color = mark === null || mark === void 0 ? void 0 : mark.attrs.color) !== null && _mark$attrs$color !== void 0 ? _mark$attrs$color : '';
|
|
63
63
|
const borderWidth = (_mark$attrs$size = mark === null || mark === void 0 ? void 0 : mark.attrs.size) !== null && _mark$attrs$size !== void 0 ? _mark$attrs$size : 0;
|
|
64
64
|
const paletteColorValue = hexToEditorBorderPaletteColor(borderColor) || borderColor;
|
|
65
|
-
|
|
66
|
-
// [FEATURE FLAG: platform_editor_media_border_radius_fix]
|
|
67
|
-
// Fixes border radius to properly match image with 8px radius
|
|
68
|
-
// To clean up: keep only flag-on behavior ('8px')
|
|
69
|
-
const borderRadius = fg('platform_editor_media_border_radius_fix') ? "var(--ds-radius-large, 8px)" : `${borderWidth}px`; // OLD BEHAVIOR (to be removed when flag is cleaned up)
|
|
70
|
-
|
|
65
|
+
const borderRadius = "var(--ds-radius-large, 8px)";
|
|
71
66
|
return jsx("div", {
|
|
72
67
|
"data-mark-type": "border",
|
|
73
68
|
"data-color": borderColor,
|
|
@@ -661,6 +661,17 @@ const headingWrapperInlineFlowStyles = css({
|
|
|
661
661
|
marginTop: '1.59091em'
|
|
662
662
|
}
|
|
663
663
|
});
|
|
664
|
+
const headingAnchorWrapperTargetSizeStyles = css({
|
|
665
|
+
'& .renderer-heading-wrapper > h1, & .renderer-heading-wrapper > h2, & .renderer-heading-wrapper > h3, & .renderer-heading-wrapper > h4, & .renderer-heading-wrapper > h5, & .renderer-heading-wrapper > h6': {
|
|
666
|
+
verticalAlign: 'middle'
|
|
667
|
+
},
|
|
668
|
+
[`& .renderer-heading-wrapper > .${HeadingAnchorWrapperClassName}`]: {
|
|
669
|
+
display: 'inline-flex',
|
|
670
|
+
alignItems: 'center',
|
|
671
|
+
justifyContent: 'center',
|
|
672
|
+
verticalAlign: 'middle'
|
|
673
|
+
}
|
|
674
|
+
});
|
|
664
675
|
const headingWithAlignmentStylesDuplicateAnchor = css({
|
|
665
676
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
|
|
666
677
|
'.fabric-editor-block-mark.fabric-editor-alignment:not(:first-child)': {
|
|
@@ -2474,6 +2485,34 @@ const codeBlockAndLayoutStyles = css({
|
|
|
2474
2485
|
}
|
|
2475
2486
|
}
|
|
2476
2487
|
});
|
|
2488
|
+
|
|
2489
|
+
// Match the first content sibling throughout streaming SSR and hydration. Emotion moves
|
|
2490
|
+
// style elements to the head, which must not change code block or media group spacing.
|
|
2491
|
+
// Keep these selectors less specific than the top-level lightweight code block override.
|
|
2492
|
+
const blockSsrMarginStyles = css({
|
|
2493
|
+
'& .MediaGroup:not(:not(style, script) ~ *), & .code-block:not(:not(style, script) ~ *)': {
|
|
2494
|
+
marginTop: 0
|
|
2495
|
+
},
|
|
2496
|
+
'& [data-layout-section] .MediaGroup:not(:not(style, script) ~ *), & [data-layout-section] .code-block:not(:not(style, script) ~ *), & li > .code-block:not(:not(style, script) ~ *)': {
|
|
2497
|
+
marginTop: 0
|
|
2498
|
+
}
|
|
2499
|
+
});
|
|
2500
|
+
|
|
2501
|
+
// Layout columns start with an empty margin-reset element. Ignore only streamed siblings
|
|
2502
|
+
// between that element and the first code block/media group, preserving later block spacing.
|
|
2503
|
+
const layoutBlockSsrMarginStyles = css({
|
|
2504
|
+
'& [data-layout-column-start] ~ .code-block:not([data-layout-column-start] ~ :not(style, script) ~ *), & [data-layout-column-start] ~ .MediaGroup:not([data-layout-column-start] ~ :not(style, script) ~ *)': {
|
|
2505
|
+
marginTop: 0
|
|
2506
|
+
}
|
|
2507
|
+
});
|
|
2508
|
+
const codeBlockInListSsrMarginSafariFixStyles = css({
|
|
2509
|
+
[`&:not([data-node-type='decisionList']) > li,
|
|
2510
|
+
&:not(.${SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER}) > li`]: {
|
|
2511
|
+
'> .code-block:not(:not(style, script) ~ *)': {
|
|
2512
|
+
marginTop: `-${akEditorLineHeight}em !important`
|
|
2513
|
+
}
|
|
2514
|
+
}
|
|
2515
|
+
});
|
|
2477
2516
|
const layoutSectionForAdvancedLayoutsStyles = css({
|
|
2478
2517
|
'& [data-layout-section]': {
|
|
2479
2518
|
'& > div + div': {
|
|
@@ -2920,13 +2959,13 @@ export const RendererStyleContainer = props => {
|
|
|
2920
2959
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- CSS custom properties for UGC font tokens
|
|
2921
2960
|
'--ak-renderer-editor-font-small-text': editorUGCTokensRefreshed['editor.font.body.small']
|
|
2922
2961
|
},
|
|
2923
|
-
css: [expValEquals('confluence_ttvc_inline_extensions', 'isEnabled', true) ? baseFontStyle : originalBaseFontLineHeight, baseStyles, fontSizeStyles, expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? headingAnchorStyles : headingAnchorStylesDuplicateAnchor, headingAnchorButtonFocusVisibleStyles, 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' && extensionStyle, contentMode === 'compact' ? paragraphStylesUGCScaledMargin : paragraphSharedStylesWithEditorUGC, listsSharedStyles, browser.gecko && listsSharedStylesForGekko, listItemHiddenMarkerStyles, indentationSharedStyles, indentationSharedStylesWithMarginFix, expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? blockMarksSharedStyles : blockMarksSharedStylesDuplicateAnchor, codeMarkSharedStyles, shadowSharedStyle, dateSharedStyle, textColorStyles, backgroundColorStyles, !expValEquals('platform_editor_lovability_text_bg_color', 'isEnabled', true) && highlightLinksUnsetStyles,
|
|
2962
|
+
css: [expValEquals('confluence_ttvc_inline_extensions', 'isEnabled', true) ? baseFontStyle : originalBaseFontLineHeight, baseStyles, fontSizeStyles, expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? headingAnchorStyles : headingAnchorStylesDuplicateAnchor, headingAnchorButtonFocusVisibleStyles, 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, isExperimentEnabled('platform_editor_heading_link_target_size') && headingAnchorWrapperTargetSizeStyles, expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? headingWithAlignmentStyles : headingWithAlignmentStylesDuplicateAnchor, ruleSharedStyles, contentMode === 'compact' && extensionStyle, contentMode === 'compact' ? paragraphStylesUGCScaledMargin : paragraphSharedStylesWithEditorUGC, listsSharedStyles, browser.gecko && listsSharedStylesForGekko, listItemHiddenMarkerStyles, indentationSharedStyles, indentationSharedStylesWithMarginFix, expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? blockMarksSharedStyles : blockMarksSharedStylesDuplicateAnchor, codeMarkSharedStyles, shadowSharedStyle, dateSharedStyle, textColorStyles, backgroundColorStyles, !expValEquals('platform_editor_lovability_text_bg_color', 'isEnabled', true) && highlightLinksUnsetStyles,
|
|
2924
2963
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
2925
2964
|
textHighlightPaddingStyles, tasksAndDecisionsStyles, expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) && headingPanelStyles, smartCardStyles, smartCardStylesAvatarFix, headerSmartCardStyles, smartCardStylesAvatarMarginFix, smartCardStylesAvatarListZeroMarginTop, fg('editor_inline_comments_on_inline_nodes') && (expValEquals('confluence_fe_renderer_inline_node_mark_color_fix', 'isEnabled', true) ? rendererAnnotationStyles : rendererAnnotationStylesOld),
|
|
2926
2965
|
// eslint-disable-next-line @atlaskit/platform/no-preconditioning
|
|
2927
|
-
fg('editor_inline_comments_on_inline_nodes') && rendererAnnotationStylesCommentHeightFix, expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? baseOtherStyles : baseOtherStylesDuplicateAnchor,
|
|
2966
|
+
fg('editor_inline_comments_on_inline_nodes') && rendererAnnotationStylesCommentHeightFix, expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? baseOtherStyles : baseOtherStylesDuplicateAnchor, expandSsrMarginStyles,
|
|
2928
2967
|
// this should be placed after baseOtherStyles
|
|
2929
|
-
expValEquals('platform_editor_render_bodied_extension_as_inline', 'isEnabled', true) && (expValEquals('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? extensionAsInlineStyle : oldExtensionAsInlineStyle), fg('platform_forge_inline_bodied_macro') && [migratedInlineBodiedFlowStyle, forgeInlineBodiedSpacingStyle], inlineExtensionRendererMarginFix, allowNestedHeaderLinks && (expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? alignedHeadingAnchorStyle : alignedHeadingAnchorStyleDuplicateAnchor), mediaSingleSharedStyle, firstWrappedMediaStyles, tableSharedStyle, expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) && roundedTableOuterBorderOverlayStyles, expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) && roundedTableRemixBlockHighlightStyles, tableContentModeScopedStyles, isExperimentEnabled('platform_editor_table_fit_to_content_patch_2') && tableContentModeExtensionContainmentStyles, tableContentModeNestedTableStyles, tableRendererHeaderStylesForTableCellOnly, fg('platform_editor_bordered_panel_nested_in_table') && tableRendererNestedPanelStyles, isBackgroundClipBrowserFixNeeded() && tableStylesBackGroundClipForGeckoForTableCellOnly, firstNodeWithNotMarginTopWithNestedDnD, rendererTableStyles, isStickyScrollbarOn && stickyScrollbarStyles, isStickyScrollbarOn && isExperimentEnabled('platform_editor_table_css_overflow_shadow') && stickyScrollbarOverflowShadowFixStyles, rendererTableHeaderEqualHeightStylesForTableCellOnly, allowColumnSorting && rendererTableSortableColumnStyles, allowColumnSorting && expValEqualsNoExposure('platform_editor_table_menu_updates', 'isEnabled', true) && rendererTableSortableColumnValignStyles, 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) ? contentMode === 'compact' ? scaledDenseEmojiStyles : scaledEmojiStyles : contentMode === 'compact' ? denseStyles : undefined, contentMode === 'compact' ? scaledDenseUnicodeEmojiStylesNew : scaledUnicodeEmojiStylesNew, syncBlockStyles, centerWrapperStyles, isInsideSyncBlock ? syncBlockRendererStyles : null, isInsideSyncBlock && tableFakeBorderStyles, isInsideSyncBlock && expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? roundedTableFakeBorderOverlayStyles : null, expValEquals('platform_editor_hide_extension_renderer_support', 'isEnabled', true) && hideExtensionStyles],
|
|
2968
|
+
expValEquals('platform_editor_render_bodied_extension_as_inline', 'isEnabled', true) && (expValEquals('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? extensionAsInlineStyle : oldExtensionAsInlineStyle), fg('platform_forge_inline_bodied_macro') && [migratedInlineBodiedFlowStyle, forgeInlineBodiedSpacingStyle], inlineExtensionRendererMarginFix, allowNestedHeaderLinks && (expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? alignedHeadingAnchorStyle : alignedHeadingAnchorStyleDuplicateAnchor), mediaSingleSharedStyle, firstWrappedMediaStyles, tableSharedStyle, expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) && roundedTableOuterBorderOverlayStyles, expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) && roundedTableRemixBlockHighlightStyles, tableContentModeScopedStyles, isExperimentEnabled('platform_editor_table_fit_to_content_patch_2') && tableContentModeExtensionContainmentStyles, tableContentModeNestedTableStyles, tableRendererHeaderStylesForTableCellOnly, fg('platform_editor_bordered_panel_nested_in_table') && tableRendererNestedPanelStyles, isBackgroundClipBrowserFixNeeded() && tableStylesBackGroundClipForGeckoForTableCellOnly, firstNodeWithNotMarginTopWithNestedDnD, rendererTableStyles, isStickyScrollbarOn && stickyScrollbarStyles, isStickyScrollbarOn && isExperimentEnabled('platform_editor_table_css_overflow_shadow') && stickyScrollbarOverflowShadowFixStyles, rendererTableHeaderEqualHeightStylesForTableCellOnly, allowColumnSorting && rendererTableSortableColumnStyles, allowColumnSorting && expValEqualsNoExposure('platform_editor_table_menu_updates', 'isEnabled', true) && rendererTableSortableColumnValignStyles, 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, fg('platform_renderer_ssr_block_margin_fix') && [blockSsrMarginStyles, layoutBlockSsrMarginStyles, browser.safari && codeBlockInListSsrMarginSafariFixStyles], 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) ? contentMode === 'compact' ? scaledDenseEmojiStyles : scaledEmojiStyles : contentMode === 'compact' ? denseStyles : undefined, contentMode === 'compact' ? scaledDenseUnicodeEmojiStylesNew : scaledUnicodeEmojiStylesNew, syncBlockStyles, centerWrapperStyles, isInsideSyncBlock ? syncBlockRendererStyles : null, isInsideSyncBlock && tableFakeBorderStyles, isInsideSyncBlock && expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? roundedTableFakeBorderOverlayStyles : null, expValEquals('platform_editor_hide_extension_renderer_support', 'isEnabled', true) && hideExtensionStyles],
|
|
2930
2969
|
"data-testid": testId
|
|
2931
2970
|
}, children);
|
|
2932
2971
|
};
|
|
@@ -58,7 +58,7 @@ export const DEGRADED_SEVERITY_THRESHOLD = 3000;
|
|
|
58
58
|
const TABLE_INFO_TIMEOUT = 10000;
|
|
59
59
|
const RENDER_EVENT_SAMPLE_RATE = 0.1;
|
|
60
60
|
const packageName = "@atlaskit/renderer";
|
|
61
|
-
const packageVersion = "141.0.
|
|
61
|
+
const packageVersion = "141.0.3";
|
|
62
62
|
const setAsQueryContainerStyles = css({
|
|
63
63
|
containerName: 'ak-renderer-wrapper',
|
|
64
64
|
containerType: 'inline-size'
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
._1dqoglyw{border-style:none}._12ji1r31{outline-color:currentColor}
|
|
2
|
+
._12y31o36{outline-width:medium}
|
|
3
|
+
._19bvidpf{padding-left:0}
|
|
4
|
+
._1bah1h6o{justify-content:center}
|
|
5
|
+
._1bsb1tcg{width:24px}
|
|
6
|
+
._1e0c116y{display:inline-flex}
|
|
7
|
+
._1qu2glyw{outline-style:none}
|
|
8
|
+
._4cvr1h6o{align-items:center}
|
|
9
|
+
._4t3i1tcg{height:24px}
|
|
10
|
+
._80omtlke{cursor:pointer}
|
|
11
|
+
._bfhk1j28{background-color:transparent}
|
|
12
|
+
._ca0qidpf{padding-top:0}
|
|
13
|
+
._n3tdidpf{padding-bottom:0}
|
|
14
|
+
._s7n4nkob{vertical-align:middle}
|
|
15
|
+
._u5f3idpf{padding-right:0}
|
|
16
|
+
._vchhusvi{box-sizing:border-box}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
/* heading-anchor-button.tsx generated by @compiled/babel-plugin v3.0.2 */
|
|
2
|
+
import _extends from "@babel/runtime/helpers/extends";
|
|
3
|
+
import "./heading-anchor-button.compiled.css";
|
|
4
|
+
import * as React from 'react';
|
|
5
|
+
import { ax, ix } from "@compiled/react/runtime";
|
|
6
|
+
var buttonStyles = null;
|
|
7
|
+
|
|
8
|
+
/** Heading link button with a minimum 24px pointer target. */
|
|
9
|
+
export default function HeadingAnchorButton(props) {
|
|
10
|
+
// eslint-disable-next-line react/jsx-props-no-spreading -- Forward the existing heading anchor's accessibility and event props.
|
|
11
|
+
return /*#__PURE__*/React.createElement("button", _extends({}, props, {
|
|
12
|
+
type: "button",
|
|
13
|
+
className: ax(["_12ji1r31 _1qu2glyw _12y31o36 _1dqoglyw _1e0c116y _vchhusvi _4cvr1h6o _1bah1h6o _1bsb1tcg _4t3i1tcg _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _s7n4nkob _bfhk1j28 _80omtlke"])
|
|
14
|
+
}));
|
|
15
|
+
}
|
|
@@ -26,13 +26,24 @@ import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-e
|
|
|
26
26
|
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
27
27
|
import Tooltip from '@atlaskit/tooltip/Tooltip';
|
|
28
28
|
import { headingAnchorLinkMessages } from '../../messages';
|
|
29
|
+
import HeadingAnchorButton from './heading-anchor-button';
|
|
29
30
|
export var HeadingAnchorWrapperClassName = 'heading-anchor-wrapper';
|
|
31
|
+
var headingAnchorWrapperTargetSizeStyles = css({
|
|
32
|
+
display: 'inline-flex',
|
|
33
|
+
boxSizing: 'border-box',
|
|
34
|
+
alignItems: 'center',
|
|
35
|
+
justifyContent: 'center',
|
|
36
|
+
width: '24px',
|
|
37
|
+
height: '24px',
|
|
38
|
+
verticalAlign: 'middle'
|
|
39
|
+
});
|
|
30
40
|
var CopyAnchorWrapperWithRef = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
31
41
|
var children = props.children,
|
|
32
42
|
rest = _objectWithoutProperties(props, _excluded);
|
|
33
43
|
return jsx("span", _extends({}, rest, {
|
|
34
44
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
35
45
|
className: HeadingAnchorWrapperClassName,
|
|
46
|
+
css: isExperimentEnabled('platform_editor_heading_link_target_size') ? headingAnchorWrapperTargetSizeStyles : undefined,
|
|
36
47
|
ref: ref
|
|
37
48
|
}), children);
|
|
38
49
|
});
|
|
@@ -45,6 +56,11 @@ var copyAnchorButtonStyles = css({
|
|
|
45
56
|
cursor: 'pointer',
|
|
46
57
|
right: 0
|
|
47
58
|
});
|
|
59
|
+
var scaledLinkIconStyles = css({
|
|
60
|
+
display: 'inline-flex',
|
|
61
|
+
transform: 'scale(1.5)',
|
|
62
|
+
transformOrigin: 'center'
|
|
63
|
+
});
|
|
48
64
|
// Ignored via go/ees005
|
|
49
65
|
// eslint-disable-next-line @repo/internal/react/no-class-components
|
|
50
66
|
var HeadingAnchor = /*#__PURE__*/function (_React$PureComponent) {
|
|
@@ -123,6 +139,27 @@ var HeadingAnchor = /*#__PURE__*/function (_React$PureComponent) {
|
|
|
123
139
|
heading: headingId
|
|
124
140
|
}) : headingId;
|
|
125
141
|
var tabIndex = expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? 0 : hideFromScreenReader ? undefined : -1;
|
|
142
|
+
if (isExperimentEnabled('platform_editor_heading_link_target_size')) {
|
|
143
|
+
return jsx(HeadingAnchorButton, {
|
|
144
|
+
"data-testid": "anchor-button",
|
|
145
|
+
id: _this.copyLinkId,
|
|
146
|
+
onMouseLeave: _this.resetMessage,
|
|
147
|
+
onBlur: _this.resetMessage,
|
|
148
|
+
onClick: _this.copyToClipboard,
|
|
149
|
+
"aria-hidden": hideFromScreenReader,
|
|
150
|
+
tabIndex: tabIndex,
|
|
151
|
+
"aria-label": hideFromScreenReader ? undefined : _this.state.tooltipMessage,
|
|
152
|
+
"aria-labelledby": hideFromScreenReader ? undefined : labelledBy,
|
|
153
|
+
type: "button"
|
|
154
|
+
}, jsx("span", {
|
|
155
|
+
css: scaledLinkIconStyles,
|
|
156
|
+
"data-testid": "scaled-link-icon"
|
|
157
|
+
}, jsx(LinkIcon, {
|
|
158
|
+
label: _this.getCopyAriaLabel(),
|
|
159
|
+
size: "medium",
|
|
160
|
+
color: _this.state.isClicked ? "var(--ds-icon-selected, #1868DB)" : "var(--ds-icon-subtle, #505258)"
|
|
161
|
+
})));
|
|
162
|
+
}
|
|
126
163
|
return jsx("button", {
|
|
127
164
|
"data-testid": "anchor-button",
|
|
128
165
|
id: _this.copyLinkId,
|
|
@@ -9,6 +9,7 @@ import "./layoutColumn-compiled.compiled.css";
|
|
|
9
9
|
import { ax, ix } from "@compiled/react/runtime";
|
|
10
10
|
import React from 'react';
|
|
11
11
|
import { WidthProvider } from '@atlaskit/editor-common/ui';
|
|
12
|
+
import { fg } from '@atlaskit/platform-feature-flags/fg';
|
|
12
13
|
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
13
14
|
|
|
14
15
|
// localized styles, was from clearNextSiblingMarginTopStyle in @atlaskit/editor-common/ui
|
|
@@ -33,6 +34,7 @@ export var LayoutSectionCompiled = function LayoutSectionCompiled(props) {
|
|
|
33
34
|
},
|
|
34
35
|
className: ax([(isLayoutColumnValignRenderingEnabled || isLayoutColumnMenuEnabled) && props.valign === 'middle' && "_1e0c1txw _2lx21bp4 _1bah1h6o", (isLayoutColumnValignRenderingEnabled || isLayoutColumnMenuEnabled) && props.valign === 'bottom' && "_1e0c1txw _2lx21bp4 _1bahesu3", "_1tihidpf _12kpidpf"])
|
|
35
36
|
}, /*#__PURE__*/React.createElement(WidthProvider, null, /*#__PURE__*/React.createElement("div", {
|
|
37
|
+
"data-layout-column-start": fg('platform_renderer_ssr_block_margin_fix') ? 'true' : undefined,
|
|
36
38
|
className: ax(["_1skbgrf3", "_19segrf3 _1ki1grf3 _bmdegrf3 _166hgrf3 _7g1ogrf3 _sk2jgrf3 _hgeogrf3"])
|
|
37
39
|
}), props.children));
|
|
38
40
|
};
|
|
@@ -14,6 +14,7 @@ import React from 'react';
|
|
|
14
14
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- intentional: emotion fallback for compiled migration
|
|
15
15
|
import { css, jsx } from '@emotion/react';
|
|
16
16
|
import { WidthProvider } from '@atlaskit/editor-common/ui';
|
|
17
|
+
import { fg } from '@atlaskit/platform-feature-flags/fg';
|
|
17
18
|
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
18
19
|
|
|
19
20
|
// localized styles, was from clearNextSiblingMarginTopStyle in @atlaskit/editor-common/ui
|
|
@@ -64,6 +65,7 @@ export var LayoutSectionEmotion = function LayoutSectionEmotion(props) {
|
|
|
64
65
|
// Keep separate: Compiled crashes on ternary/object lookup here.
|
|
65
66
|
(isLayoutColumnValignRenderingEnabled || isLayoutColumnMenuEnabled) && props.valign === 'middle' && verticalAlignMiddleStyles, (isLayoutColumnValignRenderingEnabled || isLayoutColumnMenuEnabled) && props.valign === 'bottom' && verticalAlignBottomStyles, multipleWrappedImagesStyle]
|
|
66
67
|
}, jsx(WidthProvider, null, jsx("div", {
|
|
68
|
+
"data-layout-column-start": fg('platform_renderer_ssr_block_margin_fix') ? 'true' : undefined,
|
|
67
69
|
css: [clearNextSiblingMarginTopStyle, clearNextSiblingBlockMarkMarginTopStyle]
|
|
68
70
|
}), props.children));
|
|
69
71
|
};
|
|
@@ -77,12 +77,7 @@ var MediaBorder = function MediaBorder(_ref) {
|
|
|
77
77
|
var borderColor = (_mark$attrs$color = mark === null || mark === void 0 ? void 0 : mark.attrs.color) !== null && _mark$attrs$color !== void 0 ? _mark$attrs$color : '';
|
|
78
78
|
var borderWidth = (_mark$attrs$size = mark === null || mark === void 0 ? void 0 : mark.attrs.size) !== null && _mark$attrs$size !== void 0 ? _mark$attrs$size : 0;
|
|
79
79
|
var paletteColorValue = hexToEditorBorderPaletteColor(borderColor) || borderColor;
|
|
80
|
-
|
|
81
|
-
// [FEATURE FLAG: platform_editor_media_border_radius_fix]
|
|
82
|
-
// Fixes border radius to properly match image with 8px radius
|
|
83
|
-
// To clean up: keep only flag-on behavior ('8px')
|
|
84
|
-
var borderRadius = fg('platform_editor_media_border_radius_fix') ? "var(--ds-radius-large, 8px)" : "".concat(borderWidth, "px"); // OLD BEHAVIOR (to be removed when flag is cleaned up)
|
|
85
|
-
|
|
80
|
+
var borderRadius = "var(--ds-radius-large, 8px)";
|
|
86
81
|
return jsx("div", {
|
|
87
82
|
"data-mark-type": "border",
|
|
88
83
|
"data-color": borderColor,
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
2
|
-
var
|
|
2
|
+
var _css0, _$concat3, _$concat5;
|
|
3
3
|
/* eslint-disable @atlaskit/ui-styling-standard/no-important-styles, @atlaskit/ui-styling-standard/no-unsafe-selectors */
|
|
4
4
|
/* eslint-disable @atlaskit/ui-styling-standard/no-imported-style-values */
|
|
5
5
|
/* eslint-disable @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values */
|
|
@@ -547,6 +547,16 @@ var headingWrapperInlineFlowStyles = css(_defineProperty(_defineProperty(_define
|
|
|
547
547
|
// eslint-disable-next-line @atlaskit/design-system/use-tokens-space
|
|
548
548
|
marginTop: '1.59091em'
|
|
549
549
|
}));
|
|
550
|
+
var headingAnchorWrapperTargetSizeStyles = css(_defineProperty({
|
|
551
|
+
'& .renderer-heading-wrapper > h1, & .renderer-heading-wrapper > h2, & .renderer-heading-wrapper > h3, & .renderer-heading-wrapper > h4, & .renderer-heading-wrapper > h5, & .renderer-heading-wrapper > h6': {
|
|
552
|
+
verticalAlign: 'middle'
|
|
553
|
+
}
|
|
554
|
+
}, "& .renderer-heading-wrapper > .".concat(HeadingAnchorWrapperClassName), {
|
|
555
|
+
display: 'inline-flex',
|
|
556
|
+
alignItems: 'center',
|
|
557
|
+
justifyContent: 'center',
|
|
558
|
+
verticalAlign: 'middle'
|
|
559
|
+
}));
|
|
550
560
|
var headingWithAlignmentStylesDuplicateAnchor = css({
|
|
551
561
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
|
|
552
562
|
'.fabric-editor-block-mark.fabric-editor-alignment:not(:first-child)': {
|
|
@@ -637,13 +647,13 @@ var paragraphStylesUGCScaledMargin = css({
|
|
|
637
647
|
marginBottom: 0
|
|
638
648
|
}
|
|
639
649
|
});
|
|
640
|
-
var listsSharedStyles = css((
|
|
650
|
+
var listsSharedStyles = css((_css0 = {
|
|
641
651
|
/* =============== INDENTATION SPACING ========= */
|
|
642
652
|
'ul, ol': {
|
|
643
653
|
boxSizing: 'border-box',
|
|
644
654
|
paddingLeft: "var(--ed--list--item-counter--padding, ".concat(listItemCounterPadding, "px)")
|
|
645
655
|
}
|
|
646
|
-
}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(
|
|
656
|
+
}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_css0, "".concat(orderedListSelector, ", ").concat(bulletListSelector), {
|
|
647
657
|
/*
|
|
648
658
|
Ensures list item content adheres to the list's margin instead
|
|
649
659
|
of filling the entire block row. This is important to allow
|
|
@@ -675,7 +685,7 @@ var listsSharedStyles = css((_css9 = {
|
|
|
675
685
|
listStyleType: 'lower-alpha'
|
|
676
686
|
}), 'ol[data-indent-level="3"], ol[data-indent-level="6"]', {
|
|
677
687
|
listStyleType: 'lower-roman'
|
|
678
|
-
}), _defineProperty(_defineProperty(_defineProperty(
|
|
688
|
+
}), _defineProperty(_defineProperty(_defineProperty(_css0, 'ul[data-indent-level="1"], ul[data-indent-level="4"]', {
|
|
679
689
|
listStyleType: 'disc'
|
|
680
690
|
}), 'ul[data-indent-level="2"], ul[data-indent-level="5"]', {
|
|
681
691
|
listStyleType: 'circle'
|
|
@@ -1919,6 +1929,31 @@ var codeBlockAndLayoutStyles = css(_defineProperty(_defineProperty(_defineProper
|
|
|
1919
1929
|
marginBottom: blockNodesVerticalMargin
|
|
1920
1930
|
}
|
|
1921
1931
|
}));
|
|
1932
|
+
|
|
1933
|
+
// Match the first content sibling throughout streaming SSR and hydration. Emotion moves
|
|
1934
|
+
// style elements to the head, which must not change code block or media group spacing.
|
|
1935
|
+
// Keep these selectors less specific than the top-level lightweight code block override.
|
|
1936
|
+
var blockSsrMarginStyles = css({
|
|
1937
|
+
'& .MediaGroup:not(:not(style, script) ~ *), & .code-block:not(:not(style, script) ~ *)': {
|
|
1938
|
+
marginTop: 0
|
|
1939
|
+
},
|
|
1940
|
+
'& [data-layout-section] .MediaGroup:not(:not(style, script) ~ *), & [data-layout-section] .code-block:not(:not(style, script) ~ *), & li > .code-block:not(:not(style, script) ~ *)': {
|
|
1941
|
+
marginTop: 0
|
|
1942
|
+
}
|
|
1943
|
+
});
|
|
1944
|
+
|
|
1945
|
+
// Layout columns start with an empty margin-reset element. Ignore only streamed siblings
|
|
1946
|
+
// between that element and the first code block/media group, preserving later block spacing.
|
|
1947
|
+
var layoutBlockSsrMarginStyles = css({
|
|
1948
|
+
'& [data-layout-column-start] ~ .code-block:not([data-layout-column-start] ~ :not(style, script) ~ *), & [data-layout-column-start] ~ .MediaGroup:not([data-layout-column-start] ~ :not(style, script) ~ *)': {
|
|
1949
|
+
marginTop: 0
|
|
1950
|
+
}
|
|
1951
|
+
});
|
|
1952
|
+
var codeBlockInListSsrMarginSafariFixStyles = css(_defineProperty({}, "&:not([data-node-type='decisionList']) > li,\n\t\t&:not(.".concat(SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER, ") > li"), {
|
|
1953
|
+
'> .code-block:not(:not(style, script) ~ *)': {
|
|
1954
|
+
marginTop: "-".concat(akEditorLineHeight, "em !important")
|
|
1955
|
+
}
|
|
1956
|
+
}));
|
|
1922
1957
|
var layoutSectionForAdvancedLayoutsStyles = css({
|
|
1923
1958
|
'& [data-layout-section]': {
|
|
1924
1959
|
'& > div + div': {
|
|
@@ -2281,13 +2316,13 @@ export var RendererStyleContainer = function RendererStyleContainer(props) {
|
|
|
2281
2316
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- CSS custom properties for UGC font tokens
|
|
2282
2317
|
'--ak-renderer-editor-font-small-text': editorUGCTokensRefreshed['editor.font.body.small']
|
|
2283
2318
|
},
|
|
2284
|
-
css: [expValEquals('confluence_ttvc_inline_extensions', 'isEnabled', true) ? baseFontStyle : originalBaseFontLineHeight, baseStyles, fontSizeStyles, expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? headingAnchorStyles : headingAnchorStylesDuplicateAnchor, headingAnchorButtonFocusVisibleStyles, 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' && extensionStyle, contentMode === 'compact' ? paragraphStylesUGCScaledMargin : paragraphSharedStylesWithEditorUGC, listsSharedStyles, browser.gecko && listsSharedStylesForGekko, listItemHiddenMarkerStyles, indentationSharedStyles, indentationSharedStylesWithMarginFix, expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? blockMarksSharedStyles : blockMarksSharedStylesDuplicateAnchor, codeMarkSharedStyles, shadowSharedStyle, dateSharedStyle, textColorStyles, backgroundColorStyles, !expValEquals('platform_editor_lovability_text_bg_color', 'isEnabled', true) && highlightLinksUnsetStyles,
|
|
2319
|
+
css: [expValEquals('confluence_ttvc_inline_extensions', 'isEnabled', true) ? baseFontStyle : originalBaseFontLineHeight, baseStyles, fontSizeStyles, expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? headingAnchorStyles : headingAnchorStylesDuplicateAnchor, headingAnchorButtonFocusVisibleStyles, 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, isExperimentEnabled('platform_editor_heading_link_target_size') && headingAnchorWrapperTargetSizeStyles, expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? headingWithAlignmentStyles : headingWithAlignmentStylesDuplicateAnchor, ruleSharedStyles, contentMode === 'compact' && extensionStyle, contentMode === 'compact' ? paragraphStylesUGCScaledMargin : paragraphSharedStylesWithEditorUGC, listsSharedStyles, browser.gecko && listsSharedStylesForGekko, listItemHiddenMarkerStyles, indentationSharedStyles, indentationSharedStylesWithMarginFix, expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? blockMarksSharedStyles : blockMarksSharedStylesDuplicateAnchor, codeMarkSharedStyles, shadowSharedStyle, dateSharedStyle, textColorStyles, backgroundColorStyles, !expValEquals('platform_editor_lovability_text_bg_color', 'isEnabled', true) && highlightLinksUnsetStyles,
|
|
2285
2320
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
2286
2321
|
textHighlightPaddingStyles, tasksAndDecisionsStyles, expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) && headingPanelStyles, smartCardStyles, smartCardStylesAvatarFix, headerSmartCardStyles, smartCardStylesAvatarMarginFix, smartCardStylesAvatarListZeroMarginTop, fg('editor_inline_comments_on_inline_nodes') && (expValEquals('confluence_fe_renderer_inline_node_mark_color_fix', 'isEnabled', true) ? rendererAnnotationStyles : rendererAnnotationStylesOld),
|
|
2287
2322
|
// eslint-disable-next-line @atlaskit/platform/no-preconditioning
|
|
2288
|
-
fg('editor_inline_comments_on_inline_nodes') && rendererAnnotationStylesCommentHeightFix, expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? baseOtherStyles : baseOtherStylesDuplicateAnchor,
|
|
2323
|
+
fg('editor_inline_comments_on_inline_nodes') && rendererAnnotationStylesCommentHeightFix, expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? baseOtherStyles : baseOtherStylesDuplicateAnchor, expandSsrMarginStyles,
|
|
2289
2324
|
// this should be placed after baseOtherStyles
|
|
2290
|
-
expValEquals('platform_editor_render_bodied_extension_as_inline', 'isEnabled', true) && (expValEquals('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? extensionAsInlineStyle : oldExtensionAsInlineStyle), fg('platform_forge_inline_bodied_macro') && [migratedInlineBodiedFlowStyle, forgeInlineBodiedSpacingStyle], inlineExtensionRendererMarginFix, allowNestedHeaderLinks && (expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? alignedHeadingAnchorStyle : alignedHeadingAnchorStyleDuplicateAnchor), mediaSingleSharedStyle, firstWrappedMediaStyles, tableSharedStyle, expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) && roundedTableOuterBorderOverlayStyles, expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) && roundedTableRemixBlockHighlightStyles, tableContentModeScopedStyles, isExperimentEnabled('platform_editor_table_fit_to_content_patch_2') && tableContentModeExtensionContainmentStyles, tableContentModeNestedTableStyles, tableRendererHeaderStylesForTableCellOnly, fg('platform_editor_bordered_panel_nested_in_table') && tableRendererNestedPanelStyles, isBackgroundClipBrowserFixNeeded() && tableStylesBackGroundClipForGeckoForTableCellOnly, firstNodeWithNotMarginTopWithNestedDnD, rendererTableStyles, isStickyScrollbarOn && stickyScrollbarStyles, isStickyScrollbarOn && isExperimentEnabled('platform_editor_table_css_overflow_shadow') && stickyScrollbarOverflowShadowFixStyles, rendererTableHeaderEqualHeightStylesForTableCellOnly, allowColumnSorting && rendererTableSortableColumnStyles, allowColumnSorting && expValEqualsNoExposure('platform_editor_table_menu_updates', 'isEnabled', true) && rendererTableSortableColumnValignStyles, 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) ? contentMode === 'compact' ? scaledDenseEmojiStyles : scaledEmojiStyles : contentMode === 'compact' ? denseStyles : undefined, contentMode === 'compact' ? scaledDenseUnicodeEmojiStylesNew : scaledUnicodeEmojiStylesNew, syncBlockStyles, centerWrapperStyles, isInsideSyncBlock ? syncBlockRendererStyles : null, isInsideSyncBlock && tableFakeBorderStyles, isInsideSyncBlock && expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? roundedTableFakeBorderOverlayStyles : null, expValEquals('platform_editor_hide_extension_renderer_support', 'isEnabled', true) && hideExtensionStyles],
|
|
2325
|
+
expValEquals('platform_editor_render_bodied_extension_as_inline', 'isEnabled', true) && (expValEquals('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? extensionAsInlineStyle : oldExtensionAsInlineStyle), fg('platform_forge_inline_bodied_macro') && [migratedInlineBodiedFlowStyle, forgeInlineBodiedSpacingStyle], inlineExtensionRendererMarginFix, allowNestedHeaderLinks && (expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? alignedHeadingAnchorStyle : alignedHeadingAnchorStyleDuplicateAnchor), mediaSingleSharedStyle, firstWrappedMediaStyles, tableSharedStyle, expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) && roundedTableOuterBorderOverlayStyles, expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) && roundedTableRemixBlockHighlightStyles, tableContentModeScopedStyles, isExperimentEnabled('platform_editor_table_fit_to_content_patch_2') && tableContentModeExtensionContainmentStyles, tableContentModeNestedTableStyles, tableRendererHeaderStylesForTableCellOnly, fg('platform_editor_bordered_panel_nested_in_table') && tableRendererNestedPanelStyles, isBackgroundClipBrowserFixNeeded() && tableStylesBackGroundClipForGeckoForTableCellOnly, firstNodeWithNotMarginTopWithNestedDnD, rendererTableStyles, isStickyScrollbarOn && stickyScrollbarStyles, isStickyScrollbarOn && isExperimentEnabled('platform_editor_table_css_overflow_shadow') && stickyScrollbarOverflowShadowFixStyles, rendererTableHeaderEqualHeightStylesForTableCellOnly, allowColumnSorting && rendererTableSortableColumnStyles, allowColumnSorting && expValEqualsNoExposure('platform_editor_table_menu_updates', 'isEnabled', true) && rendererTableSortableColumnValignStyles, 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, fg('platform_renderer_ssr_block_margin_fix') && [blockSsrMarginStyles, layoutBlockSsrMarginStyles, browser.safari && codeBlockInListSsrMarginSafariFixStyles], 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) ? contentMode === 'compact' ? scaledDenseEmojiStyles : scaledEmojiStyles : contentMode === 'compact' ? denseStyles : undefined, contentMode === 'compact' ? scaledDenseUnicodeEmojiStylesNew : scaledUnicodeEmojiStylesNew, syncBlockStyles, centerWrapperStyles, isInsideSyncBlock ? syncBlockRendererStyles : null, isInsideSyncBlock && tableFakeBorderStyles, isInsideSyncBlock && expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? roundedTableFakeBorderOverlayStyles : null, expValEquals('platform_editor_hide_extension_renderer_support', 'isEnabled', true) && hideExtensionStyles],
|
|
2291
2326
|
"data-testid": testId
|
|
2292
2327
|
}, children);
|
|
2293
2328
|
};
|
|
@@ -63,7 +63,7 @@ export var DEGRADED_SEVERITY_THRESHOLD = 3000;
|
|
|
63
63
|
var TABLE_INFO_TIMEOUT = 10000;
|
|
64
64
|
var RENDER_EVENT_SAMPLE_RATE = 0.1;
|
|
65
65
|
var packageName = "@atlaskit/renderer";
|
|
66
|
-
var packageVersion = "141.0.
|
|
66
|
+
var packageVersion = "141.0.3";
|
|
67
67
|
var setAsQueryContainerStyles = css({
|
|
68
68
|
containerName: 'ak-renderer-wrapper',
|
|
69
69
|
containerType: 'inline-size'
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @jsxRuntime classic
|
|
3
|
+
* @jsx jsx
|
|
4
|
+
*/
|
|
5
|
+
import type { ButtonHTMLAttributes, JSX } from 'react';
|
|
6
|
+
/** Heading link button with a minimum 24px pointer target. */
|
|
7
|
+
export default function HeadingAnchorButton(props: ButtonHTMLAttributes<HTMLButtonElement>): JSX.Element;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/renderer",
|
|
3
|
-
"version": "141.0.
|
|
3
|
+
"version": "141.0.4",
|
|
4
4
|
"description": "Renderer component",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -40,7 +40,7 @@
|
|
|
40
40
|
"@atlaskit/analytics-namespaced-context": "^8.2.0",
|
|
41
41
|
"@atlaskit/analytics-next": "^12.5.0",
|
|
42
42
|
"@atlaskit/browser-apis": "^1.2.0",
|
|
43
|
-
"@atlaskit/button": "^25.
|
|
43
|
+
"@atlaskit/button": "^25.4.0",
|
|
44
44
|
"@atlaskit/code": "^19.2.0",
|
|
45
45
|
"@atlaskit/css": "^1.1.0",
|
|
46
46
|
"@atlaskit/editor-card-provider": "^7.3.0",
|
|
@@ -69,7 +69,7 @@
|
|
|
69
69
|
"@atlaskit/pragmatic-drag-and-drop": "^3.1.0",
|
|
70
70
|
"@atlaskit/react-compiler-gating": "^0.2.0",
|
|
71
71
|
"@atlaskit/react-ufo": "^7.13.0",
|
|
72
|
-
"@atlaskit/smart-card": "^45.
|
|
72
|
+
"@atlaskit/smart-card": "^45.25.0",
|
|
73
73
|
"@atlaskit/status": "^5.12.0",
|
|
74
74
|
"@atlaskit/task-decision": "^21.10.0",
|
|
75
75
|
"@atlaskit/theme": "^28.2.0",
|
|
@@ -88,7 +88,7 @@
|
|
|
88
88
|
"uuid": "^11.1.1"
|
|
89
89
|
},
|
|
90
90
|
"peerDependencies": {
|
|
91
|
-
"@atlaskit/editor-common": "^123.
|
|
91
|
+
"@atlaskit/editor-common": "^123.4.0",
|
|
92
92
|
"@atlaskit/link-provider": "^5.7.0",
|
|
93
93
|
"@atlaskit/media-core": "^38.2.0",
|
|
94
94
|
"react": "^18.2.0 || ^19.2.0",
|
|
@@ -153,7 +153,7 @@
|
|
|
153
153
|
"platform_renderer_table_row_functional": {
|
|
154
154
|
"type": "boolean"
|
|
155
155
|
},
|
|
156
|
-
"
|
|
156
|
+
"platform_renderer_ssr_block_margin_fix": {
|
|
157
157
|
"type": "boolean"
|
|
158
158
|
},
|
|
159
159
|
"platform_native_embeds_rollout_non_maui_experience": {
|
|
@@ -227,9 +227,6 @@
|
|
|
227
227
|
"platform_editor_native_embeds_fallback_transform": {
|
|
228
228
|
"type": "boolean"
|
|
229
229
|
},
|
|
230
|
-
"platform_editor_media_border_radius_fix": {
|
|
231
|
-
"type": "boolean"
|
|
232
|
-
},
|
|
233
230
|
"platform_media_video_captions": {
|
|
234
231
|
"type": "boolean",
|
|
235
232
|
"referenceOnly": true
|