@atlaskit/renderer 126.5.0 → 126.5.2

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/renderer
 
+## 126.5.2
+
+### Patch Changes
+
+- Updated dependencies
+
+## 126.5.1
+
+### Patch Changes
+
+- [`1c91357f0c2e8`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/1c91357f0c2e8) -
+  Confcloud-83420: Fixed edge cases, unskipped tests
+
 ## 126.5.0
 
 ### Minor Changes

package/dist/cjs/react/nodes/heading.js

@@ -22,6 +22,7 @@ var _react2 = require("@emotion/react");
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
+var RENDERER_HEADING_WRAPPER = 'renderer-heading-wrapper';
 var getCurrentUrlWithHash = function getCurrentUrlWithHash() {
   var hash = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
   var url = new URL(window.location.href);
@@ -38,8 +39,11 @@ function hasRightAlignmentMark(marks) {
   });
 }
 var wrapperStyles = (0, _react2.css)({
-  display: 'flex',
-  alignItems: 'baseline'
+  // Important: do NOT use flex here.
+  // With flex + baseline alignment, the anchor aligns to the *first line* of a multi-line heading,
+  // which visually places it at the top-right. We want the anchor to sit immediately after the
+  // last character of the heading (i.e. after the final wrapped line), so we use normal inline flow.
+  display: 'block'
 });
 function WrappedHeadingAnchor(_ref) {
   var enableNestedHeaderLinks = _ref.enableNestedHeaderLinks,
@@ -149,30 +153,29 @@ function HeadingWithWrapper(props) {
       mouseEntered.current = true;
     }
   };
-  return (
+  return (0, _react2.jsx)("div", {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
-    (0, _react2.jsx)("div", {
-      className: "renderer-heading-wrapper",
-      "data-level": props.level,
-      css: wrapperStyles
-    }, showAnchorLink && headingId && isRightAligned && (0, _react2.jsx)(WrappedHeadingAnchor, {
-      level: props.level,
-      enableNestedHeaderLinks: enableNestedHeaderLinks,
-      headingId: headingId,
-      hideFromScreenReader: false
-    }), (0, _react2.jsx)(HX, {
-      id: headingIdToUse,
-      "data-local-id": localId,
-      "data-renderer-start-pos": dataAttributes['data-renderer-start-pos'],
-      "data-as-inline": asInline,
-      onMouseEnter: mouseEnterHandler
-    }, props.children), showAnchorLink && headingId && !isRightAligned && (0, _react2.jsx)(WrappedHeadingAnchor, {
-      level: props.level,
-      enableNestedHeaderLinks: enableNestedHeaderLinks,
-      headingId: headingId,
-      hideFromScreenReader: false
-    }))
-  );
+    className: RENDERER_HEADING_WRAPPER,
+    "data-testid": RENDERER_HEADING_WRAPPER,
+    "data-level": props.level,
+    css: wrapperStyles
+  }, showAnchorLink && headingId && isRightAligned && (0, _react2.jsx)(WrappedHeadingAnchor, {
+    level: props.level,
+    enableNestedHeaderLinks: enableNestedHeaderLinks,
+    headingId: headingId,
+    hideFromScreenReader: false
+  }), (0, _react2.jsx)(HX, {
+    id: headingIdToUse,
+    "data-local-id": localId,
+    "data-renderer-start-pos": dataAttributes['data-renderer-start-pos'],
+    "data-as-inline": asInline,
+    onMouseEnter: mouseEnterHandler
+  }, props.children), showAnchorLink && headingId && !isRightAligned && (0, _react2.jsx)(WrappedHeadingAnchor, {
+    level: props.level,
+    enableNestedHeaderLinks: enableNestedHeaderLinks,
+    headingId: headingId,
+    hideFromScreenReader: false
+  }));
 }
 
 /**

package/dist/cjs/ui/Renderer/RendererStyleContainer.js

@@ -29,7 +29,7 @@ var _getBaseFontSize = require("./get-base-font-size");
 var _emoji = require("@atlaskit/editor-common/emoji");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _syncBlock = require("@atlaskit/editor-common/sync-block");
-var _css7;
+var _css8;
 /* eslint-disable @atlaskit/ui-styling-standard/no-important-styles, @atlaskit/ui-styling-standard/no-unsafe-selectors */
 /* eslint-disable @atlaskit/ui-styling-standard/no-imported-style-values */
 /* eslint-disable @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values */
@@ -384,7 +384,7 @@ var blockquoteSharedStyles = (0, _react.css)({
     }
   }
 });
-var headingsSharedStylesWithEditorUGC = (0, _react.css)({
+var headingsSharedStyles = (0, _react.css)({
   '& h1': {
     // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
     font: "var(--ak-renderer-editor-font-heading-h1)",
@@ -451,6 +451,43 @@ var headingsSharedStylesWithEditorUGC = (0, _react.css)({
     }
   }
 });
+
+/**
+ * When the copy-link a11y fix is enabled, the heading copy-link button is a sibling of the heading
+ * text within `.renderer-heading-wrapper`. To ensure the button sits immediately after the last
+ * rendered character (including when the heading wraps), the heading itself needs to participate in
+ * inline layout.
+ *
+ * Since inline elements don't support vertical margins in normal flow, we migrate the UGC heading
+ * `marginTop` values (from `headingsSharedStyles`) onto the wrapper.
+ */
+var headingWrapperInlineFlowStyles = (0, _react.css)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({
+  // Ensure heading and copy-link button participate in inline flow so the button sits after the final wrapped line of text.
+  '& .renderer-heading-wrapper > h1, & .renderer-heading-wrapper > h2, & .renderer-heading-wrapper > h3, & .renderer-heading-wrapper > h4, & .renderer-heading-wrapper > h5, & .renderer-heading-wrapper > h6': {
+    display: 'inline'
+  }
+}, "& .renderer-heading-wrapper > .".concat(_headingAnchor.HeadingAnchorWrapperClassName), {
+  display: 'inline',
+  verticalAlign: 'baseline'
+}), '& .renderer-heading-wrapper[data-level="1"]', {
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
+  marginTop: '1.45833em'
+}), '& .renderer-heading-wrapper[data-level="2"]', {
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
+  marginTop: '1.4em'
+}), '& .renderer-heading-wrapper[data-level="3"]', {
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
+  marginTop: '1.31249em'
+}), '& .renderer-heading-wrapper[data-level="4"]', {
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
+  marginTop: '1.25em'
+}), '& .renderer-heading-wrapper[data-level="5"]', {
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
+  marginTop: '1.45833em'
+}), '& .renderer-heading-wrapper[data-level="6"]', {
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
+  marginTop: '1.59091em'
+}));
 var headingWithAlignmentStylesDuplicateAnchor = (0, _react.css)({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
   '.fabric-editor-block-mark.fabric-editor-alignment:not(:first-child)': {
@@ -495,42 +532,21 @@ var headingWithAlignmentStylesDuplicateAnchor = (0, _react.css)({
   }
 });
 var headingWithAlignmentStyles = (0, _react.css)({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
-  '.fabric-editor-block-mark.fabric-editor-alignment:not(:first-child)': {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
-    '> .renderer-heading-wrapper:first-child': {
-      h1: {
-        // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
-        marginTop: '1.667em'
-      },
-      h2: {
-        // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
-        marginTop: '1.8em'
-      },
-      h3: {
-        // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
-        marginTop: '2em'
-      },
-      h4: {
-        // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
-        marginTop: '1.357em'
-      },
-      h5: {
-        // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
-        marginTop: '1.667em'
-      },
-      h6: {
-        // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
-        marginTop: '1.455em'
-      }
-    }
+  // Center alignment for heading wrapper - flex container needs justify-content instead of text-align
+  '.fabric-editor-block-mark[data-align="center"] > .renderer-heading-wrapper': {
+    justifyContent: 'center'
+  },
+  // Right/end alignment for heading wrapper - flex container needs justify-content instead of text-align
+  '.fabric-editor-block-mark[data-align="end"] > .renderer-heading-wrapper': {
+    justifyContent: 'flex-end'
   },
   // Set marginTop: 0 if alignment block is next to a gap cursor or widget that is first child
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
   '.ProseMirror-gapcursor:first-child + .fabric-editor-block-mark.fabric-editor-alignment, .ProseMirror-widget:first-child + .fabric-editor-block-mark.fabric-editor-alignment, .ProseMirror-widget:first-child + .ProseMirror-widget:nth-child(2) + .fabric-editor-block-mark.fabric-editor-alignment': {
+    // With inline headings, apply marginTop to the wrapper (not the h1-h6).
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
-    '> .renderer-heading-wrapper:first-child > :is(h1, h2, h3, h4, h5, h6)': {
-      marginTop: '0'
+    '> .renderer-heading-wrapper:first-child': {
+      marginTop: 0
     }
   }
 });
@@ -590,13 +606,13 @@ var paragraphSharedStyleScaledMargin = (0, _react.css)({
     letterSpacing: '-0.005em'
   }
 });
-var listsSharedStyles = (0, _react.css)((_css7 = {
+var listsSharedStyles = (0, _react.css)((_css8 = {
   /* =============== INDENTATION SPACING ========= */
   'ul, ol': {
     boxSizing: 'border-box',
     paddingLeft: "var(--ed--list--item-counter--padding, ".concat(_styles.listItemCounterPadding, "px)")
   }
-}, (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)(_css7, "".concat(_adfSchema.orderedListSelector, ", ").concat(_adfSchema.bulletListSelector), {
+}, (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)(_css8, "".concat(_adfSchema.orderedListSelector, ", ").concat(_adfSchema.bulletListSelector), {
   /*
   Ensures list item content adheres to the list's margin instead
   of filling the entire block row. This is important to allow
@@ -628,7 +644,7 @@ var listsSharedStyles = (0, _react.css)((_css7 = {
   listStyleType: 'lower-alpha'
 }), 'ol[data-indent-level="3"], ol[data-indent-level="6"]', {
   listStyleType: 'lower-roman'
-}), (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)(_css7, 'ul[data-indent-level="1"], ul[data-indent-level="4"]', {
+}), (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)(_css8, 'ul[data-indent-level="1"], ul[data-indent-level="4"]', {
   listStyleType: 'disc'
 }), 'ul[data-indent-level="2"], ul[data-indent-level="5"]', {
   listStyleType: 'circle'
@@ -1506,11 +1522,12 @@ var rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinksDuplicateAnchor =
 }))))));
 var rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinks = (0, _react.css)((0, _defineProperty2.default)({}, ".".concat(_consts.RendererCssClassName.DOCUMENT, " .").concat(_styles.TableSharedCssClassName.TABLE_CONTAINER), (0, _defineProperty2.default)({}, ".".concat(_styles.TableSharedCssClassName.TABLE_NODE_WRAPPER, " > table, .").concat(_styles.TableSharedCssClassName.TABLE_STICKY_WRAPPER, " > table"), (0, _defineProperty2.default)({}, ".".concat(_consts.RendererCssClassName.SORTABLE_COLUMN_WRAPPER), (0, _defineProperty2.default)({}, ".".concat(_consts.RendererCssClassName.SORTABLE_COLUMN), (0, _defineProperty2.default)((0, _defineProperty2.default)({}, ".".concat(_headingAnchor.HeadingAnchorWrapperClassName), {
   position: 'unset'
-}), '> .renderer-heading-wrapper >', {
-  'h1, h2, h3, h4, h5, h6': {
-    // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
-    marginRight: '30px'
-  }
+}), '> .renderer-heading-wrapper', {
+  // Reserve space for the sortable-column icon so the heading+anchor wrapper never overlaps it.
+  // Use padding (instead of margin on the heading) so we don't create a gap between the heading
+  // text and the copy-link anchor button
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
+  paddingRight: '30px'
 }))))));
 
 // @ts-expect-error - throw TS error when use !import in position.
@@ -1876,7 +1893,7 @@ var RendererStyleContainer = exports.RendererStyleContainer = function RendererS
         '--ak-renderer-editor-font-heading-h6': "".concat((0, _ugcTokens.editorUGCToken)('editor.font.heading.h6')),
         '--ak-renderer-editor-font-normal-text': "".concat((0, _ugcTokens.editorUGCToken)('editor.font.body'))
       },
-      css: [baseStyles, (0, _expValEquals.expValEquals)('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? headingAnchorStyles : headingAnchorStylesDuplicateAnchor, (0, _expValEquals.expValEquals)('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? hideHeadingCopyLinkWrapperStyles : hideHeadingCopyLinkWrapperStylesDuplicateAnchor, appearance === 'full-page' && isPreviewPanelResponsivenessOn && rendererFullPageStylesWithReducedPadding, appearance === 'full-page' && !isPreviewPanelResponsivenessOn && rendererFullPageStyles, appearance === 'full-width' && rendererFullWidthStyles, (appearance === 'full-width' || appearance === 'max' && ((0, _expValEquals.expValEquals)('editor_tinymce_full_width_mode', 'isEnabled', true) || (0, _expValEquals.expValEquals)('confluence_max_width_content_appearance', 'isEnabled', true))) && !(0, _table.isTableResizingEnabled)(appearance) && rendererFullWidthStylesForTableResizing, appearance === 'max' && ((0, _expValEquals.expValEquals)('editor_tinymce_full_width_mode', 'isEnabled', true) || (0, _expValEquals.expValEquals)('confluence_max_width_content_appearance', 'isEnabled', true)) && rendererMaxWidthStyles, rovoTelepointerStyles, whitespaceSharedStyles, blockquoteSharedStyles, headingsSharedStylesWithEditorUGC, (0, _expValEquals.expValEquals)('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? headingWithAlignmentStyles : headingWithAlignmentStylesDuplicateAnchor, ruleSharedStyles, contentMode === 'compact' && isCompactModeSupported && extensionStyle, (0, _platformFeatureFlags.fg)('platform_editor_typography_ugc') ? isCompactModeSupported ? paragraphStylesUGCScaledMargin : paragraphSharedStylesWithEditorUGC : isCompactModeSupported ? paragraphSharedStyleScaledMargin : paragraphSharedStyles, listsSharedStyles, browser.gecko && listsSharedStylesForGekko, indentationSharedStyles, (0, _platformFeatureFlags.fg)('platform_editor__renderer_indentation_text_margin') && indentationSharedStylesWithMarginFix, (0, _expValEquals.expValEquals)('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? blockMarksSharedStyles : blockMarksSharedStylesDuplicateAnchor, codeMarkSharedStyles, shadowSharedStyle, dateSharedStyle, textColorStyles, backgroundColorStyles, (0, _expValEquals.expValEquals)('platform_editor_text_highlight_padding', 'isEnabled', true) &&
+      css: [baseStyles, (0, _expValEquals.expValEquals)('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? headingAnchorStyles : headingAnchorStylesDuplicateAnchor, (0, _expValEquals.expValEquals)('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? hideHeadingCopyLinkWrapperStyles : hideHeadingCopyLinkWrapperStylesDuplicateAnchor, appearance === 'full-page' && isPreviewPanelResponsivenessOn && rendererFullPageStylesWithReducedPadding, appearance === 'full-page' && !isPreviewPanelResponsivenessOn && rendererFullPageStyles, appearance === 'full-width' && rendererFullWidthStyles, (appearance === 'full-width' || appearance === 'max' && ((0, _expValEquals.expValEquals)('editor_tinymce_full_width_mode', 'isEnabled', true) || (0, _expValEquals.expValEquals)('confluence_max_width_content_appearance', 'isEnabled', true))) && !(0, _table.isTableResizingEnabled)(appearance) && rendererFullWidthStylesForTableResizing, appearance === 'max' && ((0, _expValEquals.expValEquals)('editor_tinymce_full_width_mode', 'isEnabled', true) || (0, _expValEquals.expValEquals)('confluence_max_width_content_appearance', 'isEnabled', true)) && rendererMaxWidthStyles, rovoTelepointerStyles, whitespaceSharedStyles, blockquoteSharedStyles, headingsSharedStyles, (0, _expValEquals.expValEquals)('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) && headingWrapperInlineFlowStyles, (0, _expValEquals.expValEquals)('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? headingWithAlignmentStyles : headingWithAlignmentStylesDuplicateAnchor, ruleSharedStyles, contentMode === 'compact' && isCompactModeSupported && extensionStyle, (0, _platformFeatureFlags.fg)('platform_editor_typography_ugc') ? isCompactModeSupported ? paragraphStylesUGCScaledMargin : paragraphSharedStylesWithEditorUGC : isCompactModeSupported ? paragraphSharedStyleScaledMargin : paragraphSharedStyles, listsSharedStyles, browser.gecko && listsSharedStylesForGekko, indentationSharedStyles, (0, _platformFeatureFlags.fg)('platform_editor__renderer_indentation_text_margin') && indentationSharedStylesWithMarginFix, (0, _expValEquals.expValEquals)('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? blockMarksSharedStyles : blockMarksSharedStylesDuplicateAnchor, codeMarkSharedStyles, shadowSharedStyle, dateSharedStyle, textColorStyles, backgroundColorStyles, (0, _expValEquals.expValEquals)('platform_editor_text_highlight_padding', 'isEnabled', true) &&
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
       textHighlightPaddingStyles, tasksAndDecisionsStyles, smartCardStyles, smartCardStylesAvatarFix, (0, _experiments.editorExperiment)('platform_editor_preview_panel_linking_exp', true) && headerSmartCardStyles, smartCardStylesAvatarMarginFix, smartCardStylesAvatarListZeroMarginTop, (0, _platformFeatureFlags.fg)('editor_inline_comments_on_inline_nodes') && rendererAnnotationStyles,
       // eslint-disable-next-line @atlaskit/platform/no-preconditioning

package/dist/cjs/ui/Renderer/index.js

@@ -70,7 +70,7 @@ var DEGRADED_SEVERITY_THRESHOLD = exports.DEGRADED_SEVERITY_THRESHOLD = 3000;
 var TABLE_INFO_TIMEOUT = 10000;
 var RENDER_EVENT_SAMPLE_RATE = 0.2;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "126.4.0";
+var packageVersion = "126.5.1";
 var setAsQueryContainerStyles = (0, _react2.css)({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'

package/dist/es2019/react/nodes/heading.js

@@ -13,6 +13,7 @@ import { copyTextToClipboard } from '../utils/clipboard';
 import HeadingAnchor from './heading-anchor';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
+const RENDERER_HEADING_WRAPPER = 'renderer-heading-wrapper';
 const getCurrentUrlWithHash = (hash = '') => {
   const url = new URL(window.location.href);
   url.search = ''; // clear any query params so that the page will correctly scroll to the anchor
@@ -26,8 +27,11 @@ function hasRightAlignmentMark(marks) {
   return marks.some(mark => mark.type.name === 'alignment' && mark.attrs.align === 'end');
 }
 const wrapperStyles = css({
-  display: 'flex',
-  alignItems: 'baseline'
+  // Important: do NOT use flex here.
+  // With flex + baseline alignment, the anchor aligns to the *first line* of a multi-line heading,
+  // which visually places it at the top-right. We want the anchor to sit immediately after the
+  // last character of the heading (i.e. after the final wrapped line), so we use normal inline flow.
+  display: 'block'
 });
 function WrappedHeadingAnchor({
   enableNestedHeaderLinks,
@@ -141,30 +145,29 @@ function HeadingWithWrapper(props) {
       mouseEntered.current = true;
     }
   };
-  return (
+  return jsx("div", {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
-    jsx("div", {
-      className: "renderer-heading-wrapper",
-      "data-level": props.level,
-      css: wrapperStyles
-    }, showAnchorLink && headingId && isRightAligned && jsx(WrappedHeadingAnchor, {
-      level: props.level,
-      enableNestedHeaderLinks: enableNestedHeaderLinks,
-      headingId: headingId,
-      hideFromScreenReader: false
-    }), jsx(HX, {
-      id: headingIdToUse,
-      "data-local-id": localId,
-      "data-renderer-start-pos": dataAttributes['data-renderer-start-pos'],
-      "data-as-inline": asInline,
-      onMouseEnter: mouseEnterHandler
-    }, props.children), showAnchorLink && headingId && !isRightAligned && jsx(WrappedHeadingAnchor, {
-      level: props.level,
-      enableNestedHeaderLinks: enableNestedHeaderLinks,
-      headingId: headingId,
-      hideFromScreenReader: false
-    }))
-  );
+    className: RENDERER_HEADING_WRAPPER,
+    "data-testid": RENDERER_HEADING_WRAPPER,
+    "data-level": props.level,
+    css: wrapperStyles
+  }, showAnchorLink && headingId && isRightAligned && jsx(WrappedHeadingAnchor, {
+    level: props.level,
+    enableNestedHeaderLinks: enableNestedHeaderLinks,
+    headingId: headingId,
+    hideFromScreenReader: false
+  }), jsx(HX, {
+    id: headingIdToUse,
+    "data-local-id": localId,
+    "data-renderer-start-pos": dataAttributes['data-renderer-start-pos'],
+    "data-as-inline": asInline,
+    onMouseEnter: mouseEnterHandler
+  }, props.children), showAnchorLink && headingId && !isRightAligned && jsx(WrappedHeadingAnchor, {
+    level: props.level,
+    enableNestedHeaderLinks: enableNestedHeaderLinks,
+    headingId: headingId,
+    hideFromScreenReader: false
+  }));
 }
 
 /**

package/dist/es2019/ui/Renderer/RendererStyleContainer.js

@@ -481,7 +481,7 @@ const blockquoteSharedStyles = css({
     }
   }
 });
-const headingsSharedStylesWithEditorUGC = css({
+const headingsSharedStyles = css({
   '& h1': {
     // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
     font: `var(--ak-renderer-editor-font-heading-h1)`,
@@ -548,6 +548,50 @@ const headingsSharedStylesWithEditorUGC = css({
     }
   }
 });
+
+/**
+ * When the copy-link a11y fix is enabled, the heading copy-link button is a sibling of the heading
+ * text within `.renderer-heading-wrapper`. To ensure the button sits immediately after the last
+ * rendered character (including when the heading wraps), the heading itself needs to participate in
+ * inline layout.
+ *
+ * Since inline elements don't support vertical margins in normal flow, we migrate the UGC heading
+ * `marginTop` values (from `headingsSharedStyles`) onto the wrapper.
+ */
+const headingWrapperInlineFlowStyles = css({
+  // Ensure heading and copy-link button participate in inline flow so the button sits after the final wrapped line of text.
+  '& .renderer-heading-wrapper > h1, & .renderer-heading-wrapper > h2, & .renderer-heading-wrapper > h3, & .renderer-heading-wrapper > h4, & .renderer-heading-wrapper > h5, & .renderer-heading-wrapper > h6': {
+    display: 'inline'
+  },
+  [`& .renderer-heading-wrapper > .${HeadingAnchorWrapperClassName}`]: {
+    display: 'inline',
+    verticalAlign: 'baseline'
+  },
+  '& .renderer-heading-wrapper[data-level="1"]': {
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
+    marginTop: '1.45833em'
+  },
+  '& .renderer-heading-wrapper[data-level="2"]': {
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
+    marginTop: '1.4em'
+  },
+  '& .renderer-heading-wrapper[data-level="3"]': {
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
+    marginTop: '1.31249em'
+  },
+  '& .renderer-heading-wrapper[data-level="4"]': {
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
+    marginTop: '1.25em'
+  },
+  '& .renderer-heading-wrapper[data-level="5"]': {
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
+    marginTop: '1.45833em'
+  },
+  '& .renderer-heading-wrapper[data-level="6"]': {
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
+    marginTop: '1.59091em'
+  }
+});
 const headingWithAlignmentStylesDuplicateAnchor = css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
   '.fabric-editor-block-mark.fabric-editor-alignment:not(:first-child)': {
@@ -592,42 +636,21 @@ const headingWithAlignmentStylesDuplicateAnchor = css({
   }
 });
 const headingWithAlignmentStyles = css({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
-  '.fabric-editor-block-mark.fabric-editor-alignment:not(:first-child)': {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
-    '> .renderer-heading-wrapper:first-child': {
-      h1: {
-        // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
-        marginTop: '1.667em'
-      },
-      h2: {
-        // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
-        marginTop: '1.8em'
-      },
-      h3: {
-        // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
-        marginTop: '2em'
-      },
-      h4: {
-        // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
-        marginTop: '1.357em'
-      },
-      h5: {
-        // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
-        marginTop: '1.667em'
-      },
-      h6: {
-        // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
-        marginTop: '1.455em'
-      }
-    }
+  // Center alignment for heading wrapper - flex container needs justify-content instead of text-align
+  '.fabric-editor-block-mark[data-align="center"] > .renderer-heading-wrapper': {
+    justifyContent: 'center'
+  },
+  // Right/end alignment for heading wrapper - flex container needs justify-content instead of text-align
+  '.fabric-editor-block-mark[data-align="end"] > .renderer-heading-wrapper': {
+    justifyContent: 'flex-end'
   },
   // Set marginTop: 0 if alignment block is next to a gap cursor or widget that is first child
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
   '.ProseMirror-gapcursor:first-child + .fabric-editor-block-mark.fabric-editor-alignment, .ProseMirror-widget:first-child + .fabric-editor-block-mark.fabric-editor-alignment, .ProseMirror-widget:first-child + .ProseMirror-widget:nth-child(2) + .fabric-editor-block-mark.fabric-editor-alignment': {
+    // With inline headings, apply marginTop to the wrapper (not the h1-h6).
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
-    '> .renderer-heading-wrapper:first-child > :is(h1, h2, h3, h4, h5, h6)': {
-      marginTop: '0'
+    '> .renderer-heading-wrapper:first-child': {
+      marginTop: 0
     }
   }
 });
@@ -1951,11 +1974,12 @@ const rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinks = css({
           [`.${HeadingAnchorWrapperClassName}`]: {
             position: 'unset'
           },
-          '> .renderer-heading-wrapper >': {
-            'h1, h2, h3, h4, h5, h6': {
-              // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
-              marginRight: '30px'
-            }
+          '> .renderer-heading-wrapper': {
+            // Reserve space for the sortable-column icon so the heading+anchor wrapper never overlaps it.
+            // Use padding (instead of margin on the heading) so we don't create a gap between the heading
+            // text and the copy-link anchor button
+            // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
+            paddingRight: '30px'
           }
         }
       }
@@ -2387,7 +2411,7 @@ export const RendererStyleContainer = props => {
         '--ak-renderer-editor-font-heading-h6': `${editorUGCToken('editor.font.heading.h6')}`,
         '--ak-renderer-editor-font-normal-text': `${editorUGCToken('editor.font.body')}`
       },
-      css: [baseStyles, expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? headingAnchorStyles : headingAnchorStylesDuplicateAnchor, expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? hideHeadingCopyLinkWrapperStyles : hideHeadingCopyLinkWrapperStylesDuplicateAnchor, appearance === 'full-page' && isPreviewPanelResponsivenessOn && rendererFullPageStylesWithReducedPadding, appearance === 'full-page' && !isPreviewPanelResponsivenessOn && rendererFullPageStyles, appearance === 'full-width' && rendererFullWidthStyles, (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)) && rendererMaxWidthStyles, rovoTelepointerStyles, whitespaceSharedStyles, blockquoteSharedStyles, headingsSharedStylesWithEditorUGC, expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? headingWithAlignmentStyles : headingWithAlignmentStylesDuplicateAnchor, ruleSharedStyles, contentMode === 'compact' && isCompactModeSupported && extensionStyle, fg('platform_editor_typography_ugc') ? isCompactModeSupported ? paragraphStylesUGCScaledMargin : paragraphSharedStylesWithEditorUGC : isCompactModeSupported ? paragraphSharedStyleScaledMargin : paragraphSharedStyles, listsSharedStyles, browser.gecko && listsSharedStylesForGekko, indentationSharedStyles, fg('platform_editor__renderer_indentation_text_margin') && indentationSharedStylesWithMarginFix, expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? blockMarksSharedStyles : blockMarksSharedStylesDuplicateAnchor, codeMarkSharedStyles, shadowSharedStyle, dateSharedStyle, textColorStyles, backgroundColorStyles, expValEquals('platform_editor_text_highlight_padding', 'isEnabled', true) &&
+      css: [baseStyles, expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? headingAnchorStyles : headingAnchorStylesDuplicateAnchor, expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? hideHeadingCopyLinkWrapperStyles : hideHeadingCopyLinkWrapperStylesDuplicateAnchor, appearance === 'full-page' && isPreviewPanelResponsivenessOn && rendererFullPageStylesWithReducedPadding, appearance === 'full-page' && !isPreviewPanelResponsivenessOn && rendererFullPageStyles, appearance === 'full-width' && rendererFullWidthStyles, (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)) && rendererMaxWidthStyles, rovoTelepointerStyles, whitespaceSharedStyles, blockquoteSharedStyles, headingsSharedStyles, expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) && headingWrapperInlineFlowStyles, expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? headingWithAlignmentStyles : headingWithAlignmentStylesDuplicateAnchor, ruleSharedStyles, contentMode === 'compact' && isCompactModeSupported && extensionStyle, fg('platform_editor_typography_ugc') ? isCompactModeSupported ? paragraphStylesUGCScaledMargin : paragraphSharedStylesWithEditorUGC : isCompactModeSupported ? paragraphSharedStyleScaledMargin : paragraphSharedStyles, listsSharedStyles, browser.gecko && listsSharedStylesForGekko, indentationSharedStyles, fg('platform_editor__renderer_indentation_text_margin') && indentationSharedStylesWithMarginFix, expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? blockMarksSharedStyles : blockMarksSharedStylesDuplicateAnchor, codeMarkSharedStyles, shadowSharedStyle, dateSharedStyle, textColorStyles, backgroundColorStyles, expValEquals('platform_editor_text_highlight_padding', 'isEnabled', true) &&
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
       textHighlightPaddingStyles, tasksAndDecisionsStyles, smartCardStyles, smartCardStylesAvatarFix, editorExperiment('platform_editor_preview_panel_linking_exp', true) && headerSmartCardStyles, smartCardStylesAvatarMarginFix, smartCardStylesAvatarListZeroMarginTop, fg('editor_inline_comments_on_inline_nodes') && rendererAnnotationStyles,
       // eslint-disable-next-line @atlaskit/platform/no-preconditioning

package/dist/es2019/ui/Renderer/index.js

@@ -56,7 +56,7 @@ export const DEGRADED_SEVERITY_THRESHOLD = 3000;
 const TABLE_INFO_TIMEOUT = 10000;
 const RENDER_EVENT_SAMPLE_RATE = 0.2;
 const packageName = "@atlaskit/renderer";
-const packageVersion = "126.4.0";
+const packageVersion = "126.5.1";
 const setAsQueryContainerStyles = css({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'

package/dist/esm/react/nodes/heading.js

@@ -13,6 +13,7 @@ import { copyTextToClipboard } from '../utils/clipboard';
 import HeadingAnchor from './heading-anchor';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
+var RENDERER_HEADING_WRAPPER = 'renderer-heading-wrapper';
 var getCurrentUrlWithHash = function getCurrentUrlWithHash() {
   var hash = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
   var url = new URL(window.location.href);
@@ -29,8 +30,11 @@ function hasRightAlignmentMark(marks) {
   });
 }
 var wrapperStyles = css({
-  display: 'flex',
-  alignItems: 'baseline'
+  // Important: do NOT use flex here.
+  // With flex + baseline alignment, the anchor aligns to the *first line* of a multi-line heading,
+  // which visually places it at the top-right. We want the anchor to sit immediately after the
+  // last character of the heading (i.e. after the final wrapped line), so we use normal inline flow.
+  display: 'block'
 });
 function WrappedHeadingAnchor(_ref) {
   var enableNestedHeaderLinks = _ref.enableNestedHeaderLinks,
@@ -140,30 +144,29 @@ function HeadingWithWrapper(props) {
       mouseEntered.current = true;
     }
   };
-  return (
+  return jsx("div", {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
-    jsx("div", {
-      className: "renderer-heading-wrapper",
-      "data-level": props.level,
-      css: wrapperStyles
-    }, showAnchorLink && headingId && isRightAligned && jsx(WrappedHeadingAnchor, {
-      level: props.level,
-      enableNestedHeaderLinks: enableNestedHeaderLinks,
-      headingId: headingId,
-      hideFromScreenReader: false
-    }), jsx(HX, {
-      id: headingIdToUse,
-      "data-local-id": localId,
-      "data-renderer-start-pos": dataAttributes['data-renderer-start-pos'],
-      "data-as-inline": asInline,
-      onMouseEnter: mouseEnterHandler
-    }, props.children), showAnchorLink && headingId && !isRightAligned && jsx(WrappedHeadingAnchor, {
-      level: props.level,
-      enableNestedHeaderLinks: enableNestedHeaderLinks,
-      headingId: headingId,
-      hideFromScreenReader: false
-    }))
-  );
+    className: RENDERER_HEADING_WRAPPER,
+    "data-testid": RENDERER_HEADING_WRAPPER,
+    "data-level": props.level,
+    css: wrapperStyles
+  }, showAnchorLink && headingId && isRightAligned && jsx(WrappedHeadingAnchor, {
+    level: props.level,
+    enableNestedHeaderLinks: enableNestedHeaderLinks,
+    headingId: headingId,
+    hideFromScreenReader: false
+  }), jsx(HX, {
+    id: headingIdToUse,
+    "data-local-id": localId,
+    "data-renderer-start-pos": dataAttributes['data-renderer-start-pos'],
+    "data-as-inline": asInline,
+    onMouseEnter: mouseEnterHandler
+  }, props.children), showAnchorLink && headingId && !isRightAligned && jsx(WrappedHeadingAnchor, {
+    level: props.level,
+    enableNestedHeaderLinks: enableNestedHeaderLinks,
+    headingId: headingId,
+    hideFromScreenReader: false
+  }));
 }
 
 /**

package/dist/esm/ui/Renderer/RendererStyleContainer.js

@@ -1,5 +1,5 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-var _css7;
+var _css8;
 /* eslint-disable @atlaskit/ui-styling-standard/no-important-styles, @atlaskit/ui-styling-standard/no-unsafe-selectors */
 /* eslint-disable @atlaskit/ui-styling-standard/no-imported-style-values */
 /* eslint-disable @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values */
@@ -377,7 +377,7 @@ var blockquoteSharedStyles = css({
     }
   }
 });
-var headingsSharedStylesWithEditorUGC = css({
+var headingsSharedStyles = css({
   '& h1': {
     // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
     font: "var(--ak-renderer-editor-font-heading-h1)",
@@ -444,6 +444,43 @@ var headingsSharedStylesWithEditorUGC = css({
     }
   }
 });
+
+/**
+ * When the copy-link a11y fix is enabled, the heading copy-link button is a sibling of the heading
+ * text within `.renderer-heading-wrapper`. To ensure the button sits immediately after the last
+ * rendered character (including when the heading wraps), the heading itself needs to participate in
+ * inline layout.
+ *
+ * Since inline elements don't support vertical margins in normal flow, we migrate the UGC heading
+ * `marginTop` values (from `headingsSharedStyles`) onto the wrapper.
+ */
+var headingWrapperInlineFlowStyles = css(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
+  // Ensure heading and copy-link button participate in inline flow so the button sits after the final wrapped line of text.
+  '& .renderer-heading-wrapper > h1, & .renderer-heading-wrapper > h2, & .renderer-heading-wrapper > h3, & .renderer-heading-wrapper > h4, & .renderer-heading-wrapper > h5, & .renderer-heading-wrapper > h6': {
+    display: 'inline'
+  }
+}, "& .renderer-heading-wrapper > .".concat(HeadingAnchorWrapperClassName), {
+  display: 'inline',
+  verticalAlign: 'baseline'
+}), '& .renderer-heading-wrapper[data-level="1"]', {
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
+  marginTop: '1.45833em'
+}), '& .renderer-heading-wrapper[data-level="2"]', {
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
+  marginTop: '1.4em'
+}), '& .renderer-heading-wrapper[data-level="3"]', {
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
+  marginTop: '1.31249em'
+}), '& .renderer-heading-wrapper[data-level="4"]', {
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
+  marginTop: '1.25em'
+}), '& .renderer-heading-wrapper[data-level="5"]', {
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
+  marginTop: '1.45833em'
+}), '& .renderer-heading-wrapper[data-level="6"]', {
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
+  marginTop: '1.59091em'
+}));
 var headingWithAlignmentStylesDuplicateAnchor = css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
   '.fabric-editor-block-mark.fabric-editor-alignment:not(:first-child)': {
@@ -488,42 +525,21 @@ var headingWithAlignmentStylesDuplicateAnchor = css({
   }
 });
 var headingWithAlignmentStyles = css({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
-  '.fabric-editor-block-mark.fabric-editor-alignment:not(:first-child)': {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
-    '> .renderer-heading-wrapper:first-child': {
-      h1: {
-        // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
-        marginTop: '1.667em'
-      },
-      h2: {
-        // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
-        marginTop: '1.8em'
-      },
-      h3: {
-        // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
-        marginTop: '2em'
-      },
-      h4: {
-        // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
-        marginTop: '1.357em'
-      },
-      h5: {
-        // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
-        marginTop: '1.667em'
-      },
-      h6: {
-        // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
-        marginTop: '1.455em'
-      }
-    }
+  // Center alignment for heading wrapper - flex container needs justify-content instead of text-align
+  '.fabric-editor-block-mark[data-align="center"] > .renderer-heading-wrapper': {
+    justifyContent: 'center'
+  },
+  // Right/end alignment for heading wrapper - flex container needs justify-content instead of text-align
+  '.fabric-editor-block-mark[data-align="end"] > .renderer-heading-wrapper': {
+    justifyContent: 'flex-end'
   },
   // Set marginTop: 0 if alignment block is next to a gap cursor or widget that is first child
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
   '.ProseMirror-gapcursor:first-child + .fabric-editor-block-mark.fabric-editor-alignment, .ProseMirror-widget:first-child + .fabric-editor-block-mark.fabric-editor-alignment, .ProseMirror-widget:first-child + .ProseMirror-widget:nth-child(2) + .fabric-editor-block-mark.fabric-editor-alignment': {
+    // With inline headings, apply marginTop to the wrapper (not the h1-h6).
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
-    '> .renderer-heading-wrapper:first-child > :is(h1, h2, h3, h4, h5, h6)': {
-      marginTop: '0'
+    '> .renderer-heading-wrapper:first-child': {
+      marginTop: 0
     }
   }
 });
@@ -583,13 +599,13 @@ var paragraphSharedStyleScaledMargin = css({
     letterSpacing: '-0.005em'
   }
 });
-var listsSharedStyles = css((_css7 = {
+var listsSharedStyles = css((_css8 = {
   /* =============== INDENTATION SPACING ========= */
   'ul, ol': {
     boxSizing: 'border-box',
     paddingLeft: "var(--ed--list--item-counter--padding, ".concat(listItemCounterPadding, "px)")
   }
-}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_css7, "".concat(orderedListSelector, ", ").concat(bulletListSelector), {
+}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_css8, "".concat(orderedListSelector, ", ").concat(bulletListSelector), {
   /*
   Ensures list item content adheres to the list's margin instead
   of filling the entire block row. This is important to allow
@@ -621,7 +637,7 @@ var listsSharedStyles = css((_css7 = {
   listStyleType: 'lower-alpha'
 }), 'ol[data-indent-level="3"], ol[data-indent-level="6"]', {
   listStyleType: 'lower-roman'
-}), _defineProperty(_defineProperty(_defineProperty(_css7, 'ul[data-indent-level="1"], ul[data-indent-level="4"]', {
+}), _defineProperty(_defineProperty(_defineProperty(_css8, 'ul[data-indent-level="1"], ul[data-indent-level="4"]', {
   listStyleType: 'disc'
 }), 'ul[data-indent-level="2"], ul[data-indent-level="5"]', {
   listStyleType: 'circle'
@@ -1499,11 +1515,12 @@ var rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinksDuplicateAnchor =
 }))))));
 var rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinks = css(_defineProperty({}, ".".concat(RendererCssClassName.DOCUMENT, " .").concat(TableSharedCssClassName.TABLE_CONTAINER), _defineProperty({}, ".".concat(TableSharedCssClassName.TABLE_NODE_WRAPPER, " > table, .").concat(TableSharedCssClassName.TABLE_STICKY_WRAPPER, " > table"), _defineProperty({}, ".".concat(RendererCssClassName.SORTABLE_COLUMN_WRAPPER), _defineProperty({}, ".".concat(RendererCssClassName.SORTABLE_COLUMN), _defineProperty(_defineProperty({}, ".".concat(HeadingAnchorWrapperClassName), {
   position: 'unset'
-}), '> .renderer-heading-wrapper >', {
-  'h1, h2, h3, h4, h5, h6': {
-    // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
-    marginRight: '30px'
-  }
+}), '> .renderer-heading-wrapper', {
+  // Reserve space for the sortable-column icon so the heading+anchor wrapper never overlaps it.
+  // Use padding (instead of margin on the heading) so we don't create a gap between the heading
+  // text and the copy-link anchor button
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
+  paddingRight: '30px'
 }))))));
 
 // @ts-expect-error - throw TS error when use !import in position.
@@ -1869,7 +1886,7 @@ export var RendererStyleContainer = function RendererStyleContainer(props) {
         '--ak-renderer-editor-font-heading-h6': "".concat(editorUGCToken('editor.font.heading.h6')),
         '--ak-renderer-editor-font-normal-text': "".concat(editorUGCToken('editor.font.body'))
       },
-      css: [baseStyles, expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? headingAnchorStyles : headingAnchorStylesDuplicateAnchor, expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? hideHeadingCopyLinkWrapperStyles : hideHeadingCopyLinkWrapperStylesDuplicateAnchor, appearance === 'full-page' && isPreviewPanelResponsivenessOn && rendererFullPageStylesWithReducedPadding, appearance === 'full-page' && !isPreviewPanelResponsivenessOn && rendererFullPageStyles, appearance === 'full-width' && rendererFullWidthStyles, (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)) && rendererMaxWidthStyles, rovoTelepointerStyles, whitespaceSharedStyles, blockquoteSharedStyles, headingsSharedStylesWithEditorUGC, expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? headingWithAlignmentStyles : headingWithAlignmentStylesDuplicateAnchor, ruleSharedStyles, contentMode === 'compact' && isCompactModeSupported && extensionStyle, fg('platform_editor_typography_ugc') ? isCompactModeSupported ? paragraphStylesUGCScaledMargin : paragraphSharedStylesWithEditorUGC : isCompactModeSupported ? paragraphSharedStyleScaledMargin : paragraphSharedStyles, listsSharedStyles, browser.gecko && listsSharedStylesForGekko, indentationSharedStyles, fg('platform_editor__renderer_indentation_text_margin') && indentationSharedStylesWithMarginFix, expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? blockMarksSharedStyles : blockMarksSharedStylesDuplicateAnchor, codeMarkSharedStyles, shadowSharedStyle, dateSharedStyle, textColorStyles, backgroundColorStyles, expValEquals('platform_editor_text_highlight_padding', 'isEnabled', true) &&
+      css: [baseStyles, expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? headingAnchorStyles : headingAnchorStylesDuplicateAnchor, expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? hideHeadingCopyLinkWrapperStyles : hideHeadingCopyLinkWrapperStylesDuplicateAnchor, appearance === 'full-page' && isPreviewPanelResponsivenessOn && rendererFullPageStylesWithReducedPadding, appearance === 'full-page' && !isPreviewPanelResponsivenessOn && rendererFullPageStyles, appearance === 'full-width' && rendererFullWidthStyles, (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)) && rendererMaxWidthStyles, rovoTelepointerStyles, whitespaceSharedStyles, blockquoteSharedStyles, headingsSharedStyles, expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) && headingWrapperInlineFlowStyles, expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? headingWithAlignmentStyles : headingWithAlignmentStylesDuplicateAnchor, ruleSharedStyles, contentMode === 'compact' && isCompactModeSupported && extensionStyle, fg('platform_editor_typography_ugc') ? isCompactModeSupported ? paragraphStylesUGCScaledMargin : paragraphSharedStylesWithEditorUGC : isCompactModeSupported ? paragraphSharedStyleScaledMargin : paragraphSharedStyles, listsSharedStyles, browser.gecko && listsSharedStylesForGekko, indentationSharedStyles, fg('platform_editor__renderer_indentation_text_margin') && indentationSharedStylesWithMarginFix, expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? blockMarksSharedStyles : blockMarksSharedStylesDuplicateAnchor, codeMarkSharedStyles, shadowSharedStyle, dateSharedStyle, textColorStyles, backgroundColorStyles, expValEquals('platform_editor_text_highlight_padding', 'isEnabled', true) &&
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
       textHighlightPaddingStyles, tasksAndDecisionsStyles, smartCardStyles, smartCardStylesAvatarFix, editorExperiment('platform_editor_preview_panel_linking_exp', true) && headerSmartCardStyles, smartCardStylesAvatarMarginFix, smartCardStylesAvatarListZeroMarginTop, fg('editor_inline_comments_on_inline_nodes') && rendererAnnotationStyles,
       // eslint-disable-next-line @atlaskit/platform/no-preconditioning

package/dist/esm/ui/Renderer/index.js

@@ -61,7 +61,7 @@ export var DEGRADED_SEVERITY_THRESHOLD = 3000;
 var TABLE_INFO_TIMEOUT = 10000;
 var RENDER_EVENT_SAMPLE_RATE = 0.2;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "126.4.0";
+var packageVersion = "126.5.1";
 var setAsQueryContainerStyles = css({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/renderer",
-	"version": "126.5.0",
+	"version": "126.5.2",
 	"description": "Renderer component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -57,8 +57,8 @@
 		"@atlaskit/status": "^3.1.0",
 		"@atlaskit/task-decision": "^19.2.0",
 		"@atlaskit/theme": "^21.0.0",
-		"@atlaskit/tmp-editor-statsig": "^17.8.0",
-		"@atlaskit/tokens": "^10.1.0",
+		"@atlaskit/tmp-editor-statsig": "^17.10.0",
+		"@atlaskit/tokens": "^11.0.0",
 		"@atlaskit/tooltip": "^20.14.0",
 		"@atlaskit/visually-hidden": "^3.0.0",
 		"@babel/runtime": "^7.0.0",