@atlaskit/renderer 126.12.1 → 126.12.2

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @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

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'
 }));
 

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 = "126.12.0";
+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'
   }
 });

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 = "126.12.0";
+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'
 }));
 

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 = "126.12.0";
+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.1",
+	"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.5.0",
+		"@atlaskit/tmp-editor-statsig": "^29.6.0",
 		"@atlaskit/tokens": "^11.0.0",
 		"@atlaskit/tooltip": "^20.14.0",
 		"@atlaskit/visually-hidden": "^3.0.0",