@atlaskit/editor-plugin-breakout 2.2.6 → 2.3.1

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # @atlaskit/editor-plugin-breakout
 
+## 2.3.1
+
+### Patch Changes
+
+- [#160619](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/160619)
+  [`6e034b31d6c9c`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/6e034b31d6c9c) -
+  ED-28096 fix nested nodes getting breakout mark
+- Updated dependencies
+
+## 2.3.0
+
+### Minor Changes
+
+- [#158239](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/158239)
+  [`c2caa0af876e0`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/c2caa0af876e0) -
+  [ux] ED-28028 add breakout mark to expands, codeblocks and layouts for new resizing experience
+  behind the platform_editor_breakout_resizing experiment
+
+### Patch Changes
+
+- [#159213](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/159213)
+  [`75e3b93e94f8c`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/75e3b93e94f8c) -
+  [ED-28069] this change is retaining the breakout mode when setting the breakout width when using
+  the new resizing experience behind the platform_editor_breakout_resizing experiment.
+- Updated dependencies
+
 ## 2.2.6
 
 ### Patch Changes

package/dist/cjs/breakoutPlugin.js

@@ -178,7 +178,7 @@ var breakoutPlugin = exports.breakoutPlugin = function breakoutPlugin(_ref3) {
         return [{
           name: 'breakout-resizing',
           plugin: function plugin() {
-            return (0, _resizingPlugin.createResizingPlugin)(api);
+            return (0, _resizingPlugin.createResizingPlugin)(api, options);
           }
         }];
       }

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

@@ -5,14 +5,15 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.setBreakoutWidth = setBreakoutWidth;
 // TODO: ED-28029 - add fixes for expands and codeblocks
-function setBreakoutWidth(width, pos, isLivePage) {
+function setBreakoutWidth(width, mode, pos, isLivePage) {
   return function (state, dispatch) {
     var node = state.doc.nodeAt(pos);
     if (!node) {
       return false;
     }
     var tr = state.tr.setNodeMarkup(pos, node.type, node.attrs, [state.schema.marks.breakout.create({
-      width: width
+      width: width,
+      mode: mode
     })]);
     if (dispatch) {
       dispatch(tr);

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

@@ -26,7 +26,6 @@ function getProposedWidth(_ref) {
   var containerWidth = ((api === null || api === void 0 || (_api$width$sharedStat = api.width.sharedState) === null || _api$width$sharedStat === void 0 || (_api$width$sharedStat = _api$width$sharedStat.currentState()) === null || _api$width$sharedStat === void 0 ? void 0 : _api$width$sharedStat.width) || 0) - 2 * (0, _editorSharedStyles.akEditorGutterPaddingDynamic)() - _editorSharedStyles.akEditorGutterPadding;
   return Math.min(Math.max(WIDTHS.MIN, Math.min(proposedWidth, containerWidth)), WIDTHS.MAX);
 }
-;
 function createResizerCallbacks(_ref2) {
   var dom = _ref2.dom,
     contentDOM = _ref2.contentDOM,
@@ -61,13 +60,14 @@ function createResizerCallbacks(_ref2) {
       if (pos === undefined) {
         return;
       }
+      var mode = mark.attrs.mode;
       var initialWidth = mark.attrs.width;
       var newWidth = getProposedWidth({
         initialWidth: initialWidth,
         location: location,
         api: api
       });
-      (0, _setBreakoutWidth.setBreakoutWidth)(newWidth, pos)(view.state, view.dispatch);
+      (0, _setBreakoutWidth.setBreakoutWidth)(newWidth, mode, pos)(view.state, view.dispatch);
       contentDOM.style.removeProperty(_resizingMarkView.LOCAL_RESIZE_PROPERTY);
       view.dispatch(view.state.tr.setMeta('is-resizer-resizing', false).setMeta('scrollIntoView', false));
       api === null || api === void 0 || api.core.actions.execute((_api$userIntent2 = api.userIntent) === null || _api$userIntent2 === void 0 ? void 0 : _api$userIntent2.commands.setCurrentUserIntent('default'));

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

@@ -5,10 +5,50 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.resizingPluginKey = exports.createResizingPlugin = void 0;
 var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
+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 _resizingMarkView = require("./resizing-mark-view");
+var addBreakoutToResizableNode = function addBreakoutToResizableNode(_ref) {
+  var node = _ref.node,
+    pos = _ref.pos,
+    newState = _ref.newState,
+    newTr = _ref.newTr,
+    breakoutResizableNodes = _ref.breakoutResizableNodes,
+    isFullWidthEnabled = _ref.isFullWidthEnabled;
+  var updatedDocChanged = false;
+  var updatedTr = newTr;
+  var $pos = newState.doc.resolve(pos);
+  var isTopLevelNode = ($pos === null || $pos === void 0 ? void 0 : $pos.depth) === 0;
+  if (breakoutResizableNodes.has(node.type) && isTopLevelNode) {
+    var breakout = newState.schema.marks.breakout;
+    var breakoutMark = node.marks.find(function (mark) {
+      return mark.type === breakout;
+    });
+    if (!breakoutMark) {
+      var width = isFullWidthEnabled ? _editorSharedStyles.akEditorFullWidthLayoutWidth : _editorSharedStyles.akEditorDefaultLayoutWidth;
+      updatedTr = newTr.setNodeMarkup(pos, node.type, node.attrs, [breakout.create({
+        width: width
+      })]);
+      updatedDocChanged = true;
+    } else if ((breakoutMark === null || breakoutMark === void 0 ? void 0 : breakoutMark.attrs.width) === null || (breakoutMark === null || breakoutMark === void 0 ? void 0 : breakoutMark.attrs.width) === undefined) {
+      var mode = breakoutMark.attrs.mode;
+      var newWidth = mode === 'wide' ? _editorSharedStyles.akEditorCalculatedWideLayoutWidth : _editorSharedStyles.akEditorFullWidthLayoutWidth;
+      updatedTr = newTr.setNodeMarkup(pos, node.type, node.attrs, [breakout.create({
+        width: newWidth,
+        mode: mode
+      })]);
+      updatedDocChanged = true;
+    }
+  }
+  return {
+    updatedTr: updatedTr,
+    updatedDocChanged: updatedDocChanged
+  };
+};
 var resizingPluginKey = exports.resizingPluginKey = new _state.PluginKey('breakout-resizing');
-var createResizingPlugin = exports.createResizingPlugin = function createResizingPlugin(api) {
+var createResizingPlugin = exports.createResizingPlugin = function createResizingPlugin(api, options) {
   return new _safePlugin.SafePlugin({
     key: resizingPluginKey,
     props: {
@@ -17,6 +57,60 @@ var createResizingPlugin = exports.createResizingPlugin = function createResizin
           return new _resizingMarkView.ResizingMarkView(mark, view, api);
         }
       }
+    },
+    appendTransaction: function appendTransaction(transactions, oldState, newState) {
+      var newTr = newState.tr;
+      var hasDocChanged = false;
+      var _newState$schema$node = newState.schema.nodes,
+        expand = _newState$schema$node.expand,
+        codeBlock = _newState$schema$node.codeBlock,
+        layoutSection = _newState$schema$node.layoutSection;
+      var breakoutResizableNodes = new Set([expand, codeBlock, layoutSection]);
+      var isFullWidthEnabled = !((options === null || options === void 0 ? void 0 : options.allowBreakoutButton) === true);
+      if ((0, _document.isReplaceDocOperation)(transactions, oldState)) {
+        newState.doc.forEach(function (node, pos) {
+          var _addBreakoutToResizab = addBreakoutToResizableNode({
+              node: node,
+              pos: pos,
+              newState: newState,
+              newTr: newTr,
+              breakoutResizableNodes: breakoutResizableNodes,
+              isFullWidthEnabled: isFullWidthEnabled
+            }),
+            updatedTr = _addBreakoutToResizab.updatedTr,
+            updatedDocChanged = _addBreakoutToResizab.updatedDocChanged;
+          newTr = updatedTr;
+          hasDocChanged = hasDocChanged || updatedDocChanged;
+        });
+      } else {
+        transactions.forEach(function (tr) {
+          var isAddingResizableNodes = tr.steps.some(function (step) {
+            return (0, _utils.stepAddsOneOf)(step, breakoutResizableNodes);
+          });
+          if (isAddingResizableNodes) {
+            var changedNodes = (0, _document.getChangedNodes)(tr);
+            changedNodes.forEach(function (_ref2) {
+              var node = _ref2.node,
+                pos = _ref2.pos;
+              var _addBreakoutToResizab2 = addBreakoutToResizableNode({
+                  node: node,
+                  pos: pos,
+                  newState: newState,
+                  newTr: newTr,
+                  breakoutResizableNodes: breakoutResizableNodes,
+                  isFullWidthEnabled: isFullWidthEnabled
+                }),
+                updatedTr = _addBreakoutToResizab2.updatedTr,
+                updatedDocChanged = _addBreakoutToResizab2.updatedDocChanged;
+              newTr = updatedTr;
+              hasDocChanged = hasDocChanged || updatedDocChanged;
+            });
+          }
+        });
+      }
+      if (hasDocChanged) {
+        return newTr;
+      }
     }
   });
 };

package/dist/es2019/breakoutPlugin.js

@@ -171,7 +171,7 @@ export const breakoutPlugin = ({
     if (editorExperiment('platform_editor_breakout_resizing', true)) {
       return [{
         name: 'breakout-resizing',
-        plugin: () => createResizingPlugin(api)
+        plugin: () => createResizingPlugin(api, options)
       }];
     }
     return [{

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

@@ -1,12 +1,13 @@
 // TODO: ED-28029 - add fixes for expands and codeblocks
-export function setBreakoutWidth(width, pos, isLivePage) {
+export function setBreakoutWidth(width, mode, pos, isLivePage) {
   return (state, dispatch) => {
     const node = state.doc.nodeAt(pos);
     if (!node) {
       return false;
     }
     const tr = state.tr.setNodeMarkup(pos, node.type, node.attrs, [state.schema.marks.breakout.create({
-      width
+      width,
+      mode
     })]);
     if (dispatch) {
       dispatch(tr);

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

@@ -1,7 +1,7 @@
-import { akEditorGutterPaddingDynamic, akEditorGutterPadding } from "@atlaskit/editor-shared-styles";
-import { preventUnhandled } from "@atlaskit/pragmatic-drag-and-drop/prevent-unhandled";
-import { setBreakoutWidth } from "../editor-commands/set-breakout-width";
-import { LOCAL_RESIZE_PROPERTY } from "./resizing-mark-view";
+import { akEditorGutterPaddingDynamic, akEditorGutterPadding } from '@atlaskit/editor-shared-styles';
+import { preventUnhandled } from '@atlaskit/pragmatic-drag-and-drop/prevent-unhandled';
+import { setBreakoutWidth } from '../editor-commands/set-breakout-width';
+import { LOCAL_RESIZE_PROPERTY } from './resizing-mark-view';
 const RESIZE_RATIO = 2;
 const WIDTHS = {
   MIN: 760,
@@ -21,7 +21,6 @@ function getProposedWidth({
   const containerWidth = ((api === null || api === void 0 ? void 0 : (_api$width$sharedStat = api.width.sharedState) === null || _api$width$sharedStat === void 0 ? void 0 : (_api$width$sharedStat2 = _api$width$sharedStat.currentState()) === null || _api$width$sharedStat2 === void 0 ? void 0 : _api$width$sharedStat2.width) || 0) - 2 * akEditorGutterPaddingDynamic() - akEditorGutterPadding;
   return Math.min(Math.max(WIDTHS.MIN, Math.min(proposedWidth, containerWidth)), WIDTHS.MAX);
 }
-;
 export function createResizerCallbacks({
   dom,
   contentDOM,
@@ -59,13 +58,14 @@ export function createResizerCallbacks({
       if (pos === undefined) {
         return;
       }
+      const mode = mark.attrs.mode;
       const initialWidth = mark.attrs.width;
       const newWidth = getProposedWidth({
         initialWidth,
         location,
         api
       });
-      setBreakoutWidth(newWidth, pos)(view.state, view.dispatch);
+      setBreakoutWidth(newWidth, mode, pos)(view.state, view.dispatch);
       contentDOM.style.removeProperty(LOCAL_RESIZE_PROPERTY);
       view.dispatch(view.state.tr.setMeta('is-resizer-resizing', false).setMeta('scrollIntoView', false));
       api === null || api === void 0 ? void 0 : api.core.actions.execute((_api$userIntent2 = api.userIntent) === null || _api$userIntent2 === void 0 ? void 0 : _api$userIntent2.commands.setCurrentUserIntent('default'));

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

@@ -1,8 +1,49 @@
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { 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, akEditorCalculatedWideLayoutWidth } from '@atlaskit/editor-shared-styles';
 import { ResizingMarkView } from './resizing-mark-view';
+const addBreakoutToResizableNode = ({
+  node,
+  pos,
+  newState,
+  newTr,
+  breakoutResizableNodes,
+  isFullWidthEnabled
+}) => {
+  let updatedDocChanged = false;
+  let updatedTr = newTr;
+  const $pos = newState.doc.resolve(pos);
+  const isTopLevelNode = ($pos === null || $pos === void 0 ? void 0 : $pos.depth) === 0;
+  if (breakoutResizableNodes.has(node.type) && isTopLevelNode) {
+    const {
+      breakout
+    } = newState.schema.marks;
+    const breakoutMark = node.marks.find(mark => mark.type === breakout);
+    if (!breakoutMark) {
+      const width = isFullWidthEnabled ? akEditorFullWidthLayoutWidth : akEditorDefaultLayoutWidth;
+      updatedTr = newTr.setNodeMarkup(pos, node.type, node.attrs, [breakout.create({
+        width: width
+      })]);
+      updatedDocChanged = true;
+    } else if ((breakoutMark === null || breakoutMark === void 0 ? void 0 : breakoutMark.attrs.width) === null || (breakoutMark === null || breakoutMark === void 0 ? void 0 : breakoutMark.attrs.width) === undefined) {
+      const mode = breakoutMark.attrs.mode;
+      const newWidth = mode === 'wide' ? akEditorCalculatedWideLayoutWidth : akEditorFullWidthLayoutWidth;
+      updatedTr = newTr.setNodeMarkup(pos, node.type, node.attrs, [breakout.create({
+        width: newWidth,
+        mode: mode
+      })]);
+      updatedDocChanged = true;
+    }
+  }
+  return {
+    updatedTr,
+    updatedDocChanged
+  };
+};
 export const resizingPluginKey = new PluginKey('breakout-resizing');
-export const createResizingPlugin = api => {
+export const createResizingPlugin = (api, options) => {
   return new SafePlugin({
     key: resizingPluginKey,
     props: {
@@ -11,6 +52,62 @@ export const createResizingPlugin = api => {
           return new ResizingMarkView(mark, view, api);
         }
       }
+    },
+    appendTransaction(transactions, oldState, newState) {
+      let newTr = newState.tr;
+      let hasDocChanged = false;
+      const {
+        expand,
+        codeBlock,
+        layoutSection
+      } = newState.schema.nodes;
+      const breakoutResizableNodes = new Set([expand, codeBlock, layoutSection]);
+      const isFullWidthEnabled = !((options === null || options === void 0 ? void 0 : options.allowBreakoutButton) === true);
+      if (isReplaceDocOperation(transactions, oldState)) {
+        newState.doc.forEach((node, pos) => {
+          const {
+            updatedTr,
+            updatedDocChanged
+          } = addBreakoutToResizableNode({
+            node,
+            pos,
+            newState,
+            newTr,
+            breakoutResizableNodes,
+            isFullWidthEnabled
+          });
+          newTr = updatedTr;
+          hasDocChanged = hasDocChanged || updatedDocChanged;
+        });
+      } else {
+        transactions.forEach(tr => {
+          const isAddingResizableNodes = tr.steps.some(step => stepAddsOneOf(step, breakoutResizableNodes));
+          if (isAddingResizableNodes) {
+            const changedNodes = getChangedNodes(tr);
+            changedNodes.forEach(({
+              node,
+              pos
+            }) => {
+              const {
+                updatedTr,
+                updatedDocChanged
+              } = addBreakoutToResizableNode({
+                node,
+                pos,
+                newState,
+                newTr,
+                breakoutResizableNodes,
+                isFullWidthEnabled
+              });
+              newTr = updatedTr;
+              hasDocChanged = hasDocChanged || updatedDocChanged;
+            });
+          }
+        });
+      }
+      if (hasDocChanged) {
+        return newTr;
+      }
     }
   });
 };

package/dist/esm/breakoutPlugin.js

@@ -171,7 +171,7 @@ export var breakoutPlugin = function breakoutPlugin(_ref3) {
         return [{
           name: 'breakout-resizing',
           plugin: function plugin() {
-            return createResizingPlugin(api);
+            return createResizingPlugin(api, options);
           }
         }];
       }

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

@@ -1,12 +1,13 @@
 // TODO: ED-28029 - add fixes for expands and codeblocks
-export function setBreakoutWidth(width, pos, isLivePage) {
+export function setBreakoutWidth(width, mode, pos, isLivePage) {
   return function (state, dispatch) {
     var node = state.doc.nodeAt(pos);
     if (!node) {
       return false;
     }
     var tr = state.tr.setNodeMarkup(pos, node.type, node.attrs, [state.schema.marks.breakout.create({
-      width: width
+      width: width,
+      mode: mode
     })]);
     if (dispatch) {
       dispatch(tr);

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

@@ -1,7 +1,7 @@
-import { akEditorGutterPaddingDynamic, akEditorGutterPadding } from "@atlaskit/editor-shared-styles";
-import { preventUnhandled } from "@atlaskit/pragmatic-drag-and-drop/prevent-unhandled";
-import { setBreakoutWidth } from "../editor-commands/set-breakout-width";
-import { LOCAL_RESIZE_PROPERTY } from "./resizing-mark-view";
+import { akEditorGutterPaddingDynamic, akEditorGutterPadding } from '@atlaskit/editor-shared-styles';
+import { preventUnhandled } from '@atlaskit/pragmatic-drag-and-drop/prevent-unhandled';
+import { setBreakoutWidth } from '../editor-commands/set-breakout-width';
+import { LOCAL_RESIZE_PROPERTY } from './resizing-mark-view';
 var RESIZE_RATIO = 2;
 var WIDTHS = {
   MIN: 760,
@@ -20,7 +20,6 @@ function getProposedWidth(_ref) {
   var containerWidth = ((api === null || api === void 0 || (_api$width$sharedStat = api.width.sharedState) === null || _api$width$sharedStat === void 0 || (_api$width$sharedStat = _api$width$sharedStat.currentState()) === null || _api$width$sharedStat === void 0 ? void 0 : _api$width$sharedStat.width) || 0) - 2 * akEditorGutterPaddingDynamic() - akEditorGutterPadding;
   return Math.min(Math.max(WIDTHS.MIN, Math.min(proposedWidth, containerWidth)), WIDTHS.MAX);
 }
-;
 export function createResizerCallbacks(_ref2) {
   var dom = _ref2.dom,
     contentDOM = _ref2.contentDOM,
@@ -55,13 +54,14 @@ export function createResizerCallbacks(_ref2) {
       if (pos === undefined) {
         return;
       }
+      var mode = mark.attrs.mode;
       var initialWidth = mark.attrs.width;
       var newWidth = getProposedWidth({
         initialWidth: initialWidth,
         location: location,
         api: api
       });
-      setBreakoutWidth(newWidth, pos)(view.state, view.dispatch);
+      setBreakoutWidth(newWidth, mode, pos)(view.state, view.dispatch);
       contentDOM.style.removeProperty(LOCAL_RESIZE_PROPERTY);
       view.dispatch(view.state.tr.setMeta('is-resizer-resizing', false).setMeta('scrollIntoView', false));
       api === null || api === void 0 || api.core.actions.execute((_api$userIntent2 = api.userIntent) === null || _api$userIntent2 === void 0 ? void 0 : _api$userIntent2.commands.setCurrentUserIntent('default'));

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

@@ -1,8 +1,48 @@
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { 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, akEditorCalculatedWideLayoutWidth } from '@atlaskit/editor-shared-styles';
 import { ResizingMarkView } from './resizing-mark-view';
+var addBreakoutToResizableNode = function addBreakoutToResizableNode(_ref) {
+  var node = _ref.node,
+    pos = _ref.pos,
+    newState = _ref.newState,
+    newTr = _ref.newTr,
+    breakoutResizableNodes = _ref.breakoutResizableNodes,
+    isFullWidthEnabled = _ref.isFullWidthEnabled;
+  var updatedDocChanged = false;
+  var updatedTr = newTr;
+  var $pos = newState.doc.resolve(pos);
+  var isTopLevelNode = ($pos === null || $pos === void 0 ? void 0 : $pos.depth) === 0;
+  if (breakoutResizableNodes.has(node.type) && isTopLevelNode) {
+    var breakout = newState.schema.marks.breakout;
+    var breakoutMark = node.marks.find(function (mark) {
+      return mark.type === breakout;
+    });
+    if (!breakoutMark) {
+      var width = isFullWidthEnabled ? akEditorFullWidthLayoutWidth : akEditorDefaultLayoutWidth;
+      updatedTr = newTr.setNodeMarkup(pos, node.type, node.attrs, [breakout.create({
+        width: width
+      })]);
+      updatedDocChanged = true;
+    } else if ((breakoutMark === null || breakoutMark === void 0 ? void 0 : breakoutMark.attrs.width) === null || (breakoutMark === null || breakoutMark === void 0 ? void 0 : breakoutMark.attrs.width) === undefined) {
+      var mode = breakoutMark.attrs.mode;
+      var newWidth = mode === 'wide' ? akEditorCalculatedWideLayoutWidth : akEditorFullWidthLayoutWidth;
+      updatedTr = newTr.setNodeMarkup(pos, node.type, node.attrs, [breakout.create({
+        width: newWidth,
+        mode: mode
+      })]);
+      updatedDocChanged = true;
+    }
+  }
+  return {
+    updatedTr: updatedTr,
+    updatedDocChanged: updatedDocChanged
+  };
+};
 export var resizingPluginKey = new PluginKey('breakout-resizing');
-export var createResizingPlugin = function createResizingPlugin(api) {
+export var createResizingPlugin = function createResizingPlugin(api, options) {
   return new SafePlugin({
     key: resizingPluginKey,
     props: {
@@ -11,6 +51,60 @@ export var createResizingPlugin = function createResizingPlugin(api) {
           return new ResizingMarkView(mark, view, api);
         }
       }
+    },
+    appendTransaction: function appendTransaction(transactions, oldState, newState) {
+      var newTr = newState.tr;
+      var hasDocChanged = false;
+      var _newState$schema$node = newState.schema.nodes,
+        expand = _newState$schema$node.expand,
+        codeBlock = _newState$schema$node.codeBlock,
+        layoutSection = _newState$schema$node.layoutSection;
+      var breakoutResizableNodes = new Set([expand, codeBlock, layoutSection]);
+      var isFullWidthEnabled = !((options === null || options === void 0 ? void 0 : options.allowBreakoutButton) === true);
+      if (isReplaceDocOperation(transactions, oldState)) {
+        newState.doc.forEach(function (node, pos) {
+          var _addBreakoutToResizab = addBreakoutToResizableNode({
+              node: node,
+              pos: pos,
+              newState: newState,
+              newTr: newTr,
+              breakoutResizableNodes: breakoutResizableNodes,
+              isFullWidthEnabled: isFullWidthEnabled
+            }),
+            updatedTr = _addBreakoutToResizab.updatedTr,
+            updatedDocChanged = _addBreakoutToResizab.updatedDocChanged;
+          newTr = updatedTr;
+          hasDocChanged = hasDocChanged || updatedDocChanged;
+        });
+      } else {
+        transactions.forEach(function (tr) {
+          var isAddingResizableNodes = tr.steps.some(function (step) {
+            return stepAddsOneOf(step, breakoutResizableNodes);
+          });
+          if (isAddingResizableNodes) {
+            var changedNodes = getChangedNodes(tr);
+            changedNodes.forEach(function (_ref2) {
+              var node = _ref2.node,
+                pos = _ref2.pos;
+              var _addBreakoutToResizab2 = addBreakoutToResizableNode({
+                  node: node,
+                  pos: pos,
+                  newState: newState,
+                  newTr: newTr,
+                  breakoutResizableNodes: breakoutResizableNodes,
+                  isFullWidthEnabled: isFullWidthEnabled
+                }),
+                updatedTr = _addBreakoutToResizab2.updatedTr,
+                updatedDocChanged = _addBreakoutToResizab2.updatedDocChanged;
+              newTr = updatedTr;
+              hasDocChanged = hasDocChanged || updatedDocChanged;
+            });
+          }
+        });
+      }
+      if (hasDocChanged) {
+        return newTr;
+      }
     }
   });
 };

package/dist/types/editor-commands/set-breakout-width.d.ts

@@ -1,2 +1,2 @@
-import type { Command } from '@atlaskit/editor-common/types';
-export declare function setBreakoutWidth(width: number, pos: number, isLivePage?: boolean): Command;
+import type { BreakoutMode, Command } from '@atlaskit/editor-common/types';
+export declare function setBreakoutWidth(width: number, mode: BreakoutMode, pos: number, isLivePage?: boolean): Command;

package/dist/types/pm-plugins/resizer-callbacks.d.ts

@@ -1,9 +1,9 @@
-import { ExtractInjectionAPI } from "@atlaskit/editor-common/types";
+import { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import { Mark } from '@atlaskit/editor-prosemirror/model';
-import { EditorView } from "@atlaskit/editor-prosemirror/view";
-import { BaseEventPayload, ElementDragType } from "@atlaskit/pragmatic-drag-and-drop/types";
-import { BreakoutPlugin } from "../breakoutPluginType";
-export declare function createResizerCallbacks({ dom, contentDOM, view, mark, api }: {
+import { EditorView } from '@atlaskit/editor-prosemirror/view';
+import { BaseEventPayload, ElementDragType } from '@atlaskit/pragmatic-drag-and-drop/types';
+import { BreakoutPlugin } from '../breakoutPluginType';
+export declare function createResizerCallbacks({ dom, contentDOM, view, mark, api, }: {
     dom: HTMLElement;
     contentDOM: HTMLElement;
     view: EditorView;

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

@@ -2,5 +2,6 @@ import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
 import { BreakoutPlugin } from '../breakoutPluginType';
+import type { BreakoutPluginOptions } from '../breakoutPluginType';
 export declare const resizingPluginKey: PluginKey<any>;
-export declare const createResizingPlugin: (api: ExtractInjectionAPI<BreakoutPlugin> | undefined) => SafePlugin<any>;
+export declare const createResizingPlugin: (api: ExtractInjectionAPI<BreakoutPlugin> | undefined, options?: BreakoutPluginOptions) => SafePlugin<any>;

package/dist/types-ts4.5/editor-commands/set-breakout-width.d.ts

@@ -1,2 +1,2 @@
-import type { Command } from '@atlaskit/editor-common/types';
-export declare function setBreakoutWidth(width: number, pos: number, isLivePage?: boolean): Command;
+import type { BreakoutMode, Command } from '@atlaskit/editor-common/types';
+export declare function setBreakoutWidth(width: number, mode: BreakoutMode, pos: number, isLivePage?: boolean): Command;

package/dist/types-ts4.5/pm-plugins/resizer-callbacks.d.ts

@@ -1,9 +1,9 @@
-import { ExtractInjectionAPI } from "@atlaskit/editor-common/types";
+import { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import { Mark } from '@atlaskit/editor-prosemirror/model';
-import { EditorView } from "@atlaskit/editor-prosemirror/view";
-import { BaseEventPayload, ElementDragType } from "@atlaskit/pragmatic-drag-and-drop/types";
-import { BreakoutPlugin } from "../breakoutPluginType";
-export declare function createResizerCallbacks({ dom, contentDOM, view, mark, api }: {
+import { EditorView } from '@atlaskit/editor-prosemirror/view';
+import { BaseEventPayload, ElementDragType } from '@atlaskit/pragmatic-drag-and-drop/types';
+import { BreakoutPlugin } from '../breakoutPluginType';
+export declare function createResizerCallbacks({ dom, contentDOM, view, mark, api, }: {
     dom: HTMLElement;
     contentDOM: HTMLElement;
     view: EditorView;

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

@@ -2,5 +2,6 @@ import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
 import { BreakoutPlugin } from '../breakoutPluginType';
+import type { BreakoutPluginOptions } from '../breakoutPluginType';
 export declare const resizingPluginKey: PluginKey<any>;
-export declare const createResizingPlugin: (api: ExtractInjectionAPI<BreakoutPlugin> | undefined) => SafePlugin<any>;
+export declare const createResizingPlugin: (api: ExtractInjectionAPI<BreakoutPlugin> | undefined, options?: BreakoutPluginOptions) => SafePlugin<any>;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-breakout",
-	"version": "2.2.6",
+	"version": "2.3.1",
 	"description": "Breakout plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -34,19 +34,19 @@
 	},
 	"dependencies": {
 		"@atlaskit/adf-schema": "^47.6.0",
-		"@atlaskit/editor-common": "^105.8.0",
-		"@atlaskit/editor-plugin-block-controls": "^3.14.0",
+		"@atlaskit/editor-common": "^105.10.0",
+		"@atlaskit/editor-plugin-block-controls": "^3.15.0",
 		"@atlaskit/editor-plugin-editor-disabled": "^2.0.0",
-		"@atlaskit/editor-plugin-editor-viewmode": "^3.1.0",
+		"@atlaskit/editor-plugin-editor-viewmode": "^4.0.0",
 		"@atlaskit/editor-plugin-user-intent": "^0.1.0",
 		"@atlaskit/editor-plugin-width": "^3.0.0",
 		"@atlaskit/editor-prosemirror": "7.0.0",
 		"@atlaskit/editor-shared-styles": "^3.4.0",
-		"@atlaskit/icon": "^26.1.0",
+		"@atlaskit/icon": "^26.3.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/pragmatic-drag-and-drop": "^1.7.0",
 		"@atlaskit/theme": "^18.0.0",
-		"@atlaskit/tmp-editor-statsig": "^4.24.0",
+		"@atlaskit/tmp-editor-statsig": "^5.0.0",
 		"@atlaskit/tokens": "^4.9.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1"