@atlaskit/editor-plugin-extension 5.0.3 → 5.0.5

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/editor-plugin-extension
 
+## 5.0.5
+
+### Patch Changes
+
+- Updated dependencies
+
+## 5.0.4
+
+### Patch Changes
+
+- [#123536](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/123536)
+  [`1e9dc41a004aa`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/1e9dc41a004aa) -
+  [ux] Moved width options to dropdown for extensions toolbar
+- Updated dependencies
+
 ## 5.0.3
 
 ### Patch Changes

package/dist/cjs/pm-plugins/toolbar.js

@@ -66,7 +66,7 @@ var isLayoutSupported = function isLayoutSupported(state, selectedExtNode) {
   // and not inside a layoutSection
   return !!((isMultiBodiedExtension || isNonEmbeddedBodiedExtension || isNonEmbeddedExtension) && !(0, _utils2.hasParentNodeOfType)([layoutSection])(selection));
 };
-var breakoutOptions = function breakoutOptions(state, formatMessage, extensionState, breakoutEnabled, editorAnalyticsAPI) {
+var breakoutButtonListOptions = function breakoutButtonListOptions(state, formatMessage, extensionState, breakoutEnabled, editorAnalyticsAPI) {
   var nodeWithPos = (0, _utils3.getSelectedExtension)(state, true);
 
   // we should only return breakout options when breakouts are enabled and the node supports them
@@ -100,11 +100,85 @@ var breakoutOptions = function breakoutOptions(state, formatMessage, extensionSt
   }
   return [];
 };
+var breakoutDropdownOptions = function breakoutDropdownOptions(state, formatMessage, breakoutEnabled, editorAnalyticsAPI) {
+  var nodeWithPos = (0, _utils3.getSelectedExtension)(state, true);
+
+  // we should only return breakout options when breakouts are enabled and the node supports them
+  if (!nodeWithPos || !breakoutEnabled || !isLayoutSupported(state, nodeWithPos) || isNestedNBM(state, nodeWithPos)) {
+    return [];
+  }
+  var layout = nodeWithPos.node.attrs.layout;
+  var title = '';
+  var IconComponent;
+  switch (layout) {
+    case 'wide':
+      title = formatMessage(_messages.default.layoutStateWide);
+      IconComponent = _contentWidthWide.default;
+      break;
+    case 'full-width':
+      title = formatMessage(_messages.default.layoutStateFullWidth);
+      IconComponent = _expandHorizontal.default;
+      break;
+    case 'default':
+    default:
+      title = formatMessage(_messages.default.layoutStateFixedWidth);
+      IconComponent = _contentWidthNarrow.default;
+      break;
+  }
+  var options = [{
+    id: 'editor.extensions.width.default',
+    title: formatMessage(_messages.default.layoutFixedWidth),
+    onClick: (0, _commands.updateExtensionLayout)('default', editorAnalyticsAPI),
+    selected: layout === 'default',
+    icon: /*#__PURE__*/_react.default.createElement(_contentWidthNarrow.default, {
+      color: "currentColor",
+      spacing: "spacious",
+      label: formatMessage(_messages.default.layoutFixedWidth)
+    })
+  }, {
+    id: 'editor.extensions.width.wide',
+    title: formatMessage(_messages.default.layoutWide),
+    onClick: (0, _commands.updateExtensionLayout)('wide', editorAnalyticsAPI),
+    selected: layout === 'wide',
+    icon: /*#__PURE__*/_react.default.createElement(_contentWidthWide.default, {
+      color: "currentColor",
+      spacing: "spacious",
+      label: formatMessage(_messages.default.layoutWide)
+    })
+  }, {
+    id: 'editor.extensions.width.full-width',
+    title: formatMessage(_messages.default.layoutFullWidth),
+    onClick: (0, _commands.updateExtensionLayout)('full-width', editorAnalyticsAPI),
+    selected: layout === 'full-width',
+    icon: /*#__PURE__*/_react.default.createElement(_expandHorizontal.default, {
+      color: "currentColor",
+      spacing: "spacious",
+      label: formatMessage(_messages.default.layoutFullWidth)
+    })
+  }];
+  return [{
+    id: 'extensions-width-options-toolbar-item',
+    testId: 'extensions-width-options-toolbar-dropdown',
+    type: 'dropdown',
+    options: options,
+    title: title,
+    iconBefore: function iconBefore() {
+      return /*#__PURE__*/_react.default.createElement(IconComponent, {
+        color: "currentColor",
+        spacing: "spacious",
+        label: title
+      });
+    }
+  }];
+};
+var breakoutOptions = function breakoutOptions(state, formatMessage, extensionState, breakoutEnabled, editorAnalyticsAPI) {
+  return (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? breakoutDropdownOptions(state, formatMessage, breakoutEnabled, editorAnalyticsAPI) : breakoutButtonListOptions(state, formatMessage, extensionState, breakoutEnabled, editorAnalyticsAPI);
+};
 var editButton = function editButton(formatMessage, extensionState, applyChangeToContextPanel, editorAnalyticsAPI) {
   if (!extensionState.showEditButton) {
     return [];
   }
-  return [{
+  var editButtonItems = [{
     id: 'editor.extension.edit',
     type: 'button',
     icon: _edit.default,
@@ -122,6 +196,55 @@ var editButton = function editButton(formatMessage, extensionState, applyChangeT
     tabIndex: null,
     focusEditoronEnter: true
   }];
+  if ((0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
+    editButtonItems.push({
+      type: 'separator',
+      fullHeight: true
+    });
+  }
+  return editButtonItems;
+};
+
+/**
+ * Calculates the position for the toolbar when dealing with nested extensions
+ */
+var calculateToolbarPosition = function calculateToolbarPosition(editorView, nextPos, state, extensionNode) {
+  var _editorView$state = editorView.state,
+    schema = _editorView$state.schema,
+    selection = _editorView$state.selection;
+  var possibleMbeParent = (0, _utils2.findParentNodeOfType)(schema.nodes.extensionFrame)(selection);
+  // We only want to use calculated position in case of a bodiedExtension present inside an MBE node
+  var isBodiedExtensionInsideMBE = possibleMbeParent && (extensionNode === null || extensionNode === void 0 ? void 0 : extensionNode.node.type.name) === 'bodiedExtension';
+  var scrollWrapper = editorView.dom.closest('.fabric-editor-popup-scroll-parent') || document.body;
+  if ((0, _platformFeatureFlags.fg)('platform_editor_legacy_content_macro')) {
+    if (!extensionNode) {
+      return nextPos;
+    }
+    var isInsideEditableExtensionArea = !!editorView.dom.closest('.extension-editable-area');
+    if (!isBodiedExtensionInsideMBE && !isInsideEditableExtensionArea) {
+      return nextPos;
+    }
+    if (isInsideEditableExtensionArea && scrollWrapper.parentElement) {
+      // The editable extension area may have its own scroll wrapper, so we want to keep searching up the tree for the page level scroll wrapper.
+
+      scrollWrapper = scrollWrapper.parentElement.closest('.fabric-editor-popup-scroll-parent') || scrollWrapper;
+    }
+  } else {
+    if (!isBodiedExtensionInsideMBE) {
+      return nextPos;
+    }
+  }
+
+  // Ignored via go/ees005
+  // eslint-disable-next-line @atlaskit/editor/no-as-casting
+  var nestedBodiedExtensionDomElement = editorView.nodeDOM(extensionNode.pos);
+  var nestedBodiedExtensionRect = nestedBodiedExtensionDomElement === null || nestedBodiedExtensionDomElement === void 0 ? void 0 : nestedBodiedExtensionDomElement.getBoundingClientRect();
+  var wrapperBounds = scrollWrapper.getBoundingClientRect();
+  var toolbarTopPos = nestedBodiedExtensionRect.bottom - wrapperBounds.top + scrollWrapper.scrollTop + _styles.BODIED_EXT_MBE_MARGIN_TOP;
+  return {
+    top: toolbarTopPos,
+    left: nextPos.left
+  };
 };
 var getToolbarConfig = exports.getToolbarConfig = function getToolbarConfig(_ref) {
   var _ref$breakoutEnabled = _ref.breakoutEnabled,
@@ -131,6 +254,7 @@ var getToolbarConfig = exports.getToolbarConfig = function getToolbarConfig(_ref
     editorAnalyticsAPI = _ref.editorAnalyticsAPI,
     extensionApi = _ref.extensionApi;
   return function (state, intl) {
+    var _hoverDecoration, _hoverDecoration2, _hoverDecoration3, _hoverDecoration4;
     var formatMessage = intl.formatMessage;
     var extensionState = (0, _pluginFactory.getPluginState)(state);
     if ((0, _platformFeatureFlags.fg)('platform_editor_legacy_content_macro')) {
@@ -140,141 +264,104 @@ var getToolbarConfig = exports.getToolbarConfig = function getToolbarConfig(_ref
       applyChangeToContextPanel = extensionApi === null || extensionApi === void 0 || (_extensionApi$context = extensionApi.contextPanel) === null || _extensionApi$context === void 0 ? void 0 : _extensionApi$context.actions.applyChange;
       editorAnalyticsAPI = extensionApi === null || extensionApi === void 0 || (_extensionApi$analyti = extensionApi.analytics) === null || _extensionApi$analyti === void 0 ? void 0 : _extensionApi$analyti.actions;
     }
-    if (extensionState && !extensionState.showContextPanel && extensionState.element) {
-      var _hoverDecoration, _hoverDecoration2, _hoverDecoration3, _hoverDecoration4;
-      var nodeType = [state.schema.nodes.extension, state.schema.nodes.inlineExtension, state.schema.nodes.bodiedExtension, state.schema.nodes.multiBodiedExtension];
-      var editButtonArray = editButton(formatMessage, extensionState, applyChangeToContextPanel, editorAnalyticsAPI);
-      var breakoutButtonArray = breakoutOptions(state, formatMessage, extensionState, breakoutEnabled, editorAnalyticsAPI);
-      var extensionObj = (0, _utils3.getSelectedExtension)(state, true);
-
-      // Check if we need to show confirm dialog for delete button
-      var confirmDialog;
-      if ((0, _utils.isReferencedSource)(state, extensionObj === null || extensionObj === void 0 ? void 0 : extensionObj.node)) {
-        confirmDialog = function confirmDialog() {
-          var localSourceName = formatMessage(_extensions.messages.unnamedSource);
-          return {
-            title: formatMessage(_extensions.messages.deleteElementTitle),
-            okButtonLabel: formatMessage(_extensions.messages.confirmDeleteLinkedModalOKButton),
-            message: formatMessage(_extensions.messages.confirmDeleteLinkedModalMessage, {
-              nodeName: (0, _utils.getNodeName)(state, extensionObj === null || extensionObj === void 0 ? void 0 : extensionObj.node) || localSourceName
-            }),
-            isReferentialityDialog: true,
-            getChildrenInfo: function getChildrenInfo() {
-              return (0, _utils.getChildrenInfo)(state, extensionObj === null || extensionObj === void 0 ? void 0 : extensionObj.node);
-            },
-            checkboxLabel: formatMessage(_extensions.messages.confirmModalCheckboxLabel),
-            onConfirm: function onConfirm() {
-              var isChecked = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
-              return clickWithCheckboxHandler(isChecked, extensionObj === null || extensionObj === void 0 ? void 0 : extensionObj.node);
-            }
-          };
-        };
-      }
-      return {
-        title: 'Extension floating controls',
-        // Ignored via go/ees005
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        getDomRef: function getDomRef() {
-          return extensionState.element.parentElement || undefined;
-        },
-        nodeType: nodeType,
-        onPositionCalculated: function onPositionCalculated(editorView, nextPos) {
-          var _editorView$state = editorView.state,
-            schema = _editorView$state.schema,
-            selection = _editorView$state.selection;
-          var extensionNode = (0, _utils3.getSelectedExtension)(state, true);
-          var possibleMbeParent = (0, _utils2.findParentNodeOfType)(schema.nodes.extensionFrame)(selection);
-          // We only want to use calculated position in case of a bodiedExtension present inside an MBE node
-          var isBodiedExtensionInsideMBE = possibleMbeParent && (extensionNode === null || extensionNode === void 0 ? void 0 : extensionNode.node.type.name) === 'bodiedExtension';
-          var scrollWrapper = editorView.dom.closest('.fabric-editor-popup-scroll-parent') || document.body;
-          if ((0, _platformFeatureFlags.fg)('platform_editor_legacy_content_macro')) {
-            if (!extensionNode) {
-              return nextPos;
-            }
-            var isInsideEditableExtensionArea = !!editorView.dom.closest('.extension-editable-area');
-            if (!isBodiedExtensionInsideMBE && !isInsideEditableExtensionArea) {
-              return nextPos;
-            }
-            if (isInsideEditableExtensionArea && scrollWrapper.parentElement) {
-              // The editable extension area may have its own scroll wrapper, so we want to keep searching up the tree for the page level scroll wrapper.
+    if (!extensionState || extensionState.showContextPanel || !extensionState.element) {
+      return;
+    }
+    var nodeType = [state.schema.nodes.extension, state.schema.nodes.inlineExtension, state.schema.nodes.bodiedExtension, state.schema.nodes.multiBodiedExtension];
+    var editButtonItems = editButton(formatMessage, extensionState, applyChangeToContextPanel, editorAnalyticsAPI);
+    var breakoutItems = breakoutOptions(state, formatMessage, extensionState, breakoutEnabled, editorAnalyticsAPI);
+    var extensionObj = (0, _utils3.getSelectedExtension)(state, true);
 
-              scrollWrapper = scrollWrapper.parentElement.closest('.fabric-editor-popup-scroll-parent') || scrollWrapper;
-            }
-          } else {
-            if (!isBodiedExtensionInsideMBE) {
-              return nextPos;
-            }
+    // Check if we need to show confirm dialog for delete button
+    var confirmDialog;
+    if ((0, _utils.isReferencedSource)(state, extensionObj === null || extensionObj === void 0 ? void 0 : extensionObj.node)) {
+      confirmDialog = function confirmDialog() {
+        var localSourceName = formatMessage(_extensions.messages.unnamedSource);
+        return {
+          title: formatMessage(_extensions.messages.deleteElementTitle),
+          okButtonLabel: formatMessage(_extensions.messages.confirmDeleteLinkedModalOKButton),
+          message: formatMessage(_extensions.messages.confirmDeleteLinkedModalMessage, {
+            nodeName: (0, _utils.getNodeName)(state, extensionObj === null || extensionObj === void 0 ? void 0 : extensionObj.node) || localSourceName
+          }),
+          isReferentialityDialog: true,
+          getChildrenInfo: function getChildrenInfo() {
+            return (0, _utils.getChildrenInfo)(state, extensionObj === null || extensionObj === void 0 ? void 0 : extensionObj.node);
+          },
+          checkboxLabel: formatMessage(_extensions.messages.confirmModalCheckboxLabel),
+          onConfirm: function onConfirm() {
+            var isChecked = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+            return clickWithCheckboxHandler(isChecked, extensionObj === null || extensionObj === void 0 ? void 0 : extensionObj.node);
           }
-
-          // Ignored via go/ees005
-          // eslint-disable-next-line @atlaskit/editor/no-as-casting
-          var nestedBodiedExtensionDomElement = editorView.nodeDOM(extensionNode.pos);
-          var nestedBodiedExtensionRect = nestedBodiedExtensionDomElement === null || nestedBodiedExtensionDomElement === void 0 ? void 0 : nestedBodiedExtensionDomElement.getBoundingClientRect();
-          var wrapperBounds = scrollWrapper.getBoundingClientRect();
-          var toolbarTopPos = nestedBodiedExtensionRect.bottom - wrapperBounds.top + scrollWrapper.scrollTop + _styles.BODIED_EXT_MBE_MARGIN_TOP;
-          return {
-            top: toolbarTopPos,
-            left: nextPos.left
-          };
-        },
-        items: [].concat((0, _toConsumableArray2.default)(editButtonArray), (0, _toConsumableArray2.default)(breakoutButtonArray), (0, _toConsumableArray2.default)((0, _experiments.editorExperiment)('platform_editor_controls', 'control') ? [{
-          type: 'separator',
-          hidden: editButtonArray.length === 0 && breakoutButtonArray.length === 0
-        }, {
-          type: 'extensions-placeholder',
-          separator: 'end'
-        }, {
-          type: 'copy-button',
-          items: [{
-            state: state,
-            formatMessage: intl.formatMessage,
-            nodeType: nodeType
-          }]
-        }, {
-          type: 'separator'
-        }, {
-          id: 'editor.extension.delete',
-          type: 'button',
-          icon: _delete.default,
-          iconFallback: _remove.default,
-          appearance: 'danger',
-          onClick: (0, _commands.removeExtension)(editorAnalyticsAPI),
-          onMouseEnter: (_hoverDecoration = hoverDecoration) === null || _hoverDecoration === void 0 ? void 0 : _hoverDecoration(nodeType, true),
-          onMouseLeave: (_hoverDecoration2 = hoverDecoration) === null || _hoverDecoration2 === void 0 ? void 0 : _hoverDecoration2(nodeType, false),
-          onFocus: (_hoverDecoration3 = hoverDecoration) === null || _hoverDecoration3 === void 0 ? void 0 : _hoverDecoration3(nodeType, true),
-          onBlur: (_hoverDecoration4 = hoverDecoration) === null || _hoverDecoration4 === void 0 ? void 0 : _hoverDecoration4(nodeType, false),
-          focusEditoronEnter: true,
-          title: formatMessage(_messages.default.remove),
-          tabIndex: null,
-          confirmDialog: confirmDialog
-        }] : [{
-          type: 'separator',
-          fullHeight: true
-        }, {
-          type: 'overflow-dropdown',
-          options: [{
-            title: 'Copy',
-            onClick: function onClick() {
-              var _extensionApi$core, _extensionApi$floatin;
-              extensionApi === null || extensionApi === void 0 || (_extensionApi$core = extensionApi.core) === null || _extensionApi$core === void 0 || _extensionApi$core.actions.execute( // @ts-ignore
-              extensionApi === null || extensionApi === void 0 || (_extensionApi$floatin = extensionApi.floatingToolbar) === null || _extensionApi$floatin === void 0 ? void 0 : _extensionApi$floatin.commands.copyNode(nodeType));
-              return true;
-            },
-            icon: /*#__PURE__*/_react.default.createElement(_copy.default, {
-              label: "Copy"
-            })
-          }, {
-            title: 'Delete',
-            onClick: (0, _commands.removeExtension)(editorAnalyticsAPI),
-            icon: /*#__PURE__*/_react.default.createElement(_delete.default, {
-              label: "Delete"
-            })
-          }]
-        }])),
-        scrollable: true
+        };
       };
     }
-    return;
+    return {
+      title: 'Extension floating controls',
+      // Ignored via go/ees005
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      getDomRef: function getDomRef() {
+        return extensionState.element.parentElement || undefined;
+      },
+      nodeType: nodeType,
+      onPositionCalculated: function onPositionCalculated(editorView, nextPos) {
+        return calculateToolbarPosition(editorView, nextPos, state, extensionObj);
+      },
+      items: [].concat((0, _toConsumableArray2.default)(editButtonItems), (0, _toConsumableArray2.default)(breakoutItems), (0, _toConsumableArray2.default)((0, _experiments.editorExperiment)('platform_editor_controls', 'control') ? [{
+        type: 'separator',
+        hidden: editButtonItems.length === 0 && breakoutItems.length === 0
+      }, {
+        type: 'extensions-placeholder',
+        separator: 'end'
+      }, {
+        type: 'copy-button',
+        items: [{
+          state: state,
+          formatMessage: intl.formatMessage,
+          nodeType: nodeType
+        }]
+      }, {
+        type: 'separator'
+      }, {
+        id: 'editor.extension.delete',
+        type: 'button',
+        icon: _delete.default,
+        iconFallback: _remove.default,
+        appearance: 'danger',
+        onClick: (0, _commands.removeExtension)(editorAnalyticsAPI),
+        onMouseEnter: (_hoverDecoration = hoverDecoration) === null || _hoverDecoration === void 0 ? void 0 : _hoverDecoration(nodeType, true),
+        onMouseLeave: (_hoverDecoration2 = hoverDecoration) === null || _hoverDecoration2 === void 0 ? void 0 : _hoverDecoration2(nodeType, false),
+        onFocus: (_hoverDecoration3 = hoverDecoration) === null || _hoverDecoration3 === void 0 ? void 0 : _hoverDecoration3(nodeType, true),
+        onBlur: (_hoverDecoration4 = hoverDecoration) === null || _hoverDecoration4 === void 0 ? void 0 : _hoverDecoration4(nodeType, false),
+        focusEditoronEnter: true,
+        title: formatMessage(_messages.default.remove),
+        tabIndex: null,
+        confirmDialog: confirmDialog
+      }] : [{
+        type: 'separator',
+        fullHeight: true
+      }, {
+        type: 'overflow-dropdown',
+        options: [{
+          title: 'Copy',
+          onClick: function onClick() {
+            var _extensionApi$core, _extensionApi$floatin;
+            extensionApi === null || extensionApi === void 0 || (_extensionApi$core = extensionApi.core) === null || _extensionApi$core === void 0 || _extensionApi$core.actions.execute( // @ts-ignore
+            extensionApi === null || extensionApi === void 0 || (_extensionApi$floatin = extensionApi.floatingToolbar) === null || _extensionApi$floatin === void 0 ? void 0 : _extensionApi$floatin.commands.copyNode(nodeType));
+            return true;
+          },
+          icon: /*#__PURE__*/_react.default.createElement(_copy.default, {
+            label: "Copy"
+          })
+        }, {
+          title: 'Delete',
+          onClick: (0, _commands.removeExtension)(editorAnalyticsAPI),
+          icon: /*#__PURE__*/_react.default.createElement(_delete.default, {
+            label: "Delete"
+          })
+        }]
+      }])),
+      scrollable: true
+    };
   };
 };
 var clickWithCheckboxHandler = function clickWithCheckboxHandler(isChecked, node) {

package/dist/es2019/pm-plugins/toolbar.js

@@ -68,7 +68,7 @@ const isLayoutSupported = (state, selectedExtNode) => {
   // and not inside a layoutSection
   return !!((isMultiBodiedExtension || isNonEmbeddedBodiedExtension || isNonEmbeddedExtension) && !hasParentNodeOfType([layoutSection])(selection));
 };
-const breakoutOptions = (state, formatMessage, extensionState, breakoutEnabled, editorAnalyticsAPI) => {
+const breakoutButtonListOptions = (state, formatMessage, extensionState, breakoutEnabled, editorAnalyticsAPI) => {
   const nodeWithPos = getSelectedExtension(state, true);
 
   // we should only return breakout options when breakouts are enabled and the node supports them
@@ -104,11 +104,85 @@ const breakoutOptions = (state, formatMessage, extensionState, breakoutEnabled,
   }
   return [];
 };
+const breakoutDropdownOptions = (state, formatMessage, breakoutEnabled, editorAnalyticsAPI) => {
+  const nodeWithPos = getSelectedExtension(state, true);
+
+  // we should only return breakout options when breakouts are enabled and the node supports them
+  if (!nodeWithPos || !breakoutEnabled || !isLayoutSupported(state, nodeWithPos) || isNestedNBM(state, nodeWithPos)) {
+    return [];
+  }
+  const {
+    layout
+  } = nodeWithPos.node.attrs;
+  let title = '';
+  let IconComponent;
+  switch (layout) {
+    case 'wide':
+      title = formatMessage(commonMessages.layoutStateWide);
+      IconComponent = ContentWidthWideIcon;
+      break;
+    case 'full-width':
+      title = formatMessage(commonMessages.layoutStateFullWidth);
+      IconComponent = ExpandHorizontalIcon;
+      break;
+    case 'default':
+    default:
+      title = formatMessage(commonMessages.layoutStateFixedWidth);
+      IconComponent = ContentWidthNarrowIcon;
+      break;
+  }
+  const options = [{
+    id: 'editor.extensions.width.default',
+    title: formatMessage(commonMessages.layoutFixedWidth),
+    onClick: updateExtensionLayout('default', editorAnalyticsAPI),
+    selected: layout === 'default',
+    icon: /*#__PURE__*/React.createElement(ContentWidthNarrowIcon, {
+      color: "currentColor",
+      spacing: "spacious",
+      label: formatMessage(commonMessages.layoutFixedWidth)
+    })
+  }, {
+    id: 'editor.extensions.width.wide',
+    title: formatMessage(commonMessages.layoutWide),
+    onClick: updateExtensionLayout('wide', editorAnalyticsAPI),
+    selected: layout === 'wide',
+    icon: /*#__PURE__*/React.createElement(ContentWidthWideIcon, {
+      color: "currentColor",
+      spacing: "spacious",
+      label: formatMessage(commonMessages.layoutWide)
+    })
+  }, {
+    id: 'editor.extensions.width.full-width',
+    title: formatMessage(commonMessages.layoutFullWidth),
+    onClick: updateExtensionLayout('full-width', editorAnalyticsAPI),
+    selected: layout === 'full-width',
+    icon: /*#__PURE__*/React.createElement(ExpandHorizontalIcon, {
+      color: "currentColor",
+      spacing: "spacious",
+      label: formatMessage(commonMessages.layoutFullWidth)
+    })
+  }];
+  return [{
+    id: 'extensions-width-options-toolbar-item',
+    testId: 'extensions-width-options-toolbar-dropdown',
+    type: 'dropdown',
+    options: options,
+    title,
+    iconBefore: () => /*#__PURE__*/React.createElement(IconComponent, {
+      color: "currentColor",
+      spacing: "spacious",
+      label: title
+    })
+  }];
+};
+const breakoutOptions = (state, formatMessage, extensionState, breakoutEnabled, editorAnalyticsAPI) => {
+  return editorExperiment('platform_editor_controls', 'variant1') ? breakoutDropdownOptions(state, formatMessage, breakoutEnabled, editorAnalyticsAPI) : breakoutButtonListOptions(state, formatMessage, extensionState, breakoutEnabled, editorAnalyticsAPI);
+};
 const editButton = (formatMessage, extensionState, applyChangeToContextPanel, editorAnalyticsAPI) => {
   if (!extensionState.showEditButton) {
     return [];
   }
-  return [{
+  const editButtonItems = [{
     id: 'editor.extension.edit',
     type: 'button',
     icon: EditIcon,
@@ -127,6 +201,58 @@ const editButton = (formatMessage, extensionState, applyChangeToContextPanel, ed
     tabIndex: null,
     focusEditoronEnter: true
   }];
+  if (editorExperiment('platform_editor_controls', 'variant1')) {
+    editButtonItems.push({
+      type: 'separator',
+      fullHeight: true
+    });
+  }
+  return editButtonItems;
+};
+
+/**
+ * Calculates the position for the toolbar when dealing with nested extensions
+ */
+const calculateToolbarPosition = (editorView, nextPos, state, extensionNode) => {
+  const {
+    state: {
+      schema,
+      selection
+    }
+  } = editorView;
+  const possibleMbeParent = findParentNodeOfType(schema.nodes.extensionFrame)(selection);
+  // We only want to use calculated position in case of a bodiedExtension present inside an MBE node
+  const isBodiedExtensionInsideMBE = possibleMbeParent && (extensionNode === null || extensionNode === void 0 ? void 0 : extensionNode.node.type.name) === 'bodiedExtension';
+  let scrollWrapper = editorView.dom.closest('.fabric-editor-popup-scroll-parent') || document.body;
+  if (fg('platform_editor_legacy_content_macro')) {
+    if (!extensionNode) {
+      return nextPos;
+    }
+    const isInsideEditableExtensionArea = !!editorView.dom.closest('.extension-editable-area');
+    if (!isBodiedExtensionInsideMBE && !isInsideEditableExtensionArea) {
+      return nextPos;
+    }
+    if (isInsideEditableExtensionArea && scrollWrapper.parentElement) {
+      // The editable extension area may have its own scroll wrapper, so we want to keep searching up the tree for the page level scroll wrapper.
+
+      scrollWrapper = scrollWrapper.parentElement.closest('.fabric-editor-popup-scroll-parent') || scrollWrapper;
+    }
+  } else {
+    if (!isBodiedExtensionInsideMBE) {
+      return nextPos;
+    }
+  }
+
+  // Ignored via go/ees005
+  // eslint-disable-next-line @atlaskit/editor/no-as-casting
+  const nestedBodiedExtensionDomElement = editorView.nodeDOM(extensionNode.pos);
+  const nestedBodiedExtensionRect = nestedBodiedExtensionDomElement === null || nestedBodiedExtensionDomElement === void 0 ? void 0 : nestedBodiedExtensionDomElement.getBoundingClientRect();
+  const wrapperBounds = scrollWrapper.getBoundingClientRect();
+  const toolbarTopPos = nestedBodiedExtensionRect.bottom - wrapperBounds.top + scrollWrapper.scrollTop + BODIED_EXT_MBE_MARGIN_TOP;
+  return {
+    top: toolbarTopPos,
+    left: nextPos.left
+  };
 };
 export const getToolbarConfig = ({
   breakoutEnabled = true,
@@ -135,6 +261,7 @@ export const getToolbarConfig = ({
   editorAnalyticsAPI,
   extensionApi
 }) => (state, intl) => {
+  var _hoverDecoration, _hoverDecoration2, _hoverDecoration3, _hoverDecoration4;
   const {
     formatMessage
   } = intl;
@@ -146,137 +273,95 @@ export const getToolbarConfig = ({
     applyChangeToContextPanel = extensionApi === null || extensionApi === void 0 ? void 0 : (_extensionApi$context = extensionApi.contextPanel) === null || _extensionApi$context === void 0 ? void 0 : _extensionApi$context.actions.applyChange;
     editorAnalyticsAPI = extensionApi === null || extensionApi === void 0 ? void 0 : (_extensionApi$analyti = extensionApi.analytics) === null || _extensionApi$analyti === void 0 ? void 0 : _extensionApi$analyti.actions;
   }
-  if (extensionState && !extensionState.showContextPanel && extensionState.element) {
-    var _hoverDecoration, _hoverDecoration2, _hoverDecoration3, _hoverDecoration4;
-    const nodeType = [state.schema.nodes.extension, state.schema.nodes.inlineExtension, state.schema.nodes.bodiedExtension, state.schema.nodes.multiBodiedExtension];
-    const editButtonArray = editButton(formatMessage, extensionState, applyChangeToContextPanel, editorAnalyticsAPI);
-    const breakoutButtonArray = breakoutOptions(state, formatMessage, extensionState, breakoutEnabled, editorAnalyticsAPI);
-    const extensionObj = getSelectedExtension(state, true);
+  if (!extensionState || extensionState.showContextPanel || !extensionState.element) {
+    return;
+  }
+  const nodeType = [state.schema.nodes.extension, state.schema.nodes.inlineExtension, state.schema.nodes.bodiedExtension, state.schema.nodes.multiBodiedExtension];
+  const editButtonItems = editButton(formatMessage, extensionState, applyChangeToContextPanel, editorAnalyticsAPI);
+  const breakoutItems = breakoutOptions(state, formatMessage, extensionState, breakoutEnabled, editorAnalyticsAPI);
+  const extensionObj = getSelectedExtension(state, true);
 
-    // Check if we need to show confirm dialog for delete button
-    let confirmDialog;
-    if (isReferencedSource(state, extensionObj === null || extensionObj === void 0 ? void 0 : extensionObj.node)) {
-      confirmDialog = () => {
-        const localSourceName = formatMessage(messages.unnamedSource);
-        return {
-          title: formatMessage(messages.deleteElementTitle),
-          okButtonLabel: formatMessage(messages.confirmDeleteLinkedModalOKButton),
-          message: formatMessage(messages.confirmDeleteLinkedModalMessage, {
-            nodeName: getNodeName(state, extensionObj === null || extensionObj === void 0 ? void 0 : extensionObj.node) || localSourceName
-          }),
-          isReferentialityDialog: true,
-          getChildrenInfo: () => getChildrenInfo(state, extensionObj === null || extensionObj === void 0 ? void 0 : extensionObj.node),
-          checkboxLabel: formatMessage(messages.confirmModalCheckboxLabel),
-          onConfirm: (isChecked = false) => clickWithCheckboxHandler(isChecked, extensionObj === null || extensionObj === void 0 ? void 0 : extensionObj.node)
-        };
+  // Check if we need to show confirm dialog for delete button
+  let confirmDialog;
+  if (isReferencedSource(state, extensionObj === null || extensionObj === void 0 ? void 0 : extensionObj.node)) {
+    confirmDialog = () => {
+      const localSourceName = formatMessage(messages.unnamedSource);
+      return {
+        title: formatMessage(messages.deleteElementTitle),
+        okButtonLabel: formatMessage(messages.confirmDeleteLinkedModalOKButton),
+        message: formatMessage(messages.confirmDeleteLinkedModalMessage, {
+          nodeName: getNodeName(state, extensionObj === null || extensionObj === void 0 ? void 0 : extensionObj.node) || localSourceName
+        }),
+        isReferentialityDialog: true,
+        getChildrenInfo: () => getChildrenInfo(state, extensionObj === null || extensionObj === void 0 ? void 0 : extensionObj.node),
+        checkboxLabel: formatMessage(messages.confirmModalCheckboxLabel),
+        onConfirm: (isChecked = false) => clickWithCheckboxHandler(isChecked, extensionObj === null || extensionObj === void 0 ? void 0 : extensionObj.node)
       };
-    }
-    return {
-      title: 'Extension floating controls',
-      // Ignored via go/ees005
-      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-      getDomRef: () => extensionState.element.parentElement || undefined,
-      nodeType,
-      onPositionCalculated: (editorView, nextPos) => {
-        const {
-          state: {
-            schema,
-            selection
-          }
-        } = editorView;
-        const extensionNode = getSelectedExtension(state, true);
-        const possibleMbeParent = findParentNodeOfType(schema.nodes.extensionFrame)(selection);
-        // We only want to use calculated position in case of a bodiedExtension present inside an MBE node
-        const isBodiedExtensionInsideMBE = possibleMbeParent && (extensionNode === null || extensionNode === void 0 ? void 0 : extensionNode.node.type.name) === 'bodiedExtension';
-        let scrollWrapper = editorView.dom.closest('.fabric-editor-popup-scroll-parent') || document.body;
-        if (fg('platform_editor_legacy_content_macro')) {
-          if (!extensionNode) {
-            return nextPos;
-          }
-          const isInsideEditableExtensionArea = !!editorView.dom.closest('.extension-editable-area');
-          if (!isBodiedExtensionInsideMBE && !isInsideEditableExtensionArea) {
-            return nextPos;
-          }
-          if (isInsideEditableExtensionArea && scrollWrapper.parentElement) {
-            // The editable extension area may have its own scroll wrapper, so we want to keep searching up the tree for the page level scroll wrapper.
-
-            scrollWrapper = scrollWrapper.parentElement.closest('.fabric-editor-popup-scroll-parent') || scrollWrapper;
-          }
-        } else {
-          if (!isBodiedExtensionInsideMBE) {
-            return nextPos;
-          }
-        }
-
-        // Ignored via go/ees005
-        // eslint-disable-next-line @atlaskit/editor/no-as-casting
-        const nestedBodiedExtensionDomElement = editorView.nodeDOM(extensionNode.pos);
-        const nestedBodiedExtensionRect = nestedBodiedExtensionDomElement === null || nestedBodiedExtensionDomElement === void 0 ? void 0 : nestedBodiedExtensionDomElement.getBoundingClientRect();
-        const wrapperBounds = scrollWrapper.getBoundingClientRect();
-        const toolbarTopPos = nestedBodiedExtensionRect.bottom - wrapperBounds.top + scrollWrapper.scrollTop + BODIED_EXT_MBE_MARGIN_TOP;
-        return {
-          top: toolbarTopPos,
-          left: nextPos.left
-        };
-      },
-      items: [...editButtonArray, ...breakoutButtonArray, ...(editorExperiment('platform_editor_controls', 'control') ? [{
-        type: 'separator',
-        hidden: editButtonArray.length === 0 && breakoutButtonArray.length === 0
-      }, {
-        type: 'extensions-placeholder',
-        separator: 'end'
-      }, {
-        type: 'copy-button',
-        items: [{
-          state,
-          formatMessage: intl.formatMessage,
-          nodeType
-        }]
-      }, {
-        type: 'separator'
-      }, {
-        id: 'editor.extension.delete',
-        type: 'button',
-        icon: DeleteIcon,
-        iconFallback: RemoveIcon,
-        appearance: 'danger',
-        onClick: removeExtension(editorAnalyticsAPI),
-        onMouseEnter: (_hoverDecoration = hoverDecoration) === null || _hoverDecoration === void 0 ? void 0 : _hoverDecoration(nodeType, true),
-        onMouseLeave: (_hoverDecoration2 = hoverDecoration) === null || _hoverDecoration2 === void 0 ? void 0 : _hoverDecoration2(nodeType, false),
-        onFocus: (_hoverDecoration3 = hoverDecoration) === null || _hoverDecoration3 === void 0 ? void 0 : _hoverDecoration3(nodeType, true),
-        onBlur: (_hoverDecoration4 = hoverDecoration) === null || _hoverDecoration4 === void 0 ? void 0 : _hoverDecoration4(nodeType, false),
-        focusEditoronEnter: true,
-        title: formatMessage(commonMessages.remove),
-        tabIndex: null,
-        confirmDialog
-      }] : [{
-        type: 'separator',
-        fullHeight: true
-      }, {
-        type: 'overflow-dropdown',
-        options: [{
-          title: 'Copy',
-          onClick: () => {
-            var _extensionApi$core, _extensionApi$floatin;
-            extensionApi === null || extensionApi === void 0 ? void 0 : (_extensionApi$core = extensionApi.core) === null || _extensionApi$core === void 0 ? void 0 : _extensionApi$core.actions.execute( // @ts-ignore
-            extensionApi === null || extensionApi === void 0 ? void 0 : (_extensionApi$floatin = extensionApi.floatingToolbar) === null || _extensionApi$floatin === void 0 ? void 0 : _extensionApi$floatin.commands.copyNode(nodeType));
-            return true;
-          },
-          icon: /*#__PURE__*/React.createElement(CopyIcon, {
-            label: "Copy"
-          })
-        }, {
-          title: 'Delete',
-          onClick: removeExtension(editorAnalyticsAPI),
-          icon: /*#__PURE__*/React.createElement(DeleteIcon, {
-            label: "Delete"
-          })
-        }]
-      }])],
-      scrollable: true
     };
   }
-  return;
+  return {
+    title: 'Extension floating controls',
+    // Ignored via go/ees005
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    getDomRef: () => extensionState.element.parentElement || undefined,
+    nodeType,
+    onPositionCalculated: (editorView, nextPos) => calculateToolbarPosition(editorView, nextPos, state, extensionObj),
+    items: [...editButtonItems, ...breakoutItems, ...(editorExperiment('platform_editor_controls', 'control') ? [{
+      type: 'separator',
+      hidden: editButtonItems.length === 0 && breakoutItems.length === 0
+    }, {
+      type: 'extensions-placeholder',
+      separator: 'end'
+    }, {
+      type: 'copy-button',
+      items: [{
+        state,
+        formatMessage: intl.formatMessage,
+        nodeType
+      }]
+    }, {
+      type: 'separator'
+    }, {
+      id: 'editor.extension.delete',
+      type: 'button',
+      icon: DeleteIcon,
+      iconFallback: RemoveIcon,
+      appearance: 'danger',
+      onClick: removeExtension(editorAnalyticsAPI),
+      onMouseEnter: (_hoverDecoration = hoverDecoration) === null || _hoverDecoration === void 0 ? void 0 : _hoverDecoration(nodeType, true),
+      onMouseLeave: (_hoverDecoration2 = hoverDecoration) === null || _hoverDecoration2 === void 0 ? void 0 : _hoverDecoration2(nodeType, false),
+      onFocus: (_hoverDecoration3 = hoverDecoration) === null || _hoverDecoration3 === void 0 ? void 0 : _hoverDecoration3(nodeType, true),
+      onBlur: (_hoverDecoration4 = hoverDecoration) === null || _hoverDecoration4 === void 0 ? void 0 : _hoverDecoration4(nodeType, false),
+      focusEditoronEnter: true,
+      title: formatMessage(commonMessages.remove),
+      tabIndex: null,
+      confirmDialog
+    }] : [{
+      type: 'separator',
+      fullHeight: true
+    }, {
+      type: 'overflow-dropdown',
+      options: [{
+        title: 'Copy',
+        onClick: () => {
+          var _extensionApi$core, _extensionApi$floatin;
+          extensionApi === null || extensionApi === void 0 ? void 0 : (_extensionApi$core = extensionApi.core) === null || _extensionApi$core === void 0 ? void 0 : _extensionApi$core.actions.execute( // @ts-ignore
+          extensionApi === null || extensionApi === void 0 ? void 0 : (_extensionApi$floatin = extensionApi.floatingToolbar) === null || _extensionApi$floatin === void 0 ? void 0 : _extensionApi$floatin.commands.copyNode(nodeType));
+          return true;
+        },
+        icon: /*#__PURE__*/React.createElement(CopyIcon, {
+          label: "Copy"
+        })
+      }, {
+        title: 'Delete',
+        onClick: removeExtension(editorAnalyticsAPI),
+        icon: /*#__PURE__*/React.createElement(DeleteIcon, {
+          label: "Delete"
+        })
+      }]
+    }])],
+    scrollable: true
+  };
 };
 const clickWithCheckboxHandler = (isChecked, node) => (state, dispatch) => {
   if (!node) {

package/dist/esm/pm-plugins/toolbar.js

@@ -59,7 +59,7 @@ var isLayoutSupported = function isLayoutSupported(state, selectedExtNode) {
   // and not inside a layoutSection
   return !!((isMultiBodiedExtension || isNonEmbeddedBodiedExtension || isNonEmbeddedExtension) && !hasParentNodeOfType([layoutSection])(selection));
 };
-var breakoutOptions = function breakoutOptions(state, formatMessage, extensionState, breakoutEnabled, editorAnalyticsAPI) {
+var breakoutButtonListOptions = function breakoutButtonListOptions(state, formatMessage, extensionState, breakoutEnabled, editorAnalyticsAPI) {
   var nodeWithPos = getSelectedExtension(state, true);
 
   // we should only return breakout options when breakouts are enabled and the node supports them
@@ -93,11 +93,85 @@ var breakoutOptions = function breakoutOptions(state, formatMessage, extensionSt
   }
   return [];
 };
+var breakoutDropdownOptions = function breakoutDropdownOptions(state, formatMessage, breakoutEnabled, editorAnalyticsAPI) {
+  var nodeWithPos = getSelectedExtension(state, true);
+
+  // we should only return breakout options when breakouts are enabled and the node supports them
+  if (!nodeWithPos || !breakoutEnabled || !isLayoutSupported(state, nodeWithPos) || isNestedNBM(state, nodeWithPos)) {
+    return [];
+  }
+  var layout = nodeWithPos.node.attrs.layout;
+  var title = '';
+  var IconComponent;
+  switch (layout) {
+    case 'wide':
+      title = formatMessage(commonMessages.layoutStateWide);
+      IconComponent = ContentWidthWideIcon;
+      break;
+    case 'full-width':
+      title = formatMessage(commonMessages.layoutStateFullWidth);
+      IconComponent = ExpandHorizontalIcon;
+      break;
+    case 'default':
+    default:
+      title = formatMessage(commonMessages.layoutStateFixedWidth);
+      IconComponent = ContentWidthNarrowIcon;
+      break;
+  }
+  var options = [{
+    id: 'editor.extensions.width.default',
+    title: formatMessage(commonMessages.layoutFixedWidth),
+    onClick: updateExtensionLayout('default', editorAnalyticsAPI),
+    selected: layout === 'default',
+    icon: /*#__PURE__*/React.createElement(ContentWidthNarrowIcon, {
+      color: "currentColor",
+      spacing: "spacious",
+      label: formatMessage(commonMessages.layoutFixedWidth)
+    })
+  }, {
+    id: 'editor.extensions.width.wide',
+    title: formatMessage(commonMessages.layoutWide),
+    onClick: updateExtensionLayout('wide', editorAnalyticsAPI),
+    selected: layout === 'wide',
+    icon: /*#__PURE__*/React.createElement(ContentWidthWideIcon, {
+      color: "currentColor",
+      spacing: "spacious",
+      label: formatMessage(commonMessages.layoutWide)
+    })
+  }, {
+    id: 'editor.extensions.width.full-width',
+    title: formatMessage(commonMessages.layoutFullWidth),
+    onClick: updateExtensionLayout('full-width', editorAnalyticsAPI),
+    selected: layout === 'full-width',
+    icon: /*#__PURE__*/React.createElement(ExpandHorizontalIcon, {
+      color: "currentColor",
+      spacing: "spacious",
+      label: formatMessage(commonMessages.layoutFullWidth)
+    })
+  }];
+  return [{
+    id: 'extensions-width-options-toolbar-item',
+    testId: 'extensions-width-options-toolbar-dropdown',
+    type: 'dropdown',
+    options: options,
+    title: title,
+    iconBefore: function iconBefore() {
+      return /*#__PURE__*/React.createElement(IconComponent, {
+        color: "currentColor",
+        spacing: "spacious",
+        label: title
+      });
+    }
+  }];
+};
+var breakoutOptions = function breakoutOptions(state, formatMessage, extensionState, breakoutEnabled, editorAnalyticsAPI) {
+  return editorExperiment('platform_editor_controls', 'variant1') ? breakoutDropdownOptions(state, formatMessage, breakoutEnabled, editorAnalyticsAPI) : breakoutButtonListOptions(state, formatMessage, extensionState, breakoutEnabled, editorAnalyticsAPI);
+};
 var editButton = function editButton(formatMessage, extensionState, applyChangeToContextPanel, editorAnalyticsAPI) {
   if (!extensionState.showEditButton) {
     return [];
   }
-  return [{
+  var editButtonItems = [{
     id: 'editor.extension.edit',
     type: 'button',
     icon: EditIcon,
@@ -115,6 +189,55 @@ var editButton = function editButton(formatMessage, extensionState, applyChangeT
     tabIndex: null,
     focusEditoronEnter: true
   }];
+  if (editorExperiment('platform_editor_controls', 'variant1')) {
+    editButtonItems.push({
+      type: 'separator',
+      fullHeight: true
+    });
+  }
+  return editButtonItems;
+};
+
+/**
+ * Calculates the position for the toolbar when dealing with nested extensions
+ */
+var calculateToolbarPosition = function calculateToolbarPosition(editorView, nextPos, state, extensionNode) {
+  var _editorView$state = editorView.state,
+    schema = _editorView$state.schema,
+    selection = _editorView$state.selection;
+  var possibleMbeParent = findParentNodeOfType(schema.nodes.extensionFrame)(selection);
+  // We only want to use calculated position in case of a bodiedExtension present inside an MBE node
+  var isBodiedExtensionInsideMBE = possibleMbeParent && (extensionNode === null || extensionNode === void 0 ? void 0 : extensionNode.node.type.name) === 'bodiedExtension';
+  var scrollWrapper = editorView.dom.closest('.fabric-editor-popup-scroll-parent') || document.body;
+  if (fg('platform_editor_legacy_content_macro')) {
+    if (!extensionNode) {
+      return nextPos;
+    }
+    var isInsideEditableExtensionArea = !!editorView.dom.closest('.extension-editable-area');
+    if (!isBodiedExtensionInsideMBE && !isInsideEditableExtensionArea) {
+      return nextPos;
+    }
+    if (isInsideEditableExtensionArea && scrollWrapper.parentElement) {
+      // The editable extension area may have its own scroll wrapper, so we want to keep searching up the tree for the page level scroll wrapper.
+
+      scrollWrapper = scrollWrapper.parentElement.closest('.fabric-editor-popup-scroll-parent') || scrollWrapper;
+    }
+  } else {
+    if (!isBodiedExtensionInsideMBE) {
+      return nextPos;
+    }
+  }
+
+  // Ignored via go/ees005
+  // eslint-disable-next-line @atlaskit/editor/no-as-casting
+  var nestedBodiedExtensionDomElement = editorView.nodeDOM(extensionNode.pos);
+  var nestedBodiedExtensionRect = nestedBodiedExtensionDomElement === null || nestedBodiedExtensionDomElement === void 0 ? void 0 : nestedBodiedExtensionDomElement.getBoundingClientRect();
+  var wrapperBounds = scrollWrapper.getBoundingClientRect();
+  var toolbarTopPos = nestedBodiedExtensionRect.bottom - wrapperBounds.top + scrollWrapper.scrollTop + BODIED_EXT_MBE_MARGIN_TOP;
+  return {
+    top: toolbarTopPos,
+    left: nextPos.left
+  };
 };
 export var getToolbarConfig = function getToolbarConfig(_ref) {
   var _ref$breakoutEnabled = _ref.breakoutEnabled,
@@ -124,6 +247,7 @@ export var getToolbarConfig = function getToolbarConfig(_ref) {
     editorAnalyticsAPI = _ref.editorAnalyticsAPI,
     extensionApi = _ref.extensionApi;
   return function (state, intl) {
+    var _hoverDecoration, _hoverDecoration2, _hoverDecoration3, _hoverDecoration4;
     var formatMessage = intl.formatMessage;
     var extensionState = getPluginState(state);
     if (fg('platform_editor_legacy_content_macro')) {
@@ -133,141 +257,104 @@ export var getToolbarConfig = function getToolbarConfig(_ref) {
       applyChangeToContextPanel = extensionApi === null || extensionApi === void 0 || (_extensionApi$context = extensionApi.contextPanel) === null || _extensionApi$context === void 0 ? void 0 : _extensionApi$context.actions.applyChange;
       editorAnalyticsAPI = extensionApi === null || extensionApi === void 0 || (_extensionApi$analyti = extensionApi.analytics) === null || _extensionApi$analyti === void 0 ? void 0 : _extensionApi$analyti.actions;
     }
-    if (extensionState && !extensionState.showContextPanel && extensionState.element) {
-      var _hoverDecoration, _hoverDecoration2, _hoverDecoration3, _hoverDecoration4;
-      var nodeType = [state.schema.nodes.extension, state.schema.nodes.inlineExtension, state.schema.nodes.bodiedExtension, state.schema.nodes.multiBodiedExtension];
-      var editButtonArray = editButton(formatMessage, extensionState, applyChangeToContextPanel, editorAnalyticsAPI);
-      var breakoutButtonArray = breakoutOptions(state, formatMessage, extensionState, breakoutEnabled, editorAnalyticsAPI);
-      var extensionObj = getSelectedExtension(state, true);
-
-      // Check if we need to show confirm dialog for delete button
-      var confirmDialog;
-      if (isReferencedSource(state, extensionObj === null || extensionObj === void 0 ? void 0 : extensionObj.node)) {
-        confirmDialog = function confirmDialog() {
-          var localSourceName = formatMessage(messages.unnamedSource);
-          return {
-            title: formatMessage(messages.deleteElementTitle),
-            okButtonLabel: formatMessage(messages.confirmDeleteLinkedModalOKButton),
-            message: formatMessage(messages.confirmDeleteLinkedModalMessage, {
-              nodeName: getNodeName(state, extensionObj === null || extensionObj === void 0 ? void 0 : extensionObj.node) || localSourceName
-            }),
-            isReferentialityDialog: true,
-            getChildrenInfo: function getChildrenInfo() {
-              return _getChildrenInfo(state, extensionObj === null || extensionObj === void 0 ? void 0 : extensionObj.node);
-            },
-            checkboxLabel: formatMessage(messages.confirmModalCheckboxLabel),
-            onConfirm: function onConfirm() {
-              var isChecked = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
-              return clickWithCheckboxHandler(isChecked, extensionObj === null || extensionObj === void 0 ? void 0 : extensionObj.node);
-            }
-          };
-        };
-      }
-      return {
-        title: 'Extension floating controls',
-        // Ignored via go/ees005
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        getDomRef: function getDomRef() {
-          return extensionState.element.parentElement || undefined;
-        },
-        nodeType: nodeType,
-        onPositionCalculated: function onPositionCalculated(editorView, nextPos) {
-          var _editorView$state = editorView.state,
-            schema = _editorView$state.schema,
-            selection = _editorView$state.selection;
-          var extensionNode = getSelectedExtension(state, true);
-          var possibleMbeParent = findParentNodeOfType(schema.nodes.extensionFrame)(selection);
-          // We only want to use calculated position in case of a bodiedExtension present inside an MBE node
-          var isBodiedExtensionInsideMBE = possibleMbeParent && (extensionNode === null || extensionNode === void 0 ? void 0 : extensionNode.node.type.name) === 'bodiedExtension';
-          var scrollWrapper = editorView.dom.closest('.fabric-editor-popup-scroll-parent') || document.body;
-          if (fg('platform_editor_legacy_content_macro')) {
-            if (!extensionNode) {
-              return nextPos;
-            }
-            var isInsideEditableExtensionArea = !!editorView.dom.closest('.extension-editable-area');
-            if (!isBodiedExtensionInsideMBE && !isInsideEditableExtensionArea) {
-              return nextPos;
-            }
-            if (isInsideEditableExtensionArea && scrollWrapper.parentElement) {
-              // The editable extension area may have its own scroll wrapper, so we want to keep searching up the tree for the page level scroll wrapper.
+    if (!extensionState || extensionState.showContextPanel || !extensionState.element) {
+      return;
+    }
+    var nodeType = [state.schema.nodes.extension, state.schema.nodes.inlineExtension, state.schema.nodes.bodiedExtension, state.schema.nodes.multiBodiedExtension];
+    var editButtonItems = editButton(formatMessage, extensionState, applyChangeToContextPanel, editorAnalyticsAPI);
+    var breakoutItems = breakoutOptions(state, formatMessage, extensionState, breakoutEnabled, editorAnalyticsAPI);
+    var extensionObj = getSelectedExtension(state, true);
 
-              scrollWrapper = scrollWrapper.parentElement.closest('.fabric-editor-popup-scroll-parent') || scrollWrapper;
-            }
-          } else {
-            if (!isBodiedExtensionInsideMBE) {
-              return nextPos;
-            }
+    // Check if we need to show confirm dialog for delete button
+    var confirmDialog;
+    if (isReferencedSource(state, extensionObj === null || extensionObj === void 0 ? void 0 : extensionObj.node)) {
+      confirmDialog = function confirmDialog() {
+        var localSourceName = formatMessage(messages.unnamedSource);
+        return {
+          title: formatMessage(messages.deleteElementTitle),
+          okButtonLabel: formatMessage(messages.confirmDeleteLinkedModalOKButton),
+          message: formatMessage(messages.confirmDeleteLinkedModalMessage, {
+            nodeName: getNodeName(state, extensionObj === null || extensionObj === void 0 ? void 0 : extensionObj.node) || localSourceName
+          }),
+          isReferentialityDialog: true,
+          getChildrenInfo: function getChildrenInfo() {
+            return _getChildrenInfo(state, extensionObj === null || extensionObj === void 0 ? void 0 : extensionObj.node);
+          },
+          checkboxLabel: formatMessage(messages.confirmModalCheckboxLabel),
+          onConfirm: function onConfirm() {
+            var isChecked = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+            return clickWithCheckboxHandler(isChecked, extensionObj === null || extensionObj === void 0 ? void 0 : extensionObj.node);
           }
-
-          // Ignored via go/ees005
-          // eslint-disable-next-line @atlaskit/editor/no-as-casting
-          var nestedBodiedExtensionDomElement = editorView.nodeDOM(extensionNode.pos);
-          var nestedBodiedExtensionRect = nestedBodiedExtensionDomElement === null || nestedBodiedExtensionDomElement === void 0 ? void 0 : nestedBodiedExtensionDomElement.getBoundingClientRect();
-          var wrapperBounds = scrollWrapper.getBoundingClientRect();
-          var toolbarTopPos = nestedBodiedExtensionRect.bottom - wrapperBounds.top + scrollWrapper.scrollTop + BODIED_EXT_MBE_MARGIN_TOP;
-          return {
-            top: toolbarTopPos,
-            left: nextPos.left
-          };
-        },
-        items: [].concat(_toConsumableArray(editButtonArray), _toConsumableArray(breakoutButtonArray), _toConsumableArray(editorExperiment('platform_editor_controls', 'control') ? [{
-          type: 'separator',
-          hidden: editButtonArray.length === 0 && breakoutButtonArray.length === 0
-        }, {
-          type: 'extensions-placeholder',
-          separator: 'end'
-        }, {
-          type: 'copy-button',
-          items: [{
-            state: state,
-            formatMessage: intl.formatMessage,
-            nodeType: nodeType
-          }]
-        }, {
-          type: 'separator'
-        }, {
-          id: 'editor.extension.delete',
-          type: 'button',
-          icon: DeleteIcon,
-          iconFallback: RemoveIcon,
-          appearance: 'danger',
-          onClick: removeExtension(editorAnalyticsAPI),
-          onMouseEnter: (_hoverDecoration = hoverDecoration) === null || _hoverDecoration === void 0 ? void 0 : _hoverDecoration(nodeType, true),
-          onMouseLeave: (_hoverDecoration2 = hoverDecoration) === null || _hoverDecoration2 === void 0 ? void 0 : _hoverDecoration2(nodeType, false),
-          onFocus: (_hoverDecoration3 = hoverDecoration) === null || _hoverDecoration3 === void 0 ? void 0 : _hoverDecoration3(nodeType, true),
-          onBlur: (_hoverDecoration4 = hoverDecoration) === null || _hoverDecoration4 === void 0 ? void 0 : _hoverDecoration4(nodeType, false),
-          focusEditoronEnter: true,
-          title: formatMessage(commonMessages.remove),
-          tabIndex: null,
-          confirmDialog: confirmDialog
-        }] : [{
-          type: 'separator',
-          fullHeight: true
-        }, {
-          type: 'overflow-dropdown',
-          options: [{
-            title: 'Copy',
-            onClick: function onClick() {
-              var _extensionApi$core, _extensionApi$floatin;
-              extensionApi === null || extensionApi === void 0 || (_extensionApi$core = extensionApi.core) === null || _extensionApi$core === void 0 || _extensionApi$core.actions.execute( // @ts-ignore
-              extensionApi === null || extensionApi === void 0 || (_extensionApi$floatin = extensionApi.floatingToolbar) === null || _extensionApi$floatin === void 0 ? void 0 : _extensionApi$floatin.commands.copyNode(nodeType));
-              return true;
-            },
-            icon: /*#__PURE__*/React.createElement(CopyIcon, {
-              label: "Copy"
-            })
-          }, {
-            title: 'Delete',
-            onClick: removeExtension(editorAnalyticsAPI),
-            icon: /*#__PURE__*/React.createElement(DeleteIcon, {
-              label: "Delete"
-            })
-          }]
-        }])),
-        scrollable: true
+        };
       };
     }
-    return;
+    return {
+      title: 'Extension floating controls',
+      // Ignored via go/ees005
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      getDomRef: function getDomRef() {
+        return extensionState.element.parentElement || undefined;
+      },
+      nodeType: nodeType,
+      onPositionCalculated: function onPositionCalculated(editorView, nextPos) {
+        return calculateToolbarPosition(editorView, nextPos, state, extensionObj);
+      },
+      items: [].concat(_toConsumableArray(editButtonItems), _toConsumableArray(breakoutItems), _toConsumableArray(editorExperiment('platform_editor_controls', 'control') ? [{
+        type: 'separator',
+        hidden: editButtonItems.length === 0 && breakoutItems.length === 0
+      }, {
+        type: 'extensions-placeholder',
+        separator: 'end'
+      }, {
+        type: 'copy-button',
+        items: [{
+          state: state,
+          formatMessage: intl.formatMessage,
+          nodeType: nodeType
+        }]
+      }, {
+        type: 'separator'
+      }, {
+        id: 'editor.extension.delete',
+        type: 'button',
+        icon: DeleteIcon,
+        iconFallback: RemoveIcon,
+        appearance: 'danger',
+        onClick: removeExtension(editorAnalyticsAPI),
+        onMouseEnter: (_hoverDecoration = hoverDecoration) === null || _hoverDecoration === void 0 ? void 0 : _hoverDecoration(nodeType, true),
+        onMouseLeave: (_hoverDecoration2 = hoverDecoration) === null || _hoverDecoration2 === void 0 ? void 0 : _hoverDecoration2(nodeType, false),
+        onFocus: (_hoverDecoration3 = hoverDecoration) === null || _hoverDecoration3 === void 0 ? void 0 : _hoverDecoration3(nodeType, true),
+        onBlur: (_hoverDecoration4 = hoverDecoration) === null || _hoverDecoration4 === void 0 ? void 0 : _hoverDecoration4(nodeType, false),
+        focusEditoronEnter: true,
+        title: formatMessage(commonMessages.remove),
+        tabIndex: null,
+        confirmDialog: confirmDialog
+      }] : [{
+        type: 'separator',
+        fullHeight: true
+      }, {
+        type: 'overflow-dropdown',
+        options: [{
+          title: 'Copy',
+          onClick: function onClick() {
+            var _extensionApi$core, _extensionApi$floatin;
+            extensionApi === null || extensionApi === void 0 || (_extensionApi$core = extensionApi.core) === null || _extensionApi$core === void 0 || _extensionApi$core.actions.execute( // @ts-ignore
+            extensionApi === null || extensionApi === void 0 || (_extensionApi$floatin = extensionApi.floatingToolbar) === null || _extensionApi$floatin === void 0 ? void 0 : _extensionApi$floatin.commands.copyNode(nodeType));
+            return true;
+          },
+          icon: /*#__PURE__*/React.createElement(CopyIcon, {
+            label: "Copy"
+          })
+        }, {
+          title: 'Delete',
+          onClick: removeExtension(editorAnalyticsAPI),
+          icon: /*#__PURE__*/React.createElement(DeleteIcon, {
+            label: "Delete"
+          })
+        }]
+      }])),
+      scrollable: true
+    };
   };
 };
 var clickWithCheckboxHandler = function clickWithCheckboxHandler(isChecked, node) {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-extension",
-	"version": "5.0.3",
+	"version": "5.0.5",
 	"description": "editor-plugin-extension plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -32,7 +32,7 @@
 		"@atlaskit/button": "^21.1.0",
 		"@atlaskit/checkbox": "^17.0.0",
 		"@atlaskit/datetime-picker": "^16.1.0",
-		"@atlaskit/editor-common": "^102.3.0",
+		"@atlaskit/editor-common": "^102.4.0",
 		"@atlaskit/editor-json-transformer": "^8.24.0",
 		"@atlaskit/editor-plugin-analytics": "^2.1.0",
 		"@atlaskit/editor-plugin-context-identifier": "^2.0.0",
@@ -46,7 +46,7 @@
 		"@atlaskit/empty-state": "^9.0.0",
 		"@atlaskit/form": "^12.0.0",
 		"@atlaskit/heading": "^5.1.0",
-		"@atlaskit/icon": "^24.1.0",
+		"@atlaskit/icon": "^25.0.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/primitives": "^14.1.0",
 		"@atlaskit/radio": "^8.0.0",
@@ -58,7 +58,7 @@
 		"@atlaskit/textarea": "^8.0.0",
 		"@atlaskit/textfield": "^8.0.0",
 		"@atlaskit/theme": "^18.0.0",
-		"@atlaskit/tmp-editor-statsig": "^3.5.0",
+		"@atlaskit/tmp-editor-statsig": "^3.6.0",
 		"@atlaskit/toggle": "^15.0.0",
 		"@atlaskit/tokens": "^4.4.0",
 		"@atlaskit/tooltip": "^20.0.0",