@atlaskit/renderer 126.4.0 → 126.5.1

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

@@ -1,5 +1,5 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-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 */
@@ -47,14 +47,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 = css((_css = {
+var baseStyles = css(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
   // 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(N800, ")"),
   '--ak-editor--full-width-layout-width': "".concat(akEditorFullWidthLayoutWidth, "px")
-}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_css, ".".concat(RendererCssClassName.DOCUMENT, "::after"), {
+}, ".".concat(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)
@@ -84,48 +84,7 @@ var baseStyles = css((_css = {
 })), "h6", _defineProperty({}, "> .mediaInlineView-content-wrap > .".concat(INLINE_IMAGE_WRAPPER_CLASS_NAME, ",\n  > :is(a, span[data-mark-type='border']) .mediaInlineView-content-wrap > .").concat(INLINE_IMAGE_WRAPPER_CLASS_NAME, ",\n  > .").concat(INLINE_IMAGE_WRAPPER_CLASS_NAME, ",\n  > :is(a, span[data-mark-type='border']) .").concat(INLINE_IMAGE_WRAPPER_CLASS_NAME), {
   height: '18px',
   transform: "translateY(-2px)"
-}))), '& h1, & h2, & h3, & h4, & h5, & h6', _defineProperty(_defineProperty({}, ".".concat(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)", _defineProperty(_defineProperty({}, ".".concat(HeadingAnchorWrapperClassName), {
-  '> button': {
-    opacity: 0,
-    transform: "translate(-8px, 0px)",
-    transition: "opacity 0.2s ease 0s, transform 0.2s ease 0s"
-  }
-}), '&:hover', _defineProperty({}, ".".concat(HeadingAnchorWrapperClassName, " > button"), {
-  opacity: 1,
-  transform: 'none !important'
-})))), '& h1', _defineProperty({}, ".".concat(HeadingAnchorWrapperClassName), {
-  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
-  lineHeight: "".concat(28 / 24, "em")
-})), '& h2', _defineProperty({}, ".".concat(HeadingAnchorWrapperClassName), {
-  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
-  lineHeight: "".concat(24 / 20, "em")
-})), '& h3', _defineProperty({}, ".".concat(HeadingAnchorWrapperClassName), {
-  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
-  lineHeight: "".concat(20 / 16, "em")
-})), '& h4', _defineProperty({}, ".".concat(HeadingAnchorWrapperClassName), {
-  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
-  lineHeight: "".concat(16 / 14, "em")
-})), '& h5', _defineProperty({}, ".".concat(HeadingAnchorWrapperClassName), {
-  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
-  lineHeight: "".concat(16 / 12, "em")
-})), '& h6', _defineProperty({}, ".".concat(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(B400, ")"),
   textDecoration: 'none',
   cursor: 'pointer',
@@ -136,9 +95,109 @@ var baseStyles = css((_css = {
   '&:active': {
     color: "var(--ds-link-pressed, ".concat(B500, ")")
   }
-}), _defineProperty(_css, '& span[data-placeholder]', {
+}), '& span[data-placeholder]', {
   color: "var(--ds-text-subtlest, ".concat(N200, ")")
-})));
+}));
+var headingAnchorStylesDuplicateAnchor = css({
+  '& h1, & h2, & h3, & h4, & h5, & h6': _defineProperty(_defineProperty({}, ".".concat(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)", _defineProperty(_defineProperty({}, ".".concat(HeadingAnchorWrapperClassName), {
+    '> button': {
+      opacity: 0,
+      transform: 'translate(-8px, 0px)',
+      transition: 'opacity 0.2s ease 0s, transform 0.2s ease 0s'
+    }
+  }), '&:hover', _defineProperty({}, ".".concat(HeadingAnchorWrapperClassName, " > button"), {
+    opacity: 1,
+    transform: 'none !important'
+  }))),
+  '& h1': _defineProperty({}, ".".concat(HeadingAnchorWrapperClassName), {
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+    lineHeight: "".concat(28 / 24, "em")
+  }),
+  '& h2': _defineProperty({}, ".".concat(HeadingAnchorWrapperClassName), {
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+    lineHeight: "".concat(24 / 20, "em")
+  }),
+  '& h3': _defineProperty({}, ".".concat(HeadingAnchorWrapperClassName), {
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+    lineHeight: "".concat(20 / 16, "em")
+  }),
+  '& h4': _defineProperty({}, ".".concat(HeadingAnchorWrapperClassName), {
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+    lineHeight: "".concat(16 / 14, "em")
+  }),
+  '& h5': _defineProperty({}, ".".concat(HeadingAnchorWrapperClassName), {
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+    lineHeight: "".concat(16 / 12, "em")
+  }),
+  '& h6': _defineProperty({}, ".".concat(HeadingAnchorWrapperClassName), {
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+    lineHeight: "".concat(16 / 11, "em")
+  })
+});
+var headingAnchorStyles = css({
+  '& .renderer-heading-wrapper': _defineProperty(_defineProperty({}, ".".concat(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)", _defineProperty(_defineProperty({}, ".".concat(HeadingAnchorWrapperClassName), {
+    '> button': {
+      opacity: 0,
+      transform: "translate(-8px, 0px)",
+      transition: "opacity 0.2s ease 0s, transform 0.2s ease 0s"
+    }
+  }), '&:hover', _defineProperty({}, ".".concat(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"]': _defineProperty({}, ".".concat(HeadingAnchorWrapperClassName), {
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+    lineHeight: "".concat(28 / 24, "em")
+  }),
+  '& .renderer-heading-wrapper[data-level="2"]': _defineProperty({}, ".".concat(HeadingAnchorWrapperClassName), {
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+    lineHeight: "".concat(24 / 20, "em")
+  }),
+  '& .renderer-heading-wrapper[data-level="3"]': _defineProperty({}, ".".concat(HeadingAnchorWrapperClassName), {
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+    lineHeight: "".concat(20 / 16, "em")
+  }),
+  '& .renderer-heading-wrapper[data-level="4"]': _defineProperty({}, ".".concat(HeadingAnchorWrapperClassName), {
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+    lineHeight: "".concat(16 / 14, "em")
+  }),
+  '& .renderer-heading-wrapper[data-level="5"]': _defineProperty({}, ".".concat(HeadingAnchorWrapperClassName), {
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+    lineHeight: "".concat(16 / 12, "em")
+  }),
+  '& .renderer-heading-wrapper[data-level="6"]': _defineProperty({}, ".".concat(HeadingAnchorWrapperClassName), {
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+    lineHeight: "".concat(16 / 11, "em")
+  })
+});
 var akEditorBreakpointForSmallDevice = '1266px';
 var responsiveBreakoutWidth = css(_defineProperty({
   '--ak-editor--breakout-container-without-gutter-width': "calc(100cqw - ".concat(akEditorGutterPadding, "px * 2)"),
@@ -163,7 +222,7 @@ var responsiveBreakoutWidthWithReducedPadding = css(_defineProperty(_definePrope
 }), "@media (max-width: ".concat(akEditorFullPageNarrowBreakout, "px)"), {
   '--ak-editor--breakout-container-without-gutter-width': "calc(100cqw - var(--ak-renderer--full-page-gutter) * 2)"
 }));
-var hideHeadingCopyLinkWrapperStyles = css({
+var hideHeadingCopyLinkWrapperStylesDuplicateAnchor = css({
   '& h1, & h2, & h3, & h4, & h5, & h6': _defineProperty(_defineProperty({}, ".".concat(HeadingAnchorWrapperClassName), {
     '&:focus-within': {
       opacity: 1
@@ -175,6 +234,18 @@ var hideHeadingCopyLinkWrapperStyles = css({
     opacity: 1
   })))
 });
+var hideHeadingCopyLinkWrapperStyles = css({
+  '& .renderer-heading-wrapper': _defineProperty(_defineProperty({}, ".".concat(HeadingAnchorWrapperClassName), {
+    '&:focus-within': {
+      opacity: 1
+    }
+  }), "@media (hover: hover) and (pointer: fine)", _defineProperty(_defineProperty({}, ".".concat(HeadingAnchorWrapperClassName), {
+    opacity: 0,
+    transition: "opacity 0.2s ease 0s"
+  }), '&:hover', _defineProperty({}, ".".concat(HeadingAnchorWrapperClassName), {
+    opacity: 1
+  })))
+});
 var rendererFullPageStyles = css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
   maxWidth: "".concat(akEditorDefaultLayoutWidth, "px"),
@@ -241,7 +312,7 @@ var rovoTelepointerStyles = css(_defineProperty({}, "#".concat(TELEPOINTER_ID),
     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"),
@@ -307,86 +378,6 @@ var blockquoteSharedStyles = css({
   }
 });
 var headingsSharedStyles = 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 = css({
   '& h1': {
     // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
     font: "var(--ak-renderer-editor-font-heading-h1)",
@@ -453,7 +444,44 @@ var headingsSharedStylesWithEditorUGC = css({
     }
   }
 });
-var headingWithAlignmentStyles = 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)': {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
@@ -496,6 +524,25 @@ var headingWithAlignmentStyles = css({
     }
   }
 });
+var headingWithAlignmentStyles = 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 = css({
   '& hr': {
     border: 'none',
@@ -552,24 +599,24 @@ 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
-   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', {
@@ -590,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'
@@ -660,7 +707,7 @@ var indentationSharedStylesWithMarginFix = css({
     }
   }
 });
-var blockMarksSharedStyles = css(_defineProperty({}, "*: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 = css(_defineProperty({}, "*: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 + *': {
@@ -668,6 +715,22 @@ var blockMarksSharedStyles = css(_defineProperty({}, "*:not(.fabric-editor-block
     }
   }
 }));
+var blockMarksSharedStyles = css(_defineProperty({}, "*: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 = css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '.code': {
@@ -828,7 +891,10 @@ var tasksAndDecisionsStyles = 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)"
@@ -879,6 +945,78 @@ var headerSmartCardStyles = css({
     }
   }
 });
+var baseOtherStylesDuplicateAnchor = css(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
+  '& .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(N30A, ")"),
+    borderRadius: "var(--ds-radius-small, 3px)",
+    color: "var(--ds-text, ".concat(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(R50, ")"),
+    color: "var(--ds-text-danger, ".concat(R500, ")")
+  },
+  '& .renderer-image': {
+    maxWidth: '100%',
+    display: 'block',
+    marginTop: "var(--ds-space-300, 24px)",
+    marginRight: 0,
+    marginBottom: "var(--ds-space-300, 24px)",
+    marginLeft: 0
+  }
+}, ".".concat(richMediaClassName, ".rich-media-wrapped + .").concat(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(richMediaClassName, ".rich-media-wrapped + .rich-media-wrapped + *:not(.rich-media-wrapped),\n\t.").concat(richMediaClassName, ".rich-media-wrapped + div:not(.rich-media-wrapped),\n\t.").concat(richMediaClassName, ".image-align-start,\n\t\t.").concat(richMediaClassName, ".image-center,\n\t\t.").concat(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(RendererCssClassName.DOCUMENT, " >"), _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "*:not([data-mark-type='fragment']) .".concat(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(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(RendererCssClassName.EXTENSION_OVERFLOW_CONTAINER), {
+  overflowX: 'auto'
+}), "& .".concat(RendererCssClassName.EXTENSION, ":first-child"), {
+  marginTop: 0
+})), ".".concat(RendererCssClassName.DOCUMENT), _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, ".".concat(RendererCssClassName.EXTENSION), {
+  marginTop: "".concat(blockNodesVerticalMargin)
+}), ".".concat(RendererCssClassName.EXTENSION_CENTER_ALIGN), {
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
+  marginLeft: '50%',
+  transform: 'translateX(-50%)'
+}), ".".concat(TableSharedCssClassName.TABLE_NODE_WRAPPER), {
+  overflowX: 'auto'
+}), ".".concat(shadowObserverClassNames.SHADOW_CONTAINER, " .").concat(TableSharedCssClassName.TABLE_NODE_WRAPPER), {
+  display: 'flex'
+})));
 var baseOtherStyles = css(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
   '& .UnknownBlock': {
     fontFamily: "var(--ds-font-family-body, \"Atlassian Sans\", ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
@@ -889,29 +1027,37 @@ var baseOtherStyles = css(_defineProperty(_defineProperty(_defineProperty(_defin
     wordWrap: 'break-word'
   },
   '& span.date-node': {
-    background: "var(--ds-background-neutral, ".concat(N30A, ")"),
+    backgroundColor: "var(--ds-background-neutral, ".concat(N30A, ")"),
     borderRadius: "var(--ds-radius-small, 3px)",
     color: "var(--ds-text, ".concat(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(R50, ")"),
+    backgroundColor: "var(--ds-background-danger, ".concat(R50, ")"),
     color: "var(--ds-text-danger, ".concat(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(richMediaClassName, ".rich-media-wrapped + .").concat(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(richMediaClassName, ".rich-media-wrapped + .rich-media-wrapped + *:not(.rich-media-wrapped),\n\t.").concat(richMediaClassName, ".rich-media-wrapped + div:not(.rich-media-wrapped),\n\t.").concat(richMediaClassName, ".image-align-start,\n\t\t.").concat(richMediaClassName, ".image-center,\n\t\t.").concat(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,
@@ -943,7 +1089,7 @@ var baseOtherStyles = css(_defineProperty(_defineProperty(_defineProperty(_defin
 }), ".".concat(shadowObserverClassNames.SHADOW_CONTAINER, " .").concat(TableSharedCssClassName.TABLE_NODE_WRAPPER), {
   display: 'flex'
 })));
-var alignedHeadingAnchorStyle = css({
+var alignedHeadingAnchorStyleDuplicateAnchor = 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`
@@ -954,7 +1100,44 @@ var alignedHeadingAnchorStyle = css({
   },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
   '.fabric-editor-block-mark:not([data-align="center"])[data-align]': _defineProperty(_defineProperty({}, ".".concat(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)', _defineProperty({}, ".".concat(HeadingAnchorWrapperClassName, " > button"), {
+    transform: "translate(8px, 0px)"
+  }))
+});
+var alignedHeadingAnchorStyle = 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]': _defineProperty(_defineProperty({}, ".".concat(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)
@@ -1010,7 +1193,10 @@ var mediaSingleSharedStyle = css(_defineProperty(_defineProperty(_defineProperty
   "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
   }
 }));
 
@@ -1083,7 +1269,10 @@ var tableSharedStyle = css(_defineProperty(_defineProperty(_defineProperty(_defi
   }
 }, ".".concat(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.
@@ -1100,9 +1289,15 @@ var tableSharedStyle = css(_defineProperty(_defineProperty(_defineProperty(_defi
 }), ".".concat(TableSharedCssClassName.TABLE_RESIZER_CONTAINER, " table"), {
   willChange: 'width'
 }), ".".concat(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(TableSharedCssClassName.TABLE_CONTAINER, " > table,\n\t.").concat(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(TableSharedCssClassName.TABLE_CONTAINER, " > table,\n\t.").concat(TableSharedCssClassName.TABLE_NODE_WRAPPER, " > table,\n\t.").concat(TableSharedCssClassName.TABLE_STICKY_WRAPPER, " > table"), {
   borderCollapse: 'collapse',
   border: "".concat(tableCellBorderWidth, "px solid ", "var(--ds-background-accent-gray-subtler, ".concat(akEditorTableBorder, ")")),
@@ -1161,7 +1356,10 @@ var tableRendererHeaderStylesForTableCellOnly = css(_defineProperty({}, ".".conc
     border: "var(--ds-border-width, 1px)".concat(" solid ", "var(--ds-background-accent-gray-subtler, ".concat(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)"
@@ -1307,7 +1505,7 @@ var rendererTableColumnStyles = css(_defineProperty({}, ".".concat(RendererCssCl
     borderRight: "0px none"
   })
 }));
-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), {
+var rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinksDuplicateAnchor = 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'
 }), '>', {
   'h1, h2, h3, h4, h5, h6': {
@@ -1315,6 +1513,15 @@ var rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinks = css(_defineProp
     marginRight: '30px'
   }
 }))))));
+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', {
+  // 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 = css({
@@ -1486,7 +1693,10 @@ var rendererAnnotationStyles = css({
     borderBottom: "var(--ds-border-width-selected, 2px)".concat(" solid ", "var(--ds-border-accent-yellow, ".concat(Y300, ")")),
     boxShadow: "var(--ds-shadow-overlay, ".concat("1px 2px 3px ".concat(N60A, ", -1px 2px 3px ").concat(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 = css({
@@ -1494,8 +1704,12 @@ var rendererAnnotationStylesCommentHeightFix = 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(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(Y75, ")"),
     borderBottomColor: "var(--ds-border-accent-yellow, ".concat(Y300, ")"),
     boxShadow: "var(--ds-shadow-overlay, ".concat("1px 2px 3px ".concat(N60A, ", -1px 2px 3px ").concat(N60A), ")")
   },
@@ -1672,15 +1886,15 @@ 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, hideHeadingCopyLinkWrapperStyles, 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, fg('platform_editor_typography_ugc') ? headingsSharedStylesWithEditorUGC : headingsSharedStyles, headingWithAlignmentStyles, 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, blockMarksSharedStyles, 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
-      fg('editor_inline_comments_on_inline_nodes') && rendererAnnotationStylesCommentHeightFix, baseOtherStyles,
+      fg('editor_inline_comments_on_inline_nodes') && rendererAnnotationStylesCommentHeightFix, expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? baseOtherStyles : baseOtherStylesDuplicateAnchor,
       // this should be placed after baseOtherStyles
-      expValEquals('platform_editor_render_bodied_extension_as_inline', 'isEnabled', true) && extensionAsInlineStyle, expValEquals('confluence_insert_excerpt_inline_vertical_align', 'isEnabled', true) && inlineExtensionRendererMarginFix, allowNestedHeaderLinks && alignedHeadingAnchorStyle, mediaSingleSharedStyle,
+      expValEquals('platform_editor_render_bodied_extension_as_inline', 'isEnabled', true) && extensionAsInlineStyle, expValEquals('confluence_insert_excerpt_inline_vertical_align', 'isEnabled', true) && inlineExtensionRendererMarginFix, allowNestedHeaderLinks && (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
-      fg('platform_editor_fix_media_in_renderer') && firstWrappedMediaStyles, tableSharedStyle, tableRendererHeaderStylesForTableCellOnly, fg('platform_editor_bordered_panel_nested_in_table') && tableRendererNestedPanelStyles, isBackgroundClipBrowserFixNeeded() && tableStylesBackGroundClipForGeckoForTableCellOnly, fg('platform_editor_nested_dnd_styles_changes') ? firstNodeWithNotMarginTopWithNestedDnD : firstNodeWithNotMarginTop, rendererTableStyles, isStickyScrollbarEnabled(appearance) && stickyScrollbarStyles, rendererTableHeaderEqualHeightStylesForTableCellOnly, allowColumnSorting && rendererTableSortableColumnStyles, allowColumnSorting && allowNestedHeaderLinks && 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' && (expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) || expValEquals('confluence_max_width_content_appearance', 'isEnabled', true))) && responsiveBreakoutWidthFullWidth, expValEquals('platform_editor_lovability_emoji_scaling', 'isEnabled', true) ? isCompactModeEnabled ? scaledDenseEmojiStyles : scaledEmojiStyles : isCompactModeEnabled ? denseStyles : undefined, expValEquals('platform_synced_block', 'isEnabled', true) && syncBlockStyles, expValEquals('platform_synced_block', 'isEnabled', true) && fg('platform_synced_block_dogfooding') && syncBlockOverflowStyles],
+      fg('platform_editor_fix_media_in_renderer') && firstWrappedMediaStyles, tableSharedStyle, tableRendererHeaderStylesForTableCellOnly, fg('platform_editor_bordered_panel_nested_in_table') && tableRendererNestedPanelStyles, isBackgroundClipBrowserFixNeeded() && tableStylesBackGroundClipForGeckoForTableCellOnly, fg('platform_editor_nested_dnd_styles_changes') ? firstNodeWithNotMarginTopWithNestedDnD : firstNodeWithNotMarginTop, rendererTableStyles, isStickyScrollbarEnabled(appearance) && stickyScrollbarStyles, rendererTableHeaderEqualHeightStylesForTableCellOnly, allowColumnSorting && rendererTableSortableColumnStyles, allowColumnSorting && allowNestedHeaderLinks && (expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinks : rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinksDuplicateAnchor), rendererTableColumnStyles, stickyHeaderStyles, codeBlockAndLayoutStyles, columnLayoutSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveRendererStyles, isAdvancedLayoutsOn && layoutSectionForAdvancedLayoutsStyles, !useBlockRenderForCodeBlock && gridRenderForCodeBlockStyles, browser.safari && codeBlockInListSafariFixStyles, appearance === 'full-page' && !isPreviewPanelResponsivenessOn && responsiveBreakoutWidth, appearance === 'full-page' && isPreviewPanelResponsivenessOn && responsiveBreakoutWidthWithReducedPadding, (appearance === 'full-width' || appearance === 'max' && (expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) || expValEquals('confluence_max_width_content_appearance', 'isEnabled', true))) && responsiveBreakoutWidthFullWidth, expValEquals('platform_editor_lovability_emoji_scaling', 'isEnabled', true) ? isCompactModeEnabled ? scaledDenseEmojiStyles : scaledEmojiStyles : isCompactModeEnabled ? denseStyles : undefined, expValEquals('platform_synced_block', 'isEnabled', true) && syncBlockStyles, expValEquals('platform_synced_block', 'isEnabled', true) && fg('platform_synced_block_dogfooding') && syncBlockOverflowStyles],
       "data-testid": testId
     }, children)
   );