@atlaskit/editor-core 208.3.2 → 208.3.4

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

@@ -9,10 +9,15 @@ import React, { useImperativeHandle, useRef } from 'react';
 import { css, jsx, useTheme } from '@emotion/react';
 import classnames from 'classnames';
 import { injectIntl } from 'react-intl-next';
+import { decisionListSelector, taskListSelector } from '@atlaskit/adf-schema';
 import { fullPageMessages as messages } from '@atlaskit/editor-common/messages';
+import { tableFullPageEditorStyles } from '@atlaskit/editor-plugins/table/ui/common-styles';
+import { FULL_PAGE_EDITOR_TOOLBAR_HEIGHT as FULL_PAGE_EDITOR_TOOLBAR_HEIGHT_OLD, akEditorGutterPaddingDynamic } from '@atlaskit/editor-shared-styles';
 import { scrollbarStyles } from '@atlaskit/editor-shared-styles/scrollbar';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { componentWithCondition } from '@atlaskit/platform-feature-flags-react';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
+import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 // Ignored via go/ees005
 // eslint-disable-next-line import/no-named-as-default
@@ -22,7 +27,313 @@ import { createEditorContentStyle } from '../../ContentStyles';
 import { ContextPanel } from '../../ContextPanel';
 import EditorContentContainer from '../../EditorContentContainer/EditorContentContainer';
 import PluginSlot from '../../PluginSlot';
-import { contentArea, contentAreaHeightNoToolbar, contentAreaWrapper, editorContentAreaStyle, editorContentGutterStyle, sidebarArea } from './StyledComponents';
+import { contentArea, contentAreaWrapper, sidebarArea } from './StyledComponents';
+const akEditorFullWidthLayoutWidth = 1800;
+const akEditorSwoopCubicBezier = `cubic-bezier(0.15, 1, 0.3, 1)`;
+const tableMarginFullWidthMode = 2;
+const akLayoutGutterOffset = 12;
+const SWOOP_ANIMATION = `0.5s ${akEditorSwoopCubicBezier}`;
+const AK_NESTED_DND_GUTTER_OFFSET = 8;
+const FULL_PAGE_EDITOR_TOOLBAR_HEIGHT = "var(--ds-space-500, 40px)";
+const FULL_PAGE_EDITOR_TOOLBAR_HEIGHT_LIVE_PAGE = '2.188rem';
+const getTotalPadding = () => akEditorGutterPaddingDynamic() * 2;
+
+// old styles - to be deleted when cleaning up experiment `platform_editor_core_static_emotion_non_central`
+const editorContentAreaStyle = ({
+  layoutMaxWidth,
+  fullWidthMode,
+  isEditorToolbarHidden
+}) => [editorContentArea, editorContentAreaProsemirrorStyle, 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
+expValEqualsNoExposure('platform_editor_breakout_resizing', 'isEnabled', true) && fg('platform_editor_breakout_resizing_width_changes') ? editorContentAreaContainerStyleExcludeCodeBlock() : editorContentAreaContainerStyle(), ...(fg('platform_editor_controls_no_toolbar_space') ? [] : [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 && 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])];
+const editorContentAreaWithLayoutWith = layoutMaxWidth => css({
+  // this restricts max width
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  maxWidth: `${layoutMaxWidth + getTotalPadding()}px`
+});
+
+/* Prevent horizontal scroll on page in full width mode */
+const editorContentAreaContainerStyleExcludeCodeBlock = () => 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% - ${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% + ${(akLayoutGutterOffset + (fg('platform_editor_nested_dnd_styles_changes') ? AK_NESTED_DND_GUTTER_OFFSET : 0)) * 2}px)`
+    }
+  }
+});
+
+/* Prevent horizontal scroll on page in full width mode */
+const editorContentAreaContainerStyle = () => 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% - ${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% + ${(akLayoutGutterOffset + (fg('platform_editor_nested_dnd_styles_changes') ? AK_NESTED_DND_GUTTER_OFFSET : 0)) * 2}px)`
+    }
+  }
+});
+const editorContentArea = 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(${"var(--ds-space-600, 48px)"} + ${FULL_PAGE_EDITOR_TOOLBAR_HEIGHT_OLD()} + 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: `${akEditorFullWidthLayoutWidth + getTotalPadding()}px`,
+  transition: `max-width ${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
+tableFullPageEditorStyles);
+const editorContentAreaProsemirrorStyle = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '& .ProseMirror': {
+    flexGrow: 1,
+    boxSizing: 'border-box',
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+    '& > *': {
+      clear: 'both'
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    [`> p, > ul, > ol:not(${taskListSelector}):not(${decisionListSelector}), > h1, > h2, > h3, > h4, > h5, > h6`]: {
+      clear: 'none'
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
+    '> p:last-child': {
+      marginBottom: "var(--ds-space-300, 24px)"
+    }
+  }
+});
+const fullWidthModeBreakoutBlockTableStyle = 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'
+    }
+  }
+});
+const fullWidthNonChromelessBreakoutBlockTableStyle = 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
+const contentAreaReservedPrimaryToolbarSpace = css({
+  // extra 1px to account for the bottom border on the toolbar
+  marginTop: `calc(${"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
+const contentAreaReducedHeaderSpace = css({
+  paddingTop: "var(--ds-space-400, 32px)"
+});
+const editorContentGutterStyle = () => {
+  return 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 ${akEditorGutterPaddingDynamic()}px`
+  });
+};
+
+// new styles
+const editorContentAreaNoToolbarLivePageJumpMitigation = 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(${"var(--ds-space-600, 48px)"} + ${FULL_PAGE_EDITOR_TOOLBAR_HEIGHT_LIVE_PAGE} + 1px)`
+  }
+});
+const editorContentAreaNoToolbarControls = 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(${"var(--ds-space-600, 48px)"} + ${FULL_PAGE_EDITOR_TOOLBAR_HEIGHT} + 1px)`
+  }
+});
+const editorContentAreaNew = 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(${"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 ${SWOOP_ANIMATION}`
+});
+const tableFullPageEditorStylesNew = 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%'
+  }
+});
+const editorContentAreaContainerNestedDndStyle = 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% + ${(akLayoutGutterOffset + AK_NESTED_DND_GUTTER_OFFSET) * 2}px)`
+    }
+  }
+});
+
+/* Prevent horizontal scroll on page in full width mode */
+const editorContentAreaContainerStyleExcludeCodeBlockNew = 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% - ${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% + ${akLayoutGutterOffset * 2}px)`
+    }
+  }
+});
+
+/* Prevent horizontal scroll on page in full width mode */
+const editorContentAreaContainerStyleNew = 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% - ${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% + ${akLayoutGutterOffset * 2}px)`
+    }
+  }
+});
+const editorContentGutterStyleFG = css({
+  padding: '0 72px'
+});
+const editorContentGutterStyles = css({
+  boxSizing: 'border-box',
+  padding: '0 52px'
+});
+const contentAreaNew = css({
+  display: 'flex',
+  flexDirection: 'row',
+  height: `calc(100% - ${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 ${akEditorSwoopCubicBezier}`
+});
+const contentAreaHeightLivePageJumpMitigation = css({
+  height: `calc(100% - ${FULL_PAGE_EDITOR_TOOLBAR_HEIGHT_LIVE_PAGE})`
+});
+const contentAreaHeightControls = css({
+  height: `calc(100% - ${FULL_PAGE_EDITOR_TOOLBAR_HEIGHT})`
+});
+const contentAreaHeightNoToolbar = css({
+  height: '100%'
+});
 export const CONTENT_AREA_TEST_ID = 'ak-editor-fp-content-area';
 export const EDITOR_CONTAINER = 'ak-editor-container';
 const scrollStyles = css({
@@ -72,13 +383,13 @@ const Content = /*#__PURE__*/React.forwardRef((props, ref) => {
     return editorExperiment('platform_editor_controls', 'variant1');
   };
   return jsx("div", {
-    css: [
+    css: expValEquals('platform_editor_core_static_emotion_non_central', 'isEnabled', true) ? [contentAreaNew, fg('live_pages_content_jump_mitigation') && contentAreaHeightLivePageJumpMitigation, 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
     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
-    contentAreaHeightNoToolbar],
+    props.isEditorToolbarHidden && contentAreaHeightNoToolbar],
     "data-testid": CONTENT_AREA_TEST_ID,
     ref: containerRef
   }, jsx("div", {
@@ -100,13 +411,20 @@ const Content = /*#__PURE__*/React.forwardRef((props, ref) => {
     editorView: props.editorView,
     editorDisabled: props.disabled
   }, jsx("div", {
-    css: [
+    css: expValEquals('platform_editor_core_static_emotion_non_central', 'isEnabled', true) ? [editorContentAreaNew, editorContentAreaProsemirrorStyle, tableFullPageEditorStylesNew, fg('live_pages_content_jump_mitigation') && editorContentAreaNoToolbarLivePageJumpMitigation, editorExperiment('platform_editor_controls', 'variant1', {
+      exposure: true
+    }) && editorContentAreaNoToolbarControls, 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
+    expValEqualsNoExposure('platform_editor_breakout_resizing', 'isEnabled', true) && fg('platform_editor_breakout_resizing_width_changes') ? editorContentAreaContainerStyleExcludeCodeBlockNew : editorContentAreaContainerStyleNew, fg('platform_editor_nested_dnd_styles_changes') && editorContentAreaContainerNestedDndStyle, !fg('platform_editor_controls_no_toolbar_space') && editorExperiment('platform_editor_controls', 'variant1') && contentAreaReducedHeaderSpace, !fg('platform_editor_controls_no_toolbar_space') && props.isEditorToolbarHidden && editorExperiment('platform_editor_controls', 'variant1') && contentAreaReservedPrimaryToolbarSpace] : [
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
     ...editorContentAreaStyle({
       fullWidthMode,
       layoutMaxWidth: theme.layoutMaxWidth,
       isEditorToolbarHidden: props.isEditorToolbarHidden
-    })]
+    })],
+    style: {
+      '--ak-editor-content-area-max-width': !fullWidthMode ? `${theme.layoutMaxWidth + getTotalPadding()}px` : `${akEditorFullWidthLayoutWidth + getTotalPadding()}px`
+    }
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
     ,
     className: "ak-editor-content-area-region",
@@ -116,8 +434,11 @@ const Content = /*#__PURE__*/React.forwardRef((props, ref) => {
     "aria-label": props.intl.formatMessage(messages.editableContentLabel),
     ref: contentAreaRef
   }, jsx("div", {
+    css: expValEquals('platform_editor_core_static_emotion_non_central', 'isEnabled', true) ? [editorContentGutterStyles,
+    // eslint-disable-next-line @atlaskit/platform/no-preconditioning
+    fg('platform_editor_controls_increase_full_page_gutter') && 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: editorContentGutterStyle()
+    editorContentGutterStyle()]
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     ,
     className: fg('platform_editor_no_cursor_on_live_doc_init') ? classnames('ak-editor-content-area', 'appearance-full-page', {

package/dist/es2019/ui/Appearance/FullPage/StyledComponents.js

@@ -1,16 +1,6 @@
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css } from '@emotion/react';
-import { decisionListSelector, taskListSelector } from '@atlaskit/adf-schema';
-import { tableFullPageEditorStyles } from '@atlaskit/editor-plugins/table/ui/common-styles';
-import { tableMarginFullWidthMode } from '@atlaskit/editor-plugins/table/ui/consts';
-import { FULL_PAGE_EDITOR_TOOLBAR_HEIGHT, akEditorFullWidthLayoutWidth, akEditorGutterPaddingDynamic, akEditorSwoopCubicBezier, akLayoutGutterOffset } from '@atlaskit/editor-shared-styles';
-import { fg } from '@atlaskit/platform-feature-flags';
-import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
-import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-const SWOOP_ANIMATION = `0.5s ${akEditorSwoopCubicBezier}`;
-const getTotalPadding = () => akEditorGutterPaddingDynamic() * 2;
-const AK_NESTED_DND_GUTTER_OFFSET = 8;
+import { FULL_PAGE_EDITOR_TOOLBAR_HEIGHT, akEditorSwoopCubicBezier } from '@atlaskit/editor-shared-styles';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export const fullPageEditorWrapper = css({
@@ -21,6 +11,7 @@ export const fullPageEditorWrapper = css({
   boxSizing: 'border-box'
 });
 
+// delete when cleaning up experiment `platform_editor_core_static_emotion_non_central`
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export const contentArea = () => {
   const editorToolbarHeight = FULL_PAGE_EDITOR_TOOLBAR_HEIGHT();
@@ -56,11 +47,6 @@ export const contentAreaWrapper = css({
   contain: 'layout style inline-size'
 });
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export const contentAreaHeightNoToolbar = css({
-  height: '100%'
-});
-
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export const sidebarArea = css({
   height: '100%',
@@ -93,168 +79,4 @@ export const editorContentAreaHideContainer = css({
       display: 'none'
     }
   }
-});
-
-/* Prevent horizontal scroll on page in full width mode */
-const editorContentAreaContainerStyle = () => 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% - ${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% + ${(akLayoutGutterOffset + (fg('platform_editor_nested_dnd_styles_changes') ? AK_NESTED_DND_GUTTER_OFFSET : 0)) * 2}px)`
-    }
-  }
-});
-
-/* Prevent horizontal scroll on page in full width mode */
-const editorContentAreaContainerStyleExcludeCodeBlock = () => 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% - ${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% + ${(akLayoutGutterOffset + (fg('platform_editor_nested_dnd_styles_changes') ? AK_NESTED_DND_GUTTER_OFFSET : 0)) * 2}px)`
-    }
-  }
-});
-export const editorContentAreaStyle = ({
-  layoutMaxWidth,
-  fullWidthMode,
-  isEditorToolbarHidden
-}) => [editorContentArea, 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
-expValEqualsNoExposure('platform_editor_breakout_resizing', 'isEnabled', true) && fg('platform_editor_breakout_resizing_width_changes') ? editorContentAreaContainerStyleExcludeCodeBlock() : editorContentAreaContainerStyle(), ...(fg('platform_editor_controls_no_toolbar_space') ? [] : [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 && 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])];
-const editorContentAreaWithLayoutWith = layoutMaxWidth => css({
-  // this restricts max width
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  maxWidth: `${layoutMaxWidth + getTotalPadding()}px`
-});
-const fullWidthModeBreakoutBlockTableStyle = 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'
-    }
-  }
-});
-const fullWidthNonChromelessBreakoutBlockTableStyle = 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'
-    }
-  }
-});
-const editorContentArea = 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(${"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,
-  // 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: `${akEditorFullWidthLayoutWidth + getTotalPadding()}px`,
-  transition: `max-width ${SWOOP_ANIMATION}`,
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-  '& .ProseMirror': {
-    flexGrow: 1,
-    boxSizing: 'border-box',
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-    '& > *': {
-      clear: 'both'
-    },
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-    [`> p, > ul, > ol:not(${taskListSelector}):not(${decisionListSelector}), > h1, > h2, > h3, > h4, > h5, > h6`]: {
-      clear: 'none'
-    },
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-    '> p:last-child': {
-      marginBottom: "var(--ds-space-300, 24px)"
-    }
-  }
-},
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-tableFullPageEditorStyles);
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export const editorContentGutterStyle = () => {
-  return 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 ${akEditorGutterPaddingDynamic()}px`
-  });
-};
-
-// 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
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-const contentAreaReservedPrimaryToolbarSpace = css({
-  // extra 1px to account for the bottom border on the toolbar
-  marginTop: `calc(${"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
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-const contentAreaReducedHeaderSpace = css({
-  paddingTop: "var(--ds-space-400, 32px)"
 });

package/dist/es2019/version-wrapper.js

@@ -1,2 +1,2 @@
 export const name = "@atlaskit/editor-core";
-export const version = "208.3.1";
+export const version = "208.3.3";