@atlaskit/renderer 126.12.0 → 126.12.2

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @atlaskit/renderer
 
+## 126.12.2
+
+### Patch Changes
+
+- [`6c36c47f10a70`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/6c36c47f10a70) -
+  [ux] Fixed the inline comment screen reader text markers to use the ::before ::after css elements
+  instead of inline spans. This is because spans will affect the text selection range for comments
+  which try to be added directly after the inline comment causing the wrong part of the document to
+  be highlighted when another comment is started
+- [`6fe8b0bce516c`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/6fe8b0bce516c) -
+  [ux] EDITOR-5604 - Inline Bodied Extension: Fix wrong style for nested block elements
+- Updated dependencies
+
+## 126.12.1
+
+### Patch Changes
+
+- [`85444e8a5672a`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/85444e8a5672a) -
+  EDITOR-5526 clean up platform_synced_block_patch_2
+- Updated dependencies
+
 ## 126.12.0
 
 ### Minor Changes

package/dist/cjs/consts.js

@@ -15,6 +15,7 @@ var RendererCssClassName = exports.RendererCssClassName = {
   EXTENSION_AS_INLINE: "".concat(clPrefix, "extension-as-inline"),
   EXTENSION_CENTER_ALIGN: "".concat(clPrefix, "extension-center-align"),
   EXTENSION_OVERFLOW_CONTAINER: "".concat(clPrefix, "extension-overflow-container"),
+  EXTENSION_INNER_WRAPPER: "".concat(clPrefix, "extension-inner-wrapper"),
   /** Wrapper for center-aligned extensions/MBE; margin here so it participates in collapse */
   STICKY_SAFE_CENTER_WRAPPER: "".concat(clPrefix, "sticky-safe-center-wrapper"),
   /** Wrapper for center-aligned embed card (wide/full-width); margin here so it participates in collapse */

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

@@ -98,7 +98,7 @@ var renderExtension = exports.renderExtension = function renderExtension(content
       tabIndex: (0, _platformFeatureFlags.fg)('platform_editor_dec_a11y_fixes') ? options.tabIndex : undefined
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
       ,
-      className: overflowContainerClass,
+      className: "".concat(_consts.RendererCssClassName.EXTENSION_INNER_WRAPPER, " ").concat(overflowContainerClass),
       css: [!(isInsideOfInlineExtension && (0, _expValEquals.expValEquals)('confluence_inline_insert_excerpt_width_bugfix', 'isEnabled', true)) && (0, _platformFeatureFlags.fg)('platform_fix_macro_renders_in_layouts') && containerStyle]
     }, content));
     return centerAlignClass && (0, _expValEquals.expValEquals)('platform_editor_flex_based_centering', 'isEnabled', true) ? (0, _react.jsx)("div", {
@@ -127,7 +127,7 @@ var renderExtension = exports.renderExtension = function renderExtension(content
       tabIndex: (0, _platformFeatureFlags.fg)('platform_editor_dec_a11y_fixes') ? options.tabIndex : undefined
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
       ,
-      className: overflowContainerClass,
+      className: "".concat(_consts.RendererCssClassName.EXTENSION_INNER_WRAPPER, " ").concat(overflowContainerClass),
       css: [!(isInsideOfInlineExtension && (0, _expValEquals.expValEquals)('confluence_inline_insert_excerpt_width_bugfix', 'isEnabled', true)) && (0, _platformFeatureFlags.fg)('platform_fix_macro_renders_in_layouts') && containerStyle]
     }, content));
     return centerAlignClass && (0, _expValEquals.expValEquals)('platform_editor_flex_based_centering', 'isEnabled', true) ? (0, _react.jsx)("div", {

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

@@ -807,7 +807,7 @@ var oldExtensionAsInlineStyle = (0, _react.css)((0, _defineProperty2.default)((0
   display: 'inline-block',
   overflowX: 'visible',
   containerType: 'normal'
-}), ".".concat(_consts.RendererCssClassName.EXTENSION_AS_INLINE, " div, .").concat(_consts.RendererCssClassName.EXTENSION_AS_INLINE, " p"), {
+}), ".".concat(_consts.RendererCssClassName.EXTENSION_AS_INLINE, " .").concat(_consts.RendererCssClassName.EXTENSION_INNER_WRAPPER), {
   display: 'inline-block'
 }));
 var extensionAsInlineStyle = (0, _react.css)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, ".".concat(_consts.RendererCssClassName.DOCUMENT, " [data-as-inline=\"on\"]"), {
@@ -820,7 +820,7 @@ var extensionAsInlineStyle = (0, _react.css)((0, _defineProperty2.default)((0, _
   display: 'inline-block',
   overflowX: 'visible',
   containerType: 'normal'
-}), ".".concat(_consts.RendererCssClassName.EXTENSION_AS_INLINE, " div, .").concat(_consts.RendererCssClassName.EXTENSION_AS_INLINE, " p"), {
+}), ".".concat(_consts.RendererCssClassName.EXTENSION_AS_INLINE, " .").concat(_consts.RendererCssClassName.EXTENSION_INNER_WRAPPER), {
   display: 'inline-block'
 }));
 
@@ -1946,7 +1946,8 @@ var denseStyles = (0, _react.css)((0, _defineProperty2.default)((0, _definePrope
 var syncBlockStyles = (0, _react.css)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, ".".concat(_syncBlock.SyncBlockSharedCssClassName.renderer, ", .").concat(_syncBlock.BodiedSyncBlockSharedCssClassName.renderer, ", .").concat(_syncBlock.SyncBlockSharedCssClassName.error, ", .").concat(_syncBlock.SyncBlockSharedCssClassName.loading), {
   borderRadius: "var(--ds-radius-small, 3px)",
   marginTop: "var(--ds-space-075, 6px)",
-  paddingBlock: "var(--ds-space-150, 12px)"
+  paddingBlock: "var(--ds-space-150, 12px)",
+  overflow: 'visible'
 }), ".".concat(_syncBlock.SyncBlockSharedCssClassName.renderer), {
   // First child node in syncBlock in editor is overridden with marginTop: 0, hence apply the same style in renderer for consistency
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors, @atlaskit/ui-styling-standard/no-nested-selectors
@@ -1964,13 +1965,6 @@ var syncBlockStyles = (0, _react.css)((0, _defineProperty2.default)((0, _defineP
 }), ".".concat(_syncBlock.SyncBlockSharedCssClassName.loading), {
   boxShadow: "0 0 0 1px ".concat("var(--ds-border, #0B120E24)")
 }));
-var syncBlockOverflowStyles = (0, _react.css)((0, _defineProperty2.default)({}, ".".concat(_syncBlock.SyncBlockSharedCssClassName.renderer, ", .").concat(_syncBlock.BodiedSyncBlockSharedCssClassName.renderer, ", .").concat(_syncBlock.SyncBlockSharedCssClassName.error, ", .").concat(_syncBlock.SyncBlockSharedCssClassName.loading), {
-  // Contain floated elements (wrap-left/wrap-right) within synced block borders
-  overflow: 'hidden'
-}));
-var syncBlockPatch2Styles = (0, _react.css)((0, _defineProperty2.default)({}, ".".concat(_syncBlock.SyncBlockSharedCssClassName.renderer, ", .").concat(_syncBlock.BodiedSyncBlockSharedCssClassName.renderer, ", .").concat(_syncBlock.SyncBlockSharedCssClassName.error, ", .").concat(_syncBlock.SyncBlockSharedCssClassName.loading), {
-  overflow: 'visible'
-}));
 var RendererStyleContainer = exports.RendererStyleContainer = function RendererStyleContainer(props) {
   var onClick = props.onClick,
     onMouseDown = props.onMouseDown,
@@ -2016,7 +2010,7 @@ var RendererStyleContainer = exports.RendererStyleContainer = function RendererS
     // this should be placed after baseOtherStyles
     (0, _expValEquals.expValEquals)('platform_editor_render_bodied_extension_as_inline', 'isEnabled', true) && ((0, _expValEquals.expValEquals)('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? extensionAsInlineStyle : oldExtensionAsInlineStyle), (0, _expValEquals.expValEquals)('confluence_insert_excerpt_inline_vertical_align', 'isEnabled', true) && inlineExtensionRendererMarginFix, allowNestedHeaderLinks && ((0, _expValEquals.expValEquals)('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? alignedHeadingAnchorStyle : alignedHeadingAnchorStyleDuplicateAnchor), mediaSingleSharedStyle,
     // 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 && ((0, _expValEquals.expValEquals)('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinks : rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinksDuplicateAnchor), rendererTableColumnStyles, stickyHeaderStyles, codeBlockAndLayoutStyles, columnLayoutSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveRendererStyles, isAdvancedLayoutsOn && layoutSectionForAdvancedLayoutsStyles, !useBlockRenderForCodeBlock && gridRenderForCodeBlockStyles, browser.safari && codeBlockInListSafariFixStyles, appearance === 'full-page' && !isPreviewPanelResponsivenessOn && responsiveBreakoutWidth, appearance === 'full-page' && isPreviewPanelResponsivenessOn && responsiveBreakoutWidthWithReducedPadding, (appearance === 'full-width' || appearance === 'max' && ((0, _expValEquals.expValEquals)('editor_tinymce_full_width_mode', 'isEnabled', true) || (0, _expValEquals.expValEquals)('confluence_max_width_content_appearance', 'isEnabled', true))) && responsiveBreakoutWidthFullWidth, (0, _expValEquals.expValEquals)('platform_editor_lovability_emoji_scaling', 'isEnabled', true) ? isCompactModeEnabled ? scaledDenseEmojiStyles : scaledEmojiStyles : isCompactModeEnabled ? denseStyles : undefined, (0, _experiments.editorExperiment)('platform_synced_block', true) && syncBlockStyles, (0, _experiments.editorExperiment)('platform_synced_block', true) && syncBlockOverflowStyles, (0, _experiments.editorExperiment)('platform_synced_block', true) && (0, _platformFeatureFlags.fg)('platform_synced_block_patch_2') && syncBlockPatch2Styles, centerWrapperStyles],
+    (0, _platformFeatureFlags.fg)('platform_editor_fix_media_in_renderer') && firstWrappedMediaStyles, tableSharedStyle, tableRendererHeaderStylesForTableCellOnly, (0, _platformFeatureFlags.fg)('platform_editor_bordered_panel_nested_in_table') && tableRendererNestedPanelStyles, isBackgroundClipBrowserFixNeeded() && tableStylesBackGroundClipForGeckoForTableCellOnly, (0, _platformFeatureFlags.fg)('platform_editor_nested_dnd_styles_changes') ? firstNodeWithNotMarginTopWithNestedDnD : firstNodeWithNotMarginTop, rendererTableStyles, (0, _table.isStickyScrollbarEnabled)(appearance) && stickyScrollbarStyles, rendererTableHeaderEqualHeightStylesForTableCellOnly, allowColumnSorting && rendererTableSortableColumnStyles, allowColumnSorting && allowNestedHeaderLinks && ((0, _expValEquals.expValEquals)('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinks : rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinksDuplicateAnchor), rendererTableColumnStyles, stickyHeaderStyles, codeBlockAndLayoutStyles, columnLayoutSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveRendererStyles, isAdvancedLayoutsOn && layoutSectionForAdvancedLayoutsStyles, !useBlockRenderForCodeBlock && gridRenderForCodeBlockStyles, browser.safari && codeBlockInListSafariFixStyles, appearance === 'full-page' && !isPreviewPanelResponsivenessOn && responsiveBreakoutWidth, appearance === 'full-page' && isPreviewPanelResponsivenessOn && responsiveBreakoutWidthWithReducedPadding, (appearance === 'full-width' || appearance === 'max' && ((0, _expValEquals.expValEquals)('editor_tinymce_full_width_mode', 'isEnabled', true) || (0, _expValEquals.expValEquals)('confluence_max_width_content_appearance', 'isEnabled', true))) && responsiveBreakoutWidthFullWidth, (0, _expValEquals.expValEquals)('platform_editor_lovability_emoji_scaling', 'isEnabled', true) ? isCompactModeEnabled ? scaledDenseEmojiStyles : scaledEmojiStyles : isCompactModeEnabled ? denseStyles : undefined, (0, _experiments.editorExperiment)('platform_synced_block', true) && syncBlockStyles, centerWrapperStyles],
     "data-testid": testId
   }, children);
 };

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

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

package/dist/cjs/ui/annotations/element/mark.js

@@ -113,13 +113,23 @@ var accessibilityStylesOld = (0, _react2.css)({
   }
 });
 var accessibilityStylesNew = (0, _react2.css)({
-  clipPath: 'inset(100%)',
-  clip: 'rect(1px, 1px, 1px, 1px)',
-  height: '1px',
-  overflow: 'hidden',
-  position: 'absolute',
-  whiteSpace: 'nowrap',
-  width: '1px'
+  '&::before, &::after': {
+    clipPath: 'inset(100%)',
+    clip: 'rect(1px, 1px, 1px, 1px)',
+    height: '1px',
+    overflow: 'hidden',
+    position: 'absolute',
+    whiteSpace: 'nowrap',
+    width: '1px'
+  },
+  '&::before': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
+    content: ['var(--ak-renderer-annotation-startmarker)']
+  },
+  '&::after': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
+    content: ['var(--ak-renderer-annotation-endmarker)']
+  }
 });
 var MarkComponent = exports.MarkComponent = function MarkComponent(_ref) {
   var annotationParentIds = _ref.annotationParentIds,
@@ -223,14 +233,13 @@ var MarkComponent = exports.MarkComponent = function MarkComponent(_ref) {
     ref: id === currentSelectedAnnotationId ? markRef : undefined,
     id: id
   }, (0, _platformFeatureFlags.fg)('editor_inline_comments_on_inline_nodes') ? 'onClickCapture' : 'onClick', onMarkClick), accessibility), overriddenData), !useBlockLevel && {
-    css: [markStyles, markStylesLayeringFix, (0, _platformFeatureFlags.fg)('editor_inline_comments_on_inline_nodes') && markStylesWithInlineComments, markStylesWithCommentsPanel, !(0, _platformFeatureFlags.fg)('platform_renderer_a11y_inline_comment_fix') && !isMobile() && accessibilityStylesOld, markStylesWithUpdatedShadow],
-    style: (0, _platformFeatureFlags.fg)('platform_renderer_a11y_inline_comment_fix') ? {} : {
+    css: [markStyles, markStylesLayeringFix, (0, _platformFeatureFlags.fg)('editor_inline_comments_on_inline_nodes') && markStylesWithInlineComments, markStylesWithCommentsPanel, !isMobile() && ((0, _platformFeatureFlags.fg)('platform_renderer_a11y_inline_comment_fix') ? accessibilityStylesNew : accessibilityStylesOld), markStylesWithUpdatedShadow],
+    style: (0, _platformFeatureFlags.fg)('platform_renderer_a11y_inline_comment_fix') ? {
+      '--ak-renderer-annotation-startmarker': "\"".concat(intl.formatMessage(_messages.inlineCommentMessages.contentRendererInlineCommentMarkerStart), "\""),
+      '--ak-renderer-annotation-endmarker': "\"".concat(intl.formatMessage(_messages.inlineCommentMessages.contentRendererInlineCommentMarkerEnd), "\"")
+    } : {
       '--ak-renderer-annotation-startmarker': intl.formatMessage(_messages.inlineCommentMessages.contentRendererInlineCommentMarkerStart),
       '--ak-renderer-annotation-endmarker': intl.formatMessage(_messages.inlineCommentMessages.contentRendererInlineCommentMarkerEnd)
     }
-  }), (0, _platformFeatureFlags.fg)('platform_renderer_a11y_inline_comment_fix') ? useBlockLevel || isMobile() ? children : (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)("span", {
-    css: accessibilityStylesNew
-  }, intl.formatMessage(_messages.inlineCommentMessages.contentRendererInlineCommentMarkerStart)), children, (0, _react2.jsx)("span", {
-    css: accessibilityStylesNew
-  }, intl.formatMessage(_messages.inlineCommentMessages.contentRendererInlineCommentMarkerEnd))) : children);
+  }), children);
 };

package/dist/es2019/consts.js

@@ -9,6 +9,7 @@ export const RendererCssClassName = {
   EXTENSION_AS_INLINE: `${clPrefix}extension-as-inline`,
   EXTENSION_CENTER_ALIGN: `${clPrefix}extension-center-align`,
   EXTENSION_OVERFLOW_CONTAINER: `${clPrefix}extension-overflow-container`,
+  EXTENSION_INNER_WRAPPER: `${clPrefix}extension-inner-wrapper`,
   /** Wrapper for center-aligned extensions/MBE; margin here so it participates in collapse */
   STICKY_SAFE_CENTER_WRAPPER: `${clPrefix}sticky-safe-center-wrapper`,
   /** Wrapper for center-aligned embed card (wide/full-width); margin here so it participates in collapse */

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

@@ -79,7 +79,7 @@ export const renderExtension = (content, layout, options = {}, removeOverflow, e
       tabIndex: fg('platform_editor_dec_a11y_fixes') ? options.tabIndex : undefined
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
       ,
-      className: overflowContainerClass,
+      className: `${RendererCssClassName.EXTENSION_INNER_WRAPPER} ${overflowContainerClass}`,
       css: [!(isInsideOfInlineExtension && expValEquals('confluence_inline_insert_excerpt_width_bugfix', 'isEnabled', true)) && fg('platform_fix_macro_renders_in_layouts') && containerStyle]
     }, content));
     return centerAlignClass && expValEquals('platform_editor_flex_based_centering', 'isEnabled', true) ? jsx("div", {
@@ -109,7 +109,7 @@ export const renderExtension = (content, layout, options = {}, removeOverflow, e
       tabIndex: fg('platform_editor_dec_a11y_fixes') ? options.tabIndex : undefined
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
       ,
-      className: overflowContainerClass,
+      className: `${RendererCssClassName.EXTENSION_INNER_WRAPPER} ${overflowContainerClass}`,
       css: [!(isInsideOfInlineExtension && expValEquals('confluence_inline_insert_excerpt_width_bugfix', 'isEnabled', true)) && fg('platform_fix_macro_renders_in_layouts') && containerStyle]
     }, content));
     return centerAlignClass && expValEquals('platform_editor_flex_based_centering', 'isEnabled', true) ? jsx("div", {

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

@@ -958,7 +958,7 @@ const oldExtensionAsInlineStyle = css({
     overflowX: 'visible',
     containerType: 'normal'
   },
-  [`.${RendererCssClassName.EXTENSION_AS_INLINE} div, .${RendererCssClassName.EXTENSION_AS_INLINE} p`]: {
+  [`.${RendererCssClassName.EXTENSION_AS_INLINE} .${RendererCssClassName.EXTENSION_INNER_WRAPPER}`]: {
     display: 'inline-block'
   }
 });
@@ -976,7 +976,7 @@ const extensionAsInlineStyle = css({
     overflowX: 'visible',
     containerType: 'normal'
   },
-  [`.${RendererCssClassName.EXTENSION_AS_INLINE} div, .${RendererCssClassName.EXTENSION_AS_INLINE} p`]: {
+  [`.${RendererCssClassName.EXTENSION_AS_INLINE} .${RendererCssClassName.EXTENSION_INNER_WRAPPER}`]: {
     display: 'inline-block'
   }
 });
@@ -2502,7 +2502,8 @@ const syncBlockStyles = css({
   [`.${SyncBlockSharedCssClassName.renderer}, .${BodiedSyncBlockSharedCssClassName.renderer}, .${SyncBlockSharedCssClassName.error}, .${SyncBlockSharedCssClassName.loading}`]: {
     borderRadius: "var(--ds-radius-small, 3px)",
     marginTop: "var(--ds-space-075, 6px)",
-    paddingBlock: "var(--ds-space-150, 12px)"
+    paddingBlock: "var(--ds-space-150, 12px)",
+    overflow: 'visible'
   },
   [`.${SyncBlockSharedCssClassName.renderer}`]: {
     // First child node in syncBlock in editor is overridden with marginTop: 0, hence apply the same style in renderer for consistency
@@ -2525,17 +2526,6 @@ const syncBlockStyles = css({
     boxShadow: `0 0 0 1px ${"var(--ds-border, #0B120E24)"}`
   }
 });
-const syncBlockOverflowStyles = css({
-  [`.${SyncBlockSharedCssClassName.renderer}, .${BodiedSyncBlockSharedCssClassName.renderer}, .${SyncBlockSharedCssClassName.error}, .${SyncBlockSharedCssClassName.loading}`]: {
-    // Contain floated elements (wrap-left/wrap-right) within synced block borders
-    overflow: 'hidden'
-  }
-});
-const syncBlockPatch2Styles = css({
-  [`.${SyncBlockSharedCssClassName.renderer}, .${BodiedSyncBlockSharedCssClassName.renderer}, .${SyncBlockSharedCssClassName.error}, .${SyncBlockSharedCssClassName.loading}`]: {
-    overflow: 'visible'
-  }
-});
 export const RendererStyleContainer = props => {
   const {
     onClick,
@@ -2583,7 +2573,7 @@ export const RendererStyleContainer = props => {
     // this should be placed after baseOtherStyles
     expValEquals('platform_editor_render_bodied_extension_as_inline', 'isEnabled', true) && (expValEquals('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? extensionAsInlineStyle : oldExtensionAsInlineStyle), expValEquals('confluence_insert_excerpt_inline_vertical_align', 'isEnabled', true) && inlineExtensionRendererMarginFix, allowNestedHeaderLinks && (expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? alignedHeadingAnchorStyle : alignedHeadingAnchorStyleDuplicateAnchor), mediaSingleSharedStyle,
     // 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 && (expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinks : rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinksDuplicateAnchor), rendererTableColumnStyles, stickyHeaderStyles, codeBlockAndLayoutStyles, columnLayoutSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveRendererStyles, isAdvancedLayoutsOn && layoutSectionForAdvancedLayoutsStyles, !useBlockRenderForCodeBlock && gridRenderForCodeBlockStyles, browser.safari && codeBlockInListSafariFixStyles, appearance === 'full-page' && !isPreviewPanelResponsivenessOn && responsiveBreakoutWidth, appearance === 'full-page' && isPreviewPanelResponsivenessOn && responsiveBreakoutWidthWithReducedPadding, (appearance === 'full-width' || appearance === 'max' && (expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) || expValEquals('confluence_max_width_content_appearance', 'isEnabled', true))) && responsiveBreakoutWidthFullWidth, expValEquals('platform_editor_lovability_emoji_scaling', 'isEnabled', true) ? isCompactModeEnabled ? scaledDenseEmojiStyles : scaledEmojiStyles : isCompactModeEnabled ? denseStyles : undefined, editorExperiment('platform_synced_block', true) && syncBlockStyles, editorExperiment('platform_synced_block', true) && syncBlockOverflowStyles, editorExperiment('platform_synced_block', true) && fg('platform_synced_block_patch_2') && syncBlockPatch2Styles, centerWrapperStyles],
+    fg('platform_editor_fix_media_in_renderer') && firstWrappedMediaStyles, tableSharedStyle, tableRendererHeaderStylesForTableCellOnly, fg('platform_editor_bordered_panel_nested_in_table') && tableRendererNestedPanelStyles, isBackgroundClipBrowserFixNeeded() && tableStylesBackGroundClipForGeckoForTableCellOnly, fg('platform_editor_nested_dnd_styles_changes') ? firstNodeWithNotMarginTopWithNestedDnD : firstNodeWithNotMarginTop, rendererTableStyles, isStickyScrollbarEnabled(appearance) && stickyScrollbarStyles, rendererTableHeaderEqualHeightStylesForTableCellOnly, allowColumnSorting && rendererTableSortableColumnStyles, allowColumnSorting && allowNestedHeaderLinks && (expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinks : rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinksDuplicateAnchor), rendererTableColumnStyles, stickyHeaderStyles, codeBlockAndLayoutStyles, columnLayoutSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveRendererStyles, isAdvancedLayoutsOn && layoutSectionForAdvancedLayoutsStyles, !useBlockRenderForCodeBlock && gridRenderForCodeBlockStyles, browser.safari && codeBlockInListSafariFixStyles, appearance === 'full-page' && !isPreviewPanelResponsivenessOn && responsiveBreakoutWidth, appearance === 'full-page' && isPreviewPanelResponsivenessOn && responsiveBreakoutWidthWithReducedPadding, (appearance === 'full-width' || appearance === 'max' && (expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) || expValEquals('confluence_max_width_content_appearance', 'isEnabled', true))) && responsiveBreakoutWidthFullWidth, expValEquals('platform_editor_lovability_emoji_scaling', 'isEnabled', true) ? isCompactModeEnabled ? scaledDenseEmojiStyles : scaledEmojiStyles : isCompactModeEnabled ? denseStyles : undefined, editorExperiment('platform_synced_block', true) && syncBlockStyles, centerWrapperStyles],
     "data-testid": testId
   }, children);
 };

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

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

package/dist/es2019/ui/annotations/element/mark.js

@@ -3,7 +3,7 @@
  * @jsx jsx
  */
 
-import { useMemo, useCallback, Fragment } from 'react';
+import { useMemo, useCallback } from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { AnnotationMarkStates } from '@atlaskit/adf-schema';
@@ -119,13 +119,23 @@ const accessibilityStylesOld = css({
   }
 });
 const accessibilityStylesNew = css({
-  clipPath: 'inset(100%)',
-  clip: 'rect(1px, 1px, 1px, 1px)',
-  height: '1px',
-  overflow: 'hidden',
-  position: 'absolute',
-  whiteSpace: 'nowrap',
-  width: '1px'
+  '&::before, &::after': {
+    clipPath: 'inset(100%)',
+    clip: 'rect(1px, 1px, 1px, 1px)',
+    height: '1px',
+    overflow: 'hidden',
+    position: 'absolute',
+    whiteSpace: 'nowrap',
+    width: '1px'
+  },
+  '&::before': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
+    content: ['var(--ak-renderer-annotation-startmarker)']
+  },
+  '&::after': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
+    content: ['var(--ak-renderer-annotation-endmarker)']
+  }
 });
 export const MarkComponent = ({
   annotationParentIds,
@@ -235,15 +245,14 @@ export const MarkComponent = ({
     ...accessibility,
     ...overriddenData,
     ...(!useBlockLevel && {
-      css: [markStyles, markStylesLayeringFix, fg('editor_inline_comments_on_inline_nodes') && markStylesWithInlineComments, markStylesWithCommentsPanel, !fg('platform_renderer_a11y_inline_comment_fix') && !isMobile() && accessibilityStylesOld, markStylesWithUpdatedShadow],
-      style: fg('platform_renderer_a11y_inline_comment_fix') ? {} : {
+      css: [markStyles, markStylesLayeringFix, fg('editor_inline_comments_on_inline_nodes') && markStylesWithInlineComments, markStylesWithCommentsPanel, !isMobile() && (fg('platform_renderer_a11y_inline_comment_fix') ? accessibilityStylesNew : accessibilityStylesOld), markStylesWithUpdatedShadow],
+      style: fg('platform_renderer_a11y_inline_comment_fix') ? {
+        '--ak-renderer-annotation-startmarker': `"${intl.formatMessage(inlineCommentMessages.contentRendererInlineCommentMarkerStart)}"`,
+        '--ak-renderer-annotation-endmarker': `"${intl.formatMessage(inlineCommentMessages.contentRendererInlineCommentMarkerEnd)}"`
+      } : {
         '--ak-renderer-annotation-startmarker': intl.formatMessage(inlineCommentMessages.contentRendererInlineCommentMarkerStart),
         '--ak-renderer-annotation-endmarker': intl.formatMessage(inlineCommentMessages.contentRendererInlineCommentMarkerEnd)
       }
     })
-  }, fg('platform_renderer_a11y_inline_comment_fix') ? useBlockLevel || isMobile() ? children : jsx(Fragment, null, jsx("span", {
-    css: accessibilityStylesNew
-  }, intl.formatMessage(inlineCommentMessages.contentRendererInlineCommentMarkerStart)), children, jsx("span", {
-    css: accessibilityStylesNew
-  }, intl.formatMessage(inlineCommentMessages.contentRendererInlineCommentMarkerEnd))) : children);
+  }, children);
 };

package/dist/esm/consts.js

@@ -9,6 +9,7 @@ export var RendererCssClassName = {
   EXTENSION_AS_INLINE: "".concat(clPrefix, "extension-as-inline"),
   EXTENSION_CENTER_ALIGN: "".concat(clPrefix, "extension-center-align"),
   EXTENSION_OVERFLOW_CONTAINER: "".concat(clPrefix, "extension-overflow-container"),
+  EXTENSION_INNER_WRAPPER: "".concat(clPrefix, "extension-inner-wrapper"),
   /** Wrapper for center-aligned extensions/MBE; margin here so it participates in collapse */
   STICKY_SAFE_CENTER_WRAPPER: "".concat(clPrefix, "sticky-safe-center-wrapper"),
   /** Wrapper for center-aligned embed card (wide/full-width); margin here so it participates in collapse */

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

@@ -90,7 +90,7 @@ export var renderExtension = function renderExtension(content, layout) {
       tabIndex: fg('platform_editor_dec_a11y_fixes') ? options.tabIndex : undefined
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
       ,
-      className: overflowContainerClass,
+      className: "".concat(RendererCssClassName.EXTENSION_INNER_WRAPPER, " ").concat(overflowContainerClass),
       css: [!(isInsideOfInlineExtension && expValEquals('confluence_inline_insert_excerpt_width_bugfix', 'isEnabled', true)) && fg('platform_fix_macro_renders_in_layouts') && containerStyle]
     }, content));
     return centerAlignClass && expValEquals('platform_editor_flex_based_centering', 'isEnabled', true) ? jsx("div", {
@@ -119,7 +119,7 @@ export var renderExtension = function renderExtension(content, layout) {
       tabIndex: fg('platform_editor_dec_a11y_fixes') ? options.tabIndex : undefined
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
       ,
-      className: overflowContainerClass,
+      className: "".concat(RendererCssClassName.EXTENSION_INNER_WRAPPER, " ").concat(overflowContainerClass),
       css: [!(isInsideOfInlineExtension && expValEquals('confluence_inline_insert_excerpt_width_bugfix', 'isEnabled', true)) && fg('platform_fix_macro_renders_in_layouts') && containerStyle]
     }, content));
     return centerAlignClass && expValEquals('platform_editor_flex_based_centering', 'isEnabled', true) ? jsx("div", {

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

@@ -800,7 +800,7 @@ var oldExtensionAsInlineStyle = css(_defineProperty(_defineProperty(_definePrope
   display: 'inline-block',
   overflowX: 'visible',
   containerType: 'normal'
-}), ".".concat(RendererCssClassName.EXTENSION_AS_INLINE, " div, .").concat(RendererCssClassName.EXTENSION_AS_INLINE, " p"), {
+}), ".".concat(RendererCssClassName.EXTENSION_AS_INLINE, " .").concat(RendererCssClassName.EXTENSION_INNER_WRAPPER), {
   display: 'inline-block'
 }));
 var extensionAsInlineStyle = css(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, ".".concat(RendererCssClassName.DOCUMENT, " [data-as-inline=\"on\"]"), {
@@ -813,7 +813,7 @@ var extensionAsInlineStyle = css(_defineProperty(_defineProperty(_defineProperty
   display: 'inline-block',
   overflowX: 'visible',
   containerType: 'normal'
-}), ".".concat(RendererCssClassName.EXTENSION_AS_INLINE, " div, .").concat(RendererCssClassName.EXTENSION_AS_INLINE, " p"), {
+}), ".".concat(RendererCssClassName.EXTENSION_AS_INLINE, " .").concat(RendererCssClassName.EXTENSION_INNER_WRAPPER), {
   display: 'inline-block'
 }));
 
@@ -1939,7 +1939,8 @@ var denseStyles = css(_defineProperty(_defineProperty(_defineProperty({}, ".".co
 var syncBlockStyles = css(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, ".".concat(SyncBlockSharedCssClassName.renderer, ", .").concat(BodiedSyncBlockSharedCssClassName.renderer, ", .").concat(SyncBlockSharedCssClassName.error, ", .").concat(SyncBlockSharedCssClassName.loading), {
   borderRadius: "var(--ds-radius-small, 3px)",
   marginTop: "var(--ds-space-075, 6px)",
-  paddingBlock: "var(--ds-space-150, 12px)"
+  paddingBlock: "var(--ds-space-150, 12px)",
+  overflow: 'visible'
 }), ".".concat(SyncBlockSharedCssClassName.renderer), {
   // First child node in syncBlock in editor is overridden with marginTop: 0, hence apply the same style in renderer for consistency
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors, @atlaskit/ui-styling-standard/no-nested-selectors
@@ -1957,13 +1958,6 @@ var syncBlockStyles = css(_defineProperty(_defineProperty(_defineProperty(_defin
 }), ".".concat(SyncBlockSharedCssClassName.loading), {
   boxShadow: "0 0 0 1px ".concat("var(--ds-border, #0B120E24)")
 }));
-var syncBlockOverflowStyles = css(_defineProperty({}, ".".concat(SyncBlockSharedCssClassName.renderer, ", .").concat(BodiedSyncBlockSharedCssClassName.renderer, ", .").concat(SyncBlockSharedCssClassName.error, ", .").concat(SyncBlockSharedCssClassName.loading), {
-  // Contain floated elements (wrap-left/wrap-right) within synced block borders
-  overflow: 'hidden'
-}));
-var syncBlockPatch2Styles = css(_defineProperty({}, ".".concat(SyncBlockSharedCssClassName.renderer, ", .").concat(BodiedSyncBlockSharedCssClassName.renderer, ", .").concat(SyncBlockSharedCssClassName.error, ", .").concat(SyncBlockSharedCssClassName.loading), {
-  overflow: 'visible'
-}));
 export var RendererStyleContainer = function RendererStyleContainer(props) {
   var onClick = props.onClick,
     onMouseDown = props.onMouseDown,
@@ -2009,7 +2003,7 @@ export var RendererStyleContainer = function RendererStyleContainer(props) {
     // this should be placed after baseOtherStyles
     expValEquals('platform_editor_render_bodied_extension_as_inline', 'isEnabled', true) && (expValEquals('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? extensionAsInlineStyle : oldExtensionAsInlineStyle), expValEquals('confluence_insert_excerpt_inline_vertical_align', 'isEnabled', true) && inlineExtensionRendererMarginFix, allowNestedHeaderLinks && (expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? alignedHeadingAnchorStyle : alignedHeadingAnchorStyleDuplicateAnchor), mediaSingleSharedStyle,
     // 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 && (expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinks : rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinksDuplicateAnchor), rendererTableColumnStyles, stickyHeaderStyles, codeBlockAndLayoutStyles, columnLayoutSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveRendererStyles, isAdvancedLayoutsOn && layoutSectionForAdvancedLayoutsStyles, !useBlockRenderForCodeBlock && gridRenderForCodeBlockStyles, browser.safari && codeBlockInListSafariFixStyles, appearance === 'full-page' && !isPreviewPanelResponsivenessOn && responsiveBreakoutWidth, appearance === 'full-page' && isPreviewPanelResponsivenessOn && responsiveBreakoutWidthWithReducedPadding, (appearance === 'full-width' || appearance === 'max' && (expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) || expValEquals('confluence_max_width_content_appearance', 'isEnabled', true))) && responsiveBreakoutWidthFullWidth, expValEquals('platform_editor_lovability_emoji_scaling', 'isEnabled', true) ? isCompactModeEnabled ? scaledDenseEmojiStyles : scaledEmojiStyles : isCompactModeEnabled ? denseStyles : undefined, editorExperiment('platform_synced_block', true) && syncBlockStyles, editorExperiment('platform_synced_block', true) && syncBlockOverflowStyles, editorExperiment('platform_synced_block', true) && fg('platform_synced_block_patch_2') && syncBlockPatch2Styles, centerWrapperStyles],
+    fg('platform_editor_fix_media_in_renderer') && firstWrappedMediaStyles, tableSharedStyle, tableRendererHeaderStylesForTableCellOnly, fg('platform_editor_bordered_panel_nested_in_table') && tableRendererNestedPanelStyles, isBackgroundClipBrowserFixNeeded() && tableStylesBackGroundClipForGeckoForTableCellOnly, fg('platform_editor_nested_dnd_styles_changes') ? firstNodeWithNotMarginTopWithNestedDnD : firstNodeWithNotMarginTop, rendererTableStyles, isStickyScrollbarEnabled(appearance) && stickyScrollbarStyles, rendererTableHeaderEqualHeightStylesForTableCellOnly, allowColumnSorting && rendererTableSortableColumnStyles, allowColumnSorting && allowNestedHeaderLinks && (expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinks : rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinksDuplicateAnchor), rendererTableColumnStyles, stickyHeaderStyles, codeBlockAndLayoutStyles, columnLayoutSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveRendererStyles, isAdvancedLayoutsOn && layoutSectionForAdvancedLayoutsStyles, !useBlockRenderForCodeBlock && gridRenderForCodeBlockStyles, browser.safari && codeBlockInListSafariFixStyles, appearance === 'full-page' && !isPreviewPanelResponsivenessOn && responsiveBreakoutWidth, appearance === 'full-page' && isPreviewPanelResponsivenessOn && responsiveBreakoutWidthWithReducedPadding, (appearance === 'full-width' || appearance === 'max' && (expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) || expValEquals('confluence_max_width_content_appearance', 'isEnabled', true))) && responsiveBreakoutWidthFullWidth, expValEquals('platform_editor_lovability_emoji_scaling', 'isEnabled', true) ? isCompactModeEnabled ? scaledDenseEmojiStyles : scaledEmojiStyles : isCompactModeEnabled ? denseStyles : undefined, editorExperiment('platform_synced_block', true) && syncBlockStyles, centerWrapperStyles],
     "data-testid": testId
   }, children);
 };

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

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

package/dist/esm/ui/annotations/element/mark.js

@@ -7,7 +7,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  * @jsx jsx
  */
 
-import { useMemo, useCallback, Fragment } from 'react';
+import { useMemo, useCallback } from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { AnnotationMarkStates } from '@atlaskit/adf-schema';
@@ -109,13 +109,23 @@ var accessibilityStylesOld = css({
   }
 });
 var accessibilityStylesNew = css({
-  clipPath: 'inset(100%)',
-  clip: 'rect(1px, 1px, 1px, 1px)',
-  height: '1px',
-  overflow: 'hidden',
-  position: 'absolute',
-  whiteSpace: 'nowrap',
-  width: '1px'
+  '&::before, &::after': {
+    clipPath: 'inset(100%)',
+    clip: 'rect(1px, 1px, 1px, 1px)',
+    height: '1px',
+    overflow: 'hidden',
+    position: 'absolute',
+    whiteSpace: 'nowrap',
+    width: '1px'
+  },
+  '&::before': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
+    content: ['var(--ak-renderer-annotation-startmarker)']
+  },
+  '&::after': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
+    content: ['var(--ak-renderer-annotation-endmarker)']
+  }
 });
 export var MarkComponent = function MarkComponent(_ref) {
   var annotationParentIds = _ref.annotationParentIds,
@@ -219,14 +229,13 @@ export var MarkComponent = function MarkComponent(_ref) {
     ref: id === currentSelectedAnnotationId ? markRef : undefined,
     id: id
   }, fg('editor_inline_comments_on_inline_nodes') ? 'onClickCapture' : 'onClick', onMarkClick), accessibility), overriddenData), !useBlockLevel && {
-    css: [markStyles, markStylesLayeringFix, fg('editor_inline_comments_on_inline_nodes') && markStylesWithInlineComments, markStylesWithCommentsPanel, !fg('platform_renderer_a11y_inline_comment_fix') && !isMobile() && accessibilityStylesOld, markStylesWithUpdatedShadow],
-    style: fg('platform_renderer_a11y_inline_comment_fix') ? {} : {
+    css: [markStyles, markStylesLayeringFix, fg('editor_inline_comments_on_inline_nodes') && markStylesWithInlineComments, markStylesWithCommentsPanel, !isMobile() && (fg('platform_renderer_a11y_inline_comment_fix') ? accessibilityStylesNew : accessibilityStylesOld), markStylesWithUpdatedShadow],
+    style: fg('platform_renderer_a11y_inline_comment_fix') ? {
+      '--ak-renderer-annotation-startmarker': "\"".concat(intl.formatMessage(inlineCommentMessages.contentRendererInlineCommentMarkerStart), "\""),
+      '--ak-renderer-annotation-endmarker': "\"".concat(intl.formatMessage(inlineCommentMessages.contentRendererInlineCommentMarkerEnd), "\"")
+    } : {
       '--ak-renderer-annotation-startmarker': intl.formatMessage(inlineCommentMessages.contentRendererInlineCommentMarkerStart),
       '--ak-renderer-annotation-endmarker': intl.formatMessage(inlineCommentMessages.contentRendererInlineCommentMarkerEnd)
     }
-  }), fg('platform_renderer_a11y_inline_comment_fix') ? useBlockLevel || isMobile() ? children : jsx(Fragment, null, jsx("span", {
-    css: accessibilityStylesNew
-  }, intl.formatMessage(inlineCommentMessages.contentRendererInlineCommentMarkerStart)), children, jsx("span", {
-    css: accessibilityStylesNew
-  }, intl.formatMessage(inlineCommentMessages.contentRendererInlineCommentMarkerEnd))) : children);
+  }), children);
 };

package/dist/types/consts.d.ts

@@ -5,6 +5,7 @@ export declare const RendererCssClassName: {
     EXTENSION_AS_INLINE: string;
     EXTENSION_CENTER_ALIGN: string;
     EXTENSION_OVERFLOW_CONTAINER: string;
+    EXTENSION_INNER_WRAPPER: string;
     /** Wrapper for center-aligned extensions/MBE; margin here so it participates in collapse */
     STICKY_SAFE_CENTER_WRAPPER: string;
     /** Wrapper for center-aligned embed card (wide/full-width); margin here so it participates in collapse */

package/dist/types/ui/annotations/element/mark.d.ts

@@ -19,9 +19,6 @@ type MarkComponentProps = {
 export declare const MarkComponent: ({ annotationParentIds, children, dataAttributes, id, state, hasFocus, isHovered, onClick, useBlockLevel, }: React.PropsWithChildren<MarkComponentProps>) => React.ReactElement<{
     css?: (false | import("@emotion/utils").SerializedStyles)[] | undefined;
     style?: {
-        '--ak-renderer-annotation-startmarker'?: undefined;
-        '--ak-renderer-annotation-endmarker'?: undefined;
-    } | {
         '--ak-renderer-annotation-startmarker': string;
         '--ak-renderer-annotation-endmarker': string;
     } | undefined;
@@ -35,9 +32,6 @@ export declare const MarkComponent: ({ annotationParentIds, children, dataAttrib
 } | {
     css?: (false | import("@emotion/utils").SerializedStyles)[] | undefined;
     style?: {
-        '--ak-renderer-annotation-startmarker'?: undefined;
-        '--ak-renderer-annotation-endmarker'?: undefined;
-    } | {
         '--ak-renderer-annotation-startmarker': string;
         '--ak-renderer-annotation-endmarker': string;
     } | undefined;
@@ -53,9 +47,6 @@ export declare const MarkComponent: ({ annotationParentIds, children, dataAttrib
 } | {
     css?: (false | import("@emotion/utils").SerializedStyles)[] | undefined;
     style?: {
-        '--ak-renderer-annotation-startmarker'?: undefined;
-        '--ak-renderer-annotation-endmarker'?: undefined;
-    } | {
         '--ak-renderer-annotation-startmarker': string;
         '--ak-renderer-annotation-endmarker': string;
     } | undefined;
@@ -74,9 +65,6 @@ export declare const MarkComponent: ({ annotationParentIds, children, dataAttrib
 } | {
     css?: (false | import("@emotion/utils").SerializedStyles)[] | undefined;
     style?: {
-        '--ak-renderer-annotation-startmarker'?: undefined;
-        '--ak-renderer-annotation-endmarker'?: undefined;
-    } | {
         '--ak-renderer-annotation-startmarker': string;
         '--ak-renderer-annotation-endmarker': string;
     } | undefined;
@@ -97,9 +85,6 @@ export declare const MarkComponent: ({ annotationParentIds, children, dataAttrib
 } | {
     css?: (false | import("@emotion/utils").SerializedStyles)[] | undefined;
     style?: {
-        '--ak-renderer-annotation-startmarker'?: undefined;
-        '--ak-renderer-annotation-endmarker'?: undefined;
-    } | {
         '--ak-renderer-annotation-startmarker': string;
         '--ak-renderer-annotation-endmarker': string;
     } | undefined;
@@ -118,9 +103,6 @@ export declare const MarkComponent: ({ annotationParentIds, children, dataAttrib
 } | {
     css?: (false | import("@emotion/utils").SerializedStyles)[] | undefined;
     style?: {
-        '--ak-renderer-annotation-startmarker'?: undefined;
-        '--ak-renderer-annotation-endmarker'?: undefined;
-    } | {
         '--ak-renderer-annotation-startmarker': string;
         '--ak-renderer-annotation-endmarker': string;
     } | undefined;

package/dist/types-ts4.5/consts.d.ts

@@ -5,6 +5,7 @@ export declare const RendererCssClassName: {
     EXTENSION_AS_INLINE: string;
     EXTENSION_CENTER_ALIGN: string;
     EXTENSION_OVERFLOW_CONTAINER: string;
+    EXTENSION_INNER_WRAPPER: string;
     /** Wrapper for center-aligned extensions/MBE; margin here so it participates in collapse */
     STICKY_SAFE_CENTER_WRAPPER: string;
     /** Wrapper for center-aligned embed card (wide/full-width); margin here so it participates in collapse */

package/dist/types-ts4.5/ui/annotations/element/mark.d.ts

@@ -19,9 +19,6 @@ type MarkComponentProps = {
 export declare const MarkComponent: ({ annotationParentIds, children, dataAttributes, id, state, hasFocus, isHovered, onClick, useBlockLevel, }: React.PropsWithChildren<MarkComponentProps>) => React.ReactElement<{
     css?: (false | import("@emotion/utils").SerializedStyles)[] | undefined;
     style?: {
-        '--ak-renderer-annotation-startmarker'?: undefined;
-        '--ak-renderer-annotation-endmarker'?: undefined;
-    } | {
         '--ak-renderer-annotation-startmarker': string;
         '--ak-renderer-annotation-endmarker': string;
     } | undefined;
@@ -35,9 +32,6 @@ export declare const MarkComponent: ({ annotationParentIds, children, dataAttrib
 } | {
     css?: (false | import("@emotion/utils").SerializedStyles)[] | undefined;
     style?: {
-        '--ak-renderer-annotation-startmarker'?: undefined;
-        '--ak-renderer-annotation-endmarker'?: undefined;
-    } | {
         '--ak-renderer-annotation-startmarker': string;
         '--ak-renderer-annotation-endmarker': string;
     } | undefined;
@@ -53,9 +47,6 @@ export declare const MarkComponent: ({ annotationParentIds, children, dataAttrib
 } | {
     css?: (false | import("@emotion/utils").SerializedStyles)[] | undefined;
     style?: {
-        '--ak-renderer-annotation-startmarker'?: undefined;
-        '--ak-renderer-annotation-endmarker'?: undefined;
-    } | {
         '--ak-renderer-annotation-startmarker': string;
         '--ak-renderer-annotation-endmarker': string;
     } | undefined;
@@ -74,9 +65,6 @@ export declare const MarkComponent: ({ annotationParentIds, children, dataAttrib
 } | {
     css?: (false | import("@emotion/utils").SerializedStyles)[] | undefined;
     style?: {
-        '--ak-renderer-annotation-startmarker'?: undefined;
-        '--ak-renderer-annotation-endmarker'?: undefined;
-    } | {
         '--ak-renderer-annotation-startmarker': string;
         '--ak-renderer-annotation-endmarker': string;
     } | undefined;
@@ -97,9 +85,6 @@ export declare const MarkComponent: ({ annotationParentIds, children, dataAttrib
 } | {
     css?: (false | import("@emotion/utils").SerializedStyles)[] | undefined;
     style?: {
-        '--ak-renderer-annotation-startmarker'?: undefined;
-        '--ak-renderer-annotation-endmarker'?: undefined;
-    } | {
         '--ak-renderer-annotation-startmarker': string;
         '--ak-renderer-annotation-endmarker': string;
     } | undefined;
@@ -118,9 +103,6 @@ export declare const MarkComponent: ({ annotationParentIds, children, dataAttrib
 } | {
     css?: (false | import("@emotion/utils").SerializedStyles)[] | undefined;
     style?: {
-        '--ak-renderer-annotation-startmarker'?: undefined;
-        '--ak-renderer-annotation-endmarker'?: undefined;
-    } | {
         '--ak-renderer-annotation-startmarker': string;
         '--ak-renderer-annotation-endmarker': string;
     } | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/renderer",
-	"version": "126.12.0",
+	"version": "126.12.2",
 	"description": "Renderer component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -57,7 +57,7 @@
 		"@atlaskit/status": "^3.1.0",
 		"@atlaskit/task-decision": "^19.2.0",
 		"@atlaskit/theme": "^21.0.0",
-		"@atlaskit/tmp-editor-statsig": "^29.4.0",
+		"@atlaskit/tmp-editor-statsig": "^29.6.0",
 		"@atlaskit/tokens": "^11.0.0",
 		"@atlaskit/tooltip": "^20.14.0",
 		"@atlaskit/visually-hidden": "^3.0.0",
@@ -71,7 +71,7 @@
 		"uuid": "^3.1.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^111.18.0",
+		"@atlaskit/editor-common": "^111.19.0",
 		"@atlaskit/link-provider": "^4.2.0",
 		"@atlaskit/media-core": "^37.0.0",
 		"react": "^18.2.0",
@@ -249,9 +249,6 @@
 		},
 		"confluence_ttvc_inline_extensions": {
 			"type": "boolean"
-		},
-		"platform_synced_block_patch_2": {
-			"type": "boolean"
 		}
 	}
 }