@atlaskit/editor-plugin-breakout 1.8.7 → 1.9.1

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @atlaskit/editor-plugin-breakout
 
+## 1.9.1
+
+### Patch Changes
+
+- [#158057](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/158057)
+  [`1051d541ab905`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/1051d541ab905) -
+  migrate breakout button icons
+- Updated dependencies
+
+## 1.9.0
+
+### Minor Changes
+
+- [#159777](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/159777)
+  [`64dae465493a4`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/64dae465493a4) -
+  Add Breakout Resizing component to editor-common, add support in Layout plugin
+
+### Patch Changes
+
+- [#158291](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/158291)
+  [`f485597c02e9a`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/f485597c02e9a) -
+  Refactoring the core editor component to remove unsafe methods for React 18.
+- Updated dependencies
+
 ## 1.8.7
 
 ### Patch Changes

package/dist/cjs/plugin.js

@@ -134,13 +134,26 @@ mark, view) {
   dom.style.display = 'flex';
   dom.style.justifyContent = 'center';
   contentDOM.style.transition = "min-width 0.5s ".concat(_editorSharedStyles.akEditorSwoopCubicBezier);
-
-  // original breakout algorithm is in calcBreakoutWidth from platform/packages/editor/editor-common/src/utils/breakout.ts
-  if (mark.attrs.mode === 'full-width') {
-    contentDOM.style.minWidth = "max(var(--ak-editor--line-length), min(var(--ak-editor--full-width-layout-width), calc(100cqw - var(--ak-editor--breakout-full-page-guttering-padding))))";
-  }
-  if (mark.attrs.mode === 'wide') {
-    contentDOM.style.minWidth = "max(var(--ak-editor--line-length), min(var(--ak-editor--breakout-wide-layout-width), calc(100cqw - var(--ak-editor--breakout-full-page-guttering-padding))))";
+  if ((0, _platformFeatureFlags.fg)('platform_editor_advanced_layouts_breakout_resizing')) {
+    if (mark.attrs.width) {
+      contentDOM.style.minWidth = "min(".concat(mark.attrs.width, "px, calc(100cqw - var(--ak-editor--breakout-full-page-guttering-padding)))");
+    } else {
+      // original breakout algorithm is in calcBreakoutWidth from platform/packages/editor/editor-common/src/utils/breakout.ts
+      if (mark.attrs.mode === 'full-width') {
+        contentDOM.style.minWidth = "max(var(--ak-editor--line-length), min(var(--ak-editor--full-width-layout-width), calc(100cqw - var(--ak-editor--breakout-full-page-guttering-padding))))";
+      }
+      if (mark.attrs.mode === 'wide') {
+        contentDOM.style.minWidth = "max(var(--ak-editor--line-length), min(var(--ak-editor--breakout-wide-layout-width), calc(100cqw - var(--ak-editor--breakout-full-page-guttering-padding))))";
+      }
+    }
+  } else {
+    // original breakout algorithm is in calcBreakoutWidth from platform/packages/editor/editor-common/src/utils/breakout.ts
+    if (mark.attrs.mode === 'full-width') {
+      contentDOM.style.minWidth = "max(var(--ak-editor--line-length), min(var(--ak-editor--full-width-layout-width), calc(100cqw - var(--ak-editor--breakout-full-page-guttering-padding))))";
+    }
+    if (mark.attrs.mode === 'wide') {
+      contentDOM.style.minWidth = "max(var(--ak-editor--line-length), min(var(--ak-editor--breakout-wide-layout-width), calc(100cqw - var(--ak-editor--breakout-full-page-guttering-padding))))";
+    }
   }
   this.dom = dom;
   this.mark = mark;
@@ -192,24 +205,36 @@ function createPlugin(pluginInjectionApi, _ref2) {
   });
 }
 var LayoutButtonWrapper = function LayoutButtonWrapper(_ref3) {
-  var _breakoutState$breako, _breakoutState$breako2;
+  var _breakoutState$breako3, _breakoutState$breako4;
   var api = _ref3.api,
     editorView = _ref3.editorView,
     boundariesElement = _ref3.boundariesElement,
     scrollableElement = _ref3.scrollableElement,
     mountPoint = _ref3.mountPoint;
   // Re-render with `width` (but don't use state) due to https://bitbucket.org/atlassian/%7Bc8e2f021-38d2-46d0-9b7a-b3f7b428f724%7D/pull-requests/24272
-  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['width', 'breakout', 'editorViewMode']),
+  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['width', 'breakout', 'editorViewMode', 'editorDisabled']),
     breakoutState = _useSharedPluginState.breakoutState,
-    editorViewModeState = _useSharedPluginState.editorViewModeState;
+    editorViewModeState = _useSharedPluginState.editorViewModeState,
+    editorDisabledState = _useSharedPluginState.editorDisabledState;
   var isViewMode = (editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'view';
   var isEditMode = (editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'edit';
+  if ((0, _platformFeatureFlags.fg)('platform_editor_react_editor_view_react_18')) {
+    var _breakoutState$breako, _breakoutState$breako2;
+    return !isViewMode && editorDisabledState !== undefined && !(editorDisabledState !== null && editorDisabledState !== void 0 && editorDisabledState.editorDisabled) ? /*#__PURE__*/_react.default.createElement(_LayoutButton.default, {
+      editorView: editorView,
+      mountPoint: mountPoint,
+      boundariesElement: boundariesElement,
+      scrollableElement: scrollableElement,
+      node: (_breakoutState$breako = breakoutState === null || breakoutState === void 0 || (_breakoutState$breako2 = breakoutState.breakoutNode) === null || _breakoutState$breako2 === void 0 ? void 0 : _breakoutState$breako2.node) !== null && _breakoutState$breako !== void 0 ? _breakoutState$breako : null,
+      isLivePage: isEditMode
+    }) : null;
+  }
   return !isViewMode ? /*#__PURE__*/_react.default.createElement(_LayoutButton.default, {
     editorView: editorView,
     mountPoint: mountPoint,
     boundariesElement: boundariesElement,
     scrollableElement: scrollableElement,
-    node: (_breakoutState$breako = breakoutState === null || breakoutState === void 0 || (_breakoutState$breako2 = breakoutState.breakoutNode) === null || _breakoutState$breako2 === void 0 ? void 0 : _breakoutState$breako2.node) !== null && _breakoutState$breako !== void 0 ? _breakoutState$breako : null,
+    node: (_breakoutState$breako3 = breakoutState === null || breakoutState === void 0 || (_breakoutState$breako4 = breakoutState.breakoutNode) === null || _breakoutState$breako4 === void 0 ? void 0 : _breakoutState$breako4.node) !== null && _breakoutState$breako3 !== void 0 ? _breakoutState$breako3 : null,
     isLivePage: isEditMode
   }) : null;
 };
@@ -252,7 +277,7 @@ var breakoutPlugin = exports.breakoutPlugin = function breakoutPlugin(_ref4) {
         popupsBoundariesElement = _ref5.popupsBoundariesElement,
         popupsScrollableElement = _ref5.popupsScrollableElement;
       // This is a bit crappy, but should be resolved once we move to a static schema.
-      if (options && !options.allowBreakoutButton || !editorView.editable) {
+      if (options && !options.allowBreakoutButton || !editorView.editable && !(0, _platformFeatureFlags.fg)('platform_editor_react_editor_view_react_18')) {
         return null;
       }
       return /*#__PURE__*/_react.default.createElement(LayoutButtonWrapper, {

package/dist/cjs/ui/LayoutButton.js

@@ -14,6 +14,8 @@ var _uiMenu = require("@atlaskit/editor-common/ui-menu");
 var _utils = require("@atlaskit/editor-common/utils");
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _utils2 = require("@atlaskit/editor-prosemirror/utils");
+var _growHorizontal = _interopRequireDefault(require("@atlaskit/icon/core/grow-horizontal"));
+var _shrinkHorizontal = _interopRequireDefault(require("@atlaskit/icon/core/shrink-horizontal"));
 var _collapse = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/collapse"));
 var _expand = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/expand"));
 var _colors = require("@atlaskit/theme/colors");
@@ -111,10 +113,14 @@ var LayoutButton = function LayoutButton(_ref) {
     onClick: function onClick() {
       return handleClick(nextBreakoutMode);
     },
-    iconBefore: breakoutMode === 'full-width' ? (0, _react2.jsx)(_collapse.default, {
-      label: title
-    }) : (0, _react2.jsx)(_expand.default, {
-      label: title
+    iconBefore: breakoutMode === 'full-width' ? (0, _react2.jsx)(_shrinkHorizontal.default, {
+      label: title,
+      LEGACY_fallbackIcon: _collapse.default,
+      spacing: "spacious"
+    }) : (0, _react2.jsx)(_growHorizontal.default, {
+      label: title,
+      LEGACY_fallbackIcon: _expand.default,
+      spacing: "spacious"
     })
   })));
 };

package/dist/cjs/utils/is-supported-node.js

@@ -4,12 +4,17 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.isSupportedNodeForBreakout = isSupportedNodeForBreakout;
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var supportedNodesForBreakout = ['codeBlock', 'layoutSection', 'expand'];
+var supportedNodesForBreakoutAdvancedLayouts = ['codeBlock', 'expand'];
 
 /**
  * Check if breakout can be applied to a node
  * @param node Node to check
  */
 function isSupportedNodeForBreakout(node) {
+  if ((0, _platformFeatureFlags.fg)('platform_editor_advanced_layouts_breakout_resizing')) {
+    return supportedNodesForBreakoutAdvancedLayouts.indexOf(node.type.name) !== -1;
+  }
   return supportedNodesForBreakout.indexOf(node.type.name) !== -1;
 }

package/dist/es2019/plugin.js

@@ -121,13 +121,26 @@ class BreakoutView {
     dom.style.display = 'flex';
     dom.style.justifyContent = 'center';
     contentDOM.style.transition = `min-width 0.5s ${akEditorSwoopCubicBezier}`;
-
-    // original breakout algorithm is in calcBreakoutWidth from platform/packages/editor/editor-common/src/utils/breakout.ts
-    if (mark.attrs.mode === 'full-width') {
-      contentDOM.style.minWidth = `max(var(--ak-editor--line-length), min(var(--ak-editor--full-width-layout-width), calc(100cqw - var(--ak-editor--breakout-full-page-guttering-padding))))`;
-    }
-    if (mark.attrs.mode === 'wide') {
-      contentDOM.style.minWidth = `max(var(--ak-editor--line-length), min(var(--ak-editor--breakout-wide-layout-width), calc(100cqw - var(--ak-editor--breakout-full-page-guttering-padding))))`;
+    if (fg('platform_editor_advanced_layouts_breakout_resizing')) {
+      if (mark.attrs.width) {
+        contentDOM.style.minWidth = `min(${mark.attrs.width}px, calc(100cqw - var(--ak-editor--breakout-full-page-guttering-padding)))`;
+      } else {
+        // original breakout algorithm is in calcBreakoutWidth from platform/packages/editor/editor-common/src/utils/breakout.ts
+        if (mark.attrs.mode === 'full-width') {
+          contentDOM.style.minWidth = `max(var(--ak-editor--line-length), min(var(--ak-editor--full-width-layout-width), calc(100cqw - var(--ak-editor--breakout-full-page-guttering-padding))))`;
+        }
+        if (mark.attrs.mode === 'wide') {
+          contentDOM.style.minWidth = `max(var(--ak-editor--line-length), min(var(--ak-editor--breakout-wide-layout-width), calc(100cqw - var(--ak-editor--breakout-full-page-guttering-padding))))`;
+        }
+      }
+    } else {
+      // original breakout algorithm is in calcBreakoutWidth from platform/packages/editor/editor-common/src/utils/breakout.ts
+      if (mark.attrs.mode === 'full-width') {
+        contentDOM.style.minWidth = `max(var(--ak-editor--line-length), min(var(--ak-editor--full-width-layout-width), calc(100cqw - var(--ak-editor--breakout-full-page-guttering-padding))))`;
+      }
+      if (mark.attrs.mode === 'wide') {
+        contentDOM.style.minWidth = `max(var(--ak-editor--line-length), min(var(--ak-editor--breakout-wide-layout-width), calc(100cqw - var(--ak-editor--breakout-full-page-guttering-padding))))`;
+      }
     }
     this.dom = dom;
     this.mark = mark;
@@ -188,20 +201,32 @@ const LayoutButtonWrapper = ({
   scrollableElement,
   mountPoint
 }) => {
-  var _breakoutState$breako, _breakoutState$breako2;
+  var _breakoutState$breako3, _breakoutState$breako4;
   // Re-render with `width` (but don't use state) due to https://bitbucket.org/atlassian/%7Bc8e2f021-38d2-46d0-9b7a-b3f7b428f724%7D/pull-requests/24272
   const {
     breakoutState,
-    editorViewModeState
-  } = useSharedPluginState(api, ['width', 'breakout', 'editorViewMode']);
+    editorViewModeState,
+    editorDisabledState
+  } = useSharedPluginState(api, ['width', 'breakout', 'editorViewMode', 'editorDisabled']);
   const isViewMode = (editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'view';
   const isEditMode = (editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'edit';
+  if (fg('platform_editor_react_editor_view_react_18')) {
+    var _breakoutState$breako, _breakoutState$breako2;
+    return !isViewMode && editorDisabledState !== undefined && !(editorDisabledState !== null && editorDisabledState !== void 0 && editorDisabledState.editorDisabled) ? /*#__PURE__*/React.createElement(LayoutButton, {
+      editorView: editorView,
+      mountPoint: mountPoint,
+      boundariesElement: boundariesElement,
+      scrollableElement: scrollableElement,
+      node: (_breakoutState$breako = breakoutState === null || breakoutState === void 0 ? void 0 : (_breakoutState$breako2 = breakoutState.breakoutNode) === null || _breakoutState$breako2 === void 0 ? void 0 : _breakoutState$breako2.node) !== null && _breakoutState$breako !== void 0 ? _breakoutState$breako : null,
+      isLivePage: isEditMode
+    }) : null;
+  }
   return !isViewMode ? /*#__PURE__*/React.createElement(LayoutButton, {
     editorView: editorView,
     mountPoint: mountPoint,
     boundariesElement: boundariesElement,
     scrollableElement: scrollableElement,
-    node: (_breakoutState$breako = breakoutState === null || breakoutState === void 0 ? void 0 : (_breakoutState$breako2 = breakoutState.breakoutNode) === null || _breakoutState$breako2 === void 0 ? void 0 : _breakoutState$breako2.node) !== null && _breakoutState$breako !== void 0 ? _breakoutState$breako : null,
+    node: (_breakoutState$breako3 = breakoutState === null || breakoutState === void 0 ? void 0 : (_breakoutState$breako4 = breakoutState.breakoutNode) === null || _breakoutState$breako4 === void 0 ? void 0 : _breakoutState$breako4.node) !== null && _breakoutState$breako3 !== void 0 ? _breakoutState$breako3 : null,
     isLivePage: isEditMode
   }) : null;
 };
@@ -243,7 +268,7 @@ export const breakoutPlugin = ({
     popupsScrollableElement
   }) {
     // This is a bit crappy, but should be resolved once we move to a static schema.
-    if (options && !options.allowBreakoutButton || !editorView.editable) {
+    if (options && !options.allowBreakoutButton || !editorView.editable && !fg('platform_editor_react_editor_view_react_18')) {
       return null;
     }
     return /*#__PURE__*/React.createElement(LayoutButtonWrapper, {

package/dist/es2019/ui/LayoutButton.js

@@ -13,6 +13,8 @@ import { ToolbarButton } from '@atlaskit/editor-common/ui-menu';
 import { getNextBreakoutMode, getTitle } from '@atlaskit/editor-common/utils';
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import { findDomRefAtPos, findParentDomRefOfType } from '@atlaskit/editor-prosemirror/utils';
+import GrowHorizontalIcon from '@atlaskit/icon/core/grow-horizontal';
+import ShrinkHorizontalIcon from '@atlaskit/icon/core/shrink-horizontal';
 import CollapseIcon from '@atlaskit/icon/glyph/editor/collapse';
 import ExpandIcon from '@atlaskit/icon/glyph/editor/expand';
 import { B300, N20A, N300 } from '@atlaskit/theme/colors';
@@ -108,10 +110,14 @@ const LayoutButton = ({
     title: title,
     testId: titleMessage.id,
     onClick: () => handleClick(nextBreakoutMode),
-    iconBefore: breakoutMode === 'full-width' ? jsx(CollapseIcon, {
-      label: title
-    }) : jsx(ExpandIcon, {
-      label: title
+    iconBefore: breakoutMode === 'full-width' ? jsx(ShrinkHorizontalIcon, {
+      label: title,
+      LEGACY_fallbackIcon: CollapseIcon,
+      spacing: "spacious"
+    }) : jsx(GrowHorizontalIcon, {
+      label: title,
+      LEGACY_fallbackIcon: ExpandIcon,
+      spacing: "spacious"
     })
   })));
 };

package/dist/es2019/utils/is-supported-node.js

@@ -1,9 +1,14 @@
+import { fg } from '@atlaskit/platform-feature-flags';
 const supportedNodesForBreakout = ['codeBlock', 'layoutSection', 'expand'];
+const supportedNodesForBreakoutAdvancedLayouts = ['codeBlock', 'expand'];
 
 /**
  * Check if breakout can be applied to a node
  * @param node Node to check
  */
 export function isSupportedNodeForBreakout(node) {
+  if (fg('platform_editor_advanced_layouts_breakout_resizing')) {
+    return supportedNodesForBreakoutAdvancedLayouts.indexOf(node.type.name) !== -1;
+  }
   return supportedNodesForBreakout.indexOf(node.type.name) !== -1;
 }

package/dist/esm/plugin.js

@@ -127,13 +127,26 @@ mark, view) {
   dom.style.display = 'flex';
   dom.style.justifyContent = 'center';
   contentDOM.style.transition = "min-width 0.5s ".concat(akEditorSwoopCubicBezier);
-
-  // original breakout algorithm is in calcBreakoutWidth from platform/packages/editor/editor-common/src/utils/breakout.ts
-  if (mark.attrs.mode === 'full-width') {
-    contentDOM.style.minWidth = "max(var(--ak-editor--line-length), min(var(--ak-editor--full-width-layout-width), calc(100cqw - var(--ak-editor--breakout-full-page-guttering-padding))))";
-  }
-  if (mark.attrs.mode === 'wide') {
-    contentDOM.style.minWidth = "max(var(--ak-editor--line-length), min(var(--ak-editor--breakout-wide-layout-width), calc(100cqw - var(--ak-editor--breakout-full-page-guttering-padding))))";
+  if (fg('platform_editor_advanced_layouts_breakout_resizing')) {
+    if (mark.attrs.width) {
+      contentDOM.style.minWidth = "min(".concat(mark.attrs.width, "px, calc(100cqw - var(--ak-editor--breakout-full-page-guttering-padding)))");
+    } else {
+      // original breakout algorithm is in calcBreakoutWidth from platform/packages/editor/editor-common/src/utils/breakout.ts
+      if (mark.attrs.mode === 'full-width') {
+        contentDOM.style.minWidth = "max(var(--ak-editor--line-length), min(var(--ak-editor--full-width-layout-width), calc(100cqw - var(--ak-editor--breakout-full-page-guttering-padding))))";
+      }
+      if (mark.attrs.mode === 'wide') {
+        contentDOM.style.minWidth = "max(var(--ak-editor--line-length), min(var(--ak-editor--breakout-wide-layout-width), calc(100cqw - var(--ak-editor--breakout-full-page-guttering-padding))))";
+      }
+    }
+  } else {
+    // original breakout algorithm is in calcBreakoutWidth from platform/packages/editor/editor-common/src/utils/breakout.ts
+    if (mark.attrs.mode === 'full-width') {
+      contentDOM.style.minWidth = "max(var(--ak-editor--line-length), min(var(--ak-editor--full-width-layout-width), calc(100cqw - var(--ak-editor--breakout-full-page-guttering-padding))))";
+    }
+    if (mark.attrs.mode === 'wide') {
+      contentDOM.style.minWidth = "max(var(--ak-editor--line-length), min(var(--ak-editor--breakout-wide-layout-width), calc(100cqw - var(--ak-editor--breakout-full-page-guttering-padding))))";
+    }
   }
   this.dom = dom;
   this.mark = mark;
@@ -185,24 +198,36 @@ function createPlugin(pluginInjectionApi, _ref2) {
   });
 }
 var LayoutButtonWrapper = function LayoutButtonWrapper(_ref3) {
-  var _breakoutState$breako, _breakoutState$breako2;
+  var _breakoutState$breako3, _breakoutState$breako4;
   var api = _ref3.api,
     editorView = _ref3.editorView,
     boundariesElement = _ref3.boundariesElement,
     scrollableElement = _ref3.scrollableElement,
     mountPoint = _ref3.mountPoint;
   // Re-render with `width` (but don't use state) due to https://bitbucket.org/atlassian/%7Bc8e2f021-38d2-46d0-9b7a-b3f7b428f724%7D/pull-requests/24272
-  var _useSharedPluginState = useSharedPluginState(api, ['width', 'breakout', 'editorViewMode']),
+  var _useSharedPluginState = useSharedPluginState(api, ['width', 'breakout', 'editorViewMode', 'editorDisabled']),
     breakoutState = _useSharedPluginState.breakoutState,
-    editorViewModeState = _useSharedPluginState.editorViewModeState;
+    editorViewModeState = _useSharedPluginState.editorViewModeState,
+    editorDisabledState = _useSharedPluginState.editorDisabledState;
   var isViewMode = (editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'view';
   var isEditMode = (editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'edit';
+  if (fg('platform_editor_react_editor_view_react_18')) {
+    var _breakoutState$breako, _breakoutState$breako2;
+    return !isViewMode && editorDisabledState !== undefined && !(editorDisabledState !== null && editorDisabledState !== void 0 && editorDisabledState.editorDisabled) ? /*#__PURE__*/React.createElement(LayoutButton, {
+      editorView: editorView,
+      mountPoint: mountPoint,
+      boundariesElement: boundariesElement,
+      scrollableElement: scrollableElement,
+      node: (_breakoutState$breako = breakoutState === null || breakoutState === void 0 || (_breakoutState$breako2 = breakoutState.breakoutNode) === null || _breakoutState$breako2 === void 0 ? void 0 : _breakoutState$breako2.node) !== null && _breakoutState$breako !== void 0 ? _breakoutState$breako : null,
+      isLivePage: isEditMode
+    }) : null;
+  }
   return !isViewMode ? /*#__PURE__*/React.createElement(LayoutButton, {
     editorView: editorView,
     mountPoint: mountPoint,
     boundariesElement: boundariesElement,
     scrollableElement: scrollableElement,
-    node: (_breakoutState$breako = breakoutState === null || breakoutState === void 0 || (_breakoutState$breako2 = breakoutState.breakoutNode) === null || _breakoutState$breako2 === void 0 ? void 0 : _breakoutState$breako2.node) !== null && _breakoutState$breako !== void 0 ? _breakoutState$breako : null,
+    node: (_breakoutState$breako3 = breakoutState === null || breakoutState === void 0 || (_breakoutState$breako4 = breakoutState.breakoutNode) === null || _breakoutState$breako4 === void 0 ? void 0 : _breakoutState$breako4.node) !== null && _breakoutState$breako3 !== void 0 ? _breakoutState$breako3 : null,
     isLivePage: isEditMode
   }) : null;
 };
@@ -245,7 +270,7 @@ export var breakoutPlugin = function breakoutPlugin(_ref4) {
         popupsBoundariesElement = _ref5.popupsBoundariesElement,
         popupsScrollableElement = _ref5.popupsScrollableElement;
       // This is a bit crappy, but should be resolved once we move to a static schema.
-      if (options && !options.allowBreakoutButton || !editorView.editable) {
+      if (options && !options.allowBreakoutButton || !editorView.editable && !fg('platform_editor_react_editor_view_react_18')) {
         return null;
       }
       return /*#__PURE__*/React.createElement(LayoutButtonWrapper, {

package/dist/esm/ui/LayoutButton.js

@@ -13,6 +13,8 @@ import { ToolbarButton } from '@atlaskit/editor-common/ui-menu';
 import { getNextBreakoutMode, getTitle } from '@atlaskit/editor-common/utils';
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import { findDomRefAtPos, findParentDomRefOfType } from '@atlaskit/editor-prosemirror/utils';
+import GrowHorizontalIcon from '@atlaskit/icon/core/grow-horizontal';
+import ShrinkHorizontalIcon from '@atlaskit/icon/core/shrink-horizontal';
 import CollapseIcon from '@atlaskit/icon/glyph/editor/collapse';
 import ExpandIcon from '@atlaskit/icon/glyph/editor/expand';
 import { B300, N20A, N300 } from '@atlaskit/theme/colors';
@@ -103,10 +105,14 @@ var LayoutButton = function LayoutButton(_ref) {
     onClick: function onClick() {
       return handleClick(nextBreakoutMode);
     },
-    iconBefore: breakoutMode === 'full-width' ? jsx(CollapseIcon, {
-      label: title
-    }) : jsx(ExpandIcon, {
-      label: title
+    iconBefore: breakoutMode === 'full-width' ? jsx(ShrinkHorizontalIcon, {
+      label: title,
+      LEGACY_fallbackIcon: CollapseIcon,
+      spacing: "spacious"
+    }) : jsx(GrowHorizontalIcon, {
+      label: title,
+      LEGACY_fallbackIcon: ExpandIcon,
+      spacing: "spacious"
     })
   })));
 };

package/dist/esm/utils/is-supported-node.js

@@ -1,9 +1,14 @@
+import { fg } from '@atlaskit/platform-feature-flags';
 var supportedNodesForBreakout = ['codeBlock', 'layoutSection', 'expand'];
+var supportedNodesForBreakoutAdvancedLayouts = ['codeBlock', 'expand'];
 
 /**
  * Check if breakout can be applied to a node
  * @param node Node to check
  */
 export function isSupportedNodeForBreakout(node) {
+  if (fg('platform_editor_advanced_layouts_breakout_resizing')) {
+    return supportedNodesForBreakoutAdvancedLayouts.indexOf(node.type.name) !== -1;
+  }
   return supportedNodesForBreakout.indexOf(node.type.name) !== -1;
 }

package/dist/types/plugin.d.ts

@@ -1,4 +1,5 @@
 import type { NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
+import { type EditorDisabledPlugin } from '@atlaskit/editor-plugin-editor-disabled';
 import type { EditorViewModePlugin } from '@atlaskit/editor-plugin-editor-viewmode';
 import type { WidthPlugin } from '@atlaskit/editor-plugin-width';
 import type { BreakoutPluginState } from './types';
@@ -7,7 +8,11 @@ export interface BreakoutPluginOptions {
 }
 export type BreakoutPlugin = NextEditorPlugin<'breakout', {
     pluginConfiguration: BreakoutPluginOptions | undefined;
-    dependencies: [WidthPlugin, OptionalPlugin<EditorViewModePlugin>];
+    dependencies: [
+        WidthPlugin,
+        OptionalPlugin<EditorViewModePlugin>,
+        OptionalPlugin<EditorDisabledPlugin>
+    ];
     sharedState: Partial<BreakoutPluginState>;
 }>;
 export declare const breakoutPlugin: BreakoutPlugin;

package/dist/types-ts4.5/plugin.d.ts

@@ -1,4 +1,5 @@
 import type { NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
+import { type EditorDisabledPlugin } from '@atlaskit/editor-plugin-editor-disabled';
 import type { EditorViewModePlugin } from '@atlaskit/editor-plugin-editor-viewmode';
 import type { WidthPlugin } from '@atlaskit/editor-plugin-width';
 import type { BreakoutPluginState } from './types';
@@ -9,7 +10,8 @@ export type BreakoutPlugin = NextEditorPlugin<'breakout', {
     pluginConfiguration: BreakoutPluginOptions | undefined;
     dependencies: [
         WidthPlugin,
-        OptionalPlugin<EditorViewModePlugin>
+        OptionalPlugin<EditorViewModePlugin>,
+        OptionalPlugin<EditorDisabledPlugin>
     ];
     sharedState: Partial<BreakoutPluginState>;
 }>;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-breakout",
-	"version": "1.8.7",
+	"version": "1.9.1",
 	"description": "Breakout plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -32,7 +32,8 @@
 	},
 	"dependencies": {
 		"@atlaskit/adf-schema": "^44.2.0",
-		"@atlaskit/editor-common": "^94.11.0",
+		"@atlaskit/editor-common": "^94.13.0",
+		"@atlaskit/editor-plugin-editor-disabled": "^1.3.0",
 		"@atlaskit/editor-plugin-editor-viewmode": "^2.1.0",
 		"@atlaskit/editor-plugin-width": "^1.3.0",
 		"@atlaskit/editor-prosemirror": "6.0.0",
@@ -40,7 +41,7 @@
 		"@atlaskit/icon": "^22.24.0",
 		"@atlaskit/platform-feature-flags": "^0.3.0",
 		"@atlaskit/theme": "^14.0.0",
-		"@atlaskit/tokens": "^2.1.0",
+		"@atlaskit/tokens": "^2.2.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1"
 	},
@@ -101,6 +102,9 @@
 		"platform_editor_core_increase_full_page_guttering": {
 			"type": "boolean"
 		},
+		"platform_editor_react_editor_view_react_18": {
+			"type": "boolean"
+		},
 		"editor_support_code_block_wrapping": {
 			"type": "boolean"
 		},
@@ -109,6 +113,9 @@
 		},
 		"platform_editor_breakout_use_css": {
 			"type": "boolean"
+		},
+		"platform_editor_advanced_layouts_breakout_resizing": {
+			"type": "boolean"
 		}
 	}
 }