@atlaskit/editor-plugin-breakout 6.2.6 → 6.3.1

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @atlaskit/editor-plugin-breakout
 
+## 6.3.1
+
+### Patch Changes
+
+- [`d0a60ac78aa7e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/d0a60ac78aa7e) -
+  Remove platform_editor_breakout_resizing_width_changes FG
+- Updated dependencies
+
+## 6.3.0
+
+### Minor Changes
+
+- [`8677e7b660127`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/8677e7b660127) -
+  EDITOR-3792 Rollup max width changes previously gated with editor_tinymce_full_width_mode into
+  combined frontend/backend flag confluence_max_width_content_appearance
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 6.2.6
 
 ### Patch Changes

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

@@ -55,7 +55,7 @@ var getGuidelines = exports.getGuidelines = (0, _memoizeOne.default)(function (i
     exposure: true
   }) ? _editorSharedStyles.akEditorGutterPaddingReduced : (0, _editorSharedStyles.akEditorGutterPaddingDynamic)();
   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;
+  var maxWidth = width && ((0, _expValEquals.expValEquals)('editor_tinymce_full_width_mode', 'isEnabled', true) || (0, _expValEquals.expValEquals)('confluence_max_width_content_appearance', 'isEnabled', true)) ? Math.min(WIDTHS.MAX, width - 2 * padding - _editorSharedStyles.akEditorGutterPadding) : undefined;
   guidelines.push({
     key: GUIDELINE_KEYS.lineLengthLeft,
     position: {

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

@@ -12,7 +12,6 @@ var _react = _interopRequireWildcard(require("react"));
 var _bindEventListener = require("bind-event-listener");
 var _v = _interopRequireDefault(require("uuid/v4"));
 var _messages = require("@atlaskit/editor-common/messages");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _adapter = require("@atlaskit/pragmatic-drag-and-drop/element/adapter");
 var _disableNativeDragPreview = require("@atlaskit/pragmatic-drag-and-drop/element/disable-native-drag-preview");
 var _preventUnhandled = require("@atlaskit/pragmatic-drag-and-drop/prevent-unhandled");
@@ -73,9 +72,7 @@ var createPragmaticResizer = exports.createPragmaticResizer = function createPra
     var handle = document.createElement('div');
     handle.contentEditable = 'false';
     handle.classList.add('pm-breakout-resize-handle-container');
-    if ((0, _platformFeatureFlags.fg)('platform_editor_breakout_resizing_width_changes')) {
-      handle.style.gridColumn = side === 'left' ? '1' : '3';
-    }
+    handle.style.gridColumn = side === 'left' ? '1' : '3';
     var rail = document.createElement('div');
     rail.classList.add('pm-breakout-resize-handle-rail');
     if (side === 'left') {

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

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 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");
@@ -40,7 +39,7 @@ 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.FULL)];
-  if ((0, _expValEquals.expValEquals)('editor_tinymce_full_width_mode', 'isEnabled', true)) {
+  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));
   }
   for (var _i = 0, _snapPoints = snapPoints; _i < _snapPoints.length; _i++) {
@@ -49,12 +48,11 @@ function getProposedWidth(_ref) {
       return snapPoint;
     }
   }
-  var hardMax = (0, _expValEquals.expValEquals)('editor_tinymce_full_width_mode', 'isEnabled', true) ? Math.min(containerWidth, WIDTHS.MAX) : Math.min(containerWidth, WIDTHS.FULL);
+  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));
 }
 function createResizerCallbacks(_ref2) {
   var dom = _ref2.dom,
-    contentDOM = _ref2.contentDOM,
     view = _ref2.view,
     mark = _ref2.mark,
     api = _ref2.api;
@@ -132,12 +130,9 @@ function createResizerCallbacks(_ref2) {
           return tr;
         });
       }
-      if ((0, _platformFeatureFlags.fg)('platform_editor_breakout_resizing_width_changes')) {
-        // dom is used for width calculations
-        dom.style.setProperty(_resizingMarkView.LOCAL_RESIZE_PROPERTY, "".concat(newWidth, "px"));
-      } else {
-        contentDOM.style.setProperty(_resizingMarkView.LOCAL_RESIZE_PROPERTY, "".concat(newWidth, "px"));
-      }
+
+      // dom is used for width calculations
+      dom.style.setProperty(_resizingMarkView.LOCAL_RESIZE_PROPERTY, "".concat(newWidth, "px"));
     },
     onDrop: function onDrop(_ref7) {
       var _api$guideline2, _api$editorViewMode;
@@ -154,7 +149,7 @@ function createResizerCallbacks(_ref2) {
         return guideline.key.startsWith('full_width') && guideline.active;
       });
       var isResizedToMaxWidth = false;
-      if ((0, _expValEquals.expValEquals)('editor_tinymce_full_width_mode', 'isEnabled', true)) {
+      if ((0, _expValEquals.expValEquals)('editor_tinymce_full_width_mode', 'isEnabled', true) || (0, _expValEquals.expValEquals)('confluence_max_width_content_appearance', 'isEnabled', true)) {
         isResizedToMaxWidth = !!guidelines.find(function (guideline) {
           return guideline.key.startsWith('max_width') && guideline.active;
         });
@@ -172,18 +167,14 @@ function createResizerCallbacks(_ref2) {
         api: api,
         source: source
       });
-      if ((0, _expValEquals.expValEquals)('editor_tinymce_full_width_mode', 'isEnabled', true)) {
+      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;
         }
       }
       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')) {
-        dom.style.removeProperty(_resizingMarkView.LOCAL_RESIZE_PROPERTY);
-      } else {
-        contentDOM.style.removeProperty(_resizingMarkView.LOCAL_RESIZE_PROPERTY);
-      }
+      dom.style.removeProperty(_resizingMarkView.LOCAL_RESIZE_PROPERTY);
       if (node) {
         var resizedPayload = (0, _analytics.generateResizedEventPayload)({
           node: node,

package/dist/cjs/pm-plugins/resizing-mark-view.js

@@ -9,7 +9,6 @@ var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/cl
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _styles = require("@atlaskit/editor-common/styles");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _pragmaticResizer = require("./pragmatic-resizer");
 var _resizerCallbacks = require("./resizer-callbacks");
@@ -47,14 +46,9 @@ var ResizingMarkView = exports.ResizingMarkView = /*#__PURE__*/function () {
     dom.style.justifyContent = 'center';
 
     // contentDOM - styles
-    if ((0, _platformFeatureFlags.fg)('platform_editor_breakout_resizing_width_changes')) {
-      contentDOM.style.gridColumn = '2';
-    } else {
-      contentDOM.style.gridRow = '1';
-      contentDOM.style.gridColumn = '1';
-    }
+    contentDOM.style.gridColumn = '2';
     contentDOM.style.zIndex = '1';
-    if ((0, _expValEquals.expValEquals)('platform_editor_breakout_resizing_vc90_fix', 'isEnabled', true) && (0, _platformFeatureFlags.fg)('platform_editor_breakout_resizing_width_changes')) {
+    if ((0, _expValEquals.expValEquals)('platform_editor_breakout_resizing_vc90_fix', 'isEnabled', true)) {
       if (mark.attrs.width) {
         dom.style.gridTemplateColumns = "auto max(var(--ak-editor--breakout-min-width), min(var(".concat(LOCAL_RESIZE_PROPERTY, ", ").concat(mark.attrs.width, "px), var(--ak-editor--breakout-fallback-width))) auto");
       } else {
@@ -65,20 +59,9 @@ var ResizingMarkView = exports.ResizingMarkView = /*#__PURE__*/function () {
           contentDOM.style.width = "max(var(--ak-editor--line-length), min(var(".concat(LOCAL_RESIZE_PROPERTY, ", var(--ak-editor--full-width-layout-width)), calc(100cqw - var(--ak-editor--breakout-full-page-guttering-padding))))");
         }
       }
-    } else if ((0, _platformFeatureFlags.fg)('platform_editor_breakout_resizing_width_changes')) {
-      if (mark.attrs.width) {
-        dom.style.gridTemplateColumns = "auto min(var(".concat(LOCAL_RESIZE_PROPERTY, ", ").concat(mark.attrs.width, "px), var(--ak-editor--breakout-fallback-width)) auto");
-      } else {
-        if (mark.attrs.mode === 'wide') {
-          contentDOM.style.width = "max(var(--ak-editor--line-length), min(var(".concat(LOCAL_RESIZE_PROPERTY, ", var(--ak-editor--breakout-wide-layout-width)), calc(100cqw - var(--ak-editor--breakout-full-page-guttering-padding))))");
-        }
-        if (mark.attrs.mode === 'full-width') {
-          contentDOM.style.width = "max(var(--ak-editor--line-length), min(var(".concat(LOCAL_RESIZE_PROPERTY, ", var(--ak-editor--full-width-layout-width)), calc(100cqw - var(--ak-editor--breakout-full-page-guttering-padding))))");
-        }
-      }
     } else {
       if (mark.attrs.width) {
-        contentDOM.style.width = "min(var(".concat(LOCAL_RESIZE_PROPERTY, ", ").concat(mark.attrs.width, "px), calc(100cqw - var(--ak-editor--breakout-full-page-guttering-padding)))");
+        dom.style.gridTemplateColumns = "auto min(var(".concat(LOCAL_RESIZE_PROPERTY, ", ").concat(mark.attrs.width, "px), var(--ak-editor--breakout-fallback-width)) auto");
       } else {
         if (mark.attrs.mode === 'wide') {
           contentDOM.style.width = "max(var(--ak-editor--line-length), min(var(".concat(LOCAL_RESIZE_PROPERTY, ", var(--ak-editor--breakout-wide-layout-width)), calc(100cqw - var(--ak-editor--breakout-full-page-guttering-padding))))");
@@ -118,7 +101,6 @@ var ResizingMarkView = exports.ResizingMarkView = /*#__PURE__*/function () {
     value: function setupResizerCallbacks(dom, contentDOM, view, mark, api) {
       var callbacks = (0, _resizerCallbacks.createResizerCallbacks)({
         dom: dom,
-        contentDOM: contentDOM,
         view: view,
         mark: mark,
         api: api

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

@@ -46,7 +46,7 @@ export const getGuidelines = memoizeOne((isResizing, newWidth, getEditorWidth, n
     exposure: true
   }) ? akEditorGutterPaddingReduced : akEditorGutterPaddingDynamic();
   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;
+  const maxWidth = width && (expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) || expValEquals('confluence_max_width_content_appearance', 'isEnabled', true)) ? Math.min(WIDTHS.MAX, width - 2 * padding - akEditorGutterPadding) : undefined;
   guidelines.push({
     key: GUIDELINE_KEYS.lineLengthLeft,
     position: {

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

@@ -3,7 +3,6 @@ import { bind } from 'bind-event-listener';
 // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
 import uuid from 'uuid/v4';
 import { breakoutMessages as messages } from '@atlaskit/editor-common/messages';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { draggable } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import { disableNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/element/disable-native-drag-preview';
 import { preventUnhandled } from '@atlaskit/pragmatic-drag-and-drop/prevent-unhandled';
@@ -60,9 +59,7 @@ export const createPragmaticResizer = ({
     const handle = document.createElement('div');
     handle.contentEditable = 'false';
     handle.classList.add('pm-breakout-resize-handle-container');
-    if (fg('platform_editor_breakout_resizing_width_changes')) {
-      handle.style.gridColumn = side === 'left' ? '1' : '3';
-    }
+    handle.style.gridColumn = side === 'left' ? '1' : '3';
     const rail = document.createElement('div');
     rail.classList.add('pm-breakout-resize-handle-rail');
     if (side === 'left') {

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

@@ -1,5 +1,4 @@
 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';
@@ -34,7 +33,7 @@ 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.FULL)];
-  if (expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true)) {
+  if (expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) || expValEquals('confluence_max_width_content_appearance', 'isEnabled', true)) {
     snapPoints.push(Math.min(containerWidth, WIDTHS.MAX));
   }
   for (const snapPoint of snapPoints) {
@@ -42,12 +41,11 @@ export function getProposedWidth({
       return snapPoint;
     }
   }
-  const hardMax = expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) ? Math.min(containerWidth, WIDTHS.MAX) : Math.min(containerWidth, WIDTHS.FULL);
+  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));
 }
 export function createResizerCallbacks({
   dom,
-  contentDOM,
   view,
   mark,
   api
@@ -129,12 +127,9 @@ export function createResizerCallbacks({
           return tr;
         });
       }
-      if (fg('platform_editor_breakout_resizing_width_changes')) {
-        // dom is used for width calculations
-        dom.style.setProperty(LOCAL_RESIZE_PROPERTY, `${newWidth}px`);
-      } else {
-        contentDOM.style.setProperty(LOCAL_RESIZE_PROPERTY, `${newWidth}px`);
-      }
+
+      // dom is used for width calculations
+      dom.style.setProperty(LOCAL_RESIZE_PROPERTY, `${newWidth}px`);
     },
     onDrop({
       location,
@@ -150,7 +145,7 @@ export function createResizerCallbacks({
       });
       const isResizedToFullWidth = !!guidelines.find(guideline => guideline.key.startsWith('full_width') && guideline.active);
       let isResizedToMaxWidth = false;
-      if (expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true)) {
+      if (expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) || expValEquals('confluence_max_width_content_appearance', 'isEnabled', true)) {
         isResizedToMaxWidth = !!guidelines.find(guideline => guideline.key.startsWith('max_width') && guideline.active);
       }
       guidelines = getGuidelines(false, 0, getEditorWidth);
@@ -166,18 +161,14 @@ export function createResizerCallbacks({
         api,
         source
       });
-      if (expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true)) {
+      if (expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) || expValEquals('confluence_max_width_content_appearance', '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')) {
-        dom.style.removeProperty(LOCAL_RESIZE_PROPERTY);
-      } else {
-        contentDOM.style.removeProperty(LOCAL_RESIZE_PROPERTY);
-      }
+      dom.style.removeProperty(LOCAL_RESIZE_PROPERTY);
       if (node) {
         const resizedPayload = generateResizedEventPayload({
           node,

package/dist/es2019/pm-plugins/resizing-mark-view.js

@@ -1,6 +1,5 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { BreakoutCssClassName } from '@atlaskit/editor-common/styles';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { createPragmaticResizer } from './pragmatic-resizer';
 import { createResizerCallbacks } from './resizer-callbacks';
@@ -33,14 +32,9 @@ export class ResizingMarkView {
     dom.style.justifyContent = 'center';
 
     // contentDOM - styles
-    if (fg('platform_editor_breakout_resizing_width_changes')) {
-      contentDOM.style.gridColumn = '2';
-    } else {
-      contentDOM.style.gridRow = '1';
-      contentDOM.style.gridColumn = '1';
-    }
+    contentDOM.style.gridColumn = '2';
     contentDOM.style.zIndex = '1';
-    if (expValEquals('platform_editor_breakout_resizing_vc90_fix', 'isEnabled', true) && fg('platform_editor_breakout_resizing_width_changes')) {
+    if (expValEquals('platform_editor_breakout_resizing_vc90_fix', 'isEnabled', true)) {
       if (mark.attrs.width) {
         dom.style.gridTemplateColumns = `auto max(var(--ak-editor--breakout-min-width), min(var(${LOCAL_RESIZE_PROPERTY}, ${mark.attrs.width}px), var(--ak-editor--breakout-fallback-width))) auto`;
       } else {
@@ -51,20 +45,9 @@ export class ResizingMarkView {
           contentDOM.style.width = `max(var(--ak-editor--line-length), min(var(${LOCAL_RESIZE_PROPERTY}, var(--ak-editor--full-width-layout-width)), calc(100cqw - var(--ak-editor--breakout-full-page-guttering-padding))))`;
         }
       }
-    } else if (fg('platform_editor_breakout_resizing_width_changes')) {
-      if (mark.attrs.width) {
-        dom.style.gridTemplateColumns = `auto min(var(${LOCAL_RESIZE_PROPERTY}, ${mark.attrs.width}px), var(--ak-editor--breakout-fallback-width)) auto`;
-      } else {
-        if (mark.attrs.mode === 'wide') {
-          contentDOM.style.width = `max(var(--ak-editor--line-length), min(var(${LOCAL_RESIZE_PROPERTY}, var(--ak-editor--breakout-wide-layout-width)), calc(100cqw - var(--ak-editor--breakout-full-page-guttering-padding))))`;
-        }
-        if (mark.attrs.mode === 'full-width') {
-          contentDOM.style.width = `max(var(--ak-editor--line-length), min(var(${LOCAL_RESIZE_PROPERTY}, var(--ak-editor--full-width-layout-width)), calc(100cqw - var(--ak-editor--breakout-full-page-guttering-padding))))`;
-        }
-      }
     } else {
       if (mark.attrs.width) {
-        contentDOM.style.width = `min(var(${LOCAL_RESIZE_PROPERTY}, ${mark.attrs.width}px), calc(100cqw - var(--ak-editor--breakout-full-page-guttering-padding)))`;
+        dom.style.gridTemplateColumns = `auto min(var(${LOCAL_RESIZE_PROPERTY}, ${mark.attrs.width}px), var(--ak-editor--breakout-fallback-width)) auto`;
       } else {
         if (mark.attrs.mode === 'wide') {
           contentDOM.style.width = `max(var(--ak-editor--line-length), min(var(${LOCAL_RESIZE_PROPERTY}, var(--ak-editor--breakout-wide-layout-width)), calc(100cqw - var(--ak-editor--breakout-full-page-guttering-padding))))`;
@@ -102,7 +85,6 @@ export class ResizingMarkView {
   setupResizerCallbacks(dom, contentDOM, view, mark, api) {
     const callbacks = createResizerCallbacks({
       dom,
-      contentDOM,
       view,
       mark,
       api

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

@@ -48,7 +48,7 @@ export var getGuidelines = memoizeOne(function (isResizing, newWidth, getEditorW
     exposure: true
   }) ? akEditorGutterPaddingReduced : akEditorGutterPaddingDynamic();
   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;
+  var maxWidth = width && (expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) || expValEquals('confluence_max_width_content_appearance', 'isEnabled', true)) ? Math.min(WIDTHS.MAX, width - 2 * padding - akEditorGutterPadding) : undefined;
   guidelines.push({
     key: GUIDELINE_KEYS.lineLengthLeft,
     position: {

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

@@ -5,7 +5,6 @@ import { bind } from 'bind-event-listener';
 // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
 import uuid from 'uuid/v4';
 import { breakoutMessages as messages } from '@atlaskit/editor-common/messages';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { draggable } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import { disableNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/element/disable-native-drag-preview';
 import { preventUnhandled } from '@atlaskit/pragmatic-drag-and-drop/prevent-unhandled';
@@ -63,9 +62,7 @@ export var createPragmaticResizer = function createPragmaticResizer(_ref2) {
     var handle = document.createElement('div');
     handle.contentEditable = 'false';
     handle.classList.add('pm-breakout-resize-handle-container');
-    if (fg('platform_editor_breakout_resizing_width_changes')) {
-      handle.style.gridColumn = side === 'left' ? '1' : '3';
-    }
+    handle.style.gridColumn = side === 'left' ? '1' : '3';
     var rail = document.createElement('div');
     rail.classList.add('pm-breakout-resize-handle-rail');
     if (side === 'left') {

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

@@ -1,5 +1,4 @@
 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';
@@ -33,7 +32,7 @@ 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.FULL)];
-  if (expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true)) {
+  if (expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) || expValEquals('confluence_max_width_content_appearance', 'isEnabled', true)) {
     snapPoints.push(Math.min(containerWidth, WIDTHS.MAX));
   }
   for (var _i = 0, _snapPoints = snapPoints; _i < _snapPoints.length; _i++) {
@@ -42,12 +41,11 @@ export function getProposedWidth(_ref) {
       return snapPoint;
     }
   }
-  var hardMax = expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) ? Math.min(containerWidth, WIDTHS.MAX) : Math.min(containerWidth, WIDTHS.FULL);
+  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));
 }
 export function createResizerCallbacks(_ref2) {
   var dom = _ref2.dom,
-    contentDOM = _ref2.contentDOM,
     view = _ref2.view,
     mark = _ref2.mark,
     api = _ref2.api;
@@ -125,12 +123,9 @@ export function createResizerCallbacks(_ref2) {
           return tr;
         });
       }
-      if (fg('platform_editor_breakout_resizing_width_changes')) {
-        // dom is used for width calculations
-        dom.style.setProperty(LOCAL_RESIZE_PROPERTY, "".concat(newWidth, "px"));
-      } else {
-        contentDOM.style.setProperty(LOCAL_RESIZE_PROPERTY, "".concat(newWidth, "px"));
-      }
+
+      // dom is used for width calculations
+      dom.style.setProperty(LOCAL_RESIZE_PROPERTY, "".concat(newWidth, "px"));
     },
     onDrop: function onDrop(_ref7) {
       var _api$guideline2, _api$editorViewMode;
@@ -147,7 +142,7 @@ export function createResizerCallbacks(_ref2) {
         return guideline.key.startsWith('full_width') && guideline.active;
       });
       var isResizedToMaxWidth = false;
-      if (expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true)) {
+      if (expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) || expValEquals('confluence_max_width_content_appearance', 'isEnabled', true)) {
         isResizedToMaxWidth = !!guidelines.find(function (guideline) {
           return guideline.key.startsWith('max_width') && guideline.active;
         });
@@ -165,18 +160,14 @@ export function createResizerCallbacks(_ref2) {
         api: api,
         source: source
       });
-      if (expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true)) {
+      if (expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) || expValEquals('confluence_max_width_content_appearance', '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')) {
-        dom.style.removeProperty(LOCAL_RESIZE_PROPERTY);
-      } else {
-        contentDOM.style.removeProperty(LOCAL_RESIZE_PROPERTY);
-      }
+      dom.style.removeProperty(LOCAL_RESIZE_PROPERTY);
       if (node) {
         var resizedPayload = generateResizedEventPayload({
           node: node,

package/dist/esm/pm-plugins/resizing-mark-view.js

@@ -4,7 +4,6 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 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 { BreakoutCssClassName } from '@atlaskit/editor-common/styles';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { createPragmaticResizer } from './pragmatic-resizer';
 import { createResizerCallbacks } from './resizer-callbacks';
@@ -40,14 +39,9 @@ export var ResizingMarkView = /*#__PURE__*/function () {
     dom.style.justifyContent = 'center';
 
     // contentDOM - styles
-    if (fg('platform_editor_breakout_resizing_width_changes')) {
-      contentDOM.style.gridColumn = '2';
-    } else {
-      contentDOM.style.gridRow = '1';
-      contentDOM.style.gridColumn = '1';
-    }
+    contentDOM.style.gridColumn = '2';
     contentDOM.style.zIndex = '1';
-    if (expValEquals('platform_editor_breakout_resizing_vc90_fix', 'isEnabled', true) && fg('platform_editor_breakout_resizing_width_changes')) {
+    if (expValEquals('platform_editor_breakout_resizing_vc90_fix', 'isEnabled', true)) {
       if (mark.attrs.width) {
         dom.style.gridTemplateColumns = "auto max(var(--ak-editor--breakout-min-width), min(var(".concat(LOCAL_RESIZE_PROPERTY, ", ").concat(mark.attrs.width, "px), var(--ak-editor--breakout-fallback-width))) auto");
       } else {
@@ -58,20 +52,9 @@ export var ResizingMarkView = /*#__PURE__*/function () {
           contentDOM.style.width = "max(var(--ak-editor--line-length), min(var(".concat(LOCAL_RESIZE_PROPERTY, ", var(--ak-editor--full-width-layout-width)), calc(100cqw - var(--ak-editor--breakout-full-page-guttering-padding))))");
         }
       }
-    } else if (fg('platform_editor_breakout_resizing_width_changes')) {
-      if (mark.attrs.width) {
-        dom.style.gridTemplateColumns = "auto min(var(".concat(LOCAL_RESIZE_PROPERTY, ", ").concat(mark.attrs.width, "px), var(--ak-editor--breakout-fallback-width)) auto");
-      } else {
-        if (mark.attrs.mode === 'wide') {
-          contentDOM.style.width = "max(var(--ak-editor--line-length), min(var(".concat(LOCAL_RESIZE_PROPERTY, ", var(--ak-editor--breakout-wide-layout-width)), calc(100cqw - var(--ak-editor--breakout-full-page-guttering-padding))))");
-        }
-        if (mark.attrs.mode === 'full-width') {
-          contentDOM.style.width = "max(var(--ak-editor--line-length), min(var(".concat(LOCAL_RESIZE_PROPERTY, ", var(--ak-editor--full-width-layout-width)), calc(100cqw - var(--ak-editor--breakout-full-page-guttering-padding))))");
-        }
-      }
     } else {
       if (mark.attrs.width) {
-        contentDOM.style.width = "min(var(".concat(LOCAL_RESIZE_PROPERTY, ", ").concat(mark.attrs.width, "px), calc(100cqw - var(--ak-editor--breakout-full-page-guttering-padding)))");
+        dom.style.gridTemplateColumns = "auto min(var(".concat(LOCAL_RESIZE_PROPERTY, ", ").concat(mark.attrs.width, "px), var(--ak-editor--breakout-fallback-width)) auto");
       } else {
         if (mark.attrs.mode === 'wide') {
           contentDOM.style.width = "max(var(--ak-editor--line-length), min(var(".concat(LOCAL_RESIZE_PROPERTY, ", var(--ak-editor--breakout-wide-layout-width)), calc(100cqw - var(--ak-editor--breakout-full-page-guttering-padding))))");
@@ -111,7 +94,6 @@ export var ResizingMarkView = /*#__PURE__*/function () {
     value: function setupResizerCallbacks(dom, contentDOM, view, mark, api) {
       var callbacks = createResizerCallbacks({
         dom: dom,
-        contentDOM: contentDOM,
         view: view,
         mark: mark,
         api: api

package/dist/types/pm-plugins/resizer-callbacks.d.ts

@@ -10,9 +10,8 @@ export declare function getProposedWidth({ initialWidth, location, api, source,
     location: DragLocationHistory;
     source: ElementDragPayload;
 }): number;
-export declare function createResizerCallbacks({ dom, contentDOM, view, mark, api, }: {
+export declare function createResizerCallbacks({ dom, view, mark, api, }: {
     api: ExtractInjectionAPI<BreakoutPlugin> | undefined;
-    contentDOM: HTMLElement;
     dom: HTMLElement;
     mark: Mark;
     view: EditorView;

package/dist/types-ts4.5/pm-plugins/resizer-callbacks.d.ts

@@ -10,9 +10,8 @@ export declare function getProposedWidth({ initialWidth, location, api, source,
     location: DragLocationHistory;
     source: ElementDragPayload;
 }): number;
-export declare function createResizerCallbacks({ dom, contentDOM, view, mark, api, }: {
+export declare function createResizerCallbacks({ dom, view, mark, api, }: {
     api: ExtractInjectionAPI<BreakoutPlugin> | undefined;
-    contentDOM: HTMLElement;
     dom: HTMLElement;
     mark: Mark;
     view: EditorView;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-breakout",
-	"version": "6.2.6",
+	"version": "6.3.1",
 	"description": "Breakout plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -43,7 +43,7 @@
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/pragmatic-drag-and-drop": "^1.7.0",
 		"@atlaskit/theme": "^21.0.0",
-		"@atlaskit/tmp-editor-statsig": "^15.7.0",
+		"@atlaskit/tmp-editor-statsig": "^15.9.0",
 		"@atlaskit/tokens": "^8.4.0",
 		"@atlaskit/tooltip": "^20.11.0",
 		"@babel/runtime": "^7.0.0",
@@ -101,9 +101,6 @@
 	"platform-feature-flags": {
 		"platform-editor-single-player-expand": {
 			"type": "boolean"
-		},
-		"platform_editor_breakout_resizing_width_changes": {
-			"type": "boolean"
 		}
 	}
 }