@atlaskit/editor-plugin-breakout 5.2.0 → 5.2.2

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/editor-plugin-breakout
 
+## 5.2.2
+
+### Patch Changes
+
+- [`6b6eca9cee16d`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/6b6eca9cee16d) -
+  Switch to use editorExperiment to use productKey for responsive preview panel changes.
+- Updated dependencies
+
+## 5.2.1
+
+### Patch Changes
+
+- [`8339b4553cc39`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/8339b4553cc39) -
+  Hydration fixes for breakout plugin
+- Updated dependencies
+
 ## 5.2.0
 
 ### Minor Changes

package/dist/cjs/breakoutPlugin.js

@@ -145,18 +145,26 @@ var LayoutButtonWrapper = function LayoutButtonWrapper(_ref2) {
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     breakoutNodePresent = _useState2[0],
     setBreakoutNodePresent = _useState2[1];
-  var _useState3 = (0, _react.useState)((0, _getBreakoutMode.getBreakoutMode)(editorView.state)),
+  var _useState3 = (0, _react.useState)((0, _expValEquals.expValEquals)('platform_editor_hydratable_ui', 'isEnabled', true) && !editorView ? undefined :
+    // Remove ! during platform_editor_hydratable_ui cleanup
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    (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 ((0, _expValEquals.expValEquals)('platform_editor_hydratable_ui', 'isEnabled', true) && !editorView) {
+      return;
+    }
     if (breakoutState !== null && breakoutState !== void 0 && breakoutState.breakoutNode && !breakoutNodePresent) {
       setBreakoutNodePresent(true);
     }
     if (!(breakoutState !== null && breakoutState !== void 0 && breakoutState.breakoutNode) && breakoutNodePresent) {
       setBreakoutNodePresent(false);
     }
+    // Remove ! during platform_editor_hydratable_ui cleanup
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
     var nextBreakoutMode = (0, _getBreakoutMode.getBreakoutMode)(editorView.state);
     if (nextBreakoutMode !== breakoutMode) {
       setBreakoutMode(nextBreakoutMode);

package/dist/cjs/pm-plugins/get-guidelines.js

@@ -9,7 +9,7 @@ var _memoizeOne = _interopRequireDefault(require("memoize-one"));
 var _styles = require("@atlaskit/editor-common/styles");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
-var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
+var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var WIDTHS = {
   MIN: _editorSharedStyles.akEditorDefaultLayoutWidth,
   WIDE: _editorSharedStyles.akEditorCalculatedWideLayoutWidth,
@@ -49,7 +49,9 @@ var getGuidelines = exports.getGuidelines = (0, _memoizeOne.default)(function (i
   var _ref = getEditorWidth() || {},
     width = _ref.width,
     lineLength = _ref.lineLength;
-  var padding = width && width <= _editorSharedStyles.akEditorFullPageNarrowBreakout && (0, _expValEquals.expValEquals)('platform_editor_preview_panel_responsiveness', 'isEnabled', true) ? _editorSharedStyles.akEditorGutterPaddingReduced : (0, _editorSharedStyles.akEditorGutterPaddingDynamic)();
+  var padding = width && width <= _editorSharedStyles.akEditorFullPageNarrowBreakout && (0, _experiments.editorExperiment)('platform_editor_preview_panel_responsiveness', true, {
+    exposure: true
+  }) ? _editorSharedStyles.akEditorGutterPaddingReduced : (0, _editorSharedStyles.akEditorGutterPaddingDynamic)();
   var fullWidth = width ? Math.min(WIDTHS.MAX, width - 2 * padding - _editorSharedStyles.akEditorGutterPadding) : undefined;
   if ((0, _platformFeatureFlags.fg)('platform_editor_breakout_resizing_hello_release')) {
     guidelines.push({

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

@@ -7,7 +7,7 @@ exports.createResizerCallbacks = createResizerCallbacks;
 exports.getProposedWidth = getProposedWidth;
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
-var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
+var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _setBreakoutWidth = require("../editor-commands/set-breakout-width");
 var _getGuidelines = require("./get-guidelines");
 var _resizingMarkView = require("./resizing-mark-view");
@@ -30,7 +30,9 @@ function getProposedWidth(_ref) {
   var directionMultiplier = source.data.handleSide === 'left' ? -1 : 1;
   var diffX = (location.current.input.clientX - location.initial.input.clientX) * RESIZE_RATIO * directionMultiplier;
   var width = (api === null || api === void 0 || (_api$width$sharedStat = api.width.sharedState) === null || _api$width$sharedStat === void 0 || (_api$width$sharedStat = _api$width$sharedStat.currentState()) === null || _api$width$sharedStat === void 0 ? void 0 : _api$width$sharedStat.width) || 0;
-  var padding = width <= _editorSharedStyles.akEditorFullPageNarrowBreakout && (0, _expValEquals.expValEquals)('platform_editor_preview_panel_responsiveness', 'isEnabled', true) ? _editorSharedStyles.akEditorGutterPaddingReduced : (0, _editorSharedStyles.akEditorGutterPaddingDynamic)();
+  var padding = width <= _editorSharedStyles.akEditorFullPageNarrowBreakout && (0, _experiments.editorExperiment)('platform_editor_preview_panel_responsiveness', true, {
+    exposure: true
+  }) ? _editorSharedStyles.akEditorGutterPaddingReduced : (0, _editorSharedStyles.akEditorGutterPaddingDynamic)();
   var containerWidth = width - 2 * padding - _editorSharedStyles.akEditorGutterPadding;
 
   // the node width may be greater than the container width so we resize using the smaller value

package/dist/cjs/ui/LayoutButton.js

@@ -23,7 +23,8 @@ 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 _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
+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");
@@ -82,8 +83,14 @@ var LayoutButton = function LayoutButton(_ref) {
     api = _ref.api;
   var handleClick = (0, _react.useCallback)(function (breakoutMode) {
     var _getPluginState;
-    var state = editorView.state,
-      dispatch = editorView.dispatch;
+    if ((0, _expValEquals.expValEquals)('platform_editor_hydratable_ui', 'isEnabled', true) && !editorView) {
+      return;
+    }
+    // Remove ! during platform_editor_hydratable_ui cleanup
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    var _ref2 = editorView,
+      state = _ref2.state,
+      dispatch = _ref2.dispatch;
     var breakoutNode = (_getPluginState = (0, _pluginKey.getPluginState)(state)) === null || _getPluginState === void 0 ? void 0 : _getPluginState.breakoutNode;
     if (['wide', 'full-width'].indexOf(breakoutMode) !== -1) {
       var _api$analytics;
@@ -111,8 +118,13 @@ var LayoutButton = function LayoutButton(_ref) {
       });
     }
   }, [api === null || api === void 0 || (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 ? void 0 : _api$analytics3.actions, editorView, isLivePage]);
-  var state = editorView.state;
-  if (!isBreakoutNodePresent || !(0, _isBreakoutMarkAllowed.isBreakoutMarkAllowed)(state)) {
+  if ((0, _expValEquals.expValEquals)('platform_editor_hydratable_ui', 'isEnabled', true) && !editorView) {
+    return null;
+  }
+
+  // Remove ! during platform_editor_hydratable_ui cleanup
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  if (!isBreakoutNodePresent || !(0, _isBreakoutMarkAllowed.isBreakoutMarkAllowed)(editorView.state)) {
     return null;
   }
   var breakoutMode = breakoutModeProp;
@@ -120,11 +132,17 @@ var LayoutButton = function LayoutButton(_ref) {
   var title = formatMessage(titleMessage);
   var nextBreakoutMode = (0, _utils.getNextBreakoutMode)(breakoutMode);
   var belowOtherPopupsZIndex = _constants.layers.layer() - 1;
-  var pluginState = (0, _pluginKey.getPluginState)(state);
+
+  // Remove ! during platform_editor_hydratable_ui cleanup
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  var pluginState = (0, _pluginKey.getPluginState)(editorView.state);
   if (!pluginState) {
     return null;
   }
-  var element = getBreakoutNodeElement(pluginState, state.selection, editorView);
+
+  // Remove ! during platform_editor_hydratable_ui cleanup
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  var element = getBreakoutNodeElement(pluginState, editorView.state.selection, editorView);
   if (!element) {
     return null;
   }
@@ -147,7 +165,7 @@ var LayoutButton = function LayoutButton(_ref) {
     forcePlacement: true,
     zIndex: belowOtherPopupsZIndex
   }, (0, _react2.jsx)("div", {
-    css: [toolbarButtonWrapperStyles, (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_preview_panel_responsiveness', 'isEnabled', true) && toolbarButtonNarrowScreenStyles]
+    css: [toolbarButtonWrapperStyles, (0, _experiments.editorExperiment)('platform_editor_preview_panel_responsiveness', true) && toolbarButtonNarrowScreenStyles]
   }, (0, _react2.jsx)(_uiMenu.ToolbarButton, {
     title: title,
     testId: titleMessage.id,

package/dist/es2019/breakoutPlugin.js

@@ -132,16 +132,24 @@ const LayoutButtonWrapper = ({
     };
   });
   const [breakoutNodePresent, setBreakoutNodePresent] = useState(false);
-  const [breakoutMode, setBreakoutMode] = useState(getBreakoutMode(editorView.state));
+  const [breakoutMode, setBreakoutMode] = useState(expValEquals('platform_editor_hydratable_ui', 'isEnabled', true) && !editorView ? undefined :
+  // Remove ! during platform_editor_hydratable_ui cleanup
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  getBreakoutMode(editorView.state));
   usePluginStateEffect(api, ['breakout'], ({
     breakoutState
   }) => {
+    if (expValEquals('platform_editor_hydratable_ui', 'isEnabled', true) && !editorView) {
+      return;
+    }
     if (breakoutState !== null && breakoutState !== void 0 && breakoutState.breakoutNode && !breakoutNodePresent) {
       setBreakoutNodePresent(true);
     }
     if (!(breakoutState !== null && breakoutState !== void 0 && breakoutState.breakoutNode) && breakoutNodePresent) {
       setBreakoutNodePresent(false);
     }
+    // Remove ! during platform_editor_hydratable_ui cleanup
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
     const nextBreakoutMode = getBreakoutMode(editorView.state);
     if (nextBreakoutMode !== breakoutMode) {
       setBreakoutMode(nextBreakoutMode);

package/dist/es2019/pm-plugins/get-guidelines.js

@@ -2,7 +2,7 @@ import memoizeOne from 'memoize-one';
 import { EXPAND_CONTAINER_PADDING, LAYOUT_COLUMN_PADDING, resizerHandleThumbWidth } from '@atlaskit/editor-common/styles';
 import { akEditorGutterPaddingDynamic, akEditorGutterPadding, akEditorGutterPaddingReduced, akEditorFullPageNarrowBreakout, akEditorCalculatedWideLayoutWidth, akEditorFullWidthLayoutWidth, akEditorDefaultLayoutWidth } from '@atlaskit/editor-shared-styles';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 const WIDTHS = {
   MIN: akEditorDefaultLayoutWidth,
   WIDE: akEditorCalculatedWideLayoutWidth,
@@ -40,7 +40,9 @@ export const getGuidelines = memoizeOne((isResizing, newWidth, getEditorWidth, n
     width,
     lineLength
   } = getEditorWidth() || {};
-  const padding = width && width <= akEditorFullPageNarrowBreakout && expValEquals('platform_editor_preview_panel_responsiveness', 'isEnabled', true) ? akEditorGutterPaddingReduced : akEditorGutterPaddingDynamic();
+  const padding = width && width <= akEditorFullPageNarrowBreakout && editorExperiment('platform_editor_preview_panel_responsiveness', true, {
+    exposure: true
+  }) ? akEditorGutterPaddingReduced : akEditorGutterPaddingDynamic();
   const fullWidth = width ? Math.min(WIDTHS.MAX, width - 2 * padding - akEditorGutterPadding) : undefined;
   if (fg('platform_editor_breakout_resizing_hello_release')) {
     guidelines.push({

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

@@ -1,6 +1,6 @@
 import { akEditorGutterPaddingDynamic, akEditorGutterPadding, akEditorGutterPaddingReduced, akEditorFullPageNarrowBreakout, akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorCalculatedWideLayoutWidth } from '@atlaskit/editor-shared-styles';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { setBreakoutWidth } from '../editor-commands/set-breakout-width';
 import { getGuidelines } from './get-guidelines';
 import { LOCAL_RESIZE_PROPERTY } from './resizing-mark-view';
@@ -24,7 +24,9 @@ export function getProposedWidth({
   const directionMultiplier = source.data.handleSide === 'left' ? -1 : 1;
   const diffX = (location.current.input.clientX - location.initial.input.clientX) * RESIZE_RATIO * directionMultiplier;
   const width = (api === null || api === void 0 ? void 0 : (_api$width$sharedStat = api.width.sharedState) === null || _api$width$sharedStat === void 0 ? void 0 : (_api$width$sharedStat2 = _api$width$sharedStat.currentState()) === null || _api$width$sharedStat2 === void 0 ? void 0 : _api$width$sharedStat2.width) || 0;
-  const padding = width <= akEditorFullPageNarrowBreakout && expValEquals('platform_editor_preview_panel_responsiveness', 'isEnabled', true) ? akEditorGutterPaddingReduced : akEditorGutterPaddingDynamic();
+  const padding = width <= akEditorFullPageNarrowBreakout && editorExperiment('platform_editor_preview_panel_responsiveness', true, {
+    exposure: true
+  }) ? akEditorGutterPaddingReduced : akEditorGutterPaddingDynamic();
   const containerWidth = width - 2 * padding - akEditorGutterPadding;
 
   // the node width may be greater than the container width so we resize using the smaller value

package/dist/es2019/ui/LayoutButton.js

@@ -21,7 +21,8 @@ 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 { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
+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';
@@ -79,6 +80,11 @@ const LayoutButton = ({
   var _api$analytics3;
   const handleClick = useCallback(breakoutMode => {
     var _getPluginState;
+    if (expValEquals('platform_editor_hydratable_ui', 'isEnabled', true) && !editorView) {
+      return;
+    }
+    // Remove ! during platform_editor_hydratable_ui cleanup
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
     const {
       state,
       dispatch
@@ -110,10 +116,13 @@ const LayoutButton = ({
       });
     }
   }, [api === null || api === void 0 ? void 0 : (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 ? void 0 : _api$analytics3.actions, editorView, isLivePage]);
-  const {
-    state
-  } = editorView;
-  if (!isBreakoutNodePresent || !isBreakoutMarkAllowed(state)) {
+  if (expValEquals('platform_editor_hydratable_ui', 'isEnabled', true) && !editorView) {
+    return null;
+  }
+
+  // Remove ! during platform_editor_hydratable_ui cleanup
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  if (!isBreakoutNodePresent || !isBreakoutMarkAllowed(editorView.state)) {
     return null;
   }
   const breakoutMode = breakoutModeProp;
@@ -121,11 +130,17 @@ const LayoutButton = ({
   const title = formatMessage(titleMessage);
   const nextBreakoutMode = getNextBreakoutMode(breakoutMode);
   const belowOtherPopupsZIndex = layers.layer() - 1;
-  const pluginState = getPluginState(state);
+
+  // Remove ! during platform_editor_hydratable_ui cleanup
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  const pluginState = getPluginState(editorView.state);
   if (!pluginState) {
     return null;
   }
-  let element = getBreakoutNodeElement(pluginState, state.selection, editorView);
+
+  // Remove ! during platform_editor_hydratable_ui cleanup
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  let element = getBreakoutNodeElement(pluginState, editorView.state.selection, editorView);
   if (!element) {
     return null;
   }
@@ -148,7 +163,7 @@ const LayoutButton = ({
     forcePlacement: true,
     zIndex: belowOtherPopupsZIndex
   }, jsx("div", {
-    css: [toolbarButtonWrapperStyles, expValEqualsNoExposure('platform_editor_preview_panel_responsiveness', 'isEnabled', true) && toolbarButtonNarrowScreenStyles]
+    css: [toolbarButtonWrapperStyles, editorExperiment('platform_editor_preview_panel_responsiveness', true) && toolbarButtonNarrowScreenStyles]
   }, jsx(ToolbarButton, {
     title: title,
     testId: titleMessage.id,

package/dist/esm/breakoutPlugin.js

@@ -136,18 +136,26 @@ var LayoutButtonWrapper = function LayoutButtonWrapper(_ref2) {
     _useState2 = _slicedToArray(_useState, 2),
     breakoutNodePresent = _useState2[0],
     setBreakoutNodePresent = _useState2[1];
-  var _useState3 = useState(getBreakoutMode(editorView.state)),
+  var _useState3 = useState(expValEquals('platform_editor_hydratable_ui', 'isEnabled', true) && !editorView ? undefined :
+    // Remove ! during platform_editor_hydratable_ui cleanup
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    getBreakoutMode(editorView.state)),
     _useState4 = _slicedToArray(_useState3, 2),
     breakoutMode = _useState4[0],
     setBreakoutMode = _useState4[1];
   usePluginStateEffect(api, ['breakout'], function (_ref3) {
     var breakoutState = _ref3.breakoutState;
+    if (expValEquals('platform_editor_hydratable_ui', 'isEnabled', true) && !editorView) {
+      return;
+    }
     if (breakoutState !== null && breakoutState !== void 0 && breakoutState.breakoutNode && !breakoutNodePresent) {
       setBreakoutNodePresent(true);
     }
     if (!(breakoutState !== null && breakoutState !== void 0 && breakoutState.breakoutNode) && breakoutNodePresent) {
       setBreakoutNodePresent(false);
     }
+    // Remove ! during platform_editor_hydratable_ui cleanup
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
     var nextBreakoutMode = getBreakoutMode(editorView.state);
     if (nextBreakoutMode !== breakoutMode) {
       setBreakoutMode(nextBreakoutMode);

package/dist/esm/pm-plugins/get-guidelines.js

@@ -2,7 +2,7 @@ import memoizeOne from 'memoize-one';
 import { EXPAND_CONTAINER_PADDING, LAYOUT_COLUMN_PADDING, resizerHandleThumbWidth } from '@atlaskit/editor-common/styles';
 import { akEditorGutterPaddingDynamic, akEditorGutterPadding, akEditorGutterPaddingReduced, akEditorFullPageNarrowBreakout, akEditorCalculatedWideLayoutWidth, akEditorFullWidthLayoutWidth, akEditorDefaultLayoutWidth } from '@atlaskit/editor-shared-styles';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 var WIDTHS = {
   MIN: akEditorDefaultLayoutWidth,
   WIDE: akEditorCalculatedWideLayoutWidth,
@@ -42,7 +42,9 @@ export var getGuidelines = memoizeOne(function (isResizing, newWidth, getEditorW
   var _ref = getEditorWidth() || {},
     width = _ref.width,
     lineLength = _ref.lineLength;
-  var padding = width && width <= akEditorFullPageNarrowBreakout && expValEquals('platform_editor_preview_panel_responsiveness', 'isEnabled', true) ? akEditorGutterPaddingReduced : akEditorGutterPaddingDynamic();
+  var padding = width && width <= akEditorFullPageNarrowBreakout && editorExperiment('platform_editor_preview_panel_responsiveness', true, {
+    exposure: true
+  }) ? akEditorGutterPaddingReduced : akEditorGutterPaddingDynamic();
   var fullWidth = width ? Math.min(WIDTHS.MAX, width - 2 * padding - akEditorGutterPadding) : undefined;
   if (fg('platform_editor_breakout_resizing_hello_release')) {
     guidelines.push({

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

@@ -1,6 +1,6 @@
 import { akEditorGutterPaddingDynamic, akEditorGutterPadding, akEditorGutterPaddingReduced, akEditorFullPageNarrowBreakout, akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorCalculatedWideLayoutWidth } from '@atlaskit/editor-shared-styles';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { setBreakoutWidth } from '../editor-commands/set-breakout-width';
 import { getGuidelines } from './get-guidelines';
 import { LOCAL_RESIZE_PROPERTY } from './resizing-mark-view';
@@ -23,7 +23,9 @@ export function getProposedWidth(_ref) {
   var directionMultiplier = source.data.handleSide === 'left' ? -1 : 1;
   var diffX = (location.current.input.clientX - location.initial.input.clientX) * RESIZE_RATIO * directionMultiplier;
   var width = (api === null || api === void 0 || (_api$width$sharedStat = api.width.sharedState) === null || _api$width$sharedStat === void 0 || (_api$width$sharedStat = _api$width$sharedStat.currentState()) === null || _api$width$sharedStat === void 0 ? void 0 : _api$width$sharedStat.width) || 0;
-  var padding = width <= akEditorFullPageNarrowBreakout && expValEquals('platform_editor_preview_panel_responsiveness', 'isEnabled', true) ? akEditorGutterPaddingReduced : akEditorGutterPaddingDynamic();
+  var padding = width <= akEditorFullPageNarrowBreakout && editorExperiment('platform_editor_preview_panel_responsiveness', true, {
+    exposure: true
+  }) ? akEditorGutterPaddingReduced : akEditorGutterPaddingDynamic();
   var containerWidth = width - 2 * padding - akEditorGutterPadding;
 
   // the node width may be greater than the container width so we resize using the smaller value

package/dist/esm/ui/LayoutButton.js

@@ -22,7 +22,8 @@ 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 { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
+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';
@@ -74,8 +75,14 @@ var LayoutButton = function LayoutButton(_ref) {
     api = _ref.api;
   var handleClick = useCallback(function (breakoutMode) {
     var _getPluginState;
-    var state = editorView.state,
-      dispatch = editorView.dispatch;
+    if (expValEquals('platform_editor_hydratable_ui', 'isEnabled', true) && !editorView) {
+      return;
+    }
+    // Remove ! during platform_editor_hydratable_ui cleanup
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    var _ref2 = editorView,
+      state = _ref2.state,
+      dispatch = _ref2.dispatch;
     var breakoutNode = (_getPluginState = getPluginState(state)) === null || _getPluginState === void 0 ? void 0 : _getPluginState.breakoutNode;
     if (['wide', 'full-width'].indexOf(breakoutMode) !== -1) {
       var _api$analytics;
@@ -103,8 +110,13 @@ var LayoutButton = function LayoutButton(_ref) {
       });
     }
   }, [api === null || api === void 0 || (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 ? void 0 : _api$analytics3.actions, editorView, isLivePage]);
-  var state = editorView.state;
-  if (!isBreakoutNodePresent || !isBreakoutMarkAllowed(state)) {
+  if (expValEquals('platform_editor_hydratable_ui', 'isEnabled', true) && !editorView) {
+    return null;
+  }
+
+  // Remove ! during platform_editor_hydratable_ui cleanup
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  if (!isBreakoutNodePresent || !isBreakoutMarkAllowed(editorView.state)) {
     return null;
   }
   var breakoutMode = breakoutModeProp;
@@ -112,11 +124,17 @@ var LayoutButton = function LayoutButton(_ref) {
   var title = formatMessage(titleMessage);
   var nextBreakoutMode = getNextBreakoutMode(breakoutMode);
   var belowOtherPopupsZIndex = layers.layer() - 1;
-  var pluginState = getPluginState(state);
+
+  // Remove ! during platform_editor_hydratable_ui cleanup
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  var pluginState = getPluginState(editorView.state);
   if (!pluginState) {
     return null;
   }
-  var element = getBreakoutNodeElement(pluginState, state.selection, editorView);
+
+  // Remove ! during platform_editor_hydratable_ui cleanup
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  var element = getBreakoutNodeElement(pluginState, editorView.state.selection, editorView);
   if (!element) {
     return null;
   }
@@ -139,7 +157,7 @@ var LayoutButton = function LayoutButton(_ref) {
     forcePlacement: true,
     zIndex: belowOtherPopupsZIndex
   }, jsx("div", {
-    css: [toolbarButtonWrapperStyles, expValEqualsNoExposure('platform_editor_preview_panel_responsiveness', 'isEnabled', true) && toolbarButtonNarrowScreenStyles]
+    css: [toolbarButtonWrapperStyles, editorExperiment('platform_editor_preview_panel_responsiveness', true) && toolbarButtonNarrowScreenStyles]
   }, jsx(ToolbarButton, {
     title: title,
     testId: titleMessage.id,

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

@@ -6,7 +6,7 @@ export interface Props {
     api: ExtractInjectionAPI<BreakoutPlugin> | undefined;
     boundariesElement?: HTMLElement;
     breakoutMode: BreakoutMode | undefined;
-    editorView: EditorView;
+    editorView: EditorView | undefined;
     handleClick?: Function;
     isBreakoutNodePresent: boolean;
     isLivePage?: boolean;

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

@@ -6,7 +6,7 @@ export interface Props {
     api: ExtractInjectionAPI<BreakoutPlugin> | undefined;
     boundariesElement?: HTMLElement;
     breakoutMode: BreakoutMode | undefined;
-    editorView: EditorView;
+    editorView: EditorView | undefined;
     handleClick?: Function;
     isBreakoutNodePresent: boolean;
     isLivePage?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-breakout",
-	"version": "5.2.0",
+	"version": "5.2.2",
 	"description": "Breakout plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -30,7 +30,7 @@
 	"atlaskit:src": "src/index.ts",
 	"dependencies": {
 		"@atlaskit/adf-schema": "^51.1.2",
-		"@atlaskit/editor-plugin-block-controls": "^6.2.0",
+		"@atlaskit/editor-plugin-block-controls": "^6.3.0",
 		"@atlaskit/editor-plugin-editor-disabled": "^5.0.0",
 		"@atlaskit/editor-plugin-editor-viewmode": "^7.0.0",
 		"@atlaskit/editor-plugin-guideline": "^5.0.0",
@@ -39,11 +39,11 @@
 		"@atlaskit/editor-plugin-width": "^6.0.0",
 		"@atlaskit/editor-prosemirror": "7.0.0",
 		"@atlaskit/editor-shared-styles": "^3.6.0",
-		"@atlaskit/icon": "^28.1.0",
+		"@atlaskit/icon": "^28.2.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/pragmatic-drag-and-drop": "^1.7.0",
 		"@atlaskit/theme": "^21.0.0",
-		"@atlaskit/tmp-editor-statsig": "^12.18.0",
+		"@atlaskit/tmp-editor-statsig": "^12.25.0",
 		"@atlaskit/tokens": "^6.3.0",
 		"@atlaskit/tooltip": "^20.4.0",
 		"@babel/runtime": "^7.0.0",
@@ -53,7 +53,7 @@
 		"uuid": "^3.1.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^109.5.0",
+		"@atlaskit/editor-common": "^109.10.0",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
 		"react-intl-next": "npm:react-intl@^5.18.1"