@atlaskit/renderer 127.0.0 → 127.2.0

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @atlaskit/renderer
 
+## 127.2.0
+
+### Minor Changes
+
+- [`f444a0d3e2c0b`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/f444a0d3e2c0b) -
+  [FFCLEANUP-79468] clean up platform_editor_dec_a11y_fixes feature gate
+
+### Patch Changes
+
+- Updated dependencies
+
+## 127.1.0
+
+### Minor Changes
+
+- [`b5e671b3b051c`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/b5e671b3b051c) -
+  [ux] Fix inline node annotation color in Renderer to match text annotation color
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 127.0.0
 
 ### Major Changes

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

@@ -95,7 +95,7 @@ var renderExtension = exports.renderExtension = function renderExtension(content
       "data-testid": "extension--wrapper",
       "data-node-type": "extension"
     }, (0, _react.jsx)("div", {
-      tabIndex: (0, _platformFeatureFlags.fg)('platform_editor_dec_a11y_fixes') ? options.tabIndex : undefined
+      tabIndex: options.tabIndex
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
       ,
       className: "".concat(_consts.RendererCssClassName.EXTENSION_INNER_WRAPPER, " ").concat(overflowContainerClass),
@@ -124,7 +124,7 @@ var renderExtension = exports.renderExtension = function renderExtension(content
       "data-layout": layout,
       "data-local-id": localId
     }, (0, _react.jsx)("div", {
-      tabIndex: (0, _platformFeatureFlags.fg)('platform_editor_dec_a11y_fixes') ? options.tabIndex : undefined
+      tabIndex: options.tabIndex
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
       ,
       className: "".concat(_consts.RendererCssClassName.EXTENSION_INNER_WRAPPER, " ").concat(overflowContainerClass),
@@ -163,7 +163,7 @@ var Extension = function Extension(props) {
           isTopLevel: path.length < 1,
           handleRef: handleRef,
           shadowClassNames: shadowClassNames,
-          tabIndex: (0, _platformFeatureFlags.fg)('platform_editor_dec_a11y_fixes') ? props.tabIndex : undefined,
+          tabIndex: props.tabIndex,
           rendererAppearance: props.rendererAppearance
         }, undefined, parameters === null || parameters === void 0 ? void 0 : parameters.extensionId, extensionViewportSizes, nodeHeight, localId, undefined, undefined, isInsideOfInlineExtension);
       }
@@ -177,7 +177,7 @@ var Extension = function Extension(props) {
       isTopLevel: path.length < 1,
       handleRef: handleRef,
       shadowClassNames: shadowClassNames,
-      tabIndex: (0, _platformFeatureFlags.fg)('platform_editor_dec_a11y_fixes') ? props.tabIndex : undefined,
+      tabIndex: props.tabIndex,
       rendererAppearance: props.rendererAppearance
     }, undefined, parameters === null || parameters === void 0 ? void 0 : parameters.extensionId, extensionViewportSizes, nodeHeight, localId, undefined, undefined, isInsideOfInlineExtension);
   });

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

@@ -564,7 +564,7 @@ var TableContainer = exports.TableContainer = /*#__PURE__*/function (_React$Comp
         rendererAppearance: rendererAppearance,
         allowTableResizing: allowTableResizing,
         allowFixedColumnWidthOption: allowFixedColumnWidthOption
-      }, [children && children[0]]), (0, _platformFeatureFlags.fg)('platform_editor_dec_a11y_fixes') ? /*#__PURE__*/_react.default.createElement(TableWrapper, {
+      }, [children && children[0]]), /*#__PURE__*/_react.default.createElement(TableWrapper, {
         wrapperRef: this.wrapperRef,
         onScroll: this.props.stickyHeaders ? this.onWrapperScrolled : undefined,
         stickyHeaders: stickyHeaders,
@@ -583,25 +583,6 @@ var TableContainer = exports.TableContainer = /*#__PURE__*/function (_React$Comp
         allowTableResizing: allowTableResizing,
         isPresentational: isPresentational,
         allowFixedColumnWidthOption: allowFixedColumnWidthOption
-      }, this.grabFirstRowRef(children))) : /*#__PURE__*/_react.default.createElement("div", {
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-        className: _styles.TableSharedCssClassName.TABLE_NODE_WRAPPER,
-        ref: this.wrapperRef,
-        onScroll: this.props.stickyHeaders && this.onWrapperScrolled
-      }, /*#__PURE__*/_react.default.createElement(_table.Table, {
-        innerRef: this.tableRef,
-        columnWidths: columnWidths,
-        layout: layout,
-        isNumberColumnEnabled: isNumberColumnEnabled,
-        renderWidth: renderWidth,
-        tableNode: tableNode,
-        rendererAppearance: rendererAppearance,
-        isInsideOfBlockNode: isInsideOfBlockNode,
-        isInsideOfTable: isInsideOfTable,
-        isinsideMultiBodiedExtension: isinsideMultiBodiedExtension,
-        allowTableResizing: allowTableResizing,
-        isPresentational: isPresentational,
-        allowFixedColumnWidthOption: allowFixedColumnWidthOption
       }, this.grabFirstRowRef(children))), isStickyScrollbarEnabled(this.props.rendererAppearance) && /*#__PURE__*/_react.default.createElement("div", {
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
         className: _styles.TableSharedCssClassName.TABLE_STICKY_SCROLLBAR_CONTAINER,

package/dist/cjs/ui/Expand.js

@@ -296,7 +296,7 @@ function Expand(_ref2) {
   }, (0, _react.jsx)(_ui.WidthProvider, null, (0, _react.jsx)("div", {
     css: clearNextSiblingMarginTopStyle
   }), (0, _platformFeatureFlags.fg)('hot-121622_lazy_load_expand_content') ? hasLoadedChildren || loadBodyContent ? (0, _react.jsx)(_react2.Suspense, {
-    fallback: (0, _react.jsx)("div", null, (0, _platformFeatureFlags.fg)('platform_editor_dec_a11y_fixes') ? intl.formatMessage(_ui.expandMessages.loading) : 'Loading...')
+    fallback: (0, _react.jsx)("div", null, intl.formatMessage(_ui.expandMessages.loading))
   }, (0, _react.jsx)(LazyChildren, null, children)) : null : children))));
 }
 var _default2 = exports.default = (0, _reactIntlNext.injectIntl)(Expand);

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

@@ -1783,7 +1783,7 @@ var columnLayoutResponsiveRendererStyles = (0, _react.css)({
     gap: "var(--ds-space-400, 32px)"
   })
 });
-var rendererAnnotationStyles = (0, _react.css)({
+var rendererAnnotationStylesOld = (0, _react.css)({
   "& [data-mark-type='annotation'][data-mark-annotation-state='active'] [data-annotation-mark], & [data-annotation-draft-mark][data-annotation-inline-node]": {
     background: "var(--ds-background-accent-yellow-subtler, ".concat(_colors.Y75, ")"),
     borderBottom: "var(--ds-border-width-selected, 2px)".concat(" solid ", "var(--ds-border-accent-yellow, ".concat(_colors.Y300, ")")),
@@ -1795,6 +1795,21 @@ var rendererAnnotationStyles = (0, _react.css)({
     paddingLeft: "var(--ds-space-025, 2px)"
   }
 });
+var rendererAnnotationStyles = (0, _react.css)({
+  "& [data-mark-type='annotation'][data-mark-annotation-state='active'] [data-annotation-mark]": {
+    background: "var(--ds-background-accent-yellow-subtlest, #FEF7C8)",
+    borderBottom: "var(--ds-border-width-selected, 2px)".concat(" solid ", "var(--ds-border-accent-yellow, ".concat(_colors.Y300, ")")),
+    cursor: 'pointer',
+    paddingTop: "var(--ds-space-050, 4px)",
+    paddingRight: "var(--ds-space-025, 2px)",
+    paddingBottom: "var(--ds-space-050, 4px)",
+    paddingLeft: "var(--ds-space-025, 2px)"
+  },
+  "& [data-mark-type='annotation'][data-mark-annotation-state='active'][data-has-focus='true'] [data-annotation-mark]": {
+    background: "var(--ds-background-accent-yellow-subtlest-pressed, #EFDD4E)",
+    boxShadow: "var(--ds-shadow-overlay, ".concat("1px 2px 3px ".concat(_colors.N60A, ", -1px 2px 3px ").concat(_colors.N60A), ")")
+  }
+});
 var rendererAnnotationStylesCommentHeightFix = (0, _react.css)({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
   '& [data-annotation-draft-mark][data-annotation-inline-node]': {
@@ -1977,7 +1992,7 @@ var RendererStyleContainer = exports.RendererStyleContainer = function RendererS
     },
     css: [(0, _expValEquals.expValEquals)('confluence_ttvc_inline_extensions', 'isEnabled', true) ? baseFontStyle : originalBaseFontLineHeight, baseStyles, (0, _expValEquals.expValEquals)('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? headingAnchorStyles : headingAnchorStylesDuplicateAnchor, (0, _expValEquals.expValEquals)('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? hideHeadingCopyLinkWrapperStyles : hideHeadingCopyLinkWrapperStylesDuplicateAnchor, appearance === 'full-page' && isPreviewPanelResponsivenessOn && rendererFullPageStylesWithReducedPadding, appearance === 'full-page' && !isPreviewPanelResponsivenessOn && rendererFullPageStyles, appearance === 'full-width' && ((0, _expValEquals.expValEquals)('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? rendererFullWidthStyles : oldRendererFullWidthStyles), (appearance === 'full-width' || appearance === 'max' && ((0, _expValEquals.expValEquals)('editor_tinymce_full_width_mode', 'isEnabled', true) || (0, _expValEquals.expValEquals)('confluence_max_width_content_appearance', 'isEnabled', true))) && !(0, _table.isTableResizingEnabled)(appearance) && rendererFullWidthStylesForTableResizing, appearance === 'max' && ((0, _expValEquals.expValEquals)('editor_tinymce_full_width_mode', 'isEnabled', true) || (0, _expValEquals.expValEquals)('confluence_max_width_content_appearance', 'isEnabled', true)) && ((0, _expValEquals.expValEquals)('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? rendererMaxWidthStyles : oldRendererMaxWidthStyles), rovoTelepointerStyles, whitespaceSharedStyles, blockquoteSharedStyles, headingsSharedStyles, (0, _expValEquals.expValEquals)('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) && headingWrapperInlineFlowStyles, (0, _expValEquals.expValEquals)('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? headingWithAlignmentStyles : headingWithAlignmentStylesDuplicateAnchor, ruleSharedStyles, contentMode === 'compact' && isCompactModeSupported && extensionStyle, (0, _platformFeatureFlags.fg)('platform_editor_typography_ugc') ? isCompactModeSupported ? paragraphStylesUGCScaledMargin : paragraphSharedStylesWithEditorUGC : isCompactModeSupported ? paragraphSharedStyleScaledMargin : paragraphSharedStyles, listsSharedStyles, browser.gecko && listsSharedStylesForGekko, indentationSharedStyles, (0, _platformFeatureFlags.fg)('platform_editor__renderer_indentation_text_margin') && indentationSharedStylesWithMarginFix, (0, _expValEquals.expValEquals)('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? blockMarksSharedStyles : blockMarksSharedStylesDuplicateAnchor, codeMarkSharedStyles, shadowSharedStyle, dateSharedStyle, textColorStyles, backgroundColorStyles,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
-    textHighlightPaddingStyles, tasksAndDecisionsStyles, (0, _expValEquals.expValEquals)('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) && headingPanelStyles, smartCardStyles, smartCardStylesAvatarFix, (0, _experiments.editorExperiment)('platform_editor_preview_panel_linking_exp', true) && headerSmartCardStyles, smartCardStylesAvatarMarginFix, smartCardStylesAvatarListZeroMarginTop, (0, _platformFeatureFlags.fg)('editor_inline_comments_on_inline_nodes') && rendererAnnotationStyles,
+    textHighlightPaddingStyles, tasksAndDecisionsStyles, (0, _expValEquals.expValEquals)('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) && headingPanelStyles, smartCardStyles, smartCardStylesAvatarFix, (0, _experiments.editorExperiment)('platform_editor_preview_panel_linking_exp', true) && headerSmartCardStyles, smartCardStylesAvatarMarginFix, smartCardStylesAvatarListZeroMarginTop, (0, _platformFeatureFlags.fg)('editor_inline_comments_on_inline_nodes') && ((0, _expValEquals.expValEquals)('confluence_fe_renderer_inline_node_mark_color_fix', 'isEnabled', true) ? rendererAnnotationStyles : rendererAnnotationStylesOld),
     // eslint-disable-next-line @atlaskit/platform/no-preconditioning
     (0, _platformFeatureFlags.fg)('editor_inline_comments_on_inline_nodes') && rendererAnnotationStylesCommentHeightFix, (0, _expValEquals.expValEquals)('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? baseOtherStyles : baseOtherStylesDuplicateAnchor, !(0, _expValEquals.expValEquals)('platform_editor_flex_based_centering', 'isEnabled', true) && extensionCenterAlignLegacyStyles,
     // this should be placed after baseOtherStyles

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.16.0";
+var packageVersion = "127.1.0";
 var setAsQueryContainerStyles = (0, _react2.css)({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'

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

@@ -76,7 +76,7 @@ export const renderExtension = (content, layout, options = {}, removeOverflow, e
       "data-testid": "extension--wrapper",
       "data-node-type": "extension"
     }, jsx("div", {
-      tabIndex: fg('platform_editor_dec_a11y_fixes') ? options.tabIndex : undefined
+      tabIndex: options.tabIndex
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
       ,
       className: `${RendererCssClassName.EXTENSION_INNER_WRAPPER} ${overflowContainerClass}`,
@@ -106,7 +106,7 @@ export const renderExtension = (content, layout, options = {}, removeOverflow, e
       "data-layout": layout,
       "data-local-id": localId
     }, jsx("div", {
-      tabIndex: fg('platform_editor_dec_a11y_fixes') ? options.tabIndex : undefined
+      tabIndex: options.tabIndex
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
       ,
       className: `${RendererCssClassName.EXTENSION_INNER_WRAPPER} ${overflowContainerClass}`,
@@ -146,7 +146,7 @@ const Extension = props => {
           isTopLevel: path.length < 1,
           handleRef,
           shadowClassNames,
-          tabIndex: fg('platform_editor_dec_a11y_fixes') ? props.tabIndex : undefined,
+          tabIndex: props.tabIndex,
           rendererAppearance: props.rendererAppearance
         }, undefined, parameters === null || parameters === void 0 ? void 0 : parameters.extensionId, extensionViewportSizes, nodeHeight, localId, undefined, undefined, isInsideOfInlineExtension);
       }
@@ -160,7 +160,7 @@ const Extension = props => {
       isTopLevel: path.length < 1,
       handleRef,
       shadowClassNames,
-      tabIndex: fg('platform_editor_dec_a11y_fixes') ? props.tabIndex : undefined,
+      tabIndex: props.tabIndex,
       rendererAppearance: props.rendererAppearance
     }, undefined, parameters === null || parameters === void 0 ? void 0 : parameters.extensionId, extensionViewportSizes, nodeHeight, localId, undefined, undefined, isInsideOfInlineExtension);
   });

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

@@ -507,7 +507,7 @@ export class TableContainer extends React.Component {
       rendererAppearance: rendererAppearance,
       allowTableResizing: allowTableResizing,
       allowFixedColumnWidthOption: allowFixedColumnWidthOption
-    }, [children && children[0]]), fg('platform_editor_dec_a11y_fixes') ? /*#__PURE__*/React.createElement(TableWrapper, {
+    }, [children && children[0]]), /*#__PURE__*/React.createElement(TableWrapper, {
       wrapperRef: this.wrapperRef,
       onScroll: this.props.stickyHeaders ? this.onWrapperScrolled : undefined,
       stickyHeaders: stickyHeaders,
@@ -526,25 +526,6 @@ export class TableContainer extends React.Component {
       allowTableResizing: allowTableResizing,
       isPresentational: isPresentational,
       allowFixedColumnWidthOption: allowFixedColumnWidthOption
-    }, this.grabFirstRowRef(children))) : /*#__PURE__*/React.createElement("div", {
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-      className: TableSharedCssClassName.TABLE_NODE_WRAPPER,
-      ref: this.wrapperRef,
-      onScroll: this.props.stickyHeaders && this.onWrapperScrolled
-    }, /*#__PURE__*/React.createElement(Table, {
-      innerRef: this.tableRef,
-      columnWidths: columnWidths,
-      layout: layout,
-      isNumberColumnEnabled: isNumberColumnEnabled,
-      renderWidth: renderWidth,
-      tableNode: tableNode,
-      rendererAppearance: rendererAppearance,
-      isInsideOfBlockNode: isInsideOfBlockNode,
-      isInsideOfTable: isInsideOfTable,
-      isinsideMultiBodiedExtension: isinsideMultiBodiedExtension,
-      allowTableResizing: allowTableResizing,
-      isPresentational: isPresentational,
-      allowFixedColumnWidthOption: allowFixedColumnWidthOption
     }, this.grabFirstRowRef(children))), isStickyScrollbarEnabled(this.props.rendererAppearance) && /*#__PURE__*/React.createElement("div", {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       className: TableSharedCssClassName.TABLE_STICKY_SCROLLBAR_CONTAINER,

package/dist/es2019/ui/Expand.js

@@ -276,7 +276,7 @@ function Expand({
   }, jsx(WidthProvider, null, jsx("div", {
     css: clearNextSiblingMarginTopStyle
   }), fg('hot-121622_lazy_load_expand_content') ? hasLoadedChildren || loadBodyContent ? jsx(Suspense, {
-    fallback: jsx("div", null, fg('platform_editor_dec_a11y_fixes') ? intl.formatMessage(expandMessages.loading) : 'Loading...')
+    fallback: jsx("div", null, intl.formatMessage(expandMessages.loading))
   }, jsx(LazyChildren, null, children)) : null : children))));
 }
 export default injectIntl(Expand);

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

@@ -2293,7 +2293,7 @@ const columnLayoutResponsiveRendererStyles = css({
     }
   }
 });
-const rendererAnnotationStyles = css({
+const rendererAnnotationStylesOld = css({
   "& [data-mark-type='annotation'][data-mark-annotation-state='active'] [data-annotation-mark], & [data-annotation-draft-mark][data-annotation-inline-node]": {
     background: `var(--ds-background-accent-yellow-subtler, ${Y75})`,
     borderBottom: `${"var(--ds-border-width-selected, 2px)"} solid ${`var(--ds-border-accent-yellow, ${Y300})`}`,
@@ -2305,6 +2305,21 @@ const rendererAnnotationStyles = css({
     paddingLeft: "var(--ds-space-025, 2px)"
   }
 });
+const rendererAnnotationStyles = css({
+  "& [data-mark-type='annotation'][data-mark-annotation-state='active'] [data-annotation-mark]": {
+    background: "var(--ds-background-accent-yellow-subtlest, #FEF7C8)",
+    borderBottom: `${"var(--ds-border-width-selected, 2px)"} solid ${`var(--ds-border-accent-yellow, ${Y300})`}`,
+    cursor: 'pointer',
+    paddingTop: "var(--ds-space-050, 4px)",
+    paddingRight: "var(--ds-space-025, 2px)",
+    paddingBottom: "var(--ds-space-050, 4px)",
+    paddingLeft: "var(--ds-space-025, 2px)"
+  },
+  "& [data-mark-type='annotation'][data-mark-annotation-state='active'][data-has-focus='true'] [data-annotation-mark]": {
+    background: "var(--ds-background-accent-yellow-subtlest-pressed, #EFDD4E)",
+    boxShadow: `var(--ds-shadow-overlay, ${`1px 2px 3px ${N60A}, -1px 2px 3px ${N60A}`})`
+  }
+});
 const rendererAnnotationStylesCommentHeightFix = css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
   '& [data-annotation-draft-mark][data-annotation-inline-node]': {
@@ -2520,7 +2535,7 @@ export const RendererStyleContainer = props => {
     },
     css: [expValEquals('confluence_ttvc_inline_extensions', 'isEnabled', true) ? baseFontStyle : originalBaseFontLineHeight, 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' && (expValEquals('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? rendererFullWidthStyles : oldRendererFullWidthStyles), (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)) && (expValEquals('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? rendererMaxWidthStyles : oldRendererMaxWidthStyles), 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,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
-    textHighlightPaddingStyles, tasksAndDecisionsStyles, expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) && headingPanelStyles, smartCardStyles, smartCardStylesAvatarFix, editorExperiment('platform_editor_preview_panel_linking_exp', true) && headerSmartCardStyles, smartCardStylesAvatarMarginFix, smartCardStylesAvatarListZeroMarginTop, fg('editor_inline_comments_on_inline_nodes') && rendererAnnotationStyles,
+    textHighlightPaddingStyles, tasksAndDecisionsStyles, expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) && headingPanelStyles, smartCardStyles, smartCardStylesAvatarFix, editorExperiment('platform_editor_preview_panel_linking_exp', true) && headerSmartCardStyles, smartCardStylesAvatarMarginFix, smartCardStylesAvatarListZeroMarginTop, fg('editor_inline_comments_on_inline_nodes') && (expValEquals('confluence_fe_renderer_inline_node_mark_color_fix', 'isEnabled', true) ? rendererAnnotationStyles : rendererAnnotationStylesOld),
     // eslint-disable-next-line @atlaskit/platform/no-preconditioning
     fg('editor_inline_comments_on_inline_nodes') && rendererAnnotationStylesCommentHeightFix, expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? baseOtherStyles : baseOtherStylesDuplicateAnchor, !expValEquals('platform_editor_flex_based_centering', 'isEnabled', true) && extensionCenterAlignLegacyStyles,
     // this should be placed after baseOtherStyles

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.16.0";
+const packageVersion = "127.1.0";
 const setAsQueryContainerStyles = css({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'

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

@@ -87,7 +87,7 @@ export var renderExtension = function renderExtension(content, layout) {
       "data-testid": "extension--wrapper",
       "data-node-type": "extension"
     }, jsx("div", {
-      tabIndex: fg('platform_editor_dec_a11y_fixes') ? options.tabIndex : undefined
+      tabIndex: options.tabIndex
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
       ,
       className: "".concat(RendererCssClassName.EXTENSION_INNER_WRAPPER, " ").concat(overflowContainerClass),
@@ -116,7 +116,7 @@ export var renderExtension = function renderExtension(content, layout) {
       "data-layout": layout,
       "data-local-id": localId
     }, jsx("div", {
-      tabIndex: fg('platform_editor_dec_a11y_fixes') ? options.tabIndex : undefined
+      tabIndex: options.tabIndex
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
       ,
       className: "".concat(RendererCssClassName.EXTENSION_INNER_WRAPPER, " ").concat(overflowContainerClass),
@@ -155,7 +155,7 @@ var Extension = function Extension(props) {
           isTopLevel: path.length < 1,
           handleRef: handleRef,
           shadowClassNames: shadowClassNames,
-          tabIndex: fg('platform_editor_dec_a11y_fixes') ? props.tabIndex : undefined,
+          tabIndex: props.tabIndex,
           rendererAppearance: props.rendererAppearance
         }, undefined, parameters === null || parameters === void 0 ? void 0 : parameters.extensionId, extensionViewportSizes, nodeHeight, localId, undefined, undefined, isInsideOfInlineExtension);
       }
@@ -169,7 +169,7 @@ var Extension = function Extension(props) {
       isTopLevel: path.length < 1,
       handleRef: handleRef,
       shadowClassNames: shadowClassNames,
-      tabIndex: fg('platform_editor_dec_a11y_fixes') ? props.tabIndex : undefined,
+      tabIndex: props.tabIndex,
       rendererAppearance: props.rendererAppearance
     }, undefined, parameters === null || parameters === void 0 ? void 0 : parameters.extensionId, extensionViewportSizes, nodeHeight, localId, undefined, undefined, isInsideOfInlineExtension);
   });

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

@@ -557,7 +557,7 @@ export var TableContainer = /*#__PURE__*/function (_React$Component) {
         rendererAppearance: rendererAppearance,
         allowTableResizing: allowTableResizing,
         allowFixedColumnWidthOption: allowFixedColumnWidthOption
-      }, [children && children[0]]), fg('platform_editor_dec_a11y_fixes') ? /*#__PURE__*/React.createElement(TableWrapper, {
+      }, [children && children[0]]), /*#__PURE__*/React.createElement(TableWrapper, {
         wrapperRef: this.wrapperRef,
         onScroll: this.props.stickyHeaders ? this.onWrapperScrolled : undefined,
         stickyHeaders: stickyHeaders,
@@ -576,25 +576,6 @@ export var TableContainer = /*#__PURE__*/function (_React$Component) {
         allowTableResizing: allowTableResizing,
         isPresentational: isPresentational,
         allowFixedColumnWidthOption: allowFixedColumnWidthOption
-      }, this.grabFirstRowRef(children))) : /*#__PURE__*/React.createElement("div", {
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-        className: TableSharedCssClassName.TABLE_NODE_WRAPPER,
-        ref: this.wrapperRef,
-        onScroll: this.props.stickyHeaders && this.onWrapperScrolled
-      }, /*#__PURE__*/React.createElement(Table, {
-        innerRef: this.tableRef,
-        columnWidths: columnWidths,
-        layout: layout,
-        isNumberColumnEnabled: isNumberColumnEnabled,
-        renderWidth: renderWidth,
-        tableNode: tableNode,
-        rendererAppearance: rendererAppearance,
-        isInsideOfBlockNode: isInsideOfBlockNode,
-        isInsideOfTable: isInsideOfTable,
-        isinsideMultiBodiedExtension: isinsideMultiBodiedExtension,
-        allowTableResizing: allowTableResizing,
-        isPresentational: isPresentational,
-        allowFixedColumnWidthOption: allowFixedColumnWidthOption
       }, this.grabFirstRowRef(children))), isStickyScrollbarEnabled(this.props.rendererAppearance) && /*#__PURE__*/React.createElement("div", {
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
         className: TableSharedCssClassName.TABLE_STICKY_SCROLLBAR_CONTAINER,

package/dist/esm/ui/Expand.js

@@ -285,7 +285,7 @@ function Expand(_ref2) {
   }, jsx(WidthProvider, null, jsx("div", {
     css: clearNextSiblingMarginTopStyle
   }), fg('hot-121622_lazy_load_expand_content') ? hasLoadedChildren || loadBodyContent ? jsx(Suspense, {
-    fallback: jsx("div", null, fg('platform_editor_dec_a11y_fixes') ? intl.formatMessage(expandMessages.loading) : 'Loading...')
+    fallback: jsx("div", null, intl.formatMessage(expandMessages.loading))
   }, jsx(LazyChildren, null, children)) : null : children))));
 }
 export default injectIntl(Expand);

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

@@ -1776,7 +1776,7 @@ var columnLayoutResponsiveRendererStyles = css({
     gap: "var(--ds-space-400, 32px)"
   })
 });
-var rendererAnnotationStyles = css({
+var rendererAnnotationStylesOld = css({
   "& [data-mark-type='annotation'][data-mark-annotation-state='active'] [data-annotation-mark], & [data-annotation-draft-mark][data-annotation-inline-node]": {
     background: "var(--ds-background-accent-yellow-subtler, ".concat(Y75, ")"),
     borderBottom: "var(--ds-border-width-selected, 2px)".concat(" solid ", "var(--ds-border-accent-yellow, ".concat(Y300, ")")),
@@ -1788,6 +1788,21 @@ var rendererAnnotationStyles = css({
     paddingLeft: "var(--ds-space-025, 2px)"
   }
 });
+var rendererAnnotationStyles = css({
+  "& [data-mark-type='annotation'][data-mark-annotation-state='active'] [data-annotation-mark]": {
+    background: "var(--ds-background-accent-yellow-subtlest, #FEF7C8)",
+    borderBottom: "var(--ds-border-width-selected, 2px)".concat(" solid ", "var(--ds-border-accent-yellow, ".concat(Y300, ")")),
+    cursor: 'pointer',
+    paddingTop: "var(--ds-space-050, 4px)",
+    paddingRight: "var(--ds-space-025, 2px)",
+    paddingBottom: "var(--ds-space-050, 4px)",
+    paddingLeft: "var(--ds-space-025, 2px)"
+  },
+  "& [data-mark-type='annotation'][data-mark-annotation-state='active'][data-has-focus='true'] [data-annotation-mark]": {
+    background: "var(--ds-background-accent-yellow-subtlest-pressed, #EFDD4E)",
+    boxShadow: "var(--ds-shadow-overlay, ".concat("1px 2px 3px ".concat(N60A, ", -1px 2px 3px ").concat(N60A), ")")
+  }
+});
 var rendererAnnotationStylesCommentHeightFix = css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
   '& [data-annotation-draft-mark][data-annotation-inline-node]': {
@@ -1970,7 +1985,7 @@ export var RendererStyleContainer = function RendererStyleContainer(props) {
     },
     css: [expValEquals('confluence_ttvc_inline_extensions', 'isEnabled', true) ? baseFontStyle : originalBaseFontLineHeight, 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' && (expValEquals('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? rendererFullWidthStyles : oldRendererFullWidthStyles), (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)) && (expValEquals('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? rendererMaxWidthStyles : oldRendererMaxWidthStyles), 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,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
-    textHighlightPaddingStyles, tasksAndDecisionsStyles, expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) && headingPanelStyles, smartCardStyles, smartCardStylesAvatarFix, editorExperiment('platform_editor_preview_panel_linking_exp', true) && headerSmartCardStyles, smartCardStylesAvatarMarginFix, smartCardStylesAvatarListZeroMarginTop, fg('editor_inline_comments_on_inline_nodes') && rendererAnnotationStyles,
+    textHighlightPaddingStyles, tasksAndDecisionsStyles, expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) && headingPanelStyles, smartCardStyles, smartCardStylesAvatarFix, editorExperiment('platform_editor_preview_panel_linking_exp', true) && headerSmartCardStyles, smartCardStylesAvatarMarginFix, smartCardStylesAvatarListZeroMarginTop, fg('editor_inline_comments_on_inline_nodes') && (expValEquals('confluence_fe_renderer_inline_node_mark_color_fix', 'isEnabled', true) ? rendererAnnotationStyles : rendererAnnotationStylesOld),
     // eslint-disable-next-line @atlaskit/platform/no-preconditioning
     fg('editor_inline_comments_on_inline_nodes') && rendererAnnotationStylesCommentHeightFix, expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? baseOtherStyles : baseOtherStylesDuplicateAnchor, !expValEquals('platform_editor_flex_based_centering', 'isEnabled', true) && extensionCenterAlignLegacyStyles,
     // this should be placed after baseOtherStyles

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.16.0";
+var packageVersion = "127.1.0";
 var setAsQueryContainerStyles = css({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'

package/docs/0-intro.tsx

@@ -12,8 +12,11 @@ This component provides a renderer for ADF documents.
 Use the component in your React app as follows:
 
 ${code`
+import { createRoot } from 'react-dom/client';
 import { ReactRenderer } from '@atlaskit/renderer';
-ReactDOM.render(<ReactRenderer document={DOCUMENT} />, container);
+
+const root = createRoot(container);
+root.render(<ReactRenderer document={DOCUMENT} />);
 `}
 
 ## Example
@@ -102,13 +105,15 @@ You will need to use a transformer to convert your own storage format into the A
 We have provided helper utility to simplify this process:
 
 ${code`
+import { createRoot } from 'react-dom/client';
 import { BitbucketTransformer } from '@atlaskit/editor-bitbucket-transformer';
 import { ReactRenderer, ADFEncoder } from '@atlaskit/renderer';
 
 const adfEncoder = new ADFEncoder(schema => new BitbucketTransformer(schema));
 const document = adfEncoder.encode(DOCUMENT);
 
-ReactDOM.render(<ReactRenderer document={document} />, container);
+const root = createRoot(container);
+root.render(<ReactRenderer document={document} />);
 `}
 
 ## Polyfills
@@ -124,8 +129,11 @@ The props \`truncated\`, \`maxHeight\` and \`fadeOutHeight\` are all optional. \
 and \`fadeOutHeight\` will default to 30px unless defined.
 
 ${code`
+import { createRoot } from 'react-dom/client';
 import { ReactRenderer } from '@atlaskit/renderer';
-ReactDOM.render(<ReactRenderer document={DOCUMENT} truncated={true} maxHeight={70} fadeOutHeight={30} />, container);
+
+const root = createRoot(container);
+root.render(<ReactRenderer document={DOCUMENT} truncated={true} maxHeight={70} fadeOutHeight={30} />);
 `}
 
 ${(

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/renderer",
-	"version": "127.0.0",
+	"version": "127.2.0",
 	"description": "Renderer component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -57,7 +57,7 @@
 		"@atlaskit/status": "^3.1.0",
 		"@atlaskit/task-decision": "^19.3.0",
 		"@atlaskit/theme": "^22.0.0",
-		"@atlaskit/tmp-editor-statsig": "^34.0.0",
+		"@atlaskit/tmp-editor-statsig": "^34.4.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.28.0",
+		"@atlaskit/editor-common": "^111.30.0",
 		"@atlaskit/link-provider": "^4.2.0",
 		"@atlaskit/media-core": "^37.0.0",
 		"react": "^18.2.0",
@@ -92,7 +92,7 @@
 		"@atlaskit/navigation-next": "patch:@atlaskit/navigation-next@npm%3A9.0.17#~/.yarn/patches/@atlaskit-navigation-next-npm-9.0.17-958ca0ab9d.patch",
 		"@atlaskit/profilecard": "^24.40.0",
 		"@atlaskit/util-data-test": "^18.5.0",
-		"@atlassian/a11y-jest-testing": "^0.11.0",
+		"@atlassian/a11y-jest-testing": "^0.10.0",
 		"@atlassian/feature-flags-test-utils": "^1.0.0",
 		"@atlassian/testing-library": "^0.4.0",
 		"@testing-library/react": "^16.3.0",
@@ -226,9 +226,6 @@
 		"platform_fix_macro_renders_in_layouts": {
 			"type": "boolean"
 		},
-		"platform_editor_dec_a11y_fixes": {
-			"type": "boolean"
-		},
 		"platform_editor_fix_missing_task_id": {
 			"type": "boolean"
 		},