@atlaskit/renderer 108.20.8 → 108.20.9

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/renderer
 
+## 108.20.9
+
+### Patch Changes
+
+- [#60504](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/60504) [`fdd20fa0201f`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/fdd20fa0201f) - ED-21506: multiBodiedExtension- Fix issues with Renderer
+
 ## 108.20.8
 
 ### Patch Changes

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

@@ -0,0 +1,25 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _react = require("@emotion/react");
+var _colors = require("@atlaskit/theme/colors");
+var _react2 = _interopRequireDefault(require("react"));
+var _templateObject;
+/** @jsx jsx */
+var ExtensionFrame = function ExtensionFrame(props) {
+  var containerCSS = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    border: 1px solid ", ";\n    min-height: 100px;\n  "])), "var(--ds-border, ".concat(_colors.N30, ")"));
+  return (0, _react.jsx)("div", {
+    css: containerCSS,
+    className: "extension-frame",
+    "data-extension-frame": "true",
+    style: {
+      flexBasis: "100%"
+    }
+  }, props.children);
+};
+var _default = exports.default = ExtensionFrame;

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

@@ -49,6 +49,12 @@ Object.defineProperty(exports, "Extension", {
     return _extension.default;
   }
 });
+Object.defineProperty(exports, "ExtensionFrame", {
+  enumerable: true,
+  get: function get() {
+    return _extensionFrame.default;
+  }
+});
 Object.defineProperty(exports, "HardBreak", {
   enumerable: true,
   get: function get() {
@@ -87,6 +93,12 @@ Object.defineProperty(exports, "ListItem", {
   }
 });
 exports.Mention = exports.MediaSingle = exports.MediaInline = exports.MediaGroup = exports.Media = void 0;
+Object.defineProperty(exports, "MultiBodiedExtension", {
+  enumerable: true,
+  get: function get() {
+    return _multiBodiedExtension.default;
+  }
+});
 Object.defineProperty(exports, "OrderedList", {
   enumerable: true,
   get: function get() {
@@ -146,6 +158,8 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _reactLoadable = _interopRequireDefault(require("react-loadable"));
 var _blockquote = _interopRequireDefault(require("./blockquote"));
 var _bodiedExtension = _interopRequireDefault(require("./bodiedExtension"));
+var _multiBodiedExtension = _interopRequireDefault(require("./multiBodiedExtension"));
+var _extensionFrame = _interopRequireDefault(require("./extensionFrame"));
 var _bulletList = _interopRequireDefault(require("./bulletList"));
 var _doc = _interopRequireWildcard(require("./doc"));
 var _extension = _interopRequireDefault(require("./extension"));
@@ -428,6 +442,8 @@ var nodeToReact = exports.nodeToReact = {
   emoji: Emoji,
   extension: _extension.default,
   bodiedExtension: _bodiedExtension.default,
+  multiBodiedExtension: _multiBodiedExtension.default,
+  extensionFrame: _extensionFrame.default,
   hardBreak: _hardBreak.default,
   heading: _heading.default,
   inlineCard: InlineCard,

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

@@ -0,0 +1,108 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _react = require("@emotion/react");
+var _colors = require("@atlaskit/theme/colors");
+var _react2 = _interopRequireWildcard(require("react"));
+var _extension = require("./extension");
+var _ExtensionRenderer = _interopRequireDefault(require("../../ui/ExtensionRenderer"));
+var _templateObject, _templateObject2;
+/** @jsx jsx */
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var useMultiBodiedExtensionActions = function useMultiBodiedExtensionActions(_ref) {
+  var updateActiveChild = _ref.updateActiveChild,
+    children = _ref.children;
+  var actions = _react2.default.useMemo(function () {
+    return {
+      changeActive: function changeActive(index) {
+        return updateActiveChild(index);
+      },
+      addChild: function addChild() {
+        return false;
+      },
+      getChildrenCount: function getChildrenCount() {
+        return children ? children === null || children === void 0 ? void 0 : children.length : 0;
+      },
+      removeChild: function removeChild(index) {
+        return false;
+      },
+      updateParameters: function updateParameters(parameters) {
+        return false;
+      },
+      getChildren: function getChildren() {
+        return [];
+      }
+    };
+  }, [updateActiveChild, children]);
+  return actions;
+};
+var navigationCSS = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  // make sure the user can't see a range selection inside the navigation\n  // This is really important to keep the navigation working properly\n  user-select: none;\n  -webkit-user-modify: read-only;\n  border: 1px solid ", ";\n  background-color: ", ";\n\n  .mbe-add-tab-button,\n  .mbe-remove-tab {\n    display: none;\n  }\n"])), "var(--ds-border, ".concat(_colors.N40, ")"), "var(--ds-background-inverse-subtle, ".concat(_colors.N50, ")"));
+var MultiBodiedExtension = function MultiBodiedExtension(props) {
+  var children = props.children,
+    _props$layout = props.layout,
+    layout = _props$layout === void 0 ? 'default' : _props$layout,
+    _props$path = props.path,
+    path = _props$path === void 0 ? [] : _props$path;
+  var _useState = (0, _react2.useState)(0),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    activeChildIndex = _useState2[0],
+    setActiveChildIndex = _useState2[1];
+  var updateActiveChild = _react2.default.useCallback(function (index) {
+    if (typeof index !== 'number') {
+      // TODO: Make sure we log this somewhere if this happens
+      setActiveChildIndex(0);
+      return false;
+    }
+    setActiveChildIndex(index);
+    return true;
+  }, [setActiveChildIndex]);
+  var actions = useMultiBodiedExtensionActions({
+    updateActiveChild: updateActiveChild,
+    children: children
+  });
+  var containerCSS = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    border: 1px solid ", ";\n    min-height: 100px;\n\n    .multiBodiedExtension--frames > [data-extension-frame='true'] {\n      display: none;\n    }\n\n    .multiBodiedExtension--frames\n      > [data-extension-frame='true']:nth-of-type(", ") {\n      border: 1px solid ", ";\n      display: block;\n      min-height: 100px;\n    }\n  "])), "var(--ds-border, ".concat(_colors.N30, ")"), activeChildIndex + 1, "var(--ds-border, ".concat(_colors.N50, ")"));
+  return (0, _react.jsx)("section", {
+    className: "multiBodiedExtension--container",
+    css: containerCSS,
+    "data-testid": "multiBodiedExtension--container",
+    "data-active-child-index": activeChildIndex
+  }, (0, _react.jsx)("nav", {
+    className: "multiBodiedExtension-navigation",
+    css: navigationCSS,
+    "data-testid": "multiBodiedExtension-navigation"
+  }, (0, _react.jsx)(_ExtensionRenderer.default, (0, _extends2.default)({}, props, {
+    actions: actions,
+    type: "multiBodiedExtension"
+  }), function (_ref2) {
+    var result = _ref2.result;
+    try {
+      if (result && /*#__PURE__*/_react2.default.isValidElement(result)) {
+        // Return the content directly if it's a valid JSX.Element
+        return (0, _extension.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 (0, _extension.renderExtension)(children, layout, {
+      isTopLevel: path.length < 1
+    });
+  })), (0, _react.jsx)("article", {
+    className: "multiBodiedExtension--frames",
+    "data-testid": "multiBodiedExtension--frames"
+  }, children));
+};
+var _default = exports.default = MultiBodiedExtension;

package/dist/cjs/ui/ExtensionRenderer.js

@@ -41,7 +41,7 @@ var ExtensionRenderer = exports.default = /*#__PURE__*/function (_React$Componen
       });
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getNodeRenderer", (0, _memoizeOne.default)(_extensions.getNodeRenderer));
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderExtensionNode", function (extensionProvider, actions) {
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderExtensionNode", function (extensionProvider) {
       var _marks$find;
       var _this$props = _this.props,
         extensionHandlers = _this$props.extensionHandlers,
@@ -53,7 +53,8 @@ var ExtensionRenderer = exports.default = /*#__PURE__*/function (_React$Componen
         text = _this$props.text,
         type = _this$props.type,
         localId = _this$props.localId,
-        marks = _this$props.marks;
+        marks = _this$props.marks,
+        actions = _this$props.actions;
       var fragmentLocalId = marks === null || marks === void 0 || (_marks$find = marks.find(function (m) {
         return m.type.name === 'fragment';
       })) === null || _marks$find === void 0 || (_marks$find = _marks$find.attrs) === null || _marks$find === void 0 ? void 0 : _marks$find.localId;

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

@@ -53,7 +53,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 var NORMAL_SEVERITY_THRESHOLD = exports.NORMAL_SEVERITY_THRESHOLD = 2000;
 var DEGRADED_SEVERITY_THRESHOLD = exports.DEGRADED_SEVERITY_THRESHOLD = 3000;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "108.20.8";
+var packageVersion = "108.20.9";
 var Renderer = exports.Renderer = /*#__PURE__*/function (_PureComponent) {
   (0, _inherits2.default)(Renderer, _PureComponent);
   var _super = _createSuper(Renderer);

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

@@ -0,0 +1,20 @@
+/** @jsx jsx */
+
+import { jsx, css } from '@emotion/react';
+import { N30 } from '@atlaskit/theme/colors';
+import React from 'react';
+const ExtensionFrame = props => {
+  const containerCSS = css`
+    border: 1px solid ${`var(--ds-border, ${N30})`};
+    min-height: 100px;
+  `;
+  return jsx("div", {
+    css: containerCSS,
+    className: "extension-frame",
+    "data-extension-frame": "true",
+    style: {
+      flexBasis: `100%`
+    }
+  }, props.children);
+};
+export default ExtensionFrame;

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

@@ -1,6 +1,8 @@
 import Loadable from 'react-loadable';
 import Blockquote from './blockquote';
 import BodiedExtension from './bodiedExtension';
+import MultiBodiedExtension from './multiBodiedExtension';
+import ExtensionFrame from './extensionFrame';
 import BulletList from './bulletList';
 import Doc, { DocWithSelectAllTrap } from './doc';
 import Extension from './extension';
@@ -127,6 +129,8 @@ export const nodeToReact = {
   emoji: Emoji,
   extension: Extension,
   bodiedExtension: BodiedExtension,
+  multiBodiedExtension: MultiBodiedExtension,
+  extensionFrame: ExtensionFrame,
   hardBreak: HardBreak,
   heading: Heading,
   inlineCard: InlineCard,
@@ -294,4 +298,4 @@ const isEmojiBlock = pnode => {
   }
   return emojiCount > 0;
 };
-export { Blockquote, BodiedExtension, BulletList, BlockCard, Caption, CodeBlock, WindowedCodeBlock, Date, DecisionItem, DecisionList, Doc, DocWithSelectAllTrap, Emoji, Extension, Expand, HardBreak, Heading, ListItem, InlineCard, InlineExtension, LayoutSection, LayoutColumn, Media, MediaGroup, MediaInline, MediaSingle, Mention, OrderedList, Panel, Paragraph, Placeholder, Rule, Status, TaskItem, TaskList, Table, TableCell, TableRow, UnknownBlock, EmbedCard };
+export { Blockquote, BodiedExtension, BulletList, BlockCard, Caption, CodeBlock, WindowedCodeBlock, Date, DecisionItem, DecisionList, Doc, DocWithSelectAllTrap, Emoji, Extension, ExtensionFrame, Expand, HardBreak, Heading, ListItem, InlineCard, InlineExtension, LayoutSection, LayoutColumn, Media, MediaGroup, MediaInline, MediaSingle, Mention, MultiBodiedExtension, OrderedList, Panel, Paragraph, Placeholder, Rule, Status, TaskItem, TaskList, Table, TableCell, TableRow, UnknownBlock, EmbedCard };

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

@@ -0,0 +1,121 @@
+import _extends from "@babel/runtime/helpers/extends";
+/** @jsx jsx */
+
+import { jsx, css } from '@emotion/react';
+import { N30, N40, N50 } from '@atlaskit/theme/colors';
+import React, { useState } from 'react';
+import { renderExtension } from './extension';
+import ExtensionRenderer from '../../ui/ExtensionRenderer';
+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;
+      },
+      getChildren() {
+        return [];
+      }
+    };
+  }, [updateActiveChild, children]);
+  return actions;
+};
+const navigationCSS = css`
+  // make sure the user can't see a range selection inside the navigation
+  // This is really important to keep the navigation working properly
+  user-select: none;
+  -webkit-user-modify: read-only;
+  border: 1px solid ${`var(--ds-border, ${N40})`};
+  background-color: ${`var(--ds-background-inverse-subtle, ${N50})`};
+
+  .mbe-add-tab-button,
+  .mbe-remove-tab {
+    display: none;
+  }
+`;
+const MultiBodiedExtension = props => {
+  const {
+    children,
+    layout = 'default',
+    path = []
+  } = props;
+  const [activeChildIndex, setActiveChildIndex] = useState(0);
+  const updateActiveChild = React.useCallback(index => {
+    if (typeof index !== 'number') {
+      // TODO: Make sure we log this somewhere if this happens
+      setActiveChildIndex(0);
+      return false;
+    }
+    setActiveChildIndex(index);
+    return true;
+  }, [setActiveChildIndex]);
+  const actions = useMultiBodiedExtensionActions({
+    updateActiveChild,
+    children
+  });
+  const containerCSS = css`
+    border: 1px solid ${`var(--ds-border, ${N30})`};
+    min-height: 100px;
+
+    .multiBodiedExtension--frames > [data-extension-frame='true'] {
+      display: none;
+    }
+
+    .multiBodiedExtension--frames
+      > [data-extension-frame='true']:nth-of-type(${activeChildIndex + 1}) {
+      border: 1px solid ${`var(--ds-border, ${N50})`};
+      display: block;
+      min-height: 100px;
+    }
+  `;
+  return jsx("section", {
+    className: "multiBodiedExtension--container",
+    css: containerCSS,
+    "data-testid": "multiBodiedExtension--container",
+    "data-active-child-index": activeChildIndex
+  }, jsx("nav", {
+    className: "multiBodiedExtension-navigation",
+    css: navigationCSS,
+    "data-testid": "multiBodiedExtension-navigation"
+  }, jsx(ExtensionRenderer, _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", {
+    className: "multiBodiedExtension--frames",
+    "data-testid": "multiBodiedExtension--frames"
+  }, children));
+};
+export default MultiBodiedExtension;

package/dist/es2019/ui/ExtensionRenderer.js

@@ -21,7 +21,7 @@ export default class ExtensionRenderer extends React.Component {
       });
     });
     _defineProperty(this, "getNodeRenderer", memoizeOne(getNodeRenderer));
-    _defineProperty(this, "renderExtensionNode", (extensionProvider, actions) => {
+    _defineProperty(this, "renderExtensionNode", extensionProvider => {
       var _marks$find, _marks$find$attrs;
       const {
         extensionHandlers,
@@ -33,7 +33,8 @@ export default class ExtensionRenderer extends React.Component {
         text,
         type,
         localId,
-        marks
+        marks,
+        actions
       } = this.props;
       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 = {

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

@@ -35,7 +35,7 @@ import { RenderTracking } from '../../react/utils/performance/RenderTracking';
 export const NORMAL_SEVERITY_THRESHOLD = 2000;
 export const DEGRADED_SEVERITY_THRESHOLD = 3000;
 const packageName = "@atlaskit/renderer";
-const packageVersion = "108.20.8";
+const packageVersion = "108.20.9";
 export class Renderer extends PureComponent {
   constructor(props) {
     super(props);

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

@@ -0,0 +1,19 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _templateObject;
+/** @jsx jsx */
+
+import { jsx, css } from '@emotion/react';
+import { N30 } from '@atlaskit/theme/colors';
+import React from 'react';
+var ExtensionFrame = function ExtensionFrame(props) {
+  var containerCSS = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    border: 1px solid ", ";\n    min-height: 100px;\n  "])), "var(--ds-border, ".concat(N30, ")"));
+  return jsx("div", {
+    css: containerCSS,
+    className: "extension-frame",
+    "data-extension-frame": "true",
+    style: {
+      flexBasis: "100%"
+    }
+  }, props.children);
+};
+export default ExtensionFrame;

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

@@ -4,6 +4,8 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import Loadable from 'react-loadable';
 import Blockquote from './blockquote';
 import BodiedExtension from './bodiedExtension';
+import MultiBodiedExtension from './multiBodiedExtension';
+import ExtensionFrame from './extensionFrame';
 import BulletList from './bulletList';
 import Doc, { DocWithSelectAllTrap } from './doc';
 import Extension from './extension';
@@ -244,6 +246,8 @@ export var nodeToReact = {
   emoji: Emoji,
   extension: Extension,
   bodiedExtension: BodiedExtension,
+  multiBodiedExtension: MultiBodiedExtension,
+  extensionFrame: ExtensionFrame,
   hardBreak: HardBreak,
   heading: Heading,
   inlineCard: InlineCard,
@@ -412,4 +416,4 @@ var isEmojiBlock = function isEmojiBlock(pnode) {
   }
   return emojiCount > 0;
 };
-export { Blockquote, BodiedExtension, BulletList, BlockCard, Caption, CodeBlock, WindowedCodeBlock, Date, DecisionItem, DecisionList, Doc, DocWithSelectAllTrap, Emoji, Extension, Expand, HardBreak, Heading, ListItem, InlineCard, InlineExtension, LayoutSection, LayoutColumn, Media, MediaGroup, MediaInline, MediaSingle, Mention, OrderedList, Panel, Paragraph, Placeholder, Rule, Status, TaskItem, TaskList, Table, TableCell, TableRow, UnknownBlock, EmbedCard };
+export { Blockquote, BodiedExtension, BulletList, BlockCard, Caption, CodeBlock, WindowedCodeBlock, Date, DecisionItem, DecisionList, Doc, DocWithSelectAllTrap, Emoji, Extension, ExtensionFrame, Expand, HardBreak, Heading, ListItem, InlineCard, InlineExtension, LayoutSection, LayoutColumn, Media, MediaGroup, MediaInline, MediaSingle, Mention, MultiBodiedExtension, OrderedList, Panel, Paragraph, Placeholder, Rule, Status, TaskItem, TaskList, Table, TableCell, TableRow, UnknownBlock, EmbedCard };

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

@@ -0,0 +1,99 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _templateObject, _templateObject2;
+/** @jsx jsx */
+
+import { jsx, css } from '@emotion/react';
+import { N30, N40, N50 } from '@atlaskit/theme/colors';
+import React, { useState } from 'react';
+import { renderExtension } from './extension';
+import ExtensionRenderer from '../../ui/ExtensionRenderer';
+var useMultiBodiedExtensionActions = function useMultiBodiedExtensionActions(_ref) {
+  var updateActiveChild = _ref.updateActiveChild,
+    children = _ref.children;
+  var actions = React.useMemo(function () {
+    return {
+      changeActive: function changeActive(index) {
+        return updateActiveChild(index);
+      },
+      addChild: function addChild() {
+        return false;
+      },
+      getChildrenCount: function getChildrenCount() {
+        return children ? children === null || children === void 0 ? void 0 : children.length : 0;
+      },
+      removeChild: function removeChild(index) {
+        return false;
+      },
+      updateParameters: function updateParameters(parameters) {
+        return false;
+      },
+      getChildren: function getChildren() {
+        return [];
+      }
+    };
+  }, [updateActiveChild, children]);
+  return actions;
+};
+var navigationCSS = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  // make sure the user can't see a range selection inside the navigation\n  // This is really important to keep the navigation working properly\n  user-select: none;\n  -webkit-user-modify: read-only;\n  border: 1px solid ", ";\n  background-color: ", ";\n\n  .mbe-add-tab-button,\n  .mbe-remove-tab {\n    display: none;\n  }\n"])), "var(--ds-border, ".concat(N40, ")"), "var(--ds-background-inverse-subtle, ".concat(N50, ")"));
+var MultiBodiedExtension = function MultiBodiedExtension(props) {
+  var children = props.children,
+    _props$layout = props.layout,
+    layout = _props$layout === void 0 ? 'default' : _props$layout,
+    _props$path = props.path,
+    path = _props$path === void 0 ? [] : _props$path;
+  var _useState = useState(0),
+    _useState2 = _slicedToArray(_useState, 2),
+    activeChildIndex = _useState2[0],
+    setActiveChildIndex = _useState2[1];
+  var updateActiveChild = React.useCallback(function (index) {
+    if (typeof index !== 'number') {
+      // TODO: Make sure we log this somewhere if this happens
+      setActiveChildIndex(0);
+      return false;
+    }
+    setActiveChildIndex(index);
+    return true;
+  }, [setActiveChildIndex]);
+  var actions = useMultiBodiedExtensionActions({
+    updateActiveChild: updateActiveChild,
+    children: children
+  });
+  var containerCSS = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    border: 1px solid ", ";\n    min-height: 100px;\n\n    .multiBodiedExtension--frames > [data-extension-frame='true'] {\n      display: none;\n    }\n\n    .multiBodiedExtension--frames\n      > [data-extension-frame='true']:nth-of-type(", ") {\n      border: 1px solid ", ";\n      display: block;\n      min-height: 100px;\n    }\n  "])), "var(--ds-border, ".concat(N30, ")"), activeChildIndex + 1, "var(--ds-border, ".concat(N50, ")"));
+  return jsx("section", {
+    className: "multiBodiedExtension--container",
+    css: containerCSS,
+    "data-testid": "multiBodiedExtension--container",
+    "data-active-child-index": activeChildIndex
+  }, jsx("nav", {
+    className: "multiBodiedExtension-navigation",
+    css: navigationCSS,
+    "data-testid": "multiBodiedExtension-navigation"
+  }, jsx(ExtensionRenderer, _extends({}, props, {
+    actions: actions,
+    type: "multiBodiedExtension"
+  }), function (_ref2) {
+    var result = _ref2.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", {
+    className: "multiBodiedExtension--frames",
+    "data-testid": "multiBodiedExtension--frames"
+  }, children));
+};
+export default MultiBodiedExtension;

package/dist/esm/ui/ExtensionRenderer.js

@@ -34,7 +34,7 @@ var ExtensionRenderer = /*#__PURE__*/function (_React$Component) {
       });
     });
     _defineProperty(_assertThisInitialized(_this), "getNodeRenderer", memoizeOne(getNodeRenderer));
-    _defineProperty(_assertThisInitialized(_this), "renderExtensionNode", function (extensionProvider, actions) {
+    _defineProperty(_assertThisInitialized(_this), "renderExtensionNode", function (extensionProvider) {
       var _marks$find;
       var _this$props = _this.props,
         extensionHandlers = _this$props.extensionHandlers,
@@ -46,7 +46,8 @@ var ExtensionRenderer = /*#__PURE__*/function (_React$Component) {
         text = _this$props.text,
         type = _this$props.type,
         localId = _this$props.localId,
-        marks = _this$props.marks;
+        marks = _this$props.marks,
+        actions = _this$props.actions;
       var fragmentLocalId = marks === null || marks === void 0 || (_marks$find = marks.find(function (m) {
         return m.type.name === 'fragment';
       })) === null || _marks$find === void 0 || (_marks$find = _marks$find.attrs) === null || _marks$find === void 0 ? void 0 : _marks$find.localId;

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

@@ -45,7 +45,7 @@ import { RenderTracking } from '../../react/utils/performance/RenderTracking';
 export var NORMAL_SEVERITY_THRESHOLD = 2000;
 export var DEGRADED_SEVERITY_THRESHOLD = 3000;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "108.20.8";
+var packageVersion = "108.20.9";
 export var Renderer = /*#__PURE__*/function (_PureComponent) {
   _inherits(Renderer, _PureComponent);
   var _super = _createSuper(Renderer);

package/dist/types/react/nodes/extensionFrame.d.ts

@@ -0,0 +1,24 @@
+/** @jsx jsx */
+import React from 'react';
+import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+import type { RendererContext } from '../types';
+import type { Serializer } from '../..';
+import type { ExtensionLayout } from '@atlaskit/adf-schema';
+import type { ExtensionHandlers } from '@atlaskit/editor-common/extensions';
+import type { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
+export interface Props {
+    serializer: Serializer<any>;
+    extensionHandlers?: ExtensionHandlers;
+    rendererContext: RendererContext;
+    providers: ProviderFactory;
+    extensionType: string;
+    extensionKey: string;
+    path?: PMNode[];
+    originalContent?: any;
+    parameters?: any;
+    content?: any;
+    layout?: ExtensionLayout;
+    localId?: string;
+}
+declare const ExtensionFrame: React.FunctionComponent<Props>;
+export default ExtensionFrame;

package/dist/types/react/nodes/index.d.ts

@@ -1,14 +1,20 @@
-import React from 'react';
+import type React from 'react';
 import Loadable from 'react-loadable';
-import { Fragment, Node, Mark } from '@atlaskit/editor-prosemirror/model';
+import type { Fragment, Node, Mark } from '@atlaskit/editor-prosemirror/model';
 import Blockquote from './blockquote';
-import BodiedExtension, { Props as BodiedExtensionProps } from './bodiedExtension';
+import type { Props as BodiedExtensionProps } from './bodiedExtension';
+import BodiedExtension from './bodiedExtension';
+import type { Props as MultiBodiedExtensionProps } from './multiBodiedExtension';
+import MultiBodiedExtension from './multiBodiedExtension';
+import ExtensionFrame from './extensionFrame';
 import BulletList from './bulletList';
 import Doc, { DocWithSelectAllTrap } from './doc';
-import Extension, { Props as ExtensionProps } from './extension';
+import type { Props as ExtensionProps } from './extension';
+import Extension from './extension';
 import HardBreak from './hardBreak';
 import Heading from './heading';
-import InlineExtension, { Props as InlineExtensionProps } from './inlineExtension';
+import type { Props as InlineExtensionProps } from './inlineExtension';
+import InlineExtension from './inlineExtension';
 import LayoutSection from './layoutSection';
 import LayoutColumn from './layoutColumn';
 import ListItem from './listItem';
@@ -21,7 +27,7 @@ import Table from './table';
 import { TableCell } from './tableCell';
 import TableRow from './tableRow';
 import UnknownBlock from './unknownBlock';
-import { NodeComponentsProps } from '../../ui/Renderer/types';
+import type { NodeComponentsProps } from '../../ui/Renderer/types';
 declare const WindowedCodeBlock: React.ComponentType<import("./codeBlock/codeBlock").Props> & Loadable.LoadableComponent;
 declare const CodeBlock: React.ComponentType<import("react-intl-next").WithIntlProps<import("./codeBlock/codeBlock").Props & import("react-intl-next").WrappedComponentProps<"intl">>> & Loadable.LoadableComponent;
 declare const TaskList: React.ComponentType<import("./taskList").Props> & Loadable.LoadableComponent;
@@ -94,5 +100,5 @@ export declare function isTextNode(node: Node | Mark): node is Node;
  * whose content satisfies the condition for an emoji block
  */
 export declare const isEmojiDoc: (doc: Fragment) => boolean;
-export { Blockquote, BodiedExtension, BulletList, BlockCard, Caption, CodeBlock, WindowedCodeBlock, Date, DecisionItem, DecisionList, Doc, DocWithSelectAllTrap, Emoji, Extension, Expand, HardBreak, Heading, ListItem, InlineCard, InlineExtension, LayoutSection, LayoutColumn, Media, MediaGroup, MediaInline, MediaSingle, Mention, OrderedList, Panel, Paragraph, Placeholder, Rule, Status, TaskItem, TaskList, Table, TableCell, TableRow, UnknownBlock, EmbedCard, };
-export type { BodiedExtensionProps, ExtensionProps, InlineExtensionProps };
+export { Blockquote, BodiedExtension, BulletList, BlockCard, Caption, CodeBlock, WindowedCodeBlock, Date, DecisionItem, DecisionList, Doc, DocWithSelectAllTrap, Emoji, Extension, ExtensionFrame, Expand, HardBreak, Heading, ListItem, InlineCard, InlineExtension, LayoutSection, LayoutColumn, Media, MediaGroup, MediaInline, MediaSingle, Mention, MultiBodiedExtension, OrderedList, Panel, Paragraph, Placeholder, Rule, Status, TaskItem, TaskList, Table, TableCell, TableRow, UnknownBlock, EmbedCard, };
+export type { BodiedExtensionProps, ExtensionProps, InlineExtensionProps, MultiBodiedExtensionProps, };

package/dist/types/react/nodes/multiBodiedExtension.d.ts

@@ -0,0 +1,25 @@
+/** @jsx jsx */
+import React from 'react';
+import type { Mark as PMMark, Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+import type { RendererContext } from '../types';
+import type { Serializer } from '../..';
+import type { ExtensionLayout } from '@atlaskit/adf-schema';
+import type { ExtensionHandlers } from '@atlaskit/editor-common/extensions';
+import type { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
+export interface Props {
+    serializer: Serializer<any>;
+    extensionHandlers?: ExtensionHandlers;
+    rendererContext: RendererContext;
+    providers: ProviderFactory;
+    extensionType: string;
+    extensionKey: string;
+    path?: PMNode[];
+    originalContent?: any;
+    parameters?: any;
+    content?: any;
+    layout?: ExtensionLayout;
+    localId?: string;
+    marks?: PMMark[];
+}
+declare const MultiBodiedExtension: React.FunctionComponent<Props>;
+export default MultiBodiedExtension;

package/dist/types/ui/ExtensionRenderer.d.ts

@@ -12,6 +12,7 @@ export interface Props {
     rendererContext: RendererContext;
     extensionType: string;
     extensionKey: string;
+    actions?: MultiBodiedExtensionActions;
     text?: string;
     parameters?: any;
     content?: any;
@@ -34,7 +35,7 @@ export default class ExtensionRenderer extends React.Component<Props, State> {
     componentWillUnmount(): void;
     handleProvider: (name: keyof State, providerPromise?: Promise<any>) => void;
     getNodeRenderer: import("memoize-one").MemoizedFn<typeof getNodeRenderer>;
-    renderExtensionNode: (extensionProvider?: ExtensionProvider | null, actions?: MultiBodiedExtensionActions) => JSX.Element;
+    renderExtensionNode: (extensionProvider?: ExtensionProvider | null) => JSX.Element;
     setupAndRenderExtensionNode: (providers: {
         extensionProvider?: Promise<ExtensionProvider<any>> | undefined;
     }) => JSX.Element;

package/dist/types-ts4.5/react/nodes/extensionFrame.d.ts

@@ -0,0 +1,24 @@
+/** @jsx jsx */
+import React from 'react';
+import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+import type { RendererContext } from '../types';
+import type { Serializer } from '../..';
+import type { ExtensionLayout } from '@atlaskit/adf-schema';
+import type { ExtensionHandlers } from '@atlaskit/editor-common/extensions';
+import type { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
+export interface Props {
+    serializer: Serializer<any>;
+    extensionHandlers?: ExtensionHandlers;
+    rendererContext: RendererContext;
+    providers: ProviderFactory;
+    extensionType: string;
+    extensionKey: string;
+    path?: PMNode[];
+    originalContent?: any;
+    parameters?: any;
+    content?: any;
+    layout?: ExtensionLayout;
+    localId?: string;
+}
+declare const ExtensionFrame: React.FunctionComponent<Props>;
+export default ExtensionFrame;

package/dist/types-ts4.5/react/nodes/index.d.ts

@@ -1,14 +1,20 @@
-import React from 'react';
+import type React from 'react';
 import Loadable from 'react-loadable';
-import { Fragment, Node, Mark } from '@atlaskit/editor-prosemirror/model';
+import type { Fragment, Node, Mark } from '@atlaskit/editor-prosemirror/model';
 import Blockquote from './blockquote';
-import BodiedExtension, { Props as BodiedExtensionProps } from './bodiedExtension';
+import type { Props as BodiedExtensionProps } from './bodiedExtension';
+import BodiedExtension from './bodiedExtension';
+import type { Props as MultiBodiedExtensionProps } from './multiBodiedExtension';
+import MultiBodiedExtension from './multiBodiedExtension';
+import ExtensionFrame from './extensionFrame';
 import BulletList from './bulletList';
 import Doc, { DocWithSelectAllTrap } from './doc';
-import Extension, { Props as ExtensionProps } from './extension';
+import type { Props as ExtensionProps } from './extension';
+import Extension from './extension';
 import HardBreak from './hardBreak';
 import Heading from './heading';
-import InlineExtension, { Props as InlineExtensionProps } from './inlineExtension';
+import type { Props as InlineExtensionProps } from './inlineExtension';
+import InlineExtension from './inlineExtension';
 import LayoutSection from './layoutSection';
 import LayoutColumn from './layoutColumn';
 import ListItem from './listItem';
@@ -21,7 +27,7 @@ import Table from './table';
 import { TableCell } from './tableCell';
 import TableRow from './tableRow';
 import UnknownBlock from './unknownBlock';
-import { NodeComponentsProps } from '../../ui/Renderer/types';
+import type { NodeComponentsProps } from '../../ui/Renderer/types';
 declare const WindowedCodeBlock: React.ComponentType<import("./codeBlock/codeBlock").Props> & Loadable.LoadableComponent;
 declare const CodeBlock: React.ComponentType<import("react-intl-next").WithIntlProps<import("./codeBlock/codeBlock").Props & import("react-intl-next").WrappedComponentProps<"intl">>> & Loadable.LoadableComponent;
 declare const TaskList: React.ComponentType<import("./taskList").Props> & Loadable.LoadableComponent;
@@ -94,5 +100,5 @@ export declare function isTextNode(node: Node | Mark): node is Node;
  * whose content satisfies the condition for an emoji block
  */
 export declare const isEmojiDoc: (doc: Fragment) => boolean;
-export { Blockquote, BodiedExtension, BulletList, BlockCard, Caption, CodeBlock, WindowedCodeBlock, Date, DecisionItem, DecisionList, Doc, DocWithSelectAllTrap, Emoji, Extension, Expand, HardBreak, Heading, ListItem, InlineCard, InlineExtension, LayoutSection, LayoutColumn, Media, MediaGroup, MediaInline, MediaSingle, Mention, OrderedList, Panel, Paragraph, Placeholder, Rule, Status, TaskItem, TaskList, Table, TableCell, TableRow, UnknownBlock, EmbedCard, };
-export type { BodiedExtensionProps, ExtensionProps, InlineExtensionProps };
+export { Blockquote, BodiedExtension, BulletList, BlockCard, Caption, CodeBlock, WindowedCodeBlock, Date, DecisionItem, DecisionList, Doc, DocWithSelectAllTrap, Emoji, Extension, ExtensionFrame, Expand, HardBreak, Heading, ListItem, InlineCard, InlineExtension, LayoutSection, LayoutColumn, Media, MediaGroup, MediaInline, MediaSingle, Mention, MultiBodiedExtension, OrderedList, Panel, Paragraph, Placeholder, Rule, Status, TaskItem, TaskList, Table, TableCell, TableRow, UnknownBlock, EmbedCard, };
+export type { BodiedExtensionProps, ExtensionProps, InlineExtensionProps, MultiBodiedExtensionProps, };

package/dist/types-ts4.5/react/nodes/multiBodiedExtension.d.ts

@@ -0,0 +1,25 @@
+/** @jsx jsx */
+import React from 'react';
+import type { Mark as PMMark, Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+import type { RendererContext } from '../types';
+import type { Serializer } from '../..';
+import type { ExtensionLayout } from '@atlaskit/adf-schema';
+import type { ExtensionHandlers } from '@atlaskit/editor-common/extensions';
+import type { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
+export interface Props {
+    serializer: Serializer<any>;
+    extensionHandlers?: ExtensionHandlers;
+    rendererContext: RendererContext;
+    providers: ProviderFactory;
+    extensionType: string;
+    extensionKey: string;
+    path?: PMNode[];
+    originalContent?: any;
+    parameters?: any;
+    content?: any;
+    layout?: ExtensionLayout;
+    localId?: string;
+    marks?: PMMark[];
+}
+declare const MultiBodiedExtension: React.FunctionComponent<Props>;
+export default MultiBodiedExtension;

package/dist/types-ts4.5/ui/ExtensionRenderer.d.ts

@@ -12,6 +12,7 @@ export interface Props {
     rendererContext: RendererContext;
     extensionType: string;
     extensionKey: string;
+    actions?: MultiBodiedExtensionActions;
     text?: string;
     parameters?: any;
     content?: any;
@@ -34,7 +35,7 @@ export default class ExtensionRenderer extends React.Component<Props, State> {
     componentWillUnmount(): void;
     handleProvider: (name: keyof State, providerPromise?: Promise<any>) => void;
     getNodeRenderer: import("memoize-one").MemoizedFn<typeof getNodeRenderer>;
-    renderExtensionNode: (extensionProvider?: ExtensionProvider | null, actions?: MultiBodiedExtensionActions) => JSX.Element;
+    renderExtensionNode: (extensionProvider?: ExtensionProvider | null) => JSX.Element;
     setupAndRenderExtensionNode: (providers: {
         extensionProvider?: Promise<ExtensionProvider<any>> | undefined;
     }) => JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/renderer",
-  "version": "108.20.8",
+  "version": "108.20.9",
   "description": "Renderer component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -41,7 +41,7 @@
     "@atlaskit/icon": "^22.0.0",
     "@atlaskit/link-datasource": "^1.19.0",
     "@atlaskit/media-card": "^77.6.0",
-    "@atlaskit/media-client": "^26.0.0",
+    "@atlaskit/media-client": "^26.1.0",
     "@atlaskit/media-client-react": "^2.0.0",
     "@atlaskit/media-common": "^11.0.0",
     "@atlaskit/media-filmstrip": "^47.0.0",
@@ -52,7 +52,7 @@
     "@atlaskit/status": "^1.4.0",
     "@atlaskit/task-decision": "^17.9.0",
     "@atlaskit/theme": "^12.6.0",
-    "@atlaskit/tokens": "^1.29.0",
+    "@atlaskit/tokens": "^1.30.0",
     "@atlaskit/tooltip": "^18.0.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",