@atlaskit/renderer 114.2.1 → 114.3.1

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

@@ -5,16 +5,18 @@
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx, css } from '@emotion/react';
+import { sharedMultiBodiedExtensionStyles } from '@atlaskit/editor-common/ui';
+import { fg } from '@atlaskit/platform-feature-flags';
 const containerCSS = css({
-  minHeight: '100px'
+  minHeight: '100px',
+  flexBasis: '100%'
 });
 const ExtensionFrame = props => {
   return jsx("div", {
-    css: containerCSS,
-    "data-extension-frame": "true",
-    style: {
-      flexBasis: `100%`
-    }
+    css: [containerCSS, fg('platform_editor_multi_body_extension_extensibility') &&
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    sharedMultiBodiedExtensionStyles.extensionFrameContent],
+    "data-extension-frame": "true"
   }, props.children);
 };
 export default ExtensionFrame;

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

@@ -2,8 +2,11 @@
 // Mapping file
 
 import Loadable from 'react-loadable';
+import { UnsupportedBlock, UnsupportedInline } from '@atlaskit/editor-common/ui';
+import { fg } from '@atlaskit/platform-feature-flags';
 import Blockquote from './blockquote';
 import BodiedExtension from './bodiedExtension';
+import MultiBodiedExtensionOld from './multiBodiedExtensionOld';
 import MultiBodiedExtension from './multiBodiedExtension';
 import ExtensionFrame from './extensionFrame';
 import BulletList from './bulletList';
@@ -24,7 +27,6 @@ import Table from './table';
 import { TableCell, TableHeader } from './tableCell';
 import TableRow from './tableRow';
 import UnknownBlock from './unknownBlock';
-import { UnsupportedBlock, UnsupportedInline } from '@atlaskit/editor-common/ui';
 
 // Ignored via go/ees005
 // eslint-disable-next-line import/no-named-as-default
@@ -188,6 +190,7 @@ export const toReact = (node, flags, nodeComponents
     ...nodeToReact,
     ...nodeComponents
   };
+  nodes['multiBodiedExtension'] = fg('platform_editor_multi_body_extension_extensibility') ? MultiBodiedExtension : MultiBodiedExtensionOld;
   return nodes[node.type.name];
 };
 /*

package/dist/es2019/react/nodes/multiBodiedExtension/actions.js

@@ -0,0 +1,37 @@
+import React from 'react';
+export const useMultiBodiedExtensionActions = ({
+  updateActiveChild,
+  children,
+  allowBodiedOverride,
+  childrenContainer
+}) => {
+  return React.useMemo(() => {
+    return {
+      changeActive(index) {
+        if (!Number.isInteger(index)) {
+          return false;
+        }
+        updateActiveChild(index);
+        return true;
+      },
+      addChild() {
+        return false;
+      },
+      getChildrenCount() {
+        return children && Array.isArray(children) ? children.length : 0;
+      },
+      removeChild(_index) {
+        return false;
+      },
+      updateParameters(_parameters) {
+        return false;
+      },
+      getChildren() {
+        return [];
+      },
+      getChildrenContainer() {
+        return allowBodiedOverride ? childrenContainer : null;
+      }
+    };
+  }, [updateActiveChild, children, allowBodiedOverride, childrenContainer]);
+};

package/dist/es2019/react/nodes/multiBodiedExtension/context.js

@@ -0,0 +1,56 @@
+import React from 'react';
+import memoizeOne from 'memoize-one';
+import { getExtensionModuleNodePrivateProps, getNodeRenderer } from '@atlaskit/editor-common/extensions';
+import { useProvider } from '@atlaskit/editor-common/provider-factory';
+export const useMultiBodiedExtensionContext = ({
+  extensionType,
+  extensionKey
+}) => {
+  const isMounted = React.useRef(true);
+  const localGetNodeRenderer = React.useMemo(() => memoizeOne(getNodeRenderer), []);
+  const [provider, setProvider] = React.useState();
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const [privateProps, setPrivateProps] = React.useState();
+  const providerPromise = useProvider('extensionProvider');
+  React.useEffect(() => {
+    if (providerPromise) {
+      providerPromise.then(p => {
+        if (isMounted.current) {
+          setProvider(p);
+        }
+        return getExtensionModuleNodePrivateProps(p, extensionType, extensionKey);
+      }).then(pr => {
+        if (isMounted.current) {
+          setPrivateProps(pr);
+        }
+      });
+    }
+  }, [providerPromise, extensionType, extensionKey]);
+  const NodeRenderer = React.useMemo(() => {
+    if (!provider) {
+      return null;
+    }
+    return localGetNodeRenderer(provider, extensionType, extensionKey);
+  }, [provider, extensionType, extensionKey, localGetNodeRenderer]);
+  React.useEffect(() => {
+    isMounted.current = true;
+    return () => {
+      isMounted.current = false;
+    };
+  }, []);
+  return React.useMemo(() => {
+    if (!provider || !NodeRenderer || !privateProps) {
+      return {
+        extensionContext: null,
+        loading: true
+      };
+    }
+    return {
+      extensionContext: {
+        NodeRenderer,
+        privateProps
+      },
+      loading: false
+    };
+  }, [provider, NodeRenderer, privateProps]);
+};

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

@@ -1,8 +1,8 @@
-import _extends from "@babel/runtime/helpers/extends";
-/* eslint-disable @atlaskit/design-system/prefer-primitives */
+/* eslint-disable @atlaskit/design-system/prefer-primitives, @atlaskit/design-system/consistent-css-prop-usage */
 /**
  * @jsxRuntime classic
  * @jsx jsx
+ * @jsxFrag
  */
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
@@ -10,46 +10,13 @@ import { jsx, css } from '@emotion/react';
 import { N40 } from '@atlaskit/theme/colors';
 import React, { useState } from 'react';
 import { renderExtension } from './extension';
-import ExtensionRenderer from '../../ui/ExtensionRenderer';
 import { WidthConsumer, sharedMultiBodiedExtensionStyles } from '@atlaskit/editor-common/ui';
 import { RendererCssClassName } from '../../consts';
 import { calcBreakoutWidth } from '@atlaskit/editor-common/utils';
-const useMultiBodiedExtensionActions = ({
-  updateActiveChild,
-  children
-}) => {
-  const actions = React.useMemo(() => {
-    return {
-      changeActive(index) {
-        return updateActiveChild(index);
-      },
-      addChild() {
-        return false;
-      },
-      getChildrenCount() {
-        return children ? children === null || children === void 0 ? void 0 : children.length : 0;
-      },
-      removeChild(index) {
-        return false;
-      },
-      updateParameters(parameters) {
-        return false;
-      },
-      // Ignored via go/ees005
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      getChildren() {
-        return [];
-      },
-      getChildrenContainer() {
-        return null;
-      }
-    };
-  }, [updateActiveChild, children]);
-  return actions;
-};
-
-// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
-const navigationCssExtended = css`
+import { useMultiBodiedExtensionActions } from './multiBodiedExtension/actions';
+import { useMultiBodiedExtensionContext } from './multiBodiedExtension/context';
+// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Ignored via go/DSP-18766
+const navigationStyles = css`
 	${sharedMultiBodiedExtensionStyles.mbeNavigation};
 	margin-left: 0 !important;
 	margin-right: 0 !important;
@@ -58,83 +25,115 @@ const navigationCssExtended = css`
 		display: none;
 	}
 `;
+
+// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
+const containerStyles = css`
+	${sharedMultiBodiedExtensionStyles.mbeExtensionContainer};
+	.ak-renderer-extension {
+		margin-top: 0 !important;
+	}
+
+	[data-layout='full-width'],
+	[data-layout='wide'] {
+		.multiBodiedExtension-navigation {
+			border-right: 3px solid ${`var(--ds-border, ${N40})`} !important;
+		}
+	}
+`;
+const MultiBodiedExtensionChildrenContainer = ({
+  children
+}) => {
+  return jsx("article", {
+    "data-testid": "multiBodiedExtension--frames"
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
+    className: `multiBodiedExtension--frames`
+  }, children);
+};
+const MultiBodiedExtensionNavigation = ({
+  children
+}) => {
+  return jsx("nav", {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    className: "multiBodiedExtension-navigation",
+    css: navigationStyles,
+    "data-testid": "multiBodiedExtension-navigation"
+  }, children);
+};
+const MultiBodiedExtensionWrapper = ({
+  width,
+  path,
+  layout,
+  children
+}) => {
+  const isTopLevel = path.length < 1;
+  const centerAlignClass = isTopLevel && ['wide', 'full-width'].includes(layout) ? RendererCssClassName.EXTENSION_CENTER_ALIGN : '';
+  return jsx("div", {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    className: `${RendererCssClassName.EXTENSION} ${centerAlignClass} ${RendererCssClassName.EXTENSION_OVERFLOW_CONTAINER}`,
+    style: {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+      width: isTopLevel ? calcBreakoutWidth(layout, width) : '100%'
+    },
+    "data-layout": layout,
+    "data-testid": "multiBodiedExtension--wrapper"
+  }, children);
+};
 const MultiBodiedExtension = props => {
+  var _extensionContext$pri;
   const {
     children,
     layout = 'default',
-    path = []
+    path = [],
+    parameters,
+    extensionType,
+    extensionKey,
+    content,
+    marks,
+    localId
   } = props;
   const [activeChildIndex, setActiveChildIndex] = useState(0);
-  const removeOverflow = React.Children.toArray(children)
-  // Ignored via go/ees005
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  .map(child => /*#__PURE__*/React.isValidElement(child) ? child.props.nodeType === 'table' : false).every(Boolean);
-  const overflowContainerClass = !removeOverflow ? RendererCssClassName.EXTENSION_OVERFLOW_CONTAINER : '';
-  const updateActiveChild = React.useCallback(index => {
-    if (typeof index !== 'number') {
-      // Ignored via go/ees007
-      // eslint-disable-next-line @atlaskit/editor/enforce-todo-comment-format
-      // TODO: Make sure we log this somewhere if this happens
-      setActiveChildIndex(0);
-      return false;
-    }
-    setActiveChildIndex(index);
-    return true;
-  }, [setActiveChildIndex]);
+  const {
+    loading,
+    extensionContext
+  } = useMultiBodiedExtensionContext({
+    extensionType,
+    extensionKey
+  });
   const actions = useMultiBodiedExtensionActions({
-    updateActiveChild,
-    children
+    updateActiveChild: setActiveChildIndex,
+    children,
+    childrenContainer: jsx(MultiBodiedExtensionChildrenContainer, null, children),
+    allowBodiedOverride: extensionContext === null || extensionContext === void 0 ? void 0 : (_extensionContext$pri = extensionContext.privateProps) === null || _extensionContext$pri === void 0 ? void 0 : _extensionContext$pri.__allowBodiedOverride
   });
-  // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
-  const containerCssExtended = css`
-		${sharedMultiBodiedExtensionStyles.mbeExtensionContainer};
-		.ak-renderer-extension {
-			margin-top: 0 !important;
-		}
-
-		[data-layout='full-width'],
-		[data-layout='wide'] {
-			.multiBodiedExtension-navigation {
-				border-right: 3px solid ${`var(--ds-border, ${N40})`} !important;
-			}
-		}
-
-		.multiBodiedExtension--frames
-			> [data-extension-frame='true']:nth-of-type(${activeChildIndex + 1}) {
-			${sharedMultiBodiedExtensionStyles.extensionFrameContent}
-			margin-left: 0;
-			margin-right: 0;
-		}
-	`;
-  const isTopLevel = path.length < 1;
-  const centerAlignClass = isTopLevel && ['wide', 'full-width'].includes(layout) ? RendererCssClassName.EXTENSION_CENTER_ALIGN : '';
-  function renderMbeContent(width) {
-    return jsx("div", {
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-      className: `${RendererCssClassName.EXTENSION} ${centerAlignClass} ${overflowContainerClass}`,
-      style: {
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-        width: isTopLevel ? calcBreakoutWidth(layout, width) : '100%'
-      },
-      "data-layout": layout
-    }, jsx("nav", {
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-      className: "multiBodiedExtension-navigation",
-      css: navigationCssExtended,
-      "data-testid": "multiBodiedExtension-navigation"
-    }, jsx(ExtensionRenderer
-    // Ignored via go/ees005
-    // eslint-disable-next-line react/jsx-props-no-spreading
-    , _extends({}, props, {
-      actions: actions,
-      type: "multiBodiedExtension"
-    }), ({
-      result
-    }) => {
+  const renderContent = React.useCallback(() => {
+    var _marks$find, _marks$find$attrs;
+    if (loading || !extensionContext) {
+      return null;
+    }
+    const {
+      NodeRenderer,
+      privateProps
+    } = extensionContext;
+    const fragmentLocalId = marks === null || marks === void 0 ? void 0 : (_marks$find = marks.find(m => m.type.name === 'fragment')) === null || _marks$find === void 0 ? void 0 : (_marks$find$attrs = _marks$find.attrs) === null || _marks$find$attrs === void 0 ? void 0 : _marks$find$attrs.localId;
+    const node = {
+      type: 'multiBodiedExtension',
+      extensionKey,
+      extensionType,
+      parameters,
+      content,
+      localId,
+      fragmentLocalId
+    };
+    const renderMultiBodiedExtension = () => {
+      const MultiBodiedExtensionNodeRenderer = jsx(NodeRenderer, {
+        node: node,
+        actions: actions
+      });
       try {
-        if (result && /*#__PURE__*/React.isValidElement(result)) {
+        if ( /*#__PURE__*/React.isValidElement(MultiBodiedExtensionNodeRenderer)) {
           // Return the content directly if it's a valid JSX.Element
-          return renderExtension(result, layout, {
+          return renderExtension(MultiBodiedExtensionNodeRenderer, layout, {
             isTopLevel: path.length < 1
           });
         }
@@ -147,24 +146,34 @@ const MultiBodiedExtension = props => {
       return renderExtension(children, layout, {
         isTopLevel: path.length < 1
       });
-    })), jsx("article", {
-      "data-testid": "multiBodiedExtension--frames"
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-      ,
-      className: `multiBodiedExtension--frames`
-    }, children));
-  }
+    };
+    if (privateProps.__allowBodiedOverride) {
+      return renderMultiBodiedExtension();
+    } else {
+      return jsx(React.Fragment, null, jsx(MultiBodiedExtensionNavigation, null, renderMultiBodiedExtension()), jsx(MultiBodiedExtensionChildrenContainer, null, children));
+    }
+  }, [loading, extensionContext, layout, path, marks, extensionKey, extensionType, parameters, content, localId, actions, children]);
+
+  // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
+  const containerActiveFrameStyles = css`
+		.multiBodiedExtension--frames
+			> [data-extension-frame='true']:nth-of-type(${activeChildIndex + 1}) {
+			display: block;
+		}
+	`;
   return jsx("section", {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-    className: "multiBodiedExtension--container"
-    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-    ,
-    css: containerCssExtended,
+    className: "multiBodiedExtension--container",
+    css: [containerStyles, containerActiveFrameStyles],
     "data-testid": "multiBodiedExtension--container",
     "data-active-child-index": activeChildIndex,
     "data-layout": layout
   }, jsx(WidthConsumer, null, ({
     width
-  }) => renderMbeContent(width)));
+  }) => jsx(MultiBodiedExtensionWrapper, {
+    layout: layout,
+    width: width,
+    path: path
+  }, renderContent())));
 };
 export default MultiBodiedExtension;

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

@@ -0,0 +1,168 @@
+import _extends from "@babel/runtime/helpers/extends";
+/* eslint-disable @atlaskit/design-system/prefer-primitives, @atlaskit/design-system/consistent-css-prop-usage */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { jsx, css } from '@emotion/react';
+import { N40 } from '@atlaskit/theme/colors';
+import React, { useState } from 'react';
+import { renderExtension } from './extension';
+import ExtensionRenderer from '../../ui/ExtensionRenderer';
+import { WidthConsumer, sharedMultiBodiedExtensionStyles } from '@atlaskit/editor-common/ui';
+import { RendererCssClassName } from '../../consts';
+import { calcBreakoutWidth } from '@atlaskit/editor-common/utils';
+const useMultiBodiedExtensionActions = ({
+  updateActiveChild,
+  children
+}) => {
+  const actions = React.useMemo(() => {
+    return {
+      changeActive(index) {
+        return updateActiveChild(index);
+      },
+      addChild() {
+        return false;
+      },
+      getChildrenCount() {
+        return children ? children === null || children === void 0 ? void 0 : children.length : 0;
+      },
+      removeChild(index) {
+        return false;
+      },
+      updateParameters(parameters) {
+        return false;
+      },
+      // Ignored via go/ees005
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      getChildren() {
+        return [];
+      },
+      getChildrenContainer() {
+        return null;
+      }
+    };
+  }, [updateActiveChild, children]);
+  return actions;
+};
+
+// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Ignored via go/DSP-18766
+const navigationCssExtended = css`
+	${sharedMultiBodiedExtensionStyles.mbeNavigation};
+	margin-left: 0 !important;
+	margin-right: 0 !important;
+	.mbe-add-tab-button,
+	.mbe-remove-tab {
+		display: none;
+	}
+`;
+const MultiBodiedExtension = props => {
+  const {
+    children,
+    layout = 'default',
+    path = []
+  } = props;
+  const [activeChildIndex, setActiveChildIndex] = useState(0);
+  const removeOverflow = React.Children.toArray(children)
+  // Ignored via go/ees005
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  .map(child => /*#__PURE__*/React.isValidElement(child) ? child.props.nodeType === 'table' : false).every(Boolean);
+  const overflowContainerClass = !removeOverflow ? RendererCssClassName.EXTENSION_OVERFLOW_CONTAINER : '';
+  const updateActiveChild = React.useCallback(index => {
+    if (typeof index !== 'number') {
+      // Ignored via go/ees007
+      // eslint-disable-next-line @atlaskit/editor/enforce-todo-comment-format
+      // TODO: Make sure we log this somewhere if this happens
+      setActiveChildIndex(0);
+      return false;
+    }
+    setActiveChildIndex(index);
+    return true;
+  }, [setActiveChildIndex]);
+  const actions = useMultiBodiedExtensionActions({
+    updateActiveChild,
+    children
+  });
+  // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
+  const containerCssExtended = css`
+		${sharedMultiBodiedExtensionStyles.mbeExtensionContainer};
+		.ak-renderer-extension {
+			margin-top: 0 !important;
+		}
+
+		[data-layout='full-width'],
+		[data-layout='wide'] {
+			.multiBodiedExtension-navigation {
+				border-right: 3px solid ${`var(--ds-border, ${N40})`} !important;
+			}
+		}
+
+		.multiBodiedExtension--frames
+			> [data-extension-frame='true']:nth-of-type(${activeChildIndex + 1}) {
+			${sharedMultiBodiedExtensionStyles.extensionFrameContent}
+			margin-left: 0;
+			margin-right: 0;
+		}
+	`;
+  const isTopLevel = path.length < 1;
+  const centerAlignClass = isTopLevel && ['wide', 'full-width'].includes(layout) ? RendererCssClassName.EXTENSION_CENTER_ALIGN : '';
+  function renderMbeContent(width) {
+    return jsx("div", {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      className: `${RendererCssClassName.EXTENSION} ${centerAlignClass} ${overflowContainerClass}`,
+      style: {
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+        width: isTopLevel ? calcBreakoutWidth(layout, width) : '100%'
+      },
+      "data-layout": layout
+    }, jsx("nav", {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      className: "multiBodiedExtension-navigation",
+      css: navigationCssExtended,
+      "data-testid": "multiBodiedExtension-navigation"
+    }, jsx(ExtensionRenderer
+    // Ignored via go/ees005
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    , _extends({}, props, {
+      actions: actions,
+      type: "multiBodiedExtension"
+    }), ({
+      result
+    }) => {
+      try {
+        if (result && /*#__PURE__*/React.isValidElement(result)) {
+          // Return the content directly if it's a valid JSX.Element
+          return renderExtension(result, layout, {
+            isTopLevel: path.length < 1
+          });
+        }
+      } 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(children, layout, {
+        isTopLevel: path.length < 1
+      });
+    })), jsx("article", {
+      "data-testid": "multiBodiedExtension--frames"
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      ,
+      className: `multiBodiedExtension--frames`
+    }, children));
+  }
+  return jsx("section", {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    className: "multiBodiedExtension--container",
+    css: containerCssExtended,
+    "data-testid": "multiBodiedExtension--container",
+    "data-active-child-index": activeChildIndex,
+    "data-layout": layout
+  }, jsx(WidthConsumer, null, ({
+    width
+  }) => renderMbeContent(width)));
+};
+export default MultiBodiedExtension;

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

@@ -48,7 +48,7 @@ import { removeEmptySpaceAroundContent } from './rendererHelper';
 export const NORMAL_SEVERITY_THRESHOLD = 2000;
 export const DEGRADED_SEVERITY_THRESHOLD = 3000;
 const packageName = "@atlaskit/renderer";
-const packageVersion = "114.2.1";
+const packageVersion = "114.3.1";
 const setAsQueryContainerStyles = css({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size',

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

@@ -5,16 +5,18 @@
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx, css } from '@emotion/react';
+import { sharedMultiBodiedExtensionStyles } from '@atlaskit/editor-common/ui';
+import { fg } from '@atlaskit/platform-feature-flags';
 var containerCSS = css({
-  minHeight: '100px'
+  minHeight: '100px',
+  flexBasis: '100%'
 });
 var ExtensionFrame = function ExtensionFrame(props) {
   return jsx("div", {
-    css: containerCSS,
-    "data-extension-frame": "true",
-    style: {
-      flexBasis: "100%"
-    }
+    css: [containerCSS, fg('platform_editor_multi_body_extension_extensibility') &&
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    sharedMultiBodiedExtensionStyles.extensionFrameContent],
+    "data-extension-frame": "true"
   }, props.children);
 };
 export default ExtensionFrame;

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

@@ -5,8 +5,11 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 // Mapping file
 
 import Loadable from 'react-loadable';
+import { UnsupportedBlock, UnsupportedInline } from '@atlaskit/editor-common/ui';
+import { fg } from '@atlaskit/platform-feature-flags';
 import Blockquote from './blockquote';
 import BodiedExtension from './bodiedExtension';
+import MultiBodiedExtensionOld from './multiBodiedExtensionOld';
 import MultiBodiedExtension from './multiBodiedExtension';
 import ExtensionFrame from './extensionFrame';
 import BulletList from './bulletList';
@@ -27,7 +30,6 @@ import Table from './table';
 import { TableCell, TableHeader } from './tableCell';
 import TableRow from './tableRow';
 import UnknownBlock from './unknownBlock';
-import { UnsupportedBlock, UnsupportedInline } from '@atlaskit/editor-common/ui';
 
 // Ignored via go/ees005
 // eslint-disable-next-line import/no-named-as-default
@@ -302,6 +304,7 @@ export var toReact = function toReact(node, flags, nodeComponents
 
   // Allowing custom components to override those provided in nodeToReact
   var nodes = _objectSpread(_objectSpread({}, nodeToReact), nodeComponents);
+  nodes['multiBodiedExtension'] = fg('platform_editor_multi_body_extension_extensibility') ? MultiBodiedExtension : MultiBodiedExtensionOld;
   return nodes[node.type.name];
 };
 /*