@atlaskit/renderer 113.1.2 → 113.2.1

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

@@ -0,0 +1,4 @@
+import { akEditorFullPageDefaultFontSize } from '@atlaskit/editor-shared-styles';
+export const getBaseFontSize = appearance => {
+  return appearance && appearance !== 'comment' ? akEditorFullPageDefaultFontSize : 14;
+};

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

@@ -22,7 +22,6 @@ import { FabricChannel } from '@atlaskit/analytics-listeners/types';
 import { FabricEditorAnalyticsContext } from '@atlaskit/analytics-namespaced-context';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import { normalizeFeatureFlags } from '@atlaskit/editor-common/normalize-feature-flags';
-import { akEditorFullPageDefaultFontSize } from '@atlaskit/editor-shared-styles';
 import memoizeOne from 'memoize-one';
 import uuid from 'uuid/v4';
 import { ReactSerializer, renderDocument } from '../../';
@@ -40,13 +39,15 @@ import { ErrorBoundary } from './ErrorBoundary';
 import { BreakoutSSRInlineScript } from './breakout-ssr';
 import { isInteractiveElement } from './click-to-edit';
 import { countNodes } from './count-nodes';
-import { TELEPOINTER_ID, rendererStyles } from './style';
+import { TELEPOINTER_ID } from './style';
 import { TruncatedWrapper } from './truncated-wrapper';
 import { ValidationContext } from './ValidationContext';
+import { RendererStyleContainer } from './RendererStyleContainer';
+import { getBaseFontSize } from './get-base-font-size';
 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.1";
 const setAsQueryContainerStyles = css({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size',
@@ -273,6 +274,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 +610,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,
@@ -936,23 +939,19 @@ const RendererWrapper = /*#__PURE__*/React.memo(props => {
     "data-appearance": appearance,
     shouldCheckExistingValue: isInsideOfInlineExtension
   }, jsx(BaseTheme, {
-    baseFontSize: appearance && appearance !== 'comment' ? akEditorFullPageDefaultFontSize : undefined
+    baseFontSize: getBaseFontSize(appearance)
   }, jsx(EditorMediaClientProvider, {
     ssr: ssr
-  }, jsx("div", {
-    ref: innerRef,
+  }, jsx(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: rendererStyles({
-      appearance,
-      allowNestedHeaderLinks,
-      allowColumnSorting: !!allowColumnSorting,
-      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/es2019/ui/Renderer/style.js

@@ -312,9 +312,9 @@ const tableSortableColumnStyle = ({
 
 						&:hover:not(
 								:has(
-										.${RendererCssClassName.SORTABLE_COLUMN_WRAPPER}
-											.${RendererCssClassName.SORTABLE_COLUMN}:hover
-									)
+									.${RendererCssClassName.SORTABLE_COLUMN_WRAPPER}
+										.${RendererCssClassName.SORTABLE_COLUMN}:hover
+								)
 							)
 							> .${RendererCssClassName.SORTABLE_COLUMN}
 							> .${RendererCssClassName.SORTABLE_COLUMN_NO_ORDER} {

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