@atlaskit/editor-plugin-breakout 14.0.3 → 14.0.4

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @atlaskit/editor-plugin-breakout
 
+## 14.0.4
+
+### Patch Changes
+
+- [`0cdf73fdf7d3e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/0cdf73fdf7d3e) -
+  [ux] [EDITOR-8273] add breakout resizing to extension nodes behind
+  `platform_editor_lovability_resize_extensions` with graceful rendering behind
+  `platform_editor_lovability_resize_ext_gracefully`
+- Updated dependencies
+
 ## 14.0.3
 
 ### Patch Changes

package/dist/cjs/breakoutPlugin.js

@@ -198,7 +198,7 @@ var breakoutPlugin = exports.breakoutPlugin = function breakoutPlugin(_ref4) {
           plugin: function plugin(_ref5) {
             var getIntl = _ref5.getIntl,
               nodeViewPortalProviderAPI = _ref5.nodeViewPortalProviderAPI;
-            return (0, _resizingPlugin.createResizingPlugin)(api, getIntl, nodeViewPortalProviderAPI, options, (0, _expValEquals.expValEquals)('platform_editor_lovability_resize_dividers_panels', 'isEnabled', true));
+            return (0, _resizingPlugin.createResizingPlugin)(api, getIntl, nodeViewPortalProviderAPI, options);
           }
         }];
       }

package/dist/cjs/editor-commands/set-breakout-mode.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.setBreakoutMode = setBreakoutMode;
 var _codeBlock = require("@atlaskit/editor-common/code-block");
 var _state = require("@atlaskit/editor-prosemirror/state");
+var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
 var _findBreakoutNode = require("../pm-plugins/utils/find-breakout-node");
 var _singlePlayerExpand = require("../pm-plugins/utils/single-player-expand");
 function setBreakoutMode(mode, isLivePage) {
@@ -14,9 +15,17 @@ function setBreakoutMode(mode, isLivePage) {
     if (!node) {
       return false;
     }
-    var tr = state.tr.setNodeMarkup(node.pos, node.node.type, node.node.attrs, [state.schema.marks.breakout.create({
-      mode: mode
-    })]);
+    var tr;
+    if ((0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_lovability_resize_extensions')) {
+      var marks = state.schema.marks.breakout.create({
+        mode: mode
+      }).addToSet(node.node.marks);
+      tr = state.tr.setNodeMarkup(node.pos, node.node.type, node.node.attrs, marks);
+    } else {
+      tr = state.tr.setNodeMarkup(node.pos, node.node.type, node.node.attrs, [state.schema.marks.breakout.create({
+        mode: mode
+      })]);
+    }
     if (node.node.type === state.schema.nodes.expand) {
       (0, _singlePlayerExpand.updateExpandedState)(tr, node, isLivePage);
     } else if (node.node.type === state.schema.nodes.codeBlock) {

package/dist/cjs/editor-commands/set-breakout-width.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.setBreakoutWidth = setBreakoutWidth;
 var _codeBlock = require("@atlaskit/editor-common/code-block");
 var _state = require("@atlaskit/editor-prosemirror/state");
+var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
 var _singlePlayerExpand = require("../pm-plugins/utils/single-player-expand");
 function setBreakoutWidth(width, mode, pos, isLivePage) {
   return function (state, dispatch) {
@@ -13,10 +14,19 @@ function setBreakoutWidth(width, mode, pos, isLivePage) {
     if (!node) {
       return false;
     }
-    var tr = state.tr.setNodeMarkup(pos, node.type, node.attrs, [state.schema.marks.breakout.create({
-      width: width,
-      mode: mode
-    })]);
+    var tr;
+    if ((0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_lovability_resize_extensions')) {
+      var marks = state.schema.marks.breakout.create({
+        width: width,
+        mode: mode
+      }).addToSet(node.marks);
+      tr = state.tr.setNodeMarkup(pos, node.type, node.attrs, marks);
+    } else {
+      tr = state.tr.setNodeMarkup(pos, node.type, node.attrs, [state.schema.marks.breakout.create({
+        width: width,
+        mode: mode
+      })]);
+    }
     if (node.type === state.schema.nodes.expand) {
       (0, _singlePlayerExpand.updateExpandedStateNew)({
         tr: tr,

package/dist/cjs/pm-plugins/handle-key-down.js

@@ -8,6 +8,7 @@ var _browser = require("@atlaskit/editor-common/browser");
 var _utils = require("@atlaskit/editor-common/utils");
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _setBreakoutWidth = require("../editor-commands/set-breakout-width");
@@ -59,7 +60,12 @@ var handleKeyDown = exports.handleKeyDown = function handleKeyDown(api) {
         rule = _view$state$schema$no.rule,
         panel = _view$state$schema$no.panel,
         panel_c1 = _view$state$schema$no.panel_c1;
-      var breakoutResizableNodes = (0, _experiments.editorExperiment)('platform_synced_block', true) ? (0, _utils.getBreakoutResizableNodeTypes)(view.state.schema, (0, _expValEquals.expValEquals)('platform_editor_lovability_resize_dividers_panels', 'isEnabled', true)) : (0, _expValEquals.expValEquals)('platform_editor_lovability_resize_dividers_panels', 'isEnabled', true) ? new Set([expand, codeBlock, layoutSection, rule, panel, panel_c1]) : new Set([expand, codeBlock, layoutSection]);
+      var breakoutResizableNodes = new Set();
+      if ((0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_lovability_resize_extensions')) {
+        breakoutResizableNodes = (0, _utils.getBreakoutResizableNodeTypesNew)(view.state.schema);
+      } else {
+        breakoutResizableNodes = (0, _experiments.editorExperiment)('platform_synced_block', true) ? (0, _utils.getBreakoutResizableNodeTypes)(view.state.schema, (0, _expValEquals.expValEquals)('platform_editor_lovability_resize_dividers_panels', 'isEnabled', true)) : (0, _expValEquals.expValEquals)('platform_editor_lovability_resize_dividers_panels', 'isEnabled', true) ? new Set([expand, codeBlock, layoutSection, rule, panel, panel_c1]) : new Set([expand, codeBlock, layoutSection]);
+      }
       var result = getAncestorResizableNode(view, breakoutResizableNodes);
       if (result) {
         var node = result.node,

package/dist/cjs/pm-plugins/pragmatic-resizer.js

@@ -12,6 +12,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _bindEventListener = require("bind-event-listener");
 var _v = _interopRequireDefault(require("uuid/v4"));
 var _messages = require("@atlaskit/editor-common/messages");
+var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
 var _adapter = require("@atlaskit/pragmatic-drag-and-drop/element/adapter");
 var _disableNativeDragPreview = require("@atlaskit/pragmatic-drag-and-drop/element/disable-native-drag-preview");
 var _preventUnhandled = require("@atlaskit/pragmatic-drag-and-drop/prevent-unhandled");
@@ -28,6 +29,8 @@ var getNodeName = function getNodeName(nodeName) {
     return nodeName;
   } else if ((nodeName === 'rule' || nodeName === 'panel' || nodeName === 'panel_c1') && (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_lovability_resize_dividers_panels', 'isEnabled', true)) {
     return nodeName;
+  } else if ((nodeName === 'extension' || nodeName === 'bodiedExtension' || nodeName === 'multiBodiedExtension') && (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_lovability_resize_extensions')) {
+    return nodeName;
   } else {
     return 'node';
   }
@@ -39,7 +42,10 @@ var resizeHandleMessage = exports.resizeHandleMessage = {
   rule: _messages.breakoutMessages.resizeRule,
   panel: _messages.breakoutMessages.resizePanel,
   panel_c1: _messages.breakoutMessages.resizePanel,
-  node: _messages.breakoutMessages.resizeElement
+  node: _messages.breakoutMessages.resizeElement,
+  extension: _messages.breakoutMessages.resizeExtension,
+  bodiedExtension: _messages.breakoutMessages.resizeExtension,
+  multiBodiedExtension: _messages.breakoutMessages.resizeExtension
 };
 var RailWithTooltip = function RailWithTooltip(_ref) {
   var rail = _ref.rail,
@@ -75,7 +81,7 @@ var createPragmaticResizer = exports.createPragmaticResizer = function createPra
     intl = _ref2.intl,
     nodeViewPortalProviderAPI = _ref2.nodeViewPortalProviderAPI;
   var state = 'default';
-  var isLeftResizeHandleDisabled = (0, _expValEquals.expValEquals)('platform_editor_lovability_resize_dividers_panels', 'isEnabled', true);
+  var isLeftResizeHandleDisabled = (0, _expValEquals.expValEquals)('platform_editor_lovability_resize_dividers_panels', 'isEnabled', true) || (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_lovability_resize_extensions');
   var createHandle = function createHandle(side) {
     var handle = document.createElement('div');
     handle.contentEditable = 'false';

package/dist/cjs/pm-plugins/resizing-mark-view.js

@@ -9,6 +9,7 @@ var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/cl
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _styles = require("@atlaskit/editor-common/styles");
+var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _pragmaticResizer = require("./pragmatic-resizer");
@@ -59,7 +60,8 @@ var ResizingMarkView = exports.ResizingMarkView = /*#__PURE__*/function () {
     dom.className = _styles.BreakoutCssClassName.BREAKOUT_MARK;
     dom.setAttribute('data-layout', mark.attrs.mode);
     dom.setAttribute('data-testid', 'ak-editor-breakout-mark');
-    var isResizingExperimentEnabled = (0, _expValEquals.expValEquals)('platform_editor_lovability_resize_dividers_panels', 'isEnabled', true);
+    var isResizingDividersPanelsEnabled = (0, _expValEquals.expValEquals)('platform_editor_lovability_resize_dividers_panels', 'isEnabled', true);
+    var isResizingExtensionsEnabled = (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_lovability_resize_extensions');
 
     // DOM styles
     // Keep a three-column grid even when the left resize handle is disabled. The empty
@@ -73,11 +75,11 @@ var ResizingMarkView = exports.ResizingMarkView = /*#__PURE__*/function () {
     contentDOM.style.gridColumn = '2';
     contentDOM.style.zIndex = '1';
     if (mark.attrs.width) {
-      dom.style.gridTemplateColumns = isResizingExperimentEnabled ? // new code - phantom left track + content + right handle
+      dom.style.gridTemplateColumns = isResizingDividersPanelsEnabled || isResizingExtensionsEnabled ? // new code - phantom left track + content + right handle
       "".concat(RESIZE_HANDLE_TRACK_WIDTH, " max(var(--ak-editor--breakout-min-width), min(var(").concat(LOCAL_RESIZE_PROPERTY, ", ").concat(mark.attrs.width, "px), var(--ak-editor--breakout-fallback-width))) ").concat(RESIZE_HANDLE_TRACK_WIDTH) : // old code - left handle + content + right handle
       "auto max(var(--ak-editor--breakout-min-width), min(var(".concat(LOCAL_RESIZE_PROPERTY, ", ").concat(mark.attrs.width, "px), var(--ak-editor--breakout-fallback-width))) auto");
     } else {
-      if (isResizingExperimentEnabled) {
+      if (isResizingDividersPanelsEnabled || isResizingExtensionsEnabled) {
         dom.style.gridTemplateColumns = "".concat(RESIZE_HANDLE_TRACK_WIDTH, " auto ").concat(RESIZE_HANDLE_TRACK_WIDTH);
       }
       if (mark.attrs.mode === 'wide') {
@@ -96,13 +98,13 @@ var ResizingMarkView = exports.ResizingMarkView = /*#__PURE__*/function () {
     this.nodeViewPortalProviderAPI = nodeViewPortalProviderAPI;
     var isLiveViewMode = (api === null || api === void 0 || (_api$editorViewMode = api.editorViewMode) === null || _api$editorViewMode === void 0 || (_api$editorViewMode = _api$editorViewMode.sharedState.currentState()) === null || _api$editorViewMode === void 0 ? void 0 : _api$editorViewMode.mode) === 'view';
     if (!isLiveViewMode) {
-      (0, _platformFeatureFlags.fg)('platform_editor_lovability_resize_gracefully') ? this.setupResizerCallbacksIfSupported(dom, contentDOM, view, mark, isResizingExperimentEnabled, api) : this.setupResizerCallbacks(dom, contentDOM, view, mark, api);
+      (0, _platformFeatureFlags.fg)('platform_editor_lovability_resize_gracefully') || (0, _platformFeatureFlags.fg)('platform_editor_lovability_resize_ext_gracefully') ? this.setupResizerCallbacksIfSupported(dom, contentDOM, view, mark, isResizingDividersPanelsEnabled, isResizingExtensionsEnabled, api) : this.setupResizerCallbacks(dom, contentDOM, view, mark, api);
     }
     this.unsubscribeToViewModeChange = api === null || api === void 0 || (_api$editorViewMode2 = api.editorViewMode) === null || _api$editorViewMode2 === void 0 ? void 0 : _api$editorViewMode2.sharedState.onChange(function (sharedState) {
       var _sharedState$nextShar, _sharedState$prevShar;
       if (((_sharedState$nextShar = sharedState.nextSharedState) === null || _sharedState$nextShar === void 0 ? void 0 : _sharedState$nextShar.mode) !== ((_sharedState$prevShar = sharedState.prevSharedState) === null || _sharedState$prevShar === void 0 ? void 0 : _sharedState$prevShar.mode)) {
         var _sharedState$nextShar4, _sharedState$nextShar5;
-        if ((0, _platformFeatureFlags.fg)('platform_editor_lovability_resize_gracefully')) {
+        if ((0, _platformFeatureFlags.fg)('platform_editor_lovability_resize_gracefully') || (0, _platformFeatureFlags.fg)('platform_editor_lovability_resize_ext_gracefully')) {
           var _sharedState$nextShar2, _sharedState$nextShar3;
           if (((_sharedState$nextShar2 = sharedState.nextSharedState) === null || _sharedState$nextShar2 === void 0 ? void 0 : _sharedState$nextShar2.mode) === 'view') {
             var _this$cancelScheduled;
@@ -114,7 +116,7 @@ var ResizingMarkView = exports.ResizingMarkView = /*#__PURE__*/function () {
               _this.isResizingInitialised = false;
             }
           } else if (((_sharedState$nextShar3 = sharedState.nextSharedState) === null || _sharedState$nextShar3 === void 0 ? void 0 : _sharedState$nextShar3.mode) === 'edit' && !_this.isResizingInitialised) {
-            _this.setupResizerCallbacksIfSupported(dom, contentDOM, view, mark, isResizingExperimentEnabled, api);
+            _this.setupResizerCallbacksIfSupported(dom, contentDOM, view, mark, isResizingDividersPanelsEnabled, isResizingExtensionsEnabled, api);
           }
         } else if (((_sharedState$nextShar4 = sharedState.nextSharedState) === null || _sharedState$nextShar4 === void 0 ? void 0 : _sharedState$nextShar4.mode) === 'view' && _this.isResizingInitialised) {
           var _this$destroyFn2;
@@ -153,21 +155,21 @@ var ResizingMarkView = exports.ResizingMarkView = /*#__PURE__*/function () {
     }
   }, {
     key: "setupResizerCallbacksIfSupported",
-    value: function setupResizerCallbacksIfSupported(dom, contentDOM, view, mark, isResizingExperimentEnabled, api) {
+    value: function setupResizerCallbacksIfSupported(dom, contentDOM, view, mark, isResizingDividersPanelsEnabled, isResizingExtensionsEnabled, api) {
       var _this$cancelScheduled2,
         _this2 = this;
       // cancel any pending setup before scheduling a new one
       (_this$cancelScheduled2 = this.cancelScheduledResizeHandleSetup) === null || _this$cancelScheduled2 === void 0 || _this$cancelScheduled2.call(this);
       this.cancelScheduledResizeHandleSetup = undefined;
 
-      // if panels and rules support breakout resizing,
-      // set up the resizer callbacks
-      if (isResizingExperimentEnabled) {
+      // if breakout resizing is supported,
+      // continue to set up the resizer callbacks
+      if (isResizingDividersPanelsEnabled && isResizingExtensionsEnabled) {
         this.setupResizerCallbacks(dom, contentDOM, view, mark, api);
         return;
       }
 
-      // else if panels and rules don't support breakout resizing,
+      // else if breakout resizing is not supported,
       // do NOT set up the resizer callbacks (yet)
       // wait for the mark view DOM to be attached to the DOM first
       this.cancelScheduledResizeHandleSetup = scheduleResizeHandleSetup(function () {
@@ -179,8 +181,9 @@ var ResizingMarkView = exports.ResizingMarkView = /*#__PURE__*/function () {
         var pos = view.posAtDOM(dom, 0);
         var nodeName = (_view$state$doc$nodeA = view.state.doc.nodeAt(pos)) === null || _view$state$doc$nodeA === void 0 ? void 0 : _view$state$doc$nodeA.type.name;
 
-        // if the node is a panel or a rule, do NOT set up the resizer callbacks
-        if (nodeName && ['panel', 'rule', 'panel_c1'].includes(nodeName) || _this2.isResizingInitialised) {
+        // if the node is a panel or a rule but resizing is not supported, do NOT set up the resizer callbacks
+        // if the node is an extension but resizing is not supported, do NOT set up the resizer callbacks
+        if (nodeName && ['panel', 'rule', 'panel_c1'].includes(nodeName) && !isResizingDividersPanelsEnabled || nodeName && ['extension', 'bodiedExtension', 'multiBodiedExtension'].includes(nodeName) && !isResizingExtensionsEnabled || _this2.isResizingInitialised) {
           return;
         }
 

package/dist/cjs/pm-plugins/resizing-plugin.js

@@ -11,6 +11,7 @@ var _utils = require("@atlaskit/editor-common/utils");
 var _document = require("@atlaskit/editor-common/utils/document");
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
@@ -40,9 +41,16 @@ var addBreakoutToResizableNode = function addBreakoutToResizableNode(_ref) {
     var isExpand = node.type === expand;
     if (!breakoutMark) {
       var width = isMaxWidthEnabled ? _editorSharedStyles.akEditorMaxWidthLayoutWidth : isFullWidthEnabled ? _editorSharedStyles.akEditorFullWidthLayoutWidth : _editorSharedStyles.akEditorDefaultLayoutWidth;
-      updatedTr = newTr.setNodeMarkup(pos, node.type, node.attrs, [breakout.create({
-        width: width
-      })]);
+      if ((0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_lovability_resize_extensions')) {
+        var marks = breakout.create({
+          width: width
+        }).addToSet(node.marks);
+        updatedTr = newTr.setNodeMarkup(pos, node.type, node.attrs, marks);
+      } else {
+        updatedTr = newTr.setNodeMarkup(pos, node.type, node.attrs, [breakout.create({
+          width: width
+        })]);
+      }
       if (isExpand) {
         (0, _singlePlayerExpand.updateExpandedStateNew)({
           tr: updatedTr,
@@ -56,11 +64,18 @@ var addBreakoutToResizableNode = function addBreakoutToResizableNode(_ref) {
       var mode = breakoutMark.attrs.mode;
 
       // if breakout is present on node, but page appearance is 'full width' force width to full width to maintain backwards compatibility
-      var newWidth = isMaxWidthEnabled ? _editorSharedStyles.akEditorMaxWidthLayoutWidth : isFullWidthEnabled || mode === 'full-width' ? _editorSharedStyles.akEditorFullWidthLayoutWidth : _editorSharedStyles.akEditorCalculatedWideLayoutWidth;
-      updatedTr = newTr.setNodeMarkup(pos, node.type, node.attrs, [breakout.create({
-        width: newWidth,
-        mode: mode
-      })]);
+      var _width = isMaxWidthEnabled ? _editorSharedStyles.akEditorMaxWidthLayoutWidth : isFullWidthEnabled || mode === 'full-width' ? _editorSharedStyles.akEditorFullWidthLayoutWidth : _editorSharedStyles.akEditorCalculatedWideLayoutWidth;
+      if ((0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_lovability_resize_extensions')) {
+        var _marks = breakout.create({
+          width: _width
+        }).addToSet(node.marks);
+        updatedTr = newTr.setNodeMarkup(pos, node.type, node.attrs, _marks);
+      } else {
+        updatedTr = newTr.setNodeMarkup(pos, node.type, node.attrs, [breakout.create({
+          width: _width,
+          mode: mode
+        })]);
+      }
       if (isExpand) {
         (0, _singlePlayerExpand.updateExpandedStateNew)({
           tr: updatedTr,
@@ -120,7 +135,6 @@ var requestIdleCallbackWithFallback = function requestIdleCallbackWithFallback(c
   }
 };
 var createResizingPlugin = exports.createResizingPlugin = function createResizingPlugin(api, getIntl, nodeViewPortalProviderAPI, options) {
-  var isRuleAndPanelResizingEnabled = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
   return new _safePlugin.SafePlugin({
     key: resizingPluginKey,
     state: pluginState,
@@ -134,7 +148,8 @@ var createResizingPlugin = exports.createResizingPlugin = function createResizin
     },
     view: function view(editorView) {
       var _api$editorViewMode2;
-      var isPageLoadNormalizationEnabled = (0, _expValEquals.expValEquals)('platform_editor_add_breakout_marks_on_page_load', 'isEnabled', true);
+      var isPageLoadNormalizationEnabled = (0, _expValEquals.expValEquals)('platform_editor_add_breakout_marks_on_page_load', 'isEnabled', true) || (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_lovability_resize_extensions');
+      var isRuleAndPanelResizingEnabled = (0, _expValEquals.expValEquals)('platform_editor_lovability_resize_dividers_panels', 'isEnabled', true);
       var isPanelAndDividerNormalizationEnabled = isRuleAndPanelResizingEnabled && !(0, _platformFeatureFlags.fg)('platform_editor_lovability_resize_patch_1');
       if (!isPageLoadNormalizationEnabled && !isPanelAndDividerNormalizationEnabled) {
         return {};
@@ -160,7 +175,12 @@ var createResizingPlugin = exports.createResizingPlugin = function createResizin
           rule = _state$schema$nodes.rule,
           panel = _state$schema$nodes.panel,
           panel_c1 = _state$schema$nodes.panel_c1;
-        var breakoutResizableNodes = (0, _experiments.editorExperiment)('platform_synced_block', true) ? (0, _utils.getBreakoutResizableNodeTypes)(state.schema, isRuleAndPanelResizingEnabled) : isRuleAndPanelResizingEnabled ? new Set([expand, codeBlock, layoutSection, rule, panel, panel_c1]) : new Set([expand, codeBlock, layoutSection]);
+        var breakoutResizableNodes = new Set();
+        if ((0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_lovability_resize_extensions')) {
+          breakoutResizableNodes = (0, _utils.getBreakoutResizableNodeTypesNew)(state.schema);
+        } else {
+          breakoutResizableNodes = (0, _experiments.editorExperiment)('platform_synced_block', true) ? (0, _utils.getBreakoutResizableNodeTypes)(state.schema, isRuleAndPanelResizingEnabled) : isRuleAndPanelResizingEnabled ? new Set([expand, codeBlock, layoutSection, rule, panel, panel_c1]) : new Set([expand, codeBlock, layoutSection]);
+        }
         var newTr = state.tr;
         var hasDocChanged = false;
 
@@ -207,6 +227,7 @@ var createResizingPlugin = exports.createResizingPlugin = function createResizin
       }
       var newTr = newState.tr;
       var hasDocChanged = false;
+      var isRuleAndPanelResizingEnabled = (0, _expValEquals.expValEquals)('platform_editor_lovability_resize_dividers_panels', 'isEnabled', true);
       var _newState$schema$node = newState.schema.nodes,
         expand = _newState$schema$node.expand,
         codeBlock = _newState$schema$node.codeBlock,
@@ -214,10 +235,15 @@ var createResizingPlugin = exports.createResizingPlugin = function createResizin
         rule = _newState$schema$node.rule,
         panel = _newState$schema$node.panel,
         panel_c1 = _newState$schema$node.panel_c1;
-      var breakoutResizableNodes = (0, _experiments.editorExperiment)('platform_synced_block', true) ? (0, _utils.getBreakoutResizableNodeTypes)(newState.schema, isRuleAndPanelResizingEnabled) : isRuleAndPanelResizingEnabled ? new Set([expand, codeBlock, layoutSection, rule, panel, panel_c1]) : new Set([expand, codeBlock, layoutSection]);
+      var breakoutResizableNodes = new Set();
+      if ((0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_lovability_resize_extensions')) {
+        breakoutResizableNodes = (0, _utils.getBreakoutResizableNodeTypesNew)(newState.schema);
+      } else {
+        breakoutResizableNodes = (0, _experiments.editorExperiment)('platform_synced_block', true) ? (0, _utils.getBreakoutResizableNodeTypes)(newState.schema, isRuleAndPanelResizingEnabled) : isRuleAndPanelResizingEnabled ? new Set([expand, codeBlock, layoutSection, rule, panel, panel_c1]) : new Set([expand, codeBlock, layoutSection]);
+      }
       var isFullWidthEnabled = !((options === null || options === void 0 ? void 0 : options.allowBreakoutButton) === true);
       var isMaxWidthEnabled = (options === null || options === void 0 ? void 0 : options.appearance) === 'max' && (0, _expValEquals.expValEquals)('confluence_max_width_content_appearance', 'isEnabled', true) && (0, _expValEquals.expValEquals)('platform_editor_lovability_breakout_resizing_fixes', 'isEnabled', true);
-      var isPageLoadNormalizationEnabled = (0, _expValEquals.expValEquals)('platform_editor_add_breakout_marks_on_page_load', 'isEnabled', true);
+      var isPageLoadNormalizationEnabled = (0, _expValEquals.expValEquals)('platform_editor_add_breakout_marks_on_page_load', 'isEnabled', true) || (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_lovability_resize_extensions');
       var isPanelAndDividerNormalizationEnabled = isRuleAndPanelResizingEnabled && !(0, _platformFeatureFlags.fg)('platform_editor_lovability_resize_patch_1');
       if (!isPageLoadNormalizationEnabled && !isPanelAndDividerNormalizationEnabled && (0, _document.isReplaceDocOperation)(transactions, oldState)) {
         newState.doc.forEach(function (node, pos) {

package/dist/es2019/breakoutPlugin.js

@@ -183,7 +183,7 @@ export const breakoutPlugin = ({
         plugin: ({
           getIntl,
           nodeViewPortalProviderAPI
-        }) => createResizingPlugin(api, getIntl, nodeViewPortalProviderAPI, options, expValEquals('platform_editor_lovability_resize_dividers_panels', 'isEnabled', true))
+        }) => createResizingPlugin(api, getIntl, nodeViewPortalProviderAPI, options)
       }];
     }
     return [{

package/dist/es2019/editor-commands/set-breakout-mode.js

@@ -1,5 +1,6 @@
 import { transferCodeBlockWrappedValue } from '@atlaskit/editor-common/code-block';
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
+import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { findSupportedNodeForBreakout } from '../pm-plugins/utils/find-breakout-node';
 import { updateExpandedState } from '../pm-plugins/utils/single-player-expand';
 export function setBreakoutMode(mode, isLivePage) {
@@ -8,9 +9,17 @@ export function setBreakoutMode(mode, isLivePage) {
     if (!node) {
       return false;
     }
-    const tr = state.tr.setNodeMarkup(node.pos, node.node.type, node.node.attrs, [state.schema.marks.breakout.create({
-      mode
-    })]);
+    let tr;
+    if (isExperimentEnabled('platform_editor_lovability_resize_extensions')) {
+      const marks = state.schema.marks.breakout.create({
+        mode
+      }).addToSet(node.node.marks);
+      tr = state.tr.setNodeMarkup(node.pos, node.node.type, node.node.attrs, marks);
+    } else {
+      tr = state.tr.setNodeMarkup(node.pos, node.node.type, node.node.attrs, [state.schema.marks.breakout.create({
+        mode
+      })]);
+    }
     if (node.node.type === state.schema.nodes.expand) {
       updateExpandedState(tr, node, isLivePage);
     } else if (node.node.type === state.schema.nodes.codeBlock) {

package/dist/es2019/editor-commands/set-breakout-width.js

@@ -1,5 +1,6 @@
 import { transferCodeBlockWrappedValue } from '@atlaskit/editor-common/code-block';
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
+import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { updateExpandedStateNew } from '../pm-plugins/utils/single-player-expand';
 export function setBreakoutWidth(width, mode, pos, isLivePage) {
   return (state, dispatch) => {
@@ -7,10 +8,19 @@ export function setBreakoutWidth(width, mode, pos, isLivePage) {
     if (!node) {
       return false;
     }
-    const tr = state.tr.setNodeMarkup(pos, node.type, node.attrs, [state.schema.marks.breakout.create({
-      width,
-      mode
-    })]);
+    let tr;
+    if (isExperimentEnabled('platform_editor_lovability_resize_extensions')) {
+      const marks = state.schema.marks.breakout.create({
+        width,
+        mode
+      }).addToSet(node.marks);
+      tr = state.tr.setNodeMarkup(pos, node.type, node.attrs, marks);
+    } else {
+      tr = state.tr.setNodeMarkup(pos, node.type, node.attrs, [state.schema.marks.breakout.create({
+        width,
+        mode
+      })]);
+    }
     if (node.type === state.schema.nodes.expand) {
       updateExpandedStateNew({
         tr,

package/dist/es2019/pm-plugins/handle-key-down.js

@@ -1,7 +1,8 @@
 import { getBrowserInfo } from '@atlaskit/editor-common/browser';
-import { getBreakoutResizableNodeTypes } from '@atlaskit/editor-common/utils';
+import { getBreakoutResizableNodeTypes, getBreakoutResizableNodeTypesNew } from '@atlaskit/editor-common/utils';
 import { NodeSelection, TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth } from '@atlaskit/editor-shared-styles';
+import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { setBreakoutWidth } from '../editor-commands/set-breakout-width';
@@ -53,7 +54,12 @@ export const handleKeyDown = api => (view, event) => {
       panel,
       panel_c1
     } = view.state.schema.nodes;
-    const breakoutResizableNodes = editorExperiment('platform_synced_block', true) ? getBreakoutResizableNodeTypes(view.state.schema, expValEquals('platform_editor_lovability_resize_dividers_panels', 'isEnabled', true)) : expValEquals('platform_editor_lovability_resize_dividers_panels', 'isEnabled', true) ? new Set([expand, codeBlock, layoutSection, rule, panel, panel_c1]) : new Set([expand, codeBlock, layoutSection]);
+    let breakoutResizableNodes = new Set();
+    if (isExperimentEnabled('platform_editor_lovability_resize_extensions')) {
+      breakoutResizableNodes = getBreakoutResizableNodeTypesNew(view.state.schema);
+    } else {
+      breakoutResizableNodes = editorExperiment('platform_synced_block', true) ? getBreakoutResizableNodeTypes(view.state.schema, expValEquals('platform_editor_lovability_resize_dividers_panels', 'isEnabled', true)) : expValEquals('platform_editor_lovability_resize_dividers_panels', 'isEnabled', true) ? new Set([expand, codeBlock, layoutSection, rule, panel, panel_c1]) : new Set([expand, codeBlock, layoutSection]);
+    }
     const result = getAncestorResizableNode(view, breakoutResizableNodes);
     if (result) {
       const {

package/dist/es2019/pm-plugins/pragmatic-resizer.js

@@ -3,6 +3,7 @@ import { bind } from 'bind-event-listener';
 // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
 import uuid from 'uuid/v4';
 import { breakoutMessages as messages } from '@atlaskit/editor-common/messages';
+import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { draggable } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import { disableNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/element/disable-native-drag-preview';
 import { preventUnhandled } from '@atlaskit/pragmatic-drag-and-drop/prevent-unhandled';
@@ -16,6 +17,8 @@ const getNodeName = nodeName => {
     return nodeName;
   } else if ((nodeName === 'rule' || nodeName === 'panel' || nodeName === 'panel_c1') && expValEqualsNoExposure('platform_editor_lovability_resize_dividers_panels', 'isEnabled', true)) {
     return nodeName;
+  } else if ((nodeName === 'extension' || nodeName === 'bodiedExtension' || nodeName === 'multiBodiedExtension') && isExperimentEnabled('platform_editor_lovability_resize_extensions')) {
+    return nodeName;
   } else {
     return 'node';
   }
@@ -27,7 +30,10 @@ export const resizeHandleMessage = {
   rule: messages.resizeRule,
   panel: messages.resizePanel,
   panel_c1: messages.resizePanel,
-  node: messages.resizeElement
+  node: messages.resizeElement,
+  extension: messages.resizeExtension,
+  bodiedExtension: messages.resizeExtension,
+  multiBodiedExtension: messages.resizeExtension
 };
 const RailWithTooltip = ({
   rail,
@@ -62,7 +68,7 @@ export const createPragmaticResizer = ({
   nodeViewPortalProviderAPI
 }) => {
   let state = 'default';
-  const isLeftResizeHandleDisabled = expValEquals('platform_editor_lovability_resize_dividers_panels', 'isEnabled', true);
+  const isLeftResizeHandleDisabled = expValEquals('platform_editor_lovability_resize_dividers_panels', 'isEnabled', true) || isExperimentEnabled('platform_editor_lovability_resize_extensions');
   const createHandle = side => {
     const handle = document.createElement('div');
     handle.contentEditable = 'false';

package/dist/es2019/pm-plugins/resizing-mark-view.js

@@ -1,5 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { BreakoutCssClassName } from '@atlaskit/editor-common/styles';
+import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { createPragmaticResizer } from './pragmatic-resizer';
@@ -41,7 +42,8 @@ export class ResizingMarkView {
     dom.className = BreakoutCssClassName.BREAKOUT_MARK;
     dom.setAttribute('data-layout', mark.attrs.mode);
     dom.setAttribute('data-testid', 'ak-editor-breakout-mark');
-    const isResizingExperimentEnabled = expValEquals('platform_editor_lovability_resize_dividers_panels', 'isEnabled', true);
+    const isResizingDividersPanelsEnabled = expValEquals('platform_editor_lovability_resize_dividers_panels', 'isEnabled', true);
+    const isResizingExtensionsEnabled = isExperimentEnabled('platform_editor_lovability_resize_extensions');
 
     // DOM styles
     // Keep a three-column grid even when the left resize handle is disabled. The empty
@@ -55,13 +57,13 @@ export class ResizingMarkView {
     contentDOM.style.gridColumn = '2';
     contentDOM.style.zIndex = '1';
     if (mark.attrs.width) {
-      dom.style.gridTemplateColumns = isResizingExperimentEnabled ?
+      dom.style.gridTemplateColumns = isResizingDividersPanelsEnabled || isResizingExtensionsEnabled ?
       // new code - phantom left track + content + right handle
       `${RESIZE_HANDLE_TRACK_WIDTH} max(var(--ak-editor--breakout-min-width), min(var(${LOCAL_RESIZE_PROPERTY}, ${mark.attrs.width}px), var(--ak-editor--breakout-fallback-width))) ${RESIZE_HANDLE_TRACK_WIDTH}` :
       // old code - left handle + content + right handle
       `auto max(var(--ak-editor--breakout-min-width), min(var(${LOCAL_RESIZE_PROPERTY}, ${mark.attrs.width}px), var(--ak-editor--breakout-fallback-width))) auto`;
     } else {
-      if (isResizingExperimentEnabled) {
+      if (isResizingDividersPanelsEnabled || isResizingExtensionsEnabled) {
         dom.style.gridTemplateColumns = `${RESIZE_HANDLE_TRACK_WIDTH} auto ${RESIZE_HANDLE_TRACK_WIDTH}`;
       }
       if (mark.attrs.mode === 'wide') {
@@ -80,13 +82,13 @@ export class ResizingMarkView {
     this.nodeViewPortalProviderAPI = nodeViewPortalProviderAPI;
     const isLiveViewMode = (api === null || api === void 0 ? void 0 : (_api$editorViewMode = api.editorViewMode) === null || _api$editorViewMode === void 0 ? void 0 : (_api$editorViewMode$s = _api$editorViewMode.sharedState.currentState()) === null || _api$editorViewMode$s === void 0 ? void 0 : _api$editorViewMode$s.mode) === 'view';
     if (!isLiveViewMode) {
-      fg('platform_editor_lovability_resize_gracefully') ? this.setupResizerCallbacksIfSupported(dom, contentDOM, view, mark, isResizingExperimentEnabled, api) : this.setupResizerCallbacks(dom, contentDOM, view, mark, api);
+      fg('platform_editor_lovability_resize_gracefully') || fg('platform_editor_lovability_resize_ext_gracefully') ? this.setupResizerCallbacksIfSupported(dom, contentDOM, view, mark, isResizingDividersPanelsEnabled, isResizingExtensionsEnabled, api) : this.setupResizerCallbacks(dom, contentDOM, view, mark, api);
     }
     this.unsubscribeToViewModeChange = api === null || api === void 0 ? void 0 : (_api$editorViewMode2 = api.editorViewMode) === null || _api$editorViewMode2 === void 0 ? void 0 : _api$editorViewMode2.sharedState.onChange(sharedState => {
       var _sharedState$nextShar, _sharedState$prevShar;
       if (((_sharedState$nextShar = sharedState.nextSharedState) === null || _sharedState$nextShar === void 0 ? void 0 : _sharedState$nextShar.mode) !== ((_sharedState$prevShar = sharedState.prevSharedState) === null || _sharedState$prevShar === void 0 ? void 0 : _sharedState$prevShar.mode)) {
         var _sharedState$nextShar4, _sharedState$nextShar5;
-        if (fg('platform_editor_lovability_resize_gracefully')) {
+        if (fg('platform_editor_lovability_resize_gracefully') || fg('platform_editor_lovability_resize_ext_gracefully')) {
           var _sharedState$nextShar2, _sharedState$nextShar3;
           if (((_sharedState$nextShar2 = sharedState.nextSharedState) === null || _sharedState$nextShar2 === void 0 ? void 0 : _sharedState$nextShar2.mode) === 'view') {
             var _this$cancelScheduled;
@@ -98,7 +100,7 @@ export class ResizingMarkView {
               this.isResizingInitialised = false;
             }
           } else if (((_sharedState$nextShar3 = sharedState.nextSharedState) === null || _sharedState$nextShar3 === void 0 ? void 0 : _sharedState$nextShar3.mode) === 'edit' && !this.isResizingInitialised) {
-            this.setupResizerCallbacksIfSupported(dom, contentDOM, view, mark, isResizingExperimentEnabled, api);
+            this.setupResizerCallbacksIfSupported(dom, contentDOM, view, mark, isResizingDividersPanelsEnabled, isResizingExtensionsEnabled, api);
           }
         } else if (((_sharedState$nextShar4 = sharedState.nextSharedState) === null || _sharedState$nextShar4 === void 0 ? void 0 : _sharedState$nextShar4.mode) === 'view' && this.isResizingInitialised) {
           var _this$destroyFn2;
@@ -134,20 +136,20 @@ export class ResizingMarkView {
     this.destroyFn = destroy;
     this.isResizingInitialised = true;
   }
-  setupResizerCallbacksIfSupported(dom, contentDOM, view, mark, isResizingExperimentEnabled, api) {
+  setupResizerCallbacksIfSupported(dom, contentDOM, view, mark, isResizingDividersPanelsEnabled, isResizingExtensionsEnabled, api) {
     var _this$cancelScheduled2;
     // cancel any pending setup before scheduling a new one
     (_this$cancelScheduled2 = this.cancelScheduledResizeHandleSetup) === null || _this$cancelScheduled2 === void 0 ? void 0 : _this$cancelScheduled2.call(this);
     this.cancelScheduledResizeHandleSetup = undefined;
 
-    // if panels and rules support breakout resizing,
-    // set up the resizer callbacks
-    if (isResizingExperimentEnabled) {
+    // if breakout resizing is supported,
+    // continue to set up the resizer callbacks
+    if (isResizingDividersPanelsEnabled && isResizingExtensionsEnabled) {
       this.setupResizerCallbacks(dom, contentDOM, view, mark, api);
       return;
     }
 
-    // else if panels and rules don't support breakout resizing,
+    // else if breakout resizing is not supported,
     // do NOT set up the resizer callbacks (yet)
     // wait for the mark view DOM to be attached to the DOM first
     this.cancelScheduledResizeHandleSetup = scheduleResizeHandleSetup(() => {
@@ -159,8 +161,9 @@ export class ResizingMarkView {
       const pos = view.posAtDOM(dom, 0);
       const nodeName = (_view$state$doc$nodeA = view.state.doc.nodeAt(pos)) === null || _view$state$doc$nodeA === void 0 ? void 0 : _view$state$doc$nodeA.type.name;
 
-      // if the node is a panel or a rule, do NOT set up the resizer callbacks
-      if (nodeName && ['panel', 'rule', 'panel_c1'].includes(nodeName) || this.isResizingInitialised) {
+      // if the node is a panel or a rule but resizing is not supported, do NOT set up the resizer callbacks
+      // if the node is an extension but resizing is not supported, do NOT set up the resizer callbacks
+      if (nodeName && ['panel', 'rule', 'panel_c1'].includes(nodeName) && !isResizingDividersPanelsEnabled || nodeName && ['extension', 'bodiedExtension', 'multiBodiedExtension'].includes(nodeName) && !isResizingExtensionsEnabled || this.isResizingInitialised) {
         return;
       }
 

package/dist/es2019/pm-plugins/resizing-plugin.js

@@ -1,8 +1,9 @@
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
-import { getBreakoutResizableNodeTypes, stepAddsOneOf } from '@atlaskit/editor-common/utils';
+import { getBreakoutResizableNodeTypes, getBreakoutResizableNodeTypesNew, stepAddsOneOf } from '@atlaskit/editor-common/utils';
 import { getChangedNodes, isReplaceDocOperation } from '@atlaskit/editor-common/utils/document';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
 import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorMaxWidthLayoutWidth, akEditorCalculatedWideLayoutWidth } from '@atlaskit/editor-shared-styles';
+import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
@@ -33,9 +34,16 @@ const addBreakoutToResizableNode = ({
     const isExpand = node.type === expand;
     if (!breakoutMark) {
       const width = isMaxWidthEnabled ? akEditorMaxWidthLayoutWidth : isFullWidthEnabled ? akEditorFullWidthLayoutWidth : akEditorDefaultLayoutWidth;
-      updatedTr = newTr.setNodeMarkup(pos, node.type, node.attrs, [breakout.create({
-        width: width
-      })]);
+      if (isExperimentEnabled('platform_editor_lovability_resize_extensions')) {
+        const marks = breakout.create({
+          width: width
+        }).addToSet(node.marks);
+        updatedTr = newTr.setNodeMarkup(pos, node.type, node.attrs, marks);
+      } else {
+        updatedTr = newTr.setNodeMarkup(pos, node.type, node.attrs, [breakout.create({
+          width: width
+        })]);
+      }
       if (isExpand) {
         updateExpandedStateNew({
           tr: updatedTr,
@@ -49,11 +57,18 @@ const addBreakoutToResizableNode = ({
       const mode = breakoutMark.attrs.mode;
 
       // if breakout is present on node, but page appearance is 'full width' force width to full width to maintain backwards compatibility
-      const newWidth = isMaxWidthEnabled ? akEditorMaxWidthLayoutWidth : isFullWidthEnabled || mode === 'full-width' ? akEditorFullWidthLayoutWidth : akEditorCalculatedWideLayoutWidth;
-      updatedTr = newTr.setNodeMarkup(pos, node.type, node.attrs, [breakout.create({
-        width: newWidth,
-        mode: mode
-      })]);
+      const width = isMaxWidthEnabled ? akEditorMaxWidthLayoutWidth : isFullWidthEnabled || mode === 'full-width' ? akEditorFullWidthLayoutWidth : akEditorCalculatedWideLayoutWidth;
+      if (isExperimentEnabled('platform_editor_lovability_resize_extensions')) {
+        const marks = breakout.create({
+          width: width
+        }).addToSet(node.marks);
+        updatedTr = newTr.setNodeMarkup(pos, node.type, node.attrs, marks);
+      } else {
+        updatedTr = newTr.setNodeMarkup(pos, node.type, node.attrs, [breakout.create({
+          width: width,
+          mode: mode
+        })]);
+      }
       if (isExpand) {
         updateExpandedStateNew({
           tr: updatedTr,
@@ -115,7 +130,7 @@ const requestIdleCallbackWithFallback = callback => {
     requestAnimationFrame(callback);
   }
 };
-export const createResizingPlugin = (api, getIntl, nodeViewPortalProviderAPI, options, isRuleAndPanelResizingEnabled = false) => {
+export const createResizingPlugin = (api, getIntl, nodeViewPortalProviderAPI, options) => {
   return new SafePlugin({
     key: resizingPluginKey,
     state: pluginState,
@@ -129,7 +144,8 @@ export const createResizingPlugin = (api, getIntl, nodeViewPortalProviderAPI, op
     },
     view: editorView => {
       var _api$editorViewMode2;
-      const isPageLoadNormalizationEnabled = expValEquals('platform_editor_add_breakout_marks_on_page_load', 'isEnabled', true);
+      const isPageLoadNormalizationEnabled = expValEquals('platform_editor_add_breakout_marks_on_page_load', 'isEnabled', true) || isExperimentEnabled('platform_editor_lovability_resize_extensions');
+      const isRuleAndPanelResizingEnabled = expValEquals('platform_editor_lovability_resize_dividers_panels', 'isEnabled', true);
       const isPanelAndDividerNormalizationEnabled = isRuleAndPanelResizingEnabled && !fg('platform_editor_lovability_resize_patch_1');
       if (!isPageLoadNormalizationEnabled && !isPanelAndDividerNormalizationEnabled) {
         return {};
@@ -158,7 +174,12 @@ export const createResizingPlugin = (api, getIntl, nodeViewPortalProviderAPI, op
           panel,
           panel_c1
         } = state.schema.nodes;
-        const breakoutResizableNodes = editorExperiment('platform_synced_block', true) ? getBreakoutResizableNodeTypes(state.schema, isRuleAndPanelResizingEnabled) : isRuleAndPanelResizingEnabled ? new Set([expand, codeBlock, layoutSection, rule, panel, panel_c1]) : new Set([expand, codeBlock, layoutSection]);
+        let breakoutResizableNodes = new Set();
+        if (isExperimentEnabled('platform_editor_lovability_resize_extensions')) {
+          breakoutResizableNodes = getBreakoutResizableNodeTypesNew(state.schema);
+        } else {
+          breakoutResizableNodes = editorExperiment('platform_synced_block', true) ? getBreakoutResizableNodeTypes(state.schema, isRuleAndPanelResizingEnabled) : isRuleAndPanelResizingEnabled ? new Set([expand, codeBlock, layoutSection, rule, panel, panel_c1]) : new Set([expand, codeBlock, layoutSection]);
+        }
         let newTr = state.tr;
         let hasDocChanged = false;
 
@@ -207,6 +228,7 @@ export const createResizingPlugin = (api, getIntl, nodeViewPortalProviderAPI, op
       }
       let newTr = newState.tr;
       let hasDocChanged = false;
+      const isRuleAndPanelResizingEnabled = expValEquals('platform_editor_lovability_resize_dividers_panels', 'isEnabled', true);
       const {
         expand,
         codeBlock,
@@ -215,10 +237,15 @@ export const createResizingPlugin = (api, getIntl, nodeViewPortalProviderAPI, op
         panel,
         panel_c1
       } = newState.schema.nodes;
-      const breakoutResizableNodes = editorExperiment('platform_synced_block', true) ? getBreakoutResizableNodeTypes(newState.schema, isRuleAndPanelResizingEnabled) : isRuleAndPanelResizingEnabled ? new Set([expand, codeBlock, layoutSection, rule, panel, panel_c1]) : new Set([expand, codeBlock, layoutSection]);
+      let breakoutResizableNodes = new Set();
+      if (isExperimentEnabled('platform_editor_lovability_resize_extensions')) {
+        breakoutResizableNodes = getBreakoutResizableNodeTypesNew(newState.schema);
+      } else {
+        breakoutResizableNodes = editorExperiment('platform_synced_block', true) ? getBreakoutResizableNodeTypes(newState.schema, isRuleAndPanelResizingEnabled) : isRuleAndPanelResizingEnabled ? new Set([expand, codeBlock, layoutSection, rule, panel, panel_c1]) : new Set([expand, codeBlock, layoutSection]);
+      }
       const isFullWidthEnabled = !((options === null || options === void 0 ? void 0 : options.allowBreakoutButton) === true);
       const isMaxWidthEnabled = (options === null || options === void 0 ? void 0 : options.appearance) === 'max' && expValEquals('confluence_max_width_content_appearance', 'isEnabled', true) && expValEquals('platform_editor_lovability_breakout_resizing_fixes', 'isEnabled', true);
-      const isPageLoadNormalizationEnabled = expValEquals('platform_editor_add_breakout_marks_on_page_load', 'isEnabled', true);
+      const isPageLoadNormalizationEnabled = expValEquals('platform_editor_add_breakout_marks_on_page_load', 'isEnabled', true) || isExperimentEnabled('platform_editor_lovability_resize_extensions');
       const isPanelAndDividerNormalizationEnabled = isRuleAndPanelResizingEnabled && !fg('platform_editor_lovability_resize_patch_1');
       if (!isPageLoadNormalizationEnabled && !isPanelAndDividerNormalizationEnabled && isReplaceDocOperation(transactions, oldState)) {
         newState.doc.forEach((node, pos) => {

package/dist/esm/breakoutPlugin.js

@@ -189,7 +189,7 @@ export var breakoutPlugin = function breakoutPlugin(_ref4) {
           plugin: function plugin(_ref5) {
             var getIntl = _ref5.getIntl,
               nodeViewPortalProviderAPI = _ref5.nodeViewPortalProviderAPI;
-            return createResizingPlugin(api, getIntl, nodeViewPortalProviderAPI, options, expValEquals('platform_editor_lovability_resize_dividers_panels', 'isEnabled', true));
+            return createResizingPlugin(api, getIntl, nodeViewPortalProviderAPI, options);
           }
         }];
       }

package/dist/esm/editor-commands/set-breakout-mode.js

@@ -1,5 +1,6 @@
 import { transferCodeBlockWrappedValue } from '@atlaskit/editor-common/code-block';
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
+import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { findSupportedNodeForBreakout } from '../pm-plugins/utils/find-breakout-node';
 import { updateExpandedState } from '../pm-plugins/utils/single-player-expand';
 export function setBreakoutMode(mode, isLivePage) {
@@ -8,9 +9,17 @@ export function setBreakoutMode(mode, isLivePage) {
     if (!node) {
       return false;
     }
-    var tr = state.tr.setNodeMarkup(node.pos, node.node.type, node.node.attrs, [state.schema.marks.breakout.create({
-      mode: mode
-    })]);
+    var tr;
+    if (isExperimentEnabled('platform_editor_lovability_resize_extensions')) {
+      var marks = state.schema.marks.breakout.create({
+        mode: mode
+      }).addToSet(node.node.marks);
+      tr = state.tr.setNodeMarkup(node.pos, node.node.type, node.node.attrs, marks);
+    } else {
+      tr = state.tr.setNodeMarkup(node.pos, node.node.type, node.node.attrs, [state.schema.marks.breakout.create({
+        mode: mode
+      })]);
+    }
     if (node.node.type === state.schema.nodes.expand) {
       updateExpandedState(tr, node, isLivePage);
     } else if (node.node.type === state.schema.nodes.codeBlock) {

package/dist/esm/editor-commands/set-breakout-width.js

@@ -1,5 +1,6 @@
 import { transferCodeBlockWrappedValue } from '@atlaskit/editor-common/code-block';
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
+import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { updateExpandedStateNew } from '../pm-plugins/utils/single-player-expand';
 export function setBreakoutWidth(width, mode, pos, isLivePage) {
   return function (state, dispatch) {
@@ -7,10 +8,19 @@ export function setBreakoutWidth(width, mode, pos, isLivePage) {
     if (!node) {
       return false;
     }
-    var tr = state.tr.setNodeMarkup(pos, node.type, node.attrs, [state.schema.marks.breakout.create({
-      width: width,
-      mode: mode
-    })]);
+    var tr;
+    if (isExperimentEnabled('platform_editor_lovability_resize_extensions')) {
+      var marks = state.schema.marks.breakout.create({
+        width: width,
+        mode: mode
+      }).addToSet(node.marks);
+      tr = state.tr.setNodeMarkup(pos, node.type, node.attrs, marks);
+    } else {
+      tr = state.tr.setNodeMarkup(pos, node.type, node.attrs, [state.schema.marks.breakout.create({
+        width: width,
+        mode: mode
+      })]);
+    }
     if (node.type === state.schema.nodes.expand) {
       updateExpandedStateNew({
         tr: tr,

package/dist/esm/pm-plugins/handle-key-down.js

@@ -1,7 +1,8 @@
 import { getBrowserInfo } from '@atlaskit/editor-common/browser';
-import { getBreakoutResizableNodeTypes } from '@atlaskit/editor-common/utils';
+import { getBreakoutResizableNodeTypes, getBreakoutResizableNodeTypesNew } from '@atlaskit/editor-common/utils';
 import { NodeSelection, TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth } from '@atlaskit/editor-shared-styles';
+import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { setBreakoutWidth } from '../editor-commands/set-breakout-width';
@@ -53,7 +54,12 @@ export var handleKeyDown = function handleKeyDown(api) {
         rule = _view$state$schema$no.rule,
         panel = _view$state$schema$no.panel,
         panel_c1 = _view$state$schema$no.panel_c1;
-      var breakoutResizableNodes = editorExperiment('platform_synced_block', true) ? getBreakoutResizableNodeTypes(view.state.schema, expValEquals('platform_editor_lovability_resize_dividers_panels', 'isEnabled', true)) : expValEquals('platform_editor_lovability_resize_dividers_panels', 'isEnabled', true) ? new Set([expand, codeBlock, layoutSection, rule, panel, panel_c1]) : new Set([expand, codeBlock, layoutSection]);
+      var breakoutResizableNodes = new Set();
+      if (isExperimentEnabled('platform_editor_lovability_resize_extensions')) {
+        breakoutResizableNodes = getBreakoutResizableNodeTypesNew(view.state.schema);
+      } else {
+        breakoutResizableNodes = editorExperiment('platform_synced_block', true) ? getBreakoutResizableNodeTypes(view.state.schema, expValEquals('platform_editor_lovability_resize_dividers_panels', 'isEnabled', true)) : expValEquals('platform_editor_lovability_resize_dividers_panels', 'isEnabled', true) ? new Set([expand, codeBlock, layoutSection, rule, panel, panel_c1]) : new Set([expand, codeBlock, layoutSection]);
+      }
       var result = getAncestorResizableNode(view, breakoutResizableNodes);
       if (result) {
         var node = result.node,

package/dist/esm/pm-plugins/pragmatic-resizer.js

@@ -5,6 +5,7 @@ import { bind } from 'bind-event-listener';
 // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
 import uuid from 'uuid/v4';
 import { breakoutMessages as messages } from '@atlaskit/editor-common/messages';
+import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { draggable } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import { disableNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/element/disable-native-drag-preview';
 import { preventUnhandled } from '@atlaskit/pragmatic-drag-and-drop/prevent-unhandled';
@@ -18,6 +19,8 @@ var getNodeName = function getNodeName(nodeName) {
     return nodeName;
   } else if ((nodeName === 'rule' || nodeName === 'panel' || nodeName === 'panel_c1') && expValEqualsNoExposure('platform_editor_lovability_resize_dividers_panels', 'isEnabled', true)) {
     return nodeName;
+  } else if ((nodeName === 'extension' || nodeName === 'bodiedExtension' || nodeName === 'multiBodiedExtension') && isExperimentEnabled('platform_editor_lovability_resize_extensions')) {
+    return nodeName;
   } else {
     return 'node';
   }
@@ -29,7 +32,10 @@ export var resizeHandleMessage = {
   rule: messages.resizeRule,
   panel: messages.resizePanel,
   panel_c1: messages.resizePanel,
-  node: messages.resizeElement
+  node: messages.resizeElement,
+  extension: messages.resizeExtension,
+  bodiedExtension: messages.resizeExtension,
+  multiBodiedExtension: messages.resizeExtension
 };
 var RailWithTooltip = function RailWithTooltip(_ref) {
   var rail = _ref.rail,
@@ -65,7 +71,7 @@ export var createPragmaticResizer = function createPragmaticResizer(_ref2) {
     intl = _ref2.intl,
     nodeViewPortalProviderAPI = _ref2.nodeViewPortalProviderAPI;
   var state = 'default';
-  var isLeftResizeHandleDisabled = expValEquals('platform_editor_lovability_resize_dividers_panels', 'isEnabled', true);
+  var isLeftResizeHandleDisabled = expValEquals('platform_editor_lovability_resize_dividers_panels', 'isEnabled', true) || isExperimentEnabled('platform_editor_lovability_resize_extensions');
   var createHandle = function createHandle(side) {
     var handle = document.createElement('div');
     handle.contentEditable = 'false';

package/dist/esm/pm-plugins/resizing-mark-view.js

@@ -4,6 +4,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 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) { _defineProperty(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; }
 import { BreakoutCssClassName } from '@atlaskit/editor-common/styles';
+import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { createPragmaticResizer } from './pragmatic-resizer';
@@ -52,7 +53,8 @@ export var ResizingMarkView = /*#__PURE__*/function () {
     dom.className = BreakoutCssClassName.BREAKOUT_MARK;
     dom.setAttribute('data-layout', mark.attrs.mode);
     dom.setAttribute('data-testid', 'ak-editor-breakout-mark');
-    var isResizingExperimentEnabled = expValEquals('platform_editor_lovability_resize_dividers_panels', 'isEnabled', true);
+    var isResizingDividersPanelsEnabled = expValEquals('platform_editor_lovability_resize_dividers_panels', 'isEnabled', true);
+    var isResizingExtensionsEnabled = isExperimentEnabled('platform_editor_lovability_resize_extensions');
 
     // DOM styles
     // Keep a three-column grid even when the left resize handle is disabled. The empty
@@ -66,11 +68,11 @@ export var ResizingMarkView = /*#__PURE__*/function () {
     contentDOM.style.gridColumn = '2';
     contentDOM.style.zIndex = '1';
     if (mark.attrs.width) {
-      dom.style.gridTemplateColumns = isResizingExperimentEnabled ? // new code - phantom left track + content + right handle
+      dom.style.gridTemplateColumns = isResizingDividersPanelsEnabled || isResizingExtensionsEnabled ? // new code - phantom left track + content + right handle
       "".concat(RESIZE_HANDLE_TRACK_WIDTH, " max(var(--ak-editor--breakout-min-width), min(var(").concat(LOCAL_RESIZE_PROPERTY, ", ").concat(mark.attrs.width, "px), var(--ak-editor--breakout-fallback-width))) ").concat(RESIZE_HANDLE_TRACK_WIDTH) : // old code - left handle + content + right handle
       "auto max(var(--ak-editor--breakout-min-width), min(var(".concat(LOCAL_RESIZE_PROPERTY, ", ").concat(mark.attrs.width, "px), var(--ak-editor--breakout-fallback-width))) auto");
     } else {
-      if (isResizingExperimentEnabled) {
+      if (isResizingDividersPanelsEnabled || isResizingExtensionsEnabled) {
         dom.style.gridTemplateColumns = "".concat(RESIZE_HANDLE_TRACK_WIDTH, " auto ").concat(RESIZE_HANDLE_TRACK_WIDTH);
       }
       if (mark.attrs.mode === 'wide') {
@@ -89,13 +91,13 @@ export var ResizingMarkView = /*#__PURE__*/function () {
     this.nodeViewPortalProviderAPI = nodeViewPortalProviderAPI;
     var isLiveViewMode = (api === null || api === void 0 || (_api$editorViewMode = api.editorViewMode) === null || _api$editorViewMode === void 0 || (_api$editorViewMode = _api$editorViewMode.sharedState.currentState()) === null || _api$editorViewMode === void 0 ? void 0 : _api$editorViewMode.mode) === 'view';
     if (!isLiveViewMode) {
-      fg('platform_editor_lovability_resize_gracefully') ? this.setupResizerCallbacksIfSupported(dom, contentDOM, view, mark, isResizingExperimentEnabled, api) : this.setupResizerCallbacks(dom, contentDOM, view, mark, api);
+      fg('platform_editor_lovability_resize_gracefully') || fg('platform_editor_lovability_resize_ext_gracefully') ? this.setupResizerCallbacksIfSupported(dom, contentDOM, view, mark, isResizingDividersPanelsEnabled, isResizingExtensionsEnabled, api) : this.setupResizerCallbacks(dom, contentDOM, view, mark, api);
     }
     this.unsubscribeToViewModeChange = api === null || api === void 0 || (_api$editorViewMode2 = api.editorViewMode) === null || _api$editorViewMode2 === void 0 ? void 0 : _api$editorViewMode2.sharedState.onChange(function (sharedState) {
       var _sharedState$nextShar, _sharedState$prevShar;
       if (((_sharedState$nextShar = sharedState.nextSharedState) === null || _sharedState$nextShar === void 0 ? void 0 : _sharedState$nextShar.mode) !== ((_sharedState$prevShar = sharedState.prevSharedState) === null || _sharedState$prevShar === void 0 ? void 0 : _sharedState$prevShar.mode)) {
         var _sharedState$nextShar4, _sharedState$nextShar5;
-        if (fg('platform_editor_lovability_resize_gracefully')) {
+        if (fg('platform_editor_lovability_resize_gracefully') || fg('platform_editor_lovability_resize_ext_gracefully')) {
           var _sharedState$nextShar2, _sharedState$nextShar3;
           if (((_sharedState$nextShar2 = sharedState.nextSharedState) === null || _sharedState$nextShar2 === void 0 ? void 0 : _sharedState$nextShar2.mode) === 'view') {
             var _this$cancelScheduled;
@@ -107,7 +109,7 @@ export var ResizingMarkView = /*#__PURE__*/function () {
               _this.isResizingInitialised = false;
             }
           } else if (((_sharedState$nextShar3 = sharedState.nextSharedState) === null || _sharedState$nextShar3 === void 0 ? void 0 : _sharedState$nextShar3.mode) === 'edit' && !_this.isResizingInitialised) {
-            _this.setupResizerCallbacksIfSupported(dom, contentDOM, view, mark, isResizingExperimentEnabled, api);
+            _this.setupResizerCallbacksIfSupported(dom, contentDOM, view, mark, isResizingDividersPanelsEnabled, isResizingExtensionsEnabled, api);
           }
         } else if (((_sharedState$nextShar4 = sharedState.nextSharedState) === null || _sharedState$nextShar4 === void 0 ? void 0 : _sharedState$nextShar4.mode) === 'view' && _this.isResizingInitialised) {
           var _this$destroyFn2;
@@ -146,21 +148,21 @@ export var ResizingMarkView = /*#__PURE__*/function () {
     }
   }, {
     key: "setupResizerCallbacksIfSupported",
-    value: function setupResizerCallbacksIfSupported(dom, contentDOM, view, mark, isResizingExperimentEnabled, api) {
+    value: function setupResizerCallbacksIfSupported(dom, contentDOM, view, mark, isResizingDividersPanelsEnabled, isResizingExtensionsEnabled, api) {
       var _this$cancelScheduled2,
         _this2 = this;
       // cancel any pending setup before scheduling a new one
       (_this$cancelScheduled2 = this.cancelScheduledResizeHandleSetup) === null || _this$cancelScheduled2 === void 0 || _this$cancelScheduled2.call(this);
       this.cancelScheduledResizeHandleSetup = undefined;
 
-      // if panels and rules support breakout resizing,
-      // set up the resizer callbacks
-      if (isResizingExperimentEnabled) {
+      // if breakout resizing is supported,
+      // continue to set up the resizer callbacks
+      if (isResizingDividersPanelsEnabled && isResizingExtensionsEnabled) {
         this.setupResizerCallbacks(dom, contentDOM, view, mark, api);
         return;
       }
 
-      // else if panels and rules don't support breakout resizing,
+      // else if breakout resizing is not supported,
       // do NOT set up the resizer callbacks (yet)
       // wait for the mark view DOM to be attached to the DOM first
       this.cancelScheduledResizeHandleSetup = scheduleResizeHandleSetup(function () {
@@ -172,8 +174,9 @@ export var ResizingMarkView = /*#__PURE__*/function () {
         var pos = view.posAtDOM(dom, 0);
         var nodeName = (_view$state$doc$nodeA = view.state.doc.nodeAt(pos)) === null || _view$state$doc$nodeA === void 0 ? void 0 : _view$state$doc$nodeA.type.name;
 
-        // if the node is a panel or a rule, do NOT set up the resizer callbacks
-        if (nodeName && ['panel', 'rule', 'panel_c1'].includes(nodeName) || _this2.isResizingInitialised) {
+        // if the node is a panel or a rule but resizing is not supported, do NOT set up the resizer callbacks
+        // if the node is an extension but resizing is not supported, do NOT set up the resizer callbacks
+        if (nodeName && ['panel', 'rule', 'panel_c1'].includes(nodeName) && !isResizingDividersPanelsEnabled || nodeName && ['extension', 'bodiedExtension', 'multiBodiedExtension'].includes(nodeName) && !isResizingExtensionsEnabled || _this2.isResizingInitialised) {
           return;
         }
 

package/dist/esm/pm-plugins/resizing-plugin.js

@@ -2,10 +2,11 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 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) { _defineProperty(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; }
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
-import { getBreakoutResizableNodeTypes, stepAddsOneOf } from '@atlaskit/editor-common/utils';
+import { getBreakoutResizableNodeTypes, getBreakoutResizableNodeTypesNew, stepAddsOneOf } from '@atlaskit/editor-common/utils';
 import { getChangedNodes, isReplaceDocOperation } from '@atlaskit/editor-common/utils/document';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
 import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorMaxWidthLayoutWidth, akEditorCalculatedWideLayoutWidth } from '@atlaskit/editor-shared-styles';
+import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
@@ -33,9 +34,16 @@ var addBreakoutToResizableNode = function addBreakoutToResizableNode(_ref) {
     var isExpand = node.type === expand;
     if (!breakoutMark) {
       var width = isMaxWidthEnabled ? akEditorMaxWidthLayoutWidth : isFullWidthEnabled ? akEditorFullWidthLayoutWidth : akEditorDefaultLayoutWidth;
-      updatedTr = newTr.setNodeMarkup(pos, node.type, node.attrs, [breakout.create({
-        width: width
-      })]);
+      if (isExperimentEnabled('platform_editor_lovability_resize_extensions')) {
+        var marks = breakout.create({
+          width: width
+        }).addToSet(node.marks);
+        updatedTr = newTr.setNodeMarkup(pos, node.type, node.attrs, marks);
+      } else {
+        updatedTr = newTr.setNodeMarkup(pos, node.type, node.attrs, [breakout.create({
+          width: width
+        })]);
+      }
       if (isExpand) {
         updateExpandedStateNew({
           tr: updatedTr,
@@ -49,11 +57,18 @@ var addBreakoutToResizableNode = function addBreakoutToResizableNode(_ref) {
       var mode = breakoutMark.attrs.mode;
 
       // if breakout is present on node, but page appearance is 'full width' force width to full width to maintain backwards compatibility
-      var newWidth = isMaxWidthEnabled ? akEditorMaxWidthLayoutWidth : isFullWidthEnabled || mode === 'full-width' ? akEditorFullWidthLayoutWidth : akEditorCalculatedWideLayoutWidth;
-      updatedTr = newTr.setNodeMarkup(pos, node.type, node.attrs, [breakout.create({
-        width: newWidth,
-        mode: mode
-      })]);
+      var _width = isMaxWidthEnabled ? akEditorMaxWidthLayoutWidth : isFullWidthEnabled || mode === 'full-width' ? akEditorFullWidthLayoutWidth : akEditorCalculatedWideLayoutWidth;
+      if (isExperimentEnabled('platform_editor_lovability_resize_extensions')) {
+        var _marks = breakout.create({
+          width: _width
+        }).addToSet(node.marks);
+        updatedTr = newTr.setNodeMarkup(pos, node.type, node.attrs, _marks);
+      } else {
+        updatedTr = newTr.setNodeMarkup(pos, node.type, node.attrs, [breakout.create({
+          width: _width,
+          mode: mode
+        })]);
+      }
       if (isExpand) {
         updateExpandedStateNew({
           tr: updatedTr,
@@ -113,7 +128,6 @@ var requestIdleCallbackWithFallback = function requestIdleCallbackWithFallback(c
   }
 };
 export var createResizingPlugin = function createResizingPlugin(api, getIntl, nodeViewPortalProviderAPI, options) {
-  var isRuleAndPanelResizingEnabled = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
   return new SafePlugin({
     key: resizingPluginKey,
     state: pluginState,
@@ -127,7 +141,8 @@ export var createResizingPlugin = function createResizingPlugin(api, getIntl, no
     },
     view: function view(editorView) {
       var _api$editorViewMode2;
-      var isPageLoadNormalizationEnabled = expValEquals('platform_editor_add_breakout_marks_on_page_load', 'isEnabled', true);
+      var isPageLoadNormalizationEnabled = expValEquals('platform_editor_add_breakout_marks_on_page_load', 'isEnabled', true) || isExperimentEnabled('platform_editor_lovability_resize_extensions');
+      var isRuleAndPanelResizingEnabled = expValEquals('platform_editor_lovability_resize_dividers_panels', 'isEnabled', true);
       var isPanelAndDividerNormalizationEnabled = isRuleAndPanelResizingEnabled && !fg('platform_editor_lovability_resize_patch_1');
       if (!isPageLoadNormalizationEnabled && !isPanelAndDividerNormalizationEnabled) {
         return {};
@@ -153,7 +168,12 @@ export var createResizingPlugin = function createResizingPlugin(api, getIntl, no
           rule = _state$schema$nodes.rule,
           panel = _state$schema$nodes.panel,
           panel_c1 = _state$schema$nodes.panel_c1;
-        var breakoutResizableNodes = editorExperiment('platform_synced_block', true) ? getBreakoutResizableNodeTypes(state.schema, isRuleAndPanelResizingEnabled) : isRuleAndPanelResizingEnabled ? new Set([expand, codeBlock, layoutSection, rule, panel, panel_c1]) : new Set([expand, codeBlock, layoutSection]);
+        var breakoutResizableNodes = new Set();
+        if (isExperimentEnabled('platform_editor_lovability_resize_extensions')) {
+          breakoutResizableNodes = getBreakoutResizableNodeTypesNew(state.schema);
+        } else {
+          breakoutResizableNodes = editorExperiment('platform_synced_block', true) ? getBreakoutResizableNodeTypes(state.schema, isRuleAndPanelResizingEnabled) : isRuleAndPanelResizingEnabled ? new Set([expand, codeBlock, layoutSection, rule, panel, panel_c1]) : new Set([expand, codeBlock, layoutSection]);
+        }
         var newTr = state.tr;
         var hasDocChanged = false;
 
@@ -200,6 +220,7 @@ export var createResizingPlugin = function createResizingPlugin(api, getIntl, no
       }
       var newTr = newState.tr;
       var hasDocChanged = false;
+      var isRuleAndPanelResizingEnabled = expValEquals('platform_editor_lovability_resize_dividers_panels', 'isEnabled', true);
       var _newState$schema$node = newState.schema.nodes,
         expand = _newState$schema$node.expand,
         codeBlock = _newState$schema$node.codeBlock,
@@ -207,10 +228,15 @@ export var createResizingPlugin = function createResizingPlugin(api, getIntl, no
         rule = _newState$schema$node.rule,
         panel = _newState$schema$node.panel,
         panel_c1 = _newState$schema$node.panel_c1;
-      var breakoutResizableNodes = editorExperiment('platform_synced_block', true) ? getBreakoutResizableNodeTypes(newState.schema, isRuleAndPanelResizingEnabled) : isRuleAndPanelResizingEnabled ? new Set([expand, codeBlock, layoutSection, rule, panel, panel_c1]) : new Set([expand, codeBlock, layoutSection]);
+      var breakoutResizableNodes = new Set();
+      if (isExperimentEnabled('platform_editor_lovability_resize_extensions')) {
+        breakoutResizableNodes = getBreakoutResizableNodeTypesNew(newState.schema);
+      } else {
+        breakoutResizableNodes = editorExperiment('platform_synced_block', true) ? getBreakoutResizableNodeTypes(newState.schema, isRuleAndPanelResizingEnabled) : isRuleAndPanelResizingEnabled ? new Set([expand, codeBlock, layoutSection, rule, panel, panel_c1]) : new Set([expand, codeBlock, layoutSection]);
+      }
       var isFullWidthEnabled = !((options === null || options === void 0 ? void 0 : options.allowBreakoutButton) === true);
       var isMaxWidthEnabled = (options === null || options === void 0 ? void 0 : options.appearance) === 'max' && expValEquals('confluence_max_width_content_appearance', 'isEnabled', true) && expValEquals('platform_editor_lovability_breakout_resizing_fixes', 'isEnabled', true);
-      var isPageLoadNormalizationEnabled = expValEquals('platform_editor_add_breakout_marks_on_page_load', 'isEnabled', true);
+      var isPageLoadNormalizationEnabled = expValEquals('platform_editor_add_breakout_marks_on_page_load', 'isEnabled', true) || isExperimentEnabled('platform_editor_lovability_resize_extensions');
       var isPanelAndDividerNormalizationEnabled = isRuleAndPanelResizingEnabled && !fg('platform_editor_lovability_resize_patch_1');
       if (!isPageLoadNormalizationEnabled && !isPanelAndDividerNormalizationEnabled && isReplaceDocOperation(transactions, oldState)) {
         newState.doc.forEach(function (node, pos) {

package/dist/types/pm-plugins/resizing-mark-view.d.ts

@@ -29,7 +29,7 @@ export declare class ResizingMarkView implements NodeView {
      */
     constructor(mark: Mark, view: EditorView, api: ExtractInjectionAPI<BreakoutPlugin> | undefined, getIntl: () => IntlShape, nodeViewPortalProviderAPI: PortalProviderAPI);
     setupResizerCallbacks(dom: HTMLElement, contentDOM: HTMLElement, view: EditorView, mark: Mark, api?: ExtractInjectionAPI<BreakoutPlugin>): void;
-    setupResizerCallbacksIfSupported(dom: HTMLElement, contentDOM: HTMLElement, view: EditorView, mark: Mark, isResizingExperimentEnabled: boolean, api?: ExtractInjectionAPI<BreakoutPlugin>): void;
+    setupResizerCallbacksIfSupported(dom: HTMLElement, contentDOM: HTMLElement, view: EditorView, mark: Mark, isResizingDividersPanelsEnabled: boolean, isResizingExtensionsEnabled: boolean, api?: ExtractInjectionAPI<BreakoutPlugin>): void;
     ignoreMutation(): boolean;
     destroy(): void;
 }

package/dist/types/pm-plugins/resizing-plugin.d.ts

@@ -7,7 +7,7 @@ import type { BreakoutPlugin, BreakoutPluginOptions, BreakoutPluginState } from
 import type { GUIDELINE_KEYS } from './get-guidelines';
 export declare const resizingPluginKey: PluginKey<BreakoutPluginState>;
 export type ActiveGuidelineKey = Exclude<(typeof GUIDELINE_KEYS)[keyof typeof GUIDELINE_KEYS], 'grid_left' | 'grid_right'>;
-export declare const createResizingPlugin: (api: ExtractInjectionAPI<BreakoutPlugin> | undefined, getIntl: () => IntlShape, nodeViewPortalProviderAPI: PortalProviderAPI, options?: BreakoutPluginOptions, isRuleAndPanelResizingEnabled?: boolean) => SafePlugin<BreakoutPluginState | {
+export declare const createResizingPlugin: (api: ExtractInjectionAPI<BreakoutPlugin> | undefined, getIntl: () => IntlShape, nodeViewPortalProviderAPI: PortalProviderAPI, options?: BreakoutPluginOptions) => SafePlugin<BreakoutPluginState | {
     activeGuidelineLabel: undefined;
     breakoutNode: undefined;
 }>;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-breakout",
-	"version": "14.0.3",
+	"version": "14.0.4",
 	"description": "Breakout plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -36,8 +36,8 @@
 		"@atlaskit/platform-feature-flags": "^2.1.0",
 		"@atlaskit/pragmatic-drag-and-drop": "^2.0.0",
 		"@atlaskit/theme": "^28.0.0",
-		"@atlaskit/tmp-editor-statsig": "^144.0.0",
-		"@atlaskit/tokens": "^16.4.0",
+		"@atlaskit/tmp-editor-statsig": "^145.0.0",
+		"@atlaskit/tokens": "^16.5.0",
 		"@atlaskit/tooltip": "^24.0.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
@@ -46,7 +46,7 @@
 		"uuid": "^3.1.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^118.1.0",
+		"@atlaskit/editor-common": "^118.2.0",
 		"react": "^18.2.0 || ^19.2.0",
 		"react-dom": "^18.2.0 || ^19.2.0",
 		"react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"
@@ -95,6 +95,9 @@
 		}
 	},
 	"platform-feature-flags": {
+		"platform_editor_lovability_resize_ext_gracefully": {
+			"type": "boolean"
+		},
 		"platform_editor_lovability_resize_gracefully": {
 			"type": "boolean"
 		},