@atlaskit/editor-core 208.3.3 → 208.3.5

package/CHANGELOG.md

@@ -1,5 +1,39 @@
 # @atlaskit/editor-core
 
+## 208.3.5
+
+### Patch Changes
+
+- [#175895](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/175895)
+  [`6165a5dc5b6b1`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/6165a5dc5b6b1) -
+  Remove deprecated path for react version of mentions
+- [#175471](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/175471)
+  [`302b93e537e73`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/302b93e537e73) -
+  ff cleanup for platform_editor_scroll_table_flickering_fix (FD-91488)
+- [#175569](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/175569)
+  [`3bcbd0cff0437`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/3bcbd0cff0437) -
+  [ux] ED-27958 extend the find algorithm to search smart cards behind
+  platform_editor_find_and_replace_improvements
+- [#176023](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/176023)
+  [`d88b8886797ae`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/d88b8886797ae) -
+  clean up experiment platform_editor_vanilla_dom on task
+- [#175339](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/175339)
+  [`d4115e4055a0a`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/d4115e4055a0a) -
+  ED-28314 Cleanup platform_editor_controls_patch_12
+- [#175899](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/175899)
+  [`a28d5dc386dbf`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/a28d5dc386dbf) -
+  Clean up platform_editor_fix_floating_toolbar_focus
+- Updated dependencies
+
+## 208.3.4
+
+### Patch Changes
+
+- [#173360](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/173360)
+  [`e424271b7afc6`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/e424271b7afc6) -
+  [ED-28169] Refactor FullPageContentArea dynamic styles to static emotion
+- Updated dependencies
+
 ## 208.3.3
 
 ### Patch Changes

package/dist/cjs/ui/Appearance/FullPage/FullPageContentArea.js

@@ -6,15 +6,21 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ScrollContainer = exports.FullPageContentArea = exports.EDITOR_CONTAINER = exports.CONTENT_AREA_TEST_ID = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _reactIntlNext = require("react-intl-next");
+var _adfSchema = require("@atlaskit/adf-schema");
 var _messages = require("@atlaskit/editor-common/messages");
+var _commonStyles = require("@atlaskit/editor-plugins/table/ui/common-styles");
+var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _scrollbar = require("@atlaskit/editor-shared-styles/scrollbar");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _platformFeatureFlagsReact = require("@atlaskit/platform-feature-flags-react");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
+var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _ClickAreaBlock = _interopRequireDefault(require("../../Addon/ClickAreaBlock"));
 var _contentComponentWrapper = require("../../Addon/ClickAreaBlock/contentComponentWrapper");
@@ -34,6 +40,317 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 // Ignored via go/ees005
 // eslint-disable-next-line import/no-named-as-default
 
+var akEditorFullWidthLayoutWidth = 1800;
+var akEditorSwoopCubicBezier = "cubic-bezier(0.15, 1, 0.3, 1)";
+var tableMarginFullWidthMode = 2;
+var akLayoutGutterOffset = 12;
+var SWOOP_ANIMATION = "0.5s ".concat(akEditorSwoopCubicBezier);
+var AK_NESTED_DND_GUTTER_OFFSET = 8;
+var FULL_PAGE_EDITOR_TOOLBAR_HEIGHT = "var(--ds-space-500, 40px)";
+var FULL_PAGE_EDITOR_TOOLBAR_HEIGHT_LIVE_PAGE = '2.188rem';
+var getTotalPadding = function getTotalPadding() {
+  return (0, _editorSharedStyles.akEditorGutterPaddingDynamic)() * 2;
+};
+
+// old styles - to be deleted when cleaning up experiment `platform_editor_core_static_emotion_non_central`
+var editorContentAreaStyle = function editorContentAreaStyle(_ref) {
+  var layoutMaxWidth = _ref.layoutMaxWidth,
+    fullWidthMode = _ref.fullWidthMode,
+    isEditorToolbarHidden = _ref.isEditorToolbarHidden;
+  return [editorContentArea, editorContentAreaProsemirrorStyle, (0, _platformFeatureFlags.fg)('platform_editor_fix_table_width_inline_comment') ? fullWidthNonChromelessBreakoutBlockTableStyle : fullWidthModeBreakoutBlockTableStyle, !fullWidthMode && editorContentAreaWithLayoutWith(layoutMaxWidth),
+  // for breakout resizing, there's no need to restrict the width of codeblocks as they're always wrapped in a breakout mark
+  (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_breakout_resizing', 'isEnabled', true) && (0, _platformFeatureFlags.fg)('platform_editor_breakout_resizing_width_changes') ? editorContentAreaContainerStyleExcludeCodeBlock() : editorContentAreaContainerStyle()].concat((0, _toConsumableArray2.default)((0, _platformFeatureFlags.fg)('platform_editor_controls_no_toolbar_space') ? [] : [(0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') &&
+  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values
+  contentAreaReducedHeaderSpace, isEditorToolbarHidden && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') &&
+  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values
+  contentAreaReservedPrimaryToolbarSpace]));
+};
+var editorContentAreaWithLayoutWith = function editorContentAreaWithLayoutWith(layoutMaxWidth) {
+  return (0, _react2.css)({
+    // this restricts max width
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+    maxWidth: "".concat(layoutMaxWidth + getTotalPadding(), "px")
+  });
+};
+
+/* Prevent horizontal scroll on page in full width mode */
+var editorContentAreaContainerStyleExcludeCodeBlock = function editorContentAreaContainerStyleExcludeCodeBlock() {
+  return (0, _react2.css)({
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+    '.fabric-editor--full-width-mode': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+      '.extension-container, .multiBodiedExtension--container': {
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+        maxWidth: "calc(100% - ".concat(tableMarginFullWidthMode * 2, "px)")
+      },
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+      '.extension-container.inline': {
+        maxWidth: '100%'
+      },
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+      'td .extension-container.inline': {
+        maxWidth: 'inherit'
+      },
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+      '[data-layout-section]': {
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+        maxWidth: "calc(100% + ".concat((akLayoutGutterOffset + ((0, _platformFeatureFlags.fg)('platform_editor_nested_dnd_styles_changes') ? AK_NESTED_DND_GUTTER_OFFSET : 0)) * 2, "px)")
+      }
+    }
+  });
+};
+
+/* Prevent horizontal scroll on page in full width mode */
+var editorContentAreaContainerStyle = function editorContentAreaContainerStyle() {
+  return (0, _react2.css)({
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+    '.fabric-editor--full-width-mode': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+      '.code-block, .extension-container, .multiBodiedExtension--container': {
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+        maxWidth: "calc(100% - ".concat(tableMarginFullWidthMode * 2, "px)")
+      },
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+      '.extension-container.inline': {
+        maxWidth: '100%'
+      },
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+      'td .extension-container.inline': {
+        maxWidth: 'inherit'
+      },
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+      '[data-layout-section]': {
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+        maxWidth: "calc(100% + ".concat((akLayoutGutterOffset + ((0, _platformFeatureFlags.fg)('platform_editor_nested_dnd_styles_changes') ? AK_NESTED_DND_GUTTER_OFFSET : 0)) * 2, "px)")
+      }
+    }
+  });
+};
+var editorContentArea = (0, _react2.css)({
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+  lineHeight: '24px',
+  paddingTop: "var(--ds-space-600, 48px)",
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+  '.ak-editor-content-area-no-toolbar &': {
+    // When the toolbar is hidden, we don't want content to jump up
+    // the extra 1px is to account for the border on the toolbar
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,  @atlaskit/ui-styling-standard/no-unsafe-values
+    paddingTop: "calc(".concat("var(--ds-space-600, 48px)", " + ", (0, _editorSharedStyles.FULL_PAGE_EDITOR_TOOLBAR_HEIGHT)(), " + 1px)")
+  },
+  paddingBottom: "var(--ds-space-600, 48px)",
+  height: 'calc( 100% - 105px )',
+  width: '100%',
+  margin: 'auto',
+  flexDirection: 'column',
+  flexGrow: 1,
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  maxWidth: "".concat(akEditorFullWidthLayoutWidth + getTotalPadding(), "px"),
+  transition: "max-width ".concat(SWOOP_ANIMATION)
+},
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+_commonStyles.tableFullPageEditorStyles);
+var editorContentAreaProsemirrorStyle = (0, _react2.css)({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '& .ProseMirror': (0, _defineProperty2.default)((0, _defineProperty2.default)({
+    flexGrow: 1,
+    boxSizing: 'border-box',
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+    '& > *': {
+      clear: 'both'
+    }
+  }, "> p, > ul, > ol:not(".concat(_adfSchema.taskListSelector, "):not(").concat(_adfSchema.decisionListSelector, "), > h1, > h2, > h3, > h4, > h5, > h6"), {
+    clear: 'none'
+  }), '> p:last-child', {
+    marginBottom: "var(--ds-space-300, 24px)"
+  })
+});
+var fullWidthModeBreakoutBlockTableStyle = (0, _react2.css)({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-1
+  '.fabric-editor--full-width-mode': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+    '.fabric-editor-breakout-mark, .extension-container.block, .pm-table-container': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
+      width: '100% !important'
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+    '.fabric-editor-breakout-mark': {
+      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview, @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
+      marginLeft: 'unset !important',
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
+      transform: 'none !important'
+    }
+  }
+});
+var fullWidthNonChromelessBreakoutBlockTableStyle = (0, _react2.css)({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-1
+  '.fabric-editor--full-width-mode:not(:has(#chromeless-editor))': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+    '.fabric-editor-breakout-mark, .extension-container.block, .pm-table-container': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
+      width: '100% !important'
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+    '.fabric-editor-breakout-mark': {
+      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview, @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
+      marginLeft: 'unset !important',
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
+      transform: 'none !important'
+    }
+  }
+});
+
+// An additional spacing applied at the top of the content area reserving space when the primary toolbar
+// is hidden – this avoids layout shift when the toolbar is toggled under the editor controls feature
+var contentAreaReservedPrimaryToolbarSpace = (0, _react2.css)({
+  // extra 1px to account for the bottom border on the toolbar
+  marginTop: "calc(".concat("var(--ds-space-500, 40px)", " + 1px)")
+});
+
+// A reduced top spacing applied to the content area to compensate for the reserved space at the top
+// of the page when the primary toolbar is hidden under the editor controls feature
+var contentAreaReducedHeaderSpace = (0, _react2.css)({
+  paddingTop: "var(--ds-space-400, 32px)"
+});
+var editorContentGutterStyle = function editorContentGutterStyle() {
+  return (0, _react2.css)({
+    boxSizing: 'border-box',
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+    padding: "0 ".concat((0, _editorSharedStyles.akEditorGutterPaddingDynamic)(), "px")
+  });
+};
+
+// new styles
+var editorContentAreaNoToolbarLivePageJumpMitigation = (0, _react2.css)({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+  '.ak-editor-content-area-no-toolbar &': {
+    paddingTop: "calc(".concat("var(--ds-space-600, 48px)", " + ", FULL_PAGE_EDITOR_TOOLBAR_HEIGHT_LIVE_PAGE, " + 1px)")
+  }
+});
+var editorContentAreaNoToolbarControls = (0, _react2.css)({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+  '.ak-editor-content-area-no-toolbar &': {
+    paddingTop: "calc(".concat("var(--ds-space-600, 48px)", " + ", FULL_PAGE_EDITOR_TOOLBAR_HEIGHT, " + 1px)")
+  }
+});
+var editorContentAreaNew = (0, _react2.css)({
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+  lineHeight: '24px',
+  paddingTop: "var(--ds-space-600, 48px)",
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+  '.ak-editor-content-area-no-toolbar &': {
+    // When the toolbar is hidden, we don't want content to jump up
+    // the extra 1px is to account for the border on the toolbar
+    paddingTop: "calc(".concat("var(--ds-space-600, 48px)", " + ", FULL_PAGE_EDITOR_TOOLBAR_HEIGHT, " + 1px)")
+  },
+  paddingBottom: "var(--ds-space-600, 48px)",
+  height: 'calc( 100% - 105px )',
+  width: '100%',
+  margin: 'auto',
+  flexDirection: 'column',
+  flexGrow: 1,
+  maxWidth: 'var(--ak-editor-content-area-max-width)',
+  transition: "max-width ".concat(SWOOP_ANIMATION)
+});
+var tableFullPageEditorStylesNew = (0, _react2.css)({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.ProseMirror .pm-table-wrapper > table': {
+    marginLeft: 0,
+    /* 1px border width offset added here to prevent unwanted overflow and scolling - ED-16212 */
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
+    marginRight: '-1px',
+    width: '100%'
+  }
+});
+var editorContentAreaContainerNestedDndStyle = (0, _react2.css)({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.fabric-editor--full-width-mode': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '[data-layout-section]': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+      maxWidth: "calc(100% + ".concat((akLayoutGutterOffset + AK_NESTED_DND_GUTTER_OFFSET) * 2, "px)")
+    }
+  }
+});
+
+/* Prevent horizontal scroll on page in full width mode */
+var editorContentAreaContainerStyleExcludeCodeBlockNew = (0, _react2.css)({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '.fabric-editor--full-width-mode': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+    '.extension-container, .multiBodiedExtension--container': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+      maxWidth: "calc(100% - ".concat(tableMarginFullWidthMode * 2, "px)")
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+    '.extension-container.inline': {
+      maxWidth: '100%'
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+    'td .extension-container.inline': {
+      maxWidth: 'inherit'
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+    '[data-layout-section]': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+      maxWidth: "calc(100% + ".concat(akLayoutGutterOffset * 2, "px)")
+    }
+  }
+});
+
+/* Prevent horizontal scroll on page in full width mode */
+var editorContentAreaContainerStyleNew = (0, _react2.css)({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '.fabric-editor--full-width-mode': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+    '.code-block, .extension-container, .multiBodiedExtension--container': {
+      maxWidth: "calc(100% - ".concat(tableMarginFullWidthMode * 2, "px)")
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+    '.extension-container.inline': {
+      maxWidth: '100%'
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+    'td .extension-container.inline': {
+      maxWidth: 'inherit'
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+    '[data-layout-section]': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+      maxWidth: "calc(100% + ".concat(akLayoutGutterOffset * 2, "px)")
+    }
+  }
+});
+var editorContentGutterStyleFG = (0, _react2.css)({
+  padding: '0 72px'
+});
+var editorContentGutterStyles = (0, _react2.css)({
+  boxSizing: 'border-box',
+  padding: '0 52px'
+});
+var contentAreaNew = (0, _react2.css)({
+  display: 'flex',
+  flexDirection: 'row',
+  height: "calc(100% - ".concat(FULL_PAGE_EDITOR_TOOLBAR_HEIGHT, ")"),
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values
+  '&.ak-editor-content-area-no-toolbar': {
+    // The editor toolbar height is 1px off (from the border) -- so we need to add 1px to the height
+    // to match the toolbar height
+    height: "calc(100% + 1px)"
+  },
+  boxSizing: 'border-box',
+  margin: 0,
+  padding: 0,
+  transition: "padding 0ms ".concat(akEditorSwoopCubicBezier)
+});
+var contentAreaHeightLivePageJumpMitigation = (0, _react2.css)({
+  height: "calc(100% - ".concat(FULL_PAGE_EDITOR_TOOLBAR_HEIGHT_LIVE_PAGE, ")")
+});
+var contentAreaHeightControls = (0, _react2.css)({
+  height: "calc(100% - ".concat(FULL_PAGE_EDITOR_TOOLBAR_HEIGHT, ")")
+});
+var contentAreaHeightNoToolbar = (0, _react2.css)({
+  height: '100%'
+});
 var CONTENT_AREA_TEST_ID = exports.CONTENT_AREA_TEST_ID = 'ak-editor-fp-content-area';
 var EDITOR_CONTAINER = exports.EDITOR_CONTAINER = 'ak-editor-container';
 var scrollStyles = (0, _react2.css)({
@@ -87,13 +404,13 @@ var Content = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     return (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1');
   };
   return (0, _react2.jsx)("div", {
-    css: [
+    css: (0, _expValEquals.expValEquals)('platform_editor_core_static_emotion_non_central', 'isEnabled', true) ? [contentAreaNew, (0, _platformFeatureFlags.fg)('live_pages_content_jump_mitigation') && contentAreaHeightLivePageJumpMitigation, (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1', {
+      exposure: true
+    }) && contentAreaHeightControls, props.isEditorToolbarHidden && contentAreaHeightNoToolbar] : [
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
     _StyledComponents.contentArea,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
-    props.isEditorToolbarHidden &&
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
-    _StyledComponents.contentAreaHeightNoToolbar],
+    props.isEditorToolbarHidden && contentAreaHeightNoToolbar],
     "data-testid": CONTENT_AREA_TEST_ID,
     ref: containerRef
   }, (0, _react2.jsx)("div", {
@@ -115,11 +432,18 @@ var Content = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     editorView: props.editorView,
     editorDisabled: props.disabled
   }, (0, _react2.jsx)("div", {
-    css: (0, _toConsumableArray2.default)((0, _StyledComponents.editorContentAreaStyle)({
+    css: (0, _expValEquals.expValEquals)('platform_editor_core_static_emotion_non_central', 'isEnabled', true) ? [editorContentAreaNew, editorContentAreaProsemirrorStyle, tableFullPageEditorStylesNew, (0, _platformFeatureFlags.fg)('live_pages_content_jump_mitigation') && editorContentAreaNoToolbarLivePageJumpMitigation, (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1', {
+      exposure: true
+    }) && editorContentAreaNoToolbarControls, (0, _platformFeatureFlags.fg)('platform_editor_fix_table_width_inline_comment') ? fullWidthNonChromelessBreakoutBlockTableStyle : fullWidthModeBreakoutBlockTableStyle,
+    // for breakout resizing, there's no need to restrict the width of codeblocks as they're always wrapped in a breakout mark
+    (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_breakout_resizing', 'isEnabled', true) && (0, _platformFeatureFlags.fg)('platform_editor_breakout_resizing_width_changes') ? editorContentAreaContainerStyleExcludeCodeBlockNew : editorContentAreaContainerStyleNew, (0, _platformFeatureFlags.fg)('platform_editor_nested_dnd_styles_changes') && editorContentAreaContainerNestedDndStyle, !(0, _platformFeatureFlags.fg)('platform_editor_controls_no_toolbar_space') && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && contentAreaReducedHeaderSpace, !(0, _platformFeatureFlags.fg)('platform_editor_controls_no_toolbar_space') && props.isEditorToolbarHidden && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && contentAreaReservedPrimaryToolbarSpace] : (0, _toConsumableArray2.default)(editorContentAreaStyle({
       fullWidthMode: fullWidthMode,
       layoutMaxWidth: theme.layoutMaxWidth,
       isEditorToolbarHidden: props.isEditorToolbarHidden
-    }))
+    })),
+    style: {
+      '--ak-editor-content-area-max-width': !fullWidthMode ? "".concat(theme.layoutMaxWidth + getTotalPadding(), "px") : "".concat(akEditorFullWidthLayoutWidth + getTotalPadding(), "px")
+    }
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
     ,
     className: "ak-editor-content-area-region",
@@ -129,8 +453,11 @@ var Content = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     "aria-label": props.intl.formatMessage(_messages.fullPageMessages.editableContentLabel),
     ref: contentAreaRef
   }, (0, _react2.jsx)("div", {
+    css: (0, _expValEquals.expValEquals)('platform_editor_core_static_emotion_non_central', 'isEnabled', true) ? [editorContentGutterStyles,
+    // eslint-disable-next-line @atlaskit/platform/no-preconditioning
+    (0, _platformFeatureFlags.fg)('platform_editor_controls_increase_full_page_gutter') && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && editorContentGutterStyleFG] : [
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
-    css: (0, _StyledComponents.editorContentGutterStyle)()
+    editorContentGutterStyle()]
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     ,
     className: (0, _platformFeatureFlags.fg)('platform_editor_no_cursor_on_live_doc_init') ? (0, _classnames.default)('ak-editor-content-area', 'appearance-full-page', {