@atlaskit/editor-plugin-breakout 12.3.2 → 12.3.4

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/editor-plugin-breakout
 
+## 12.3.4
+
+### Patch Changes
+
+- [`c5b1fc41ef2a8`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/c5b1fc41ef2a8) -
+  Fix keyboard resizing for full-width breakout nodes
+- Updated dependencies
+
+## 12.3.3
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 12.3.2
 
 ### Patch Changes

package/dist/cjs/pm-plugins/handle-key-down.js

@@ -11,7 +11,13 @@ var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 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 _resizeWidth = require("./resize-width");
 var KEYBOARD_RESIZE_STEP = 10;
+var getKeyboardResizeWidth = function getKeyboardResizeWidth(currentWidth, step, api) {
+  var containerWidth = (0, _resizeWidth.getResizeContainerWidth)(api);
+  var resizeStartWidth = Math.min(currentWidth, containerWidth);
+  return (0, _resizeWidth.clampWidthToResizeBounds)(resizeStartWidth + step, containerWidth);
+};
 var getAncestorResizableNode = function getAncestorResizableNode(view, breakoutResizableNodes) {
   var selection = view.state.selection;
   if (selection instanceof _state.NodeSelection) {
@@ -63,12 +69,22 @@ var handleKeyDown = exports.handleKeyDown = function handleKeyDown(api) {
         });
         if (breakoutMark) {
           var step = event.code === 'BracketRight' ? KEYBOARD_RESIZE_STEP : -KEYBOARD_RESIZE_STEP;
-          var newWidth = breakoutMark.attrs.width + step;
-          if (newWidth < _editorSharedStyles.akEditorFullWidthLayoutWidth && newWidth > _editorSharedStyles.akEditorDefaultLayoutWidth) {
-            var _api$editorViewMode;
-            var isEditMode = (api === null || api === void 0 || (_api$editorViewMode = api.editorViewMode) === null || _api$editorViewMode === void 0 || (_api$editorViewMode = _api$editorViewMode.sharedState.currentState()) === null || _api$editorViewMode === void 0 ? void 0 : _api$editorViewMode.mode) === 'edit';
-            (0, _setBreakoutWidth.setBreakoutWidth)(breakoutMark.attrs.width + step, breakoutMark.attrs.mode, pos, isEditMode)(view.state, view.dispatch);
-            view.focus();
+          if ((0, _expValEquals.expValEquals)('platform_editor_lovability_breakout_resizing_fixes', 'isEnabled', true)) {
+            var newWidth = getKeyboardResizeWidth(breakoutMark.attrs.width, step, api);
+            if (newWidth !== breakoutMark.attrs.width) {
+              var _api$editorViewMode;
+              var isEditMode = (api === null || api === void 0 || (_api$editorViewMode = api.editorViewMode) === null || _api$editorViewMode === void 0 || (_api$editorViewMode = _api$editorViewMode.sharedState.currentState()) === null || _api$editorViewMode === void 0 ? void 0 : _api$editorViewMode.mode) === 'edit';
+              (0, _setBreakoutWidth.setBreakoutWidth)(newWidth, breakoutMark.attrs.mode, pos, isEditMode)(view.state, view.dispatch);
+              view.focus();
+            }
+          } else {
+            var _newWidth = breakoutMark.attrs.width + step;
+            if (_newWidth < _editorSharedStyles.akEditorFullWidthLayoutWidth && _newWidth > _editorSharedStyles.akEditorDefaultLayoutWidth) {
+              var _api$editorViewMode2;
+              var _isEditMode = (api === null || api === void 0 || (_api$editorViewMode2 = api.editorViewMode) === null || _api$editorViewMode2 === void 0 || (_api$editorViewMode2 = _api$editorViewMode2.sharedState.currentState()) === null || _api$editorViewMode2 === void 0 ? void 0 : _api$editorViewMode2.mode) === 'edit';
+              (0, _setBreakoutWidth.setBreakoutWidth)(breakoutMark.attrs.width + step, breakoutMark.attrs.mode, pos, _isEditMode)(view.state, view.dispatch);
+              view.focus();
+            }
           }
           return true;
         }

package/dist/cjs/pm-plugins/resize-width.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getResizeHardMax = exports.getResizeContainerWidth = exports.clampWidthToResizeBounds = exports.WIDTHS = void 0;
+var _constants = require("@atlaskit/editor-shared-styles/constants");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
+var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
+var WIDTHS = exports.WIDTHS = {
+  FULL: _constants.akEditorFullWidthLayoutWidth,
+  MAX: _constants.akEditorMaxLayoutWidth,
+  MIN: _constants.akEditorDefaultLayoutWidth,
+  WIDE: _constants.akEditorCalculatedWideLayoutWidth
+};
+var getResizeContainerWidth = exports.getResizeContainerWidth = function getResizeContainerWidth(api) {
+  var _api$width$sharedStat, _api$width$sharedStat2;
+  var editorWidth = (_api$width$sharedStat = api === null || api === void 0 || (_api$width$sharedStat2 = api.width.sharedState) === null || _api$width$sharedStat2 === void 0 || (_api$width$sharedStat2 = _api$width$sharedStat2.currentState()) === null || _api$width$sharedStat2 === void 0 ? void 0 : _api$width$sharedStat2.width) !== null && _api$width$sharedStat !== void 0 ? _api$width$sharedStat : 0;
+  var padding = editorWidth <= _constants.akEditorFullPageNarrowBreakout && (0, _experiments.editorExperiment)('platform_editor_preview_panel_responsiveness', true, {
+    exposure: true
+  }) ? _constants.akEditorGutterPaddingReduced : (0, _constants.akEditorGutterPaddingDynamic)();
+  return editorWidth - 2 * padding - _constants.akEditorGutterPadding;
+};
+var getResizeHardMax = exports.getResizeHardMax = function getResizeHardMax(containerWidth) {
+  return (0, _expValEquals.expValEquals)('editor_tinymce_full_width_mode', 'isEnabled', true) || (0, _expValEquals.expValEquals)('confluence_max_width_content_appearance', 'isEnabled', true) ? Math.min(containerWidth, WIDTHS.MAX) : Math.min(containerWidth, WIDTHS.FULL);
+};
+var clampWidthToResizeBounds = exports.clampWidthToResizeBounds = function clampWidthToResizeBounds(proposedWidth, containerWidth) {
+  return Math.max(WIDTHS.MIN, Math.min(proposedWidth, getResizeHardMax(containerWidth)));
+};

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

@@ -5,42 +5,30 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.createResizerCallbacks = createResizerCallbacks;
 exports.getProposedWidth = getProposedWidth;
-var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 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 _resizeWidth = require("./resize-width");
 var _resizingMarkView = require("./resizing-mark-view");
 var _resizingPlugin = require("./resizing-plugin");
 var _analytics = require("./utils/analytics");
 var _measureFramerate2 = require("./utils/measure-framerate");
 var RESIZE_RATIO = 2;
 var SNAP_GAP = 10;
-var WIDTHS = {
-  MIN: _editorSharedStyles.akEditorDefaultLayoutWidth,
-  WIDE: _editorSharedStyles.akEditorCalculatedWideLayoutWidth,
-  FULL: _editorSharedStyles.akEditorFullWidthLayoutWidth,
-  MAX: _editorSharedStyles.akEditorMaxLayoutWidth
-};
 function getProposedWidth(_ref) {
-  var _api$width$sharedStat;
   var initialWidth = _ref.initialWidth,
     location = _ref.location,
     api = _ref.api,
     source = _ref.source;
   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, _experiments.editorExperiment)('platform_editor_preview_panel_responsiveness', true, {
-    exposure: true
-  }) ? _editorSharedStyles.akEditorGutterPaddingReduced : (0, _editorSharedStyles.akEditorGutterPaddingDynamic)();
-  var containerWidth = width - 2 * padding - _editorSharedStyles.akEditorGutterPadding;
+  var containerWidth = (0, _resizeWidth.getResizeContainerWidth)(api);
 
   // the node width may be greater than the container width so we resize using the smaller value
   var proposedWidth = Math.min(initialWidth, containerWidth) + diffX;
-  var snapPoints = [WIDTHS.MIN, WIDTHS.WIDE, Math.min(containerWidth, WIDTHS.FULL)];
+  var snapPoints = [_resizeWidth.WIDTHS.MIN, _resizeWidth.WIDTHS.WIDE, Math.min(containerWidth, _resizeWidth.WIDTHS.FULL)];
   if ((0, _expValEquals.expValEquals)('editor_tinymce_full_width_mode', 'isEnabled', true) || (0, _expValEquals.expValEquals)('confluence_max_width_content_appearance', 'isEnabled', true)) {
-    snapPoints.push(Math.min(containerWidth, WIDTHS.MAX));
+    snapPoints.push(Math.min(containerWidth, _resizeWidth.WIDTHS.MAX));
   }
   for (var _i = 0, _snapPoints = snapPoints; _i < _snapPoints.length; _i++) {
     var snapPoint = _snapPoints[_i];
@@ -48,8 +36,7 @@ function getProposedWidth(_ref) {
       return snapPoint;
     }
   }
-  var hardMax = (0, _expValEquals.expValEquals)('editor_tinymce_full_width_mode', 'isEnabled', true) || (0, _expValEquals.expValEquals)('confluence_max_width_content_appearance', 'isEnabled', true) ? Math.min(containerWidth, WIDTHS.MAX) : Math.min(containerWidth, WIDTHS.FULL);
-  return Math.max(WIDTHS.MIN, Math.min(proposedWidth, hardMax));
+  return (0, _resizeWidth.clampWidthToResizeBounds)(proposedWidth, containerWidth);
 }
 function createResizerCallbacks(_ref2) {
   var dom = _ref2.dom,
@@ -161,7 +148,7 @@ function createResizerCallbacks(_ref2) {
       var pos = view.posAtDOM(dom, 0);
       var mode = mark.attrs.mode;
       var initialWidth = mark.attrs.width;
-      var newWidth = isResizedToFullWidth ? WIDTHS.FULL : getProposedWidth({
+      var newWidth = isResizedToFullWidth ? _resizeWidth.WIDTHS.FULL : getProposedWidth({
         initialWidth: initialWidth,
         location: location,
         api: api,
@@ -169,7 +156,7 @@ function createResizerCallbacks(_ref2) {
       });
       if ((0, _expValEquals.expValEquals)('editor_tinymce_full_width_mode', 'isEnabled', true) || (0, _expValEquals.expValEquals)('confluence_max_width_content_appearance', 'isEnabled', true)) {
         if (isResizedToMaxWidth) {
-          newWidth = WIDTHS.MAX;
+          newWidth = _resizeWidth.WIDTHS.MAX;
         }
       }
       var isEditMode = (api === null || api === void 0 || (_api$editorViewMode = api.editorViewMode) === null || _api$editorViewMode === void 0 || (_api$editorViewMode = _api$editorViewMode.sharedState.currentState()) === null || _api$editorViewMode === void 0 ? void 0 : _api$editorViewMode.mode) === 'edit';

package/dist/es2019/pm-plugins/handle-key-down.js

@@ -5,7 +5,13 @@ import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth } from '@atlas
 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 { clampWidthToResizeBounds, getResizeContainerWidth } from './resize-width';
 const KEYBOARD_RESIZE_STEP = 10;
+const getKeyboardResizeWidth = (currentWidth, step, api) => {
+  const containerWidth = getResizeContainerWidth(api);
+  const resizeStartWidth = Math.min(currentWidth, containerWidth);
+  return clampWidthToResizeBounds(resizeStartWidth + step, containerWidth);
+};
 const getAncestorResizableNode = (view, breakoutResizableNodes) => {
   const selection = view.state.selection;
   if (selection instanceof NodeSelection) {
@@ -57,12 +63,22 @@ export const handleKeyDown = api => (view, event) => {
       const breakoutMark = node === null || node === void 0 ? void 0 : node.marks.find(mark => mark.type.name === 'breakout');
       if (breakoutMark) {
         const step = event.code === 'BracketRight' ? KEYBOARD_RESIZE_STEP : -KEYBOARD_RESIZE_STEP;
-        const newWidth = breakoutMark.attrs.width + step;
-        if (newWidth < akEditorFullWidthLayoutWidth && newWidth > akEditorDefaultLayoutWidth) {
-          var _api$editorViewMode, _api$editorViewMode$s;
-          const isEditMode = (api === null || api === void 0 ? void 0 : (_api$editorViewMode = api.editorViewMode) === null || _api$editorViewMode === void 0 ? void 0 : (_api$editorViewMode$s = _api$editorViewMode.sharedState.currentState()) === null || _api$editorViewMode$s === void 0 ? void 0 : _api$editorViewMode$s.mode) === 'edit';
-          setBreakoutWidth(breakoutMark.attrs.width + step, breakoutMark.attrs.mode, pos, isEditMode)(view.state, view.dispatch);
-          view.focus();
+        if (expValEquals('platform_editor_lovability_breakout_resizing_fixes', 'isEnabled', true)) {
+          const newWidth = getKeyboardResizeWidth(breakoutMark.attrs.width, step, api);
+          if (newWidth !== breakoutMark.attrs.width) {
+            var _api$editorViewMode, _api$editorViewMode$s;
+            const isEditMode = (api === null || api === void 0 ? void 0 : (_api$editorViewMode = api.editorViewMode) === null || _api$editorViewMode === void 0 ? void 0 : (_api$editorViewMode$s = _api$editorViewMode.sharedState.currentState()) === null || _api$editorViewMode$s === void 0 ? void 0 : _api$editorViewMode$s.mode) === 'edit';
+            setBreakoutWidth(newWidth, breakoutMark.attrs.mode, pos, isEditMode)(view.state, view.dispatch);
+            view.focus();
+          }
+        } else {
+          const newWidth = breakoutMark.attrs.width + step;
+          if (newWidth < akEditorFullWidthLayoutWidth && newWidth > akEditorDefaultLayoutWidth) {
+            var _api$editorViewMode2, _api$editorViewMode2$;
+            const isEditMode = (api === null || api === void 0 ? void 0 : (_api$editorViewMode2 = api.editorViewMode) === null || _api$editorViewMode2 === void 0 ? void 0 : (_api$editorViewMode2$ = _api$editorViewMode2.sharedState.currentState()) === null || _api$editorViewMode2$ === void 0 ? void 0 : _api$editorViewMode2$.mode) === 'edit';
+            setBreakoutWidth(breakoutMark.attrs.width + step, breakoutMark.attrs.mode, pos, isEditMode)(view.state, view.dispatch);
+            view.focus();
+          }
         }
         return true;
       }

package/dist/es2019/pm-plugins/resize-width.js

@@ -0,0 +1,24 @@
+import { akEditorCalculatedWideLayoutWidth, akEditorDefaultLayoutWidth, akEditorFullPageNarrowBreakout, akEditorFullWidthLayoutWidth, akEditorGutterPadding, akEditorGutterPaddingDynamic, akEditorGutterPaddingReduced, akEditorMaxLayoutWidth } from '@atlaskit/editor-shared-styles/constants';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
+const WIDTHS = {
+  FULL: akEditorFullWidthLayoutWidth,
+  MAX: akEditorMaxLayoutWidth,
+  MIN: akEditorDefaultLayoutWidth,
+  WIDE: akEditorCalculatedWideLayoutWidth
+};
+export { WIDTHS };
+export const getResizeContainerWidth = api => {
+  var _api$width$sharedStat, _api$width$sharedStat2, _api$width$sharedStat3;
+  const editorWidth = (_api$width$sharedStat = api === null || api === void 0 ? void 0 : (_api$width$sharedStat2 = api.width.sharedState) === null || _api$width$sharedStat2 === void 0 ? void 0 : (_api$width$sharedStat3 = _api$width$sharedStat2.currentState()) === null || _api$width$sharedStat3 === void 0 ? void 0 : _api$width$sharedStat3.width) !== null && _api$width$sharedStat !== void 0 ? _api$width$sharedStat : 0;
+  const padding = editorWidth <= akEditorFullPageNarrowBreakout && editorExperiment('platform_editor_preview_panel_responsiveness', true, {
+    exposure: true
+  }) ? akEditorGutterPaddingReduced : akEditorGutterPaddingDynamic();
+  return editorWidth - 2 * padding - akEditorGutterPadding;
+};
+export const getResizeHardMax = containerWidth => {
+  return expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) || expValEquals('confluence_max_width_content_appearance', 'isEnabled', true) ? Math.min(containerWidth, WIDTHS.MAX) : Math.min(containerWidth, WIDTHS.FULL);
+};
+export const clampWidthToResizeBounds = (proposedWidth, containerWidth) => {
+  return Math.max(WIDTHS.MIN, Math.min(proposedWidth, getResizeHardMax(containerWidth)));
+};

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

@@ -1,34 +1,22 @@
-import { akEditorGutterPaddingDynamic, akEditorGutterPadding, akEditorGutterPaddingReduced, akEditorFullPageNarrowBreakout, akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorCalculatedWideLayoutWidth, akEditorMaxLayoutWidth } from '@atlaskit/editor-shared-styles';
 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 { clampWidthToResizeBounds, getResizeContainerWidth, WIDTHS } from './resize-width';
 import { LOCAL_RESIZE_PROPERTY } from './resizing-mark-view';
 import { resizingPluginKey } from './resizing-plugin';
 import { generateResizeFrameRatePayloads, generateResizedEventPayload } from './utils/analytics';
 import { measureFramerate, reduceResizeFrameRateSamples } from './utils/measure-framerate';
 const RESIZE_RATIO = 2;
 const SNAP_GAP = 10;
-const WIDTHS = {
-  MIN: akEditorDefaultLayoutWidth,
-  WIDE: akEditorCalculatedWideLayoutWidth,
-  FULL: akEditorFullWidthLayoutWidth,
-  MAX: akEditorMaxLayoutWidth
-};
 export function getProposedWidth({
   initialWidth,
   location,
   api,
   source
 }) {
-  var _api$width$sharedStat, _api$width$sharedStat2;
   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 && editorExperiment('platform_editor_preview_panel_responsiveness', true, {
-    exposure: true
-  }) ? akEditorGutterPaddingReduced : akEditorGutterPaddingDynamic();
-  const containerWidth = width - 2 * padding - akEditorGutterPadding;
+  const containerWidth = getResizeContainerWidth(api);
 
   // the node width may be greater than the container width so we resize using the smaller value
   const proposedWidth = Math.min(initialWidth, containerWidth) + diffX;
@@ -41,8 +29,7 @@ export function getProposedWidth({
       return snapPoint;
     }
   }
-  const hardMax = expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) || expValEquals('confluence_max_width_content_appearance', 'isEnabled', true) ? Math.min(containerWidth, WIDTHS.MAX) : Math.min(containerWidth, WIDTHS.FULL);
-  return Math.max(WIDTHS.MIN, Math.min(proposedWidth, hardMax));
+  return clampWidthToResizeBounds(proposedWidth, containerWidth);
 }
 export function createResizerCallbacks({
   dom,

package/dist/esm/pm-plugins/handle-key-down.js

@@ -5,7 +5,13 @@ import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth } from '@atlas
 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 { clampWidthToResizeBounds, getResizeContainerWidth } from './resize-width';
 var KEYBOARD_RESIZE_STEP = 10;
+var getKeyboardResizeWidth = function getKeyboardResizeWidth(currentWidth, step, api) {
+  var containerWidth = getResizeContainerWidth(api);
+  var resizeStartWidth = Math.min(currentWidth, containerWidth);
+  return clampWidthToResizeBounds(resizeStartWidth + step, containerWidth);
+};
 var getAncestorResizableNode = function getAncestorResizableNode(view, breakoutResizableNodes) {
   var selection = view.state.selection;
   if (selection instanceof NodeSelection) {
@@ -57,12 +63,22 @@ export var handleKeyDown = function handleKeyDown(api) {
         });
         if (breakoutMark) {
           var step = event.code === 'BracketRight' ? KEYBOARD_RESIZE_STEP : -KEYBOARD_RESIZE_STEP;
-          var newWidth = breakoutMark.attrs.width + step;
-          if (newWidth < akEditorFullWidthLayoutWidth && newWidth > akEditorDefaultLayoutWidth) {
-            var _api$editorViewMode;
-            var isEditMode = (api === null || api === void 0 || (_api$editorViewMode = api.editorViewMode) === null || _api$editorViewMode === void 0 || (_api$editorViewMode = _api$editorViewMode.sharedState.currentState()) === null || _api$editorViewMode === void 0 ? void 0 : _api$editorViewMode.mode) === 'edit';
-            setBreakoutWidth(breakoutMark.attrs.width + step, breakoutMark.attrs.mode, pos, isEditMode)(view.state, view.dispatch);
-            view.focus();
+          if (expValEquals('platform_editor_lovability_breakout_resizing_fixes', 'isEnabled', true)) {
+            var newWidth = getKeyboardResizeWidth(breakoutMark.attrs.width, step, api);
+            if (newWidth !== breakoutMark.attrs.width) {
+              var _api$editorViewMode;
+              var isEditMode = (api === null || api === void 0 || (_api$editorViewMode = api.editorViewMode) === null || _api$editorViewMode === void 0 || (_api$editorViewMode = _api$editorViewMode.sharedState.currentState()) === null || _api$editorViewMode === void 0 ? void 0 : _api$editorViewMode.mode) === 'edit';
+              setBreakoutWidth(newWidth, breakoutMark.attrs.mode, pos, isEditMode)(view.state, view.dispatch);
+              view.focus();
+            }
+          } else {
+            var _newWidth = breakoutMark.attrs.width + step;
+            if (_newWidth < akEditorFullWidthLayoutWidth && _newWidth > akEditorDefaultLayoutWidth) {
+              var _api$editorViewMode2;
+              var _isEditMode = (api === null || api === void 0 || (_api$editorViewMode2 = api.editorViewMode) === null || _api$editorViewMode2 === void 0 || (_api$editorViewMode2 = _api$editorViewMode2.sharedState.currentState()) === null || _api$editorViewMode2 === void 0 ? void 0 : _api$editorViewMode2.mode) === 'edit';
+              setBreakoutWidth(breakoutMark.attrs.width + step, breakoutMark.attrs.mode, pos, _isEditMode)(view.state, view.dispatch);
+              view.focus();
+            }
           }
           return true;
         }

package/dist/esm/pm-plugins/resize-width.js

@@ -0,0 +1,24 @@
+import { akEditorCalculatedWideLayoutWidth, akEditorDefaultLayoutWidth, akEditorFullPageNarrowBreakout, akEditorFullWidthLayoutWidth, akEditorGutterPadding, akEditorGutterPaddingDynamic, akEditorGutterPaddingReduced, akEditorMaxLayoutWidth } from '@atlaskit/editor-shared-styles/constants';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
+var WIDTHS = {
+  FULL: akEditorFullWidthLayoutWidth,
+  MAX: akEditorMaxLayoutWidth,
+  MIN: akEditorDefaultLayoutWidth,
+  WIDE: akEditorCalculatedWideLayoutWidth
+};
+export { WIDTHS };
+export var getResizeContainerWidth = function getResizeContainerWidth(api) {
+  var _api$width$sharedStat, _api$width$sharedStat2;
+  var editorWidth = (_api$width$sharedStat = api === null || api === void 0 || (_api$width$sharedStat2 = api.width.sharedState) === null || _api$width$sharedStat2 === void 0 || (_api$width$sharedStat2 = _api$width$sharedStat2.currentState()) === null || _api$width$sharedStat2 === void 0 ? void 0 : _api$width$sharedStat2.width) !== null && _api$width$sharedStat !== void 0 ? _api$width$sharedStat : 0;
+  var padding = editorWidth <= akEditorFullPageNarrowBreakout && editorExperiment('platform_editor_preview_panel_responsiveness', true, {
+    exposure: true
+  }) ? akEditorGutterPaddingReduced : akEditorGutterPaddingDynamic();
+  return editorWidth - 2 * padding - akEditorGutterPadding;
+};
+export var getResizeHardMax = function getResizeHardMax(containerWidth) {
+  return expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) || expValEquals('confluence_max_width_content_appearance', 'isEnabled', true) ? Math.min(containerWidth, WIDTHS.MAX) : Math.min(containerWidth, WIDTHS.FULL);
+};
+export var clampWidthToResizeBounds = function clampWidthToResizeBounds(proposedWidth, containerWidth) {
+  return Math.max(WIDTHS.MIN, Math.min(proposedWidth, getResizeHardMax(containerWidth)));
+};

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

@@ -1,33 +1,21 @@
-import { akEditorGutterPaddingDynamic, akEditorGutterPadding, akEditorGutterPaddingReduced, akEditorFullPageNarrowBreakout, akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorCalculatedWideLayoutWidth, akEditorMaxLayoutWidth } from '@atlaskit/editor-shared-styles';
 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 { clampWidthToResizeBounds, getResizeContainerWidth, WIDTHS } from './resize-width';
 import { LOCAL_RESIZE_PROPERTY } from './resizing-mark-view';
 import { resizingPluginKey } from './resizing-plugin';
 import { generateResizeFrameRatePayloads, generateResizedEventPayload } from './utils/analytics';
 import { measureFramerate, reduceResizeFrameRateSamples } from './utils/measure-framerate';
 var RESIZE_RATIO = 2;
 var SNAP_GAP = 10;
-var WIDTHS = {
-  MIN: akEditorDefaultLayoutWidth,
-  WIDE: akEditorCalculatedWideLayoutWidth,
-  FULL: akEditorFullWidthLayoutWidth,
-  MAX: akEditorMaxLayoutWidth
-};
 export function getProposedWidth(_ref) {
-  var _api$width$sharedStat;
   var initialWidth = _ref.initialWidth,
     location = _ref.location,
     api = _ref.api,
     source = _ref.source;
   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 && editorExperiment('platform_editor_preview_panel_responsiveness', true, {
-    exposure: true
-  }) ? akEditorGutterPaddingReduced : akEditorGutterPaddingDynamic();
-  var containerWidth = width - 2 * padding - akEditorGutterPadding;
+  var containerWidth = getResizeContainerWidth(api);
 
   // the node width may be greater than the container width so we resize using the smaller value
   var proposedWidth = Math.min(initialWidth, containerWidth) + diffX;
@@ -41,8 +29,7 @@ export function getProposedWidth(_ref) {
       return snapPoint;
     }
   }
-  var hardMax = expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) || expValEquals('confluence_max_width_content_appearance', 'isEnabled', true) ? Math.min(containerWidth, WIDTHS.MAX) : Math.min(containerWidth, WIDTHS.FULL);
-  return Math.max(WIDTHS.MIN, Math.min(proposedWidth, hardMax));
+  return clampWidthToResizeBounds(proposedWidth, containerWidth);
 }
 export function createResizerCallbacks(_ref2) {
   var dom = _ref2.dom,

package/dist/types/pm-plugins/resize-width.d.ts

@@ -0,0 +1,12 @@
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { BreakoutPlugin } from '../breakoutPluginType';
+declare const WIDTHS: {
+    FULL: number;
+    MAX: number;
+    MIN: number;
+    WIDE: number;
+};
+export { WIDTHS };
+export declare const getResizeContainerWidth: (api: ExtractInjectionAPI<BreakoutPlugin> | undefined) => number;
+export declare const getResizeHardMax: (containerWidth: number) => number;
+export declare const clampWidthToResizeBounds: (proposedWidth: number, containerWidth: number) => number;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-breakout",
-	"version": "12.3.2",
+	"version": "12.3.4",
 	"description": "Breakout plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -31,11 +31,11 @@
 		"@atlaskit/editor-plugin-width": "^13.0.0",
 		"@atlaskit/editor-prosemirror": "^8.0.0",
 		"@atlaskit/editor-shared-styles": "^4.0.0",
-		"@atlaskit/icon": "^37.0.0",
+		"@atlaskit/icon": "^37.1.0",
 		"@atlaskit/platform-feature-flags": "^2.0.0",
 		"@atlaskit/pragmatic-drag-and-drop": "^2.0.0",
 		"@atlaskit/theme": "^26.1.0",
-		"@atlaskit/tmp-editor-statsig": "^129.0.0",
+		"@atlaskit/tmp-editor-statsig": "^130.2.0",
 		"@atlaskit/tokens": "^16.1.0",
 		"@atlaskit/tooltip": "^23.1.0",
 		"@babel/runtime": "^7.0.0",
@@ -45,7 +45,7 @@
 		"uuid": "^3.1.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^116.33.0",
+		"@atlaskit/editor-common": "^116.34.0",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
 		"react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"