@atlaskit/renderer 113.1.2 → 113.2.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @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

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

@@ -91,10 +91,9 @@ 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);
+      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

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.2";
+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/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

@@ -69,10 +69,9 @@ 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);
+    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

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.2";
+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/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

@@ -84,10 +84,9 @@ 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);
+      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

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.2";
+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/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.2",
+	"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": "^101.0.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"
 		},