@atlaskit/editor-plugin-extension 33.0.10 → 33.0.11

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @atlaskit/editor-plugin-extension
 
+## 33.0.11
+
+### Patch Changes
+
+- [`af6421f9b80ca`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/af6421f9b80ca) -
+  [EDITOR-9924] When `platform_editor_lovability_resize_exts_gracefully` and
+  `platform_editor_lovability_resize_exts_patch_1` are enabled, use the breakout mark for extension
+  node width across both resizing cohorts and synchronize existing layouts with breakout widths for
+  users in the resizing: false cohort.
+- Updated dependencies
+
 ## 33.0.10
 
 ### Patch Changes

package/dist/cjs/editor-commands/commands.js

@@ -14,8 +14,11 @@ var _extensionEvents = require("@atlaskit/editor-common/analytics/types/extensio
 var _referentiality = require("@atlaskit/editor-common/utils/referentiality");
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _utils = require("@atlaskit/editor-prosemirror/utils");
+var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
+var _fg = require("@atlaskit/platform-feature-flags/fg");
 var _pluginFactory = require("../pm-plugins/plugin-factory");
 var _utils2 = require("../pm-plugins/utils");
+var _getExtensionLayout = require("../utils/getExtensionLayout");
 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; }
 // AFP-2532 TODO: Fix automatic suppressions below
@@ -66,9 +69,24 @@ var updateExtensionLayout = exports.updateExtensionLayout = function updateExten
   }, function (tr, state) {
     var selectedExtension = (0, _utils2.getSelectedExtension)(state, true);
     if (selectedExtension) {
+      var marks = selectedExtension.node.marks;
+      if ((0, _fg.fg)('platform_editor_lovability_resize_exts_gracefully') && (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_lovability_resize_exts_patch_1')) {
+        var breakoutMark = marks.find(function (mark) {
+          return mark.type.name === 'breakout';
+        });
+        if (breakoutMark && (layout === 'default' || layout === 'wide' || layout === 'full-width')) {
+          // the resizing:false cohort is still using the layout presets, so updating
+          // the layout should also update the breakout mark's width, which is the source of
+          // truth for the node's width.
+          marks = breakoutMark.type.create(_objectSpread(_objectSpread({}, breakoutMark.attrs), {}, {
+            width: (0, _getExtensionLayout.getExtensionPresetWidth)(layout),
+            mode: layout === 'full-width' ? 'full-width' : 'wide'
+          })).addToSet(marks);
+        }
+      }
       var trWithNewNodeMarkup = tr.setNodeMarkup(selectedExtension.pos, undefined, _objectSpread(_objectSpread({}, selectedExtension.node.attrs), {}, {
         layout: layout
-      }));
+      }), marks);
       trWithNewNodeMarkup.setMeta('scrollIntoView', false);
       if (analyticsApi) {
         analyticsApi.attachAnalyticsEvent({

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

@@ -28,6 +28,7 @@ var _fg = require("@atlaskit/platform-feature-flags/fg");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _actions = require("../editor-actions/actions");
 var _commands = require("../editor-commands/commands");
+var _getExtensionLayout = require("../utils/getExtensionLayout");
 var _pluginKey = require("./macro/plugin-key");
 var _pluginFactory = require("./plugin-factory");
 var _utils3 = require("./utils");
@@ -74,12 +75,34 @@ var isLayoutSupported = function isLayoutSupported(state, selectedExtNode) {
   // and not inside a layoutSection
   return !!((isMultiBodiedExtension || isNonEmbeddedBodiedExtension || isNonEmbeddedExtension) && !(0, _utils2.hasParentNodeOfType)([layoutSection])(selection));
 };
+
+// if an extension node has been resized via breakout resizing,
+// the layout dropdown button should reflect the breakout resized with
+var getToolbarLayout = function getToolbarLayout(node) {
+  var layout = node.attrs.layout;
+  var isCustomWidth = false;
+  var hasBreakoutMark = node.marks.some(function (mark) {
+    return mark.type.name === 'breakout';
+  });
+  if ((0, _fg.fg)('platform_editor_lovability_resize_exts_gracefully') && (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_lovability_resize_exts_patch_1') && hasBreakoutMark) {
+    // a custom width leaves the presets unselected and uses the 'Custom width' dropdown label
+    var matchedLayout = (0, _getExtensionLayout.getExtensionLayout)(node);
+    isCustomWidth = matchedLayout === null;
+    layout = matchedLayout !== null && matchedLayout !== void 0 ? matchedLayout : layout;
+  }
+  return {
+    layout: layout,
+    isCustomWidth: isCustomWidth
+  };
+};
 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
   if (nodeWithPos && breakoutEnabled && isLayoutSupported(state, nodeWithPos) && !isNestedNBM(state, nodeWithPos)) {
-    var layout = nodeWithPos.node.attrs.layout;
+    var _getToolbarLayout = getToolbarLayout(nodeWithPos.node),
+      layout = _getToolbarLayout.layout,
+      isCustomWidth = _getToolbarLayout.isCustomWidth;
     return [{
       type: 'button',
       icon: function icon() {
@@ -90,7 +113,7 @@ var breakoutButtonListOptions = function breakoutButtonListOptions(state, format
       },
       iconFallback: _contentWidthNarrow.default,
       onClick: (0, _commands.updateExtensionLayout)('default', editorAnalyticsAPI),
-      selected: layout === 'default',
+      selected: !isCustomWidth && layout === 'default',
       title: formatMessage(_messages2.default.layoutFixedWidth),
       tabIndex: null
     }, {
@@ -103,7 +126,7 @@ var breakoutButtonListOptions = function breakoutButtonListOptions(state, format
       },
       iconFallback: _contentWidthWide.default,
       onClick: (0, _commands.updateExtensionLayout)('wide', editorAnalyticsAPI),
-      selected: layout === 'wide',
+      selected: !isCustomWidth && layout === 'wide',
       title: formatMessage(_messages2.default.layoutWide),
       tabIndex: null
     }, {
@@ -116,7 +139,7 @@ var breakoutButtonListOptions = function breakoutButtonListOptions(state, format
       },
       iconFallback: _expandHorizontal.default,
       onClick: (0, _commands.updateExtensionLayout)('full-width', editorAnalyticsAPI),
-      selected: layout === 'full-width',
+      selected: !isCustomWidth && layout === 'full-width',
       title: formatMessage(_messages2.default.layoutFullWidth),
       tabIndex: null
     }];
@@ -130,29 +153,37 @@ var breakoutDropdownOptions = function breakoutDropdownOptions(state, formatMess
   if (!nodeWithPos || !breakoutEnabled || !isLayoutSupported(state, nodeWithPos) || isNestedNBM(state, nodeWithPos)) {
     return [];
   }
-  var layout = nodeWithPos.node.attrs.layout;
+  var _getToolbarLayout2 = getToolbarLayout(nodeWithPos.node),
+    layout = _getToolbarLayout2.layout,
+    isCustomWidth = _getToolbarLayout2.isCustomWidth;
   var title = '';
   var IconComponent;
-  switch (layout) {
-    case 'wide':
-      title = formatMessage(_messages2.default.layoutStateWide);
-      IconComponent = _contentWidthWide.default;
-      break;
-    case 'full-width':
-      title = formatMessage(_messages2.default.layoutStateFullWidth);
-      IconComponent = _expandHorizontal.default;
-      break;
-    case 'default':
-    default:
-      title = formatMessage(_messages2.default.layoutStateFixedWidth);
-      IconComponent = _contentWidthNarrow.default;
-      break;
+  // the 'Custom width' option is a label only, the dropdown items are unchanged
+  if (isCustomWidth) {
+    title = formatMessage(_messages.messages.customWidth);
+    IconComponent = _expandHorizontal.default;
+  } else {
+    switch (layout) {
+      case 'wide':
+        title = formatMessage(_messages2.default.layoutStateWide);
+        IconComponent = _contentWidthWide.default;
+        break;
+      case 'full-width':
+        title = formatMessage(_messages2.default.layoutStateFullWidth);
+        IconComponent = _expandHorizontal.default;
+        break;
+      case 'default':
+      default:
+        title = formatMessage(_messages2.default.layoutStateFixedWidth);
+        IconComponent = _contentWidthNarrow.default;
+        break;
+    }
   }
   var options = [{
     id: 'editor.extensions.width.default',
     title: formatMessage(_messages2.default.layoutFixedWidth),
     onClick: (0, _commands.updateExtensionLayout)('default', editorAnalyticsAPI),
-    selected: layout === 'default',
+    selected: !isCustomWidth && layout === 'default',
     icon: /*#__PURE__*/_react.default.createElement(_contentWidthNarrow.default, {
       color: "currentColor",
       spacing: "spacious",
@@ -162,7 +193,7 @@ var breakoutDropdownOptions = function breakoutDropdownOptions(state, formatMess
     id: 'editor.extensions.width.wide',
     title: formatMessage(_messages2.default.layoutWide),
     onClick: (0, _commands.updateExtensionLayout)('wide', editorAnalyticsAPI),
-    selected: layout === 'wide',
+    selected: !isCustomWidth && layout === 'wide',
     icon: /*#__PURE__*/_react.default.createElement(_contentWidthWide.default, {
       color: "currentColor",
       spacing: "spacious",
@@ -172,7 +203,7 @@ var breakoutDropdownOptions = function breakoutDropdownOptions(state, formatMess
     id: 'editor.extensions.width.full-width',
     title: formatMessage(_messages2.default.layoutFullWidth),
     onClick: (0, _commands.updateExtensionLayout)('full-width', editorAnalyticsAPI),
-    selected: layout === 'full-width',
+    selected: !isCustomWidth && layout === 'full-width',
     icon: /*#__PURE__*/_react.default.createElement(_expandHorizontal.default, {
       color: "currentColor",
       spacing: "spacious",

package/dist/cjs/utils/getExtensionLayout.js

@@ -0,0 +1,41 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getExtensionPresetWidth = exports.getExtensionLayout = void 0;
+var _getBreakoutWidth = require("@atlaskit/editor-common/extensibility/get-breakout-width");
+var _constants = require("@atlaskit/editor-shared-styles/constants");
+var extensionPresetWidths = {
+  default: _constants.akEditorDefaultLayoutWidth,
+  wide: _constants.akEditorCalculatedWideLayoutWidth,
+  'full-width': _constants.akEditorFullWidthLayoutWidth
+};
+var getExtensionPresetWidth = exports.getExtensionPresetWidth = function getExtensionPresetWidth(layout) {
+  return extensionPresetWidths[layout];
+};
+
+/**
+ * getExtensionLayout tries to match the breakout mark's width (if any) to an extension layout preset.
+ * @returns the layout preset if the breakout width matches, null if there is no match, or
+ * the node's layout attribute if there is no breakout width.
+ */
+var getExtensionLayout = exports.getExtensionLayout = function getExtensionLayout(node) {
+  var _node$attrs$layout = node.attrs.layout,
+    layout = _node$attrs$layout === void 0 ? 'default' : _node$attrs$layout;
+  var breakoutWidth = (0, _getBreakoutWidth.getBreakoutWidth)(node.marks);
+  if (breakoutWidth !== undefined) {
+    if (breakoutWidth === extensionPresetWidths.default) {
+      return 'default';
+    }
+    if (breakoutWidth === extensionPresetWidths.wide) {
+      return 'wide';
+    }
+    if (breakoutWidth === extensionPresetWidths['full-width']) {
+      return 'full-width';
+    }
+    return null;
+  }
+  // if there is no breakout width, return the node's layout attribute
+  return layout;
+};

package/dist/es2019/editor-commands/commands.js

@@ -3,8 +3,11 @@ import { TARGET_SELECTION_SOURCE } from '@atlaskit/editor-common/analytics/types
 import { removeConnectedNodes } from '@atlaskit/editor-common/utils/referentiality';
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import { findParentNodeOfType, removeParentNodeOfType, removeSelectedNode } from '@atlaskit/editor-prosemirror/utils';
+import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
+import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { createCommand } from '../pm-plugins/plugin-factory';
 import { getSelectedExtension } from '../pm-plugins/utils';
+import { getExtensionPresetWidth } from '../utils/getExtensionLayout';
 
 // AFP-2532 TODO: Fix automatic suppressions below
 
@@ -47,10 +50,24 @@ export const updateExtensionLayout = (layout, analyticsApi) => createCommand({
 }, (tr, state) => {
   const selectedExtension = getSelectedExtension(state, true);
   if (selectedExtension) {
+    let marks = selectedExtension.node.marks;
+    if (fg('platform_editor_lovability_resize_exts_gracefully') && isExperimentEnabled('platform_editor_lovability_resize_exts_patch_1')) {
+      const breakoutMark = marks.find(mark => mark.type.name === 'breakout');
+      if (breakoutMark && (layout === 'default' || layout === 'wide' || layout === 'full-width')) {
+        // the resizing:false cohort is still using the layout presets, so updating
+        // the layout should also update the breakout mark's width, which is the source of
+        // truth for the node's width.
+        marks = breakoutMark.type.create({
+          ...breakoutMark.attrs,
+          width: getExtensionPresetWidth(layout),
+          mode: layout === 'full-width' ? 'full-width' : 'wide'
+        }).addToSet(marks);
+      }
+    }
     const trWithNewNodeMarkup = tr.setNodeMarkup(selectedExtension.pos, undefined, {
       ...selectedExtension.node.attrs,
       layout
-    });
+    }, marks);
     trWithNewNodeMarkup.setMeta('scrollIntoView', false);
     if (analyticsApi) {
       analyticsApi.attachAnalyticsEvent({

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

@@ -19,6 +19,7 @@ import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editExtension } from '../editor-actions/actions';
 import { removeDescendantNodes, removeExtension, updateExtensionLayout } from '../editor-commands/commands';
+import { getExtensionLayout } from '../utils/getExtensionLayout';
 import { pluginKey as macroPluginKey } from './macro/plugin-key';
 import { getPluginState } from './plugin-factory';
 import { copyUnsupportedContentToClipboard, getSelectedExtension, onCopyFailed } from './utils';
@@ -75,14 +76,35 @@ const isLayoutSupported = (state, selectedExtNode) => {
   // and not inside a layoutSection
   return !!((isMultiBodiedExtension || isNonEmbeddedBodiedExtension || isNonEmbeddedExtension) && !hasParentNodeOfType([layoutSection])(selection));
 };
+
+// if an extension node has been resized via breakout resizing,
+// the layout dropdown button should reflect the breakout resized with
+const getToolbarLayout = node => {
+  let {
+    layout
+  } = node.attrs;
+  let isCustomWidth = false;
+  const hasBreakoutMark = node.marks.some(mark => mark.type.name === 'breakout');
+  if (fg('platform_editor_lovability_resize_exts_gracefully') && isExperimentEnabled('platform_editor_lovability_resize_exts_patch_1') && hasBreakoutMark) {
+    // a custom width leaves the presets unselected and uses the 'Custom width' dropdown label
+    const matchedLayout = getExtensionLayout(node);
+    isCustomWidth = matchedLayout === null;
+    layout = matchedLayout !== null && matchedLayout !== void 0 ? matchedLayout : layout;
+  }
+  return {
+    layout,
+    isCustomWidth
+  };
+};
 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
   if (nodeWithPos && breakoutEnabled && isLayoutSupported(state, nodeWithPos) && !isNestedNBM(state, nodeWithPos)) {
     const {
-      layout
-    } = nodeWithPos.node.attrs;
+      layout,
+      isCustomWidth
+    } = getToolbarLayout(nodeWithPos.node);
     return [{
       type: 'button',
       icon: () => /*#__PURE__*/React.createElement(ContentWidthNarrowIcon, {
@@ -91,7 +113,7 @@ const breakoutButtonListOptions = (state, formatMessage, extensionState, breakou
       }),
       iconFallback: ContentWidthNarrowIcon,
       onClick: updateExtensionLayout('default', editorAnalyticsAPI),
-      selected: layout === 'default',
+      selected: !isCustomWidth && layout === 'default',
       title: formatMessage(commonMessages.layoutFixedWidth),
       tabIndex: null
     }, {
@@ -102,7 +124,7 @@ const breakoutButtonListOptions = (state, formatMessage, extensionState, breakou
       }),
       iconFallback: ContentWidthWideIcon,
       onClick: updateExtensionLayout('wide', editorAnalyticsAPI),
-      selected: layout === 'wide',
+      selected: !isCustomWidth && layout === 'wide',
       title: formatMessage(commonMessages.layoutWide),
       tabIndex: null
     }, {
@@ -113,7 +135,7 @@ const breakoutButtonListOptions = (state, formatMessage, extensionState, breakou
       }),
       iconFallback: ExpandHorizontalIcon,
       onClick: updateExtensionLayout('full-width', editorAnalyticsAPI),
-      selected: layout === 'full-width',
+      selected: !isCustomWidth && layout === 'full-width',
       title: formatMessage(commonMessages.layoutFullWidth),
       tabIndex: null
     }];
@@ -128,30 +150,37 @@ const breakoutDropdownOptions = (state, formatMessage, breakoutEnabled, editorAn
     return [];
   }
   const {
-    layout
-  } = nodeWithPos.node.attrs;
+    layout,
+    isCustomWidth
+  } = getToolbarLayout(nodeWithPos.node);
   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;
+  // the 'Custom width' option is a label only, the dropdown items are unchanged
+  if (isCustomWidth) {
+    title = formatMessage(messages.customWidth);
+    IconComponent = ExpandHorizontalIcon;
+  } else {
+    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',
+    selected: !isCustomWidth && layout === 'default',
     icon: /*#__PURE__*/React.createElement(ContentWidthNarrowIcon, {
       color: "currentColor",
       spacing: "spacious",
@@ -161,7 +190,7 @@ const breakoutDropdownOptions = (state, formatMessage, breakoutEnabled, editorAn
     id: 'editor.extensions.width.wide',
     title: formatMessage(commonMessages.layoutWide),
     onClick: updateExtensionLayout('wide', editorAnalyticsAPI),
-    selected: layout === 'wide',
+    selected: !isCustomWidth && layout === 'wide',
     icon: /*#__PURE__*/React.createElement(ContentWidthWideIcon, {
       color: "currentColor",
       spacing: "spacious",
@@ -171,7 +200,7 @@ const breakoutDropdownOptions = (state, formatMessage, breakoutEnabled, editorAn
     id: 'editor.extensions.width.full-width',
     title: formatMessage(commonMessages.layoutFullWidth),
     onClick: updateExtensionLayout('full-width', editorAnalyticsAPI),
-    selected: layout === 'full-width',
+    selected: !isCustomWidth && layout === 'full-width',
     icon: /*#__PURE__*/React.createElement(ExpandHorizontalIcon, {
       color: "currentColor",
       spacing: "spacious",

package/dist/es2019/utils/getExtensionLayout.js

@@ -0,0 +1,34 @@
+import { getBreakoutWidth } from '@atlaskit/editor-common/extensibility/get-breakout-width';
+import { akEditorCalculatedWideLayoutWidth, akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth } from '@atlaskit/editor-shared-styles/constants';
+const extensionPresetWidths = {
+  default: akEditorDefaultLayoutWidth,
+  wide: akEditorCalculatedWideLayoutWidth,
+  'full-width': akEditorFullWidthLayoutWidth
+};
+export const getExtensionPresetWidth = layout => extensionPresetWidths[layout];
+
+/**
+ * getExtensionLayout tries to match the breakout mark's width (if any) to an extension layout preset.
+ * @returns the layout preset if the breakout width matches, null if there is no match, or
+ * the node's layout attribute if there is no breakout width.
+ */
+export const getExtensionLayout = node => {
+  const {
+    layout = 'default'
+  } = node.attrs;
+  const breakoutWidth = getBreakoutWidth(node.marks);
+  if (breakoutWidth !== undefined) {
+    if (breakoutWidth === extensionPresetWidths.default) {
+      return 'default';
+    }
+    if (breakoutWidth === extensionPresetWidths.wide) {
+      return 'wide';
+    }
+    if (breakoutWidth === extensionPresetWidths['full-width']) {
+      return 'full-width';
+    }
+    return null;
+  }
+  // if there is no breakout width, return the node's layout attribute
+  return layout;
+};

package/dist/esm/editor-commands/commands.js

@@ -6,8 +6,11 @@ import { TARGET_SELECTION_SOURCE } from '@atlaskit/editor-common/analytics/types
 import { removeConnectedNodes } from '@atlaskit/editor-common/utils/referentiality';
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import { findParentNodeOfType, removeParentNodeOfType, removeSelectedNode } from '@atlaskit/editor-prosemirror/utils';
+import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
+import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { createCommand } from '../pm-plugins/plugin-factory';
 import { getSelectedExtension } from '../pm-plugins/utils';
+import { getExtensionPresetWidth } from '../utils/getExtensionLayout';
 
 // AFP-2532 TODO: Fix automatic suppressions below
 
@@ -57,9 +60,24 @@ export var updateExtensionLayout = function updateExtensionLayout(layout, analyt
   }, function (tr, state) {
     var selectedExtension = getSelectedExtension(state, true);
     if (selectedExtension) {
+      var marks = selectedExtension.node.marks;
+      if (fg('platform_editor_lovability_resize_exts_gracefully') && isExperimentEnabled('platform_editor_lovability_resize_exts_patch_1')) {
+        var breakoutMark = marks.find(function (mark) {
+          return mark.type.name === 'breakout';
+        });
+        if (breakoutMark && (layout === 'default' || layout === 'wide' || layout === 'full-width')) {
+          // the resizing:false cohort is still using the layout presets, so updating
+          // the layout should also update the breakout mark's width, which is the source of
+          // truth for the node's width.
+          marks = breakoutMark.type.create(_objectSpread(_objectSpread({}, breakoutMark.attrs), {}, {
+            width: getExtensionPresetWidth(layout),
+            mode: layout === 'full-width' ? 'full-width' : 'wide'
+          })).addToSet(marks);
+        }
+      }
       var trWithNewNodeMarkup = tr.setNodeMarkup(selectedExtension.pos, undefined, _objectSpread(_objectSpread({}, selectedExtension.node.attrs), {}, {
         layout: layout
-      }));
+      }), marks);
       trWithNewNodeMarkup.setMeta('scrollIntoView', false);
       if (analyticsApi) {
         analyticsApi.attachAnalyticsEvent({

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

@@ -23,6 +23,7 @@ import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editExtension } from '../editor-actions/actions';
 import { removeDescendantNodes, removeExtension, updateExtensionLayout } from '../editor-commands/commands';
+import { getExtensionLayout } from '../utils/getExtensionLayout';
 import { pluginKey as macroPluginKey } from './macro/plugin-key';
 import { getPluginState } from './plugin-factory';
 import { copyUnsupportedContentToClipboard, getSelectedExtension, onCopyFailed } from './utils';
@@ -68,12 +69,34 @@ var isLayoutSupported = function isLayoutSupported(state, selectedExtNode) {
   // and not inside a layoutSection
   return !!((isMultiBodiedExtension || isNonEmbeddedBodiedExtension || isNonEmbeddedExtension) && !hasParentNodeOfType([layoutSection])(selection));
 };
+
+// if an extension node has been resized via breakout resizing,
+// the layout dropdown button should reflect the breakout resized with
+var getToolbarLayout = function getToolbarLayout(node) {
+  var layout = node.attrs.layout;
+  var isCustomWidth = false;
+  var hasBreakoutMark = node.marks.some(function (mark) {
+    return mark.type.name === 'breakout';
+  });
+  if (fg('platform_editor_lovability_resize_exts_gracefully') && isExperimentEnabled('platform_editor_lovability_resize_exts_patch_1') && hasBreakoutMark) {
+    // a custom width leaves the presets unselected and uses the 'Custom width' dropdown label
+    var matchedLayout = getExtensionLayout(node);
+    isCustomWidth = matchedLayout === null;
+    layout = matchedLayout !== null && matchedLayout !== void 0 ? matchedLayout : layout;
+  }
+  return {
+    layout: layout,
+    isCustomWidth: isCustomWidth
+  };
+};
 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
   if (nodeWithPos && breakoutEnabled && isLayoutSupported(state, nodeWithPos) && !isNestedNBM(state, nodeWithPos)) {
-    var layout = nodeWithPos.node.attrs.layout;
+    var _getToolbarLayout = getToolbarLayout(nodeWithPos.node),
+      layout = _getToolbarLayout.layout,
+      isCustomWidth = _getToolbarLayout.isCustomWidth;
     return [{
       type: 'button',
       icon: function icon() {
@@ -84,7 +107,7 @@ var breakoutButtonListOptions = function breakoutButtonListOptions(state, format
       },
       iconFallback: ContentWidthNarrowIcon,
       onClick: updateExtensionLayout('default', editorAnalyticsAPI),
-      selected: layout === 'default',
+      selected: !isCustomWidth && layout === 'default',
       title: formatMessage(commonMessages.layoutFixedWidth),
       tabIndex: null
     }, {
@@ -97,7 +120,7 @@ var breakoutButtonListOptions = function breakoutButtonListOptions(state, format
       },
       iconFallback: ContentWidthWideIcon,
       onClick: updateExtensionLayout('wide', editorAnalyticsAPI),
-      selected: layout === 'wide',
+      selected: !isCustomWidth && layout === 'wide',
       title: formatMessage(commonMessages.layoutWide),
       tabIndex: null
     }, {
@@ -110,7 +133,7 @@ var breakoutButtonListOptions = function breakoutButtonListOptions(state, format
       },
       iconFallback: ExpandHorizontalIcon,
       onClick: updateExtensionLayout('full-width', editorAnalyticsAPI),
-      selected: layout === 'full-width',
+      selected: !isCustomWidth && layout === 'full-width',
       title: formatMessage(commonMessages.layoutFullWidth),
       tabIndex: null
     }];
@@ -124,29 +147,37 @@ var breakoutDropdownOptions = function breakoutDropdownOptions(state, formatMess
   if (!nodeWithPos || !breakoutEnabled || !isLayoutSupported(state, nodeWithPos) || isNestedNBM(state, nodeWithPos)) {
     return [];
   }
-  var layout = nodeWithPos.node.attrs.layout;
+  var _getToolbarLayout2 = getToolbarLayout(nodeWithPos.node),
+    layout = _getToolbarLayout2.layout,
+    isCustomWidth = _getToolbarLayout2.isCustomWidth;
   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;
+  // the 'Custom width' option is a label only, the dropdown items are unchanged
+  if (isCustomWidth) {
+    title = formatMessage(messages.customWidth);
+    IconComponent = ExpandHorizontalIcon;
+  } else {
+    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',
+    selected: !isCustomWidth && layout === 'default',
     icon: /*#__PURE__*/React.createElement(ContentWidthNarrowIcon, {
       color: "currentColor",
       spacing: "spacious",
@@ -156,7 +187,7 @@ var breakoutDropdownOptions = function breakoutDropdownOptions(state, formatMess
     id: 'editor.extensions.width.wide',
     title: formatMessage(commonMessages.layoutWide),
     onClick: updateExtensionLayout('wide', editorAnalyticsAPI),
-    selected: layout === 'wide',
+    selected: !isCustomWidth && layout === 'wide',
     icon: /*#__PURE__*/React.createElement(ContentWidthWideIcon, {
       color: "currentColor",
       spacing: "spacious",
@@ -166,7 +197,7 @@ var breakoutDropdownOptions = function breakoutDropdownOptions(state, formatMess
     id: 'editor.extensions.width.full-width',
     title: formatMessage(commonMessages.layoutFullWidth),
     onClick: updateExtensionLayout('full-width', editorAnalyticsAPI),
-    selected: layout === 'full-width',
+    selected: !isCustomWidth && layout === 'full-width',
     icon: /*#__PURE__*/React.createElement(ExpandHorizontalIcon, {
       color: "currentColor",
       spacing: "spacious",

package/dist/esm/utils/getExtensionLayout.js

@@ -0,0 +1,35 @@
+import { getBreakoutWidth } from '@atlaskit/editor-common/extensibility/get-breakout-width';
+import { akEditorCalculatedWideLayoutWidth, akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth } from '@atlaskit/editor-shared-styles/constants';
+var extensionPresetWidths = {
+  default: akEditorDefaultLayoutWidth,
+  wide: akEditorCalculatedWideLayoutWidth,
+  'full-width': akEditorFullWidthLayoutWidth
+};
+export var getExtensionPresetWidth = function getExtensionPresetWidth(layout) {
+  return extensionPresetWidths[layout];
+};
+
+/**
+ * getExtensionLayout tries to match the breakout mark's width (if any) to an extension layout preset.
+ * @returns the layout preset if the breakout width matches, null if there is no match, or
+ * the node's layout attribute if there is no breakout width.
+ */
+export var getExtensionLayout = function getExtensionLayout(node) {
+  var _node$attrs$layout = node.attrs.layout,
+    layout = _node$attrs$layout === void 0 ? 'default' : _node$attrs$layout;
+  var breakoutWidth = getBreakoutWidth(node.marks);
+  if (breakoutWidth !== undefined) {
+    if (breakoutWidth === extensionPresetWidths.default) {
+      return 'default';
+    }
+    if (breakoutWidth === extensionPresetWidths.wide) {
+      return 'wide';
+    }
+    if (breakoutWidth === extensionPresetWidths['full-width']) {
+      return 'full-width';
+    }
+    return null;
+  }
+  // if there is no breakout width, return the node's layout attribute
+  return layout;
+};

package/dist/types/utils/getExtensionLayout.d.ts

@@ -0,0 +1,9 @@
+import type { Layout } from '@atlaskit/adf-schema/extensions';
+import type { Node } from '@atlaskit/editor-prosemirror/model';
+export declare const getExtensionPresetWidth: (layout: 'default' | 'wide' | 'full-width') => number;
+/**
+ * getExtensionLayout tries to match the breakout mark's width (if any) to an extension layout preset.
+ * @returns the layout preset if the breakout width matches, null if there is no match, or
+ * the node's layout attribute if there is no breakout width.
+ */
+export declare const getExtensionLayout: (node: Node) => Layout | null;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-extension",
-	"version": "33.0.10",
+	"version": "33.0.11",
 	"description": "editor-plugin-extension plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -29,7 +29,7 @@
 		"@atlaskit/adf-schema": "^57.7.0",
 		"@atlaskit/adf-utils": "^20.9.0",
 		"@atlaskit/analytics-next": "^12.6.0",
-		"@atlaskit/avatar": "^30.0.0",
+		"@atlaskit/avatar": "^30.1.0",
 		"@atlaskit/browser-apis": "^1.2.0",
 		"@atlaskit/button": "^25.7.0",
 		"@atlaskit/checkbox": "^19.3.0",
@@ -85,12 +85,12 @@
 		"uuid": "^11.1.1"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^134.7.0",
+		"@atlaskit/editor-common": "^134.8.0",
 		"react": "^18.2.0 || ^19.2.0",
 		"react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"
 	},
 	"devDependencies": {
-		"@atlaskit/editor-common": "^134.7.0",
+		"@atlaskit/editor-common": "^134.8.0",
 		"@atlassian/structured-docs-types": "workspace:^",
 		"@atlassian/workbench": "workspace:*",
 		"react": "^19.2.0",