@atlaskit/renderer 114.2.0 → 114.3.0

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

@@ -698,6 +698,13 @@ var smartCardStyles = (0, _react.css)((0, _defineProperty2.default)({}, ".".conc
   margin: "".concat(_editorSharedStyles.blockNodesVerticalMargin, " 0 0"),
   maxWidth: "".concat(8 * 95, "px")
 }));
+var smartCardStylesAvatarFix = (0, _react.css)((0, _defineProperty2.default)({}, ".".concat(_styles.SmartCardSharedCssClassName.LOADER_WRAPPER), {
+  /* EDM-11991: Fix list plugin adding padding to ADS AvatarGroup start */
+  'ul, ol': {
+    paddingLeft: 'inherit'
+  }
+  /* EDM-11991: Fix list plugin add padding to ADS AvatarGroup end */
+}));
 var baseOtherStyles = (0, _react.css)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({
   '& .UnknownBlock': {
     fontFamily: "var(--ds-font-family-body, ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
@@ -1348,7 +1355,7 @@ var RendererStyleContainer = exports.RendererStyleContainer = function RendererS
         style: {
           '--ak-renderer-base-font-size': "".concat((0, _getBaseFontSize.getBaseFontSize)(appearance), "px")
         },
-        css: [baseStyles, appearance === 'full-page' && rendererFullPageStyles, appearance === 'full-width' && rendererFullWidthStyles, !(0, _table.isTableResizingEnabled)(appearance) && rendererFullWidthStylesForTableResizing, telepointerStyles, whitespaceSharedStyles, blockquoteSharedStyles, (0, _platformFeatureFlags.fg)('platform_editor_typography_ugc') ? headingsSharedStylesWithEditorUGC : headingsSharedStyles, (0, _platformFeatureFlags.fg)('platform_editor_heading_margin_fix') && headingWithAlignmentStyles, ruleSharedStyles, (0, _platformFeatureFlags.fg)('platform_editor_typography_ugc') ? paragraphSharedStylesWithEditorUGC : paragraphSharedStyles, listsSharedStyles, _browser.browser.gecko && listsSharedStylesForGekko, indentationSharedStyles, blockMarksSharedStyles, codeMarkSharedStyles, shadowSharedStyle, dateSharedStyle, textColorStyles, backgroundColorStyles, tasksAndDecisionsStyles, smartCardStyles,
+        css: [baseStyles, appearance === 'full-page' && rendererFullPageStyles, appearance === 'full-width' && rendererFullWidthStyles, !(0, _table.isTableResizingEnabled)(appearance) && rendererFullWidthStylesForTableResizing, telepointerStyles, whitespaceSharedStyles, blockquoteSharedStyles, (0, _platformFeatureFlags.fg)('platform_editor_typography_ugc') ? headingsSharedStylesWithEditorUGC : headingsSharedStyles, (0, _platformFeatureFlags.fg)('platform_editor_heading_margin_fix') && headingWithAlignmentStyles, ruleSharedStyles, (0, _platformFeatureFlags.fg)('platform_editor_typography_ugc') ? paragraphSharedStylesWithEditorUGC : paragraphSharedStyles, listsSharedStyles, _browser.browser.gecko && listsSharedStylesForGekko, indentationSharedStyles, blockMarksSharedStyles, codeMarkSharedStyles, shadowSharedStyle, dateSharedStyle, textColorStyles, backgroundColorStyles, tasksAndDecisionsStyles, smartCardStyles, (0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1') && smartCardStylesAvatarFix,
         // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
         (0, _platformFeatureFlags.fg)('editor_inline_comments_on_inline_nodes') && rendererAnnotationStyles,
         // eslint-disable-next-line @atlaskit/platform/no-preconditioning, @atlaskit/platform/ensure-feature-flag-prefix

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

@@ -67,7 +67,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 = "114.2.0";
+var packageVersion = "114.3.0";
 var setAsQueryContainerStyles = (0, _react2.css)({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size',

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

@@ -203,7 +203,7 @@ var rendererStyles = exports.rendererStyles = function rendererStyles(wrapperPro
     var isAdvancedLayoutsOn = (0, _experiments.editorExperiment)('advanced_layouts', true);
 
     // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview, @atlaskit/design-system/no-css-tagged-template-expression
-    return (0, _react.css)(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n\t\tfont-size: ", "px;\n\t\tline-height: 1.5rem;\n\t\tcolor: ", ";\n\n\t\t.", "::after {\n\t\t\t// we add a clearfix after ak-renderer-document in order to\n\t\t\t// contain internal floats (such as media images that are \"wrap-left\")\n\t\t\t// to just the renderer (and not spill outside of it)\n\t\t\tcontent: '';\n\t\t\tvisibility: hidden;\n\t\t\tdisplay: block;\n\t\t\theight: 0;\n\t\t\tclear: both;\n\t\t}\n\n\t\t", "\n\t\t", "\n\n      .", " {\n\t\t\t", "\n\t\t}\n\n\t\t& h1 {\n\t\t\t", "\n\t\t}\n\n\t\t& h2 {\n\t\t\t", "\n\t\t}\n\n\t\t& h3 {\n\t\t\t", "\n\t\t}\n\n\t\t& h4 {\n\t\t\t", "\n\t\t}\n\n\t\t& h5 {\n\t\t\t", "\n\t\t}\n\n\t\t& h6 {\n\t\t\t", "\n\t\t}\n\n\t\t& span.akActionMark {\n\t\t\tcolor: ", ";\n\t\t\ttext-decoration: none;\n\n\t\t\t&:hover {\n\t\t\t\tcolor: ", ";\n\t\t\t\ttext-decoration: underline;\n\t\t\t}\n\n\t\t\t&:active {\n\t\t\t\tcolor: ", ";\n\t\t\t}\n\t\t}\n\n\t\t& span.akActionMark {\n\t\t\tcursor: pointer;\n\t\t}\n\n\t\t& span[data-placeholder] {\n\t\t\tcolor: ", ";\n\t\t}\n\n\t\t", "\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", "\n\t\t", "\n\n\t\t& .UnknownBlock {\n\t\t\tfont-family: ", ";\n\t\t\tfont-size: ", ";\n\t\t\tfont-weight: ", ";\n\t\t\twhite-space: pre-wrap;\n\t\t\tword-wrap: break-word;\n\t\t}\n\n\t\t& span.date-node {\n\t\t\tbackground: ", ";\n\t\t\tborder-radius: ", ";\n\t\t\tcolor: ", ";\n\t\t\tpadding: ", " ", ";\n\t\t\tmargin: 0 1px;\n\t\t\ttransition: background 0.3s;\n\t\t}\n\n\t\t& span.date-node-highlighted {\n\t\t\tbackground: ", ";\n\t\t\tcolor: ", ";\n\t\t}\n\n\t\t& .renderer-image {\n\t\t\tmax-width: 100%;\n\t\t\tdisplay: block;\n\t\t\tmargin: ", " 0;\n\t\t}\n\n\t\t.", ".rich-media-wrapped + .", ":not(.rich-media-wrapped) {\n\t\t\tclear: both;\n\t\t}\n\n\t\t& .code-block,\n\t\t& blockquote,\n\t\t& hr,\n\t\t& > div > div:not(.rich-media-wrapped),\n\t\t.", ".rich-media-wrapped + .rich-media-wrapped + *:not(.rich-media-wrapped),\n\t\t.", ".rich-media-wrapped + div:not(.rich-media-wrapped),\n\t\t.", ".image-align-start,\n\t\t\t.", ".image-center,\n\t\t\t.", ".image-align-end {\n\t\t\tclear: both;\n\t\t}\n\n\t\t& .rich-media-wrapped {\n\t\t\t& + h1,\n\t\t\t& + h2,\n\t\t\t& + h3,\n\t\t\t& + h4,\n\t\t\t& + h5,\n\t\t\t& + h6 {\n\t\t\t\tmargin-top: ", ";\n\t\t\t}\n\t\t}\n\n\t\t", "\n\t\t/* plugin styles */\n    ", " &\n    div[class^='image-wrap-'] + div[class^='image-wrap-'] {\n\t\t\tmargin-left: 0;\n\t\t\tmargin-right: 0;\n\t\t}\n\n\t\t/* Breakout for tables and extensions */\n\t\t.", " > {\n\t\t\t", "\n\n\t\t\t* .", " {\n\t\t\t\toverflow-x: auto;\n\t\t\t}\n\n\t\t\t& .", ":first-child {\n\t\t\t\tmargin-top: 0;\n\t\t\t}\n\t\t}\n\n\t\t.", " {\n\t\t\t.", " {\n\t\t\t\tmargin-top: ", ";\n\t\t\t}\n\n\t\t\t.", " {\n\t\t\t\tmargin-left: 50%;\n\t\t\t\ttransform: translateX(-50%);\n\t\t\t}\n\n\t\t\t.", " {\n\t\t\t\toverflow-x: auto;\n\t\t\t}\n\n\t\t\t.", " .", " {\n\t\t\t\tdisplay: flex;\n\t\t\t}\n\t\t}\n\n\t\t", "\n\n\t\t.", " .", " {\n\t\t\tz-index: 0;\n\t\t\ttransition: all 0.1s linear;\n\t\t\tdisplay: flex; /* needed to avoid position: fixed jumpiness in Chrome */\n\n\t\t\t/** Shadow overrides */\n\t\t\t&.", "::after, &.", "::before {\n\t\t\t\ttop: ", "px;\n\t\t\t\theight: calc(100% - ", "px);\n\t\t\t\tz-index: ", ";\n\t\t\t}\n\n\t\t\t", "\n\n\t\t\t", "\n\n\t\t\t&\n          .", ",\n          &\n          .", " {\n\t\t\t\theight: calc(100% - ", "px);\n\t\t\t}\n\n\t\t\t/**\n\t\t\t * A hack for making all the <th /> heights equal in case some have shorter\n\t\t\t * content than others.\n\t\t\t *\n\t\t\t * This is done to make sort buttons fill entire <th />.\n\t\t\t*/\n\t\t\t", " {\n\t\t\t\theight: 1px; /* will be ignored */\n\t\t\t\t", ";\n\t\t\t\tmargin-left: 0;\n\t\t\t\tmargin-right: 0;\n\t\t\t}\n\n\t\t\t", " {\n\t\t\t\theight: 100%;\n\n\t\t\t\ttd,\n\t\t\t\tth {\n\t\t\t\t\tposition: relative;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\ttable[data-number-column='true'] {\n\t\t\t\t.", " {\n\t\t\t\t\tbackground-color: ", ";\n\t\t\t\t\tborder-right: 1px solid\n\t\t\t\t\t\t", ";\n\t\t\t\t\twidth: ", "px;\n\t\t\t\t\ttext-align: center;\n\t\t\t\t\tcolor: ", ";\n\t\t\t\t\tfont-size: ", ";\n\t\t\t\t}\n\n\t\t\t\t.fixed .", " {\n\t\t\t\t\tborder-right: 0px none;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\ttr[data-header-row].fixed {\n\t\t\tposition: fixed !important;\n\t\t\tdisplay: flex;\n\t\t\toverflow: hidden;\n\t\t\tz-index: ", ";\n\n\t\t\tborder-right: 1px solid ", ";\n\t\t\tborder-bottom: 1px solid ", ";\n\n\t\t\t/* this is to compensate for the table border */\n\t\t\ttransform: translateX(-1px);\n\t\t}\n\n\t\t.sticky > th {\n\t\t\tz-index: ", ";\n\t\t\tposition: sticky !important;\n\t\t\ttop: 0;\n\t\t}\n\n\t\t/* Make the number column header sticky */\n\t\t.sticky > td {\n\t\t\tposition: sticky !important;\n\t\t\ttop: 0;\n\t\t}\n\n\t\t/* add border for position: sticky\n     and work around background-clip: padding-box\n     bug for FF causing box-shadow bug in Chrome */\n\t\t.sticky th,\n\t\t.sticky td {\n\t\t\tbox-shadow:\n\t\t\t\t0px 1px ", ",\n\t\t\t\t0px -0.5px ", ",\n\t\t\t\tinset -1px 0px ", ",\n\t\t\t\t0px -1px ", ";\n\t\t}\n\n\t\t/* this will remove jumpiness caused in Chrome for sticky headers */\n\t\t.fixed + tr {\n\t\t\tmin-height: 0px;\n\t\t}\n\n\t\t/*\n   * We wrap CodeBlock in a grid to prevent it from overflowing the container of the renderer.\n   * See ED-4159.\n   */\n\t\t& .code-block {\n\t\t\tmax-width: 100%;\n\t\t\t/* -ms- properties are necessary until MS supports the latest version of the grid spec */\n\t\t\t/* stylelint-disable value-no-vendor-prefix, declaration-block-no-duplicate-properties */\n\t\t\tdisplay: block;\n\t\t\t/* stylelint-enable */\n\n\t\t\tposition: relative;\n\t\t\tborder-radius: ", ";\n\n\t\t\t/*\n     * The overall renderer has word-wrap: break; which causes issues with\n     * code block line numbers in Safari / iOS.\n     */\n\t\t\tword-wrap: normal;\n\t\t}\n\n\t\t& .MediaGroup,\n\t\t& .code-block {\n\t\t\tmargin-top: ", ";\n\n\t\t\t&:first-child {\n\t\t\t\tmargin-top: 0;\n\t\t\t}\n\t\t}\n\n\t\t", "\n\n\t\t", "\n\n      ", ";\n\t\t", ";\n\t\t& [data-layout-section] {\n\t\t\tmargin-top: ", ";\n\t\t\t& > div + div {\n\t\t\t\tmargin-left: ", ";\n\t\t\t}\n\n\t\t\t@media screen and (max-width: ", "px) {\n\t\t\t\t& > div + div {\n\t\t\t\t\tmargin-left: 0;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t& .MediaGroup,\n\t\t\t& .code-block {\n\t\t\t\tmargin-top: ", ";\n\n\t\t\t\t&:first-child {\n\t\t\t\t\tmargin-top: 0;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t& li {\n\t\t\t> .code-block {\n\t\t\t\tmargin: ", " 0 0 0;\n\t\t\t}\n\t\t\t> .code-block:first-child {\n\t\t\t\tmargin-top: 0;\n\t\t\t}\n\n\t\t\t> div:last-of-type.code-block {\n\t\t\t\tmargin-bottom: ", ";\n\t\t\t}\n\t\t}\n\n\t\t&:not([data-node-type='decisionList']) > li,\n      // This prevents https://product-fabric.atlassian.net/browse/ED-20924\n      &:not(.", ") > li {\n\t\t\t", "\n\t\t}\n\t"])), (0, _editorSharedStyles.editorFontSize)(themeProps), "var(--ds-text, ".concat(colors.N800, ")"), _consts.RendererCssClassName.DOCUMENT, fullPageStyles(wrapperProps, themeProps), fullWidthStyles(wrapperProps), _consts.RendererCssClassName.DOCUMENT, _mediaInline.mediaInlineImageStyles, headingAnchorStyle('h1'), headingAnchorStyle('h2'), headingAnchorStyle('h3'), headingAnchorStyle('h4'), headingAnchorStyle('h5'), headingAnchorStyle('h6'), "var(--ds-link, ".concat(colors.B400, ")"), "var(--ds-link, ".concat(colors.B300, ")"), "var(--ds-link-pressed, ".concat(colors.B500, ")"), "var(--ds-text-subtlest, ".concat(colors.N200, ")"), telepointerStyles, _styles.whitespaceSharedStyles, _styles.blockquoteSharedStyles, (0, _styles.headingsSharedStyles)(typography), (0, _styles.ruleSharedStyles)(), (0, _styles.paragraphSharedStyles)(typography), _styles.listsSharedStyles, _styles.indentationSharedStyles, _styles.blockMarksSharedStyles, (0, _styles.codeMarkSharedStyles)(), _styles.shadowSharedStyle, _styles.dateSharedStyle, _styles.textColorStyles, (0, _styles.backgroundColorStyles)(), _styles.tasksAndDecisionsStyles, _styles.smartCardSharedStyles, getAnnotationStyles(wrapperProps), "var(--ds-font-family-body, ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)", (0, _editorSharedStyles.relativeFontSizeToBase16)(14), "var(--ds-font-weight-regular, 400)", "var(--ds-background-neutral, ".concat(colors.N30A, ")"), "var(--ds-border-radius-100, 3px)", "var(--ds-text, ".concat(colors.N800, ")"), "var(--ds-space-025, 2px)", "var(--ds-space-050, 4px)", "var(--ds-background-danger, ".concat(colors.R50, ")"), "var(--ds-text-danger, ".concat(colors.R500, ")"), "var(--ds-space-300, 24px)", _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, "var(--ds-space-100, 8px)", alignedHeadingAnchorStyle(wrapperProps), _styles.mediaSingleSharedStyle, _consts.RendererCssClassName.DOCUMENT, breakoutWidthStyle(), _consts.RendererCssClassName.EXTENSION_OVERFLOW_CONTAINER, _consts.RendererCssClassName.EXTENSION, _consts.RendererCssClassName.DOCUMENT, _consts.RendererCssClassName.EXTENSION, _editorSharedStyles.blockNodesVerticalMargin, _consts.RendererCssClassName.EXTENSION_CENTER_ALIGN, _styles.TableSharedCssClassName.TABLE_NODE_WRAPPER, _ui.shadowObserverClassNames.SHADOW_CONTAINER, _styles.TableSharedCssClassName.TABLE_NODE_WRAPPER, (0, _styles.tableSharedStyle)(), _consts.RendererCssClassName.DOCUMENT, _styles.TableSharedCssClassName.TABLE_CONTAINER, _ui.shadowClassNames.RIGHT_SHADOW, _ui.shadowClassNames.LEFT_SHADOW, _styles.tableMarginTop - 1, _styles.tableMarginTop, _editorSharedStyles.akEditorStickyHeaderZIndex, getShadowOverrides(), (0, _table.isStickyScrollbarEnabled)(appearance) ? stickyScrollbarStyles : '', _ui.shadowObserverClassNames.SENTINEL_LEFT, _ui.shadowObserverClassNames.SENTINEL_RIGHT, _styles.tableMarginTop, (0, _platformFeatureFlags.fg)('platform_editor_renderer_table_header_styles') ? ".".concat(_styles.TableSharedCssClassName.TABLE_NODE_WRAPPER, " > table, .").concat(_styles.TableSharedCssClassName.TABLE_STICKY_WRAPPER, " > table") : 'table', tableSortableColumnStyle(wrapperProps), (0, _platformFeatureFlags.fg)('platform_editor_renderer_table_header_styles') ? ".".concat(_styles.TableSharedCssClassName.TABLE_NODE_WRAPPER, " > table > tbody > tr:first-of-type, .").concat(_styles.TableSharedCssClassName.TABLE_STICKY_WRAPPER, " > table > tbody > tr:first-of-type") : 'table tr:first-of-type', _consts.RendererCssClassName.NUMBER_COLUMN, "var(--ds-background-neutral, ".concat(_editorSharedStyles.akEditorTableToolbar, ")"), "var(--ds-background-accent-gray-subtler, ".concat(_editorSharedStyles.akEditorTableBorder, ")"), _editorSharedStyles.akEditorTableNumberColumnWidth, "var(--ds-text-subtlest, ".concat(colors.N200, ")"), (0, _editorSharedStyles.relativeFontSizeToBase16)(14), _consts.RendererCssClassName.NUMBER_COLUMN, _editorSharedStyles.akEditorStickyHeaderZIndex, "var(--ds-background-accent-gray-subtler, ".concat(_editorSharedStyles.akEditorTableBorder, ")"), "var(--ds-background-accent-gray-subtler, ".concat(_editorSharedStyles.akEditorTableBorder, ")"), _editorSharedStyles.akEditorStickyHeaderZIndex, "var(--ds-background-accent-gray-subtler, ".concat(_editorSharedStyles.akEditorTableBorder, ")"), "var(--ds-background-accent-gray-subtler, ".concat(_editorSharedStyles.akEditorTableBorder, ")"), "var(--ds-background-accent-gray-subtler, ".concat(_editorSharedStyles.akEditorTableToolbar, ")"), "var(--ds-background-accent-gray-subtler, ".concat(_editorSharedStyles.akEditorTableToolbar, ")"), "var(--ds-border-radius-100, 3px)", _editorSharedStyles.blockNodesVerticalMargin, useGridRenderForCodeBlock(useBlockRenderForCodeBlock), (0, _lightWeightCodeBlock.getLightWeightCodeBlockStylesForRootRendererStyleSheet)(), isAdvancedLayoutsOn ? _styles.columnLayoutResponsiveSharedStyle : _styles.columnLayoutSharedStyle, isAdvancedLayoutsOn && _styles.columnLayoutResponsiveRendererStyles, "var(--ds-space-250, 20px)", isAdvancedLayoutsOn ? 0 : "var(--ds-space-400, 32px)", _editorSharedStyles.gridMediumMaxWidth, _editorSharedStyles.blockNodesVerticalMargin, _editorSharedStyles.blockNodesVerticalMargin, _editorSharedStyles.blockNodesVerticalMargin, _styles.SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER, _browser.browser.safari ? _styles.codeBlockInListSafariFix : '');
+    return (0, _react.css)(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n\t\tfont-size: ", "px;\n\t\tline-height: 1.5rem;\n\t\tcolor: ", ";\n\n\t\t.", "::after {\n\t\t\t// we add a clearfix after ak-renderer-document in order to\n\t\t\t// contain internal floats (such as media images that are \"wrap-left\")\n\t\t\t// to just the renderer (and not spill outside of it)\n\t\t\tcontent: '';\n\t\t\tvisibility: hidden;\n\t\t\tdisplay: block;\n\t\t\theight: 0;\n\t\t\tclear: both;\n\t\t}\n\n\t\t", "\n\t\t", "\n\n      .", " {\n\t\t\t", "\n\t\t}\n\n\t\t& h1 {\n\t\t\t", "\n\t\t}\n\n\t\t& h2 {\n\t\t\t", "\n\t\t}\n\n\t\t& h3 {\n\t\t\t", "\n\t\t}\n\n\t\t& h4 {\n\t\t\t", "\n\t\t}\n\n\t\t& h5 {\n\t\t\t", "\n\t\t}\n\n\t\t& h6 {\n\t\t\t", "\n\t\t}\n\n\t\t& span.akActionMark {\n\t\t\tcolor: ", ";\n\t\t\ttext-decoration: none;\n\n\t\t\t&:hover {\n\t\t\t\tcolor: ", ";\n\t\t\t\ttext-decoration: underline;\n\t\t\t}\n\n\t\t\t&:active {\n\t\t\t\tcolor: ", ";\n\t\t\t}\n\t\t}\n\n\t\t& span.akActionMark {\n\t\t\tcursor: pointer;\n\t\t}\n\n\t\t& span[data-placeholder] {\n\t\t\tcolor: ", ";\n\t\t}\n\n\t\t", "\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", "\n\t\t", "\n\n\t\t& .UnknownBlock {\n\t\t\tfont-family: ", ";\n\t\t\tfont-size: ", ";\n\t\t\tfont-weight: ", ";\n\t\t\twhite-space: pre-wrap;\n\t\t\tword-wrap: break-word;\n\t\t}\n\n\t\t& span.date-node {\n\t\t\tbackground: ", ";\n\t\t\tborder-radius: ", ";\n\t\t\tcolor: ", ";\n\t\t\tpadding: ", " ", ";\n\t\t\tmargin: 0 1px;\n\t\t\ttransition: background 0.3s;\n\t\t}\n\n\t\t& span.date-node-highlighted {\n\t\t\tbackground: ", ";\n\t\t\tcolor: ", ";\n\t\t}\n\n\t\t& .renderer-image {\n\t\t\tmax-width: 100%;\n\t\t\tdisplay: block;\n\t\t\tmargin: ", " 0;\n\t\t}\n\n\t\t.", ".rich-media-wrapped + .", ":not(.rich-media-wrapped) {\n\t\t\tclear: both;\n\t\t}\n\n\t\t& .code-block,\n\t\t& blockquote,\n\t\t& hr,\n\t\t& > div > div:not(.rich-media-wrapped),\n\t\t.", ".rich-media-wrapped + .rich-media-wrapped + *:not(.rich-media-wrapped),\n\t\t.", ".rich-media-wrapped + div:not(.rich-media-wrapped),\n\t\t.", ".image-align-start,\n\t\t\t.", ".image-center,\n\t\t\t.", ".image-align-end {\n\t\t\tclear: both;\n\t\t}\n\n\t\t& .rich-media-wrapped {\n\t\t\t& + h1,\n\t\t\t& + h2,\n\t\t\t& + h3,\n\t\t\t& + h4,\n\t\t\t& + h5,\n\t\t\t& + h6 {\n\t\t\t\tmargin-top: ", ";\n\t\t\t}\n\t\t}\n\n\t\t", "\n\t\t/* plugin styles */\n    ", " &\n    div[class^='image-wrap-'] + div[class^='image-wrap-'] {\n\t\t\tmargin-left: 0;\n\t\t\tmargin-right: 0;\n\t\t}\n\n\t\t/* Breakout for tables and extensions */\n\t\t.", " > {\n\t\t\t", "\n\n\t\t\t* .", " {\n\t\t\t\toverflow-x: auto;\n\t\t\t}\n\n\t\t\t& .", ":first-child {\n\t\t\t\tmargin-top: 0;\n\t\t\t}\n\t\t}\n\n\t\t.", " {\n\t\t\t.", " {\n\t\t\t\tmargin-top: ", ";\n\t\t\t}\n\n\t\t\t.", " {\n\t\t\t\tmargin-left: 50%;\n\t\t\t\ttransform: translateX(-50%);\n\t\t\t}\n\n\t\t\t.", " {\n\t\t\t\toverflow-x: auto;\n\t\t\t}\n\n\t\t\t.", " .", " {\n\t\t\t\tdisplay: flex;\n\t\t\t}\n\t\t}\n\n\t\t", "\n\n\t\t.", " .", " {\n\t\t\tz-index: 0;\n\t\t\ttransition: all 0.1s linear;\n\t\t\tdisplay: flex; /* needed to avoid position: fixed jumpiness in Chrome */\n\n\t\t\t/** Shadow overrides */\n\t\t\t&.", "::after, &.", "::before {\n\t\t\t\ttop: ", "px;\n\t\t\t\theight: calc(100% - ", "px);\n\t\t\t\tz-index: ", ";\n\t\t\t}\n\n\t\t\t", "\n\n\t\t\t", "\n\n\t\t\t&\n          .", ",\n          &\n          .", " {\n\t\t\t\theight: calc(100% - ", "px);\n\t\t\t}\n\n\t\t\t/**\n\t\t\t * A hack for making all the <th /> heights equal in case some have shorter\n\t\t\t * content than others.\n\t\t\t *\n\t\t\t * This is done to make sort buttons fill entire <th />.\n\t\t\t*/\n\t\t\t", " {\n\t\t\t\theight: 1px; /* will be ignored */\n\t\t\t\t", ";\n\t\t\t\tmargin-left: 0;\n\t\t\t\tmargin-right: 0;\n\t\t\t}\n\n\t\t\t", " {\n\t\t\t\theight: 100%;\n\n\t\t\t\ttd,\n\t\t\t\tth {\n\t\t\t\t\tposition: relative;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\ttable[data-number-column='true'] {\n\t\t\t\t.", " {\n\t\t\t\t\tbackground-color: ", ";\n\t\t\t\t\tborder-right: 1px solid\n\t\t\t\t\t\t", ";\n\t\t\t\t\twidth: ", "px;\n\t\t\t\t\ttext-align: center;\n\t\t\t\t\tcolor: ", ";\n\t\t\t\t\tfont-size: ", ";\n\t\t\t\t}\n\n\t\t\t\t.fixed .", " {\n\t\t\t\t\tborder-right: 0px none;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\ttr[data-header-row].fixed {\n\t\t\tposition: fixed !important;\n\t\t\tdisplay: flex;\n\t\t\toverflow: hidden;\n\t\t\tz-index: ", ";\n\n\t\t\tborder-right: 1px solid ", ";\n\t\t\tborder-bottom: 1px solid ", ";\n\n\t\t\t/* this is to compensate for the table border */\n\t\t\ttransform: translateX(-1px);\n\t\t}\n\n\t\t.sticky > th {\n\t\t\tz-index: ", ";\n\t\t\tposition: sticky !important;\n\t\t\ttop: 0;\n\t\t}\n\n\t\t/* Make the number column header sticky */\n\t\t.sticky > td {\n\t\t\tposition: sticky !important;\n\t\t\ttop: 0;\n\t\t}\n\n\t\t/* add border for position: sticky\n     and work around background-clip: padding-box\n     bug for FF causing box-shadow bug in Chrome */\n\t\t.sticky th,\n\t\t.sticky td {\n\t\t\tbox-shadow:\n\t\t\t\t0px 1px ", ",\n\t\t\t\t0px -0.5px ", ",\n\t\t\t\tinset -1px 0px ", ",\n\t\t\t\t0px -1px ", ";\n\t\t}\n\n\t\t/* this will remove jumpiness caused in Chrome for sticky headers */\n\t\t.fixed + tr {\n\t\t\tmin-height: 0px;\n\t\t}\n\n\t\t/*\n   * We wrap CodeBlock in a grid to prevent it from overflowing the container of the renderer.\n   * See ED-4159.\n   */\n\t\t& .code-block {\n\t\t\tmax-width: 100%;\n\t\t\t/* -ms- properties are necessary until MS supports the latest version of the grid spec */\n\t\t\t/* stylelint-disable value-no-vendor-prefix, declaration-block-no-duplicate-properties */\n\t\t\tdisplay: block;\n\t\t\t/* stylelint-enable */\n\n\t\t\tposition: relative;\n\t\t\tborder-radius: ", ";\n\n\t\t\t/*\n     * The overall renderer has word-wrap: break; which causes issues with\n     * code block line numbers in Safari / iOS.\n     */\n\t\t\tword-wrap: normal;\n\t\t}\n\n\t\t& .MediaGroup,\n\t\t& .code-block {\n\t\t\tmargin-top: ", ";\n\n\t\t\t&:first-child {\n\t\t\t\tmargin-top: 0;\n\t\t\t}\n\t\t}\n\n\t\t", "\n\n\t\t", "\n\n      ", ";\n\t\t", ";\n\t\t& [data-layout-section] {\n\t\t\tmargin-top: ", ";\n\t\t\t& > div + div {\n\t\t\t\tmargin-left: ", ";\n\t\t\t}\n\n\t\t\t@media screen and (max-width: ", "px) {\n\t\t\t\t& > div + div {\n\t\t\t\t\tmargin-left: 0;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t& .MediaGroup,\n\t\t\t& .code-block {\n\t\t\t\tmargin-top: ", ";\n\n\t\t\t\t&:first-child {\n\t\t\t\t\tmargin-top: 0;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t& li {\n\t\t\t> .code-block {\n\t\t\t\tmargin: ", " 0 0 0;\n\t\t\t}\n\t\t\t> .code-block:first-child {\n\t\t\t\tmargin-top: 0;\n\t\t\t}\n\n\t\t\t> div:last-of-type.code-block {\n\t\t\t\tmargin-bottom: ", ";\n\t\t\t}\n\t\t}\n\n\t\t&:not([data-node-type='decisionList']) > li,\n      // This prevents https://product-fabric.atlassian.net/browse/ED-20924\n      &:not(.", ") > li {\n\t\t\t", "\n\t\t}\n\t"])), (0, _editorSharedStyles.editorFontSize)(themeProps), "var(--ds-text, ".concat(colors.N800, ")"), _consts.RendererCssClassName.DOCUMENT, fullPageStyles(wrapperProps, themeProps), fullWidthStyles(wrapperProps), _consts.RendererCssClassName.DOCUMENT, _mediaInline.mediaInlineImageStyles, headingAnchorStyle('h1'), headingAnchorStyle('h2'), headingAnchorStyle('h3'), headingAnchorStyle('h4'), headingAnchorStyle('h5'), headingAnchorStyle('h6'), "var(--ds-link, ".concat(colors.B400, ")"), "var(--ds-link, ".concat(colors.B300, ")"), "var(--ds-link-pressed, ".concat(colors.B500, ")"), "var(--ds-text-subtlest, ".concat(colors.N200, ")"), telepointerStyles, _styles.whitespaceSharedStyles, _styles.blockquoteSharedStyles, (0, _styles.headingsSharedStyles)(typography), (0, _styles.ruleSharedStyles)(), (0, _styles.paragraphSharedStyles)(typography), _styles.listsSharedStyles, _styles.indentationSharedStyles, _styles.blockMarksSharedStyles, (0, _styles.codeMarkSharedStyles)(), _styles.shadowSharedStyle, _styles.dateSharedStyle, _styles.textColorStyles, (0, _styles.backgroundColorStyles)(), _styles.tasksAndDecisionsStyles, (0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1') ? (0, _styles.getSmartCardSharedStyles)() : _styles.smartCardSharedStyles, getAnnotationStyles(wrapperProps), "var(--ds-font-family-body, ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)", (0, _editorSharedStyles.relativeFontSizeToBase16)(14), "var(--ds-font-weight-regular, 400)", "var(--ds-background-neutral, ".concat(colors.N30A, ")"), "var(--ds-border-radius-100, 3px)", "var(--ds-text, ".concat(colors.N800, ")"), "var(--ds-space-025, 2px)", "var(--ds-space-050, 4px)", "var(--ds-background-danger, ".concat(colors.R50, ")"), "var(--ds-text-danger, ".concat(colors.R500, ")"), "var(--ds-space-300, 24px)", _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, "var(--ds-space-100, 8px)", alignedHeadingAnchorStyle(wrapperProps), _styles.mediaSingleSharedStyle, _consts.RendererCssClassName.DOCUMENT, breakoutWidthStyle(), _consts.RendererCssClassName.EXTENSION_OVERFLOW_CONTAINER, _consts.RendererCssClassName.EXTENSION, _consts.RendererCssClassName.DOCUMENT, _consts.RendererCssClassName.EXTENSION, _editorSharedStyles.blockNodesVerticalMargin, _consts.RendererCssClassName.EXTENSION_CENTER_ALIGN, _styles.TableSharedCssClassName.TABLE_NODE_WRAPPER, _ui.shadowObserverClassNames.SHADOW_CONTAINER, _styles.TableSharedCssClassName.TABLE_NODE_WRAPPER, (0, _styles.tableSharedStyle)(), _consts.RendererCssClassName.DOCUMENT, _styles.TableSharedCssClassName.TABLE_CONTAINER, _ui.shadowClassNames.RIGHT_SHADOW, _ui.shadowClassNames.LEFT_SHADOW, _styles.tableMarginTop - 1, _styles.tableMarginTop, _editorSharedStyles.akEditorStickyHeaderZIndex, getShadowOverrides(), (0, _table.isStickyScrollbarEnabled)(appearance) ? stickyScrollbarStyles : '', _ui.shadowObserverClassNames.SENTINEL_LEFT, _ui.shadowObserverClassNames.SENTINEL_RIGHT, _styles.tableMarginTop, (0, _platformFeatureFlags.fg)('platform_editor_renderer_table_header_styles') ? ".".concat(_styles.TableSharedCssClassName.TABLE_NODE_WRAPPER, " > table, .").concat(_styles.TableSharedCssClassName.TABLE_STICKY_WRAPPER, " > table") : 'table', tableSortableColumnStyle(wrapperProps), (0, _platformFeatureFlags.fg)('platform_editor_renderer_table_header_styles') ? ".".concat(_styles.TableSharedCssClassName.TABLE_NODE_WRAPPER, " > table > tbody > tr:first-of-type, .").concat(_styles.TableSharedCssClassName.TABLE_STICKY_WRAPPER, " > table > tbody > tr:first-of-type") : 'table tr:first-of-type', _consts.RendererCssClassName.NUMBER_COLUMN, "var(--ds-background-neutral, ".concat(_editorSharedStyles.akEditorTableToolbar, ")"), "var(--ds-background-accent-gray-subtler, ".concat(_editorSharedStyles.akEditorTableBorder, ")"), _editorSharedStyles.akEditorTableNumberColumnWidth, "var(--ds-text-subtlest, ".concat(colors.N200, ")"), (0, _editorSharedStyles.relativeFontSizeToBase16)(14), _consts.RendererCssClassName.NUMBER_COLUMN, _editorSharedStyles.akEditorStickyHeaderZIndex, "var(--ds-background-accent-gray-subtler, ".concat(_editorSharedStyles.akEditorTableBorder, ")"), "var(--ds-background-accent-gray-subtler, ".concat(_editorSharedStyles.akEditorTableBorder, ")"), _editorSharedStyles.akEditorStickyHeaderZIndex, "var(--ds-background-accent-gray-subtler, ".concat(_editorSharedStyles.akEditorTableBorder, ")"), "var(--ds-background-accent-gray-subtler, ".concat(_editorSharedStyles.akEditorTableBorder, ")"), "var(--ds-background-accent-gray-subtler, ".concat(_editorSharedStyles.akEditorTableToolbar, ")"), "var(--ds-background-accent-gray-subtler, ".concat(_editorSharedStyles.akEditorTableToolbar, ")"), "var(--ds-border-radius-100, 3px)", _editorSharedStyles.blockNodesVerticalMargin, useGridRenderForCodeBlock(useBlockRenderForCodeBlock), (0, _lightWeightCodeBlock.getLightWeightCodeBlockStylesForRootRendererStyleSheet)(), isAdvancedLayoutsOn ? _styles.columnLayoutResponsiveSharedStyle : _styles.columnLayoutSharedStyle, isAdvancedLayoutsOn && _styles.columnLayoutResponsiveRendererStyles, "var(--ds-space-250, 20px)", isAdvancedLayoutsOn ? 0 : "var(--ds-space-400, 32px)", _editorSharedStyles.gridMediumMaxWidth, _editorSharedStyles.blockNodesVerticalMargin, _editorSharedStyles.blockNodesVerticalMargin, _editorSharedStyles.blockNodesVerticalMargin, _styles.SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER, _browser.browser.safari ? _styles.codeBlockInListSafariFix : '');
   };
 };
 var useGridRenderForCodeBlock = function useGridRenderForCodeBlock(codeBlockRenderAsBlock) {

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;