@atlaskit/renderer 113.1.1 → 113.2.0

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # @atlaskit/renderer
 
+## 113.2.0
+
+### Minor Changes
+
+- [#112653](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/112653)
+  [`73371f1e55712`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/73371f1e55712) -
+  Accepts extension viewport size list as a prop from confluence FE in order to render this size on
+  SSR.
+
+### Patch Changes
+
+- [#122260](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/122260)
+  [`10eabde04f773`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/10eabde04f773) -
+  FD-80149: cleans up platform_editor_react18_phase2_v2 from with_editor_actions
+- Updated dependencies
+
+## 113.1.2
+
+### Patch Changes
+
+- [#118536](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/118536)
+  [`b46814682ebf8`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/b46814682ebf8) -
+  [ux] [ED-26716] Review and fix usage of querySelectors in renderer table
+- Updated dependencies
+
 ## 113.1.1
 
 ### Patch Changes

package/dist/cjs/react/index.js

@@ -197,6 +197,7 @@ var ReactSerializer = exports.default = /*#__PURE__*/function () {
     this.media = init.media;
     this.emojiResourceConfig = init.emojiResourceConfig;
     this.smartLinks = init.smartLinks;
+    this.extensionViewportSizes = init.extensionViewportSizes;
     this.allowSelectAllTrap = init.allowSelectAllTrap;
     this.nodeComponents = init.nodeComponents;
     this.allowWindowedCodeBlock = init.allowWindowedCodeBlock;
@@ -227,6 +228,9 @@ var ReactSerializer = exports.default = /*#__PURE__*/function () {
           return this.getMediaProps(node, path);
         case 'emoji':
           return this.getEmojiProps(node);
+        case 'extension':
+        case 'bodiedExtension':
+          return this.getExtensionProps(node, path);
         case 'mediaGroup':
           return this.getMediaGroupProps(node);
         case 'mediaInline':
@@ -488,6 +492,14 @@ var ReactSerializer = exports.default = /*#__PURE__*/function () {
         allowAnnotationsDraftMode: this.surroundTextNodesWithTextWrapper
       });
     }
+  }, {
+    key: "getExtensionProps",
+    value: function getExtensionProps(node) {
+      var path = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+      return _objectSpread(_objectSpread({}, this.getProps(node, path)), {}, {
+        extensionViewportSizes: this.extensionViewportSizes
+      });
+    }
   }, {
     key: "getEmojiProps",
     value: function getEmojiProps(node) {

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

@@ -9,6 +9,7 @@ var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/cl
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _styles = require("@atlaskit/editor-common/styles");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var TableStickyScrollbar = exports.TableStickyScrollbar = /*#__PURE__*/function () {
   function TableStickyScrollbar(wrapper) {
     var _this = this;
@@ -43,11 +44,14 @@ var TableStickyScrollbar = exports.TableStickyScrollbar = /*#__PURE__*/function
   }, {
     key: "init",
     value: function init() {
-      var _this$wrapper$parentE;
+      var _this$wrapper$parentE, _this$wrapper$parentE2;
       if (!this.wrapper) {
         return;
       }
-      this.stickyScrollbarContainerElement = (_this$wrapper$parentE = this.wrapper.parentElement) === null || _this$wrapper$parentE === void 0 ? void 0 : _this$wrapper$parentE.querySelector(".".concat(_styles.TableSharedCssClassName.TABLE_STICKY_SCROLLBAR_CONTAINER));
+      var scrollbarContainers = (_this$wrapper$parentE = this.wrapper.parentElement) === null || _this$wrapper$parentE === void 0 ? void 0 : _this$wrapper$parentE.querySelectorAll(".".concat(_styles.TableSharedCssClassName.TABLE_STICKY_SCROLLBAR_CONTAINER));
+
+      // eslint-disable-next-line @atlaskit/editor/no-as-casting
+      this.stickyScrollbarContainerElement = (0, _platformFeatureFlags.fg)('platform_editor_querySelector_fix_table_renderer') ? scrollbarContainers === null || scrollbarContainers === void 0 ? void 0 : scrollbarContainers.item(scrollbarContainers.length - 1) : (_this$wrapper$parentE2 = this.wrapper.parentElement) === null || _this$wrapper$parentE2 === void 0 ? void 0 : _this$wrapper$parentE2.querySelector(".".concat(_styles.TableSharedCssClassName.TABLE_STICKY_SCROLLBAR_CONTAINER));
       if (this.stickyScrollbarContainerElement) {
         // Ignored via go/ees005
         // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
@@ -62,7 +66,8 @@ var TableStickyScrollbar = exports.TableStickyScrollbar = /*#__PURE__*/function
     value: function createIntersectionObserver() {
       var _this2 = this,
         _this$wrapper,
-        _this$wrapper2;
+        _this$wrapper2,
+        _this$wrapper3;
       this.rendererScrollableElement = window.document;
       if (!this.rendererScrollableElement || !this.wrapper) {
         return;
@@ -85,14 +90,14 @@ var TableStickyScrollbar = exports.TableStickyScrollbar = /*#__PURE__*/function
       }, {
         root: this.rendererScrollableElement
       });
+      var bottomSentinels = (_this$wrapper = this.wrapper) === null || _this$wrapper === void 0 || (_this$wrapper = _this$wrapper.parentElement) === null || _this$wrapper === void 0 ? void 0 : _this$wrapper.getElementsByClassName(_styles.TableSharedCssClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_BOTTOM);
+      this.sentinels.bottom = (0, _platformFeatureFlags.fg)('platform_editor_querySelector_fix_table_renderer') ? // eslint-disable-next-line @atlaskit/editor/no-as-casting
+      bottomSentinels === null || bottomSentinels === void 0 ? void 0 : bottomSentinels.item(bottomSentinels.length - 1) : // eslint-disable-next-line @atlaskit/editor/no-as-casting
+      (_this$wrapper2 = this.wrapper) === null || _this$wrapper2 === void 0 || (_this$wrapper2 = _this$wrapper2.parentElement) === null || _this$wrapper2 === void 0 || (_this$wrapper2 = _this$wrapper2.getElementsByClassName(_styles.TableSharedCssClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_BOTTOM)) === null || _this$wrapper2 === void 0 ? void 0 : _this$wrapper2.item(0);
 
       // Ignored via go/ees005
       // eslint-disable-next-line @atlaskit/editor/no-as-casting
-      this.sentinels.bottom = (_this$wrapper = this.wrapper) === null || _this$wrapper === void 0 || (_this$wrapper = _this$wrapper.parentElement) === null || _this$wrapper === void 0 || (_this$wrapper = _this$wrapper.getElementsByClassName(_styles.TableSharedCssClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_BOTTOM)) === null || _this$wrapper === void 0 ? void 0 : _this$wrapper.item(0);
-
-      // Ignored via go/ees005
-      // eslint-disable-next-line @atlaskit/editor/no-as-casting
-      this.sentinels.top = (_this$wrapper2 = this.wrapper) === null || _this$wrapper2 === void 0 || (_this$wrapper2 = _this$wrapper2.parentElement) === null || _this$wrapper2 === void 0 || (_this$wrapper2 = _this$wrapper2.getElementsByClassName(_styles.TableSharedCssClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_TOP)) === null || _this$wrapper2 === void 0 ? void 0 : _this$wrapper2.item(0);
+      this.sentinels.top = (_this$wrapper3 = this.wrapper) === null || _this$wrapper3 === void 0 || (_this$wrapper3 = _this$wrapper3.parentElement) === null || _this$wrapper3 === void 0 || (_this$wrapper3 = _this$wrapper3.getElementsByClassName(_styles.TableSharedCssClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_TOP)) === null || _this$wrapper3 === void 0 ? void 0 : _this$wrapper3.item(0);
       [this.sentinels.bottom, this.sentinels.top].forEach(function (el) {
         return (
           // Ignored via go/ees005

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

@@ -21,7 +21,9 @@ var BodiedExtension = function BodiedExtension(props) {
     _props$path = props.path,
     path = _props$path === void 0 ? [] : _props$path,
     extensionKey = props.extensionKey,
-    extensionType = props.extensionType;
+    extensionType = props.extensionType,
+    parameters = props.parameters,
+    extensionViewportSizes = props.extensionViewportSizes;
   var _useAnalyticsEvents = (0, _analyticsNext.useAnalyticsEvents)(),
     createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
   var removeOverflow = _react.default.Children.toArray(children)
@@ -51,7 +53,7 @@ var BodiedExtension = function BodiedExtension(props) {
         // Return the content directly if it's a valid JSX.Element
         return (0, _extension.renderExtension)(result, layout, {
           isTopLevel: path.length < 1
-        }, removeOverflow);
+        }, removeOverflow, parameters === null || parameters === void 0 ? void 0 : parameters.extensionId, extensionViewportSizes);
       }
     } catch (e) {
       /** We don't want this error to block renderer */
@@ -61,7 +63,7 @@ var BodiedExtension = function BodiedExtension(props) {
     // Always return default content if anything goes wrong
     return (0, _extension.renderExtension)(children, layout, {
       isTopLevel: path.length < 1
-    }, removeOverflow);
+    }, removeOverflow, parameters === null || parameters === void 0 ? void 0 : parameters.extensionId, extensionViewportSizes);
   })));
 };
 var _default = exports.default = BodiedExtension;

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

@@ -11,9 +11,32 @@ var _ExtensionRenderer = _interopRequireDefault(require("../../ui/ExtensionRende
 var _ui = require("@atlaskit/editor-common/ui");
 var _utils = require("@atlaskit/editor-common/utils");
 var _consts = require("../../consts");
+var viewportSizes = ['small', 'medium', 'default', 'large', 'xlarge'];
+// Mirrors sizes from https://stash.atlassian.com/projects/ATLASSIAN/repos/atlassian-frontend-monorepo/browse/platform/packages/forge/xen-editor-provider/src/render/renderers/ForgeUIExtension.tsx
+var macroHeights = {
+  small: '112px',
+  medium: '262px',
+  default: '262px',
+  large: '524px',
+  xlarge: '1048px'
+};
+var getViewportSize = function getViewportSize(extensionId, extensionViewportSizes) {
+  if (!Array.isArray(extensionViewportSizes) || !extensionId) {
+    return;
+  }
+  var extension = extensionViewportSizes.find(function (extension) {
+    return extension.extensionId === extensionId;
+  });
+  if (extension) {
+    var viewportSize = extension.viewportSize && viewportSizes.includes(extension.viewportSize) ? extension.viewportSize : 'default';
+    return macroHeights[viewportSize];
+  }
+};
 var renderExtension = exports.renderExtension = function renderExtension(content, layout) {
   var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
   var removeOverflow = arguments.length > 3 ? arguments[3] : undefined;
+  var extensionId = arguments.length > 4 ? arguments[4] : undefined;
+  var extensionViewportSizes = arguments.length > 5 ? arguments[5] : undefined;
   var overflowContainerClass = !removeOverflow ? _consts.RendererCssClassName.EXTENSION_OVERFLOW_CONTAINER : '';
 
   // by default, we assume the extension is at top level, (direct child of doc node)
@@ -21,6 +44,7 @@ var renderExtension = exports.renderExtension = function renderExtension(content
     _ref$isTopLevel = _ref.isTopLevel,
     isTopLevel = _ref$isTopLevel === void 0 ? true : _ref$isTopLevel;
   var centerAlignClass = isTopLevel && ['wide', 'full-width'].includes(layout) ? _consts.RendererCssClassName.EXTENSION_CENTER_ALIGN : '';
+  var viewportSize = getViewportSize(extensionId, extensionViewportSizes);
   return /*#__PURE__*/_react.default.createElement(_ui.WidthConsumer, null, function (_ref2) {
     var width = _ref2.width;
     return /*#__PURE__*/_react.default.createElement("div", {
@@ -30,7 +54,8 @@ var renderExtension = exports.renderExtension = function renderExtension(content
       className: "".concat(_consts.RendererCssClassName.EXTENSION, " ").concat(options.shadowClassNames, " ").concat(centerAlignClass),
       style: {
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-        width: isTopLevel ? (0, _utils.calcBreakoutWidth)(layout, width) : '100%'
+        width: isTopLevel ? (0, _utils.calcBreakoutWidth)(layout, width) : '100%',
+        minHeight: viewportSize
       },
       "data-layout": layout
     }, /*#__PURE__*/_react.default.createElement("div", {
@@ -45,7 +70,9 @@ var Extension = function Extension(props) {
     handleRef = props.handleRef,
     shadowClassNames = props.shadowClassNames,
     _props$path = props.path,
-    path = _props$path === void 0 ? [] : _props$path;
+    path = _props$path === void 0 ? [] : _props$path,
+    extensionViewportSizes = props.extensionViewportSizes,
+    parameters = props.parameters;
   return /*#__PURE__*/_react.default.createElement(_ExtensionRenderer.default
   // Ignored via go/ees005
   // eslint-disable-next-line react/jsx-props-no-spreading
@@ -60,19 +87,18 @@ var Extension = function Extension(props) {
           isTopLevel: path.length < 1,
           handleRef: handleRef,
           shadowClassNames: shadowClassNames
-        });
+        }, undefined, parameters === null || parameters === void 0 ? void 0 : parameters.extensionId, extensionViewportSizes);
       }
     } catch (e) {
       /** We don't want this error to block renderer */
       /** We keep rendering the default content */
     }
-
     // Always return default content if anything goes wrong
     return renderExtension(text || 'extension', layout, {
       isTopLevel: path.length < 1,
       handleRef: handleRef,
       shadowClassNames: shadowClassNames
-    });
+    }, undefined, parameters === null || parameters === void 0 ? void 0 : parameters.extensionId, extensionViewportSizes);
   });
 };
 var _default = exports.default = (0, _ui.overflowShadow)(Extension, {

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 = "113.1.1";
+var packageVersion = "113.2.0";
 var setAsQueryContainerStyles = (0, _react2.css)({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size',
@@ -293,6 +293,7 @@ var __RendererClassComponent = exports.__RendererClassComponent = /*#__PURE__*/f
         media: props.media,
         emojiResourceConfig: props.emojiResourceConfig,
         smartLinks: props.smartLinks,
+        extensionViewportSizes: props.extensionViewportSizes,
         allowCopyToClipboard: props.allowCopyToClipboard,
         allowWrapCodeBlock: props.allowWrapCodeBlock,
         allowCustomPanels: props.allowCustomPanels,
@@ -628,6 +629,7 @@ var RendererFunctionalComponent = function RendererFunctionalComponent(props) {
       media: props.media,
       emojiResourceConfig: props.emojiResourceConfig,
       smartLinks: props.smartLinks,
+      extensionViewportSizes: props.extensionViewportSizes,
       allowCopyToClipboard: props.allowCopyToClipboard,
       allowWrapCodeBlock: props.allowWrapCodeBlock,
       allowCustomPanels: props.allowCustomPanels,

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

@@ -206,7 +206,7 @@ var rendererStyles = exports.rendererStyles = function rendererStyles(wrapperPro
     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)(_templateObject11 || (_templateObject11 = (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, _styles.smartCardSharedStyles, getAnnotationStyles(wrapperProps), "var(--ds-font-family-body, ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"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, "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 : '');
+    return (0, _react.css)(_templateObject11 || (_templateObject11 = (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, _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, "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) {

package/dist/es2019/react/index.js

@@ -183,6 +183,7 @@ export default class ReactSerializer {
     this.media = init.media;
     this.emojiResourceConfig = init.emojiResourceConfig;
     this.smartLinks = init.smartLinks;
+    this.extensionViewportSizes = init.extensionViewportSizes;
     this.allowSelectAllTrap = init.allowSelectAllTrap;
     this.nodeComponents = init.nodeComponents;
     this.allowWindowedCodeBlock = init.allowWindowedCodeBlock;
@@ -209,6 +210,9 @@ export default class ReactSerializer {
         return this.getMediaProps(node, path);
       case 'emoji':
         return this.getEmojiProps(node);
+      case 'extension':
+      case 'bodiedExtension':
+        return this.getExtensionProps(node, path);
       case 'mediaGroup':
         return this.getMediaGroupProps(node);
       case 'mediaInline':
@@ -442,6 +446,12 @@ export default class ReactSerializer {
       allowAnnotationsDraftMode: this.surroundTextNodesWithTextWrapper
     };
   }
+  getExtensionProps(node, path = []) {
+    return {
+      ...this.getProps(node, path),
+      extensionViewportSizes: this.extensionViewportSizes
+    };
+  }
   getEmojiProps(node) {
     return {
       ...this.getProps(node),

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

@@ -1,5 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { TableSharedCssClassName } from '@atlaskit/editor-common/styles';
+import { fg } from '@atlaskit/platform-feature-flags';
 export class TableStickyScrollbar {
   constructor(wrapper) {
     _defineProperty(this, "sentinels", {});
@@ -26,11 +27,14 @@ export class TableStickyScrollbar {
     }
   }
   init() {
-    var _this$wrapper$parentE;
+    var _this$wrapper$parentE, _this$wrapper$parentE2;
     if (!this.wrapper) {
       return;
     }
-    this.stickyScrollbarContainerElement = (_this$wrapper$parentE = this.wrapper.parentElement) === null || _this$wrapper$parentE === void 0 ? void 0 : _this$wrapper$parentE.querySelector(`.${TableSharedCssClassName.TABLE_STICKY_SCROLLBAR_CONTAINER}`);
+    const scrollbarContainers = (_this$wrapper$parentE = this.wrapper.parentElement) === null || _this$wrapper$parentE === void 0 ? void 0 : _this$wrapper$parentE.querySelectorAll(`.${TableSharedCssClassName.TABLE_STICKY_SCROLLBAR_CONTAINER}`);
+
+    // eslint-disable-next-line @atlaskit/editor/no-as-casting
+    this.stickyScrollbarContainerElement = fg('platform_editor_querySelector_fix_table_renderer') ? scrollbarContainers === null || scrollbarContainers === void 0 ? void 0 : scrollbarContainers.item(scrollbarContainers.length - 1) : (_this$wrapper$parentE2 = this.wrapper.parentElement) === null || _this$wrapper$parentE2 === void 0 ? void 0 : _this$wrapper$parentE2.querySelector(`.${TableSharedCssClassName.TABLE_STICKY_SCROLLBAR_CONTAINER}`);
     if (this.stickyScrollbarContainerElement) {
       // Ignored via go/ees005
       // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
@@ -41,7 +45,7 @@ export class TableStickyScrollbar {
     this.createIntersectionObserver();
   }
   createIntersectionObserver() {
-    var _this$wrapper, _this$wrapper$parentE2, _this$wrapper$parentE3, _this$wrapper2, _this$wrapper2$parent, _this$wrapper2$parent2;
+    var _this$wrapper, _this$wrapper$parentE3, _this$wrapper2, _this$wrapper2$parent, _this$wrapper2$parent2, _this$wrapper3, _this$wrapper3$parent, _this$wrapper3$parent2;
     this.rendererScrollableElement = window.document;
     if (!this.rendererScrollableElement || !this.wrapper) {
       return;
@@ -64,14 +68,14 @@ export class TableStickyScrollbar {
     }, {
       root: this.rendererScrollableElement
     });
+    const bottomSentinels = (_this$wrapper = this.wrapper) === null || _this$wrapper === void 0 ? void 0 : (_this$wrapper$parentE3 = _this$wrapper.parentElement) === null || _this$wrapper$parentE3 === void 0 ? void 0 : _this$wrapper$parentE3.getElementsByClassName(TableSharedCssClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_BOTTOM);
+    this.sentinels.bottom = fg('platform_editor_querySelector_fix_table_renderer') ? // eslint-disable-next-line @atlaskit/editor/no-as-casting
+    bottomSentinels === null || bottomSentinels === void 0 ? void 0 : bottomSentinels.item(bottomSentinels.length - 1) : // eslint-disable-next-line @atlaskit/editor/no-as-casting
+    (_this$wrapper2 = this.wrapper) === null || _this$wrapper2 === void 0 ? void 0 : (_this$wrapper2$parent = _this$wrapper2.parentElement) === null || _this$wrapper2$parent === void 0 ? void 0 : (_this$wrapper2$parent2 = _this$wrapper2$parent.getElementsByClassName(TableSharedCssClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_BOTTOM)) === null || _this$wrapper2$parent2 === void 0 ? void 0 : _this$wrapper2$parent2.item(0);
 
     // Ignored via go/ees005
     // eslint-disable-next-line @atlaskit/editor/no-as-casting
-    this.sentinels.bottom = (_this$wrapper = this.wrapper) === null || _this$wrapper === void 0 ? void 0 : (_this$wrapper$parentE2 = _this$wrapper.parentElement) === null || _this$wrapper$parentE2 === void 0 ? void 0 : (_this$wrapper$parentE3 = _this$wrapper$parentE2.getElementsByClassName(TableSharedCssClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_BOTTOM)) === null || _this$wrapper$parentE3 === void 0 ? void 0 : _this$wrapper$parentE3.item(0);
-
-    // Ignored via go/ees005
-    // eslint-disable-next-line @atlaskit/editor/no-as-casting
-    this.sentinels.top = (_this$wrapper2 = this.wrapper) === null || _this$wrapper2 === void 0 ? void 0 : (_this$wrapper2$parent = _this$wrapper2.parentElement) === null || _this$wrapper2$parent === void 0 ? void 0 : (_this$wrapper2$parent2 = _this$wrapper2$parent.getElementsByClassName(TableSharedCssClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_TOP)) === null || _this$wrapper2$parent2 === void 0 ? void 0 : _this$wrapper2$parent2.item(0);
+    this.sentinels.top = (_this$wrapper3 = this.wrapper) === null || _this$wrapper3 === void 0 ? void 0 : (_this$wrapper3$parent = _this$wrapper3.parentElement) === null || _this$wrapper3$parent === void 0 ? void 0 : (_this$wrapper3$parent2 = _this$wrapper3$parent.getElementsByClassName(TableSharedCssClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_TOP)) === null || _this$wrapper3$parent2 === void 0 ? void 0 : _this$wrapper3$parent2.item(0);
     [this.sentinels.bottom, this.sentinels.top].forEach(el =>
     // Ignored via go/ees005
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion

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

@@ -13,7 +13,9 @@ const BodiedExtension = props => {
     layout = 'default',
     path = [],
     extensionKey,
-    extensionType
+    extensionType,
+    parameters,
+    extensionViewportSizes
   } = props;
   const {
     createAnalyticsEvent
@@ -44,7 +46,7 @@ const BodiedExtension = props => {
         // Return the content directly if it's a valid JSX.Element
         return renderExtension(result, layout, {
           isTopLevel: path.length < 1
-        }, removeOverflow);
+        }, removeOverflow, parameters === null || parameters === void 0 ? void 0 : parameters.extensionId, extensionViewportSizes);
       }
     } catch (e) {
       /** We don't want this error to block renderer */
@@ -54,7 +56,7 @@ const BodiedExtension = props => {
     // Always return default content if anything goes wrong
     return renderExtension(children, layout, {
       isTopLevel: path.length < 1
-    }, removeOverflow);
+    }, removeOverflow, parameters === null || parameters === void 0 ? void 0 : parameters.extensionId, extensionViewportSizes);
   })));
 };
 export default BodiedExtension;

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

@@ -4,7 +4,26 @@ import ExtensionRenderer from '../../ui/ExtensionRenderer';
 import { overflowShadow, WidthConsumer } from '@atlaskit/editor-common/ui';
 import { calcBreakoutWidth } from '@atlaskit/editor-common/utils';
 import { RendererCssClassName } from '../../consts';
-export const renderExtension = (content, layout, options = {}, removeOverflow) => {
+const viewportSizes = ['small', 'medium', 'default', 'large', 'xlarge'];
+// Mirrors sizes from https://stash.atlassian.com/projects/ATLASSIAN/repos/atlassian-frontend-monorepo/browse/platform/packages/forge/xen-editor-provider/src/render/renderers/ForgeUIExtension.tsx
+const macroHeights = {
+  small: '112px',
+  medium: '262px',
+  default: '262px',
+  large: '524px',
+  xlarge: '1048px'
+};
+const getViewportSize = (extensionId, extensionViewportSizes) => {
+  if (!Array.isArray(extensionViewportSizes) || !extensionId) {
+    return;
+  }
+  const extension = extensionViewportSizes.find(extension => extension.extensionId === extensionId);
+  if (extension) {
+    const viewportSize = extension.viewportSize && viewportSizes.includes(extension.viewportSize) ? extension.viewportSize : 'default';
+    return macroHeights[viewportSize];
+  }
+};
+export const renderExtension = (content, layout, options = {}, removeOverflow, extensionId, extensionViewportSizes) => {
   const overflowContainerClass = !removeOverflow ? RendererCssClassName.EXTENSION_OVERFLOW_CONTAINER : '';
 
   // by default, we assume the extension is at top level, (direct child of doc node)
@@ -12,6 +31,7 @@ export const renderExtension = (content, layout, options = {}, removeOverflow) =
     isTopLevel = true
   } = options || {};
   const centerAlignClass = isTopLevel && ['wide', 'full-width'].includes(layout) ? RendererCssClassName.EXTENSION_CENTER_ALIGN : '';
+  const viewportSize = getViewportSize(extensionId, extensionViewportSizes);
   return /*#__PURE__*/React.createElement(WidthConsumer, null, ({
     width
   }) => /*#__PURE__*/React.createElement("div", {
@@ -21,7 +41,8 @@ export const renderExtension = (content, layout, options = {}, removeOverflow) =
     className: `${RendererCssClassName.EXTENSION} ${options.shadowClassNames} ${centerAlignClass}`,
     style: {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-      width: isTopLevel ? calcBreakoutWidth(layout, width) : '100%'
+      width: isTopLevel ? calcBreakoutWidth(layout, width) : '100%',
+      minHeight: viewportSize
     },
     "data-layout": layout
   }, /*#__PURE__*/React.createElement("div", {
@@ -34,7 +55,9 @@ const Extension = props => {
     layout = 'default',
     handleRef,
     shadowClassNames,
-    path = []
+    path = [],
+    extensionViewportSizes,
+    parameters
   } = props;
   return /*#__PURE__*/React.createElement(ExtensionRenderer
   // Ignored via go/ees005
@@ -51,19 +74,18 @@ const Extension = props => {
           isTopLevel: path.length < 1,
           handleRef,
           shadowClassNames
-        });
+        }, undefined, parameters === null || parameters === void 0 ? void 0 : parameters.extensionId, extensionViewportSizes);
       }
     } catch (e) {
       /** We don't want this error to block renderer */
       /** We keep rendering the default content */
     }
-
     // Always return default content if anything goes wrong
     return renderExtension(text || 'extension', layout, {
       isTopLevel: path.length < 1,
       handleRef,
       shadowClassNames
-    });
+    }, undefined, parameters === null || parameters === void 0 ? void 0 : parameters.extensionId, extensionViewportSizes);
   });
 };
 export default overflowShadow(Extension, {

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

@@ -46,7 +46,7 @@ import { ValidationContext } from './ValidationContext';
 export const NORMAL_SEVERITY_THRESHOLD = 2000;
 export const DEGRADED_SEVERITY_THRESHOLD = 3000;
 const packageName = "@atlaskit/renderer";
-const packageVersion = "113.1.1";
+const packageVersion = "113.2.0";
 const setAsQueryContainerStyles = css({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size',
@@ -273,6 +273,7 @@ export class __RendererClassComponent extends PureComponent {
       media: props.media,
       emojiResourceConfig: props.emojiResourceConfig,
       smartLinks: props.smartLinks,
+      extensionViewportSizes: props.extensionViewportSizes,
       allowCopyToClipboard: props.allowCopyToClipboard,
       allowWrapCodeBlock: props.allowWrapCodeBlock,
       allowCustomPanels: props.allowCustomPanels,
@@ -608,6 +609,7 @@ const RendererFunctionalComponent = props => {
       media: props.media,
       emojiResourceConfig: props.emojiResourceConfig,
       smartLinks: props.smartLinks,
+      extensionViewportSizes: props.extensionViewportSizes,
       allowCopyToClipboard: props.allowCopyToClipboard,
       allowWrapCodeBlock: props.allowWrapCodeBlock,
       allowCustomPanels: props.allowCustomPanels,

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

@@ -612,7 +612,7 @@ export const rendererStyles = wrapperProps => theme => {
 		${getAnnotationStyles(wrapperProps)}
 
 		& .UnknownBlock {
-			font-family: ${"var(--ds-font-family-body, ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"};
+			font-family: ${"var(--ds-font-family-body, ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)"};
 			font-size: ${relativeFontSizeToBase16(14)};
 			font-weight: ${"var(--ds-font-weight-regular, 400)"};
 			white-space: pre-wrap;

package/dist/esm/react/index.js

@@ -190,6 +190,7 @@ var ReactSerializer = /*#__PURE__*/function () {
     this.media = init.media;
     this.emojiResourceConfig = init.emojiResourceConfig;
     this.smartLinks = init.smartLinks;
+    this.extensionViewportSizes = init.extensionViewportSizes;
     this.allowSelectAllTrap = init.allowSelectAllTrap;
     this.nodeComponents = init.nodeComponents;
     this.allowWindowedCodeBlock = init.allowWindowedCodeBlock;
@@ -220,6 +221,9 @@ var ReactSerializer = /*#__PURE__*/function () {
           return this.getMediaProps(node, path);
         case 'emoji':
           return this.getEmojiProps(node);
+        case 'extension':
+        case 'bodiedExtension':
+          return this.getExtensionProps(node, path);
         case 'mediaGroup':
           return this.getMediaGroupProps(node);
         case 'mediaInline':
@@ -481,6 +485,14 @@ var ReactSerializer = /*#__PURE__*/function () {
         allowAnnotationsDraftMode: this.surroundTextNodesWithTextWrapper
       });
     }
+  }, {
+    key: "getExtensionProps",
+    value: function getExtensionProps(node) {
+      var path = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+      return _objectSpread(_objectSpread({}, this.getProps(node, path)), {}, {
+        extensionViewportSizes: this.extensionViewportSizes
+      });
+    }
   }, {
     key: "getEmojiProps",
     value: function getEmojiProps(node) {

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

@@ -2,6 +2,7 @@ import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { TableSharedCssClassName } from '@atlaskit/editor-common/styles';
+import { fg } from '@atlaskit/platform-feature-flags';
 export var TableStickyScrollbar = /*#__PURE__*/function () {
   function TableStickyScrollbar(wrapper) {
     var _this = this;
@@ -36,11 +37,14 @@ export var TableStickyScrollbar = /*#__PURE__*/function () {
   }, {
     key: "init",
     value: function init() {
-      var _this$wrapper$parentE;
+      var _this$wrapper$parentE, _this$wrapper$parentE2;
       if (!this.wrapper) {
         return;
       }
-      this.stickyScrollbarContainerElement = (_this$wrapper$parentE = this.wrapper.parentElement) === null || _this$wrapper$parentE === void 0 ? void 0 : _this$wrapper$parentE.querySelector(".".concat(TableSharedCssClassName.TABLE_STICKY_SCROLLBAR_CONTAINER));
+      var scrollbarContainers = (_this$wrapper$parentE = this.wrapper.parentElement) === null || _this$wrapper$parentE === void 0 ? void 0 : _this$wrapper$parentE.querySelectorAll(".".concat(TableSharedCssClassName.TABLE_STICKY_SCROLLBAR_CONTAINER));
+
+      // eslint-disable-next-line @atlaskit/editor/no-as-casting
+      this.stickyScrollbarContainerElement = fg('platform_editor_querySelector_fix_table_renderer') ? scrollbarContainers === null || scrollbarContainers === void 0 ? void 0 : scrollbarContainers.item(scrollbarContainers.length - 1) : (_this$wrapper$parentE2 = this.wrapper.parentElement) === null || _this$wrapper$parentE2 === void 0 ? void 0 : _this$wrapper$parentE2.querySelector(".".concat(TableSharedCssClassName.TABLE_STICKY_SCROLLBAR_CONTAINER));
       if (this.stickyScrollbarContainerElement) {
         // Ignored via go/ees005
         // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
@@ -55,7 +59,8 @@ export var TableStickyScrollbar = /*#__PURE__*/function () {
     value: function createIntersectionObserver() {
       var _this2 = this,
         _this$wrapper,
-        _this$wrapper2;
+        _this$wrapper2,
+        _this$wrapper3;
       this.rendererScrollableElement = window.document;
       if (!this.rendererScrollableElement || !this.wrapper) {
         return;
@@ -78,14 +83,14 @@ export var TableStickyScrollbar = /*#__PURE__*/function () {
       }, {
         root: this.rendererScrollableElement
       });
+      var bottomSentinels = (_this$wrapper = this.wrapper) === null || _this$wrapper === void 0 || (_this$wrapper = _this$wrapper.parentElement) === null || _this$wrapper === void 0 ? void 0 : _this$wrapper.getElementsByClassName(TableSharedCssClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_BOTTOM);
+      this.sentinels.bottom = fg('platform_editor_querySelector_fix_table_renderer') ? // eslint-disable-next-line @atlaskit/editor/no-as-casting
+      bottomSentinels === null || bottomSentinels === void 0 ? void 0 : bottomSentinels.item(bottomSentinels.length - 1) : // eslint-disable-next-line @atlaskit/editor/no-as-casting
+      (_this$wrapper2 = this.wrapper) === null || _this$wrapper2 === void 0 || (_this$wrapper2 = _this$wrapper2.parentElement) === null || _this$wrapper2 === void 0 || (_this$wrapper2 = _this$wrapper2.getElementsByClassName(TableSharedCssClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_BOTTOM)) === null || _this$wrapper2 === void 0 ? void 0 : _this$wrapper2.item(0);
 
       // Ignored via go/ees005
       // eslint-disable-next-line @atlaskit/editor/no-as-casting
-      this.sentinels.bottom = (_this$wrapper = this.wrapper) === null || _this$wrapper === void 0 || (_this$wrapper = _this$wrapper.parentElement) === null || _this$wrapper === void 0 || (_this$wrapper = _this$wrapper.getElementsByClassName(TableSharedCssClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_BOTTOM)) === null || _this$wrapper === void 0 ? void 0 : _this$wrapper.item(0);
-
-      // Ignored via go/ees005
-      // eslint-disable-next-line @atlaskit/editor/no-as-casting
-      this.sentinels.top = (_this$wrapper2 = this.wrapper) === null || _this$wrapper2 === void 0 || (_this$wrapper2 = _this$wrapper2.parentElement) === null || _this$wrapper2 === void 0 || (_this$wrapper2 = _this$wrapper2.getElementsByClassName(TableSharedCssClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_TOP)) === null || _this$wrapper2 === void 0 ? void 0 : _this$wrapper2.item(0);
+      this.sentinels.top = (_this$wrapper3 = this.wrapper) === null || _this$wrapper3 === void 0 || (_this$wrapper3 = _this$wrapper3.parentElement) === null || _this$wrapper3 === void 0 || (_this$wrapper3 = _this$wrapper3.getElementsByClassName(TableSharedCssClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_TOP)) === null || _this$wrapper3 === void 0 ? void 0 : _this$wrapper3.item(0);
       [this.sentinels.bottom, this.sentinels.top].forEach(function (el) {
         return (
           // Ignored via go/ees005

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

@@ -14,7 +14,9 @@ var BodiedExtension = function BodiedExtension(props) {
     _props$path = props.path,
     path = _props$path === void 0 ? [] : _props$path,
     extensionKey = props.extensionKey,
-    extensionType = props.extensionType;
+    extensionType = props.extensionType,
+    parameters = props.parameters,
+    extensionViewportSizes = props.extensionViewportSizes;
   var _useAnalyticsEvents = useAnalyticsEvents(),
     createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
   var removeOverflow = React.Children.toArray(children)
@@ -44,7 +46,7 @@ var BodiedExtension = function BodiedExtension(props) {
         // Return the content directly if it's a valid JSX.Element
         return renderExtension(result, layout, {
           isTopLevel: path.length < 1
-        }, removeOverflow);
+        }, removeOverflow, parameters === null || parameters === void 0 ? void 0 : parameters.extensionId, extensionViewportSizes);
       }
     } catch (e) {
       /** We don't want this error to block renderer */
@@ -54,7 +56,7 @@ var BodiedExtension = function BodiedExtension(props) {
     // Always return default content if anything goes wrong
     return renderExtension(children, layout, {
       isTopLevel: path.length < 1
-    }, removeOverflow);
+    }, removeOverflow, parameters === null || parameters === void 0 ? void 0 : parameters.extensionId, extensionViewportSizes);
   })));
 };
 export default BodiedExtension;

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

@@ -4,9 +4,32 @@ import ExtensionRenderer from '../../ui/ExtensionRenderer';
 import { overflowShadow, WidthConsumer } from '@atlaskit/editor-common/ui';
 import { calcBreakoutWidth } from '@atlaskit/editor-common/utils';
 import { RendererCssClassName } from '../../consts';
+var viewportSizes = ['small', 'medium', 'default', 'large', 'xlarge'];
+// Mirrors sizes from https://stash.atlassian.com/projects/ATLASSIAN/repos/atlassian-frontend-monorepo/browse/platform/packages/forge/xen-editor-provider/src/render/renderers/ForgeUIExtension.tsx
+var macroHeights = {
+  small: '112px',
+  medium: '262px',
+  default: '262px',
+  large: '524px',
+  xlarge: '1048px'
+};
+var getViewportSize = function getViewportSize(extensionId, extensionViewportSizes) {
+  if (!Array.isArray(extensionViewportSizes) || !extensionId) {
+    return;
+  }
+  var extension = extensionViewportSizes.find(function (extension) {
+    return extension.extensionId === extensionId;
+  });
+  if (extension) {
+    var viewportSize = extension.viewportSize && viewportSizes.includes(extension.viewportSize) ? extension.viewportSize : 'default';
+    return macroHeights[viewportSize];
+  }
+};
 export var renderExtension = function renderExtension(content, layout) {
   var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
   var removeOverflow = arguments.length > 3 ? arguments[3] : undefined;
+  var extensionId = arguments.length > 4 ? arguments[4] : undefined;
+  var extensionViewportSizes = arguments.length > 5 ? arguments[5] : undefined;
   var overflowContainerClass = !removeOverflow ? RendererCssClassName.EXTENSION_OVERFLOW_CONTAINER : '';
 
   // by default, we assume the extension is at top level, (direct child of doc node)
@@ -14,6 +37,7 @@ export var renderExtension = function renderExtension(content, layout) {
     _ref$isTopLevel = _ref.isTopLevel,
     isTopLevel = _ref$isTopLevel === void 0 ? true : _ref$isTopLevel;
   var centerAlignClass = isTopLevel && ['wide', 'full-width'].includes(layout) ? RendererCssClassName.EXTENSION_CENTER_ALIGN : '';
+  var viewportSize = getViewportSize(extensionId, extensionViewportSizes);
   return /*#__PURE__*/React.createElement(WidthConsumer, null, function (_ref2) {
     var width = _ref2.width;
     return /*#__PURE__*/React.createElement("div", {
@@ -23,7 +47,8 @@ export var renderExtension = function renderExtension(content, layout) {
       className: "".concat(RendererCssClassName.EXTENSION, " ").concat(options.shadowClassNames, " ").concat(centerAlignClass),
       style: {
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-        width: isTopLevel ? calcBreakoutWidth(layout, width) : '100%'
+        width: isTopLevel ? calcBreakoutWidth(layout, width) : '100%',
+        minHeight: viewportSize
       },
       "data-layout": layout
     }, /*#__PURE__*/React.createElement("div", {
@@ -38,7 +63,9 @@ var Extension = function Extension(props) {
     handleRef = props.handleRef,
     shadowClassNames = props.shadowClassNames,
     _props$path = props.path,
-    path = _props$path === void 0 ? [] : _props$path;
+    path = _props$path === void 0 ? [] : _props$path,
+    extensionViewportSizes = props.extensionViewportSizes,
+    parameters = props.parameters;
   return /*#__PURE__*/React.createElement(ExtensionRenderer
   // Ignored via go/ees005
   // eslint-disable-next-line react/jsx-props-no-spreading
@@ -53,19 +80,18 @@ var Extension = function Extension(props) {
           isTopLevel: path.length < 1,
           handleRef: handleRef,
           shadowClassNames: shadowClassNames
-        });
+        }, undefined, parameters === null || parameters === void 0 ? void 0 : parameters.extensionId, extensionViewportSizes);
       }
     } catch (e) {
       /** We don't want this error to block renderer */
       /** We keep rendering the default content */
     }
-
     // Always return default content if anything goes wrong
     return renderExtension(text || 'extension', layout, {
       isTopLevel: path.length < 1,
       handleRef: handleRef,
       shadowClassNames: shadowClassNames
-    });
+    }, undefined, parameters === null || parameters === void 0 ? void 0 : parameters.extensionId, extensionViewportSizes);
   });
 };
 export default overflowShadow(Extension, {

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

@@ -55,7 +55,7 @@ import { ValidationContext } from './ValidationContext';
 export var NORMAL_SEVERITY_THRESHOLD = 2000;
 export var DEGRADED_SEVERITY_THRESHOLD = 3000;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "113.1.1";
+var packageVersion = "113.2.0";
 var setAsQueryContainerStyles = css({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size',
@@ -283,6 +283,7 @@ export var __RendererClassComponent = /*#__PURE__*/function (_PureComponent) {
         media: props.media,
         emojiResourceConfig: props.emojiResourceConfig,
         smartLinks: props.smartLinks,
+        extensionViewportSizes: props.extensionViewportSizes,
         allowCopyToClipboard: props.allowCopyToClipboard,
         allowWrapCodeBlock: props.allowWrapCodeBlock,
         allowCustomPanels: props.allowCustomPanels,
@@ -618,6 +619,7 @@ var RendererFunctionalComponent = function RendererFunctionalComponent(props) {
       media: props.media,
       emojiResourceConfig: props.emojiResourceConfig,
       smartLinks: props.smartLinks,
+      extensionViewportSizes: props.extensionViewportSizes,
       allowCopyToClipboard: props.allowCopyToClipboard,
       allowWrapCodeBlock: props.allowWrapCodeBlock,
       allowCustomPanels: props.allowCustomPanels,

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

@@ -196,7 +196,7 @@ export var rendererStyles = function rendererStyles(wrapperProps) {
     var isAdvancedLayoutsOn = 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 css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\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"])), editorFontSize(themeProps), "var(--ds-text, ".concat(colors.N800, ")"), RendererCssClassName.DOCUMENT, fullPageStyles(wrapperProps, themeProps), fullWidthStyles(wrapperProps), RendererCssClassName.DOCUMENT, 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, whitespaceSharedStyles, blockquoteSharedStyles, headingsSharedStyles(typography), ruleSharedStyles(), paragraphSharedStyles(typography), listsSharedStyles, indentationSharedStyles, blockMarksSharedStyles, codeMarkSharedStyles(), shadowSharedStyle, dateSharedStyle, textColorStyles, backgroundColorStyles(), tasksAndDecisionsStyles, smartCardSharedStyles, getAnnotationStyles(wrapperProps), "var(--ds-font-family-body, ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)", 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)", richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, "var(--ds-space-100, 8px)", alignedHeadingAnchorStyle(wrapperProps), mediaSingleSharedStyle, RendererCssClassName.DOCUMENT, breakoutWidthStyle(), RendererCssClassName.EXTENSION_OVERFLOW_CONTAINER, RendererCssClassName.EXTENSION, RendererCssClassName.DOCUMENT, RendererCssClassName.EXTENSION, blockNodesVerticalMargin, RendererCssClassName.EXTENSION_CENTER_ALIGN, TableSharedCssClassName.TABLE_NODE_WRAPPER, shadowObserverClassNames.SHADOW_CONTAINER, TableSharedCssClassName.TABLE_NODE_WRAPPER, tableSharedStyle(), RendererCssClassName.DOCUMENT, TableSharedCssClassName.TABLE_CONTAINER, shadowClassNames.RIGHT_SHADOW, shadowClassNames.LEFT_SHADOW, tableMarginTop - 1, tableMarginTop, akEditorStickyHeaderZIndex, getShadowOverrides(), isStickyScrollbarEnabled(appearance) ? stickyScrollbarStyles : '', shadowObserverClassNames.SENTINEL_LEFT, shadowObserverClassNames.SENTINEL_RIGHT, tableMarginTop, fg('platform_editor_renderer_table_header_styles') ? ".".concat(TableSharedCssClassName.TABLE_NODE_WRAPPER, " > table, .").concat(TableSharedCssClassName.TABLE_STICKY_WRAPPER, " > table") : 'table', tableSortableColumnStyle(wrapperProps), fg('platform_editor_renderer_table_header_styles') ? ".".concat(TableSharedCssClassName.TABLE_NODE_WRAPPER, " > table > tbody > tr:first-of-type, .").concat(TableSharedCssClassName.TABLE_STICKY_WRAPPER, " > table > tbody > tr:first-of-type") : 'table tr:first-of-type', RendererCssClassName.NUMBER_COLUMN, "var(--ds-background-neutral, ".concat(akEditorTableToolbar, ")"), "var(--ds-background-accent-gray-subtler, ".concat(akEditorTableBorder, ")"), akEditorTableNumberColumnWidth, "var(--ds-text-subtlest, ".concat(colors.N200, ")"), relativeFontSizeToBase16(14), RendererCssClassName.NUMBER_COLUMN, akEditorStickyHeaderZIndex, "var(--ds-background-accent-gray-subtler, ".concat(akEditorTableBorder, ")"), "var(--ds-background-accent-gray-subtler, ".concat(akEditorTableBorder, ")"), akEditorStickyHeaderZIndex, "var(--ds-background-accent-gray-subtler, ".concat(akEditorTableBorder, ")"), "var(--ds-background-accent-gray-subtler, ".concat(akEditorTableBorder, ")"), "var(--ds-background-accent-gray-subtler, ".concat(akEditorTableToolbar, ")"), "var(--ds-background-accent-gray-subtler, ".concat(akEditorTableToolbar, ")"), "var(--ds-border-radius-100, 3px)", blockNodesVerticalMargin, useGridRenderForCodeBlock(useBlockRenderForCodeBlock), getLightWeightCodeBlockStylesForRootRendererStyleSheet(), isAdvancedLayoutsOn ? columnLayoutResponsiveSharedStyle : columnLayoutSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveRendererStyles, "var(--ds-space-250, 20px)", isAdvancedLayoutsOn ? 0 : "var(--ds-space-400, 32px)", gridMediumMaxWidth, blockNodesVerticalMargin, blockNodesVerticalMargin, blockNodesVerticalMargin, SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER, browser.safari ? codeBlockInListSafariFix : '');
+    return css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\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"])), editorFontSize(themeProps), "var(--ds-text, ".concat(colors.N800, ")"), RendererCssClassName.DOCUMENT, fullPageStyles(wrapperProps, themeProps), fullWidthStyles(wrapperProps), RendererCssClassName.DOCUMENT, 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, whitespaceSharedStyles, blockquoteSharedStyles, headingsSharedStyles(typography), ruleSharedStyles(), paragraphSharedStyles(typography), listsSharedStyles, indentationSharedStyles, blockMarksSharedStyles, codeMarkSharedStyles(), shadowSharedStyle, dateSharedStyle, textColorStyles, backgroundColorStyles(), tasksAndDecisionsStyles, smartCardSharedStyles, getAnnotationStyles(wrapperProps), "var(--ds-font-family-body, ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)", 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)", richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, "var(--ds-space-100, 8px)", alignedHeadingAnchorStyle(wrapperProps), mediaSingleSharedStyle, RendererCssClassName.DOCUMENT, breakoutWidthStyle(), RendererCssClassName.EXTENSION_OVERFLOW_CONTAINER, RendererCssClassName.EXTENSION, RendererCssClassName.DOCUMENT, RendererCssClassName.EXTENSION, blockNodesVerticalMargin, RendererCssClassName.EXTENSION_CENTER_ALIGN, TableSharedCssClassName.TABLE_NODE_WRAPPER, shadowObserverClassNames.SHADOW_CONTAINER, TableSharedCssClassName.TABLE_NODE_WRAPPER, tableSharedStyle(), RendererCssClassName.DOCUMENT, TableSharedCssClassName.TABLE_CONTAINER, shadowClassNames.RIGHT_SHADOW, shadowClassNames.LEFT_SHADOW, tableMarginTop - 1, tableMarginTop, akEditorStickyHeaderZIndex, getShadowOverrides(), isStickyScrollbarEnabled(appearance) ? stickyScrollbarStyles : '', shadowObserverClassNames.SENTINEL_LEFT, shadowObserverClassNames.SENTINEL_RIGHT, tableMarginTop, fg('platform_editor_renderer_table_header_styles') ? ".".concat(TableSharedCssClassName.TABLE_NODE_WRAPPER, " > table, .").concat(TableSharedCssClassName.TABLE_STICKY_WRAPPER, " > table") : 'table', tableSortableColumnStyle(wrapperProps), fg('platform_editor_renderer_table_header_styles') ? ".".concat(TableSharedCssClassName.TABLE_NODE_WRAPPER, " > table > tbody > tr:first-of-type, .").concat(TableSharedCssClassName.TABLE_STICKY_WRAPPER, " > table > tbody > tr:first-of-type") : 'table tr:first-of-type', RendererCssClassName.NUMBER_COLUMN, "var(--ds-background-neutral, ".concat(akEditorTableToolbar, ")"), "var(--ds-background-accent-gray-subtler, ".concat(akEditorTableBorder, ")"), akEditorTableNumberColumnWidth, "var(--ds-text-subtlest, ".concat(colors.N200, ")"), relativeFontSizeToBase16(14), RendererCssClassName.NUMBER_COLUMN, akEditorStickyHeaderZIndex, "var(--ds-background-accent-gray-subtler, ".concat(akEditorTableBorder, ")"), "var(--ds-background-accent-gray-subtler, ".concat(akEditorTableBorder, ")"), akEditorStickyHeaderZIndex, "var(--ds-background-accent-gray-subtler, ".concat(akEditorTableBorder, ")"), "var(--ds-background-accent-gray-subtler, ".concat(akEditorTableBorder, ")"), "var(--ds-background-accent-gray-subtler, ".concat(akEditorTableToolbar, ")"), "var(--ds-background-accent-gray-subtler, ".concat(akEditorTableToolbar, ")"), "var(--ds-border-radius-100, 3px)", blockNodesVerticalMargin, useGridRenderForCodeBlock(useBlockRenderForCodeBlock), getLightWeightCodeBlockStylesForRootRendererStyleSheet(), isAdvancedLayoutsOn ? columnLayoutResponsiveSharedStyle : columnLayoutSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveRendererStyles, "var(--ds-space-250, 20px)", isAdvancedLayoutsOn ? 0 : "var(--ds-space-400, 32px)", gridMediumMaxWidth, blockNodesVerticalMargin, blockNodesVerticalMargin, blockNodesVerticalMargin, SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER, browser.safari ? codeBlockInListSafariFix : '');
   };
 };
 var useGridRenderForCodeBlock = function useGridRenderForCodeBlock(codeBlockRenderAsBlock) {

package/dist/types/index.d.ts

@@ -7,7 +7,7 @@ export { ValidationContextProvider } from './ui/Renderer/ValidationContext';
 export type { Serializer } from './serializer';
 export type { HeadingAnchorLinksProps, RendererAppearance, StickyHeaderProps, NodeComponentsProps, } from './ui/Renderer/types';
 export type { RendererProps } from './ui/renderer-props';
-export type { RendererContext, NodeProps } from './react/types';
+export type { RendererContext, NodeProps, ExtensionViewportSize } from './react/types';
 export { ADFEncoder } from './utils';
 export { renderDocument } from './render-document';
 export type { RenderOutputStat } from './render-document';

package/dist/types/react/index.d.ts

@@ -7,7 +7,7 @@ import type { TextWrapper } from './nodes';
 import type { ExtensionHandlers } from '@atlaskit/editor-common/extensions';
 import type { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
 import type { EventHandlers } from '@atlaskit/editor-common/ui';
-import type { RendererContext, TextHighlighter } from './types';
+import type { RendererContext, TextHighlighter, ExtensionViewportSize } from './types';
 import type { MediaOptions } from '../types/mediaOptions';
 import type { SmartLinksOptions } from '../types/smartLinksOptions';
 import type { EmojiResourceConfig } from '@atlaskit/emoji/resource';
@@ -37,6 +37,7 @@ export interface ReactSerializerInit {
     media?: MediaOptions;
     emojiResourceConfig?: EmojiResourceConfig;
     smartLinks?: SmartLinksOptions;
+    extensionViewportSizes?: ExtensionViewportSize[];
     allowCopyToClipboard?: boolean;
     allowWrapCodeBlock?: boolean;
     allowPlaceholderText?: boolean;
@@ -91,6 +92,7 @@ export default class ReactSerializer implements Serializer<JSX.Element> {
     private media?;
     private emojiResourceConfig?;
     private smartLinks?;
+    private extensionViewportSizes?;
     private allowAnnotations;
     private allowSelectAllTrap?;
     private nodeComponents?;
@@ -114,6 +116,7 @@ export default class ReactSerializer implements Serializer<JSX.Element> {
     private getDateProps;
     private getMediaSingleProps;
     private getMediaProps;
+    private getExtensionProps;
     private getEmojiProps;
     private getEmbedCardProps;
     private getBlockCardProps;

package/dist/types/react/nodes/bodiedExtension.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { Mark as PMMark, Node as PMNode } from '@atlaskit/editor-prosemirror/model';
-import type { RendererContext } from '../types';
+import type { RendererContext, ExtensionViewportSize } from '../types';
 import type { Serializer } from '../../serializer';
 import type { ExtensionLayout } from '@atlaskit/adf-schema';
 import type { ExtensionHandlers } from '@atlaskit/editor-common/extensions';
@@ -20,6 +20,7 @@ interface Props {
     localId?: string;
     marks?: PMMark[];
     startPos: number;
+    extensionViewportSizes?: ExtensionViewportSize[];
 }
 declare const BodiedExtension: (props: React.PropsWithChildren<Props>) => React.JSX.Element;
 export default BodiedExtension;

package/dist/types/react/nodes/extension.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { type Mark as PMMark, type Node as PMNode } from '@atlaskit/editor-prosemirror/model';
-import { type RendererContext } from '../types';
+import { type RendererContext, type ExtensionViewportSize } from '../types';
 import { type ExtensionLayout } from '@atlaskit/adf-schema';
 import type { ExtensionHandlers } from '@atlaskit/editor-common/extensions';
 import { type ProviderFactory } from '@atlaskit/editor-common/provider-factory';
@@ -17,6 +17,7 @@ interface Props {
     layout?: ExtensionLayout;
     localId?: string;
     marks?: PMMark[];
+    extensionViewportSizes?: ExtensionViewportSize[];
 }
 type AllOrNone<T> = T | {
     [K in keyof T]?: never;
@@ -24,7 +25,7 @@ type AllOrNone<T> = T | {
 type RenderExtensionOptions = {
     isTopLevel?: boolean;
 } & AllOrNone<OverflowShadowProps>;
-export declare const renderExtension: (content: any, layout: string, options?: RenderExtensionOptions, removeOverflow?: boolean) => React.JSX.Element;
+export declare const renderExtension: (content: any, layout: string, options?: RenderExtensionOptions, removeOverflow?: boolean, extensionId?: string, extensionViewportSizes?: ExtensionViewportSize[]) => React.JSX.Element;
 declare const _default: {
     new (props: Props | Readonly<Props>): {
         overflowContainer?: HTMLElement | null | undefined;
@@ -75,7 +76,7 @@ declare const _default: {
         state: {
             showLeftShadow: boolean;
             showRightShadow: boolean;
-        }; /** We keep rendering the default content */
+        };
         componentWillUnmount(): void;
         componentDidUpdate(): void;
         handleScroll: (event: Event) => void;

package/dist/types/react/types.d.ts

@@ -69,3 +69,7 @@ export type TextHighlighter = {
         startPos: number;
     }>;
 };
+export interface ExtensionViewportSize {
+    extensionId?: string;
+    viewportSize?: string;
+}

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

@@ -10,7 +10,7 @@ import type { ADFStage } from '@atlaskit/editor-common/validator';
 import type { Schema } from '@atlaskit/editor-prosemirror/model';
 import type { EmojiResourceConfig } from '@atlaskit/emoji/resource';
 import type { RendererContext } from '../';
-import type { TextHighlighter } from '../react/types';
+import type { TextHighlighter, ExtensionViewportSize } from '../react/types';
 import type { RenderOutputStat } from '../render-document';
 import type { MediaOptions } from '../types/mediaOptions';
 import type { SmartLinksOptions } from '../types/smartLinksOptions';
@@ -47,6 +47,7 @@ export interface RendererProps {
     media?: MediaOptions;
     emojiResourceConfig?: EmojiResourceConfig;
     smartLinks?: SmartLinksOptions;
+    extensionViewportSizes?: ExtensionViewportSize[];
     allowAnnotations?: boolean;
     annotationProvider?: AnnotationProviders | null;
     innerRef?: React.RefObject<HTMLDivElement>;

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

@@ -7,7 +7,7 @@ export { ValidationContextProvider } from './ui/Renderer/ValidationContext';
 export type { Serializer } from './serializer';
 export type { HeadingAnchorLinksProps, RendererAppearance, StickyHeaderProps, NodeComponentsProps, } from './ui/Renderer/types';
 export type { RendererProps } from './ui/renderer-props';
-export type { RendererContext, NodeProps } from './react/types';
+export type { RendererContext, NodeProps, ExtensionViewportSize } from './react/types';
 export { ADFEncoder } from './utils';
 export { renderDocument } from './render-document';
 export type { RenderOutputStat } from './render-document';

package/dist/types-ts4.5/react/index.d.ts

@@ -7,7 +7,7 @@ import type { TextWrapper } from './nodes';
 import type { ExtensionHandlers } from '@atlaskit/editor-common/extensions';
 import type { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
 import type { EventHandlers } from '@atlaskit/editor-common/ui';
-import type { RendererContext, TextHighlighter } from './types';
+import type { RendererContext, TextHighlighter, ExtensionViewportSize } from './types';
 import type { MediaOptions } from '../types/mediaOptions';
 import type { SmartLinksOptions } from '../types/smartLinksOptions';
 import type { EmojiResourceConfig } from '@atlaskit/emoji/resource';
@@ -37,6 +37,7 @@ export interface ReactSerializerInit {
     media?: MediaOptions;
     emojiResourceConfig?: EmojiResourceConfig;
     smartLinks?: SmartLinksOptions;
+    extensionViewportSizes?: ExtensionViewportSize[];
     allowCopyToClipboard?: boolean;
     allowWrapCodeBlock?: boolean;
     allowPlaceholderText?: boolean;
@@ -91,6 +92,7 @@ export default class ReactSerializer implements Serializer<JSX.Element> {
     private media?;
     private emojiResourceConfig?;
     private smartLinks?;
+    private extensionViewportSizes?;
     private allowAnnotations;
     private allowSelectAllTrap?;
     private nodeComponents?;
@@ -114,6 +116,7 @@ export default class ReactSerializer implements Serializer<JSX.Element> {
     private getDateProps;
     private getMediaSingleProps;
     private getMediaProps;
+    private getExtensionProps;
     private getEmojiProps;
     private getEmbedCardProps;
     private getBlockCardProps;

package/dist/types-ts4.5/react/nodes/bodiedExtension.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { Mark as PMMark, Node as PMNode } from '@atlaskit/editor-prosemirror/model';
-import type { RendererContext } from '../types';
+import type { RendererContext, ExtensionViewportSize } from '../types';
 import type { Serializer } from '../../serializer';
 import type { ExtensionLayout } from '@atlaskit/adf-schema';
 import type { ExtensionHandlers } from '@atlaskit/editor-common/extensions';
@@ -20,6 +20,7 @@ interface Props {
     localId?: string;
     marks?: PMMark[];
     startPos: number;
+    extensionViewportSizes?: ExtensionViewportSize[];
 }
 declare const BodiedExtension: (props: React.PropsWithChildren<Props>) => React.JSX.Element;
 export default BodiedExtension;

package/dist/types-ts4.5/react/nodes/extension.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { type Mark as PMMark, type Node as PMNode } from '@atlaskit/editor-prosemirror/model';
-import { type RendererContext } from '../types';
+import { type RendererContext, type ExtensionViewportSize } from '../types';
 import { type ExtensionLayout } from '@atlaskit/adf-schema';
 import type { ExtensionHandlers } from '@atlaskit/editor-common/extensions';
 import { type ProviderFactory } from '@atlaskit/editor-common/provider-factory';
@@ -17,6 +17,7 @@ interface Props {
     layout?: ExtensionLayout;
     localId?: string;
     marks?: PMMark[];
+    extensionViewportSizes?: ExtensionViewportSize[];
 }
 type AllOrNone<T> = T | {
     [K in keyof T]?: never;
@@ -24,7 +25,7 @@ type AllOrNone<T> = T | {
 type RenderExtensionOptions = {
     isTopLevel?: boolean;
 } & AllOrNone<OverflowShadowProps>;
-export declare const renderExtension: (content: any, layout: string, options?: RenderExtensionOptions, removeOverflow?: boolean) => React.JSX.Element;
+export declare const renderExtension: (content: any, layout: string, options?: RenderExtensionOptions, removeOverflow?: boolean, extensionId?: string, extensionViewportSizes?: ExtensionViewportSize[]) => React.JSX.Element;
 declare const _default: {
     new (props: Props | Readonly<Props>): {
         overflowContainer?: HTMLElement | null | undefined;
@@ -75,7 +76,7 @@ declare const _default: {
         state: {
             showLeftShadow: boolean;
             showRightShadow: boolean;
-        }; /** We keep rendering the default content */
+        };
         componentWillUnmount(): void;
         componentDidUpdate(): void;
         handleScroll: (event: Event) => void;

package/dist/types-ts4.5/react/types.d.ts

@@ -69,3 +69,7 @@ export type TextHighlighter = {
         startPos: number;
     }>;
 };
+export interface ExtensionViewportSize {
+    extensionId?: string;
+    viewportSize?: string;
+}

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

@@ -10,7 +10,7 @@ import type { ADFStage } from '@atlaskit/editor-common/validator';
 import type { Schema } from '@atlaskit/editor-prosemirror/model';
 import type { EmojiResourceConfig } from '@atlaskit/emoji/resource';
 import type { RendererContext } from '../';
-import type { TextHighlighter } from '../react/types';
+import type { TextHighlighter, ExtensionViewportSize } from '../react/types';
 import type { RenderOutputStat } from '../render-document';
 import type { MediaOptions } from '../types/mediaOptions';
 import type { SmartLinksOptions } from '../types/smartLinksOptions';
@@ -47,6 +47,7 @@ export interface RendererProps {
     media?: MediaOptions;
     emojiResourceConfig?: EmojiResourceConfig;
     smartLinks?: SmartLinksOptions;
+    extensionViewportSizes?: ExtensionViewportSize[];
     allowAnnotations?: boolean;
     annotationProvider?: AnnotationProviders | null;
     innerRef?: React.RefObject<HTMLDivElement>;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/renderer",
-	"version": "113.1.1",
+	"version": "113.2.0",
 	"description": "Renderer component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -31,7 +31,7 @@
 		"@atlaskit/analytics-next": "^11.0.0",
 		"@atlaskit/button": "^21.1.0",
 		"@atlaskit/code": "^16.0.0",
-		"@atlaskit/editor-common": "^100.5.0",
+		"@atlaskit/editor-common": "^101.1.0",
 		"@atlaskit/editor-json-transformer": "^8.24.0",
 		"@atlaskit/editor-palette": "2.0.0",
 		"@atlaskit/editor-prosemirror": "7.0.0",
@@ -48,10 +48,10 @@
 		"@atlaskit/media-ui": "^28.0.0",
 		"@atlaskit/media-viewer": "^52.0.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
-		"@atlaskit/smart-card": "^35.1.0",
+		"@atlaskit/smart-card": "^35.2.0",
 		"@atlaskit/status": "^3.0.0",
 		"@atlaskit/task-decision": "^19.0.0",
-		"@atlaskit/theme": "^17.0.0",
+		"@atlaskit/theme": "^18.0.0",
 		"@atlaskit/tmp-editor-statsig": "^3.4.0",
 		"@atlaskit/tokens": "^4.3.0",
 		"@atlaskit/tooltip": "^20.0.0",
@@ -133,9 +133,6 @@
 		"annotations_align_editor_and_renderer_styles": {
 			"type": "boolean"
 		},
-		"platform_editor_react18_phase2_v2": {
-			"type": "boolean"
-		},
 		"platform-fix-table-ssr-resizing": {
 			"type": "boolean"
 		},
@@ -195,6 +192,9 @@
 		"bandicoots-compiled-migration-smartcard": {
 			"type": "boolean",
 			"referenceOnly": true
+		},
+		"platform_editor_querySelector_fix_table_renderer": {
+			"type": "boolean"
 		}
 	},
 	"af:exports": {