@atlaskit/renderer 113.1.2 → 113.2.1

package/dist/cjs/ui/Renderer/get-base-font-size.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getBaseFontSize = void 0;
+var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+var getBaseFontSize = exports.getBaseFontSize = function getBaseFontSize(appearance) {
+  return appearance && appearance !== 'comment' ? _editorSharedStyles.akEditorFullPageDefaultFontSize : 14;
+};

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

@@ -31,7 +31,6 @@ var _types = require("@atlaskit/analytics-listeners/types");
 var _analyticsNamespacedContext = require("@atlaskit/analytics-namespaced-context");
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _normalizeFeatureFlags = require("@atlaskit/editor-common/normalize-feature-flags");
-var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _memoizeOne = _interopRequireDefault(require("memoize-one"));
 var _v = _interopRequireDefault(require("uuid/v4"));
 var _ = require("../../");
@@ -52,6 +51,8 @@ var _countNodes = require("./count-nodes");
 var _style = require("./style");
 var _truncatedWrapper = require("./truncated-wrapper");
 var _ValidationContext = require("./ValidationContext");
+var _RendererStyleContainer = require("./RendererStyleContainer");
+var _getBaseFontSize = require("./get-base-font-size");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -65,7 +66,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.1";
 var setAsQueryContainerStyles = (0, _react2.css)({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size',
@@ -293,6 +294,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 +630,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,
@@ -961,23 +964,19 @@ var RendererWrapper = /*#__PURE__*/_react.default.memo(function (props) {
     "data-appearance": appearance,
     shouldCheckExistingValue: isInsideOfInlineExtension
   }, (0, _react2.jsx)(_ui.BaseTheme, {
-    baseFontSize: appearance && appearance !== 'comment' ? _editorSharedStyles.akEditorFullPageDefaultFontSize : undefined
+    baseFontSize: (0, _getBaseFontSize.getBaseFontSize)(appearance)
   }, (0, _react2.jsx)(_EditorMediaClientProvider.EditorMediaClientProvider, {
     ssr: ssr
-  }, (0, _react2.jsx)("div", {
-    ref: innerRef,
+  }, (0, _react2.jsx)(_RendererStyleContainer.RendererStyleContainer, {
+    innerRef: innerRef,
     onClick: onClick,
-    onMouseDown: onMouseDown
-    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-    ,
-    css: (0, _style.rendererStyles)({
-      appearance: appearance,
-      allowNestedHeaderLinks: allowNestedHeaderLinks,
-      allowColumnSorting: !!allowColumnSorting,
-      useBlockRenderForCodeBlock: useBlockRenderForCodeBlock,
-      allowAnnotations: props.allowAnnotations,
-      allowTableResizing: allowTableResizing
-    })
+    onMouseDown: onMouseDown,
+    appearance: appearance,
+    allowNestedHeaderLinks: allowNestedHeaderLinks,
+    allowColumnSorting: !!allowColumnSorting,
+    useBlockRenderForCodeBlock: useBlockRenderForCodeBlock,
+    allowAnnotations: props.allowAnnotations,
+    allowTableResizing: allowTableResizing
   }, children))));
 
   // We can only make the wrapper div query container when we have a known width.

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

@@ -128,7 +128,7 @@ var tableSortableColumnStyle = function tableSortableColumnStyle(_ref2) {
   if (allowNestedHeaderLinks) {
     headingsCss = "\n      /**\n       * When the sort button is enabled we want the heading's copy link button\n       * to reserve space so that it can prematurely wrap to avoid the button\n       * being displayed underneath the sort button (hidden or obscured).\n       *\n       * The two buttons fight each other since the sort button is displayed\n       * on hover of the <th /> and the copy link button is displayed on hover\n       * of the heading.\n       *\n       * Note that this can break the WYSIWYG experience in the case where\n       * a heading fills the width of the table cell and the only thing which\n       * wraps is the copy link button. This is hopefully a rare fringe case.\n       */\n      .".concat(_headingAnchor.HeadingAnchorWrapperClassName, " {\n        position: unset;\n      }\n      > {\n        h1, h2, h3, h4, h5, h6 {\n          margin-right: 30px;\n        }\n      }\n    ");
   }
-  return (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n\t\t.", " {\n\t\t\tpadding: 0;\n\n\t\t\t.", " {\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t\tpadding: ", "px;\n\t\t\t\tborder-width: 1.5px;\n\t\t\t\tborder-style: solid;\n\t\t\t\tborder-color: transparent;\n\n\t\t\t\t> *:first-child {\n\t\t\t\t\tmargin-top: 0;\n\t\t\t\t}\n\n\t\t\t\t> .ProseMirror-gapcursor:first-child + *,\n\t\t\t\t> style:first-child + .ProseMirror-gapcursor + * {\n\t\t\t\t\tmargin-top: 0;\n\t\t\t\t}\n\n\t\t\t\t> .ProseMirror-gapcursor:first-child + span + *,\n\t\t\t\t> style:first-child + .ProseMirror-gapcursor + span + * {\n\t\t\t\t\tmargin-top: 0;\n\t\t\t\t}\n\n\t\t\t\t@supports selector(:focus-visible) {\n\t\t\t\t\t&:focus {\n\t\t\t\t\t\toutline: unset;\n\t\t\t\t\t}\n\t\t\t\t\t&:focus-visible {\n\t\t\t\t\t\tborder-color: ", ";\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t", "\n\t\t\t}\n\n\t\t\t", "\n\t\t}\n\t"])), _consts.RendererCssClassName.SORTABLE_COLUMN_WRAPPER, _consts.RendererCssClassName.SORTABLE_COLUMN, _styles.tableCellPadding, "var(--ds-border-focused, ".concat(colors.B300, ")"), headingsCss, (0, _platformFeatureFlags.fg)('platform_editor_nested_tables_renderer_styles') ? (0, _react.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t\t\t// New styles\n\t\t\t\t\t\t> .", "\n\t\t\t\t\t\t\t> .", " {\n\t\t\t\t\t\t\tmargin: 0;\n\n\t\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t\t\t\ttransition: opacity 0.2s ease-in-out;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t> .", "\n\t\t\t\t\t\t\t> .", " {\n\t\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\t\topacity: 0;\n\t\t\t\t\t\t\t\t&:focus {\n\t\t\t\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t&:hover:not(\n\t\t\t\t\t\t\t\t:has(\n\t\t\t\t\t\t\t\t\t\t.", "\n\t\t\t\t\t\t\t\t\t\t\t.", ":hover\n\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t> .", "\n\t\t\t\t\t\t\t> .", " {\n\t\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t"])), _consts.RendererCssClassName.SORTABLE_COLUMN, _consts.RendererCssClassName.SORTABLE_COLUMN_ICON_WRAPPER, _table2.SORTABLE_COLUMN_ICON_CLASSNAME, _consts.RendererCssClassName.SORTABLE_COLUMN, _consts.RendererCssClassName.SORTABLE_COLUMN_NO_ORDER, _table2.SORTABLE_COLUMN_ICON_CLASSNAME, _consts.RendererCssClassName.SORTABLE_COLUMN_WRAPPER, _consts.RendererCssClassName.SORTABLE_COLUMN, _consts.RendererCssClassName.SORTABLE_COLUMN, _consts.RendererCssClassName.SORTABLE_COLUMN_NO_ORDER, _table2.SORTABLE_COLUMN_ICON_CLASSNAME) : (0, _react.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t\t\t// old styles\n\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\tmargin: 0;\n\t\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t\t\t\ttransition: opacity 0.2s ease-in-out;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\t\topacity: 0;\n\t\t\t\t\t\t\t\t&:focus {\n\t\t\t\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t&:hover {\n\t\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t"])), _consts.RendererCssClassName.SORTABLE_COLUMN_ICON_WRAPPER, _table2.SORTABLE_COLUMN_ICON_CLASSNAME, _consts.RendererCssClassName.SORTABLE_COLUMN_NO_ORDER, _table2.SORTABLE_COLUMN_ICON_CLASSNAME, _consts.RendererCssClassName.SORTABLE_COLUMN_NO_ORDER, _table2.SORTABLE_COLUMN_ICON_CLASSNAME));
+  return (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n\t\t.", " {\n\t\t\tpadding: 0;\n\n\t\t\t.", " {\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t\tpadding: ", "px;\n\t\t\t\tborder-width: 1.5px;\n\t\t\t\tborder-style: solid;\n\t\t\t\tborder-color: transparent;\n\n\t\t\t\t> *:first-child {\n\t\t\t\t\tmargin-top: 0;\n\t\t\t\t}\n\n\t\t\t\t> .ProseMirror-gapcursor:first-child + *,\n\t\t\t\t> style:first-child + .ProseMirror-gapcursor + * {\n\t\t\t\t\tmargin-top: 0;\n\t\t\t\t}\n\n\t\t\t\t> .ProseMirror-gapcursor:first-child + span + *,\n\t\t\t\t> style:first-child + .ProseMirror-gapcursor + span + * {\n\t\t\t\t\tmargin-top: 0;\n\t\t\t\t}\n\n\t\t\t\t@supports selector(:focus-visible) {\n\t\t\t\t\t&:focus {\n\t\t\t\t\t\toutline: unset;\n\t\t\t\t\t}\n\t\t\t\t\t&:focus-visible {\n\t\t\t\t\t\tborder-color: ", ";\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t", "\n\t\t\t}\n\n\t\t\t", "\n\t\t}\n\t"])), _consts.RendererCssClassName.SORTABLE_COLUMN_WRAPPER, _consts.RendererCssClassName.SORTABLE_COLUMN, _styles.tableCellPadding, "var(--ds-border-focused, ".concat(colors.B300, ")"), headingsCss, (0, _platformFeatureFlags.fg)('platform_editor_nested_tables_renderer_styles') ? (0, _react.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t\t\t// New styles\n\t\t\t\t\t\t> .", "\n\t\t\t\t\t\t\t> .", " {\n\t\t\t\t\t\t\tmargin: 0;\n\n\t\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t\t\t\ttransition: opacity 0.2s ease-in-out;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t> .", "\n\t\t\t\t\t\t\t> .", " {\n\t\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\t\topacity: 0;\n\t\t\t\t\t\t\t\t&:focus {\n\t\t\t\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t&:hover:not(\n\t\t\t\t\t\t\t\t:has(\n\t\t\t\t\t\t\t\t\t.", "\n\t\t\t\t\t\t\t\t\t\t.", ":hover\n\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t> .", "\n\t\t\t\t\t\t\t> .", " {\n\t\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t"])), _consts.RendererCssClassName.SORTABLE_COLUMN, _consts.RendererCssClassName.SORTABLE_COLUMN_ICON_WRAPPER, _table2.SORTABLE_COLUMN_ICON_CLASSNAME, _consts.RendererCssClassName.SORTABLE_COLUMN, _consts.RendererCssClassName.SORTABLE_COLUMN_NO_ORDER, _table2.SORTABLE_COLUMN_ICON_CLASSNAME, _consts.RendererCssClassName.SORTABLE_COLUMN_WRAPPER, _consts.RendererCssClassName.SORTABLE_COLUMN, _consts.RendererCssClassName.SORTABLE_COLUMN, _consts.RendererCssClassName.SORTABLE_COLUMN_NO_ORDER, _table2.SORTABLE_COLUMN_ICON_CLASSNAME) : (0, _react.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t\t\t// old styles\n\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\tmargin: 0;\n\t\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t\t\t\ttransition: opacity 0.2s ease-in-out;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\t\topacity: 0;\n\t\t\t\t\t\t\t\t&:focus {\n\t\t\t\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t&:hover {\n\t\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t"])), _consts.RendererCssClassName.SORTABLE_COLUMN_ICON_WRAPPER, _table2.SORTABLE_COLUMN_ICON_CLASSNAME, _consts.RendererCssClassName.SORTABLE_COLUMN_NO_ORDER, _table2.SORTABLE_COLUMN_ICON_CLASSNAME, _consts.RendererCssClassName.SORTABLE_COLUMN_NO_ORDER, _table2.SORTABLE_COLUMN_ICON_CLASSNAME));
 };
 var fullPageStyles = function fullPageStyles(_ref3, _ref4) {
   var appearance = _ref3.appearance;

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, {