@atlaskit/renderer 111.1.6 → 111.1.7

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/renderer
 
+## 111.1.7
+
+### Patch Changes
+
+- [#150087](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/150087)
+  [`1ef4ceed97d4d`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/1ef4ceed97d4d) -
+  Fix CSS based renderer width fix not working in nested renderer
+
 ## 111.1.6
 
 ### Patch Changes

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

@@ -65,7 +65,7 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
 var NORMAL_SEVERITY_THRESHOLD = exports.NORMAL_SEVERITY_THRESHOLD = 2000;
 var DEGRADED_SEVERITY_THRESHOLD = exports.DEGRADED_SEVERITY_THRESHOLD = 3000;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "111.1.6";
+var packageVersion = "111.1.7";
 var setAsQueryContainerStyles = (0, _react2.css)({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size',
@@ -88,10 +88,12 @@ var __RendererClassComponent = exports.__RendererClassComponent = /*#__PURE__*/f
      * deleted once that measurement occurs.
      */
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderedMeasurementDistortedDurationMonitor", (0, _measureRender.getDistortedDurationMonitor)());
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "featureFlags", (0, _memoizeOne.default)(function (featureFlags) {
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "createRendererContext", (0, _memoizeOne.default)(function (featureFlags, isTopLevelRenderer) {
       var normalizedFeatureFlags = (0, _normalizeFeatureFlags.normalizeFeatureFlags)(featureFlags);
       return {
-        featureFlags: normalizedFeatureFlags
+        featureFlags: normalizedFeatureFlags,
+        // The context is uninitialized at the top level. In nested levels it's all false
+        isTopLevelRenderer: isTopLevelRenderer === undefined
       };
     }));
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "fireAnalyticsEvent", function (event) {
@@ -250,8 +252,8 @@ var __RendererClassComponent = exports.__RendererClassComponent = /*#__PURE__*/f
       var stickyHeaders = props.stickyHeaders ? props.stickyHeaders === true ? {} : props.stickyHeaders : undefined;
       var annotationProvider = props.annotationProvider;
       var allowAnnotationsDraftMode = Boolean(annotationProvider && annotationProvider.inlineComment && annotationProvider.inlineComment.allowDraftMode);
-      var _this$featureFlags = this.featureFlags(props.featureFlags),
-        featureFlags = _this$featureFlags.featureFlags;
+      var _this$createRendererC = this.createRendererContext(props.featureFlags, props.isTopLevelRenderer),
+        featureFlags = _this$createRendererC.featureFlags;
       return {
         startPos: props.startPos,
         providers: this.providerFactory,
@@ -313,7 +315,7 @@ var __RendererClassComponent = exports.__RendererClassComponent = /*#__PURE__*/f
         allowWrapCodeBlock = _this$props.allowWrapCodeBlock,
         allowCustomPanels = _this$props.allowCustomPanels,
         media = _this$props.media;
-      var featureFlags = this.featureFlags(this.props.featureFlags);
+      var rendererContext = this.createRendererContext(this.props.featureFlags, this.props.isTopLevelRenderer);
       var allowNestedHeaderLinks = (0, _links.isNestedHeaderLinksEnabled)(allowHeadingAnchorLinks);
       /**
        * Handle clicks inside renderer. If the click isn't on media, in the media picker, or on a
@@ -361,7 +363,7 @@ var __RendererClassComponent = exports.__RendererClassComponent = /*#__PURE__*/f
         }
       };
       try {
-        var _featureFlags$feature;
+        var _rendererContext$feat;
         var schema = this.getSchema(this.props.schema, this.props.adfStage);
         var _renderDocument = (0, _.renderDocument)(adfDocument, this.serializer, schema, adfStage, this.props.useSpecBasedValidator, this.id, this.fireAnalyticsEvent, this.props.unsupportedContentLevelsTracking, this.props.appearance),
           result = _renderDocument.result,
@@ -371,7 +373,7 @@ var __RendererClassComponent = exports.__RendererClassComponent = /*#__PURE__*/f
           onComplete(stat);
         }
         var rendererOutput = (0, _react2.jsx)(_rendererContext.RendererContextProvider, {
-          value: featureFlags
+          value: rendererContext
         }, (0, _react2.jsx)(_activeHeaderIdProvider.ActiveHeaderIdProvider, {
           value: (0, _links.getActiveHeadingId)(allowHeadingAnchorLinks)
         }, (0, _react2.jsx)(_analyticsContext.default.Provider, {
@@ -391,13 +393,14 @@ var __RendererClassComponent = exports.__RendererClassComponent = /*#__PURE__*/f
           allowWrapCodeBlock: allowWrapCodeBlock,
           allowCustomPanels: allowCustomPanels,
           allowPlaceholderText: allowPlaceholderText,
-          useBlockRenderForCodeBlock: (_featureFlags$feature = featureFlags.featureFlags.useBlockRenderForCodeBlock) !== null && _featureFlags$feature !== void 0 ? _featureFlags$feature : true,
+          useBlockRenderForCodeBlock: (_rendererContext$feat = rendererContext.featureFlags.useBlockRenderForCodeBlock) !== null && _rendererContext$feat !== void 0 ? _rendererContext$feat : true,
           addTelepointer: this.props.addTelepointer,
           innerRef: this.editorRef,
           onClick: handleWrapperOnClick,
           onMouseDown: this.onMouseDownEditView,
           ssr: media === null || media === void 0 ? void 0 : media.ssr,
-          isInsideOfInlineExtension: this.props.isInsideOfInlineExtension
+          isInsideOfInlineExtension: this.props.isInsideOfInlineExtension,
+          isTopLevelRenderer: rendererContext.isTopLevelRenderer
         }, enableSsrInlineScripts ? (0, _react2.jsx)(_breakoutSsr.BreakoutSSRInlineScript, null) : null, (0, _react2.jsx)(RendererActionsInternalUpdater, {
           doc: pmDoc,
           schema: schema,
@@ -409,7 +412,7 @@ var __RendererClassComponent = exports.__RendererClassComponent = /*#__PURE__*/f
         }, rendererOutput) : rendererOutput;
         return (0, _react2.jsx)(_react.Fragment, null, rendererResult);
       } catch (e) {
-        var _featureFlags$feature2;
+        var _rendererContext$feat2;
         if (onError) {
           onError(e);
         }
@@ -421,9 +424,10 @@ var __RendererClassComponent = exports.__RendererClassComponent = /*#__PURE__*/f
           allowPlaceholderText: allowPlaceholderText,
           allowColumnSorting: allowColumnSorting,
           allowNestedHeaderLinks: allowNestedHeaderLinks,
-          useBlockRenderForCodeBlock: (_featureFlags$feature2 = featureFlags.featureFlags.useBlockRenderForCodeBlock) !== null && _featureFlags$feature2 !== void 0 ? _featureFlags$feature2 : true,
+          useBlockRenderForCodeBlock: (_rendererContext$feat2 = rendererContext.featureFlags.useBlockRenderForCodeBlock) !== null && _rendererContext$feat2 !== void 0 ? _rendererContext$feat2 : true,
           addTelepointer: this.props.addTelepointer,
-          onClick: handleWrapperOnClick
+          onClick: handleWrapperOnClick,
+          isTopLevelRenderer: rendererContext.isTopLevelRenderer
         }, (0, _react2.jsx)(_ui.UnsupportedBlock, null));
       }
     }
@@ -447,11 +451,15 @@ var __RendererClassComponent = exports.__RendererClassComponent = /*#__PURE__*/f
 function Renderer(props) {
   var _React$useContext = _react.default.useContext(_annotations.AnnotationsPositionContext),
     startPos = _React$useContext.startPos;
-
-  // eslint-disable-next-line react/jsx-pascal-case
-  return (0, _react2.jsx)(__RendererClassComponent, (0, _extends2.default)({}, props, {
-    startPos: startPos
-  }));
+  var _useRendererContext = (0, _rendererContext.useRendererContext)(),
+    isTopLevelRenderer = _useRendererContext.isTopLevelRenderer;
+  return (
+    // eslint-disable-next-line react/jsx-pascal-case
+    (0, _react2.jsx)(__RendererClassComponent, (0, _extends2.default)({}, props, {
+      startPos: startPos,
+      isTopLevelRenderer: isTopLevelRenderer
+    }))
+  );
 }
 
 // Usage notes:
@@ -492,7 +500,8 @@ var RendererWrapper = /*#__PURE__*/_react.default.memo(function (props) {
     addTelepointer = props.addTelepointer,
     ssr = props.ssr,
     isInsideOfInlineExtension = props.isInsideOfInlineExtension,
-    allowTableResizing = props.allowTableResizing;
+    allowTableResizing = props.allowTableResizing,
+    isTopLevelRenderer = props.isTopLevelRenderer;
   var createTelepointer = function createTelepointer() {
     var telepointer = document.createElement('span');
     telepointer.textContent = "\u200B";
@@ -577,7 +586,10 @@ var RendererWrapper = /*#__PURE__*/_react.default.memo(function (props) {
   // Only apply container-type = inline-size when having a known width in full-page/full-width/comment mode.
   // Otherwise when appearance is unspecified the renderer size is decided by the content.
   // In this case we can't set the container-type = inline-size as it will collapse width to 0.
-  return (appearance === 'full-page' || appearance === 'full-width' || appearance === 'comment') && (0, _platformFeatureFlags.fg)('platform-fix-table-ssr-resizing') ? (0, _react2.jsx)("div", {
+  return (appearance === 'full-page' || appearance === 'full-width' || appearance === 'comment') &&
+  // In case of having excerpt-include on page there are multiple renderers nested.
+  // Make sure only the root renderer is set to be query container.
+  isTopLevelRenderer && (0, _platformFeatureFlags.fg)('platform-fix-table-ssr-resizing') ? (0, _react2.jsx)("div", {
     css: setAsQueryContainerStyles
   }, renderer) : renderer;
 });

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

@@ -37,7 +37,7 @@ import { AnnotationsPositionContext, AnnotationsWrapper } from '../annotations';
 import { getActiveHeadingId, isNestedHeaderLinksEnabled } from '../../react/utils/links';
 import { findInTree } from '../../utils';
 import { isInteractiveElement } from './click-to-edit';
-import { RendererContextProvider } from '../../renderer-context';
+import { useRendererContext, RendererContextProvider } from '../../renderer-context';
 import memoizeOne from 'memoize-one';
 import { ErrorBoundary } from './ErrorBoundary';
 import { EditorMediaClientProvider } from '../../react/utils/EditorMediaClientProvider';
@@ -45,7 +45,7 @@ import { nodeToReact } from '../../react/nodes';
 export const NORMAL_SEVERITY_THRESHOLD = 2000;
 export const DEGRADED_SEVERITY_THRESHOLD = 3000;
 const packageName = "@atlaskit/renderer";
-const packageVersion = "111.1.6";
+const packageVersion = "111.1.7";
 const setAsQueryContainerStyles = css({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size',
@@ -64,10 +64,12 @@ export class __RendererClassComponent extends PureComponent {
      * deleted once that measurement occurs.
      */
     _defineProperty(this, "renderedMeasurementDistortedDurationMonitor", getDistortedDurationMonitor());
-    _defineProperty(this, "featureFlags", memoizeOne(featureFlags => {
+    _defineProperty(this, "createRendererContext", memoizeOne((featureFlags, isTopLevelRenderer) => {
       const normalizedFeatureFlags = normalizeFeatureFlags(featureFlags);
       return {
-        featureFlags: normalizedFeatureFlags
+        featureFlags: normalizedFeatureFlags,
+        // The context is uninitialized at the top level. In nested levels it's all false
+        isTopLevelRenderer: isTopLevelRenderer === undefined
       };
     }));
     _defineProperty(this, "fireAnalyticsEvent", event => {
@@ -228,7 +230,7 @@ export class __RendererClassComponent extends PureComponent {
     const allowAnnotationsDraftMode = Boolean(annotationProvider && annotationProvider.inlineComment && annotationProvider.inlineComment.allowDraftMode);
     const {
       featureFlags
-    } = this.featureFlags(props.featureFlags);
+    } = this.createRendererContext(props.featureFlags, props.isTopLevelRenderer);
     return {
       startPos: props.startPos,
       providers: this.providerFactory,
@@ -289,7 +291,7 @@ export class __RendererClassComponent extends PureComponent {
       allowCustomPanels,
       media
     } = this.props;
-    const featureFlags = this.featureFlags(this.props.featureFlags);
+    const rendererContext = this.createRendererContext(this.props.featureFlags, this.props.isTopLevelRenderer);
     const allowNestedHeaderLinks = isNestedHeaderLinksEnabled(allowHeadingAnchorLinks);
     /**
      * Handle clicks inside renderer. If the click isn't on media, in the media picker, or on a
@@ -337,7 +339,7 @@ export class __RendererClassComponent extends PureComponent {
       }
     };
     try {
-      var _featureFlags$feature;
+      var _rendererContext$feat;
       const schema = this.getSchema(this.props.schema, this.props.adfStage);
       const {
         result,
@@ -348,7 +350,7 @@ export class __RendererClassComponent extends PureComponent {
         onComplete(stat);
       }
       const rendererOutput = jsx(RendererContextProvider, {
-        value: featureFlags
+        value: rendererContext
       }, jsx(ActiveHeaderIdProvider, {
         value: getActiveHeadingId(allowHeadingAnchorLinks)
       }, jsx(AnalyticsContext.Provider, {
@@ -366,13 +368,14 @@ export class __RendererClassComponent extends PureComponent {
         allowWrapCodeBlock: allowWrapCodeBlock,
         allowCustomPanels: allowCustomPanels,
         allowPlaceholderText: allowPlaceholderText,
-        useBlockRenderForCodeBlock: (_featureFlags$feature = featureFlags.featureFlags.useBlockRenderForCodeBlock) !== null && _featureFlags$feature !== void 0 ? _featureFlags$feature : true,
+        useBlockRenderForCodeBlock: (_rendererContext$feat = rendererContext.featureFlags.useBlockRenderForCodeBlock) !== null && _rendererContext$feat !== void 0 ? _rendererContext$feat : true,
         addTelepointer: this.props.addTelepointer,
         innerRef: this.editorRef,
         onClick: handleWrapperOnClick,
         onMouseDown: this.onMouseDownEditView,
         ssr: media === null || media === void 0 ? void 0 : media.ssr,
-        isInsideOfInlineExtension: this.props.isInsideOfInlineExtension
+        isInsideOfInlineExtension: this.props.isInsideOfInlineExtension,
+        isTopLevelRenderer: rendererContext.isTopLevelRenderer
       }, enableSsrInlineScripts ? jsx(BreakoutSSRInlineScript, null) : null, jsx(RendererActionsInternalUpdater, {
         doc: pmDoc,
         schema: schema,
@@ -384,7 +387,7 @@ export class __RendererClassComponent extends PureComponent {
       }, rendererOutput) : rendererOutput;
       return jsx(Fragment, null, rendererResult);
     } catch (e) {
-      var _featureFlags$feature2;
+      var _rendererContext$feat2;
       if (onError) {
         onError(e);
       }
@@ -396,9 +399,10 @@ export class __RendererClassComponent extends PureComponent {
         allowPlaceholderText: allowPlaceholderText,
         allowColumnSorting: allowColumnSorting,
         allowNestedHeaderLinks: allowNestedHeaderLinks,
-        useBlockRenderForCodeBlock: (_featureFlags$feature2 = featureFlags.featureFlags.useBlockRenderForCodeBlock) !== null && _featureFlags$feature2 !== void 0 ? _featureFlags$feature2 : true,
+        useBlockRenderForCodeBlock: (_rendererContext$feat2 = rendererContext.featureFlags.useBlockRenderForCodeBlock) !== null && _rendererContext$feat2 !== void 0 ? _rendererContext$feat2 : true,
         addTelepointer: this.props.addTelepointer,
-        onClick: handleWrapperOnClick
+        onClick: handleWrapperOnClick,
+        isTopLevelRenderer: rendererContext.isTopLevelRenderer
       }, jsx(UnsupportedBlock, null));
     }
   }
@@ -421,11 +425,16 @@ export function Renderer(props) {
   const {
     startPos
   } = React.useContext(AnnotationsPositionContext);
-
-  // eslint-disable-next-line react/jsx-pascal-case
-  return jsx(__RendererClassComponent, _extends({}, props, {
-    startPos: startPos
-  }));
+  const {
+    isTopLevelRenderer
+  } = useRendererContext();
+  return (
+    // eslint-disable-next-line react/jsx-pascal-case
+    jsx(__RendererClassComponent, _extends({}, props, {
+      startPos: startPos,
+      isTopLevelRenderer: isTopLevelRenderer
+    }))
+  );
 }
 
 // Usage notes:
@@ -465,7 +474,8 @@ const RendererWrapper = /*#__PURE__*/React.memo(props => {
     addTelepointer,
     ssr,
     isInsideOfInlineExtension,
-    allowTableResizing
+    allowTableResizing,
+    isTopLevelRenderer
   } = props;
   const createTelepointer = () => {
     const telepointer = document.createElement('span');
@@ -549,7 +559,10 @@ const RendererWrapper = /*#__PURE__*/React.memo(props => {
   // Only apply container-type = inline-size when having a known width in full-page/full-width/comment mode.
   // Otherwise when appearance is unspecified the renderer size is decided by the content.
   // In this case we can't set the container-type = inline-size as it will collapse width to 0.
-  return (appearance === 'full-page' || appearance === 'full-width' || appearance === 'comment') && fg('platform-fix-table-ssr-resizing') ? jsx("div", {
+  return (appearance === 'full-page' || appearance === 'full-width' || appearance === 'comment') &&
+  // In case of having excerpt-include on page there are multiple renderers nested.
+  // Make sure only the root renderer is set to be query container.
+  isTopLevelRenderer && fg('platform-fix-table-ssr-resizing') ? jsx("div", {
     css: setAsQueryContainerStyles
   }, renderer) : renderer;
 });

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

@@ -47,7 +47,7 @@ import { AnnotationsPositionContext, AnnotationsWrapper } from '../annotations';
 import { getActiveHeadingId, isNestedHeaderLinksEnabled } from '../../react/utils/links';
 import { findInTree } from '../../utils';
 import { isInteractiveElement } from './click-to-edit';
-import { RendererContextProvider } from '../../renderer-context';
+import { useRendererContext, RendererContextProvider } from '../../renderer-context';
 import memoizeOne from 'memoize-one';
 import { ErrorBoundary } from './ErrorBoundary';
 import { EditorMediaClientProvider } from '../../react/utils/EditorMediaClientProvider';
@@ -55,7 +55,7 @@ import { nodeToReact } from '../../react/nodes';
 export var NORMAL_SEVERITY_THRESHOLD = 2000;
 export var DEGRADED_SEVERITY_THRESHOLD = 3000;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "111.1.6";
+var packageVersion = "111.1.7";
 var setAsQueryContainerStyles = css({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size',
@@ -78,10 +78,12 @@ export var __RendererClassComponent = /*#__PURE__*/function (_PureComponent) {
      * deleted once that measurement occurs.
      */
     _defineProperty(_assertThisInitialized(_this), "renderedMeasurementDistortedDurationMonitor", getDistortedDurationMonitor());
-    _defineProperty(_assertThisInitialized(_this), "featureFlags", memoizeOne(function (featureFlags) {
+    _defineProperty(_assertThisInitialized(_this), "createRendererContext", memoizeOne(function (featureFlags, isTopLevelRenderer) {
       var normalizedFeatureFlags = normalizeFeatureFlags(featureFlags);
       return {
-        featureFlags: normalizedFeatureFlags
+        featureFlags: normalizedFeatureFlags,
+        // The context is uninitialized at the top level. In nested levels it's all false
+        isTopLevelRenderer: isTopLevelRenderer === undefined
       };
     }));
     _defineProperty(_assertThisInitialized(_this), "fireAnalyticsEvent", function (event) {
@@ -240,8 +242,8 @@ export var __RendererClassComponent = /*#__PURE__*/function (_PureComponent) {
       var stickyHeaders = props.stickyHeaders ? props.stickyHeaders === true ? {} : props.stickyHeaders : undefined;
       var annotationProvider = props.annotationProvider;
       var allowAnnotationsDraftMode = Boolean(annotationProvider && annotationProvider.inlineComment && annotationProvider.inlineComment.allowDraftMode);
-      var _this$featureFlags = this.featureFlags(props.featureFlags),
-        featureFlags = _this$featureFlags.featureFlags;
+      var _this$createRendererC = this.createRendererContext(props.featureFlags, props.isTopLevelRenderer),
+        featureFlags = _this$createRendererC.featureFlags;
       return {
         startPos: props.startPos,
         providers: this.providerFactory,
@@ -303,7 +305,7 @@ export var __RendererClassComponent = /*#__PURE__*/function (_PureComponent) {
         allowWrapCodeBlock = _this$props.allowWrapCodeBlock,
         allowCustomPanels = _this$props.allowCustomPanels,
         media = _this$props.media;
-      var featureFlags = this.featureFlags(this.props.featureFlags);
+      var rendererContext = this.createRendererContext(this.props.featureFlags, this.props.isTopLevelRenderer);
       var allowNestedHeaderLinks = isNestedHeaderLinksEnabled(allowHeadingAnchorLinks);
       /**
        * Handle clicks inside renderer. If the click isn't on media, in the media picker, or on a
@@ -351,7 +353,7 @@ export var __RendererClassComponent = /*#__PURE__*/function (_PureComponent) {
         }
       };
       try {
-        var _featureFlags$feature;
+        var _rendererContext$feat;
         var schema = this.getSchema(this.props.schema, this.props.adfStage);
         var _renderDocument = renderDocument(adfDocument, this.serializer, schema, adfStage, this.props.useSpecBasedValidator, this.id, this.fireAnalyticsEvent, this.props.unsupportedContentLevelsTracking, this.props.appearance),
           result = _renderDocument.result,
@@ -361,7 +363,7 @@ export var __RendererClassComponent = /*#__PURE__*/function (_PureComponent) {
           onComplete(stat);
         }
         var rendererOutput = jsx(RendererContextProvider, {
-          value: featureFlags
+          value: rendererContext
         }, jsx(ActiveHeaderIdProvider, {
           value: getActiveHeadingId(allowHeadingAnchorLinks)
         }, jsx(AnalyticsContext.Provider, {
@@ -381,13 +383,14 @@ export var __RendererClassComponent = /*#__PURE__*/function (_PureComponent) {
           allowWrapCodeBlock: allowWrapCodeBlock,
           allowCustomPanels: allowCustomPanels,
           allowPlaceholderText: allowPlaceholderText,
-          useBlockRenderForCodeBlock: (_featureFlags$feature = featureFlags.featureFlags.useBlockRenderForCodeBlock) !== null && _featureFlags$feature !== void 0 ? _featureFlags$feature : true,
+          useBlockRenderForCodeBlock: (_rendererContext$feat = rendererContext.featureFlags.useBlockRenderForCodeBlock) !== null && _rendererContext$feat !== void 0 ? _rendererContext$feat : true,
           addTelepointer: this.props.addTelepointer,
           innerRef: this.editorRef,
           onClick: handleWrapperOnClick,
           onMouseDown: this.onMouseDownEditView,
           ssr: media === null || media === void 0 ? void 0 : media.ssr,
-          isInsideOfInlineExtension: this.props.isInsideOfInlineExtension
+          isInsideOfInlineExtension: this.props.isInsideOfInlineExtension,
+          isTopLevelRenderer: rendererContext.isTopLevelRenderer
         }, enableSsrInlineScripts ? jsx(BreakoutSSRInlineScript, null) : null, jsx(RendererActionsInternalUpdater, {
           doc: pmDoc,
           schema: schema,
@@ -399,7 +402,7 @@ export var __RendererClassComponent = /*#__PURE__*/function (_PureComponent) {
         }, rendererOutput) : rendererOutput;
         return jsx(Fragment, null, rendererResult);
       } catch (e) {
-        var _featureFlags$feature2;
+        var _rendererContext$feat2;
         if (onError) {
           onError(e);
         }
@@ -411,9 +414,10 @@ export var __RendererClassComponent = /*#__PURE__*/function (_PureComponent) {
           allowPlaceholderText: allowPlaceholderText,
           allowColumnSorting: allowColumnSorting,
           allowNestedHeaderLinks: allowNestedHeaderLinks,
-          useBlockRenderForCodeBlock: (_featureFlags$feature2 = featureFlags.featureFlags.useBlockRenderForCodeBlock) !== null && _featureFlags$feature2 !== void 0 ? _featureFlags$feature2 : true,
+          useBlockRenderForCodeBlock: (_rendererContext$feat2 = rendererContext.featureFlags.useBlockRenderForCodeBlock) !== null && _rendererContext$feat2 !== void 0 ? _rendererContext$feat2 : true,
           addTelepointer: this.props.addTelepointer,
-          onClick: handleWrapperOnClick
+          onClick: handleWrapperOnClick,
+          isTopLevelRenderer: rendererContext.isTopLevelRenderer
         }, jsx(UnsupportedBlock, null));
       }
     }
@@ -437,11 +441,15 @@ export var __RendererClassComponent = /*#__PURE__*/function (_PureComponent) {
 export function Renderer(props) {
   var _React$useContext = React.useContext(AnnotationsPositionContext),
     startPos = _React$useContext.startPos;
-
-  // eslint-disable-next-line react/jsx-pascal-case
-  return jsx(__RendererClassComponent, _extends({}, props, {
-    startPos: startPos
-  }));
+  var _useRendererContext = useRendererContext(),
+    isTopLevelRenderer = _useRendererContext.isTopLevelRenderer;
+  return (
+    // eslint-disable-next-line react/jsx-pascal-case
+    jsx(__RendererClassComponent, _extends({}, props, {
+      startPos: startPos,
+      isTopLevelRenderer: isTopLevelRenderer
+    }))
+  );
 }
 
 // Usage notes:
@@ -482,7 +490,8 @@ var RendererWrapper = /*#__PURE__*/React.memo(function (props) {
     addTelepointer = props.addTelepointer,
     ssr = props.ssr,
     isInsideOfInlineExtension = props.isInsideOfInlineExtension,
-    allowTableResizing = props.allowTableResizing;
+    allowTableResizing = props.allowTableResizing,
+    isTopLevelRenderer = props.isTopLevelRenderer;
   var createTelepointer = function createTelepointer() {
     var telepointer = document.createElement('span');
     telepointer.textContent = "\u200B";
@@ -567,7 +576,10 @@ var RendererWrapper = /*#__PURE__*/React.memo(function (props) {
   // Only apply container-type = inline-size when having a known width in full-page/full-width/comment mode.
   // Otherwise when appearance is unspecified the renderer size is decided by the content.
   // In this case we can't set the container-type = inline-size as it will collapse width to 0.
-  return (appearance === 'full-page' || appearance === 'full-width' || appearance === 'comment') && fg('platform-fix-table-ssr-resizing') ? jsx("div", {
+  return (appearance === 'full-page' || appearance === 'full-width' || appearance === 'comment') &&
+  // In case of having excerpt-include on page there are multiple renderers nested.
+  // Make sure only the root renderer is set to be query container.
+  isTopLevelRenderer && fg('platform-fix-table-ssr-resizing') ? jsx("div", {
     css: setAsQueryContainerStyles
   }, renderer) : renderer;
 });

package/dist/types/renderer-context.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 import type { FeatureFlags } from '@atlaskit/editor-common/types';
 export type RendererContextProps = {
     featureFlags?: FeatureFlags;
+    isTopLevelRenderer?: boolean;
 };
 export declare const useRendererContext: () => RendererContextProps;
 export declare const RendererContextProvider: React.Provider<{}>;

package/dist/types/ui/Renderer/index.d.ts

@@ -35,7 +35,7 @@ export declare class __RendererClassComponent extends PureComponent<RendererProp
         startPos: number;
     }): void;
     private deriveSerializerProps;
-    private featureFlags;
+    private createRendererContext;
     private fireAnalyticsEvent;
     private getSchema;
     private onMouseDownEditView;

package/dist/types/ui/renderer-props.d.ts

@@ -65,6 +65,7 @@ export interface RendererProps {
     unsupportedContentLevelsTracking?: UnsupportedContentLevelsTracking;
     nodeComponents?: NodeComponentsProps;
     isInsideOfInlineExtension?: boolean;
+    isTopLevelRenderer?: boolean;
     /**
      * When enabled a trailing telepointer will be added to the rendered document
      * following content updates.

package/dist/types-ts4.5/renderer-context.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 import type { FeatureFlags } from '@atlaskit/editor-common/types';
 export type RendererContextProps = {
     featureFlags?: FeatureFlags;
+    isTopLevelRenderer?: boolean;
 };
 export declare const useRendererContext: () => RendererContextProps;
 export declare const RendererContextProvider: React.Provider<{}>;

package/dist/types-ts4.5/ui/Renderer/index.d.ts

@@ -35,7 +35,7 @@ export declare class __RendererClassComponent extends PureComponent<RendererProp
         startPos: number;
     }): void;
     private deriveSerializerProps;
-    private featureFlags;
+    private createRendererContext;
     private fireAnalyticsEvent;
     private getSchema;
     private onMouseDownEditView;

package/dist/types-ts4.5/ui/renderer-props.d.ts

@@ -65,6 +65,7 @@ export interface RendererProps {
     unsupportedContentLevelsTracking?: UnsupportedContentLevelsTracking;
     nodeComponents?: NodeComponentsProps;
     isInsideOfInlineExtension?: boolean;
+    isTopLevelRenderer?: boolean;
     /**
      * When enabled a trailing telepointer will be added to the rendered document
      * following content updates.

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/renderer",
-	"version": "111.1.6",
+	"version": "111.1.7",
 	"description": "Renderer component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -36,8 +36,8 @@
 		"@atlaskit/editor-shared-styles": "^3.0.0",
 		"@atlaskit/emoji": "^67.8.0",
 		"@atlaskit/feature-gate-js-client": "^4.19.0",
-		"@atlaskit/icon": "^22.21.0",
-		"@atlaskit/link-datasource": "^3.4.0",
+		"@atlaskit/icon": "^22.22.0",
+		"@atlaskit/link-datasource": "^3.5.0",
 		"@atlaskit/media-card": "^78.5.0",
 		"@atlaskit/media-client": "^28.0.0",
 		"@atlaskit/media-client-react": "^2.2.0",
@@ -46,7 +46,7 @@
 		"@atlaskit/media-ui": "^25.15.0",
 		"@atlaskit/media-viewer": "^49.0.0",
 		"@atlaskit/platform-feature-flags": "^0.3.0",
-		"@atlaskit/smart-card": "^29.0.0",
+		"@atlaskit/smart-card": "^29.1.0",
 		"@atlaskit/status": "^1.5.0",
 		"@atlaskit/task-decision": "^17.11.0",
 		"@atlaskit/theme": "^13.0.0",