@atlaskit/renderer 114.11.0 → 114.11.2

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

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@emotion/react");
@@ -18,11 +17,8 @@ var _emojiEditorEmoji = _interopRequireDefault(require("@atlaskit/icon/core/migr
 var _emoji = _interopRequireDefault(require("./emoji"));
 var _icons = require("@atlaskit/editor-common/icons");
 var _consts = require("@atlaskit/editor-shared-styles/consts");
-var _platformFeatureFlagsReact = require("@atlaskit/platform-feature-flags-react");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
-var _templateObject, _templateObject2;
-var _excluded = ["backgroundColor", "hasIcon"],
-  _excluded2 = ["backgroundColor", "hasIcon"];
+var _excluded = ["backgroundColor", "hasIcon"];
 /**
  * @jsxRuntime classic
  * @jsx jsx
@@ -167,29 +163,10 @@ var panelCustomBackground = (0, _react2.css)({
     }
   }
 });
-var PanelStyledOld = function PanelStyledOld(_ref) {
+var PanelStyled = function PanelStyled(_ref) {
   var backgroundColor = _ref.backgroundColor,
     hasIcon = _ref.hasIcon,
     props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- nested css mixins are violations
-  var styles = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t\t&.", " {\n\t\t\t", "\n\n\t\t\t&[data-panel-type=", "] {\n\t\t\t\t", "\n\t\t\t}\n\t\t}\n\t"])), _panel.PanelSharedCssClassName.prefix, (0, _panel.panelSharedStylesWithoutPrefix)(), _adfSchema.PanelType.CUSTOM, hasIcon ? '' : 'padding-left: 12px;padding-right: 12px;');
-  if (props['data-panel-type'] === _adfSchema.PanelType.CUSTOM && backgroundColor) {
-    // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- nested css mixins are violations
-    styles = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t&.", " {\n\t\t\t\t", "\n\t\t\t}\n\n\t\t\t&[data-panel-type=", "] {\n\t\t\t\tbackground-color: ", ";\n\t\t\t\t", "\n\t\t\t}\n\t\t"])), _panel.PanelSharedCssClassName.prefix, (0, _panel.panelSharedStylesWithoutPrefix)(), _adfSchema.PanelType.CUSTOM, (0, _editorPalette.hexToEditorBackgroundPaletteColor)(backgroundColor) || backgroundColor, hasIcon ? '' : 'padding-left: 12px;padding-right: 12px;');
-  }
-  return (
-    // eslint-disable-next-line
-    // Ignored via go/ees005
-    // eslint-disable-next-line react/jsx-props-no-spreading, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
-    (0, _react2.jsx)("div", (0, _extends2.default)({
-      css: styles
-    }, props), props.children)
-  );
-};
-var PanelStyledNew = function PanelStyledNew(_ref2) {
-  var backgroundColor = _ref2.backgroundColor,
-    hasIcon = _ref2.hasIcon,
-    props = (0, _objectWithoutProperties2.default)(_ref2, _excluded2);
   var customBackgroundColor = backgroundColor ? (0, _editorPalette.hexToEditorBackgroundPaletteColor)(backgroundColor) || backgroundColor : undefined;
   return (0, _react2.jsx)("div", (0, _extends2.default)({
     style:
@@ -202,7 +179,6 @@ var PanelStyledNew = function PanelStyledNew(_ref2) {
     // eslint-disable-next-line react/jsx-props-no-spreading
   }, props), props.children);
 };
-var PanelStyled = (0, _platformFeatureFlagsReact.componentWithFG)('platform_editor_emotion_refactor_renderer', PanelStyledNew, PanelStyledOld);
 PanelStyled.displayName = 'PanelStyled';
 var panelIcons = {
   info: _icons.PanelInfoIcon,

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

@@ -17,7 +17,6 @@ var _colors = require("@atlaskit/theme/colors");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _table = require("./table");
 var _injectProps = require("../../utils/inject-props");
-var _platformFeatureFlagsReact = require("@atlaskit/platform-feature-flags-react");
 /**
  * @jsxRuntime classic
  * @jsx jsx
@@ -42,7 +41,7 @@ var modeSpecficStyles = {
 
 // refactored based on fixedTableDivStaticStyles
 // TODO: DSP-4123 - Quality ticket
-var fixedTableDivStaticStylesNew = (0, _react2.css)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({
+var fixedTableDivStaticStyles = (0, _react2.css)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({
   zIndex: 'var(--ak-renderer-sticky-header-zindex)'
 }, "& .".concat(_styles.TableSharedCssClassName.TABLE_CONTAINER, ", & .").concat(_styles.TableSharedCssClassName.TABLE_STICKY_WRAPPER, " > table"), {
   marginTop: 0,
@@ -60,59 +59,7 @@ var fixedTableDivStaticStylesNew = (0, _react2.css)((0, _defineProperty2.default
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   zIndex: 'var(--ak-renderer-sticky-header-zindex)'
 }));
-
-// TODO: DSP-4123 - Quality ticket
-var fixedTableDivStaticStyles = function fixedTableDivStaticStyles(top, width, allowTableResizing) {
-  var stickyHeaderZIndex;
-  if (allowTableResizing) {
-    stickyHeaderZIndex = 13;
-  } else {
-    stickyHeaderZIndex = _editorSharedStyles.akEditorStickyHeaderZIndex;
-  }
-
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  return (0, _react2.css)(typeof top === 'number' && "top: ".concat(top, "px;"), (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    width: "".concat(width, "px"),
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    zIndex: stickyHeaderZIndex
-  }, "& .".concat(_styles.TableSharedCssClassName.TABLE_CONTAINER, ", & .").concat(_styles.TableSharedCssClassName.TABLE_STICKY_WRAPPER, " > table"), {
-    marginTop: 0,
-    marginBottom: 0,
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-    tr: {
-      background: "var(--ds-surface, white)"
-    }
-  }), "borderTop", "".concat(tableStickyPadding, "px solid ", "var(--ds-surface, white)")), "background", "var(--ds-surface-overlay, white)"), "boxShadow", "0 6px 4px -4px ".concat("var(--ds-shadow-overflow-perimeter, ".concat(_colors.N40A, ")"))), "div[data-expanded='false'] &", {
-    display: 'none'
-  }), "& .".concat(_styles.TableSharedCssClassName.TABLE_CONTAINER, ".is-sticky.right-shadow::after, & .").concat(_styles.TableSharedCssClassName.TABLE_CONTAINER, ".is-sticky.left-shadow::before"), {
-    top: '0px',
-    height: '100%'
-  }), "&.fixed-table-div-custom-table-resizing[mode='stick']", {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    zIndex: stickyHeaderZIndex
-  }));
-};
-var FixedTableDivOld = function FixedTableDivOld(props) {
-  var top = props.top,
-    wrapperWidth = props.wrapperWidth,
-    mode = props.mode,
-    allowTableResizing = props.allowTableResizing;
-  var fixedTableCss = [fixedTableDivStaticStyles(top, wrapperWidth, allowTableResizing), modeSpecficStyles === null || modeSpecficStyles === void 0 ? void 0 : modeSpecficStyles[mode]];
-  var attrs = {
-    mode: mode
-  };
-  return (0, _react2.jsx)("div", (0, _extends2.default)({}, attrs, {
-    "data-testid": "sticky-table-fixed"
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-    ,
-    className: allowTableResizing ? 'fixed-table-div-custom-table-resizing' : ''
-    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
-    ,
-    css: fixedTableCss
-  }), props.children);
-};
-var FixedTableDivNew = function FixedTableDivNew(props) {
+var FixedTableDiv = function FixedTableDiv(props) {
   var top = props.top,
     wrapperWidth = props.wrapperWidth,
     mode = props.mode,
@@ -131,7 +78,7 @@ var FixedTableDivNew = function FixedTableDivNew(props) {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     ,
     className: allowTableResizing ? 'fixed-table-div-custom-table-resizing' : '',
-    css: [fixedTableDivStaticStylesNew, modeSpecficStyles === null || modeSpecficStyles === void 0 ? void 0 : modeSpecficStyles[mode]],
+    css: [fixedTableDivStaticStyles, modeSpecficStyles === null || modeSpecficStyles === void 0 ? void 0 : modeSpecficStyles[mode]],
     style: {
       '--ak-renderer-sticky-header-zindex': stickyHeaderZIndex,
       width: "".concat(wrapperWidth, "px"),
@@ -139,7 +86,6 @@ var FixedTableDivNew = function FixedTableDivNew(props) {
     }
   }), props.children);
 };
-var FixedTableDiv = (0, _platformFeatureFlagsReact.componentWithFG)('platform_editor_emotion_refactor_renderer', FixedTableDivNew, FixedTableDivOld);
 var StickyTable = exports.StickyTable = function StickyTable(_ref) {
   var top = _ref.top,
     left = _ref.left,

package/dist/cjs/ui/Expand.js

@@ -9,7 +9,6 @@ exports.default = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = require("@emotion/react");
 var _react2 = _interopRequireWildcard(require("react"));
 var _analytics = require("@atlaskit/editor-common/analytics");
@@ -22,10 +21,7 @@ var _uniqueId2 = _interopRequireDefault(require("lodash/uniqueId"));
 var _reactIntlNext = require("react-intl-next");
 var _events = require("../analytics/events");
 var _activeHeaderIdProvider = require("./active-header-id-provider");
-var _platformFeatureFlagsReact = require("@atlaskit/platform-feature-flags-react");
-var _excluded = ["expanded"],
-  _excluded2 = ["expanded"];
-var _templateObject, _templateObject2, _templateObject3;
+var _excluded = ["expanded"];
 /**
  * @jsxRuntime classic
  * @jsx jsx
@@ -133,51 +129,23 @@ var contentContainerStylesNotExpanded = (0, _react.css)({
     userSelect: 'none'
   }
 });
-var ContainerOld = function ContainerOld(props) {
-  var paddingBottom = props.expanded ? "var(--ds-space-100, 8px)" : "var(--ds-space-0, 0px)";
-  var sharedContainerStyles = _ui.sharedExpandStyles.containerStyles(props);
-
-  // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
-  var styles = function styles() {
-    return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t\t", "\n\t\tpadding: 0;\n\t\tpadding-bottom: ", ";\n\t"])), sharedContainerStyles(), paddingBottom);
-  };
-  return (
-    // Ignored via go/ees005
-    // eslint-disable-next-line react/jsx-props-no-spreading, @atlaskit/design-system/consistent-css-prop-usage
-    (0, _react.jsx)("div", (0, _extends2.default)({
-      css: styles
-    }, props), props.children)
-  );
-};
-var ContainerNew = function ContainerNew(props) {
+var clearNextSiblingMarginTopStyle = (0, _react.css)({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '& + *': {
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview, @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
+    marginTop: '0 !important'
+  }
+});
+var Container = function Container(props) {
   return (0, _react.jsx)("div", (0, _extends2.default)({
     css: [containerStyles, props['data-node-type'] === 'expand' && containerStylesDataNodeTypeExpand, props.expanded && containerStylesExpanded, props.focused && containerStylesFocused]
     // Ignored via go/ees005
     // eslint-disable-next-line react/jsx-props-no-spreading
   }, props), props.children);
 };
-var Container = (0, _platformFeatureFlagsReact.componentWithFG)('platform_editor_emotion_refactor_renderer', ContainerNew, ContainerOld);
-var TitleContainerOld = function TitleContainerOld(props) {
-  var paddingBottom = !props.expanded ? "var(--ds-space-100, 8px)" : "var(--ds-space-0, 0px)";
-
-  // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
-  var styles = function styles() {
-    return (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n\t\t", "\n\t\tpadding: ", ";\n\t\tpadding-bottom: ", ";\n\t"])), _ui.sharedExpandStyles.titleContainerStyles(), "var(--ds-space-100, 8px)", paddingBottom);
-  };
+var TitleContainer = function TitleContainer(props) {
   var expanded = props.expanded,
     buttonProps = (0, _objectWithoutProperties2.default)(props, _excluded);
-  return (
-    // Ignored via go/ees005
-    // eslint-disable-next-line react/jsx-props-no-spreading, @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/design-system/no-html-button
-    (0, _react.jsx)("button", (0, _extends2.default)({
-      type: "button",
-      css: styles
-    }, buttonProps), props.children)
-  );
-};
-var TitleContainerNew = function TitleContainerNew(props) {
-  var expanded = props.expanded,
-    buttonProps = (0, _objectWithoutProperties2.default)(props, _excluded2);
   return (
     // eslint-disable-next-line @atlaskit/design-system/no-html-button
     (0, _react.jsx)("button", (0, _extends2.default)({
@@ -188,32 +156,14 @@ var TitleContainerNew = function TitleContainerNew(props) {
     }, buttonProps), props.children)
   );
 };
-var TitleContainer = (0, _platformFeatureFlagsReact.componentWithFG)('platform_editor_emotion_refactor_renderer', TitleContainerNew, TitleContainerOld);
 TitleContainer.displayName = 'TitleContainerButton';
-var ContentContainerOld = function ContentContainerOld(props) {
-  var sharedContentStyles = _ui.sharedExpandStyles.contentStyles(props);
-  var visibility = props.expanded ? 'visible' : 'hidden';
-
-  // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression  -- needs manual remediation
-  var styles = function styles() {
-    return (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n\t\t", ";\n\t\tpadding-right: ", ";\n\t\tpadding-left: ", ";\n\t\tvisibility: ", ";\n\t"])), sharedContentStyles(), "var(--ds-space-200, 16px)", "var(--ds-space-400, 32px)", visibility);
-  };
-  return (
-    // Ignored via go/ees005
-    // eslint-disable-next-line react/jsx-props-no-spreading, @atlaskit/design-system/consistent-css-prop-usage
-    (0, _react.jsx)("div", (0, _extends2.default)({
-      css: styles
-    }, props), props.children)
-  );
-};
-var ContentContainerNew = function ContentContainerNew(props) {
+var ContentContainer = function ContentContainer(props) {
   return (0, _react.jsx)("div", (0, _extends2.default)({
     css: [contentContainerStyles, props.expanded && contentContainerStylesExpanded, !props.expanded && contentContainerStylesNotExpanded]
     // Ignored via go/ees005
     // eslint-disable-next-line react/jsx-props-no-spreading
   }, props), props.children);
 };
-var ContentContainer = (0, _platformFeatureFlagsReact.componentWithFG)('platform_editor_emotion_refactor_renderer', ContentContainerNew, ContentContainerOld);
 function fireExpandToggleAnalytics(nodeType, expanded, fireAnalyticsEvent) {
   if (!fireAnalyticsEvent) {
     return;
@@ -310,7 +260,7 @@ function Expand(_ref) {
   }, (0, _react.jsx)("div", {
     className: "".concat(nodeType, "-content-wrapper")
   }, (0, _react.jsx)(_ui.WidthProvider, null, (0, _react.jsx)("div", {
-    css: _ui.clearNextSiblingMarginTopStyle
+    css: clearNextSiblingMarginTopStyle
   }), children))));
 }
 var _default = exports.default = (0, _reactIntlNext.injectIntl)(Expand);

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

@@ -239,7 +239,7 @@ var blockquoteSharedStyles = (0, _react.css)({
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
     '> .extensionView-content-wrap:last-child': {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-      display: "".concat((0, _experiments.editorExperiment)('platform_editor_nested_non_bodied_macros', 'test')) ? 'block' : 'inline-block'
+      display: 'block'
     }
   }
 });
@@ -1356,58 +1356,35 @@ var RendererStyleContainer = exports.RendererStyleContainer = function RendererS
     appearance = props.appearance,
     allowNestedHeaderLinks = props.allowNestedHeaderLinks,
     allowColumnSorting = props.allowColumnSorting,
-    allowAnnotations = props.allowAnnotations,
-    allowTableResizing = props.allowTableResizing,
     useBlockRenderForCodeBlock = props.useBlockRenderForCodeBlock,
     children = props.children,
     innerRef = props.innerRef,
     testId = props.testId;
   var isAdvancedLayoutsOn = (0, _experiments.editorExperiment)('advanced_layouts', true);
-  if ((0, _platformFeatureFlags.fg)('platform_editor_emotion_refactor_renderer')) {
-    return (
-      // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions, @atlassian/a11y/interactive-element-not-keyboard-focusable
-      (0, _react.jsx)("div", {
-        ref: innerRef,
-        onClick: onClick,
-        onMouseDown: onMouseDown,
-        style: {
-          '--ak-renderer-base-font-size': "".concat((0, _getBaseFontSize.getBaseFontSize)(appearance), "px"),
-          '--ak-renderer-editor-font-heading-h1': "".concat((0, _ugcTokens.editorUGCToken)('editor.font.heading.h1')),
-          '--ak-renderer-editor-font-heading-h2': "".concat((0, _ugcTokens.editorUGCToken)('editor.font.heading.h2')),
-          '--ak-renderer-editor-font-heading-h3': "".concat((0, _ugcTokens.editorUGCToken)('editor.font.heading.h3')),
-          '--ak-renderer-editor-font-heading-h4': "".concat((0, _ugcTokens.editorUGCToken)('editor.font.heading.h4')),
-          '--ak-renderer-editor-font-heading-h5': "".concat((0, _ugcTokens.editorUGCToken)('editor.font.heading.h5')),
-          '--ak-renderer-editor-font-heading-h6': "".concat((0, _ugcTokens.editorUGCToken)('editor.font.heading.h6')),
-          '--ak-renderer-editor-font-normal-text': "".concat((0, _ugcTokens.editorUGCToken)('editor.font.body'))
-        },
-        css: [baseStyles, appearance === 'full-page' && rendererFullPageStyles, appearance === 'full-width' && rendererFullWidthStyles, !(0, _table.isTableResizingEnabled)(appearance) && rendererFullWidthStylesForTableResizing, telepointerStyles, whitespaceSharedStyles, blockquoteSharedStyles, (0, _platformFeatureFlags.fg)('platform_editor_typography_ugc') ? headingsSharedStylesWithEditorUGC : headingsSharedStyles, headingWithAlignmentStyles, ruleSharedStyles, (0, _platformFeatureFlags.fg)('platform_editor_typography_ugc') ? paragraphSharedStylesWithEditorUGC : paragraphSharedStyles, listsSharedStyles, _browser.browser.gecko && listsSharedStylesForGekko, indentationSharedStyles, blockMarksSharedStyles, codeMarkSharedStyles, shadowSharedStyle, dateSharedStyle, textColorStyles, backgroundColorStyles, tasksAndDecisionsStyles, smartCardStyles, (0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1') && smartCardStylesAvatarFix,
-        // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
-        (0, _platformFeatureFlags.fg)('editor_inline_comments_on_inline_nodes') && rendererAnnotationStyles,
-        // eslint-disable-next-line @atlaskit/platform/no-preconditioning, @atlaskit/platform/ensure-feature-flag-prefix
-        (0, _platformFeatureFlags.fg)('editor_inline_comments_on_inline_nodes') &&
-        // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
-        (0, _platformFeatureFlags.fg)('annotations_align_editor_and_renderer_styles') && rendererAnnotationStylesCommentHeightFix, baseOtherStyles, allowNestedHeaderLinks && alignedHeadingAnchorStyle, mediaSingleSharedStyle, tableSharedStyle, tableRendererHeaderStylesForTableCellOnly, isBackgroundClipBrowserFixNeeded() && tableStylesBackGroundClipForGeckoForTableCellOnly, (0, _platformFeatureFlags.fg)('platform_editor_nested_dnd_styles_changes') ? firstNodeWithNotMarginTopWithNestedDnD : firstNodeWithNotMarginTop, rendererTableStyles, (0, _table.isStickyScrollbarEnabled)(appearance) && stickyScrollbarStyles, rendererTableHeaderEqualHeightStylesForTableCellOnly, allowColumnSorting && rendererTableSortableColumnStyles, allowColumnSorting && allowNestedHeaderLinks && rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinks, (0, _platformFeatureFlags.fg)('platform_editor_tables_numbered_column_correction') ? rendererTableColumnStyles : rendererTableColumnStylesOld, stickyHeaderStyles, codeBlockAndLayoutStyles, columnLayoutSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveRendererStyles, isAdvancedLayoutsOn && layoutSectionForAdvancedLayoutsStyles, !useBlockRenderForCodeBlock && gridRenderForCodeBlockStyles, _browser.browser.safari && codeBlockInListSafariFixStyles],
-        "data-testid": testId
-      }, children)
-    );
-  }
   return (
     // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions, @atlassian/a11y/interactive-element-not-keyboard-focusable
     (0, _react.jsx)("div", {
       ref: innerRef,
       onClick: onClick,
-      onMouseDown: onMouseDown
-      // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-      ,
-      css: (0, _style.rendererStyles)({
-        appearance: appearance,
-        allowNestedHeaderLinks: allowNestedHeaderLinks,
-        allowColumnSorting: !!allowColumnSorting,
-        useBlockRenderForCodeBlock: useBlockRenderForCodeBlock,
-        allowAnnotations: allowAnnotations,
-        allowTableResizing: allowTableResizing
-      }),
+      onMouseDown: onMouseDown,
+      style: {
+        '--ak-renderer-base-font-size': "".concat((0, _getBaseFontSize.getBaseFontSize)(appearance), "px"),
+        '--ak-renderer-editor-font-heading-h1': "".concat((0, _ugcTokens.editorUGCToken)('editor.font.heading.h1')),
+        '--ak-renderer-editor-font-heading-h2': "".concat((0, _ugcTokens.editorUGCToken)('editor.font.heading.h2')),
+        '--ak-renderer-editor-font-heading-h3': "".concat((0, _ugcTokens.editorUGCToken)('editor.font.heading.h3')),
+        '--ak-renderer-editor-font-heading-h4': "".concat((0, _ugcTokens.editorUGCToken)('editor.font.heading.h4')),
+        '--ak-renderer-editor-font-heading-h5': "".concat((0, _ugcTokens.editorUGCToken)('editor.font.heading.h5')),
+        '--ak-renderer-editor-font-heading-h6': "".concat((0, _ugcTokens.editorUGCToken)('editor.font.heading.h6')),
+        '--ak-renderer-editor-font-normal-text': "".concat((0, _ugcTokens.editorUGCToken)('editor.font.body'))
+      },
+      css: [baseStyles, appearance === 'full-page' && rendererFullPageStyles, appearance === 'full-width' && rendererFullWidthStyles, appearance === 'full-width' && !(0, _table.isTableResizingEnabled)(appearance) && rendererFullWidthStylesForTableResizing, telepointerStyles, whitespaceSharedStyles, blockquoteSharedStyles, (0, _platformFeatureFlags.fg)('platform_editor_typography_ugc') ? headingsSharedStylesWithEditorUGC : headingsSharedStyles, headingWithAlignmentStyles, ruleSharedStyles, (0, _platformFeatureFlags.fg)('platform_editor_typography_ugc') ? paragraphSharedStylesWithEditorUGC : paragraphSharedStyles, listsSharedStyles, _browser.browser.gecko && listsSharedStylesForGekko, indentationSharedStyles, blockMarksSharedStyles, codeMarkSharedStyles, shadowSharedStyle, dateSharedStyle, textColorStyles, backgroundColorStyles, tasksAndDecisionsStyles, smartCardStyles, (0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1') && smartCardStylesAvatarFix,
+      // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
+      (0, _platformFeatureFlags.fg)('editor_inline_comments_on_inline_nodes') && rendererAnnotationStyles,
+      // eslint-disable-next-line @atlaskit/platform/no-preconditioning, @atlaskit/platform/ensure-feature-flag-prefix
+      (0, _platformFeatureFlags.fg)('editor_inline_comments_on_inline_nodes') &&
+      // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
+      (0, _platformFeatureFlags.fg)('annotations_align_editor_and_renderer_styles') && rendererAnnotationStylesCommentHeightFix, baseOtherStyles, allowNestedHeaderLinks && alignedHeadingAnchorStyle, mediaSingleSharedStyle, tableSharedStyle, tableRendererHeaderStylesForTableCellOnly, isBackgroundClipBrowserFixNeeded() && tableStylesBackGroundClipForGeckoForTableCellOnly, (0, _platformFeatureFlags.fg)('platform_editor_nested_dnd_styles_changes') ? firstNodeWithNotMarginTopWithNestedDnD : firstNodeWithNotMarginTop, rendererTableStyles, (0, _table.isStickyScrollbarEnabled)(appearance) && stickyScrollbarStyles, rendererTableHeaderEqualHeightStylesForTableCellOnly, allowColumnSorting && rendererTableSortableColumnStyles, allowColumnSorting && allowNestedHeaderLinks && rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinks, (0, _platformFeatureFlags.fg)('platform_editor_tables_numbered_column_correction') ? rendererTableColumnStyles : rendererTableColumnStylesOld, stickyHeaderStyles, codeBlockAndLayoutStyles, columnLayoutSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveRendererStyles, isAdvancedLayoutsOn && layoutSectionForAdvancedLayoutsStyles, !useBlockRenderForCodeBlock && gridRenderForCodeBlockStyles, _browser.browser.safari && codeBlockInListSafariFixStyles],
       "data-testid": testId
-    }, props.children)
+    }, children)
   );
 };

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

@@ -59,7 +59,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 var NORMAL_SEVERITY_THRESHOLD = exports.NORMAL_SEVERITY_THRESHOLD = 2000;
 var DEGRADED_SEVERITY_THRESHOLD = exports.DEGRADED_SEVERITY_THRESHOLD = 3000;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "114.11.0";
+var packageVersion = "114.11.2";
 var setAsQueryContainerStyles = (0, _react2.css)({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size',
@@ -369,8 +369,11 @@ var RendererFunctionalComponent = exports.RendererFunctionalComponent = function
     // having a dependency array means we run stopMeasure twice per render
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
+  var rendererContext = (0, _react.useMemo)(function () {
+    return createRendererContext(props.featureFlags, props.isTopLevelRenderer);
+  }, [props.featureFlags, props.isTopLevelRenderer, createRendererContext]);
   try {
-    var _createRendererContex2, _props$media;
+    var _rendererContext$feat, _props$media;
     var schema = getSchema(props.schema, props.adfStage);
     var _renderDocument = (0, _.renderDocument)(props.shouldRemoveEmptySpaceAroundContent ? (0, _rendererHelper.removeEmptySpaceAroundContent)(props.document) : props.document, serializer, schema, props.adfStage, props.useSpecBasedValidator, id, _fireAnalyticsEvent, props.unsupportedContentLevelsTracking, props.appearance, props.includeNodesCountInStats, props.skipValidation),
       result = _renderDocument.result,
@@ -380,7 +383,7 @@ var RendererFunctionalComponent = exports.RendererFunctionalComponent = function
       props.onComplete(stat);
     }
     var rendererOutput = (0, _react2.jsx)(_rendererContext.RendererContextProvider, {
-      value: createRendererContext(props.featureFlags, props.isTopLevelRenderer)
+      value: rendererContext
     }, (0, _react2.jsx)(_activeHeaderIdProvider.ActiveHeaderIdProvider, {
       value: (0, _links.getActiveHeadingId)(props.allowHeadingAnchorLinks)
     }, (0, _react2.jsx)(_analyticsContext.default.Provider, {
@@ -400,7 +403,7 @@ var RendererFunctionalComponent = exports.RendererFunctionalComponent = function
       allowWrapCodeBlock: props.allowWrapCodeBlock,
       allowCustomPanels: props.allowCustomPanels,
       allowPlaceholderText: props.allowPlaceholderText,
-      useBlockRenderForCodeBlock: (_createRendererContex2 = createRendererContext(props.featureFlags, props.isTopLevelRenderer).featureFlags.useBlockRenderForCodeBlock) !== null && _createRendererContex2 !== void 0 ? _createRendererContex2 : true,
+      useBlockRenderForCodeBlock: (_rendererContext$feat = rendererContext.featureFlags.useBlockRenderForCodeBlock) !== null && _rendererContext$feat !== void 0 ? _rendererContext$feat : true,
       addTelepointer: props.addTelepointer,
       innerRef: editorRef,
       onClick: function onClick(event) {
@@ -409,7 +412,7 @@ var RendererFunctionalComponent = exports.RendererFunctionalComponent = function
       onMouseDown: onMouseDownEditView,
       ssr: (_props$media = props.media) === null || _props$media === void 0 ? void 0 : _props$media.ssr,
       isInsideOfInlineExtension: props.isInsideOfInlineExtension,
-      isTopLevelRenderer: createRendererContext(props.featureFlags, props.isTopLevelRenderer).isTopLevelRenderer,
+      isTopLevelRenderer: rendererContext.isTopLevelRenderer,
       shouldRemoveEmptySpaceAroundContent: props.shouldRemoveEmptySpaceAroundContent
     }, props.enableSsrInlineScripts || props.noOpSSRInlineScript ? (0, _react2.jsx)(_breakoutSsr.BreakoutSSRInlineScript, {
       noOpSSRInlineScript: Boolean(props.noOpSSRInlineScript)
@@ -424,7 +427,7 @@ var RendererFunctionalComponent = exports.RendererFunctionalComponent = function
     }, rendererOutput) : rendererOutput;
     return (0, _react2.jsx)(_react.Fragment, null, rendererResult);
   } catch (e) {
-    var _createRendererContex3;
+    var _rendererContext$feat2;
     if (props.onError) {
       props.onError(e);
     }
@@ -436,15 +439,16 @@ var RendererFunctionalComponent = exports.RendererFunctionalComponent = function
       allowPlaceholderText: props.allowPlaceholderText,
       allowColumnSorting: props.allowColumnSorting,
       allowNestedHeaderLinks: (0, _links.isNestedHeaderLinksEnabled)(props.allowHeadingAnchorLinks),
-      useBlockRenderForCodeBlock: (_createRendererContex3 = createRendererContext(props.featureFlags, props.isTopLevelRenderer).featureFlags.useBlockRenderForCodeBlock) !== null && _createRendererContex3 !== void 0 ? _createRendererContex3 : true,
+      useBlockRenderForCodeBlock: (_rendererContext$feat2 = rendererContext.featureFlags.useBlockRenderForCodeBlock) !== null && _rendererContext$feat2 !== void 0 ? _rendererContext$feat2 : true,
       addTelepointer: props.addTelepointer,
       onClick: function onClick(event) {
         return handleWrapperOnClick(event, props, mouseDownSelection);
       },
-      isTopLevelRenderer: createRendererContext(props.featureFlags, props.isTopLevelRenderer).isTopLevelRenderer
+      isTopLevelRenderer: rendererContext.isTopLevelRenderer
     }, (0, _react2.jsx)(_ui.UnsupportedBlock, null));
   }
 };
+var RendererFunctionalComponentMemoized = /*#__PURE__*/_react.default.memo(RendererFunctionalComponent);
 function Renderer(props) {
   var _React$useContext = _react.default.useContext(_annotations.AnnotationsPositionContext),
     startPos = _React$useContext.startPos;
@@ -452,7 +456,8 @@ function Renderer(props) {
     isTopLevelRenderer = _useRendererContext.isTopLevelRenderer;
   var _ref = (0, _react.useContext)(_ValidationContext.ValidationContext) || {},
     skipValidation = _ref.skipValidation;
-  return (0, _react2.jsx)(RendererFunctionalComponent
+  var RendererComponent = (0, _platformFeatureFlags.fg)('cc_perf_reduce_rerenders') ? RendererFunctionalComponentMemoized : RendererFunctionalComponent;
+  return (0, _react2.jsx)(RendererComponent
   // Ignored via go/ees005
   // eslint-disable-next-line react/jsx-props-no-spreading
   , (0, _extends2.default)({}, props, {