@atlaskit/editor-plugin-breakout 2.1.6 → 2.1.8

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @atlaskit/editor-plugin-breakout
 
+## 2.1.8
+
+### Patch Changes
+
+- [#144898](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/144898)
+  [`b9a10d6716ef4`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/b9a10d6716ef4) -
+  Enable useSharedPluginStateSelector in block-controls, block-type and breakout plugins
+- Updated dependencies
+
+## 2.1.7
+
+### Patch Changes
+
+- [#137211](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/137211)
+  [`d00cb55d6fa4b`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/d00cb55d6fa4b) -
+  [ux] ED27118 Increase pull page editor gutter to allow more space for new floating insert button -
+  https://hello.atlassian.net/wiki/spaces/EDITOR/pages/5120694962/Editor+DACI+New+insert+button+and+full-width+screens+2.0
+- Updated dependencies
+
 ## 2.1.6
 
 ### Patch Changes

package/dist/cjs/breakoutPlugin.js

@@ -1,23 +1,30 @@
 "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 _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _pluginKey = require("./pm-plugins/plugin-key");
 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 _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 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(
@@ -108,37 +115,92 @@ function createPlugin(pluginInjectionApi, _ref) {
   });
 }
 var LayoutButtonWrapper = function LayoutButtonWrapper(_ref2) {
-  var _breakoutState$breako, _breakoutState$breako2;
+  var _breakoutState$breako2, _breakoutState$breako3;
   var api = _ref2.api,
     editorView = _ref2.editorView,
     boundariesElement = _ref2.boundariesElement,
     scrollableElement = _ref2.scrollableElement,
     mountPoint = _ref2.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', 'editorDisabled', 'blockControls']),
+  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['width', 'breakout', 'editorViewMode', 'editorDisabled', 'blockControls'], {
+      disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true)
+    }),
     breakoutState = _useSharedPluginState.breakoutState,
     editorViewModeState = _useSharedPluginState.editorViewModeState,
     editorDisabledState = _useSharedPluginState.editorDisabledState,
     blockControlsState = _useSharedPluginState.blockControlsState;
-  if (blockControlsState !== null && blockControlsState !== void 0 && blockControlsState.isDragging || blockControlsState !== null && blockControlsState !== void 0 && blockControlsState.isPMDragging) {
+
+  // isDragging
+  var isDraggingSelector = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'blockControls.isDragging', {
+    disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)
+  });
+  var isDragging = (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true) ? isDraggingSelector : blockControlsState === null || blockControlsState === void 0 ? void 0 : blockControlsState.isDragging;
+
+  // isPMDragging
+  var isPMDraggingSelector = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'blockControls.isPMDragging', {
+    disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)
+  });
+  var isPMDragging = (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true) ? isPMDraggingSelector : blockControlsState === null || blockControlsState === void 0 ? void 0 : blockControlsState.isPMDragging;
+
+  // mode
+  var modeSelector = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'editorViewMode.mode', {
+    disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)
+  });
+  var mode = (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true) ? modeSelector : editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode;
+
+  // editorDisabled
+  var editorDisabledSelector = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'editorDisabled.editorDisabled', {
+    disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)
+  });
+  var editorDisabled = (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true) ? editorDisabledSelector : editorDisabledState === null || editorDisabledState === void 0 ? void 0 : editorDisabledState.editorDisabled;
+  var _useState = (0, _react.useState)(function () {
+      var breakoutNode = (0, _findBreakoutNode.findSupportedNodeForBreakout)(editorView.state.selection);
+      return breakoutNode !== undefined;
+    }),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    isBreakoutNodePresent = _useState2[0],
+    setIsBreakoutNodePresent = _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$breako;
+    var breakoutState = _ref3.breakoutState;
+    if ((0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)) {
+      return;
+    }
+    var breakoutNode = (_breakoutState$breako = breakoutState === null || breakoutState === void 0 ? void 0 : breakoutState.breakoutNode) !== null && _breakoutState$breako !== void 0 ? _breakoutState$breako : null;
+    var isBreakoutNodeNull = breakoutNode !== null;
+    if (isBreakoutNodePresent !== isBreakoutNodeNull) {
+      setIsBreakoutNodePresent(isBreakoutNodeNull);
+    }
+    var nextBreakoutMode = (0, _getBreakoutMode.getBreakoutMode)(editorView.state);
+    if (nextBreakoutMode !== breakoutMode) {
+      setBreakoutMode(nextBreakoutMode);
+    }
+  });
+  if (isDragging || isPMDragging) {
     if ((0, _experiments.editorExperiment)('advanced_layouts', true)) {
       return null;
     }
   }
-  var isViewMode = (editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'view';
-  var isEditMode = (editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'edit';
-  return !isViewMode && editorDisabledState !== undefined && !(editorDisabledState !== null && editorDisabledState !== void 0 && editorDisabledState.editorDisabled) ? /*#__PURE__*/_react.default.createElement(_LayoutButton.default, {
+  var isViewMode = mode === 'view';
+  var isEditMode = mode === 'edit';
+  return !isViewMode && editorDisabled === false ? /*#__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
+    node: (_breakoutState$breako2 = breakoutState === null || breakoutState === void 0 || (_breakoutState$breako3 = breakoutState.breakoutNode) === null || _breakoutState$breako3 === void 0 ? void 0 : _breakoutState$breako3.node) !== null && _breakoutState$breako2 !== void 0 ? _breakoutState$breako2 : null,
+    isLivePage: isEditMode,
+    breakoutMode: breakoutMode,
+    isBreakoutNodePresent: isBreakoutNodePresent
   }) : 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() {
@@ -169,11 +231,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/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,
+    breakoutModeProp = _ref.breakoutMode,
+    isBreakoutNodePresent = _ref.isBreakoutNodePresent;
   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 exitEarly = (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true) ? !isBreakoutNodePresent : !node;
+  if (exitEarly || !(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,12 +1,15 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { breakout } from '@atlaskit/adf-schema';
 import { useSharedPluginState } 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 { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { pluginKey } from './pm-plugins/plugin-key';
 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(
@@ -105,28 +108,78 @@ const LayoutButtonWrapper = ({
   scrollableElement,
   mountPoint
 }) => {
-  var _breakoutState$breako, _breakoutState$breako2;
+  var _breakoutState$breako2, _breakoutState$breako3;
   // 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,
     editorDisabledState,
     blockControlsState
-  } = useSharedPluginState(api, ['width', 'breakout', 'editorViewMode', 'editorDisabled', 'blockControls']);
-  if (blockControlsState !== null && blockControlsState !== void 0 && blockControlsState.isDragging || blockControlsState !== null && blockControlsState !== void 0 && blockControlsState.isPMDragging) {
+  } = useSharedPluginState(api, ['width', 'breakout', 'editorViewMode', 'editorDisabled', 'blockControls'], {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', true)
+  });
+
+  // isDragging
+  const isDraggingSelector = useSharedPluginStateSelector(api, 'blockControls.isDragging', {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
+  });
+  const isDragging = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? isDraggingSelector : blockControlsState === null || blockControlsState === void 0 ? void 0 : blockControlsState.isDragging;
+
+  // isPMDragging
+  const isPMDraggingSelector = useSharedPluginStateSelector(api, 'blockControls.isPMDragging', {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
+  });
+  const isPMDragging = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? isPMDraggingSelector : blockControlsState === null || blockControlsState === void 0 ? void 0 : blockControlsState.isPMDragging;
+
+  // mode
+  const modeSelector = useSharedPluginStateSelector(api, 'editorViewMode.mode', {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
+  });
+  const mode = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? modeSelector : editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode;
+
+  // editorDisabled
+  const editorDisabledSelector = useSharedPluginStateSelector(api, 'editorDisabled.editorDisabled', {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
+  });
+  const editorDisabled = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? editorDisabledSelector : editorDisabledState === null || editorDisabledState === void 0 ? void 0 : editorDisabledState.editorDisabled;
+  const [isBreakoutNodePresent, setIsBreakoutNodePresent] = useState(() => {
+    const breakoutNode = findSupportedNodeForBreakout(editorView.state.selection);
+    return breakoutNode !== undefined;
+  });
+  const [breakoutMode, setBreakoutMode] = useState(getBreakoutMode(editorView.state));
+  usePluginStateEffect(api, ['breakout'], ({
+    breakoutState
+  }) => {
+    var _breakoutState$breako;
+    if (editorExperiment('platform_editor_usesharedpluginstateselector', false)) {
+      return;
+    }
+    const breakoutNode = (_breakoutState$breako = breakoutState === null || breakoutState === void 0 ? void 0 : breakoutState.breakoutNode) !== null && _breakoutState$breako !== void 0 ? _breakoutState$breako : null;
+    const isBreakoutNodeNull = breakoutNode !== null;
+    if (isBreakoutNodePresent !== isBreakoutNodeNull) {
+      setIsBreakoutNodePresent(isBreakoutNodeNull);
+    }
+    const nextBreakoutMode = getBreakoutMode(editorView.state);
+    if (nextBreakoutMode !== breakoutMode) {
+      setBreakoutMode(nextBreakoutMode);
+    }
+  });
+  if (isDragging || isPMDragging) {
     if (editorExperiment('advanced_layouts', true)) {
       return null;
     }
   }
-  const isViewMode = (editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'view';
-  const isEditMode = (editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'edit';
-  return !isViewMode && editorDisabledState !== undefined && !(editorDisabledState !== null && editorDisabledState !== void 0 && editorDisabledState.editorDisabled) ? /*#__PURE__*/React.createElement(LayoutButton, {
+  const isViewMode = mode === 'view';
+  const isEditMode = mode === 'edit';
+  return !isViewMode && editorDisabled === false ? /*#__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
+    node: (_breakoutState$breako2 = breakoutState === null || breakoutState === void 0 ? void 0 : (_breakoutState$breako3 = breakoutState.breakoutNode) === null || _breakoutState$breako3 === void 0 ? void 0 : _breakoutState$breako3.node) !== null && _breakoutState$breako2 !== void 0 ? _breakoutState$breako2 : null,
+    isLivePage: isEditMode,
+    breakoutMode: breakoutMode,
+    isBreakoutNodePresent: isBreakoutNodePresent
   }) : null;
 };
 export const breakoutPlugin = ({

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,
+  breakoutMode: breakoutModeProp,
+  isBreakoutNodePresent
 }) => {
   const handleClick = useCallback(breakoutMode => {
     const {
@@ -76,10 +79,11 @@ const LayoutButton = ({
   const {
     state
   } = editorView;
-  if (!node || !isBreakoutMarkAllowed(state)) {
+  const exitEarly = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? !isBreakoutNodePresent : !node;
+  if (exitEarly || !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,17 +1,21 @@
+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 } 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 { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { pluginKey } from './pm-plugins/plugin-key';
 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(
 /**
@@ -101,37 +105,92 @@ function createPlugin(pluginInjectionApi, _ref) {
   });
 }
 var LayoutButtonWrapper = function LayoutButtonWrapper(_ref2) {
-  var _breakoutState$breako, _breakoutState$breako2;
+  var _breakoutState$breako2, _breakoutState$breako3;
   var api = _ref2.api,
     editorView = _ref2.editorView,
     boundariesElement = _ref2.boundariesElement,
     scrollableElement = _ref2.scrollableElement,
     mountPoint = _ref2.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', 'editorDisabled', 'blockControls']),
+  var _useSharedPluginState = useSharedPluginState(api, ['width', 'breakout', 'editorViewMode', 'editorDisabled', 'blockControls'], {
+      disabled: editorExperiment('platform_editor_usesharedpluginstateselector', true)
+    }),
     breakoutState = _useSharedPluginState.breakoutState,
     editorViewModeState = _useSharedPluginState.editorViewModeState,
     editorDisabledState = _useSharedPluginState.editorDisabledState,
     blockControlsState = _useSharedPluginState.blockControlsState;
-  if (blockControlsState !== null && blockControlsState !== void 0 && blockControlsState.isDragging || blockControlsState !== null && blockControlsState !== void 0 && blockControlsState.isPMDragging) {
+
+  // isDragging
+  var isDraggingSelector = useSharedPluginStateSelector(api, 'blockControls.isDragging', {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
+  });
+  var isDragging = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? isDraggingSelector : blockControlsState === null || blockControlsState === void 0 ? void 0 : blockControlsState.isDragging;
+
+  // isPMDragging
+  var isPMDraggingSelector = useSharedPluginStateSelector(api, 'blockControls.isPMDragging', {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
+  });
+  var isPMDragging = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? isPMDraggingSelector : blockControlsState === null || blockControlsState === void 0 ? void 0 : blockControlsState.isPMDragging;
+
+  // mode
+  var modeSelector = useSharedPluginStateSelector(api, 'editorViewMode.mode', {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
+  });
+  var mode = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? modeSelector : editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode;
+
+  // editorDisabled
+  var editorDisabledSelector = useSharedPluginStateSelector(api, 'editorDisabled.editorDisabled', {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
+  });
+  var editorDisabled = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? editorDisabledSelector : editorDisabledState === null || editorDisabledState === void 0 ? void 0 : editorDisabledState.editorDisabled;
+  var _useState = useState(function () {
+      var breakoutNode = findSupportedNodeForBreakout(editorView.state.selection);
+      return breakoutNode !== undefined;
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    isBreakoutNodePresent = _useState2[0],
+    setIsBreakoutNodePresent = _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$breako;
+    var breakoutState = _ref3.breakoutState;
+    if (editorExperiment('platform_editor_usesharedpluginstateselector', false)) {
+      return;
+    }
+    var breakoutNode = (_breakoutState$breako = breakoutState === null || breakoutState === void 0 ? void 0 : breakoutState.breakoutNode) !== null && _breakoutState$breako !== void 0 ? _breakoutState$breako : null;
+    var isBreakoutNodeNull = breakoutNode !== null;
+    if (isBreakoutNodePresent !== isBreakoutNodeNull) {
+      setIsBreakoutNodePresent(isBreakoutNodeNull);
+    }
+    var nextBreakoutMode = getBreakoutMode(editorView.state);
+    if (nextBreakoutMode !== breakoutMode) {
+      setBreakoutMode(nextBreakoutMode);
+    }
+  });
+  if (isDragging || isPMDragging) {
     if (editorExperiment('advanced_layouts', true)) {
       return null;
     }
   }
-  var isViewMode = (editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'view';
-  var isEditMode = (editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'edit';
-  return !isViewMode && editorDisabledState !== undefined && !(editorDisabledState !== null && editorDisabledState !== void 0 && editorDisabledState.editorDisabled) ? /*#__PURE__*/React.createElement(LayoutButton, {
+  var isViewMode = mode === 'view';
+  var isEditMode = mode === 'edit';
+  return !isViewMode && editorDisabled === false ? /*#__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
+    node: (_breakoutState$breako2 = breakoutState === null || breakoutState === void 0 || (_breakoutState$breako3 = breakoutState.breakoutNode) === null || _breakoutState$breako3 === void 0 ? void 0 : _breakoutState$breako3.node) !== null && _breakoutState$breako2 !== void 0 ? _breakoutState$breako2 : null,
+    isLivePage: isEditMode,
+    breakoutMode: breakoutMode,
+    isBreakoutNodePresent: isBreakoutNodePresent
   }) : 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() {
@@ -162,11 +221,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/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,
+    breakoutModeProp = _ref.breakoutMode,
+    isBreakoutNodePresent = _ref.isBreakoutNodePresent;
   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 exitEarly = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? !isBreakoutNodePresent : !node;
+  if (exitEarly || !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/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;
+    breakoutMode: BreakoutMode | undefined;
+    isBreakoutNodePresent: boolean;
 }
 declare const _default: import("react").FC<import("react-intl-next").WithIntlProps<Props & WrappedComponentProps>> & {
     WrappedComponent: import("react").ComponentType<Props & WrappedComponentProps>;

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;
+    breakoutMode: BreakoutMode | undefined;
+    isBreakoutNodePresent: boolean;
 }
 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.1.6",
+	"version": "2.1.8",
 	"description": "Breakout plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -34,18 +34,18 @@
 	},
 	"dependencies": {
 		"@atlaskit/adf-schema": "^47.6.0",
-		"@atlaskit/editor-common": "^103.0.0",
-		"@atlaskit/editor-plugin-block-controls": "^3.8.0",
+		"@atlaskit/editor-common": "^103.16.0",
+		"@atlaskit/editor-plugin-block-controls": "^3.11.0",
 		"@atlaskit/editor-plugin-editor-disabled": "^2.0.0",
-		"@atlaskit/editor-plugin-editor-viewmode": "^3.0.0",
+		"@atlaskit/editor-plugin-editor-viewmode": "^3.1.0",
 		"@atlaskit/editor-plugin-width": "^3.0.0",
 		"@atlaskit/editor-prosemirror": "7.0.0",
 		"@atlaskit/editor-shared-styles": "^3.4.0",
-		"@atlaskit/icon": "^25.5.0",
+		"@atlaskit/icon": "^25.6.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/theme": "^18.0.0",
-		"@atlaskit/tmp-editor-statsig": "^4.6.0",
-		"@atlaskit/tokens": "^4.7.0",
+		"@atlaskit/tmp-editor-statsig": "^4.14.0",
+		"@atlaskit/tokens": "^4.8.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1"
 	},
@@ -57,7 +57,7 @@
 	"devDependencies": {
 		"@af/integration-testing": "^0.5.0",
 		"@af/visual-regression": "^1.3.0",
-		"@atlaskit/editor-plugin-code-block": "^4.2.0",
+		"@atlaskit/editor-plugin-code-block": "^4.4.0",
 		"@atlaskit/editor-plugin-composition": "^1.3.0",
 		"@atlaskit/editor-plugin-decorations": "^2.0.0",
 		"@atlaskit/ssr": "^0.4.0",
@@ -105,9 +105,6 @@
 	"platform-feature-flags": {
 		"platform-editor-single-player-expand": {
 			"type": "boolean"
-		},
-		"platform_editor_core_increase_full_page_guttering": {
-			"type": "boolean"
 		}
 	}
 }