@atlaskit/renderer 114.11.1 → 114.12.0

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

@@ -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/breakout-ssr.js

@@ -14,7 +14,6 @@ var _style = require("./style");
 /**
  * Inline Script that updates breakout node width on client side,
  * before main JavaScript bundle is ready.
- *
  * More info: https://product-fabric.atlassian.net/wiki/spaces/E/pages/1216218119/Renderer+SSR+for+Breakout+Nodes
  */
 function BreakoutSSRInlineScript(_ref) {
@@ -34,26 +33,25 @@ function BreakoutSSRInlineScript(_ref) {
     }
   }
   var id = Math.floor(Math.random() * (9999999999 - 9999 + 1)) + 9999;
-  var context = createBreakoutInlineScript(id);
   return /*#__PURE__*/_react.default.createElement("script", {
     "data-breakout-script-id": id
     // To investigate if we can replace this.
     // eslint-disable-next-line react/no-danger
     ,
     dangerouslySetInnerHTML: {
-      __html: context
+      __html: (0, _platformFeatureFlags.fg)('platform-ssr-table-resize') ? createBreakoutInlineScript(id, true) : createBreakoutInlineScript(id)
     },
     "data-testid": "breakout-ssr-inline-script"
   });
 }
-function createBreakoutInlineScript(id) {
-  return "\n\t (function(window){\n\t\tif(typeof window !== 'undefined' && window.__RENDERER_BYPASS_BREAKOUT_SSR__) {\n\t\t\treturn;\n\t\t}\n    ".concat(breakoutInlineScriptContext, ";\n    (").concat(applyBreakoutAfterSSR.toString(), ")(\"").concat(id, "\", breakoutConsts, ").concat(Boolean((0, _platformFeatureFlags.fg)('platform-fix-table-ssr-resizing')), ");\n  })(window);\n");
+function createBreakoutInlineScript(id, optionalFlagArg) {
+  return "\n\t (function(window){\n\t\tif(typeof window !== 'undefined' && window.__RENDERER_BYPASS_BREAKOUT_SSR__) {\n\t\t\treturn;\n\t\t}\n    ".concat(breakoutInlineScriptContext, ";\n    (").concat(applyBreakoutAfterSSR.toString(), ")(\"").concat(id, "\", breakoutConsts, ").concat(optionalFlagArg !== null && optionalFlagArg !== void 0 ? optionalFlagArg : false, ");\n  })(window);\n");
 }
 var breakoutInlineScriptContext = exports.breakoutInlineScriptContext = "\n  var breakoutConsts = ".concat(JSON.stringify(_utils.breakoutConsts), ";\n  breakoutConsts.mapBreakpointToLayoutMaxWidth = ").concat(_utils.breakoutConsts.mapBreakpointToLayoutMaxWidth.toString(), ";\n  breakoutConsts.getBreakpoint = ").concat(_utils.breakoutConsts.getBreakpoint.toString(), ";\n  breakoutConsts.calcBreakoutWidth = ").concat(_utils.breakoutConsts.calcBreakoutWidth.toString(), ";\n  breakoutConsts.calcBreakoutWithCustomWidth = ").concat(_utils.breakoutConsts.calcBreakoutWithCustomWidth.toString(), ";\n  breakoutConsts.calcLineLength = ").concat(_utils.breakoutConsts.calcLineLength.toString(), ";\n  breakoutConsts.calcWideWidth = ").concat(_utils.breakoutConsts.calcWideWidth.toString(), ";\n  breakoutConsts.FullPagePadding = ").concat(_style.FullPagePadding.toString(), ";\n");
 
 // Ignored via go/ees005
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-function applyBreakoutAfterSSR(id, breakoutConsts, shouldFixTableResizing) {
+function applyBreakoutAfterSSR(id, breakoutConsts, isFeatureFlagEnabled) {
   var MEDIA_NODE_TYPE = 'mediaSingle';
   var WIDE_LAYOUT_MODES = ['full-width', 'wide', 'custom'];
   function findUp(element, condition) {
@@ -67,7 +65,7 @@ function applyBreakoutAfterSSR(id, breakoutConsts, shouldFixTableResizing) {
       element = element.parentElement;
     }
   }
-  var renderer = findUp(document.querySelector('[data-breakout-script-id="' + id + '"]'), function (elem) {
+  var renderer = findUp(document.querySelector("[data-breakout-script-id=\"".concat(id, "\"]")), function (elem) {
     var _elem$parentElement;
     return !!((_elem$parentElement = elem.parentElement) !== null && _elem$parentElement !== void 0 && _elem$parentElement.classList.contains('ak-renderer-wrapper'));
   });
@@ -79,7 +77,23 @@ function applyBreakoutAfterSSR(id, breakoutConsts, shouldFixTableResizing) {
       if (item.target.nodeType !== Node.ELEMENT_NODE) {
         return;
       }
+      if (
+      /**
+       * The mutation observer is only called once per added node.
+       * The above condition only deals with direct children of <div class="ak-renderer-document" />
+       * When it is initially called on the direct children, not all the sub children have loaded.
+       * So nested media elements which are not immediately loaded as sub children are not available in the above conditional.
+       * Thus adding this conditional to deal with all media elements directly.
+       */
+      // Ignored via go/ees005
+      // eslint-disable-next-line @atlaskit/editor/no-as-casting
+      item.target.dataset.nodeType === MEDIA_NODE_TYPE) {
+        // Ignored via go/ees005
+        // eslint-disable-next-line @atlaskit/editor/no-as-casting
+        applyMediaBreakout(item.target);
+      }
 
+      // Remove with feature gate 'platform-ssr-table-resize'
       // Ignored via go/ees005
       // eslint-disable-next-line @atlaskit/editor/no-as-casting
       if (item.target.classList.contains('ak-renderer-document')) {
@@ -99,7 +113,7 @@ function applyBreakoutAfterSSR(id, breakoutConsts, shouldFixTableResizing) {
           }
 
           // When flag is on we are using CSS to calculate the table width thus don't need logic below to set the width and left.
-          if (!shouldFixTableResizing) {
+          if (!isFeatureFlagEnabled) {
             if (node.classList.contains('pm-table-container') && mode === 'custom') {
               // Ignored via go/ees005
               // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
@@ -138,20 +152,6 @@ function applyBreakoutAfterSSR(id, breakoutConsts, shouldFixTableResizing) {
             }
           }
         });
-      } else if (
-      /**
-       * The mutation observer is only called once per added node.
-       * The above condition only deals with direct children of <div class="ak-renderer-document" />
-       * When it is initially called on the direct children, not all the sub children have loaded.
-       * So nested media elements which are not immediately loaded as sub children are not available in the above conditional.
-       * Thus adding this conditional to deal with all media elements directly.
-       */
-      // Ignored via go/ees005
-      // eslint-disable-next-line @atlaskit/editor/no-as-casting
-      item.target.dataset.nodeType === MEDIA_NODE_TYPE) {
-        // Ignored via go/ees005
-        // eslint-disable-next-line @atlaskit/editor/no-as-casting
-        applyMediaBreakout(item.target);
       }
     });
   });

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.1";
+var packageVersion = "114.12.0";
 var setAsQueryContainerStyles = (0, _react2.css)({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size',
@@ -448,6 +448,7 @@ var RendererFunctionalComponent = exports.RendererFunctionalComponent = function
     }, (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;
@@ -455,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, {

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

@@ -1,214 +1,8 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.rendererStyles = exports.TELEPOINTER_ID = exports.FullPagePadding = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-var _react = require("@emotion/react");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
-var _colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
-var colors = _colors;
-var _tokens = require("@atlaskit/tokens");
-var _mediaInline = require("@atlaskit/editor-common/media-inline");
-var _styles = require("@atlaskit/editor-common/styles");
-var _ui = require("@atlaskit/editor-common/ui");
-var _browser = require("@atlaskit/editor-common/browser");
-var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
-var _consts = require("../../consts");
-var _headingAnchor = require("../../react/nodes/heading-anchor");
-var _lightWeightCodeBlock = require("../../react/nodes/codeBlock/components/lightWeightCodeBlock");
-var _table = require("../../react/nodes/table");
-var _table2 = require("@atlaskit/editor-common/table");
-var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
-/* eslint-disable @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation */
-/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-// Ignored via go/ees005
-// eslint-disable-next-line import/no-namespace
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+exports.TELEPOINTER_ID = exports.FullPagePadding = void 0;
 var FullPagePadding = exports.FullPagePadding = 32;
-var tableShadowWidth = 32;
-var TELEPOINTER_ID = exports.TELEPOINTER_ID = 'ai-streaming-telepointer';
-var telepointerStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t#", " {\n\t\tdisplay: inline-block;\n\t\tposition: relative;\n\t\twidth: 1.5px;\n\t\theight: 25px;\n\t\tbackground-color: ", ";\n\t\tmargin-left: ", ";\n\n\t\t&::after {\n\t\t\tcontent: 'AI';\n\t\t\tposition: absolute;\n\t\t\tdisplay: block;\n\t\t\ttop: 0;\n\t\t\tleft: 0;\n\t\t\tfont-size: 10px;\n\t\t\tfont-weight: ", ";\n\t\t\twidth: 12.5px;\n\t\t\theight: 13px;\n\t\t\tpadding-top: 1px;\n\t\t\tpadding-left: 1.5px;\n\t\t\tline-height: initial;\n\t\t\tborder-radius: 0px 2px 2px 0px;\n\t\t\tcolor: ", ";\n\t\t\tbackground-color: ", ";\n\t\t}\n\t}\n"])), TELEPOINTER_ID, "var(--ds-background-brand-bold, #0C66E4)", "var(--ds-space-025, 2px)", "var(--ds-font-weight-bold, 700)", "var(--ds-text-inverse, white)", "var(--ds-background-brand-bold, #0C66E4)");
-
-/**
- * **DEPRECATED**
- *
- * Originally defined in `@atlaskit/theme/typography`, but moved here as it has since been deleted in favor of typography tokens.
- * This should be removed as part of editor token work. More info:
- * https://atlassian.slack.com/archives/C075G5D7ZP1/p1733449725865539?thread_ts=1732159801.409789&cid=C075G5D7ZP1
- * */
-var headingSizesImport = {
-  h900: {
-    size: 35,
-    lineHeight: 40
-  },
-  h800: {
-    size: 29,
-    lineHeight: 32
-  },
-  h700: {
-    size: 24,
-    lineHeight: 28
-  },
-  h600: {
-    size: 20,
-    lineHeight: 24
-  },
-  h500: {
-    size: 16,
-    lineHeight: 20
-  },
-  h400: {
-    size: 14,
-    lineHeight: 16
-  },
-  h300: {
-    size: 12,
-    lineHeight: 16
-  },
-  h200: {
-    size: 12,
-    lineHeight: 16
-  },
-  h100: {
-    size: 11,
-    lineHeight: 16
-  }
-};
-var getLineHeight = function getLineHeight(fontCode) {
-  return headingSizesImport[fontCode].lineHeight / headingSizesImport[fontCode].size;
-};
-var headingSizes = {
-  h1: {
-    lineHeight: getLineHeight('h700')
-  },
-  h2: {
-    lineHeight: getLineHeight('h600')
-  },
-  h3: {
-    lineHeight: getLineHeight('h500')
-  },
-  h4: {
-    lineHeight: getLineHeight('h400')
-  },
-  h5: {
-    lineHeight: getLineHeight('h300')
-  },
-  h6: {
-    lineHeight: getLineHeight('h100')
-  }
-};
-var headingAnchorStyle = function headingAnchorStyle(headingTag) {
-  return (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n\t/**\n     * The copy link button doesn't reserve space in the DOM so that\n     * the text alignment isn't impacted by the button/icon's space.\n     */\n\t.", " {\n\t\tposition: absolute;\n\t\theight: ", "em;\n\n\t\tmargin-left: ", ";\n\n\t\tbutton {\n\t\t\tpadding-left: 0;\n\t\t\tpadding-right: 0;\n\t\t}\n\t}\n\n\t/**\n     * Applies hover effects to the heading anchor link button\n     * to fade in when the user rolls over the heading.\n     *\n     * The link is persistent on mobile, so we use feature detection\n     * to enable hover effects for systems that support it (desktop).\n     *\n     * @see https://caniuse.com/mdn-css_at-rules_media_hover\n     */\n\t@media (hover: hover) and (pointer: fine) {\n\t\t.", " {\n\t\t\t> button {\n\t\t\t\topacity: 0;\n\t\t\t\ttransform: translate(-8px, 0px);\n\t\t\t\ttransition:\n\t\t\t\t\topacity 0.2s ease 0s,\n\t\t\t\t\ttransform 0.2s ease 0s;\n\t\t\t}\n\t\t}\n\n\t\t&:hover {\n\t\t\t.", " > button {\n\t\t\t\topacity: 1;\n\t\t\t\ttransform: none !important;\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n     * Adds the visibility of the button when in focus through keyboard navigation.\n     */\n\t.", " {\n\t\tbutton:focus {\n\t\t\topacity: 1;\n\t\t\ttransform: none !important;\n\t\t}\n\t}\n"])), _headingAnchor.HeadingAnchorWrapperClassName, headingSizes[headingTag].lineHeight, "var(--ds-space-075, 6px)", _headingAnchor.HeadingAnchorWrapperClassName, _headingAnchor.HeadingAnchorWrapperClassName, _headingAnchor.HeadingAnchorWrapperClassName);
-};
-var alignedHeadingAnchorStyle = function alignedHeadingAnchorStyle(_ref) {
-  var allowNestedHeaderLinks = _ref.allowNestedHeaderLinks;
-  if (!allowNestedHeaderLinks) {
-    return '';
-  }
-  return (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n\t\t.fabric-editor-block-mark[data-align] > {\n\t\t\th1,\n\t\t\th2,\n\t\t\th3,\n\t\t\th4,\n\t\t\th5,\n\t\t\th6 {\n\t\t\t\tposition: relative;\n\t\t\t}\n\t\t}\n\n\t\t/**\n     * For right-alignment we flip the link to be before the heading\n     * text so that the text is flush up against the edge of the editor's\n     * container edge.\n     */\n\t\t.fabric-editor-block-mark:not([data-align='center'])[data-align] {\n\t\t\t.", " {\n\t\t\t\tmargin: 0 ", " 0 0;\n\t\t\t\t// If the anchor is right aligned then the left side of the heading\n\t\t\t\t// is aligned with the left side of the anchor.\n\t\t\t\t// In order to align as expected we transform it the width of the element (plus our expected 6px)\n\t\t\t\t// to the left\n\t\t\t\ttransform: translateX(calc(-100% - ", "));\n\t\t\t}\n\n\t\t\t@media (hover: hover) and (pointer: fine) {\n\t\t\t\t.", " > button {\n\t\t\t\t\ttransform: translate(8px, 0px);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t"])), _headingAnchor.HeadingAnchorWrapperClassName, "var(--ds-space-075, 6px)", "var(--ds-space-075, 6px)", _headingAnchor.HeadingAnchorWrapperClassName);
-};
-var tableSortableColumnStyle = function tableSortableColumnStyle(_ref2) {
-  var allowColumnSorting = _ref2.allowColumnSorting,
-    allowNestedHeaderLinks = _ref2.allowNestedHeaderLinks;
-  if (!allowColumnSorting) {
-    return '';
-  }
-  var headingsCss = '';
-  if (allowNestedHeaderLinks) {
-    headingsCss = "\n      /**\n       * When the sort button is enabled we want the heading's copy link button\n       * to reserve space so that it can prematurely wrap to avoid the button\n       * being displayed underneath the sort button (hidden or obscured).\n       *\n       * The two buttons fight each other since the sort button is displayed\n       * on hover of the <th /> and the copy link button is displayed on hover\n       * of the heading.\n       *\n       * Note that this can break the WYSIWYG experience in the case where\n       * a heading fills the width of the table cell and the only thing which\n       * wraps is the copy link button. This is hopefully a rare fringe case.\n       */\n      .".concat(_headingAnchor.HeadingAnchorWrapperClassName, " {\n        position: unset;\n      }\n      > {\n        h1, h2, h3, h4, h5, h6 {\n          margin-right: 30px;\n        }\n      }\n    ");
-  }
-  return (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n\t\t.", " {\n\t\t\tpadding: 0;\n\n\t\t\t.", " {\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t\tpadding: ", "px;\n\t\t\t\tborder-width: 1.5px;\n\t\t\t\tborder-style: solid;\n\t\t\t\tborder-color: transparent;\n\n\t\t\t\t> *:first-child {\n\t\t\t\t\tmargin-top: 0;\n\t\t\t\t}\n\n\t\t\t\t> .ProseMirror-gapcursor:first-child + *,\n\t\t\t\t> style:first-child + .ProseMirror-gapcursor + * {\n\t\t\t\t\tmargin-top: 0;\n\t\t\t\t}\n\n\t\t\t\t> .ProseMirror-gapcursor:first-child + span + *,\n\t\t\t\t> style:first-child + .ProseMirror-gapcursor + span + * {\n\t\t\t\t\tmargin-top: 0;\n\t\t\t\t}\n\n\t\t\t\t@supports selector(:focus-visible) {\n\t\t\t\t\t&:focus {\n\t\t\t\t\t\toutline: unset;\n\t\t\t\t\t}\n\t\t\t\t\t&:focus-visible {\n\t\t\t\t\t\tborder-color: ", ";\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t", "\n\t\t\t}\n\n\t\t\t", "\n\t\t}\n\t"])), _consts.RendererCssClassName.SORTABLE_COLUMN_WRAPPER, _consts.RendererCssClassName.SORTABLE_COLUMN, _styles.tableCellPadding, "var(--ds-border-focused, ".concat(colors.B300, ")"), headingsCss, (0, _react.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t// New styles\n\t\t\t\t> .", "\n\t\t\t\t\t> .", " {\n\t\t\t\t\tmargin: 0;\n\n\t\t\t\t\t.", " {\n\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t\ttransition: opacity 0.2s ease-in-out;\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t> .", "\n\t\t\t\t\t> .", " {\n\t\t\t\t\t.", " {\n\t\t\t\t\t\topacity: 0;\n\t\t\t\t\t\t&:focus {\n\t\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t&:hover:not(\n\t\t\t\t\t\t:has(\n\t\t\t\t\t\t\t\t.", "\n\t\t\t\t\t\t\t\t\t.", ":hover\n\t\t\t\t\t\t\t)\n\t\t\t\t\t)\n\t\t\t\t\t> .", "\n\t\t\t\t\t> .", " {\n\t\t\t\t\t.", " {\n\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t"])), _consts.RendererCssClassName.SORTABLE_COLUMN, _consts.RendererCssClassName.SORTABLE_COLUMN_ICON_WRAPPER, _table2.SORTABLE_COLUMN_ICON_CLASSNAME, _consts.RendererCssClassName.SORTABLE_COLUMN, _consts.RendererCssClassName.SORTABLE_COLUMN_NO_ORDER, _table2.SORTABLE_COLUMN_ICON_CLASSNAME, _consts.RendererCssClassName.SORTABLE_COLUMN_WRAPPER, _consts.RendererCssClassName.SORTABLE_COLUMN, _consts.RendererCssClassName.SORTABLE_COLUMN, _consts.RendererCssClassName.SORTABLE_COLUMN_NO_ORDER, _table2.SORTABLE_COLUMN_ICON_CLASSNAME));
-};
-var fullPageStyles = function fullPageStyles(_ref3, _ref4) {
-  var appearance = _ref3.appearance;
-  var theme = _ref4.theme;
-  if (appearance !== 'full-page') {
-    return '';
-  }
-  return (0, _react.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n\t\tmax-width: ", ";\n\t\tmargin: 0 auto;\n\t\tpadding: 0 ", "px;\n\t"])), theme && theme.layoutMaxWidth ? "".concat(theme.layoutMaxWidth, "px") : 'none', appearance === 'full-page' ? FullPagePadding : 0);
-};
-var fullWidthStyles = function fullWidthStyles(_ref5) {
-  var appearance = _ref5.appearance;
-  if (appearance !== 'full-width') {
-    return '';
-  }
-  return (0, _react.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n\t\tmax-width: ", "px;\n\t\tmargin: 0 auto;\n\n\t\t/* don't override if the breakout mark has width attribute defined */\n\t\t.fabric-editor-breakout-mark:not([data-has-width='true']),\n\t\t.ak-renderer-extension {\n\t\t\twidth: 100% !important;\n\t\t}\n\n\t\t", "\n\t"])), _editorSharedStyles.akEditorFullWidthLayoutWidth, (0, _table.isTableResizingEnabled)(appearance) ? '' : "\n      .pm-table-container {\n        width: 100% !important;\n      }\n    ");
-};
-var breakoutWidthStyle = function breakoutWidthStyle() {
-  return (0, _react.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n\t\t*:not([data-mark-type='fragment']) .", " {\n\t\t\t// Ignored via go/ees007\n\t\t\t// eslint-disable-next-line @atlaskit/editor/enforce-todo-comment-format\n\t\t\t// TODO - improve inline style logic on table container so important styles aren't required here\n\t\t\twidth: 100% !important;\n\t\t\tleft: 0 !important;\n\t\t}\n\n\t\t[data-mark-type='fragment'] * .", " {\n\t\t\t// Ignored via go/ees007\n\t\t\t// eslint-disable-next-line @atlaskit/editor/enforce-todo-comment-format\n\t\t\t// TODO - improve inline style logic on table container so important styles aren't required here\n\t\t\twidth: 100% !important;\n\t\t\tleft: 0 !important;\n\t\t}\n\t"])), _styles.TableSharedCssClassName.TABLE_CONTAINER, _styles.TableSharedCssClassName.TABLE_CONTAINER);
-};
-var getShadowOverrides = function getShadowOverrides() {
-  return (0, _react.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n\t\t/** Shadow overrides */\n\t\t&.", "::after, &.", "::before {\n\t\t\twidth: ", "px;\n\t\t\tbackground: linear-gradient(\n\t\t\t\t\tto left,\n\t\t\t\t\ttransparent 0,\n\t\t\t\t\t", " 140%\n\t\t\t\t),\n\t\t\t\tlinear-gradient(\n\t\t\t\t\tto right,\n\t\t\t\t\t", " 0px,\n\t\t\t\t\ttransparent 1px\n\t\t\t\t);\n\t\t}\n\n\t\t&.", "::after {\n\t\t\tbackground: linear-gradient(\n\t\t\t\t\tto right,\n\t\t\t\t\ttransparent 0,\n\t\t\t\t\t", " 140%\n\t\t\t\t),\n\t\t\t\tlinear-gradient(\n\t\t\t\t\tto left,\n\t\t\t\t\t", " 0px,\n\t\t\t\t\ttransparent 1px\n\t\t\t\t);\n\t\t\tright: 0px;\n\t\t}\n\t"])), _ui.shadowClassNames.RIGHT_SHADOW, _ui.shadowClassNames.LEFT_SHADOW, tableShadowWidth, "var(--ds-shadow-overflow-spread, ".concat(_colors.N40A, ")"), "var(--ds-shadow-overflow-perimeter, transparent)", _ui.shadowClassNames.RIGHT_SHADOW, "var(--ds-shadow-overflow-spread, ".concat(_colors.N40A, ")"), "var(--ds-shadow-overflow-perimeter, transparent)");
-};
-function getAnnotationStyles(_ref6) {
-  var allowAnnotations = _ref6.allowAnnotations;
-  if (!(0, _platformFeatureFlags.fg)('editor_inline_comments_on_inline_nodes')) {
-    return '';
-  }
-  if ((0, _platformFeatureFlags.fg)('annotations_align_editor_and_renderer_styles')) {
-    return (0, _react.css)({
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-      '& [data-annotation-draft-mark][data-annotation-inline-node]': {
-        borderBottom: '2px solid transparent',
-        cursor: 'pointer',
-        padding: '1px 0 2px',
-        background: "var(--ds-background-accent-yellow-subtler, ".concat(_colors.Y75, ")"),
-        borderBottomColor: "var(--ds-border-accent-yellow, ".concat(_colors.Y300, ")"),
-        boxShadow: "var(--ds-shadow-overlay, ".concat("1px 2px 3px ".concat(_colors.N60A, ", -1px 2px 3px ").concat(_colors.N60A), ")")
-      },
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-      '& [data-annotation-draft-mark][data-annotation-inline-node][data-inline-card]': {
-        padding: '5px 0 3px 0'
-      },
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-      '& [data-annotation-draft-mark][data-annotation-inline-node].date-lozenger-container': {
-        paddingTop: "var(--ds-space-025, 2px)"
-      }
-    });
-  }
-  return (0, _react.css)({
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-    "& [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: "2px solid ".concat("var(--ds-border-accent-yellow, ".concat(_colors.Y300, ")")),
-      boxShadow: "var(--ds-shadow-overlay, ".concat("1px 2px 3px ".concat(_colors.N60A, ", -1px 2px 3px ").concat(_colors.N60A), ")"),
-      cursor: 'pointer',
-      padding: "var(--ds-space-050, 4px)".concat(" ", "var(--ds-space-025, 2px)")
-    }
-  });
-}
-var tableRowHeight = 44;
-var stickyScrollbarStyles = "\n\tposition: relative;\n\tflex-direction: column;\n\n\t> .".concat(_styles.TableSharedCssClassName.TABLE_STICKY_SCROLLBAR_CONTAINER, " {\n\t  width: 100%;\n\t  display: block;\n\t  visibility: hidden;\n\t  overflow-x: auto;\n\t  position: sticky;\n\t  bottom: ", "var(--ds-space-0, 0px)", ";\n\t  z-index: 1;\n\t}\n\n\t> .").concat(_styles.TableSharedCssClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_BOTTOM, ",\n\t> .").concat(_styles.TableSharedCssClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_TOP, " {\n\t   position: absolute;\n\t   width: 100%;\n\t   height: 1px;\n\t   margin-top: -1px;\n\t   // need this to avoid sentinel being focused via keyboard\n\t   // this still allows it to be detected by intersection observer\n\t   visibility: hidden;\n\t }\n\t > .").concat(_styles.TableSharedCssClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_TOP, " {\n\t   top: ").concat(tableRowHeight * 3, "px;\n\t }\n\t > .").concat(_styles.TableSharedCssClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_BOTTOM, " {\n\t   bottom:  ", "var(--ds-space-250, 20px)", "; // MAX_BROWSER_SCROLLBAR_HEIGHT = 20;\n\t }\n  ");
-
-// Ignored via go/ees005
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-var rendererStyles = exports.rendererStyles = function rendererStyles(wrapperProps) {
-  return function (theme) {
-    var _getGlobalTheme = (0, _tokens.getGlobalTheme)(),
-      typography = _getGlobalTheme.typography;
-    // This is required to be compatible with styled-components prop structure.
-    var themeProps = {
-      theme: theme
-    };
-    var useBlockRenderForCodeBlock = wrapperProps.useBlockRenderForCodeBlock,
-      appearance = wrapperProps.appearance;
-    var isAdvancedLayoutsOn = (0, _experiments.editorExperiment)('advanced_layouts', true);
-
-    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview, @atlaskit/design-system/no-css-tagged-template-expression
-    return (0, _react.css)(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n\t\tfont-size: ", "px;\n\t\tline-height: 1.5rem;\n\t\tcolor: ", ";\n\n\t\t.", "::after {\n\t\t\t// we add a clearfix after ak-renderer-document in order to\n\t\t\t// contain internal floats (such as media images that are \"wrap-left\")\n\t\t\t// to just the renderer (and not spill outside of it)\n\t\t\tcontent: '';\n\t\t\tvisibility: hidden;\n\t\t\tdisplay: block;\n\t\t\theight: 0;\n\t\t\tclear: both;\n\t\t}\n\n\t\t", "\n\t\t", "\n\n      .", " {\n\t\t\t", "\n\t\t}\n\n\t\t& h1 {\n\t\t\t", "\n\t\t}\n\n\t\t& h2 {\n\t\t\t", "\n\t\t}\n\n\t\t& h3 {\n\t\t\t", "\n\t\t}\n\n\t\t& h4 {\n\t\t\t", "\n\t\t}\n\n\t\t& h5 {\n\t\t\t", "\n\t\t}\n\n\t\t& h6 {\n\t\t\t", "\n\t\t}\n\n\t\t& span.akActionMark {\n\t\t\tcolor: ", ";\n\t\t\ttext-decoration: none;\n\n\t\t\t&:hover {\n\t\t\t\tcolor: ", ";\n\t\t\t\ttext-decoration: underline;\n\t\t\t}\n\n\t\t\t&:active {\n\t\t\t\tcolor: ", ";\n\t\t\t}\n\t\t}\n\n\t\t& span.akActionMark {\n\t\t\tcursor: pointer;\n\t\t}\n\n\t\t& span[data-placeholder] {\n\t\t\tcolor: ", ";\n\t\t}\n\n\t\t", "\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", "\n\t\t", "\n\n\t\t& .UnknownBlock {\n\t\t\tfont-family: ", ";\n\t\t\tfont-size: ", ";\n\t\t\tfont-weight: ", ";\n\t\t\twhite-space: pre-wrap;\n\t\t\tword-wrap: break-word;\n\t\t}\n\n\t\t& span.date-node {\n\t\t\tbackground: ", ";\n\t\t\tborder-radius: ", ";\n\t\t\tcolor: ", ";\n\t\t\tpadding: ", " ", ";\n\t\t\tmargin: 0 1px;\n\t\t\ttransition: background 0.3s;\n\t\t}\n\n\t\t& span.date-node-highlighted {\n\t\t\tbackground: ", ";\n\t\t\tcolor: ", ";\n\t\t}\n\n\t\t& .renderer-image {\n\t\t\tmax-width: 100%;\n\t\t\tdisplay: block;\n\t\t\tmargin: ", " 0;\n\t\t}\n\n\t\t.", ".rich-media-wrapped + .", ":not(.rich-media-wrapped) {\n\t\t\tclear: both;\n\t\t}\n\n\t\t& .code-block,\n\t\t& blockquote,\n\t\t& hr,\n\t\t& > div > div:not(.rich-media-wrapped),\n\t\t.", ".rich-media-wrapped + .rich-media-wrapped + *:not(.rich-media-wrapped),\n\t\t.", ".rich-media-wrapped + div:not(.rich-media-wrapped),\n\t\t.", ".image-align-start,\n\t\t\t.", ".image-center,\n\t\t\t.", ".image-align-end {\n\t\t\tclear: both;\n\t\t}\n\n\t\t& .rich-media-wrapped {\n\t\t\t& + h1,\n\t\t\t& + h2,\n\t\t\t& + h3,\n\t\t\t& + h4,\n\t\t\t& + h5,\n\t\t\t& + h6 {\n\t\t\t\tmargin-top: ", ";\n\t\t\t}\n\t\t}\n\n\t\t", "\n\t\t/* plugin styles */\n    ", " &\n    div[class^='image-wrap-'] + div[class^='image-wrap-'] {\n\t\t\tmargin-left: 0;\n\t\t\tmargin-right: 0;\n\t\t}\n\n\t\t/* Breakout for tables and extensions */\n\t\t.", " > {\n\t\t\t", "\n\n\t\t\t* .", " {\n\t\t\t\toverflow-x: auto;\n\t\t\t}\n\n\t\t\t& .", ":first-child {\n\t\t\t\tmargin-top: 0;\n\t\t\t}\n\t\t}\n\n\t\t.", " {\n\t\t\t.", " {\n\t\t\t\tmargin-top: ", ";\n\t\t\t}\n\n\t\t\t.", " {\n\t\t\t\tmargin-left: 50%;\n\t\t\t\ttransform: translateX(-50%);\n\t\t\t}\n\n\t\t\t.", " {\n\t\t\t\toverflow-x: auto;\n\t\t\t}\n\n\t\t\t.", " .", " {\n\t\t\t\tdisplay: flex;\n\t\t\t}\n\t\t}\n\n\t\t", "\n\n\t\t.", " .", " {\n\t\t\tz-index: 0;\n\t\t\ttransition: all 0.1s linear;\n\t\t\tdisplay: flex; /* needed to avoid position: fixed jumpiness in Chrome */\n\n\t\t\t/** Shadow overrides */\n\t\t\t&.", "::after, &.", "::before {\n\t\t\t\ttop: ", "px;\n\t\t\t\theight: calc(100% - ", "px);\n\t\t\t\tz-index: ", ";\n\t\t\t}\n\n\t\t\t", "\n\n\t\t\t", "\n\n\t\t\t&\n          .", ",\n          &\n          .", " {\n\t\t\t\theight: calc(100% - ", "px);\n\t\t\t}\n\n\t\t\t/**\n\t\t\t * A hack for making all the <th /> heights equal in case some have shorter\n\t\t\t * content than others.\n\t\t\t *\n\t\t\t * This is done to make sort buttons fill entire <th />.\n\t\t\t*/\n\t\t\t", " {\n\t\t\t\theight: 1px; /* will be ignored */\n\t\t\t\t", ";\n\t\t\t\tmargin-left: 0;\n\t\t\t\tmargin-right: 0;\n\t\t\t}\n\n\t\t\t", " {\n\t\t\t\theight: 100%;\n\n\t\t\t\ttd,\n\t\t\t\tth {\n\t\t\t\t\tposition: relative;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\ttable[data-number-column='true'] {\n\t\t\t\t.", " {\n\t\t\t\t\tbackground-color: ", ";\n\t\t\t\t\tborder-right: 1px solid\n\t\t\t\t\t\t", ";\n\t\t\t\t\twidth: ", "px;\n\t\t\t\t\ttext-align: center;\n\t\t\t\t\tcolor: ", ";\n\t\t\t\t\tfont-size: ", ";\n\t\t\t\t}\n\n\t\t\t\t.fixed .", " {\n\t\t\t\t\tborder-right: 0px none;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\ttr[data-header-row].fixed {\n\t\t\tposition: fixed !important;\n\t\t\tdisplay: flex;\n\t\t\toverflow: hidden;\n\t\t\tz-index: ", ";\n\n\t\t\tborder-right: 1px solid ", ";\n\t\t\tborder-bottom: 1px solid ", ";\n\n\t\t\t/* this is to compensate for the table border */\n\t\t\ttransform: translateX(-1px);\n\t\t}\n\n\t\t.sticky > th {\n\t\t\tz-index: ", ";\n\t\t\tposition: sticky !important;\n\t\t\ttop: 0;\n\t\t}\n\n\t\t/* Make the number column header sticky */\n\t\t.sticky > td {\n\t\t\tposition: sticky !important;\n\t\t\ttop: 0;\n\t\t}\n\n\t\t/* add border for position: sticky\n     and work around background-clip: padding-box\n     bug for FF causing box-shadow bug in Chrome */\n\t\t.sticky th,\n\t\t.sticky td {\n\t\t\tbox-shadow:\n\t\t\t\t0px 1px ", ",\n\t\t\t\t0px -0.5px ", ",\n\t\t\t\tinset -1px 0px ", ",\n\t\t\t\t0px -1px ", ";\n\t\t}\n\n\t\t/* this will remove jumpiness caused in Chrome for sticky headers */\n\t\t.fixed + tr {\n\t\t\tmin-height: 0px;\n\t\t}\n\n\t\t/*\n   * We wrap CodeBlock in a grid to prevent it from overflowing the container of the renderer.\n   * See ED-4159.\n   */\n\t\t& .code-block {\n\t\t\tmax-width: 100%;\n\t\t\t/* -ms- properties are necessary until MS supports the latest version of the grid spec */\n\t\t\t/* stylelint-disable value-no-vendor-prefix, declaration-block-no-duplicate-properties */\n\t\t\tdisplay: block;\n\t\t\t/* stylelint-enable */\n\n\t\t\tposition: relative;\n\t\t\tborder-radius: ", ";\n\n\t\t\t/*\n     * The overall renderer has word-wrap: break; which causes issues with\n     * code block line numbers in Safari / iOS.\n     */\n\t\t\tword-wrap: normal;\n\t\t}\n\n\t\t& .MediaGroup,\n\t\t& .code-block {\n\t\t\tmargin-top: ", ";\n\n\t\t\t&:first-child {\n\t\t\t\tmargin-top: 0;\n\t\t\t}\n\t\t}\n\n\t\t", "\n\n\t\t", "\n\n      ", ";\n\t\t", ";\n\t\t& [data-layout-section] {\n\t\t\tmargin-top: ", ";\n\t\t\t& > div + div {\n\t\t\t\tmargin-left: ", ";\n\t\t\t}\n\n\t\t\t@media screen and (max-width: ", "px) {\n\t\t\t\t& > div + div {\n\t\t\t\t\tmargin-left: 0;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t& .MediaGroup,\n\t\t\t& .code-block {\n\t\t\t\tmargin-top: ", ";\n\n\t\t\t\t&:first-child {\n\t\t\t\t\tmargin-top: 0;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t& li {\n\t\t\t> .code-block {\n\t\t\t\tmargin: ", " 0 0 0;\n\t\t\t}\n\t\t\t> .code-block:first-child {\n\t\t\t\tmargin-top: 0;\n\t\t\t}\n\n\t\t\t> div:last-of-type.code-block {\n\t\t\t\tmargin-bottom: ", ";\n\t\t\t}\n\t\t}\n\n\t\t&:not([data-node-type='decisionList']) > li,\n      // This prevents https://product-fabric.atlassian.net/browse/ED-20924\n      &:not(.", ") > li {\n\t\t\t", "\n\t\t}\n\t"])), (0, _editorSharedStyles.editorFontSize)(themeProps), "var(--ds-text, ".concat(colors.N800, ")"), _consts.RendererCssClassName.DOCUMENT, fullPageStyles(wrapperProps, themeProps), fullWidthStyles(wrapperProps), _consts.RendererCssClassName.DOCUMENT, _mediaInline.mediaInlineImageStyles, headingAnchorStyle('h1'), headingAnchorStyle('h2'), headingAnchorStyle('h3'), headingAnchorStyle('h4'), headingAnchorStyle('h5'), headingAnchorStyle('h6'), "var(--ds-link, ".concat(colors.B400, ")"), "var(--ds-link, ".concat(colors.B300, ")"), "var(--ds-link-pressed, ".concat(colors.B500, ")"), "var(--ds-text-subtlest, ".concat(colors.N200, ")"), telepointerStyles, _styles.whitespaceSharedStyles, _styles.blockquoteSharedStyles, (0, _styles.headingsSharedStyles)(typography), (0, _styles.ruleSharedStyles)(), (0, _styles.paragraphSharedStyles)(typography), _styles.listsSharedStyles, _styles.indentationSharedStyles, _styles.blockMarksSharedStyles, (0, _styles.codeMarkSharedStyles)(), _styles.shadowSharedStyle, _styles.dateSharedStyle, _styles.textColorStyles, (0, _styles.backgroundColorStyles)(), _styles.tasksAndDecisionsStyles, (0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1') ? (0, _styles.getSmartCardSharedStyles)() : _styles.smartCardSharedStyles, getAnnotationStyles(wrapperProps), "var(--ds-font-family-body, ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)", (0, _editorSharedStyles.relativeFontSizeToBase16)(14), "var(--ds-font-weight-regular, 400)", "var(--ds-background-neutral, ".concat(colors.N30A, ")"), "var(--ds-border-radius-100, 3px)", "var(--ds-text, ".concat(colors.N800, ")"), "var(--ds-space-025, 2px)", "var(--ds-space-050, 4px)", "var(--ds-background-danger, ".concat(colors.R50, ")"), "var(--ds-text-danger, ".concat(colors.R500, ")"), "var(--ds-space-300, 24px)", _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, "var(--ds-space-100, 8px)", alignedHeadingAnchorStyle(wrapperProps), _styles.mediaSingleSharedStyle, _consts.RendererCssClassName.DOCUMENT, breakoutWidthStyle(), _consts.RendererCssClassName.EXTENSION_OVERFLOW_CONTAINER, _consts.RendererCssClassName.EXTENSION, _consts.RendererCssClassName.DOCUMENT, _consts.RendererCssClassName.EXTENSION, _editorSharedStyles.blockNodesVerticalMargin, _consts.RendererCssClassName.EXTENSION_CENTER_ALIGN, _styles.TableSharedCssClassName.TABLE_NODE_WRAPPER, _ui.shadowObserverClassNames.SHADOW_CONTAINER, _styles.TableSharedCssClassName.TABLE_NODE_WRAPPER, (0, _styles.tableSharedStyle)(), _consts.RendererCssClassName.DOCUMENT, _styles.TableSharedCssClassName.TABLE_CONTAINER, _ui.shadowClassNames.RIGHT_SHADOW, _ui.shadowClassNames.LEFT_SHADOW, _styles.tableMarginTop - 1, _styles.tableMarginTop, _editorSharedStyles.akEditorStickyHeaderZIndex, getShadowOverrides(), (0, _table.isStickyScrollbarEnabled)(appearance) ? stickyScrollbarStyles : '', _ui.shadowObserverClassNames.SENTINEL_LEFT, _ui.shadowObserverClassNames.SENTINEL_RIGHT, _styles.tableMarginTop, (0, _platformFeatureFlags.fg)('platform_editor_renderer_table_header_styles') ? ".".concat(_styles.TableSharedCssClassName.TABLE_NODE_WRAPPER, " > table, .").concat(_styles.TableSharedCssClassName.TABLE_STICKY_WRAPPER, " > table") : 'table', tableSortableColumnStyle(wrapperProps), (0, _platformFeatureFlags.fg)('platform_editor_renderer_table_header_styles') ? ".".concat(_styles.TableSharedCssClassName.TABLE_NODE_WRAPPER, " > table > tbody > tr:first-of-type, .").concat(_styles.TableSharedCssClassName.TABLE_STICKY_WRAPPER, " > table > tbody > tr:first-of-type") : 'table tr:first-of-type', _consts.RendererCssClassName.NUMBER_COLUMN, (0, _platformFeatureFlags.fg)('platform_editor_tables_numbered_column_correction') ? "var(--ds-background-accent-gray-subtlest, #F1F2F4)" : "var(--ds-background-neutral, ".concat(_editorSharedStyles.akEditorTableToolbar, ")"), "var(--ds-background-accent-gray-subtler, ".concat(_editorSharedStyles.akEditorTableBorder, ")"), _editorSharedStyles.akEditorTableNumberColumnWidth, "var(--ds-text-subtlest, ".concat(colors.N200, ")"), (0, _editorSharedStyles.relativeFontSizeToBase16)(14), _consts.RendererCssClassName.NUMBER_COLUMN, _editorSharedStyles.akEditorStickyHeaderZIndex, "var(--ds-background-accent-gray-subtler, ".concat(_editorSharedStyles.akEditorTableBorder, ")"), "var(--ds-background-accent-gray-subtler, ".concat(_editorSharedStyles.akEditorTableBorder, ")"), _editorSharedStyles.akEditorStickyHeaderZIndex, "var(--ds-background-accent-gray-subtler, ".concat(_editorSharedStyles.akEditorTableBorder, ")"), "var(--ds-background-accent-gray-subtler, ".concat(_editorSharedStyles.akEditorTableBorder, ")"), "var(--ds-background-accent-gray-subtler, ".concat(_editorSharedStyles.akEditorTableToolbar, ")"), "var(--ds-background-accent-gray-subtler, ".concat(_editorSharedStyles.akEditorTableToolbar, ")"), "var(--ds-border-radius-100, 3px)", _editorSharedStyles.blockNodesVerticalMargin, useGridRenderForCodeBlock(useBlockRenderForCodeBlock), (0, _lightWeightCodeBlock.getLightWeightCodeBlockStylesForRootRendererStyleSheet)(), isAdvancedLayoutsOn ? _styles.columnLayoutResponsiveSharedStyle : _styles.columnLayoutSharedStyle, isAdvancedLayoutsOn && _styles.columnLayoutResponsiveRendererStyles, "var(--ds-space-250, 20px)", isAdvancedLayoutsOn ? 0 : "var(--ds-space-400, 32px)", _editorSharedStyles.gridMediumMaxWidth, _editorSharedStyles.blockNodesVerticalMargin, _editorSharedStyles.blockNodesVerticalMargin, _editorSharedStyles.blockNodesVerticalMargin, _styles.SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER, _browser.browser.safari ? _styles.codeBlockInListSafariFix : '');
-  };
-};
-var useGridRenderForCodeBlock = function useGridRenderForCodeBlock(codeBlockRenderAsBlock) {
-  if (codeBlockRenderAsBlock) {
-    return '';
-  }
-  return "& .code-block {\n       /* -ms- properties are necessary until MS supports the latest version of the grid spec */\n       /* stylelint-disable value-no-vendor-prefix, declaration-block-no-duplicate-properties */\n       display: -ms-grid;\n       display: grid;\n       -ms-grid-columns: auto 1fr;\n       /* stylelint-enable */\n\n       grid-template-columns: minmax(0, 1fr);\n\n       & > span {\n         /* stylelint-disable value-no-vendor-prefix */\n         -ms-grid-row: 1;\n         -ms-grid-column: 2;\n         /* stylelint-enable */\n         grid-column: 1;\n       }\n     }";
-};
+var TELEPOINTER_ID = exports.TELEPOINTER_ID = 'ai-streaming-telepointer';