@atlaskit/editor-plugin-breakout 2.4.2 → 2.4.3

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/editor-plugin-breakout
 
+## 2.4.3
+
+### Patch Changes
+
+- [#163965](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/163965)
+  [`c08b8e623a378`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/c08b8e623a378) -
+  [ED-28046] Reduce the number of times the layout button re-renders
+- [#164762](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/164762)
+  [`e716071496267`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/e716071496267) -
+  [ux] Fix for expands and codeblocks so they keep their settings after resize.
+- Updated dependencies
+
 ## 2.4.2
 
 ### Patch Changes

package/dist/cjs/breakoutPlugin.js

@@ -1,18 +1,21 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.breakoutPlugin = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _adfSchema = require("@atlaskit/adf-schema");
 var _hooks = require("@atlaskit/editor-common/hooks");
 var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
 var _styles = require("@atlaskit/editor-common/styles");
+var _usePluginStateEffect = require("@atlaskit/editor-common/use-plugin-state-effect");
 var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
@@ -20,7 +23,9 @@ var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _pluginKey = require("./pm-plugins/plugin-key");
 var _resizingPlugin = require("./pm-plugins/resizing-plugin");
 var _findBreakoutNode = require("./pm-plugins/utils/find-breakout-node");
+var _getBreakoutMode = require("./pm-plugins/utils/get-breakout-mode");
 var _LayoutButton = _interopRequireDefault(require("./ui/LayoutButton"));
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var BreakoutView = /*#__PURE__*/(0, _createClass2.default)(function BreakoutView(
@@ -126,13 +131,12 @@ var useOldHook = function useOldHook(api) {
   };
 };
 var useNewHook = function useNewHook(api) {
-  var breakoutNode = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'breakout.breakoutNode');
   var isDragging = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'blockControls.isDragging');
   var isPMDragging = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'blockControls.isPMDragging');
   var mode = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'editorViewMode.mode');
   var editorDisabled = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'editorDisabled.editorDisabled');
   return {
-    breakoutNode: breakoutNode,
+    breakoutNode: undefined,
     isDragging: isDragging,
     isPMDragging: isPMDragging,
     mode: mode,
@@ -153,6 +157,27 @@ var LayoutButtonWrapper = function LayoutButtonWrapper(_ref2) {
     isPMDragging = _useSharedState.isPMDragging,
     mode = _useSharedState.mode,
     editorDisabled = _useSharedState.editorDisabled;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    breakoutNodePresent = _useState2[0],
+    setBreakoutNodePresent = _useState2[1];
+  var _useState3 = (0, _react.useState)((0, _getBreakoutMode.getBreakoutMode)(editorView.state)),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    breakoutMode = _useState4[0],
+    setBreakoutMode = _useState4[1];
+  (0, _usePluginStateEffect.usePluginStateEffect)(api, ['breakout'], function (_ref3) {
+    var breakoutState = _ref3.breakoutState;
+    if (breakoutState !== null && breakoutState !== void 0 && breakoutState.breakoutNode && !breakoutNodePresent) {
+      setBreakoutNodePresent(true);
+    }
+    if (!(breakoutState !== null && breakoutState !== void 0 && breakoutState.breakoutNode) && breakoutNodePresent) {
+      setBreakoutNodePresent(false);
+    }
+    var nextBreakoutMode = (0, _getBreakoutMode.getBreakoutMode)(editorView.state);
+    if (nextBreakoutMode !== breakoutMode) {
+      setBreakoutMode(nextBreakoutMode);
+    }
+  });
   var interactionState = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'interaction.interactionState');
   if (interactionState === 'hasNotHadInteraction' && (0, _platformFeatureFlags.fg)('platform_editor_hide_expand_selection_states')) {
     return null;
@@ -170,12 +195,14 @@ var LayoutButtonWrapper = function LayoutButtonWrapper(_ref2) {
     boundariesElement: boundariesElement,
     scrollableElement: scrollableElement,
     node: (_breakoutNode$node = breakoutNode === null || breakoutNode === void 0 ? void 0 : breakoutNode.node) !== null && _breakoutNode$node !== void 0 ? _breakoutNode$node : null,
-    isLivePage: isEditMode
+    isLivePage: isEditMode,
+    isBreakoutNodePresent: breakoutNodePresent,
+    breakoutMode: breakoutMode
   }) : null;
 };
-var breakoutPlugin = exports.breakoutPlugin = function breakoutPlugin(_ref3) {
-  var options = _ref3.config,
-    api = _ref3.api;
+var breakoutPlugin = exports.breakoutPlugin = function breakoutPlugin(_ref4) {
+  var options = _ref4.config,
+    api = _ref4.api;
   return {
     name: 'breakout',
     pmPlugins: function pmPlugins() {
@@ -214,11 +241,11 @@ var breakoutPlugin = exports.breakoutPlugin = function breakoutPlugin(_ref3) {
       }
       return pluginState;
     },
-    contentComponent: function contentComponent(_ref4) {
-      var editorView = _ref4.editorView,
-        popupsMountPoint = _ref4.popupsMountPoint,
-        popupsBoundariesElement = _ref4.popupsBoundariesElement,
-        popupsScrollableElement = _ref4.popupsScrollableElement;
+    contentComponent: function contentComponent(_ref5) {
+      var editorView = _ref5.editorView,
+        popupsMountPoint = _ref5.popupsMountPoint,
+        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) {
         return null;

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

@@ -4,7 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.setBreakoutWidth = setBreakoutWidth;
-// TODO: ED-28029 - add fixes for expands and codeblocks
+var _codeBlock = require("@atlaskit/editor-common/code-block");
+var _singlePlayerExpand = require("../pm-plugins/utils/single-player-expand");
 function setBreakoutWidth(width, mode, pos, isLivePage) {
   return function (state, dispatch) {
     var node = state.doc.nodeAt(pos);
@@ -15,6 +16,20 @@ function setBreakoutWidth(width, mode, pos, isLivePage) {
       width: width,
       mode: mode
     })]);
+    if (node.type === state.schema.nodes.expand) {
+      (0, _singlePlayerExpand.updateExpandedStateNew)({
+        tr: tr,
+        node: node,
+        pos: pos,
+        isLivePage: isLivePage
+      });
+    } else if (node.type === state.schema.nodes.codeBlock) {
+      var newNode = tr.doc.nodeAt(pos);
+      var oldNode = node;
+      if (newNode) {
+        (0, _codeBlock.transferCodeBlockWrappedValue)(oldNode, newNode);
+      }
+    }
     if (dispatch) {
       dispatch(tr);
     }

package/dist/cjs/pm-plugins/utils/single-player-expand.js

@@ -3,15 +3,38 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.updateExpandedState = void 0;
+exports.updateExpandedStateNew = exports.updateExpandedState = void 0;
 var _expand = require("@atlaskit/editor-common/expand");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
-var updateExpandedState = exports.updateExpandedState = function updateExpandedState(tr, node, isLivePage) {
+var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
+var updateExpandedStateNew = exports.updateExpandedStateNew = function updateExpandedStateNew(_ref) {
+  var tr = _ref.tr,
+    node = _ref.node,
+    pos = _ref.pos,
+    isLivePage = _ref.isLivePage;
   if (isLivePage || (0, _platformFeatureFlags.fg)('platform-editor-single-player-expand')) {
-    var wasExpandExpanded = _expand.expandedState.get(node.node);
-    var newExpand = tr.doc.nodeAt(node.pos);
+    var wasExpandExpanded = _expand.expandedState.get(node);
+    var newExpand = tr.doc.nodeAt(pos);
     if (wasExpandExpanded !== undefined && newExpand) {
       _expand.expandedState.set(newExpand, wasExpandExpanded);
     }
   }
+};
+var updateExpandedState = exports.updateExpandedState = function updateExpandedState(tr, node, isLivePage) {
+  if ((0, _experiments.editorExperiment)('platform_editor_breakout_resizing', true)) {
+    updateExpandedStateNew({
+      tr: tr,
+      node: node.node,
+      pos: node.pos,
+      isLivePage: isLivePage
+    });
+  } else {
+    if (isLivePage || (0, _platformFeatureFlags.fg)('platform-editor-single-player-expand')) {
+      var wasExpandExpanded = _expand.expandedState.get(node.node);
+      var newExpand = tr.doc.nodeAt(node.pos);
+      if (wasExpandExpanded !== undefined && newExpand) {
+        _expand.expandedState.set(newExpand, wasExpandExpanded);
+      }
+    }
+  }
 };

package/dist/cjs/ui/LayoutButton.js

@@ -20,6 +20,7 @@ var _collapse = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/coll
 var _expand = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/expand"));
 var _colors = require("@atlaskit/theme/colors");
 var _constants = require("@atlaskit/theme/constants");
+var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _removeBreakout = require("../editor-commands/remove-breakout");
 var _setBreakoutMode = require("../editor-commands/set-breakout-mode");
 var _pluginKey = require("../pm-plugins/plugin-key");
@@ -66,7 +67,9 @@ var LayoutButton = function LayoutButton(_ref) {
     scrollableElement = _ref.scrollableElement,
     editorView = _ref.editorView,
     node = _ref.node,
-    isLivePage = _ref.isLivePage;
+    isLivePage = _ref.isLivePage,
+    isBreakoutNodePresent = _ref.isBreakoutNodePresent,
+    breakoutModeProp = _ref.breakoutMode;
   var handleClick = (0, _react.useCallback)(function (breakoutMode) {
     var state = editorView.state,
       dispatch = editorView.dispatch;
@@ -77,10 +80,11 @@ var LayoutButton = function LayoutButton(_ref) {
     }
   }, [editorView, isLivePage]);
   var state = editorView.state;
-  if (!node || !(0, _isBreakoutMarkAllowed.isBreakoutMarkAllowed)(state)) {
+  var exitCondition = (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true) ? !isBreakoutNodePresent : !node;
+  if (exitCondition || !(0, _isBreakoutMarkAllowed.isBreakoutMarkAllowed)(state)) {
     return null;
   }
-  var breakoutMode = (0, _getBreakoutMode.getBreakoutMode)(editorView.state);
+  var breakoutMode = (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true) ? breakoutModeProp : (0, _getBreakoutMode.getBreakoutMode)(editorView.state);
   var titleMessage = (0, _utils.getTitle)(breakoutMode);
   var title = formatMessage(titleMessage);
   var nextBreakoutMode = (0, _utils.getNextBreakoutMode)(breakoutMode);

package/dist/es2019/breakoutPlugin.js

@@ -1,8 +1,9 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { breakout } from '@atlaskit/adf-schema';
 import { useSharedPluginState, sharedPluginStateHookMigratorFactory } from '@atlaskit/editor-common/hooks';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { BreakoutCssClassName } from '@atlaskit/editor-common/styles';
+import { usePluginStateEffect } from '@atlaskit/editor-common/use-plugin-state-effect';
 import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { akEditorSwoopCubicBezier } from '@atlaskit/editor-shared-styles';
 import { fg } from '@atlaskit/platform-feature-flags';
@@ -10,6 +11,7 @@ import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { pluginKey } from './pm-plugins/plugin-key';
 import { createResizingPlugin } from './pm-plugins/resizing-plugin';
 import { findSupportedNodeForBreakout } from './pm-plugins/utils/find-breakout-node';
+import { getBreakoutMode } from './pm-plugins/utils/get-breakout-mode';
 import LayoutButton from './ui/LayoutButton';
 class BreakoutView {
   constructor(
@@ -118,13 +120,12 @@ const useOldHook = api => {
   };
 };
 const useNewHook = api => {
-  const breakoutNode = useSharedPluginStateSelector(api, 'breakout.breakoutNode');
   const isDragging = useSharedPluginStateSelector(api, 'blockControls.isDragging');
   const isPMDragging = useSharedPluginStateSelector(api, 'blockControls.isPMDragging');
   const mode = useSharedPluginStateSelector(api, 'editorViewMode.mode');
   const editorDisabled = useSharedPluginStateSelector(api, 'editorDisabled.editorDisabled');
   return {
-    breakoutNode,
+    breakoutNode: undefined,
     isDragging,
     isPMDragging,
     mode,
@@ -147,6 +148,22 @@ const LayoutButtonWrapper = ({
     mode,
     editorDisabled
   } = useSharedState(api);
+  const [breakoutNodePresent, setBreakoutNodePresent] = useState(false);
+  const [breakoutMode, setBreakoutMode] = useState(getBreakoutMode(editorView.state));
+  usePluginStateEffect(api, ['breakout'], ({
+    breakoutState
+  }) => {
+    if (breakoutState !== null && breakoutState !== void 0 && breakoutState.breakoutNode && !breakoutNodePresent) {
+      setBreakoutNodePresent(true);
+    }
+    if (!(breakoutState !== null && breakoutState !== void 0 && breakoutState.breakoutNode) && breakoutNodePresent) {
+      setBreakoutNodePresent(false);
+    }
+    const nextBreakoutMode = getBreakoutMode(editorView.state);
+    if (nextBreakoutMode !== breakoutMode) {
+      setBreakoutMode(nextBreakoutMode);
+    }
+  });
   const interactionState = useSharedPluginStateSelector(api, 'interaction.interactionState');
   if (interactionState === 'hasNotHadInteraction' && fg('platform_editor_hide_expand_selection_states')) {
     return null;
@@ -164,7 +181,9 @@ const LayoutButtonWrapper = ({
     boundariesElement: boundariesElement,
     scrollableElement: scrollableElement,
     node: (_breakoutNode$node = breakoutNode === null || breakoutNode === void 0 ? void 0 : breakoutNode.node) !== null && _breakoutNode$node !== void 0 ? _breakoutNode$node : null,
-    isLivePage: isEditMode
+    isLivePage: isEditMode,
+    isBreakoutNodePresent: breakoutNodePresent,
+    breakoutMode: breakoutMode
   }) : null;
 };
 export const breakoutPlugin = ({

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

@@ -1,4 +1,5 @@
-// TODO: ED-28029 - add fixes for expands and codeblocks
+import { transferCodeBlockWrappedValue } from '@atlaskit/editor-common/code-block';
+import { updateExpandedStateNew } from '../pm-plugins/utils/single-player-expand';
 export function setBreakoutWidth(width, mode, pos, isLivePage) {
   return (state, dispatch) => {
     const node = state.doc.nodeAt(pos);
@@ -9,6 +10,20 @@ export function setBreakoutWidth(width, mode, pos, isLivePage) {
       width,
       mode
     })]);
+    if (node.type === state.schema.nodes.expand) {
+      updateExpandedStateNew({
+        tr,
+        node,
+        pos,
+        isLivePage
+      });
+    } else if (node.type === state.schema.nodes.codeBlock) {
+      const newNode = tr.doc.nodeAt(pos);
+      const oldNode = node;
+      if (newNode) {
+        transferCodeBlockWrappedValue(oldNode, newNode);
+      }
+    }
     if (dispatch) {
       dispatch(tr);
     }

package/dist/es2019/pm-plugins/utils/single-player-expand.js

@@ -1,11 +1,35 @@
 import { expandedState } from '@atlaskit/editor-common/expand';
 import { fg } from '@atlaskit/platform-feature-flags';
-export const updateExpandedState = (tr, node, isLivePage) => {
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
+export const updateExpandedStateNew = ({
+  tr,
+  node,
+  pos,
+  isLivePage
+}) => {
   if (isLivePage || fg('platform-editor-single-player-expand')) {
-    const wasExpandExpanded = expandedState.get(node.node);
-    const newExpand = tr.doc.nodeAt(node.pos);
+    const wasExpandExpanded = expandedState.get(node);
+    const newExpand = tr.doc.nodeAt(pos);
     if (wasExpandExpanded !== undefined && newExpand) {
       expandedState.set(newExpand, wasExpandExpanded);
     }
   }
+};
+export const updateExpandedState = (tr, node, isLivePage) => {
+  if (editorExperiment('platform_editor_breakout_resizing', true)) {
+    updateExpandedStateNew({
+      tr,
+      node: node.node,
+      pos: node.pos,
+      isLivePage
+    });
+  } else {
+    if (isLivePage || fg('platform-editor-single-player-expand')) {
+      const wasExpandExpanded = expandedState.get(node.node);
+      const newExpand = tr.doc.nodeAt(node.pos);
+      if (wasExpandExpanded !== undefined && newExpand) {
+        expandedState.set(newExpand, wasExpandExpanded);
+      }
+    }
+  }
 };

package/dist/es2019/ui/LayoutButton.js

@@ -19,6 +19,7 @@ import CollapseIcon from '@atlaskit/icon/glyph/editor/collapse';
 import ExpandIcon from '@atlaskit/icon/glyph/editor/expand';
 import { B300, N20A, N300 } from '@atlaskit/theme/colors';
 import { layers } from '@atlaskit/theme/constants';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { removeBreakout } from '../editor-commands/remove-breakout';
 import { setBreakoutMode } from '../editor-commands/set-breakout-mode';
 import { getPluginState } from '../pm-plugins/plugin-key';
@@ -60,7 +61,9 @@ const LayoutButton = ({
   scrollableElement,
   editorView,
   node,
-  isLivePage
+  isLivePage,
+  isBreakoutNodePresent,
+  breakoutMode: breakoutModeProp
 }) => {
   const handleClick = useCallback(breakoutMode => {
     const {
@@ -76,10 +79,11 @@ const LayoutButton = ({
   const {
     state
   } = editorView;
-  if (!node || !isBreakoutMarkAllowed(state)) {
+  const exitCondition = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? !isBreakoutNodePresent : !node;
+  if (exitCondition || !isBreakoutMarkAllowed(state)) {
     return null;
   }
-  const breakoutMode = getBreakoutMode(editorView.state);
+  const breakoutMode = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? breakoutModeProp : getBreakoutMode(editorView.state);
   const titleMessage = getTitle(breakoutMode);
   const title = formatMessage(titleMessage);
   const nextBreakoutMode = getNextBreakoutMode(breakoutMode);

package/dist/esm/breakoutPlugin.js

@@ -1,13 +1,15 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 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 React from 'react';
+import React, { useState } from 'react';
 import { breakout } from '@atlaskit/adf-schema';
 import { useSharedPluginState, sharedPluginStateHookMigratorFactory } from '@atlaskit/editor-common/hooks';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { BreakoutCssClassName } from '@atlaskit/editor-common/styles';
+import { usePluginStateEffect } from '@atlaskit/editor-common/use-plugin-state-effect';
 import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { akEditorSwoopCubicBezier } from '@atlaskit/editor-shared-styles';
 import { fg } from '@atlaskit/platform-feature-flags';
@@ -15,6 +17,7 @@ import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { pluginKey } from './pm-plugins/plugin-key';
 import { createResizingPlugin } from './pm-plugins/resizing-plugin';
 import { findSupportedNodeForBreakout } from './pm-plugins/utils/find-breakout-node';
+import { getBreakoutMode } from './pm-plugins/utils/get-breakout-mode';
 import LayoutButton from './ui/LayoutButton';
 var BreakoutView = /*#__PURE__*/_createClass(function BreakoutView(
 /**
@@ -119,13 +122,12 @@ var useOldHook = function useOldHook(api) {
   };
 };
 var useNewHook = function useNewHook(api) {
-  var breakoutNode = useSharedPluginStateSelector(api, 'breakout.breakoutNode');
   var isDragging = useSharedPluginStateSelector(api, 'blockControls.isDragging');
   var isPMDragging = useSharedPluginStateSelector(api, 'blockControls.isPMDragging');
   var mode = useSharedPluginStateSelector(api, 'editorViewMode.mode');
   var editorDisabled = useSharedPluginStateSelector(api, 'editorDisabled.editorDisabled');
   return {
-    breakoutNode: breakoutNode,
+    breakoutNode: undefined,
     isDragging: isDragging,
     isPMDragging: isPMDragging,
     mode: mode,
@@ -146,6 +148,27 @@ var LayoutButtonWrapper = function LayoutButtonWrapper(_ref2) {
     isPMDragging = _useSharedState.isPMDragging,
     mode = _useSharedState.mode,
     editorDisabled = _useSharedState.editorDisabled;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    breakoutNodePresent = _useState2[0],
+    setBreakoutNodePresent = _useState2[1];
+  var _useState3 = useState(getBreakoutMode(editorView.state)),
+    _useState4 = _slicedToArray(_useState3, 2),
+    breakoutMode = _useState4[0],
+    setBreakoutMode = _useState4[1];
+  usePluginStateEffect(api, ['breakout'], function (_ref3) {
+    var breakoutState = _ref3.breakoutState;
+    if (breakoutState !== null && breakoutState !== void 0 && breakoutState.breakoutNode && !breakoutNodePresent) {
+      setBreakoutNodePresent(true);
+    }
+    if (!(breakoutState !== null && breakoutState !== void 0 && breakoutState.breakoutNode) && breakoutNodePresent) {
+      setBreakoutNodePresent(false);
+    }
+    var nextBreakoutMode = getBreakoutMode(editorView.state);
+    if (nextBreakoutMode !== breakoutMode) {
+      setBreakoutMode(nextBreakoutMode);
+    }
+  });
   var interactionState = useSharedPluginStateSelector(api, 'interaction.interactionState');
   if (interactionState === 'hasNotHadInteraction' && fg('platform_editor_hide_expand_selection_states')) {
     return null;
@@ -163,12 +186,14 @@ var LayoutButtonWrapper = function LayoutButtonWrapper(_ref2) {
     boundariesElement: boundariesElement,
     scrollableElement: scrollableElement,
     node: (_breakoutNode$node = breakoutNode === null || breakoutNode === void 0 ? void 0 : breakoutNode.node) !== null && _breakoutNode$node !== void 0 ? _breakoutNode$node : null,
-    isLivePage: isEditMode
+    isLivePage: isEditMode,
+    isBreakoutNodePresent: breakoutNodePresent,
+    breakoutMode: breakoutMode
   }) : null;
 };
-export var breakoutPlugin = function breakoutPlugin(_ref3) {
-  var options = _ref3.config,
-    api = _ref3.api;
+export var breakoutPlugin = function breakoutPlugin(_ref4) {
+  var options = _ref4.config,
+    api = _ref4.api;
   return {
     name: 'breakout',
     pmPlugins: function pmPlugins() {
@@ -207,11 +232,11 @@ export var breakoutPlugin = function breakoutPlugin(_ref3) {
       }
       return pluginState;
     },
-    contentComponent: function contentComponent(_ref4) {
-      var editorView = _ref4.editorView,
-        popupsMountPoint = _ref4.popupsMountPoint,
-        popupsBoundariesElement = _ref4.popupsBoundariesElement,
-        popupsScrollableElement = _ref4.popupsScrollableElement;
+    contentComponent: function contentComponent(_ref5) {
+      var editorView = _ref5.editorView,
+        popupsMountPoint = _ref5.popupsMountPoint,
+        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) {
         return null;

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

@@ -1,4 +1,5 @@
-// TODO: ED-28029 - add fixes for expands and codeblocks
+import { transferCodeBlockWrappedValue } from '@atlaskit/editor-common/code-block';
+import { updateExpandedStateNew } from '../pm-plugins/utils/single-player-expand';
 export function setBreakoutWidth(width, mode, pos, isLivePage) {
   return function (state, dispatch) {
     var node = state.doc.nodeAt(pos);
@@ -9,6 +10,20 @@ export function setBreakoutWidth(width, mode, pos, isLivePage) {
       width: width,
       mode: mode
     })]);
+    if (node.type === state.schema.nodes.expand) {
+      updateExpandedStateNew({
+        tr: tr,
+        node: node,
+        pos: pos,
+        isLivePage: isLivePage
+      });
+    } else if (node.type === state.schema.nodes.codeBlock) {
+      var newNode = tr.doc.nodeAt(pos);
+      var oldNode = node;
+      if (newNode) {
+        transferCodeBlockWrappedValue(oldNode, newNode);
+      }
+    }
     if (dispatch) {
       dispatch(tr);
     }

package/dist/esm/pm-plugins/utils/single-player-expand.js

@@ -1,11 +1,34 @@
 import { expandedState } from '@atlaskit/editor-common/expand';
 import { fg } from '@atlaskit/platform-feature-flags';
-export var updateExpandedState = function updateExpandedState(tr, node, isLivePage) {
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
+export var updateExpandedStateNew = function updateExpandedStateNew(_ref) {
+  var tr = _ref.tr,
+    node = _ref.node,
+    pos = _ref.pos,
+    isLivePage = _ref.isLivePage;
   if (isLivePage || fg('platform-editor-single-player-expand')) {
-    var wasExpandExpanded = expandedState.get(node.node);
-    var newExpand = tr.doc.nodeAt(node.pos);
+    var wasExpandExpanded = expandedState.get(node);
+    var newExpand = tr.doc.nodeAt(pos);
     if (wasExpandExpanded !== undefined && newExpand) {
       expandedState.set(newExpand, wasExpandExpanded);
     }
   }
+};
+export var updateExpandedState = function updateExpandedState(tr, node, isLivePage) {
+  if (editorExperiment('platform_editor_breakout_resizing', true)) {
+    updateExpandedStateNew({
+      tr: tr,
+      node: node.node,
+      pos: node.pos,
+      isLivePage: isLivePage
+    });
+  } else {
+    if (isLivePage || fg('platform-editor-single-player-expand')) {
+      var wasExpandExpanded = expandedState.get(node.node);
+      var newExpand = tr.doc.nodeAt(node.pos);
+      if (wasExpandExpanded !== undefined && newExpand) {
+        expandedState.set(newExpand, wasExpandExpanded);
+      }
+    }
+  }
 };

package/dist/esm/ui/LayoutButton.js

@@ -19,6 +19,7 @@ import CollapseIcon from '@atlaskit/icon/glyph/editor/collapse';
 import ExpandIcon from '@atlaskit/icon/glyph/editor/expand';
 import { B300, N20A, N300 } from '@atlaskit/theme/colors';
 import { layers } from '@atlaskit/theme/constants';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { removeBreakout } from '../editor-commands/remove-breakout';
 import { setBreakoutMode } from '../editor-commands/set-breakout-mode';
 import { getPluginState } from '../pm-plugins/plugin-key';
@@ -58,7 +59,9 @@ var LayoutButton = function LayoutButton(_ref) {
     scrollableElement = _ref.scrollableElement,
     editorView = _ref.editorView,
     node = _ref.node,
-    isLivePage = _ref.isLivePage;
+    isLivePage = _ref.isLivePage,
+    isBreakoutNodePresent = _ref.isBreakoutNodePresent,
+    breakoutModeProp = _ref.breakoutMode;
   var handleClick = useCallback(function (breakoutMode) {
     var state = editorView.state,
       dispatch = editorView.dispatch;
@@ -69,10 +72,11 @@ var LayoutButton = function LayoutButton(_ref) {
     }
   }, [editorView, isLivePage]);
   var state = editorView.state;
-  if (!node || !isBreakoutMarkAllowed(state)) {
+  var exitCondition = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? !isBreakoutNodePresent : !node;
+  if (exitCondition || !isBreakoutMarkAllowed(state)) {
     return null;
   }
-  var breakoutMode = getBreakoutMode(editorView.state);
+  var breakoutMode = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? breakoutModeProp : getBreakoutMode(editorView.state);
   var titleMessage = getTitle(breakoutMode);
   var title = formatMessage(titleMessage);
   var nextBreakoutMode = getNextBreakoutMode(breakoutMode);

package/dist/types/pm-plugins/utils/single-player-expand.d.ts

@@ -1,3 +1,12 @@
+import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { Transaction } from '@atlaskit/editor-prosemirror/state';
 import type { ContentNodeWithPos } from '@atlaskit/editor-prosemirror/utils';
+interface UpdateExpandedStateNew {
+    tr: Transaction;
+    node: PMNode;
+    pos: number;
+    isLivePage?: boolean;
+}
+export declare const updateExpandedStateNew: ({ tr, node, pos, isLivePage }: UpdateExpandedStateNew) => void;
 export declare const updateExpandedState: (tr: Transaction, node: ContentNodeWithPos, isLivePage?: boolean) => void;
+export {};

package/dist/types/ui/LayoutButton.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import type { WrappedComponentProps } from 'react-intl-next';
+import type { BreakoutMode } from '@atlaskit/editor-common/types';
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 export interface Props {
@@ -10,6 +11,8 @@ export interface Props {
     scrollableElement?: HTMLElement;
     handleClick?: Function;
     isLivePage?: boolean;
+    isBreakoutNodePresent: boolean;
+    breakoutMode: BreakoutMode | undefined;
 }
 declare const _default: import("react").FC<import("react-intl-next").WithIntlProps<Props & WrappedComponentProps>> & {
     WrappedComponent: import("react").ComponentType<Props & WrappedComponentProps>;

package/dist/types-ts4.5/pm-plugins/utils/single-player-expand.d.ts

@@ -1,3 +1,12 @@
+import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { Transaction } from '@atlaskit/editor-prosemirror/state';
 import type { ContentNodeWithPos } from '@atlaskit/editor-prosemirror/utils';
+interface UpdateExpandedStateNew {
+    tr: Transaction;
+    node: PMNode;
+    pos: number;
+    isLivePage?: boolean;
+}
+export declare const updateExpandedStateNew: ({ tr, node, pos, isLivePage }: UpdateExpandedStateNew) => void;
 export declare const updateExpandedState: (tr: Transaction, node: ContentNodeWithPos, isLivePage?: boolean) => void;
+export {};

package/dist/types-ts4.5/ui/LayoutButton.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import type { WrappedComponentProps } from 'react-intl-next';
+import type { BreakoutMode } from '@atlaskit/editor-common/types';
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 export interface Props {
@@ -10,6 +11,8 @@ export interface Props {
     scrollableElement?: HTMLElement;
     handleClick?: Function;
     isLivePage?: boolean;
+    isBreakoutNodePresent: boolean;
+    breakoutMode: BreakoutMode | undefined;
 }
 declare const _default: import("react").FC<import("react-intl-next").WithIntlProps<Props & WrappedComponentProps>> & {
     WrappedComponent: import("react").ComponentType<Props & WrappedComponentProps>;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-breakout",
-	"version": "2.4.2",
+	"version": "2.4.3",
 	"description": "Breakout plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -48,7 +48,7 @@
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/pragmatic-drag-and-drop": "^1.7.0",
 		"@atlaskit/theme": "^18.0.0",
-		"@atlaskit/tmp-editor-statsig": "^5.7.0",
+		"@atlaskit/tmp-editor-statsig": "^5.8.0",
 		"@atlaskit/tokens": "^5.0.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1"