@atlaskit/editor-common 102.3.3 → 102.4.0

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @atlaskit/editor-common
 
+## 102.4.0
+
+### Minor Changes
+
+- [#122049](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/122049)
+  [`feaccb6b73652`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/feaccb6b73652) -
+  extend functionality of multiBodiedExtensions to allow requests for bodied overrides
+
+### Patch Changes
+
+- Updated dependencies
+
+## 102.3.4
+
+### Patch Changes
+
+- [#123536](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/123536)
+  [`32675a58bf978`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/32675a58bf978) -
+  [ux] Removed padding from the dropdown button in the toolbar
+- Updated dependencies
+
 ## 102.3.3
 
 ### Patch Changes

package/dist/cjs/analytics/types/enums.js

@@ -159,7 +159,8 @@ var ACTION = exports.ACTION = /*#__PURE__*/function (ACTION) {
   ACTION["CHANGE_ACTIVE"] = "changeActive";
   ACTION["REMOVE_CHILD"] = "removeChild";
   ACTION["UPDATE_PARAMETERS"] = "updateParameters";
-  ACTION["GET_CHILDERN"] = "getChildern";
+  ACTION["GET_CHILDREN"] = "getChildren";
+  ACTION["GET_CHILDREN_CONTAINER"] = "getChildrenContainer";
   ACTION["MOVED"] = "moved";
   ACTION["UPLOAD_COMMENCED"] = "uploadCommenced";
   ACTION["UPLOAD_SUCCEEDED"] = "uploadSucceeded";

package/dist/cjs/extensibility/ExtensionComponent.js

@@ -20,6 +20,7 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 var _react = _interopRequireWildcard(require("react"));
 var _memoizeOne = _interopRequireDefault(require("memoize-one"));
 var _state = require("@atlaskit/editor-prosemirror/state");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _extensions = require("../extensions");
 var _utils = require("../utils");
 var _Extension = _interopRequireDefault(require("./Extension/Extension"));
@@ -221,7 +222,7 @@ var ExtensionComponentInner = /*#__PURE__*/function (_Component) {
   }, {
     key: "render",
     value: function render() {
-      var _this$state$_privateP;
+      var _this$state$_privateP2;
       var _this$props2 = this.props,
         node = _this$props2.node,
         handleContentDOMRef = _this$props2.handleContentDOMRef,
@@ -244,6 +245,8 @@ var ExtensionComponentInner = /*#__PURE__*/function (_Component) {
       var resolvedPosition = position && editorView.state.doc.resolve(position);
       var isNodeNested = !!(resolvedPosition && resolvedPosition.depth > 0);
       if (node.type.name === 'multiBodiedExtension') {
+        var _this$state$_privateP;
+        var allowBodiedOverride = ((_this$state$_privateP = this.state._privateProps) === null || _this$state$_privateP === void 0 ? void 0 : _this$state$_privateP.__allowBodiedOverride) && (0, _platformFeatureFlags.fg)('platform_editor_multi_body_extension_extensibility');
         return /*#__PURE__*/_react.default.createElement(_MultiBodiedExtension.default, {
           node: node,
           editorView: editorView,
@@ -258,7 +261,8 @@ var ExtensionComponentInner = /*#__PURE__*/function (_Component) {
           isNodeNested: isNodeNested,
           isNodeHovered: this.state.isNodeHovered,
           setIsNodeHovered: this.setIsNodeHovered,
-          isLivePageViewMode: isLivePageViewMode
+          isLivePageViewMode: isLivePageViewMode,
+          allowBodiedOverride: allowBodiedOverride
         });
       }
       var extensionHandlerResult = this.tryExtensionHandler(undefined);
@@ -273,7 +277,7 @@ var ExtensionComponentInner = /*#__PURE__*/function (_Component) {
             handleContentDOMRef: handleContentDOMRef,
             view: editorView,
             editorAppearance: editorAppearance,
-            hideFrame: (_this$state$_privateP = this.state._privateProps) === null || _this$state$_privateP === void 0 ? void 0 : _this$state$_privateP.__hideFrame,
+            hideFrame: (_this$state$_privateP2 = this.state._privateProps) === null || _this$state$_privateP2 === void 0 ? void 0 : _this$state$_privateP2.__hideFrame,
             pluginInjectionApi: pluginInjectionApi,
             macroInteractionDesignFeatureFlags: macroInteractionDesignFeatureFlags,
             isNodeSelected: selectedNode === node,

package/dist/cjs/extensibility/MultiBodiedExtension/action-api.js

@@ -17,7 +17,9 @@ var useMultiBodiedExtensionActions = exports.useMultiBodiedExtensionActions = fu
     editorView = _ref.editorView,
     getPos = _ref.getPos,
     node = _ref.node,
-    eventDispatcher = _ref.eventDispatcher;
+    eventDispatcher = _ref.eventDispatcher,
+    allowBodiedOverride = _ref.allowBodiedOverride,
+    childrenContainer = _ref.childrenContainer;
   var actions = _react.default.useMemo(function () {
     return {
       changeActive: function changeActive(index) {
@@ -139,11 +141,20 @@ var useMultiBodiedExtensionActions = exports.useMultiBodiedExtensionActions = fu
         }
         var children = (_state$doc$nodeAt = state.doc.nodeAt(pos)) === null || _state$doc$nodeAt === void 0 ? void 0 : _state$doc$nodeAt.content;
         if (eventDispatcher) {
-          (0, _utils.sendMBEAnalyticsEvent)(_analytics.ACTION.GET_CHILDERN, node, eventDispatcher);
+          (0, _utils.sendMBEAnalyticsEvent)(_analytics.ACTION.GET_CHILDREN, node, eventDispatcher);
         }
         return children ? children.toJSON() : [];
+      },
+      getChildrenContainer: function getChildrenContainer() {
+        if (!allowBodiedOverride) {
+          throw new Error('Could not provide children container');
+        }
+        if (eventDispatcher) {
+          (0, _utils.sendMBEAnalyticsEvent)(_analytics.ACTION.GET_CHILDREN_CONTAINER, node, eventDispatcher);
+        }
+        return childrenContainer;
       }
     };
-  }, [node, editorView, getPos, updateActiveChild, eventDispatcher]);
+  }, [node, editorView, getPos, updateActiveChild, eventDispatcher, allowBodiedOverride, childrenContainer]);
   return actions;
 };

package/dist/cjs/extensibility/MultiBodiedExtension/index.js

@@ -46,6 +46,16 @@ var imageStyles = (0, _react2.css)({
   maxHeight: '24px',
   maxWidth: '24px'
 });
+var MultiBodiedExtensionFrames = function MultiBodiedExtensionFrames(_ref) {
+  var articleRef = _ref.articleRef;
+  return (0, _react2.jsx)("article", {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    className: "multiBodiedExtension--frames",
+    "data-testid": "multiBodiedExtension--frames",
+    ref: articleRef
+  });
+};
+
 // Similar to the one in platform/packages/editor/editor-common/src/extensibility/Extension/Lozenge.tsx
 var getWrapperTitleContent = function getWrapperTitleContent(imageData, title, showMacroInteractionDesignUpdates) {
   if (showMacroInteractionDesignUpdates) {
@@ -76,24 +86,26 @@ var getWrapperTitleContent = function getWrapperTitleContent(imageData, title, s
     label: title
   }), title);
 };
-var MultiBodiedExtensionWithWidth = function MultiBodiedExtensionWithWidth(_ref) {
-  var node = _ref.node,
-    handleContentDOMRef = _ref.handleContentDOMRef,
-    getPos = _ref.getPos,
-    tryExtensionHandler = _ref.tryExtensionHandler,
-    editorView = _ref.editorView,
-    eventDispatcher = _ref.eventDispatcher,
-    widthState = _ref.widthState,
-    editorAppearance = _ref.editorAppearance,
-    macroInteractionDesignFeatureFlags = _ref.macroInteractionDesignFeatureFlags,
-    isNodeSelected = _ref.isNodeSelected,
-    isNodeHovered = _ref.isNodeHovered,
-    isNodeNested = _ref.isNodeNested,
-    setIsNodeHovered = _ref.setIsNodeHovered,
-    pluginInjectionApi = _ref.pluginInjectionApi,
-    isLivePageViewMode = _ref.isLivePageViewMode;
-  var _ref2 = macroInteractionDesignFeatureFlags || {},
-    showMacroInteractionDesignUpdates = _ref2.showMacroInteractionDesignUpdates;
+var MultiBodiedExtensionWithWidth = function MultiBodiedExtensionWithWidth(_ref2) {
+  var node = _ref2.node,
+    handleContentDOMRef = _ref2.handleContentDOMRef,
+    getPos = _ref2.getPos,
+    tryExtensionHandler = _ref2.tryExtensionHandler,
+    editorView = _ref2.editorView,
+    eventDispatcher = _ref2.eventDispatcher,
+    widthState = _ref2.widthState,
+    editorAppearance = _ref2.editorAppearance,
+    macroInteractionDesignFeatureFlags = _ref2.macroInteractionDesignFeatureFlags,
+    isNodeSelected = _ref2.isNodeSelected,
+    isNodeHovered = _ref2.isNodeHovered,
+    isNodeNested = _ref2.isNodeNested,
+    setIsNodeHovered = _ref2.setIsNodeHovered,
+    pluginInjectionApi = _ref2.pluginInjectionApi,
+    isLivePageViewMode = _ref2.isLivePageViewMode,
+    _ref2$allowBodiedOver = _ref2.allowBodiedOverride,
+    allowBodiedOverride = _ref2$allowBodiedOver === void 0 ? false : _ref2$allowBodiedOver;
+  var _ref3 = macroInteractionDesignFeatureFlags || {},
+    showMacroInteractionDesignUpdates = _ref3.showMacroInteractionDesignUpdates;
   var _node$attrs = node.attrs,
     parameters = _node$attrs.parameters,
     extensionKey = _node$attrs.extensionKey;
@@ -115,19 +127,26 @@ var MultiBodiedExtensionWithWidth = function MultiBodiedExtensionWithWidth(_ref)
     setActiveChildIndex(index);
     return true;
   }, [setActiveChildIndex]);
+  var articleRef = _react.default.useCallback(function (node) {
+    return handleContentDOMRef(node);
+  }, [handleContentDOMRef]);
+  var childrenContainer = _react.default.useMemo(function () {
+    return (0, _react2.jsx)(MultiBodiedExtensionFrames, {
+      articleRef: articleRef
+    });
+  }, [articleRef]);
   var actions = (0, _actionApi.useMultiBodiedExtensionActions)({
     updateActiveChild: updateActiveChild,
     editorView: editorView,
     getPos: getPos,
+    node: node,
     eventDispatcher: eventDispatcher,
-    node: node
+    allowBodiedOverride: allowBodiedOverride,
+    childrenContainer: childrenContainer
   });
   var extensionHandlerResult = _react.default.useMemo(function () {
     return tryExtensionHandler(actions);
   }, [tryExtensionHandler, actions]);
-  var articleRef = _react.default.useCallback(function (node) {
-    return handleContentDOMRef(node);
-  }, [handleContentDOMRef]);
   var shouldBreakout =
   // Extension should breakout when the layout is set to 'full-width' or 'wide'.
   ['full-width', 'wide'].includes(node.attrs.layout) &&
@@ -153,6 +172,7 @@ var MultiBodiedExtensionWithWidth = function MultiBodiedExtensionWithWidth(_ref)
   var containerClassNames = (0, _classnames.default)('multiBodiedExtension--container', {
     'remove-padding': showMacroInteractionDesignUpdates
   });
+  var bodyContainerClassNames = (0, _classnames.default)('multiBodiedExtension--body-container');
   var navigationClassNames = (0, _classnames.default)('multiBodiedExtension--navigation', {
     'remove-margins': showMacroInteractionDesignUpdates,
     'remove-border': showMacroInteractionDesignUpdates
@@ -206,19 +226,18 @@ var MultiBodiedExtensionWithWidth = function MultiBodiedExtensionWithWidth(_ref)
     css: getContainerCssExtendedStyles(activeChildIndex, showMacroInteractionDesignUpdates),
     "data-testid": "multiBodiedExtension--container",
     "data-active-child-index": activeChildIndex
-  }, (0, _react2.jsx)("nav", {
+  }, allowBodiedOverride ? (0, _react2.jsx)("div", {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    className: bodyContainerClassNames,
+    "data-testid": "multiBodiedExtension--body-container"
+  }, extensionHandlerResult) : (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)("nav", {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     className: navigationClassNames
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     ,
     css: _MultiBodiedExtension.sharedMultiBodiedExtensionStyles.mbeNavigation,
     "data-testid": "multiBodiedExtension-navigation"
-  }, extensionHandlerResult), (0, _react2.jsx)("article", {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-    className: "multiBodiedExtension--frames",
-    "data-testid": "multiBodiedExtension--frames",
-    ref: articleRef
-  }))));
+  }, extensionHandlerResult), childrenContainer))));
 };
 var MultiBodiedExtension = function MultiBodiedExtension(props) {
   var pluginInjectionApi = props.pluginInjectionApi;

package/dist/cjs/messages/index.js

@@ -251,16 +251,31 @@ var _default = exports.default = (0, _reactIntlNext.defineMessages)({
     defaultMessage: 'Back to center',
     description: 'Display your element (image, table, extension, etc) as standard width'
   },
+  layoutStateFixedWidth: {
+    id: 'fabric.editor.layoutStateFixedWidth',
+    defaultMessage: 'Centered',
+    description: 'Displaying your element (image, table, extension, etc) as standard width'
+  },
   layoutWide: {
     id: 'fabric.editor.layoutWide',
     defaultMessage: 'Go wide',
     description: 'Display your element (image, table, extension, etc) wider than normal'
   },
+  layoutStateWide: {
+    id: 'fabric.editor.layoutStateWide',
+    defaultMessage: 'Wide',
+    description: 'Displaying your element (image, table, extension, etc) wider than normal'
+  },
   layoutFullWidth: {
     id: 'fabric.editor.layoutFullWidth',
     defaultMessage: 'Go full width',
     description: 'Display your element (image, table, extension, etc) as full width'
   },
+  layoutStateFullWidth: {
+    id: 'fabric.editor.layoutStateFullWidth',
+    defaultMessage: 'Full width',
+    description: 'Displaying your element (image, table, extension, etc) as full width'
+  },
   alignImageRight: {
     id: 'fabric.editor.alignImageRight',
     defaultMessage: 'Align right',

package/dist/cjs/monitoring/error.js

@@ -17,7 +17,7 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 var SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 var packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-var packageVersion = "102.3.3";
+var packageVersion = "102.4.0";
 var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
   // Remove URL as it has UGC
   // Ignored via go/ees007

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

@@ -23,7 +23,7 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
  * @jsx jsx
  */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 var packageName = "@atlaskit/editor-common";
-var packageVersion = "102.3.3";
+var packageVersion = "102.4.0";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 // Ignored via go/ees005

package/dist/cjs/ui/FloatingToolbar/Button.js

@@ -22,8 +22,9 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var minWidthStyle = {
-  minWidth: "var(--ds-space-400, 32px)"
+var customSizeAndPadding = {
+  minWidth: "var(--ds-space-400, 32px)",
+  padding: "0px ".concat("var(--ds-space-050, 4px)")
 };
 var _default = exports.default = function _default(_ref) {
   var title = _ref.title,
@@ -110,7 +111,7 @@ var _default = exports.default = function _default(_ref) {
           appearance: appearance,
           state: themeProps.state,
           mode: themeProps.mode
-        })), (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? minWidthStyle : {})
+        })), (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? customSizeAndPadding : {})
       }, rest);
     },
     "aria-label": ariaLabel || title,

package/dist/es2019/analytics/types/enums.js

@@ -153,7 +153,8 @@ export let ACTION = /*#__PURE__*/function (ACTION) {
   ACTION["CHANGE_ACTIVE"] = "changeActive";
   ACTION["REMOVE_CHILD"] = "removeChild";
   ACTION["UPDATE_PARAMETERS"] = "updateParameters";
-  ACTION["GET_CHILDERN"] = "getChildern";
+  ACTION["GET_CHILDREN"] = "getChildren";
+  ACTION["GET_CHILDREN_CONTAINER"] = "getChildrenContainer";
   ACTION["MOVED"] = "moved";
   ACTION["UPLOAD_COMMENCED"] = "uploadCommenced";
   ACTION["UPLOAD_SUCCEEDED"] = "uploadSucceeded";

package/dist/es2019/extensibility/ExtensionComponent.js

@@ -4,6 +4,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import React, { Component, useEffect, useLayoutEffect, useRef, useState } from 'react';
 import memoizeOne from 'memoize-one';
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { getExtensionModuleNodePrivateProps, getNodeRenderer } from '../extensions';
 import { getExtensionRenderer, nodeToJSON, toJSON } from '../utils';
 import Extension from './Extension/Extension';
@@ -171,7 +172,7 @@ class ExtensionComponentInner extends Component {
     this.parsePrivateNodePropsIfNeeded();
   }
   render() {
-    var _this$state$_privateP;
+    var _this$state$_privateP2;
     const {
       node,
       handleContentDOMRef,
@@ -197,6 +198,8 @@ class ExtensionComponentInner extends Component {
     const resolvedPosition = position && editorView.state.doc.resolve(position);
     const isNodeNested = !!(resolvedPosition && resolvedPosition.depth > 0);
     if (node.type.name === 'multiBodiedExtension') {
+      var _this$state$_privateP;
+      const allowBodiedOverride = ((_this$state$_privateP = this.state._privateProps) === null || _this$state$_privateP === void 0 ? void 0 : _this$state$_privateP.__allowBodiedOverride) && fg('platform_editor_multi_body_extension_extensibility');
       return /*#__PURE__*/React.createElement(MultiBodiedExtension, {
         node: node,
         editorView: editorView,
@@ -211,7 +214,8 @@ class ExtensionComponentInner extends Component {
         isNodeNested: isNodeNested,
         isNodeHovered: this.state.isNodeHovered,
         setIsNodeHovered: this.setIsNodeHovered,
-        isLivePageViewMode: isLivePageViewMode
+        isLivePageViewMode: isLivePageViewMode,
+        allowBodiedOverride: allowBodiedOverride
       });
     }
     const extensionHandlerResult = this.tryExtensionHandler(undefined);
@@ -226,7 +230,7 @@ class ExtensionComponentInner extends Component {
           handleContentDOMRef: handleContentDOMRef,
           view: editorView,
           editorAppearance: editorAppearance,
-          hideFrame: (_this$state$_privateP = this.state._privateProps) === null || _this$state$_privateP === void 0 ? void 0 : _this$state$_privateP.__hideFrame,
+          hideFrame: (_this$state$_privateP2 = this.state._privateProps) === null || _this$state$_privateP2 === void 0 ? void 0 : _this$state$_privateP2.__hideFrame,
           pluginInjectionApi: pluginInjectionApi,
           macroInteractionDesignFeatureFlags: macroInteractionDesignFeatureFlags,
           isNodeSelected: selectedNode === node,

package/dist/es2019/extensibility/MultiBodiedExtension/action-api.js

@@ -7,7 +7,9 @@ export const useMultiBodiedExtensionActions = ({
   editorView,
   getPos,
   node,
-  eventDispatcher
+  eventDispatcher,
+  allowBodiedOverride,
+  childrenContainer
 }) => {
   const actions = React.useMemo(() => {
     return {
@@ -142,11 +144,20 @@ export const useMultiBodiedExtensionActions = ({
         }
         const children = (_state$doc$nodeAt = state.doc.nodeAt(pos)) === null || _state$doc$nodeAt === void 0 ? void 0 : _state$doc$nodeAt.content;
         if (eventDispatcher) {
-          sendMBEAnalyticsEvent(ACTION.GET_CHILDERN, node, eventDispatcher);
+          sendMBEAnalyticsEvent(ACTION.GET_CHILDREN, node, eventDispatcher);
         }
         return children ? children.toJSON() : [];
+      },
+      getChildrenContainer() {
+        if (!allowBodiedOverride) {
+          throw new Error('Could not provide children container');
+        }
+        if (eventDispatcher) {
+          sendMBEAnalyticsEvent(ACTION.GET_CHILDREN_CONTAINER, node, eventDispatcher);
+        }
+        return childrenContainer;
       }
     };
-  }, [node, editorView, getPos, updateActiveChild, eventDispatcher]);
+  }, [node, editorView, getPos, updateActiveChild, eventDispatcher, allowBodiedOverride, childrenContainer]);
   return actions;
 };

package/dist/es2019/extensibility/MultiBodiedExtension/index.js

@@ -33,6 +33,17 @@ const imageStyles = css({
   maxHeight: '24px',
   maxWidth: '24px'
 });
+const MultiBodiedExtensionFrames = ({
+  articleRef
+}) => {
+  return jsx("article", {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    className: "multiBodiedExtension--frames",
+    "data-testid": "multiBodiedExtension--frames",
+    ref: articleRef
+  });
+};
+
 // Similar to the one in platform/packages/editor/editor-common/src/extensibility/Extension/Lozenge.tsx
 const getWrapperTitleContent = (imageData, title, showMacroInteractionDesignUpdates) => {
   if (showMacroInteractionDesignUpdates) {
@@ -80,7 +91,8 @@ const MultiBodiedExtensionWithWidth = ({
   isNodeNested,
   setIsNodeHovered,
   pluginInjectionApi,
-  isLivePageViewMode
+  isLivePageViewMode,
+  allowBodiedOverride = false
 }) => {
   const {
     showMacroInteractionDesignUpdates
@@ -104,19 +116,26 @@ const MultiBodiedExtensionWithWidth = ({
     setActiveChildIndex(index);
     return true;
   }, [setActiveChildIndex]);
+  const articleRef = React.useCallback(node => {
+    return handleContentDOMRef(node);
+  }, [handleContentDOMRef]);
+  const childrenContainer = React.useMemo(() => {
+    return jsx(MultiBodiedExtensionFrames, {
+      articleRef: articleRef
+    });
+  }, [articleRef]);
   const actions = useMultiBodiedExtensionActions({
     updateActiveChild,
     editorView,
     getPos,
+    node,
     eventDispatcher,
-    node
+    allowBodiedOverride,
+    childrenContainer
   });
   const extensionHandlerResult = React.useMemo(() => {
     return tryExtensionHandler(actions);
   }, [tryExtensionHandler, actions]);
-  const articleRef = React.useCallback(node => {
-    return handleContentDOMRef(node);
-  }, [handleContentDOMRef]);
   const shouldBreakout =
   // Extension should breakout when the layout is set to 'full-width' or 'wide'.
   ['full-width', 'wide'].includes(node.attrs.layout) &&
@@ -143,6 +162,7 @@ const MultiBodiedExtensionWithWidth = ({
   const containerClassNames = classnames('multiBodiedExtension--container', {
     'remove-padding': showMacroInteractionDesignUpdates
   });
+  const bodyContainerClassNames = classnames('multiBodiedExtension--body-container');
   const navigationClassNames = classnames('multiBodiedExtension--navigation', {
     'remove-margins': showMacroInteractionDesignUpdates,
     'remove-border': showMacroInteractionDesignUpdates
@@ -192,19 +212,18 @@ const MultiBodiedExtensionWithWidth = ({
     css: getContainerCssExtendedStyles(activeChildIndex, showMacroInteractionDesignUpdates),
     "data-testid": "multiBodiedExtension--container",
     "data-active-child-index": activeChildIndex
-  }, jsx("nav", {
+  }, allowBodiedOverride ? jsx("div", {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    className: bodyContainerClassNames,
+    "data-testid": "multiBodiedExtension--body-container"
+  }, extensionHandlerResult) : jsx(Fragment, null, jsx("nav", {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     className: navigationClassNames
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     ,
     css: sharedMultiBodiedExtensionStyles.mbeNavigation,
     "data-testid": "multiBodiedExtension-navigation"
-  }, extensionHandlerResult), jsx("article", {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-    className: "multiBodiedExtension--frames",
-    "data-testid": "multiBodiedExtension--frames",
-    ref: articleRef
-  }))));
+  }, extensionHandlerResult), childrenContainer))));
 };
 const MultiBodiedExtension = props => {
   const {

package/dist/es2019/messages/index.js

@@ -42,16 +42,31 @@ export default defineMessages({
     defaultMessage: 'Back to center',
     description: 'Display your element (image, table, extension, etc) as standard width'
   },
+  layoutStateFixedWidth: {
+    id: 'fabric.editor.layoutStateFixedWidth',
+    defaultMessage: 'Centered',
+    description: 'Displaying your element (image, table, extension, etc) as standard width'
+  },
   layoutWide: {
     id: 'fabric.editor.layoutWide',
     defaultMessage: 'Go wide',
     description: 'Display your element (image, table, extension, etc) wider than normal'
   },
+  layoutStateWide: {
+    id: 'fabric.editor.layoutStateWide',
+    defaultMessage: 'Wide',
+    description: 'Displaying your element (image, table, extension, etc) wider than normal'
+  },
   layoutFullWidth: {
     id: 'fabric.editor.layoutFullWidth',
     defaultMessage: 'Go full width',
     description: 'Display your element (image, table, extension, etc) as full width'
   },
+  layoutStateFullWidth: {
+    id: 'fabric.editor.layoutStateFullWidth',
+    defaultMessage: 'Full width',
+    description: 'Displaying your element (image, table, extension, etc) as full width'
+  },
   alignImageRight: {
     id: 'fabric.editor.alignImageRight',
     defaultMessage: 'Align right',

package/dist/es2019/monitoring/error.js

@@ -1,7 +1,7 @@
 import { isFedRamp } from './environment';
 const SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 const packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-const packageVersion = "102.3.3";
+const packageVersion = "102.4.0";
 const sanitiseSentryEvents = (data, _hint) => {
   // Remove URL as it has UGC
   // Ignored via go/ees007

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

@@ -13,7 +13,7 @@ import withAnalyticsContext from '@atlaskit/analytics-next/withAnalyticsContext'
 import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
 import Layer from '../Layer';
 const packageName = "@atlaskit/editor-common";
-const packageVersion = "102.3.3";
+const packageVersion = "102.4.0";
 const halfFocusRing = 1;
 const dropOffset = '0, 8';
 // Ignored via go/ees005

package/dist/es2019/ui/FloatingToolbar/Button.js

@@ -6,8 +6,9 @@ import Tooltip from '@atlaskit/tooltip';
 import { Pulse } from '../Pulse/Pulse';
 import { ButtonSpotlightCard } from './ButtonSpotlightCard';
 import { getButtonStyles, iconOnlySpacing } from './styles';
-const minWidthStyle = {
-  minWidth: "var(--ds-space-400, 32px)"
+const customSizeAndPadding = {
+  minWidth: "var(--ds-space-400, 32px)",
+  padding: `0px ${"var(--ds-space-050, 4px)"}`
 };
 export default (({
   title,
@@ -91,7 +92,7 @@ export default (({
             state: themeProps.state,
             mode: themeProps.mode
           })),
-          ...(editorExperiment('platform_editor_controls', 'variant1') ? minWidthStyle : {})
+          ...(editorExperiment('platform_editor_controls', 'variant1') ? customSizeAndPadding : {})
         },
         ...rest
       };

package/dist/esm/analytics/types/enums.js

@@ -153,7 +153,8 @@ export var ACTION = /*#__PURE__*/function (ACTION) {
   ACTION["CHANGE_ACTIVE"] = "changeActive";
   ACTION["REMOVE_CHILD"] = "removeChild";
   ACTION["UPDATE_PARAMETERS"] = "updateParameters";
-  ACTION["GET_CHILDERN"] = "getChildern";
+  ACTION["GET_CHILDREN"] = "getChildren";
+  ACTION["GET_CHILDREN_CONTAINER"] = "getChildrenContainer";
   ACTION["MOVED"] = "moved";
   ACTION["UPLOAD_COMMENCED"] = "uploadCommenced";
   ACTION["UPLOAD_SUCCEEDED"] = "uploadSucceeded";

package/dist/esm/extensibility/ExtensionComponent.js

@@ -16,6 +16,7 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
 import React, { Component, useEffect, useLayoutEffect, useRef, useState } from 'react';
 import memoizeOne from 'memoize-one';
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { getExtensionModuleNodePrivateProps, getNodeRenderer } from '../extensions';
 import { getExtensionRenderer, nodeToJSON, toJSON } from '../utils';
 import Extension from './Extension/Extension';
@@ -212,7 +213,7 @@ var ExtensionComponentInner = /*#__PURE__*/function (_Component) {
   }, {
     key: "render",
     value: function render() {
-      var _this$state$_privateP;
+      var _this$state$_privateP2;
       var _this$props2 = this.props,
         node = _this$props2.node,
         handleContentDOMRef = _this$props2.handleContentDOMRef,
@@ -235,6 +236,8 @@ var ExtensionComponentInner = /*#__PURE__*/function (_Component) {
       var resolvedPosition = position && editorView.state.doc.resolve(position);
       var isNodeNested = !!(resolvedPosition && resolvedPosition.depth > 0);
       if (node.type.name === 'multiBodiedExtension') {
+        var _this$state$_privateP;
+        var allowBodiedOverride = ((_this$state$_privateP = this.state._privateProps) === null || _this$state$_privateP === void 0 ? void 0 : _this$state$_privateP.__allowBodiedOverride) && fg('platform_editor_multi_body_extension_extensibility');
         return /*#__PURE__*/React.createElement(MultiBodiedExtension, {
           node: node,
           editorView: editorView,
@@ -249,7 +252,8 @@ var ExtensionComponentInner = /*#__PURE__*/function (_Component) {
           isNodeNested: isNodeNested,
           isNodeHovered: this.state.isNodeHovered,
           setIsNodeHovered: this.setIsNodeHovered,
-          isLivePageViewMode: isLivePageViewMode
+          isLivePageViewMode: isLivePageViewMode,
+          allowBodiedOverride: allowBodiedOverride
         });
       }
       var extensionHandlerResult = this.tryExtensionHandler(undefined);
@@ -264,7 +268,7 @@ var ExtensionComponentInner = /*#__PURE__*/function (_Component) {
             handleContentDOMRef: handleContentDOMRef,
             view: editorView,
             editorAppearance: editorAppearance,
-            hideFrame: (_this$state$_privateP = this.state._privateProps) === null || _this$state$_privateP === void 0 ? void 0 : _this$state$_privateP.__hideFrame,
+            hideFrame: (_this$state$_privateP2 = this.state._privateProps) === null || _this$state$_privateP2 === void 0 ? void 0 : _this$state$_privateP2.__hideFrame,
             pluginInjectionApi: pluginInjectionApi,
             macroInteractionDesignFeatureFlags: macroInteractionDesignFeatureFlags,
             isNodeSelected: selectedNode === node,

package/dist/esm/extensibility/MultiBodiedExtension/action-api.js

@@ -10,7 +10,9 @@ export var useMultiBodiedExtensionActions = function useMultiBodiedExtensionActi
     editorView = _ref.editorView,
     getPos = _ref.getPos,
     node = _ref.node,
-    eventDispatcher = _ref.eventDispatcher;
+    eventDispatcher = _ref.eventDispatcher,
+    allowBodiedOverride = _ref.allowBodiedOverride,
+    childrenContainer = _ref.childrenContainer;
   var actions = React.useMemo(function () {
     return {
       changeActive: function changeActive(index) {
@@ -132,11 +134,20 @@ export var useMultiBodiedExtensionActions = function useMultiBodiedExtensionActi
         }
         var children = (_state$doc$nodeAt = state.doc.nodeAt(pos)) === null || _state$doc$nodeAt === void 0 ? void 0 : _state$doc$nodeAt.content;
         if (eventDispatcher) {
-          sendMBEAnalyticsEvent(ACTION.GET_CHILDERN, node, eventDispatcher);
+          sendMBEAnalyticsEvent(ACTION.GET_CHILDREN, node, eventDispatcher);
         }
         return children ? children.toJSON() : [];
+      },
+      getChildrenContainer: function getChildrenContainer() {
+        if (!allowBodiedOverride) {
+          throw new Error('Could not provide children container');
+        }
+        if (eventDispatcher) {
+          sendMBEAnalyticsEvent(ACTION.GET_CHILDREN_CONTAINER, node, eventDispatcher);
+        }
+        return childrenContainer;
       }
     };
-  }, [node, editorView, getPos, updateActiveChild, eventDispatcher]);
+  }, [node, editorView, getPos, updateActiveChild, eventDispatcher, allowBodiedOverride, childrenContainer]);
   return actions;
 };

package/dist/esm/extensibility/MultiBodiedExtension/index.js

@@ -38,6 +38,16 @@ var imageStyles = css({
   maxHeight: '24px',
   maxWidth: '24px'
 });
+var MultiBodiedExtensionFrames = function MultiBodiedExtensionFrames(_ref) {
+  var articleRef = _ref.articleRef;
+  return jsx("article", {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    className: "multiBodiedExtension--frames",
+    "data-testid": "multiBodiedExtension--frames",
+    ref: articleRef
+  });
+};
+
 // Similar to the one in platform/packages/editor/editor-common/src/extensibility/Extension/Lozenge.tsx
 var getWrapperTitleContent = function getWrapperTitleContent(imageData, title, showMacroInteractionDesignUpdates) {
   if (showMacroInteractionDesignUpdates) {
@@ -68,24 +78,26 @@ var getWrapperTitleContent = function getWrapperTitleContent(imageData, title, s
     label: title
   }), title);
 };
-var MultiBodiedExtensionWithWidth = function MultiBodiedExtensionWithWidth(_ref) {
-  var node = _ref.node,
-    handleContentDOMRef = _ref.handleContentDOMRef,
-    getPos = _ref.getPos,
-    tryExtensionHandler = _ref.tryExtensionHandler,
-    editorView = _ref.editorView,
-    eventDispatcher = _ref.eventDispatcher,
-    widthState = _ref.widthState,
-    editorAppearance = _ref.editorAppearance,
-    macroInteractionDesignFeatureFlags = _ref.macroInteractionDesignFeatureFlags,
-    isNodeSelected = _ref.isNodeSelected,
-    isNodeHovered = _ref.isNodeHovered,
-    isNodeNested = _ref.isNodeNested,
-    setIsNodeHovered = _ref.setIsNodeHovered,
-    pluginInjectionApi = _ref.pluginInjectionApi,
-    isLivePageViewMode = _ref.isLivePageViewMode;
-  var _ref2 = macroInteractionDesignFeatureFlags || {},
-    showMacroInteractionDesignUpdates = _ref2.showMacroInteractionDesignUpdates;
+var MultiBodiedExtensionWithWidth = function MultiBodiedExtensionWithWidth(_ref2) {
+  var node = _ref2.node,
+    handleContentDOMRef = _ref2.handleContentDOMRef,
+    getPos = _ref2.getPos,
+    tryExtensionHandler = _ref2.tryExtensionHandler,
+    editorView = _ref2.editorView,
+    eventDispatcher = _ref2.eventDispatcher,
+    widthState = _ref2.widthState,
+    editorAppearance = _ref2.editorAppearance,
+    macroInteractionDesignFeatureFlags = _ref2.macroInteractionDesignFeatureFlags,
+    isNodeSelected = _ref2.isNodeSelected,
+    isNodeHovered = _ref2.isNodeHovered,
+    isNodeNested = _ref2.isNodeNested,
+    setIsNodeHovered = _ref2.setIsNodeHovered,
+    pluginInjectionApi = _ref2.pluginInjectionApi,
+    isLivePageViewMode = _ref2.isLivePageViewMode,
+    _ref2$allowBodiedOver = _ref2.allowBodiedOverride,
+    allowBodiedOverride = _ref2$allowBodiedOver === void 0 ? false : _ref2$allowBodiedOver;
+  var _ref3 = macroInteractionDesignFeatureFlags || {},
+    showMacroInteractionDesignUpdates = _ref3.showMacroInteractionDesignUpdates;
   var _node$attrs = node.attrs,
     parameters = _node$attrs.parameters,
     extensionKey = _node$attrs.extensionKey;
@@ -107,19 +119,26 @@ var MultiBodiedExtensionWithWidth = function MultiBodiedExtensionWithWidth(_ref)
     setActiveChildIndex(index);
     return true;
   }, [setActiveChildIndex]);
+  var articleRef = React.useCallback(function (node) {
+    return handleContentDOMRef(node);
+  }, [handleContentDOMRef]);
+  var childrenContainer = React.useMemo(function () {
+    return jsx(MultiBodiedExtensionFrames, {
+      articleRef: articleRef
+    });
+  }, [articleRef]);
   var actions = useMultiBodiedExtensionActions({
     updateActiveChild: updateActiveChild,
     editorView: editorView,
     getPos: getPos,
+    node: node,
     eventDispatcher: eventDispatcher,
-    node: node
+    allowBodiedOverride: allowBodiedOverride,
+    childrenContainer: childrenContainer
   });
   var extensionHandlerResult = React.useMemo(function () {
     return tryExtensionHandler(actions);
   }, [tryExtensionHandler, actions]);
-  var articleRef = React.useCallback(function (node) {
-    return handleContentDOMRef(node);
-  }, [handleContentDOMRef]);
   var shouldBreakout =
   // Extension should breakout when the layout is set to 'full-width' or 'wide'.
   ['full-width', 'wide'].includes(node.attrs.layout) &&
@@ -145,6 +164,7 @@ var MultiBodiedExtensionWithWidth = function MultiBodiedExtensionWithWidth(_ref)
   var containerClassNames = classnames('multiBodiedExtension--container', {
     'remove-padding': showMacroInteractionDesignUpdates
   });
+  var bodyContainerClassNames = classnames('multiBodiedExtension--body-container');
   var navigationClassNames = classnames('multiBodiedExtension--navigation', {
     'remove-margins': showMacroInteractionDesignUpdates,
     'remove-border': showMacroInteractionDesignUpdates
@@ -198,19 +218,18 @@ var MultiBodiedExtensionWithWidth = function MultiBodiedExtensionWithWidth(_ref)
     css: getContainerCssExtendedStyles(activeChildIndex, showMacroInteractionDesignUpdates),
     "data-testid": "multiBodiedExtension--container",
     "data-active-child-index": activeChildIndex
-  }, jsx("nav", {
+  }, allowBodiedOverride ? jsx("div", {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    className: bodyContainerClassNames,
+    "data-testid": "multiBodiedExtension--body-container"
+  }, extensionHandlerResult) : jsx(Fragment, null, jsx("nav", {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     className: navigationClassNames
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     ,
     css: sharedMultiBodiedExtensionStyles.mbeNavigation,
     "data-testid": "multiBodiedExtension-navigation"
-  }, extensionHandlerResult), jsx("article", {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-    className: "multiBodiedExtension--frames",
-    "data-testid": "multiBodiedExtension--frames",
-    ref: articleRef
-  }))));
+  }, extensionHandlerResult), childrenContainer))));
 };
 var MultiBodiedExtension = function MultiBodiedExtension(props) {
   var pluginInjectionApi = props.pluginInjectionApi;

package/dist/esm/messages/index.js

@@ -42,16 +42,31 @@ export default defineMessages({
     defaultMessage: 'Back to center',
     description: 'Display your element (image, table, extension, etc) as standard width'
   },
+  layoutStateFixedWidth: {
+    id: 'fabric.editor.layoutStateFixedWidth',
+    defaultMessage: 'Centered',
+    description: 'Displaying your element (image, table, extension, etc) as standard width'
+  },
   layoutWide: {
     id: 'fabric.editor.layoutWide',
     defaultMessage: 'Go wide',
     description: 'Display your element (image, table, extension, etc) wider than normal'
   },
+  layoutStateWide: {
+    id: 'fabric.editor.layoutStateWide',
+    defaultMessage: 'Wide',
+    description: 'Displaying your element (image, table, extension, etc) wider than normal'
+  },
   layoutFullWidth: {
     id: 'fabric.editor.layoutFullWidth',
     defaultMessage: 'Go full width',
     description: 'Display your element (image, table, extension, etc) as full width'
   },
+  layoutStateFullWidth: {
+    id: 'fabric.editor.layoutStateFullWidth',
+    defaultMessage: 'Full width',
+    description: 'Displaying your element (image, table, extension, etc) as full width'
+  },
   alignImageRight: {
     id: 'fabric.editor.alignImageRight',
     defaultMessage: 'Align right',

package/dist/esm/monitoring/error.js

@@ -7,7 +7,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import { isFedRamp } from './environment';
 var SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 var packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-var packageVersion = "102.3.3";
+var packageVersion = "102.4.0";
 var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
   // Remove URL as it has UGC
   // Ignored via go/ees007

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

@@ -20,7 +20,7 @@ import withAnalyticsContext from '@atlaskit/analytics-next/withAnalyticsContext'
 import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
 import Layer from '../Layer';
 var packageName = "@atlaskit/editor-common";
-var packageVersion = "102.3.3";
+var packageVersion = "102.4.0";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 // Ignored via go/ees005

package/dist/esm/ui/FloatingToolbar/Button.js

@@ -12,8 +12,9 @@ import Tooltip from '@atlaskit/tooltip';
 import { Pulse } from '../Pulse/Pulse';
 import { ButtonSpotlightCard } from './ButtonSpotlightCard';
 import { getButtonStyles, iconOnlySpacing } from './styles';
-var minWidthStyle = {
-  minWidth: "var(--ds-space-400, 32px)"
+var customSizeAndPadding = {
+  minWidth: "var(--ds-space-400, 32px)",
+  padding: "0px ".concat("var(--ds-space-050, 4px)")
 };
 export default (function (_ref) {
   var title = _ref.title,
@@ -100,7 +101,7 @@ export default (function (_ref) {
           appearance: appearance,
           state: themeProps.state,
           mode: themeProps.mode
-        })), editorExperiment('platform_editor_controls', 'variant1') ? minWidthStyle : {})
+        })), editorExperiment('platform_editor_controls', 'variant1') ? customSizeAndPadding : {})
       }, rest);
     },
     "aria-label": ariaLabel || title,

package/dist/types/analytics/types/enums.d.ts

@@ -166,7 +166,8 @@ export declare enum ACTION {
     CHANGE_ACTIVE = "changeActive",
     REMOVE_CHILD = "removeChild",
     UPDATE_PARAMETERS = "updateParameters",
-    GET_CHILDERN = "getChildern",
+    GET_CHILDREN = "getChildren",
+    GET_CHILDREN_CONTAINER = "getChildrenContainer",
     MOVED = "moved",
     UPLOAD_COMMENCED = "uploadCommenced",
     UPLOAD_SUCCEEDED = "uploadSucceeded",

package/dist/types/analytics/types/events.d.ts

@@ -65,7 +65,7 @@ type CustomPanelEventPayload = TrackAEP<ACTION.CHANGED_BACKGROUND_COLOR | ACTION
 } | {
     icon: string;
 }, undefined>;
-type MBEEventPayload = TrackAEP<ACTION.ADD_CHILD | ACTION.CHANGE_ACTIVE | ACTION.DELETED | ACTION.REMOVE_CHILD | ACTION.UPDATE_PARAMETERS | ACTION.GET_CHILDERN, ACTION_SUBJECT.MULTI_BODIED_EXTENSION, undefined, {
+type MBEEventPayload = TrackAEP<ACTION.ADD_CHILD | ACTION.CHANGE_ACTIVE | ACTION.DELETED | ACTION.REMOVE_CHILD | ACTION.UPDATE_PARAMETERS | ACTION.GET_CHILDREN | ACTION.GET_CHILDREN_CONTAINER, ACTION_SUBJECT.MULTI_BODIED_EXTENSION, undefined, {
     extensionType: string;
     extensionKey: string;
     localId: string;

package/dist/types/extensibility/ExtensionComponent.d.ts

@@ -29,6 +29,7 @@ export interface State {
     extensionHandlersFromProvider?: ExtensionHandlers;
     _privateProps?: {
         __hideFrame?: boolean;
+        __allowBodiedOverride?: boolean;
     };
     activeChildIndex?: number;
     isNodeHovered?: boolean;

package/dist/types/extensibility/MultiBodiedExtension/action-api.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { EventDispatcher } from '../../event-dispatcher';
@@ -8,6 +9,8 @@ type ActionsProps = {
     editorView: EditorView;
     getPos: () => number | undefined;
     eventDispatcher?: EventDispatcher;
+    allowBodiedOverride: boolean;
+    childrenContainer: React.ReactNode;
 };
-export declare const useMultiBodiedExtensionActions: ({ updateActiveChild, editorView, getPos, node, eventDispatcher, }: ActionsProps) => MultiBodiedExtensionActions;
+export declare const useMultiBodiedExtensionActions: ({ updateActiveChild, editorView, getPos, node, eventDispatcher, allowBodiedOverride, childrenContainer, }: ActionsProps) => MultiBodiedExtensionActions;
 export {};

package/dist/types/extensibility/MultiBodiedExtension/index.d.ts

@@ -27,6 +27,7 @@ type Props = {
     isNodeNested?: boolean;
     setIsNodeHovered?: (isHovered: boolean) => void;
     isLivePageViewMode?: boolean;
+    allowBodiedOverride?: boolean;
 };
 declare const MultiBodiedExtension: (props: Props & OverflowShadowProps) => jsx.JSX.Element;
 export default MultiBodiedExtension;

package/dist/types/extensibility/MultiBodiedExtension/utils.d.ts

@@ -1,6 +1,6 @@
 import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
 import type { ACTION } from '../../analytics';
 import type { EventDispatcher } from '../../event-dispatcher';
-type AnalyticsActionTypes = ACTION.ADD_CHILD | ACTION.CHANGE_ACTIVE | ACTION.DELETED | ACTION.REMOVE_CHILD | ACTION.UPDATE_PARAMETERS | ACTION.GET_CHILDERN;
+type AnalyticsActionTypes = ACTION.ADD_CHILD | ACTION.CHANGE_ACTIVE | ACTION.DELETED | ACTION.REMOVE_CHILD | ACTION.UPDATE_PARAMETERS | ACTION.GET_CHILDREN | ACTION.GET_CHILDREN_CONTAINER;
 export declare const sendMBEAnalyticsEvent: (action: AnalyticsActionTypes, node: PmNode, eventDispatcher: EventDispatcher) => void;
 export {};

package/dist/types/extensions/types/extension-handler.d.ts

@@ -48,6 +48,7 @@ export type MultiBodiedExtensionActions = {
     removeChild: (index: number) => boolean;
     updateParameters: (parameters: Parameters) => boolean;
     getChildren(): Array<ADFEntity>;
+    getChildrenContainer(): React.ReactNode;
 };
 export type ParametersGetter<T extends Parameters = Parameters> = TransformBefore<T>;
 export type AsyncParametersGetter<T extends Parameters = Parameters> = TransformAfter<T>;

package/dist/types/messages/index.d.ts

@@ -38,16 +38,31 @@ declare const _default: {
         defaultMessage: string;
         description: string;
     };
+    layoutStateFixedWidth: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
     layoutWide: {
         id: string;
         defaultMessage: string;
         description: string;
     };
+    layoutStateWide: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
     layoutFullWidth: {
         id: string;
         defaultMessage: string;
         description: string;
     };
+    layoutStateFullWidth: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
     alignImageRight: {
         id: string;
         defaultMessage: string;

package/dist/types-ts4.5/analytics/types/enums.d.ts

@@ -166,7 +166,8 @@ export declare enum ACTION {
     CHANGE_ACTIVE = "changeActive",
     REMOVE_CHILD = "removeChild",
     UPDATE_PARAMETERS = "updateParameters",
-    GET_CHILDERN = "getChildern",
+    GET_CHILDREN = "getChildren",
+    GET_CHILDREN_CONTAINER = "getChildrenContainer",
     MOVED = "moved",
     UPLOAD_COMMENCED = "uploadCommenced",
     UPLOAD_SUCCEEDED = "uploadSucceeded",

package/dist/types-ts4.5/analytics/types/events.d.ts

@@ -65,7 +65,7 @@ type CustomPanelEventPayload = TrackAEP<ACTION.CHANGED_BACKGROUND_COLOR | ACTION
 } | {
     icon: string;
 }, undefined>;
-type MBEEventPayload = TrackAEP<ACTION.ADD_CHILD | ACTION.CHANGE_ACTIVE | ACTION.DELETED | ACTION.REMOVE_CHILD | ACTION.UPDATE_PARAMETERS | ACTION.GET_CHILDERN, ACTION_SUBJECT.MULTI_BODIED_EXTENSION, undefined, {
+type MBEEventPayload = TrackAEP<ACTION.ADD_CHILD | ACTION.CHANGE_ACTIVE | ACTION.DELETED | ACTION.REMOVE_CHILD | ACTION.UPDATE_PARAMETERS | ACTION.GET_CHILDREN | ACTION.GET_CHILDREN_CONTAINER, ACTION_SUBJECT.MULTI_BODIED_EXTENSION, undefined, {
     extensionType: string;
     extensionKey: string;
     localId: string;

package/dist/types-ts4.5/extensibility/ExtensionComponent.d.ts

@@ -29,6 +29,7 @@ export interface State {
     extensionHandlersFromProvider?: ExtensionHandlers;
     _privateProps?: {
         __hideFrame?: boolean;
+        __allowBodiedOverride?: boolean;
     };
     activeChildIndex?: number;
     isNodeHovered?: boolean;

package/dist/types-ts4.5/extensibility/MultiBodiedExtension/action-api.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { EventDispatcher } from '../../event-dispatcher';
@@ -8,6 +9,8 @@ type ActionsProps = {
     editorView: EditorView;
     getPos: () => number | undefined;
     eventDispatcher?: EventDispatcher;
+    allowBodiedOverride: boolean;
+    childrenContainer: React.ReactNode;
 };
-export declare const useMultiBodiedExtensionActions: ({ updateActiveChild, editorView, getPos, node, eventDispatcher, }: ActionsProps) => MultiBodiedExtensionActions;
+export declare const useMultiBodiedExtensionActions: ({ updateActiveChild, editorView, getPos, node, eventDispatcher, allowBodiedOverride, childrenContainer, }: ActionsProps) => MultiBodiedExtensionActions;
 export {};

package/dist/types-ts4.5/extensibility/MultiBodiedExtension/index.d.ts

@@ -27,6 +27,7 @@ type Props = {
     isNodeNested?: boolean;
     setIsNodeHovered?: (isHovered: boolean) => void;
     isLivePageViewMode?: boolean;
+    allowBodiedOverride?: boolean;
 };
 declare const MultiBodiedExtension: (props: Props & OverflowShadowProps) => jsx.JSX.Element;
 export default MultiBodiedExtension;

package/dist/types-ts4.5/extensibility/MultiBodiedExtension/utils.d.ts

@@ -1,6 +1,6 @@
 import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
 import type { ACTION } from '../../analytics';
 import type { EventDispatcher } from '../../event-dispatcher';
-type AnalyticsActionTypes = ACTION.ADD_CHILD | ACTION.CHANGE_ACTIVE | ACTION.DELETED | ACTION.REMOVE_CHILD | ACTION.UPDATE_PARAMETERS | ACTION.GET_CHILDERN;
+type AnalyticsActionTypes = ACTION.ADD_CHILD | ACTION.CHANGE_ACTIVE | ACTION.DELETED | ACTION.REMOVE_CHILD | ACTION.UPDATE_PARAMETERS | ACTION.GET_CHILDREN | ACTION.GET_CHILDREN_CONTAINER;
 export declare const sendMBEAnalyticsEvent: (action: AnalyticsActionTypes, node: PmNode, eventDispatcher: EventDispatcher) => void;
 export {};

package/dist/types-ts4.5/extensions/types/extension-handler.d.ts

@@ -48,6 +48,7 @@ export type MultiBodiedExtensionActions = {
     removeChild: (index: number) => boolean;
     updateParameters: (parameters: Parameters) => boolean;
     getChildren(): Array<ADFEntity>;
+    getChildrenContainer(): React.ReactNode;
 };
 export type ParametersGetter<T extends Parameters = Parameters> = TransformBefore<T>;
 export type AsyncParametersGetter<T extends Parameters = Parameters> = TransformAfter<T>;

package/dist/types-ts4.5/messages/index.d.ts

@@ -38,16 +38,31 @@ declare const _default: {
         defaultMessage: string;
         description: string;
     };
+    layoutStateFixedWidth: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
     layoutWide: {
         id: string;
         defaultMessage: string;
         description: string;
     };
+    layoutStateWide: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
     layoutFullWidth: {
         id: string;
         defaultMessage: string;
         description: string;
     };
+    layoutStateFullWidth: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
     alignImageRight: {
         id: string;
         defaultMessage: string;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-common",
-	"version": "102.3.3",
+	"version": "102.4.0",
 	"description": "A package that contains common classes and components for editor and renderer",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -135,7 +135,7 @@
 		"@atlaskit/editor-shared-styles": "^3.4.0",
 		"@atlaskit/editor-tables": "^2.9.0",
 		"@atlaskit/emoji": "^68.0.0",
-		"@atlaskit/icon": "^24.1.0",
+		"@atlaskit/icon": "^25.0.0",
 		"@atlaskit/icon-object": "^7.0.0",
 		"@atlaskit/link-datasource": "^3.22.0",
 		"@atlaskit/link-picker": "^3.0.0",
@@ -160,7 +160,7 @@
 		"@atlaskit/spinner": "^18.0.0",
 		"@atlaskit/task-decision": "^19.0.0",
 		"@atlaskit/textfield": "^8.0.0",
-		"@atlaskit/tmp-editor-statsig": "^3.5.0",
+		"@atlaskit/tmp-editor-statsig": "^3.6.0",
 		"@atlaskit/tokens": "^4.4.0",
 		"@atlaskit/tooltip": "^20.0.0",
 		"@atlaskit/width-detector": "^5.0.0",
@@ -316,6 +316,9 @@
 		"platform_renderer_table_sort_btn_aria_hidden": {
 			"type": "boolean"
 		},
+		"platform_editor_multi_body_extension_extensibility": {
+			"type": "boolean"
+		},
 		"platform_editor_nested_tables_resizing": {
 			"type": "boolean"
 		},