@atlaskit/editor-plugin-breakout 6.1.5 → 6.2.1

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @atlaskit/editor-plugin-breakout
 
+## 6.2.1
+
+### Patch Changes
+
+- [`a05464ea42678`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/a05464ea42678) -
+  EDITOR-2791 bump adf-schema
+- Updated dependencies
+
+## 6.2.0
+
+### Minor Changes
+
+- [`81ac927e830b5`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/81ac927e830b5) -
+  [ux] EDITOR-2866: Add max-width support and guideline wiring for node custom resizers
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 6.1.5
 
 ### Patch Changes

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

@@ -8,11 +8,13 @@ exports.getGuidelines = exports.GUIDELINE_KEYS = void 0;
 var _memoizeOne = _interopRequireDefault(require("memoize-one"));
 var _styles = require("@atlaskit/editor-common/styles");
 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 WIDTHS = {
   MIN: _editorSharedStyles.akEditorDefaultLayoutWidth,
   WIDE: _editorSharedStyles.akEditorCalculatedWideLayoutWidth,
-  MAX: _editorSharedStyles.akEditorFullWidthLayoutWidth
+  FULL: _editorSharedStyles.akEditorFullWidthLayoutWidth,
+  MAX: _editorSharedStyles.akEditorMaxLayoutWidth
 };
 var GUIDELINE_KEYS = exports.GUIDELINE_KEYS = {
   lineLengthLeft: 'grid_left',
@@ -20,7 +22,9 @@ var GUIDELINE_KEYS = exports.GUIDELINE_KEYS = {
   wideLeft: 'wide_left',
   wideRight: 'wide_right',
   fullWidthLeft: 'full_width_left',
-  fullWidthRight: 'full_width_right'
+  fullWidthRight: 'full_width_right',
+  maxWidthLeft: 'max_width_left',
+  maxWidthRight: 'max_width_right'
 };
 var AK_NESTED_DND_GUTTER_OFFSET = 8;
 var roundToNearest = function roundToNearest(value) {
@@ -50,7 +54,8 @@ var getGuidelines = exports.getGuidelines = (0, _memoizeOne.default)(function (i
   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;
+  var fullWidth = width ? Math.min(WIDTHS.FULL, width - 2 * padding - _editorSharedStyles.akEditorGutterPadding) : undefined;
+  var maxWidth = width && (0, _expValEquals.expValEquals)('editor_tinymce_full_width_mode', 'isEnabled', true) ? Math.min(WIDTHS.MAX, width - 2 * padding - _editorSharedStyles.akEditorGutterPadding) : undefined;
   guidelines.push({
     key: GUIDELINE_KEYS.lineLengthLeft,
     position: {
@@ -95,5 +100,21 @@ var getGuidelines = exports.getGuidelines = (0, _memoizeOne.default)(function (i
       active: newWidth === fullWidth
     });
   }
+  if (maxWidth) {
+    guidelines.push({
+      key: GUIDELINE_KEYS.maxWidthLeft,
+      position: {
+        x: -roundToNearest(maxWidth / 2 + innerPaddingOffset)
+      },
+      active: newWidth === maxWidth
+    });
+    guidelines.push({
+      key: GUIDELINE_KEYS.maxWidthRight,
+      position: {
+        x: roundToNearest(maxWidth / 2 + innerPaddingOffset)
+      },
+      active: newWidth === maxWidth
+    });
+  }
   return guidelines;
 });

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

@@ -7,6 +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");
@@ -19,7 +20,8 @@ var SNAP_GAP = 10;
 var WIDTHS = {
   MIN: _editorSharedStyles.akEditorDefaultLayoutWidth,
   WIDE: _editorSharedStyles.akEditorCalculatedWideLayoutWidth,
-  MAX: _editorSharedStyles.akEditorFullWidthLayoutWidth
+  FULL: _editorSharedStyles.akEditorFullWidthLayoutWidth,
+  MAX: _editorSharedStyles.akEditorMaxLayoutWidth
 };
 function getProposedWidth(_ref) {
   var _api$width$sharedStat;
@@ -37,14 +39,18 @@ function getProposedWidth(_ref) {
 
   // 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.MAX)];
+  var snapPoints = [WIDTHS.MIN, WIDTHS.WIDE, Math.min(containerWidth, WIDTHS.FULL)];
+  if ((0, _expValEquals.expValEquals)('editor_tinymce_full_width_mode', 'isEnabled', true)) {
+    snapPoints.push(Math.min(containerWidth, WIDTHS.MAX));
+  }
   for (var _i = 0, _snapPoints = snapPoints; _i < _snapPoints.length; _i++) {
     var snapPoint = _snapPoints[_i];
     if (snapPoint - SNAP_GAP < proposedWidth && snapPoint + SNAP_GAP > proposedWidth) {
       return snapPoint;
     }
   }
-  return Math.min(Math.max(WIDTHS.MIN, Math.min(proposedWidth, containerWidth)), WIDTHS.MAX);
+  var hardMax = (0, _expValEquals.expValEquals)('editor_tinymce_full_width_mode', 'isEnabled', true) ? Math.min(containerWidth, WIDTHS.MAX) : Math.min(containerWidth, WIDTHS.FULL);
+  return Math.max(WIDTHS.MIN, Math.min(proposedWidth, hardMax));
 }
 function createResizerCallbacks(_ref2) {
   var dom = _ref2.dom,
@@ -147,6 +153,12 @@ function createResizerCallbacks(_ref2) {
       var isResizedToFullWidth = !!guidelines.find(function (guideline) {
         return guideline.key.startsWith('full_width') && guideline.active;
       });
+      var isResizedToMaxWidth = false;
+      if ((0, _expValEquals.expValEquals)('editor_tinymce_full_width_mode', 'isEnabled', true)) {
+        isResizedToMaxWidth = !!guidelines.find(function (guideline) {
+          return guideline.key.startsWith('max_width') && guideline.active;
+        });
+      }
       guidelines = (0, _getGuidelines.getGuidelines)(false, 0, getEditorWidth);
       api === null || api === void 0 || (_api$guideline2 = api.guideline) === null || _api$guideline2 === void 0 || (_api$guideline2 = _api$guideline2.actions) === null || _api$guideline2 === void 0 || _api$guideline2.displayGuideline(view)({
         guidelines: guidelines
@@ -154,12 +166,17 @@ function createResizerCallbacks(_ref2) {
       var pos = view.posAtDOM(dom, 0);
       var mode = mark.attrs.mode;
       var initialWidth = mark.attrs.width;
-      var newWidth = isResizedToFullWidth ? WIDTHS.MAX : getProposedWidth({
+      var newWidth = isResizedToFullWidth ? WIDTHS.FULL : getProposedWidth({
         initialWidth: initialWidth,
         location: location,
         api: api,
         source: source
       });
+      if ((0, _expValEquals.expValEquals)('editor_tinymce_full_width_mode', 'isEnabled', true)) {
+        if (isResizedToMaxWidth) {
+          newWidth = 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';
       (0, _setBreakoutWidth.setBreakoutWidth)(newWidth, mode, pos, isEditMode)(view.state, view.dispatch);
       if ((0, _platformFeatureFlags.fg)('platform_editor_breakout_resizing_width_changes')) {

package/dist/cjs/ui/GuidelineLabel.js

@@ -14,7 +14,9 @@ var GUIDELINE_KEY_TO_LAYOUT = {
   wide_left: 'wide',
   wide_right: 'wide',
   full_width_left: 'full-width',
-  full_width_right: 'full-width'
+  full_width_right: 'full-width',
+  max_width_left: 'max',
+  max_width_right: 'max'
 };
 var GuidelineLabel = exports.GuidelineLabel = function GuidelineLabel(_ref) {
   var api = _ref.api,

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

@@ -1,11 +1,13 @@
 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 { akEditorGutterPaddingDynamic, akEditorGutterPadding, akEditorGutterPaddingReduced, akEditorFullPageNarrowBreakout, akEditorCalculatedWideLayoutWidth, akEditorFullWidthLayoutWidth, akEditorDefaultLayoutWidth, akEditorMaxLayoutWidth } from '@atlaskit/editor-shared-styles';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 const WIDTHS = {
   MIN: akEditorDefaultLayoutWidth,
   WIDE: akEditorCalculatedWideLayoutWidth,
-  MAX: akEditorFullWidthLayoutWidth
+  FULL: akEditorFullWidthLayoutWidth,
+  MAX: akEditorMaxLayoutWidth
 };
 export const GUIDELINE_KEYS = {
   lineLengthLeft: 'grid_left',
@@ -13,7 +15,9 @@ export const GUIDELINE_KEYS = {
   wideLeft: 'wide_left',
   wideRight: 'wide_right',
   fullWidthLeft: 'full_width_left',
-  fullWidthRight: 'full_width_right'
+  fullWidthRight: 'full_width_right',
+  maxWidthLeft: 'max_width_left',
+  maxWidthRight: 'max_width_right'
 };
 const AK_NESTED_DND_GUTTER_OFFSET = 8;
 const roundToNearest = (value, interval = 0.5) => Math.round(value / interval) * interval;
@@ -41,7 +45,8 @@ export const getGuidelines = memoizeOne((isResizing, newWidth, getEditorWidth, n
   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;
+  const fullWidth = width ? Math.min(WIDTHS.FULL, width - 2 * padding - akEditorGutterPadding) : undefined;
+  const maxWidth = width && expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) ? Math.min(WIDTHS.MAX, width - 2 * padding - akEditorGutterPadding) : undefined;
   guidelines.push({
     key: GUIDELINE_KEYS.lineLengthLeft,
     position: {
@@ -86,5 +91,21 @@ export const getGuidelines = memoizeOne((isResizing, newWidth, getEditorWidth, n
       active: newWidth === fullWidth
     });
   }
+  if (maxWidth) {
+    guidelines.push({
+      key: GUIDELINE_KEYS.maxWidthLeft,
+      position: {
+        x: -roundToNearest(maxWidth / 2 + innerPaddingOffset)
+      },
+      active: newWidth === maxWidth
+    });
+    guidelines.push({
+      key: GUIDELINE_KEYS.maxWidthRight,
+      position: {
+        x: roundToNearest(maxWidth / 2 + innerPaddingOffset)
+      },
+      active: newWidth === maxWidth
+    });
+  }
   return guidelines;
 });

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

@@ -1,5 +1,6 @@
-import { akEditorGutterPaddingDynamic, akEditorGutterPadding, akEditorGutterPaddingReduced, akEditorFullPageNarrowBreakout, akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorCalculatedWideLayoutWidth } from '@atlaskit/editor-shared-styles';
+import { akEditorGutterPaddingDynamic, akEditorGutterPadding, akEditorGutterPaddingReduced, akEditorFullPageNarrowBreakout, akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorCalculatedWideLayoutWidth, akEditorMaxLayoutWidth } 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';
@@ -12,7 +13,8 @@ const SNAP_GAP = 10;
 const WIDTHS = {
   MIN: akEditorDefaultLayoutWidth,
   WIDE: akEditorCalculatedWideLayoutWidth,
-  MAX: akEditorFullWidthLayoutWidth
+  FULL: akEditorFullWidthLayoutWidth,
+  MAX: akEditorMaxLayoutWidth
 };
 export function getProposedWidth({
   initialWidth,
@@ -31,13 +33,17 @@ export function getProposedWidth({
 
   // the node width may be greater than the container width so we resize using the smaller value
   const proposedWidth = Math.min(initialWidth, containerWidth) + diffX;
-  const snapPoints = [WIDTHS.MIN, WIDTHS.WIDE, Math.min(containerWidth, WIDTHS.MAX)];
+  const snapPoints = [WIDTHS.MIN, WIDTHS.WIDE, Math.min(containerWidth, WIDTHS.FULL)];
+  if (expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true)) {
+    snapPoints.push(Math.min(containerWidth, WIDTHS.MAX));
+  }
   for (const snapPoint of snapPoints) {
     if (snapPoint - SNAP_GAP < proposedWidth && snapPoint + SNAP_GAP > proposedWidth) {
       return snapPoint;
     }
   }
-  return Math.min(Math.max(WIDTHS.MIN, Math.min(proposedWidth, containerWidth)), WIDTHS.MAX);
+  const hardMax = expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) ? Math.min(containerWidth, WIDTHS.MAX) : Math.min(containerWidth, WIDTHS.FULL);
+  return Math.max(WIDTHS.MIN, Math.min(proposedWidth, hardMax));
 }
 export function createResizerCallbacks({
   dom,
@@ -143,6 +149,10 @@ export function createResizerCallbacks({
         originalNode: node
       });
       const isResizedToFullWidth = !!guidelines.find(guideline => guideline.key.startsWith('full_width') && guideline.active);
+      let isResizedToMaxWidth = false;
+      if (expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true)) {
+        isResizedToMaxWidth = !!guidelines.find(guideline => guideline.key.startsWith('max_width') && guideline.active);
+      }
       guidelines = getGuidelines(false, 0, getEditorWidth);
       api === null || api === void 0 ? void 0 : (_api$guideline2 = api.guideline) === null || _api$guideline2 === void 0 ? void 0 : (_api$guideline2$actio = _api$guideline2.actions) === null || _api$guideline2$actio === void 0 ? void 0 : _api$guideline2$actio.displayGuideline(view)({
         guidelines
@@ -150,12 +160,17 @@ export function createResizerCallbacks({
       const pos = view.posAtDOM(dom, 0);
       const mode = mark.attrs.mode;
       const initialWidth = mark.attrs.width;
-      const newWidth = isResizedToFullWidth ? WIDTHS.MAX : getProposedWidth({
+      let newWidth = isResizedToFullWidth ? WIDTHS.FULL : getProposedWidth({
         initialWidth,
         location,
         api,
         source
       });
+      if (expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true)) {
+        if (isResizedToMaxWidth) {
+          newWidth = WIDTHS.MAX;
+        }
+      }
       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, mode, pos, isEditMode)(view.state, view.dispatch);
       if (fg('platform_editor_breakout_resizing_width_changes')) {

package/dist/es2019/ui/GuidelineLabel.js

@@ -7,7 +7,9 @@ const GUIDELINE_KEY_TO_LAYOUT = {
   wide_left: 'wide',
   wide_right: 'wide',
   full_width_left: 'full-width',
-  full_width_right: 'full-width'
+  full_width_right: 'full-width',
+  max_width_left: 'max',
+  max_width_right: 'max'
 };
 export const GuidelineLabel = ({
   api,

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

@@ -1,11 +1,13 @@
 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 { akEditorGutterPaddingDynamic, akEditorGutterPadding, akEditorGutterPaddingReduced, akEditorFullPageNarrowBreakout, akEditorCalculatedWideLayoutWidth, akEditorFullWidthLayoutWidth, akEditorDefaultLayoutWidth, akEditorMaxLayoutWidth } from '@atlaskit/editor-shared-styles';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 var WIDTHS = {
   MIN: akEditorDefaultLayoutWidth,
   WIDE: akEditorCalculatedWideLayoutWidth,
-  MAX: akEditorFullWidthLayoutWidth
+  FULL: akEditorFullWidthLayoutWidth,
+  MAX: akEditorMaxLayoutWidth
 };
 export var GUIDELINE_KEYS = {
   lineLengthLeft: 'grid_left',
@@ -13,7 +15,9 @@ export var GUIDELINE_KEYS = {
   wideLeft: 'wide_left',
   wideRight: 'wide_right',
   fullWidthLeft: 'full_width_left',
-  fullWidthRight: 'full_width_right'
+  fullWidthRight: 'full_width_right',
+  maxWidthLeft: 'max_width_left',
+  maxWidthRight: 'max_width_right'
 };
 var AK_NESTED_DND_GUTTER_OFFSET = 8;
 var roundToNearest = function roundToNearest(value) {
@@ -43,7 +47,8 @@ export var getGuidelines = memoizeOne(function (isResizing, newWidth, getEditorW
   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;
+  var fullWidth = width ? Math.min(WIDTHS.FULL, width - 2 * padding - akEditorGutterPadding) : undefined;
+  var maxWidth = width && expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) ? Math.min(WIDTHS.MAX, width - 2 * padding - akEditorGutterPadding) : undefined;
   guidelines.push({
     key: GUIDELINE_KEYS.lineLengthLeft,
     position: {
@@ -88,5 +93,21 @@ export var getGuidelines = memoizeOne(function (isResizing, newWidth, getEditorW
       active: newWidth === fullWidth
     });
   }
+  if (maxWidth) {
+    guidelines.push({
+      key: GUIDELINE_KEYS.maxWidthLeft,
+      position: {
+        x: -roundToNearest(maxWidth / 2 + innerPaddingOffset)
+      },
+      active: newWidth === maxWidth
+    });
+    guidelines.push({
+      key: GUIDELINE_KEYS.maxWidthRight,
+      position: {
+        x: roundToNearest(maxWidth / 2 + innerPaddingOffset)
+      },
+      active: newWidth === maxWidth
+    });
+  }
   return guidelines;
 });

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

@@ -1,5 +1,6 @@
-import { akEditorGutterPaddingDynamic, akEditorGutterPadding, akEditorGutterPaddingReduced, akEditorFullPageNarrowBreakout, akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorCalculatedWideLayoutWidth } from '@atlaskit/editor-shared-styles';
+import { akEditorGutterPaddingDynamic, akEditorGutterPadding, akEditorGutterPaddingReduced, akEditorFullPageNarrowBreakout, akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorCalculatedWideLayoutWidth, akEditorMaxLayoutWidth } 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';
@@ -12,7 +13,8 @@ var SNAP_GAP = 10;
 var WIDTHS = {
   MIN: akEditorDefaultLayoutWidth,
   WIDE: akEditorCalculatedWideLayoutWidth,
-  MAX: akEditorFullWidthLayoutWidth
+  FULL: akEditorFullWidthLayoutWidth,
+  MAX: akEditorMaxLayoutWidth
 };
 export function getProposedWidth(_ref) {
   var _api$width$sharedStat;
@@ -30,14 +32,18 @@ export function getProposedWidth(_ref) {
 
   // 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.MAX)];
+  var snapPoints = [WIDTHS.MIN, WIDTHS.WIDE, Math.min(containerWidth, WIDTHS.FULL)];
+  if (expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true)) {
+    snapPoints.push(Math.min(containerWidth, WIDTHS.MAX));
+  }
   for (var _i = 0, _snapPoints = snapPoints; _i < _snapPoints.length; _i++) {
     var snapPoint = _snapPoints[_i];
     if (snapPoint - SNAP_GAP < proposedWidth && snapPoint + SNAP_GAP > proposedWidth) {
       return snapPoint;
     }
   }
-  return Math.min(Math.max(WIDTHS.MIN, Math.min(proposedWidth, containerWidth)), WIDTHS.MAX);
+  var hardMax = expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) ? Math.min(containerWidth, WIDTHS.MAX) : Math.min(containerWidth, WIDTHS.FULL);
+  return Math.max(WIDTHS.MIN, Math.min(proposedWidth, hardMax));
 }
 export function createResizerCallbacks(_ref2) {
   var dom = _ref2.dom,
@@ -140,6 +146,12 @@ export function createResizerCallbacks(_ref2) {
       var isResizedToFullWidth = !!guidelines.find(function (guideline) {
         return guideline.key.startsWith('full_width') && guideline.active;
       });
+      var isResizedToMaxWidth = false;
+      if (expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true)) {
+        isResizedToMaxWidth = !!guidelines.find(function (guideline) {
+          return guideline.key.startsWith('max_width') && guideline.active;
+        });
+      }
       guidelines = getGuidelines(false, 0, getEditorWidth);
       api === null || api === void 0 || (_api$guideline2 = api.guideline) === null || _api$guideline2 === void 0 || (_api$guideline2 = _api$guideline2.actions) === null || _api$guideline2 === void 0 || _api$guideline2.displayGuideline(view)({
         guidelines: guidelines
@@ -147,12 +159,17 @@ export function createResizerCallbacks(_ref2) {
       var pos = view.posAtDOM(dom, 0);
       var mode = mark.attrs.mode;
       var initialWidth = mark.attrs.width;
-      var newWidth = isResizedToFullWidth ? WIDTHS.MAX : getProposedWidth({
+      var newWidth = isResizedToFullWidth ? WIDTHS.FULL : getProposedWidth({
         initialWidth: initialWidth,
         location: location,
         api: api,
         source: source
       });
+      if (expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true)) {
+        if (isResizedToMaxWidth) {
+          newWidth = 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';
       setBreakoutWidth(newWidth, mode, pos, isEditMode)(view.state, view.dispatch);
       if (fg('platform_editor_breakout_resizing_width_changes')) {

package/dist/esm/ui/GuidelineLabel.js

@@ -7,7 +7,9 @@ var GUIDELINE_KEY_TO_LAYOUT = {
   wide_left: 'wide',
   wide_right: 'wide',
   full_width_left: 'full-width',
-  full_width_right: 'full-width'
+  full_width_right: 'full-width',
+  max_width_left: 'max',
+  max_width_right: 'max'
 };
 export var GuidelineLabel = function GuidelineLabel(_ref) {
   var api = _ref.api,

package/dist/types/pm-plugins/get-guidelines.d.ts

@@ -8,5 +8,7 @@ export declare const GUIDELINE_KEYS: {
     readonly wideRight: "wide_right";
     readonly fullWidthLeft: "full_width_left";
     readonly fullWidthRight: "full_width_right";
+    readonly maxWidthLeft: "max_width_left";
+    readonly maxWidthRight: "max_width_right";
 };
 export declare const getGuidelines: import("memoize-one").MemoizedFn<(isResizing: boolean, newWidth: number, getEditorWidth: () => EditorContainerWidth | undefined, nodeType?: NodeType | undefined) => GuidelineConfig[]>;

package/dist/types-ts4.5/pm-plugins/get-guidelines.d.ts

@@ -8,5 +8,7 @@ export declare const GUIDELINE_KEYS: {
     readonly wideRight: "wide_right";
     readonly fullWidthLeft: "full_width_left";
     readonly fullWidthRight: "full_width_right";
+    readonly maxWidthLeft: "max_width_left";
+    readonly maxWidthRight: "max_width_right";
 };
 export declare const getGuidelines: import("memoize-one").MemoizedFn<(isResizing: boolean, newWidth: number, getEditorWidth: () => EditorContainerWidth | undefined, nodeType?: NodeType | undefined) => GuidelineConfig[]>;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-breakout",
-	"version": "6.1.5",
+	"version": "6.2.1",
 	"description": "Breakout plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -29,8 +29,8 @@
 	],
 	"atlaskit:src": "src/index.ts",
 	"dependencies": {
-		"@atlaskit/adf-schema": "^51.3.2",
-		"@atlaskit/editor-plugin-block-controls": "^7.5.0",
+		"@atlaskit/adf-schema": "^51.4.0",
+		"@atlaskit/editor-plugin-block-controls": "^7.7.0",
 		"@atlaskit/editor-plugin-editor-disabled": "^6.1.0",
 		"@atlaskit/editor-plugin-editor-viewmode": "^8.0.0",
 		"@atlaskit/editor-plugin-guideline": "^6.0.0",
@@ -38,14 +38,14 @@
 		"@atlaskit/editor-plugin-user-intent": "^4.0.0",
 		"@atlaskit/editor-plugin-width": "^7.0.0",
 		"@atlaskit/editor-prosemirror": "7.0.0",
-		"@atlaskit/editor-shared-styles": "^3.9.0",
+		"@atlaskit/editor-shared-styles": "^3.10.0",
 		"@atlaskit/icon": "^29.0.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": "^13.35.0",
+		"@atlaskit/tmp-editor-statsig": "^13.38.0",
 		"@atlaskit/tokens": "^8.0.0",
-		"@atlaskit/tooltip": "^20.8.0",
+		"@atlaskit/tooltip": "^20.9.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
 		"bind-event-listener": "^3.0.0",
@@ -53,7 +53,7 @@
 		"uuid": "^3.1.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^110.27.0",
+		"@atlaskit/editor-common": "^110.32.0",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
 		"react-intl-next": "npm:react-intl@^5.18.1"