@atlaskit/renderer 113.1.2 → 113.2.1

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

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

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

@@ -31,7 +31,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 '../../';
@@ -49,13 +48,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 var NORMAL_SEVERITY_THRESHOLD = 2000;
 export var DEGRADED_SEVERITY_THRESHOLD = 3000;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "113.1.2";
+var packageVersion = "113.2.1";
 var setAsQueryContainerStyles = css({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size',
@@ -283,6 +284,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 +620,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,
@@ -951,23 +954,19 @@ var RendererWrapper = /*#__PURE__*/React.memo(function (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: 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/esm/ui/Renderer/style.js

@@ -118,7 +118,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(HeadingAnchorWrapperClassName, " {\n        position: unset;\n      }\n      > {\n        h1, h2, h3, h4, h5, h6 {\n          margin-right: 30px;\n        }\n      }\n    ");
   }
-  return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\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"])), RendererCssClassName.SORTABLE_COLUMN_WRAPPER, RendererCssClassName.SORTABLE_COLUMN, tableCellPadding, "var(--ds-border-focused, ".concat(colors.B300, ")"), headingsCss, fg('platform_editor_nested_tables_renderer_styles') ? css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\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"])), RendererCssClassName.SORTABLE_COLUMN, RendererCssClassName.SORTABLE_COLUMN_ICON_WRAPPER, SORTABLE_COLUMN_ICON_CLASSNAME, RendererCssClassName.SORTABLE_COLUMN, RendererCssClassName.SORTABLE_COLUMN_NO_ORDER, SORTABLE_COLUMN_ICON_CLASSNAME, RendererCssClassName.SORTABLE_COLUMN_WRAPPER, RendererCssClassName.SORTABLE_COLUMN, RendererCssClassName.SORTABLE_COLUMN, RendererCssClassName.SORTABLE_COLUMN_NO_ORDER, SORTABLE_COLUMN_ICON_CLASSNAME) : css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\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"])), RendererCssClassName.SORTABLE_COLUMN_ICON_WRAPPER, SORTABLE_COLUMN_ICON_CLASSNAME, RendererCssClassName.SORTABLE_COLUMN_NO_ORDER, SORTABLE_COLUMN_ICON_CLASSNAME, RendererCssClassName.SORTABLE_COLUMN_NO_ORDER, SORTABLE_COLUMN_ICON_CLASSNAME));
+  return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\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"])), RendererCssClassName.SORTABLE_COLUMN_WRAPPER, RendererCssClassName.SORTABLE_COLUMN, tableCellPadding, "var(--ds-border-focused, ".concat(colors.B300, ")"), headingsCss, fg('platform_editor_nested_tables_renderer_styles') ? css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\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"])), RendererCssClassName.SORTABLE_COLUMN, RendererCssClassName.SORTABLE_COLUMN_ICON_WRAPPER, SORTABLE_COLUMN_ICON_CLASSNAME, RendererCssClassName.SORTABLE_COLUMN, RendererCssClassName.SORTABLE_COLUMN_NO_ORDER, SORTABLE_COLUMN_ICON_CLASSNAME, RendererCssClassName.SORTABLE_COLUMN_WRAPPER, RendererCssClassName.SORTABLE_COLUMN, RendererCssClassName.SORTABLE_COLUMN, RendererCssClassName.SORTABLE_COLUMN_NO_ORDER, SORTABLE_COLUMN_ICON_CLASSNAME) : css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\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"])), RendererCssClassName.SORTABLE_COLUMN_ICON_WRAPPER, SORTABLE_COLUMN_ICON_CLASSNAME, RendererCssClassName.SORTABLE_COLUMN_NO_ORDER, SORTABLE_COLUMN_ICON_CLASSNAME, RendererCssClassName.SORTABLE_COLUMN_NO_ORDER, SORTABLE_COLUMN_ICON_CLASSNAME));
 };
 var fullPageStyles = function fullPageStyles(_ref3, _ref4) {
   var appearance = _ref3.appearance;

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/RendererStyleContainer.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { jsx } from '@emotion/react';
+import { type RendererWrapperProps } from './index';
+type RendererStyleContainerProps = Pick<RendererWrapperProps, 'onClick' | 'onMouseDown' | 'appearance' | 'allowNestedHeaderLinks' | 'allowColumnSorting' | 'useBlockRenderForCodeBlock' | 'allowAnnotations' | 'allowTableResizing' | 'innerRef' | 'children'> & {
+    testId?: string;
+};
+export declare const RendererStyleContainer: (props: RendererStyleContainerProps) => jsx.JSX.Element;
+export {};

package/dist/types/ui/Renderer/get-base-font-size.d.ts

@@ -0,0 +1,2 @@
+import type { RendererAppearance } from './types';
+export declare const getBaseFontSize: (appearance: RendererAppearance) => 16 | 14;

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

@@ -4,7 +4,9 @@
  */
 import React, { PureComponent } from 'react';
 import { jsx } from '@emotion/react';
+import type { MediaSSR } from '../../';
 import type { RendererProps } from '../renderer-props';
+import type { RendererAppearance } from './types';
 export declare const NORMAL_SEVERITY_THRESHOLD = 2000;
 export declare const DEGRADED_SEVERITY_THRESHOLD = 3000;
 /**
@@ -44,5 +46,26 @@ export declare class __RendererClassComponent extends PureComponent<RendererProp
 }
 export declare function Renderer(props: RendererProps): jsx.JSX.Element;
 export declare const RendererWithAnalytics: React.MemoExoticComponent<(props: RendererProps) => jsx.JSX.Element>;
+export type RendererWrapperProps = {
+    allowAnnotations?: boolean;
+    appearance: RendererAppearance;
+    innerRef?: React.RefObject<HTMLDivElement>;
+    allowColumnSorting?: boolean;
+    allowCopyToClipboard?: boolean;
+    allowWrapCodeBlock?: boolean;
+    allowPlaceholderText?: boolean;
+    allowCustomPanels?: boolean;
+    addTelepointer?: boolean;
+    allowNestedHeaderLinks: boolean;
+    useBlockRenderForCodeBlock: boolean;
+    onClick?: (event: React.MouseEvent) => void;
+    onMouseDown?: (event: React.MouseEvent) => void;
+    ssr?: MediaSSR;
+    isInsideOfInlineExtension?: boolean;
+    allowTableResizing?: boolean;
+    isTopLevelRenderer?: boolean;
+} & {
+    children?: React.ReactNode;
+};
 declare const RendererWithAnnotationSelection: (props: RendererProps) => jsx.JSX.Element;
 export default RendererWithAnnotationSelection;

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/RendererStyleContainer.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { jsx } from '@emotion/react';
+import { type RendererWrapperProps } from './index';
+type RendererStyleContainerProps = Pick<RendererWrapperProps, 'onClick' | 'onMouseDown' | 'appearance' | 'allowNestedHeaderLinks' | 'allowColumnSorting' | 'useBlockRenderForCodeBlock' | 'allowAnnotations' | 'allowTableResizing' | 'innerRef' | 'children'> & {
+    testId?: string;
+};
+export declare const RendererStyleContainer: (props: RendererStyleContainerProps) => jsx.JSX.Element;
+export {};

package/dist/types-ts4.5/ui/Renderer/get-base-font-size.d.ts

@@ -0,0 +1,2 @@
+import type { RendererAppearance } from './types';
+export declare const getBaseFontSize: (appearance: RendererAppearance) => 16 | 14;

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

@@ -4,7 +4,9 @@
  */
 import React, { PureComponent } from 'react';
 import { jsx } from '@emotion/react';
+import type { MediaSSR } from '../../';
 import type { RendererProps } from '../renderer-props';
+import type { RendererAppearance } from './types';
 export declare const NORMAL_SEVERITY_THRESHOLD = 2000;
 export declare const DEGRADED_SEVERITY_THRESHOLD = 3000;
 /**
@@ -44,5 +46,26 @@ export declare class __RendererClassComponent extends PureComponent<RendererProp
 }
 export declare function Renderer(props: RendererProps): jsx.JSX.Element;
 export declare const RendererWithAnalytics: React.MemoExoticComponent<(props: RendererProps) => jsx.JSX.Element>;
+export type RendererWrapperProps = {
+    allowAnnotations?: boolean;
+    appearance: RendererAppearance;
+    innerRef?: React.RefObject<HTMLDivElement>;
+    allowColumnSorting?: boolean;
+    allowCopyToClipboard?: boolean;
+    allowWrapCodeBlock?: boolean;
+    allowPlaceholderText?: boolean;
+    allowCustomPanels?: boolean;
+    addTelepointer?: boolean;
+    allowNestedHeaderLinks: boolean;
+    useBlockRenderForCodeBlock: boolean;
+    onClick?: (event: React.MouseEvent) => void;
+    onMouseDown?: (event: React.MouseEvent) => void;
+    ssr?: MediaSSR;
+    isInsideOfInlineExtension?: boolean;
+    allowTableResizing?: boolean;
+    isTopLevelRenderer?: boolean;
+} & {
+    children?: React.ReactNode;
+};
 declare const RendererWithAnnotationSelection: (props: RendererProps) => jsx.JSX.Element;
 export default RendererWithAnnotationSelection;

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.1",
 	"description": "Renderer component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -31,9 +31,9 @@
 		"@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-palette": "^2.0.0",
 		"@atlaskit/editor-prosemirror": "7.0.0",
 		"@atlaskit/editor-shared-styles": "^3.4.0",
 		"@atlaskit/emoji": "^68.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",
@@ -72,8 +72,8 @@
 		"react-dom": "^18.2.0"
 	},
 	"devDependencies": {
-		"@af/integration-testing": "*",
-		"@af/visual-regression": "*",
+		"@af/integration-testing": "^0.5.0",
+		"@af/visual-regression": "^1.3.0",
 		"@atlaskit/analytics-gas-types": "^5.1.0",
 		"@atlaskit/css-reset": "^7.0.0",
 		"@atlaskit/link-provider": "^2.0.0",
@@ -85,8 +85,8 @@
 		"@atlaskit/mention": "^24.1.0",
 		"@atlaskit/navigation-next": "patch:@atlaskit/navigation-next@npm%3A9.0.17#~/.yarn/patches/@atlaskit-navigation-next-npm-9.0.17-d1445f2f74.patch",
 		"@atlaskit/util-data-test": "^18.0.0",
-		"@atlaskit/visual-regression": "*",
-		"@atlassian/feature-flags-test-utils": "*",
+		"@atlaskit/visual-regression": "^0.10.0",
+		"@atlassian/feature-flags-test-utils": "^0.3.0",
 		"@testing-library/react": "^13.4.0",
 		"@testing-library/react-hooks": "^8.0.1",
 		"@testing-library/user-event": "^14.4.3",
@@ -118,6 +118,15 @@
 		}
 	},
 	"platform-feature-flags": {
+		"platform_editor_heading_margin_fix": {
+			"type": "boolean"
+		},
+		"platform_editor_typography_ugc": {
+			"type": "boolean"
+		},
+		"platform_editor_emotion_refactor_renderer": {
+			"type": "boolean"
+		},
 		"platform_editor_update_panel_icon_aria_label": {
 			"type": "boolean"
 		},
@@ -133,9 +142,6 @@
 		"annotations_align_editor_and_renderer_styles": {
 			"type": "boolean"
 		},
-		"platform_editor_react18_phase2_v2": {
-			"type": "boolean"
-		},
 		"platform-fix-table-ssr-resizing": {
 			"type": "boolean"
 		},