@atlaskit/renderer 126.4.0 → 126.5.1

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 _css, _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 */
@@ -54,14 +54,14 @@ var isBackgroundClipBrowserFixNeeded = function isBackgroundClipBrowserFixNeeded
 
 // styles are copied from ./style.tsx
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-css-tagged-template-expression, @atlaskit/design-system/consistent-css-prop-usage
-var baseStyles = (0, _react.css)((_css = {
+var baseStyles = (0, _react.css)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({
   // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
   fontSize: 'var(--ak-renderer-base-font-size)',
   // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
   lineHeight: '1.5rem',
   color: "var(--ds-text, ".concat(_colors.N800, ")"),
   '--ak-editor--full-width-layout-width': "".concat(_editorSharedStyles.akEditorFullWidthLayoutWidth, "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)(_css, ".".concat(_consts.RendererCssClassName.DOCUMENT, "::after"), {
+}, ".".concat(_consts.RendererCssClassName.DOCUMENT, "::after"), {
   // we add a clearfix after ak-renderer-document in order to
   // contain internal floats (such as media images that are "wrap-left")
   // to just the renderer (and not spill outside of it)
@@ -91,48 +91,7 @@ var baseStyles = (0, _react.css)((_css = {
 })), "h6", (0, _defineProperty2.default)({}, "> .mediaInlineView-content-wrap > .".concat(_mediaInline.INLINE_IMAGE_WRAPPER_CLASS_NAME, ",\n  > :is(a, span[data-mark-type='border']) .mediaInlineView-content-wrap > .").concat(_mediaInline.INLINE_IMAGE_WRAPPER_CLASS_NAME, ",\n  > .").concat(_mediaInline.INLINE_IMAGE_WRAPPER_CLASS_NAME, ",\n  > :is(a, span[data-mark-type='border']) .").concat(_mediaInline.INLINE_IMAGE_WRAPPER_CLASS_NAME), {
   height: '18px',
   transform: "translateY(-2px)"
-}))), '& h1, & h2, & h3, & h4, & h5, & h6', (0, _defineProperty2.default)((0, _defineProperty2.default)({}, ".".concat(_headingAnchor.HeadingAnchorWrapperClassName), {
-  position: 'absolute',
-  marginLeft: "var(--ds-space-075, 6px)",
-  button: {
-    paddingLeft: 0,
-    paddingRight: 0
-  },
-  /**
-   * Adds the visibility of the button when in focus through keyboard navigation.
-   */
-  'button:focus': {
-    opacity: 1,
-    transform: 'none !important'
-  }
-}), "@media (hover: hover) and (pointer: fine)", (0, _defineProperty2.default)((0, _defineProperty2.default)({}, ".".concat(_headingAnchor.HeadingAnchorWrapperClassName), {
-  '> button': {
-    opacity: 0,
-    transform: "translate(-8px, 0px)",
-    transition: "opacity 0.2s ease 0s, transform 0.2s ease 0s"
-  }
-}), '&:hover', (0, _defineProperty2.default)({}, ".".concat(_headingAnchor.HeadingAnchorWrapperClassName, " > button"), {
-  opacity: 1,
-  transform: 'none !important'
-})))), '& h1', (0, _defineProperty2.default)({}, ".".concat(_headingAnchor.HeadingAnchorWrapperClassName), {
-  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
-  lineHeight: "".concat(28 / 24, "em")
-})), '& h2', (0, _defineProperty2.default)({}, ".".concat(_headingAnchor.HeadingAnchorWrapperClassName), {
-  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
-  lineHeight: "".concat(24 / 20, "em")
-})), '& h3', (0, _defineProperty2.default)({}, ".".concat(_headingAnchor.HeadingAnchorWrapperClassName), {
-  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
-  lineHeight: "".concat(20 / 16, "em")
-})), '& h4', (0, _defineProperty2.default)({}, ".".concat(_headingAnchor.HeadingAnchorWrapperClassName), {
-  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
-  lineHeight: "".concat(16 / 14, "em")
-})), '& h5', (0, _defineProperty2.default)({}, ".".concat(_headingAnchor.HeadingAnchorWrapperClassName), {
-  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
-  lineHeight: "".concat(16 / 12, "em")
-})), '& h6', (0, _defineProperty2.default)({}, ".".concat(_headingAnchor.HeadingAnchorWrapperClassName), {
-  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
-  lineHeight: "".concat(16 / 11, "em")
-})), "& span.akActionMark", {
+}))), "& span.akActionMark", {
   color: "var(--ds-link, ".concat(_colors.B400, ")"),
   textDecoration: 'none',
   cursor: 'pointer',
@@ -143,9 +102,109 @@ var baseStyles = (0, _react.css)((_css = {
   '&:active': {
     color: "var(--ds-link-pressed, ".concat(_colors.B500, ")")
   }
-}), (0, _defineProperty2.default)(_css, '& span[data-placeholder]', {
+}), '& span[data-placeholder]', {
   color: "var(--ds-text-subtlest, ".concat(_colors.N200, ")")
-})));
+}));
+var headingAnchorStylesDuplicateAnchor = (0, _react.css)({
+  '& h1, & h2, & h3, & h4, & h5, & h6': (0, _defineProperty2.default)((0, _defineProperty2.default)({}, ".".concat(_headingAnchor.HeadingAnchorWrapperClassName), {
+    position: 'absolute',
+    marginLeft: "var(--ds-space-075, 6px)",
+    button: {
+      paddingLeft: 0,
+      paddingRight: 0
+    },
+    /**
+     * Adds the visibility of the button when in focus through keyboard navigation.
+     */
+    'button:focus': {
+      opacity: 1,
+      transform: 'none !important'
+    }
+  }), "@media (hover: hover) and (pointer: fine)", (0, _defineProperty2.default)((0, _defineProperty2.default)({}, ".".concat(_headingAnchor.HeadingAnchorWrapperClassName), {
+    '> button': {
+      opacity: 0,
+      transform: 'translate(-8px, 0px)',
+      transition: 'opacity 0.2s ease 0s, transform 0.2s ease 0s'
+    }
+  }), '&:hover', (0, _defineProperty2.default)({}, ".".concat(_headingAnchor.HeadingAnchorWrapperClassName, " > button"), {
+    opacity: 1,
+    transform: 'none !important'
+  }))),
+  '& h1': (0, _defineProperty2.default)({}, ".".concat(_headingAnchor.HeadingAnchorWrapperClassName), {
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+    lineHeight: "".concat(28 / 24, "em")
+  }),
+  '& h2': (0, _defineProperty2.default)({}, ".".concat(_headingAnchor.HeadingAnchorWrapperClassName), {
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+    lineHeight: "".concat(24 / 20, "em")
+  }),
+  '& h3': (0, _defineProperty2.default)({}, ".".concat(_headingAnchor.HeadingAnchorWrapperClassName), {
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+    lineHeight: "".concat(20 / 16, "em")
+  }),
+  '& h4': (0, _defineProperty2.default)({}, ".".concat(_headingAnchor.HeadingAnchorWrapperClassName), {
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+    lineHeight: "".concat(16 / 14, "em")
+  }),
+  '& h5': (0, _defineProperty2.default)({}, ".".concat(_headingAnchor.HeadingAnchorWrapperClassName), {
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+    lineHeight: "".concat(16 / 12, "em")
+  }),
+  '& h6': (0, _defineProperty2.default)({}, ".".concat(_headingAnchor.HeadingAnchorWrapperClassName), {
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+    lineHeight: "".concat(16 / 11, "em")
+  })
+});
+var headingAnchorStyles = (0, _react.css)({
+  '& .renderer-heading-wrapper': (0, _defineProperty2.default)((0, _defineProperty2.default)({}, ".".concat(_headingAnchor.HeadingAnchorWrapperClassName), {
+    marginLeft: "var(--ds-space-075, 6px)",
+    button: {
+      paddingLeft: 0,
+      paddingRight: 0
+    },
+    /**
+     * Adds the visibility of the button when in focus through keyboard navigation.
+     */
+    'button:focus': {
+      opacity: 1,
+      transform: 'none !important'
+    }
+  }), "@media (hover: hover) and (pointer: fine)", (0, _defineProperty2.default)((0, _defineProperty2.default)({}, ".".concat(_headingAnchor.HeadingAnchorWrapperClassName), {
+    '> button': {
+      opacity: 0,
+      transform: "translate(-8px, 0px)",
+      transition: "opacity 0.2s ease 0s, transform 0.2s ease 0s"
+    }
+  }), '&:hover', (0, _defineProperty2.default)({}, ".".concat(_headingAnchor.HeadingAnchorWrapperClassName, " > button"), {
+    opacity: 1,
+    transform: 'none !important'
+  }))),
+  // Line-height for heading anchor based on heading level (via data-level attribute on .renderer-heading-wrapper)
+  '& .renderer-heading-wrapper[data-level="1"]': (0, _defineProperty2.default)({}, ".".concat(_headingAnchor.HeadingAnchorWrapperClassName), {
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+    lineHeight: "".concat(28 / 24, "em")
+  }),
+  '& .renderer-heading-wrapper[data-level="2"]': (0, _defineProperty2.default)({}, ".".concat(_headingAnchor.HeadingAnchorWrapperClassName), {
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+    lineHeight: "".concat(24 / 20, "em")
+  }),
+  '& .renderer-heading-wrapper[data-level="3"]': (0, _defineProperty2.default)({}, ".".concat(_headingAnchor.HeadingAnchorWrapperClassName), {
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+    lineHeight: "".concat(20 / 16, "em")
+  }),
+  '& .renderer-heading-wrapper[data-level="4"]': (0, _defineProperty2.default)({}, ".".concat(_headingAnchor.HeadingAnchorWrapperClassName), {
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+    lineHeight: "".concat(16 / 14, "em")
+  }),
+  '& .renderer-heading-wrapper[data-level="5"]': (0, _defineProperty2.default)({}, ".".concat(_headingAnchor.HeadingAnchorWrapperClassName), {
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+    lineHeight: "".concat(16 / 12, "em")
+  }),
+  '& .renderer-heading-wrapper[data-level="6"]': (0, _defineProperty2.default)({}, ".".concat(_headingAnchor.HeadingAnchorWrapperClassName), {
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+    lineHeight: "".concat(16 / 11, "em")
+  })
+});
 var akEditorBreakpointForSmallDevice = '1266px';
 var responsiveBreakoutWidth = (0, _react.css)((0, _defineProperty2.default)({
   '--ak-editor--breakout-container-without-gutter-width': "calc(100cqw - ".concat(_editorSharedStyles.akEditorGutterPadding, "px * 2)"),
@@ -170,7 +229,7 @@ var responsiveBreakoutWidthWithReducedPadding = (0, _react.css)((0, _definePrope
 }), "@media (max-width: ".concat(_editorSharedStyles.akEditorFullPageNarrowBreakout, "px)"), {
   '--ak-editor--breakout-container-without-gutter-width': "calc(100cqw - var(--ak-renderer--full-page-gutter) * 2)"
 }));
-var hideHeadingCopyLinkWrapperStyles = (0, _react.css)({
+var hideHeadingCopyLinkWrapperStylesDuplicateAnchor = (0, _react.css)({
   '& h1, & h2, & h3, & h4, & h5, & h6': (0, _defineProperty2.default)((0, _defineProperty2.default)({}, ".".concat(_headingAnchor.HeadingAnchorWrapperClassName), {
     '&:focus-within': {
       opacity: 1
@@ -182,6 +241,18 @@ var hideHeadingCopyLinkWrapperStyles = (0, _react.css)({
     opacity: 1
   })))
 });
+var hideHeadingCopyLinkWrapperStyles = (0, _react.css)({
+  '& .renderer-heading-wrapper': (0, _defineProperty2.default)((0, _defineProperty2.default)({}, ".".concat(_headingAnchor.HeadingAnchorWrapperClassName), {
+    '&:focus-within': {
+      opacity: 1
+    }
+  }), "@media (hover: hover) and (pointer: fine)", (0, _defineProperty2.default)((0, _defineProperty2.default)({}, ".".concat(_headingAnchor.HeadingAnchorWrapperClassName), {
+    opacity: 0,
+    transition: "opacity 0.2s ease 0s"
+  }), '&:hover', (0, _defineProperty2.default)({}, ".".concat(_headingAnchor.HeadingAnchorWrapperClassName), {
+    opacity: 1
+  })))
+});
 var rendererFullPageStyles = (0, _react.css)({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
   maxWidth: "".concat(_editorSharedStyles.akEditorDefaultLayoutWidth, "px"),
@@ -248,7 +319,7 @@ var rovoTelepointerStyles = (0, _react.css)((0, _defineProperty2.default)({}, "#
     fontFamily: "var(--ds-font-family-body, \"Atlassian Sans\", ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
     fontWeight: "var(--ds-font-weight-semibold, 600)",
     color: "var(--ds-text-inverse, white)",
-    background: "var(--ds-text, #292A2E)",
+    backgroundColor: "var(--ds-text, #292A2E)",
     top: 1,
     left: 1,
     borderRadius: "0px ".concat("var(--ds-space-050, 4px)", " ", "var(--ds-space-050, 4px)", " 0px"),
@@ -314,86 +385,6 @@ var blockquoteSharedStyles = (0, _react.css)({
   }
 });
 var headingsSharedStyles = (0, _react.css)({
-  '& h1': {
-    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
-    fontSize: "".concat(24 / 14, "em"),
-    fontStyle: 'inherit',
-    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
-    lineHeight: 28 / 24,
-    color: "var(--ds-text, #292A2E)",
-    fontWeight: "var(--ds-font-weight-medium, 500)",
-    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
-    letterSpacing: "-0.01em",
-    marginBottom: 0,
-    // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
-    marginTop: '1.667em'
-  },
-  '& h2': {
-    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
-    fontSize: "".concat(20 / 14, "em"),
-    fontStyle: 'inherit',
-    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
-    lineHeight: 24 / 20,
-    color: "var(--ds-text, #292A2E)",
-    fontWeight: "var(--ds-font-weight-medium, 500)",
-    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
-    letterSpacing: "-0.008em",
-    // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
-    marginTop: '1.8em',
-    marginBottom: 0
-  },
-  '& h3': {
-    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
-    fontSize: "".concat(16 / 14, "em"),
-    fontStyle: 'inherit',
-    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
-    lineHeight: 20 / 16,
-    color: "var(--ds-text, #292A2E)",
-    fontWeight: "var(--ds-font-weight-semibold, 600)",
-    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
-    letterSpacing: "-0.006em",
-    marginTop: "var(--ds-space-400, 2em)",
-    marginBottom: 0
-  },
-  '& h4': {
-    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
-    fontSize: "".concat(14 / 14, "em"),
-    fontStyle: 'inherit',
-    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
-    lineHeight: 16 / 14,
-    color: "var(--ds-text, #292A2E)",
-    fontWeight: "var(--ds-font-weight-semibold, 600)",
-    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
-    letterSpacing: "-0.003em",
-    // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
-    marginTop: '1.357em'
-  },
-  '& h5': {
-    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
-    fontSize: "".concat(12 / 14, "em"),
-    fontStyle: 'inherit',
-    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
-    lineHeight: 16 / 12,
-    color: "var(--ds-text, #292A2E)",
-    fontWeight: "var(--ds-font-weight-semibold, 600)",
-    // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
-    marginTop: '1.667em',
-    textTransform: 'none'
-  },
-  '& h6': {
-    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
-    fontSize: "".concat(11 / 14, "em"),
-    fontStyle: 'inherit',
-    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
-    lineHeight: 16 / 11,
-    color: "var(--ds-text-subtlest, #6B6E76)",
-    fontWeight: "var(--ds-font-weight-bold, 653)",
-    // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
-    marginTop: '1.455em',
-    textTransform: 'none'
-  }
-});
-var headingsSharedStylesWithEditorUGC = (0, _react.css)({
   '& h1': {
     // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
     font: "var(--ak-renderer-editor-font-heading-h1)",
@@ -460,7 +451,44 @@ var headingsSharedStylesWithEditorUGC = (0, _react.css)({
     }
   }
 });
-var headingWithAlignmentStyles = (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)': {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
@@ -503,6 +531,25 @@ var headingWithAlignmentStyles = (0, _react.css)({
     }
   }
 });
+var headingWithAlignmentStyles = (0, _react.css)({
+  // 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': {
+      marginTop: 0
+    }
+  }
+});
 var ruleSharedStyles = (0, _react.css)({
   '& hr': {
     border: 'none',
@@ -559,24 +606,24 @@ 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
-   clicking interactive elements which are floated next to a list.
-    For some history and context on this block, see PRs related to tickets.:
-   @see ED-6551 - original issue.
-   @see ED-7015 - follow up issue.
-   @see ED-7447 - flow-root change.
-    used to have display: 'table' in tag template style but not supported in object styles
-   removed display: 'table' as 'flow-root' is supported in latest browsers
-    @see https://css-tricks.com/display-flow-root/
+  Ensures list item content adheres to the list's margin instead
+  of filling the entire block row. This is important to allow
+  clicking interactive elements which are floated next to a list.
+  	For some history and context on this block, see PRs related to tickets.:
+  @see ED-6551 - original issue.
+  @see ED-7015 - follow up issue.
+  @see ED-7447 - flow-root change.
+  	used to have display: 'table' in tag template style but not supported in object styles
+  removed display: 'table' as 'flow-root' is supported in latest browsers
+  	@see https://css-tricks.com/display-flow-root/
   */
   display: 'flow-root'
 }), 'ul, ul ul ul ul', {
@@ -597,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'
@@ -667,7 +714,7 @@ var indentationSharedStylesWithMarginFix = (0, _react.css)({
     }
   }
 });
-var blockMarksSharedStyles = (0, _react.css)((0, _defineProperty2.default)({}, "*:not(.fabric-editor-block-mark) >,\n  \t*:not(.fabric-editor-block-mark) >\n    div.fabric-editor-block-mark:first-of-type\n\t:not(.fabric-editor-indentation-mark)\n\t:not(.fabric-editor-alignment),\n  \t.fabric-editor-alignment:first-of-type:first-child,\n  \t.ProseMirror .fabric-editor-indentation-mark:first-of-type:first-child", {
+var blockMarksSharedStylesDuplicateAnchor = (0, _react.css)((0, _defineProperty2.default)({}, "*:not(.fabric-editor-block-mark) >,\n  \t*:not(.fabric-editor-block-mark) >\n    div.fabric-editor-block-mark:first-of-type\n\t:not(.fabric-editor-indentation-mark)\n\t:not(.fabric-editor-alignment),\n  \t.fabric-editor-alignment:first-of-type:first-child,\n  \t.ProseMirror .fabric-editor-indentation-mark:first-of-type:first-child", {
   'p, h1, h2, h3, h4, h5, h6, .heading-wrapper': {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
     ':first-child:not(style), style:first-child + *': {
@@ -675,6 +722,22 @@ var blockMarksSharedStyles = (0, _react.css)((0, _defineProperty2.default)({}, "
     }
   }
 }));
+var blockMarksSharedStyles = (0, _react.css)((0, _defineProperty2.default)({}, "*:not(.fabric-editor-block-mark) >,\n  \t*:not(.fabric-editor-block-mark) >\n    div.fabric-editor-block-mark:first-of-type\n\t:not(.fabric-editor-indentation-mark)\n\t:not(.fabric-editor-alignment),\n  \t.fabric-editor-alignment:first-of-type:first-child,\n  \t.ProseMirror .fabric-editor-indentation-mark:first-of-type:first-child", {
+  'p, .heading-wrapper': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
+    ':first-child:not(style), style:first-child + *': {
+      marginTop: 0
+    }
+  },
+  '.renderer-heading-wrapper': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
+    ':first-child:not(style), style:first-child + *': {
+      'h1, h2, h3, h4, h5, h6': {
+        marginTop: 0
+      }
+    }
+  }
+}));
 var codeMarkSharedStyles = (0, _react.css)({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '.code': {
@@ -835,7 +898,10 @@ var tasksAndDecisionsStyles = (0, _react.css)({
     }
   },
   'div[data-task-list-local-id]': {
-    margin: "var(--ds-space-150, 12px)".concat(" 0 0 0"),
+    marginTop: "var(--ds-space-150, 12px)",
+    marginRight: 0,
+    marginBottom: 0,
+    marginLeft: 0,
     // If task item is not first in the list then set margin top to 4px.
     'div + div': {
       marginTop: "var(--ds-space-050, 4px)"
@@ -886,6 +952,78 @@ var headerSmartCardStyles = (0, _react.css)({
     }
   }
 });
+var baseOtherStylesDuplicateAnchor = (0, _react.css)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({
+  '& .UnknownBlock': {
+    fontFamily: "var(--ds-font-family-body, \"Atlassian Sans\", ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+    fontSize: "".concat(14 / 16, "rem"),
+    fontWeight: "var(--ds-font-weight-regular, 400)",
+    whiteSpace: 'pre-wrap',
+    wordWrap: 'break-word'
+  },
+  '& span.date-node': {
+    backgroundColor: "var(--ds-background-neutral, ".concat(_colors.N30A, ")"),
+    borderRadius: "var(--ds-radius-small, 3px)",
+    color: "var(--ds-text, ".concat(_colors.N800, ")"),
+    paddingTop: "var(--ds-space-025, 2px)",
+    paddingRight: "var(--ds-space-050, 4px)",
+    paddingBottom: "var(--ds-space-025, 2px)",
+    paddingLeft: "var(--ds-space-050, 4px)",
+    margin: "0 1px",
+    transition: "background 0.3s"
+  },
+  '& span.date-node-highlighted': {
+    backgroundColor: "var(--ds-background-danger, ".concat(_colors.R50, ")"),
+    color: "var(--ds-text-danger, ".concat(_colors.R500, ")")
+  },
+  '& .renderer-image': {
+    maxWidth: '100%',
+    display: 'block',
+    marginTop: "var(--ds-space-300, 24px)",
+    marginRight: 0,
+    marginBottom: "var(--ds-space-300, 24px)",
+    marginLeft: 0
+  }
+}, ".".concat(_styles.richMediaClassName, ".rich-media-wrapped + .").concat(_styles.richMediaClassName, ":not(.rich-media-wrapped)"), {
+  clear: 'both'
+}), "& .code-block,\n\t& blockquote,\n\t& hr,\n\t& > div > div:not(.rich-media-wrapped),\n\t.".concat(_styles.richMediaClassName, ".rich-media-wrapped + .rich-media-wrapped + *:not(.rich-media-wrapped),\n\t.").concat(_styles.richMediaClassName, ".rich-media-wrapped + div:not(.rich-media-wrapped),\n\t.").concat(_styles.richMediaClassName, ".image-align-start,\n\t\t.").concat(_styles.richMediaClassName, ".image-center,\n\t\t.").concat(_styles.richMediaClassName, ".image-align-end"), {
+  clear: 'both'
+}), '& .rich-media-wrapped', {
+  '& + .renderer-heading-wrapper': {
+    'h1, h2, h3, h4, h5, h6': {
+      marginTop: "var(--ds-space-100, 8px)"
+    }
+  }
+}), 'div[class^="image-wrap-"] + div[class^="image-wrap-"]', {
+  marginLeft: 0,
+  marginRight: 0
+}), ".".concat(_consts.RendererCssClassName.DOCUMENT, " >"), (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "*:not([data-mark-type='fragment']) .".concat(_styles.TableSharedCssClassName.TABLE_CONTAINER), {
+  // Temporarily ignoring the below the owning team can add the ticket number for the TODO.  Context: https://atlassian.slack.com/archives/CPUEVD9MY/p1741565387326829
+  // eslint-disable-next-line @atlaskit/editor/enforce-todo-comment-format
+  // TODO - improve inline style logic on table container so important styles aren't required here
+  width: '100% !important',
+  left: '0 !important'
+}), "[data-mark-type='fragment'] * .".concat(_styles.TableSharedCssClassName.TABLE_CONTAINER), {
+  // Temporarily ignoring the below the owning team can add the ticket number for the TODO.  Context: https://atlassian.slack.com/archives/CPUEVD9MY/p1741565387326829
+  // eslint-disable-next-line @atlaskit/editor/enforce-todo-comment-format
+  // TODO - improve inline style logic on table container so important styles aren't required here
+  width: '100% !important',
+  left: '0 !important'
+}), "* .".concat(_consts.RendererCssClassName.EXTENSION_OVERFLOW_CONTAINER), {
+  overflowX: 'auto'
+}), "& .".concat(_consts.RendererCssClassName.EXTENSION, ":first-child"), {
+  marginTop: 0
+})), ".".concat(_consts.RendererCssClassName.DOCUMENT), (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, ".".concat(_consts.RendererCssClassName.EXTENSION), {
+  marginTop: "".concat(_editorSharedStyles.blockNodesVerticalMargin)
+}), ".".concat(_consts.RendererCssClassName.EXTENSION_CENTER_ALIGN), {
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
+  marginLeft: '50%',
+  transform: 'translateX(-50%)'
+}), ".".concat(_styles.TableSharedCssClassName.TABLE_NODE_WRAPPER), {
+  overflowX: 'auto'
+}), ".".concat(_ui.shadowObserverClassNames.SHADOW_CONTAINER, " .").concat(_styles.TableSharedCssClassName.TABLE_NODE_WRAPPER), {
+  display: 'flex'
+})));
 var baseOtherStyles = (0, _react.css)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({
   '& .UnknownBlock': {
     fontFamily: "var(--ds-font-family-body, \"Atlassian Sans\", ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
@@ -896,29 +1034,37 @@ var baseOtherStyles = (0, _react.css)((0, _defineProperty2.default)((0, _defineP
     wordWrap: 'break-word'
   },
   '& span.date-node': {
-    background: "var(--ds-background-neutral, ".concat(_colors.N30A, ")"),
+    backgroundColor: "var(--ds-background-neutral, ".concat(_colors.N30A, ")"),
     borderRadius: "var(--ds-radius-small, 3px)",
     color: "var(--ds-text, ".concat(_colors.N800, ")"),
-    padding: "var(--ds-space-025, 2px)".concat(" ", "var(--ds-space-050, 4px)"),
+    paddingTop: "var(--ds-space-025, 2px)",
+    paddingRight: "var(--ds-space-050, 4px)",
+    paddingBottom: "var(--ds-space-025, 2px)",
+    paddingLeft: "var(--ds-space-050, 4px)",
     margin: "0 1px",
     transition: "background 0.3s"
   },
   '& span.date-node-highlighted': {
-    background: "var(--ds-background-danger, ".concat(_colors.R50, ")"),
+    backgroundColor: "var(--ds-background-danger, ".concat(_colors.R50, ")"),
     color: "var(--ds-text-danger, ".concat(_colors.R500, ")")
   },
   '& .renderer-image': {
     maxWidth: '100%',
     display: 'block',
-    margin: "var(--ds-space-300, 24px)".concat(" 0")
+    marginTop: "var(--ds-space-300, 24px)",
+    marginRight: 0,
+    marginBottom: "var(--ds-space-300, 24px)",
+    marginLeft: 0
   }
 }, ".".concat(_styles.richMediaClassName, ".rich-media-wrapped + .").concat(_styles.richMediaClassName, ":not(.rich-media-wrapped)"), {
   clear: 'both'
 }), "& .code-block,\n\t& blockquote,\n\t& hr,\n\t& > div > div:not(.rich-media-wrapped),\n\t.".concat(_styles.richMediaClassName, ".rich-media-wrapped + .rich-media-wrapped + *:not(.rich-media-wrapped),\n\t.").concat(_styles.richMediaClassName, ".rich-media-wrapped + div:not(.rich-media-wrapped),\n\t.").concat(_styles.richMediaClassName, ".image-align-start,\n\t\t.").concat(_styles.richMediaClassName, ".image-center,\n\t\t.").concat(_styles.richMediaClassName, ".image-align-end"), {
   clear: 'both'
 }), '& .rich-media-wrapped', {
-  '& + h1, & + h2, & + h3, & + h4, & + h5, & + h6': {
-    marginTop: "var(--ds-space-100, 8px)"
+  '& + .renderer-heading-wrapper': {
+    'h1, h2, h3, h4, h5, h6': {
+      marginTop: "var(--ds-space-100, 8px)"
+    }
   }
 }), 'div[class^="image-wrap-"] + div[class^="image-wrap-"]', {
   marginLeft: 0,
@@ -950,7 +1096,7 @@ var baseOtherStyles = (0, _react.css)((0, _defineProperty2.default)((0, _defineP
 }), ".".concat(_ui.shadowObserverClassNames.SHADOW_CONTAINER, " .").concat(_styles.TableSharedCssClassName.TABLE_NODE_WRAPPER), {
   display: 'flex'
 })));
-var alignedHeadingAnchorStyle = (0, _react.css)({
+var alignedHeadingAnchorStyleDuplicateAnchor = (0, _react.css)({
   // Temporarily ignoring the below the owning team can add the ticket number for the TODO.  Context: https://atlassian.slack.com/archives/CPUEVD9MY/p1741565387326829
   // eslint-disable-next-line @atlaskit/editor/enforce-todo-comment-format
   // TODO Delete this comment after verifying space token -> previous value `margin: 6px`
@@ -961,7 +1107,44 @@ var alignedHeadingAnchorStyle = (0, _react.css)({
   },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
   '.fabric-editor-block-mark:not([data-align="center"])[data-align]': (0, _defineProperty2.default)((0, _defineProperty2.default)({}, ".".concat(_headingAnchor.HeadingAnchorWrapperClassName), {
-    margin: "0 ".concat("var(--ds-space-075, 6px)", " 0 0"),
+    marginTop: 0,
+    marginRight: "var(--ds-space-075, 6px)",
+    marginBottom: 0,
+    marginLeft: 0,
+    // If the anchor is right aligned then the left side of the heading
+    // is aligned with the left side of the anchor.
+    // In order to align as expected we transform it the width of the element (plus our expected 6px)
+    // to the left
+    transform: "translateX(calc(-100% - ".concat("var(--ds-space-075, 6px)", "))")
+  }), '@media (hover: hover) and (pointer: fine)', (0, _defineProperty2.default)({}, ".".concat(_headingAnchor.HeadingAnchorWrapperClassName, " > button"), {
+    transform: "translate(8px, 0px)"
+  }))
+});
+var alignedHeadingAnchorStyle = (0, _react.css)({
+  // Temporarily ignoring the below the owning team can add the ticket number for the TODO.  Context: https://atlassian.slack.com/archives/CPUEVD9MY/p1741565387326829
+  // eslint-disable-next-line @atlaskit/editor/enforce-todo-comment-format
+  // TODO Delete this comment after verifying space token -> previous value `margin: 6px`
+  '.fabric-editor-block-mark[data-align] >': {
+    '.renderer-heading-wrapper': {
+      'h1, h2, h3, h4, h5, h6': {
+        position: 'relative'
+      }
+    }
+  },
+  // 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'
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
+  '.fabric-editor-block-mark:not([data-align="center"])[data-align]': (0, _defineProperty2.default)((0, _defineProperty2.default)({}, ".".concat(_headingAnchor.HeadingAnchorWrapperClassName), {
+    marginTop: 0,
+    marginRight: "var(--ds-space-075, 6px)",
+    marginBottom: 0,
+    marginLeft: 0,
     // If the anchor is right aligned then the left side of the heading
     // is aligned with the left side of the anchor.
     // In order to align as expected we transform it the width of the element (plus our expected 6px)
@@ -1017,7 +1200,10 @@ var mediaSingleSharedStyle = (0, _react.css)((0, _defineProperty2.default)((0, _
   "div.mediaSingleView-content-wrap[layout='wrap-left'], div.mediaSingleView-content-wrap[data-layout='wrap-left'], div.mediaSingleView-content-wrap[layout='wrap-right'], div.mediaSingleView-content-wrap[data-layout='wrap-right']": {
     float: 'none',
     overflow: 'auto',
-    margin: "var(--ds-space-150, 12px)".concat(" 0")
+    marginTop: "var(--ds-space-150, 12px)",
+    marginRight: 0,
+    marginBottom: "var(--ds-space-150, 12px)",
+    marginLeft: 0
   }
 }));
 
@@ -1090,7 +1276,10 @@ var tableSharedStyle = (0, _react.css)((0, _defineProperty2.default)((0, _define
   }
 }, ".".concat(_styles.TableSharedCssClassName.TABLE_CONTAINER), {
   position: 'relative',
-  margin: "0 auto ".concat("var(--ds-space-200, 16px)"),
+  marginTop: 0,
+  marginRight: 'auto',
+  marginBottom: "var(--ds-space-200, 16px)",
+  marginLeft: 'auto',
   boxSizing: 'border-box',
   /**
    * Fix block top alignment inside table cells.
@@ -1107,9 +1296,15 @@ var tableSharedStyle = (0, _react.css)((0, _defineProperty2.default)((0, _define
 }), ".".concat(_styles.TableSharedCssClassName.TABLE_RESIZER_CONTAINER, " table"), {
   willChange: 'width'
 }), ".".concat(_styles.TableSharedCssClassName.TABLE_NODE_WRAPPER, " > table"), {
-  margin: "var(--ds-space-300, 24px)".concat(" 0 0 0")
+  marginTop: "var(--ds-space-300, 24px)",
+  marginRight: 0,
+  marginBottom: 0,
+  marginLeft: 0
 }), ".".concat(_styles.TableSharedCssClassName.TABLE_CONTAINER, " > table,\n\t.").concat(_styles.TableSharedCssClassName.TABLE_STICKY_WRAPPER, " > table"), {
-  margin: "var(--ds-space-300, 24px)".concat(" ", "var(--ds-space-100, 8px)", " 0 0")
+  marginTop: "var(--ds-space-300, 24px)",
+  marginRight: "var(--ds-space-100, 8px)",
+  marginBottom: 0,
+  marginLeft: 0
 }), ".".concat(_styles.TableSharedCssClassName.TABLE_CONTAINER, " > table,\n\t.").concat(_styles.TableSharedCssClassName.TABLE_NODE_WRAPPER, " > table,\n\t.").concat(_styles.TableSharedCssClassName.TABLE_STICKY_WRAPPER, " > table"), {
   borderCollapse: 'collapse',
   border: "".concat(_styles.tableCellBorderWidth, "px solid ", "var(--ds-background-accent-gray-subtler, ".concat(_editorSharedStyles.akEditorTableBorder, ")")),
@@ -1168,7 +1363,10 @@ var tableRendererHeaderStylesForTableCellOnly = (0, _react.css)((0, _definePrope
     border: "var(--ds-border-width, 1px)".concat(" solid ", "var(--ds-background-accent-gray-subtler, ".concat(_editorSharedStyles.akEditorTableBorder, ")")),
     borderRightWidth: 0,
     borderBottomWidth: 0,
-    padding: "var(--ds-space-100, 8px)",
+    paddingTop: "var(--ds-space-100, 8px)",
+    paddingRight: "var(--ds-space-100, 8px)",
+    paddingBottom: "var(--ds-space-100, 8px)",
+    paddingLeft: "var(--ds-space-100, 8px)",
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
     'th p:not(:first-of-type), td p:not(:first-of-type)': {
       marginTop: "var(--ds-space-150, 12px)"
@@ -1314,7 +1512,7 @@ var rendererTableColumnStyles = (0, _react.css)((0, _defineProperty2.default)({}
     borderRight: "0px none"
   })
 }));
-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), {
+var rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinksDuplicateAnchor = (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'
 }), '>', {
   'h1, h2, h3, h4, h5, h6': {
@@ -1322,6 +1520,15 @@ var rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinks = (0, _react.css)
     marginRight: '30px'
   }
 }))))));
+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', {
+  // 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.
 var stickyHeaderStyles = (0, _react.css)({
@@ -1493,7 +1700,10 @@ var rendererAnnotationStyles = (0, _react.css)({
     borderBottom: "var(--ds-border-width-selected, 2px)".concat(" solid ", "var(--ds-border-accent-yellow, ".concat(_colors.Y300, ")")),
     boxShadow: "var(--ds-shadow-overlay, ".concat("1px 2px 3px ".concat(_colors.N60A, ", -1px 2px 3px ").concat(_colors.N60A), ")"),
     cursor: 'pointer',
-    padding: "var(--ds-space-050, 4px)".concat(" ", "var(--ds-space-025, 2px)")
+    paddingTop: "var(--ds-space-050, 4px)",
+    paddingRight: "var(--ds-space-025, 2px)",
+    paddingBottom: "var(--ds-space-050, 4px)",
+    paddingLeft: "var(--ds-space-025, 2px)"
   }
 });
 var rendererAnnotationStylesCommentHeightFix = (0, _react.css)({
@@ -1501,8 +1711,12 @@ var rendererAnnotationStylesCommentHeightFix = (0, _react.css)({
   '& [data-annotation-draft-mark][data-annotation-inline-node]': {
     borderBottom: "var(--ds-border-width-selected, 2px)".concat(" solid transparent"),
     cursor: 'pointer',
-    padding: "1px 0 ".concat("var(--ds-space-025, 2px)"),
-    background: "var(--ds-background-accent-yellow-subtler, ".concat(_colors.Y75, ")"),
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
+    paddingTop: '1px',
+    paddingRight: 0,
+    paddingBottom: "var(--ds-space-025, 2px)",
+    paddingLeft: 0,
+    backgroundColor: "var(--ds-background-accent-yellow-subtler, ".concat(_colors.Y75, ")"),
     borderBottomColor: "var(--ds-border-accent-yellow, ".concat(_colors.Y300, ")"),
     boxShadow: "var(--ds-shadow-overlay, ".concat("1px 2px 3px ".concat(_colors.N60A, ", -1px 2px 3px ").concat(_colors.N60A), ")")
   },
@@ -1679,15 +1893,15 @@ 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, hideHeadingCopyLinkWrapperStyles, 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, (0, _platformFeatureFlags.fg)('platform_editor_typography_ugc') ? headingsSharedStylesWithEditorUGC : headingsSharedStyles, headingWithAlignmentStyles, 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, blockMarksSharedStyles, 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
-      (0, _platformFeatureFlags.fg)('editor_inline_comments_on_inline_nodes') && rendererAnnotationStylesCommentHeightFix, baseOtherStyles,
+      (0, _platformFeatureFlags.fg)('editor_inline_comments_on_inline_nodes') && rendererAnnotationStylesCommentHeightFix, (0, _expValEquals.expValEquals)('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? baseOtherStyles : baseOtherStylesDuplicateAnchor,
       // this should be placed after baseOtherStyles
-      (0, _expValEquals.expValEquals)('platform_editor_render_bodied_extension_as_inline', 'isEnabled', true) && extensionAsInlineStyle, (0, _expValEquals.expValEquals)('confluence_insert_excerpt_inline_vertical_align', 'isEnabled', true) && inlineExtensionRendererMarginFix, allowNestedHeaderLinks && alignedHeadingAnchorStyle, mediaSingleSharedStyle,
+      (0, _expValEquals.expValEquals)('platform_editor_render_bodied_extension_as_inline', 'isEnabled', true) && extensionAsInlineStyle, (0, _expValEquals.expValEquals)('confluence_insert_excerpt_inline_vertical_align', 'isEnabled', true) && inlineExtensionRendererMarginFix, allowNestedHeaderLinks && ((0, _expValEquals.expValEquals)('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? alignedHeadingAnchorStyle : alignedHeadingAnchorStyleDuplicateAnchor), mediaSingleSharedStyle,
       // merge firstWrappedMediaStyles with mediaSingleSharedStyle when clean up platform_editor_fix_media_in_renderer
-      (0, _platformFeatureFlags.fg)('platform_editor_fix_media_in_renderer') && firstWrappedMediaStyles, tableSharedStyle, tableRendererHeaderStylesForTableCellOnly, (0, _platformFeatureFlags.fg)('platform_editor_bordered_panel_nested_in_table') && tableRendererNestedPanelStyles, isBackgroundClipBrowserFixNeeded() && tableStylesBackGroundClipForGeckoForTableCellOnly, (0, _platformFeatureFlags.fg)('platform_editor_nested_dnd_styles_changes') ? firstNodeWithNotMarginTopWithNestedDnD : firstNodeWithNotMarginTop, rendererTableStyles, (0, _table.isStickyScrollbarEnabled)(appearance) && stickyScrollbarStyles, rendererTableHeaderEqualHeightStylesForTableCellOnly, allowColumnSorting && rendererTableSortableColumnStyles, allowColumnSorting && allowNestedHeaderLinks && rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinks, rendererTableColumnStyles, stickyHeaderStyles, codeBlockAndLayoutStyles, columnLayoutSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveRendererStyles, isAdvancedLayoutsOn && layoutSectionForAdvancedLayoutsStyles, !useBlockRenderForCodeBlock && gridRenderForCodeBlockStyles, browser.safari && codeBlockInListSafariFixStyles, appearance === 'full-page' && !isPreviewPanelResponsivenessOn && responsiveBreakoutWidth, appearance === 'full-page' && isPreviewPanelResponsivenessOn && responsiveBreakoutWidthWithReducedPadding, (appearance === 'full-width' || appearance === 'max' && ((0, _expValEquals.expValEquals)('editor_tinymce_full_width_mode', 'isEnabled', true) || (0, _expValEquals.expValEquals)('confluence_max_width_content_appearance', 'isEnabled', true))) && responsiveBreakoutWidthFullWidth, (0, _expValEquals.expValEquals)('platform_editor_lovability_emoji_scaling', 'isEnabled', true) ? isCompactModeEnabled ? scaledDenseEmojiStyles : scaledEmojiStyles : isCompactModeEnabled ? denseStyles : undefined, (0, _expValEquals.expValEquals)('platform_synced_block', 'isEnabled', true) && syncBlockStyles, (0, _expValEquals.expValEquals)('platform_synced_block', 'isEnabled', true) && (0, _platformFeatureFlags.fg)('platform_synced_block_dogfooding') && syncBlockOverflowStyles],
+      (0, _platformFeatureFlags.fg)('platform_editor_fix_media_in_renderer') && firstWrappedMediaStyles, tableSharedStyle, tableRendererHeaderStylesForTableCellOnly, (0, _platformFeatureFlags.fg)('platform_editor_bordered_panel_nested_in_table') && tableRendererNestedPanelStyles, isBackgroundClipBrowserFixNeeded() && tableStylesBackGroundClipForGeckoForTableCellOnly, (0, _platformFeatureFlags.fg)('platform_editor_nested_dnd_styles_changes') ? firstNodeWithNotMarginTopWithNestedDnD : firstNodeWithNotMarginTop, rendererTableStyles, (0, _table.isStickyScrollbarEnabled)(appearance) && stickyScrollbarStyles, rendererTableHeaderEqualHeightStylesForTableCellOnly, allowColumnSorting && rendererTableSortableColumnStyles, allowColumnSorting && allowNestedHeaderLinks && ((0, _expValEquals.expValEquals)('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinks : rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinksDuplicateAnchor), rendererTableColumnStyles, stickyHeaderStyles, codeBlockAndLayoutStyles, columnLayoutSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveRendererStyles, isAdvancedLayoutsOn && layoutSectionForAdvancedLayoutsStyles, !useBlockRenderForCodeBlock && gridRenderForCodeBlockStyles, browser.safari && codeBlockInListSafariFixStyles, appearance === 'full-page' && !isPreviewPanelResponsivenessOn && responsiveBreakoutWidth, appearance === 'full-page' && isPreviewPanelResponsivenessOn && responsiveBreakoutWidthWithReducedPadding, (appearance === 'full-width' || appearance === 'max' && ((0, _expValEquals.expValEquals)('editor_tinymce_full_width_mode', 'isEnabled', true) || (0, _expValEquals.expValEquals)('confluence_max_width_content_appearance', 'isEnabled', true))) && responsiveBreakoutWidthFullWidth, (0, _expValEquals.expValEquals)('platform_editor_lovability_emoji_scaling', 'isEnabled', true) ? isCompactModeEnabled ? scaledDenseEmojiStyles : scaledEmojiStyles : isCompactModeEnabled ? denseStyles : undefined, (0, _expValEquals.expValEquals)('platform_synced_block', 'isEnabled', true) && syncBlockStyles, (0, _expValEquals.expValEquals)('platform_synced_block', 'isEnabled', true) && (0, _platformFeatureFlags.fg)('platform_synced_block_dogfooding') && syncBlockOverflowStyles],
       "data-testid": testId
     }, children)
   );