@atlaskit/editor-core 221.5.0 → 221.5.2

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

@@ -1,418 +1,15 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-
-import React, { useImperativeHandle, useRef } from 'react';
-
-/* eslint-disable @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports -- Ignored via go/DSP-18766; jsx required at runtime for @jsxRuntime classic */
-import { css, jsx, useTheme } from '@emotion/react';
-import classnames from 'classnames';
-import { injectIntl } from 'react-intl';
-import { decisionListSelector, taskListSelector } from '@atlaskit/adf-schema';
-import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
-import { fullPageMessages as messages } from '@atlaskit/editor-common/messages';
-import { akEditorFullPageNarrowBreakout, akEditorGutterPaddingDynamic, akEditorGutterPaddingReduced, akEditorDefaultLayoutWidth } from '@atlaskit/editor-shared-styles';
-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
-import ClickAreaBlock from '../../Addon/ClickAreaBlock';
-import { contentComponentClickWrapper } from '../../Addon/ClickAreaBlock/contentComponentWrapper';
-import { ContextPanel } from '../../ContextPanel';
-import EditorContentContainer from '../../EditorContentContainer/EditorContentContainer';
-import PluginSlot from '../../PluginSlot';
-import { contentAreaWrapper, sidebarArea } from './StyledComponents';
-var akEditorFullWidthLayoutWidth = 1800;
-var akEditorUltraWideLayoutWidth = 4000;
-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 getTotalPadding = function getTotalPadding() {
-  return akEditorGutterPaddingDynamic() * 2;
-};
-var editorContentAreaProsemirrorStyle = css({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-  '& .ProseMirror': _defineProperty(_defineProperty({
-    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(taskListSelector, "):not(").concat(decisionListSelector, "), > h1, > h2, > h3, > h4, > h5, > h6"), {
-    clear: 'none'
-  }), '> p:last-child', {
-    marginBottom: "var(--ds-space-300, 24px)"
-  })
-});
-
-/*
- EDITOR-7249: Scope to the main editor's ProseMirror (direct child) so nested
- editors like the footer page-comment composer aren't hidden in Syntax view.
-*/
-var hideEditorContentAreaProsemirrorWithAttributeStyle = css({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-  '&[data-markdown-mode-hide-prosemirror="true"] > .ak-editor-content-area > .ProseMirror': {
-    display: 'none'
-  }
-});
-var hideEditorContentAreaScrollGutterWithAttributeStyle = css({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-  '&[data-markdown-mode-hide-scroll-gutter="true"] > .ak-editor-content-area > [data-vc="scroll-gutter"]': {
-    display: 'none'
-  }
-});
-var hideEditorScrollGutterStyle = css({
-  display: 'none'
-});
-var 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
-var contentAreaReservedPrimaryToolbarSpace = 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 = css({
-  paddingTop: "var(--ds-space-400, 32px)"
-});
-
-// new styles
-var 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(".concat("var(--ds-space-600, 48px)", " + var(--ak-editor-fullpage-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 = 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 = 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 = 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 = 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 = css({
-  padding: '0 72px'
-});
-var editorContentGutterStyles = css({
-  boxSizing: 'border-box',
-  padding: '0 52px'
-});
-var editorContentReducedGutterStyles = css(_defineProperty({}, "@container editor-area (max-width: ".concat(akEditorFullPageNarrowBreakout, "px)"), {
-  // 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(akEditorGutterPaddingReduced, "px")
-}));
-var contentAreaNew = css({
-  display: 'flex',
-  flexDirection: 'row',
-  height: "calc(100% - var(--ak-editor-fullpage-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 contentAreaHeightNoToolbar = css({
-  height: '100%'
-});
-
-// When the markdown source view is shown (markdown mode toggled on and not in
-// the WYSIWYG "preview" view) we tint the whole editor container with the
-// sunken surface so the source editor reads as a distinct, inset surface.
-var markdownModeContainerBackgroundStyle = css({
-  backgroundColor: "var(--ds-surface-sunken, #F8F8F8)",
-  // In the markdown MVP layout the source view (CodeMirror) is bounded to the
-  // viewport and owns its own scrolling, so the editor's scroll container must
-  // not also own vertical scrolling — its always-on `overflow-y: scroll` track
-  // would otherwise render a second, redundant scrollbar alongside CodeMirror's.
-  // This style is only applied in markdown source mode, so WYSIWYG / preview
-  // scrolling is unaffected.
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- scoped override of the descendant scroll container
-  '& [data-editor-scroll-container="true"]': {
-    overflowY: 'hidden'
-  }
-});
-var markdownModeContentAreaStyle = css({
-  boxSizing: 'border-box',
-  height: '100%',
-  margin: 0,
-  maxWidth: 'none',
-  minWidth: 0,
-  paddingBottom: 0,
-  // No top padding here: it would inset the whole source view (including
-  // CodeMirror's `.cm-scroller`), leaving a gap above the editor's vertical
-  // scrollbar. The top inset is applied inside the scroller instead (see the
-  // `.cm-scroller` `paddingTop` in MarkdownSourceView) so the scrollbar still
-  // spans the full height.
-  paddingTop: 0,
-  width: '100%',
-  // The markdown source view is rendered through PluginSlot. Stretch those
-  // intermediate wrappers so its in-flow footer can sit at the bottom without
-  // overlaying the CodeMirror scrollbar.
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  '> .ak-editor-content-area': {
-    boxSizing: 'border-box',
-    display: 'flex',
-    flexDirection: 'column',
-    height: '100%',
-    minHeight: 0,
-    minWidth: 0,
-    padding: 0,
-    width: '100%'
-  },
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  '> .ak-editor-content-area > [data-testid="plugins-components-wrapper"]': {
-    display: 'flex',
-    flex: '1 1 auto',
-    minHeight: 0,
-    minWidth: 0,
-    width: '100%'
-  }
-});
+import { FullPageContentAreaCompiled } from './FullPageContentArea-compiled';
+import { FullPageContentAreaEmotion } from './FullPageContentArea-emotion';
 export var CONTENT_AREA_TEST_ID = 'ak-editor-fp-content-area';
 // eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
 export var EDITOR_CONTAINER = 'ak-editor-container';
-var Content = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var _props$editorAPI, _props$editorAPI$bloc, _props$editorAPI2, _contentAreaRef$curre, _allowScrollGutter$gu, _allowScrollGutter$gu2;
-  var theme = useTheme();
-  var fullWidthMode = props.appearance === 'full-width';
-  var maxWidthMode = props.appearance === 'max';
-  var scrollContainerRef = useRef(null);
-  var contentAreaRef = useRef(null);
-  var containerRef = useRef(null);
-  var allowScrollGutter = (_props$editorAPI = props.editorAPI) === null || _props$editorAPI === void 0 || (_props$editorAPI = _props$editorAPI.base) === null || _props$editorAPI === void 0 || (_props$editorAPI = _props$editorAPI.sharedState.currentState()) === null || _props$editorAPI === void 0 ? void 0 : _props$editorAPI.allowScrollGutter;
-  var contentAreaMaxWidth = getTotalPadding() + (!fullWidthMode ? maxWidthMode ? akEditorUltraWideLayoutWidth : expValEquals('platform_editor_core_non_ecc_static_css', 'isEnabled', true) || expValEquals('platform_editor_core_static_css', 'isEnabled', true) ? akEditorDefaultLayoutWidth : theme.layoutMaxWidth : akEditorFullWidthLayoutWidth);
-
-  // Get useStandardNodeWidth from block menu plugin shared state
-  // Only access editorAPI when the experiment is enabled to avoid performance impact
-  var useStandardNodeWidth = editorExperiment('platform_editor_controls', 'variant1') && ((_props$editorAPI$bloc = (_props$editorAPI2 = props.editorAPI) === null || _props$editorAPI2 === void 0 || (_props$editorAPI2 = _props$editorAPI2.blockMenu) === null || _props$editorAPI2 === void 0 || (_props$editorAPI2 = _props$editorAPI2.sharedState) === null || _props$editorAPI2 === void 0 || (_props$editorAPI2 = _props$editorAPI2.currentState()) === null || _props$editorAPI2 === void 0 ? void 0 : _props$editorAPI2.useStandardNodeWidth) !== null && _props$editorAPI$bloc !== void 0 ? _props$editorAPI$bloc : false);
-  useImperativeHandle(ref, function () {
-    return {
-      get scrollContainer() {
-        return scrollContainerRef.current;
-      },
-      get contentArea() {
-        return contentAreaRef.current;
-      },
-      get containerArea() {
-        return containerRef.current;
-      }
-    };
-  }, []);
-  var markdownPluginCurrentView = useSharedPluginStateWithSelector(props.editorAPI, ['markdownMode'], function (states) {
-    var _states$markdownModeS;
-    return (_states$markdownModeS = states.markdownModeState) === null || _states$markdownModeS === void 0 ? void 0 : _states$markdownModeS.view;
-  });
-  var markdownPluginCurrentIsMarkdownMode = useSharedPluginStateWithSelector(props.editorAPI, ['markdownMode'], function (states) {
-    var _states$markdownModeS2;
-    return (_states$markdownModeS2 = states.markdownModeState) === null || _states$markdownModeS2 === void 0 ? void 0 : _states$markdownModeS2.isMarkdownMode;
-  });
-  var isMarkdownModeExperimentEnabled = expValEqualsNoExposure('cc-markdown-mode', 'isEnabled', true);
-  var shouldHideProseMirrorForMarkdownMode = isMarkdownModeExperimentEnabled && markdownPluginCurrentView !== 'preview' && markdownPluginCurrentIsMarkdownMode;
-  var shouldHideScrollGutterForMarkdownMode = isMarkdownModeExperimentEnabled && markdownPluginCurrentIsMarkdownMode;
-  var shouldUseMarkdownModeMvpLayout = shouldHideProseMirrorForMarkdownMode && fg('platform_editor_md_mvp_layout');
-  return jsx("div", {
-    css: [contentAreaNew, props.isEditorToolbarHidden && contentAreaHeightNoToolbar],
-    "data-testid": CONTENT_AREA_TEST_ID,
-    ref: containerRef
-  }, jsx("div", {
-    css: [
-    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values
-    contentAreaWrapper, shouldUseMarkdownModeMvpLayout && markdownModeContainerBackgroundStyle],
-    "data-testid": EDITOR_CONTAINER,
-    "data-editor-container": 'true'
-  }, jsx(EditorContentContainer
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-  , {
-    className: "fabric-editor-popup-scroll-parent",
-    featureFlags: props.featureFlags,
-    ref: scrollContainerRef,
-    viewMode: props === null || props === void 0 ? void 0 : props.viewMode,
-    isScrollable: true,
-    appearance: props.appearance,
-    contentMode: props.contentMode,
-    useStandardNodeWidth: useStandardNodeWidth
-  }, jsx(ClickAreaBlock, {
-    editorView: props.editorView,
-    editorDisabled: props.disabled
-  }, jsx("div", {
-    "data-markdown-mode-hide-prosemirror": shouldHideProseMirrorForMarkdownMode ? 'true' : undefined,
-    "data-markdown-mode-hide-scroll-gutter": shouldHideScrollGutterForMarkdownMode ? 'true' : undefined,
-    css: [editorContentAreaNew, editorContentAreaProsemirrorStyle,
-    // EDITOR-6558: hide ProseMirror when the markdown-mode plugin
-    // reports a non-WYSIWYG view.
-    shouldHideProseMirrorForMarkdownMode && hideEditorContentAreaProsemirrorWithAttributeStyle, shouldHideScrollGutterForMarkdownMode && hideEditorContentAreaScrollGutterWithAttributeStyle, shouldUseMarkdownModeMvpLayout && markdownModeContentAreaStyle, tableFullPageEditorStylesNew, fullWidthNonChromelessBreakoutBlockTableStyle,
-    // 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) ? 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],
-    style: {
-      '--ak-editor-content-area-max-width': "".concat(contentAreaMaxWidth, "px")
-    }
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
-    ,
-    className: "ak-editor-content-area-region",
-    "data-editor-editable-content": true,
-    role: "region",
-    "aria-label": props.intl.formatMessage(messages.editableContentLabel),
-    ref: contentAreaRef,
-    "data-vc": "editor-content-area-region"
-  }, jsx("div", {
-    css: [editorContentGutterStyles,
-    // eslint-disable-next-line @atlaskit/platform/no-preconditioning
-    fg('platform_editor_controls_increase_full_page_gutter') && editorExperiment('platform_editor_controls', 'variant1') && editorContentGutterStyleFG, editorExperiment('platform_editor_preview_panel_responsiveness', true, {
-      exposure: true
-    }) && editorContentReducedGutterStyles]
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-    ,
-    className: classnames('ak-editor-content-area', 'appearance-full-page', {
-      'fabric-editor--full-width-mode': fullWidthMode,
-      'fabric-editor--max-width-mode': Boolean(maxWidthMode)
-    }),
-    ref: contentAreaRef
-  }, !!props.customContentComponents && 'before' in props.customContentComponents ? contentComponentClickWrapper(props.customContentComponents.before) : contentComponentClickWrapper(props.customContentComponents), jsx(PluginSlot, {
-    editorView: props.editorView,
-    editorActions: props.editorActions,
-    eventDispatcher: props.eventDispatcher,
-    providerFactory: props.providerFactory,
-    appearance: props.appearance,
-    items: props.contentComponents,
-    pluginHooks: props.pluginHooks,
-    contentArea: (_contentAreaRef$curre = contentAreaRef.current) !== null && _contentAreaRef$curre !== void 0 ? _contentAreaRef$curre : undefined,
-    popupsMountPoint: props.popupsMountPoint,
-    popupsBoundariesElement: props.popupsBoundariesElement,
-    popupsScrollableElement: props.popupsScrollableElement,
-    disabled: !!props.disabled,
-    containerElement: scrollContainerRef.current,
-    dispatchAnalyticsEvent: props.dispatchAnalyticsEvent,
-    wrapperElement: props.wrapperElement
-  }), props.editorDOMElement, !!props.customContentComponents && 'after' in props.customContentComponents ? contentComponentClickWrapper(props.customContentComponents.after) : null, allowScrollGutter && (editorExperiment('platform_editor_blocks', true) ? jsx("div", {
-    id: "editor-scroll-gutter",
-    css: shouldHideScrollGutterForMarkdownMode && hideEditorScrollGutterStyle,
-    style: {
-      paddingBottom: "".concat((_allowScrollGutter$gu = allowScrollGutter.gutterSize) !== null && _allowScrollGutter$gu !== void 0 ? _allowScrollGutter$gu : '120', "px")
-    },
-    "data-vc": "scroll-gutter",
-    "data-editor-scroll-gutter": "true"
-  }) : jsx("div", {
-    id: "editor-scroll-gutter",
-    css: shouldHideScrollGutterForMarkdownMode && hideEditorScrollGutterStyle,
-    style: {
-      paddingBottom: "".concat((_allowScrollGutter$gu2 = allowScrollGutter.gutterSize) !== null && _allowScrollGutter$gu2 !== void 0 ? _allowScrollGutter$gu2 : '120', "px")
-    },
-    "data-vc": "scroll-gutter"
-  }))))))), jsx("div", {
-    css: sidebarArea
-  }, props.contextPanel || jsx(ContextPanel, {
-    editorAPI: props.editorAPI,
-    visible: false
-  })));
-});
 
-// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
-export var FullPageContentArea = injectIntl(Content, {
-  forwardRef: true
-});
+/**
+ * Compiled migration WIP under platform_editor_core_non_ecc_static_css
+ * Please ensure both styles are updated
+ */
+export var FullPageContentArea = componentWithCondition(function () {
+  return expValEquals('platform_editor_core_non_ecc_static_css', 'isEnabled', true);
+}, FullPageContentAreaCompiled, FullPageContentAreaEmotion);

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

@@ -1,5 +1,11 @@
 /* eslint-disable @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766 */
 import { css } from '@emotion/react';
+// eslint-disable-next-line @repo/internal/deprecations/deprecation-ticket-required
+/**
+ * @deprecated This style has been migrated to Compiled CSS, under experiment platform_editor_core_non_ecc_static_css
+ * If you need to make changes here, also update the corresponding style in
+ * packages/editor/editor-core/src/ui/Appearance/FullPage/FullPage-compiled.tsx
+ */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export var fullPageEditorWrapper = css({
   minWidth: '340px',
@@ -9,6 +15,12 @@ export var fullPageEditorWrapper = css({
   boxSizing: 'border-box'
 });
 
+// eslint-disable-next-line @repo/internal/deprecations/deprecation-ticket-required
+/**
+ * @deprecated This style has been migrated to Compiled CSS, under experiment platform_editor_core_non_ecc_static_css
+ * If you need to make changes here, also update the corresponding style in
+ * packages/editor/editor-core/src/ui/Appearance/FullPage/FullPageContentArea-compiled.tsx
+ */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/volt-strict-mode/no-multiple-exports
 export var contentAreaWrapper = css({
   width: '100%',
@@ -22,6 +34,12 @@ export var contentAreaWrapper = css({
   contain: 'layout style inline-size'
 });
 
+// eslint-disable-next-line @repo/internal/deprecations/deprecation-ticket-required
+/**
+ * @deprecated This style has been migrated to Compiled CSS, under experiment platform_editor_core_non_ecc_static_css
+ * If you need to make changes here, also update the corresponding style in
+ * packages/editor/editor-core/src/ui/Appearance/FullPage/FullPageContentArea-compiled.tsx
+ */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/volt-strict-mode/no-multiple-exports -- Ignored via go/DSP-18766
 export var sidebarArea = css({
   height: '100%',
@@ -37,21 +55,4 @@ export var sidebarArea = css({
     top: 0,
     alignSelf: 'flex-start'
   }
-});
-
-// initially hide until we have a containerWidth and can properly size them,
-// otherwise they can cause the editor width to extend which is non-recoverable
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/volt-strict-mode/no-multiple-exports -- Ignored via go/DSP-18766
-export var editorContentAreaHideContainer = 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
-    '.pm-table-container, .code-block, .extension-container': {
-      display: 'none'
-    },
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-    '.multiBodiedExtension--container': {
-      display: 'none'
-    }
-  }
 });

package/dist/esm/version-wrapper.js

@@ -1,3 +1,3 @@
 export var name = "@atlaskit/editor-core";
 // eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
-export var version = "221.4.1";
+export var version = "221.5.1";

package/dist/types/ui/Appearance/Comment/Comment-compiled.d.ts

@@ -0,0 +1,30 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+/**
+ * Compiled branch of the `platform_editor_core_non_ecc_static_css` experiment.
+ * Used via `componentWithCondition` in `Comment.tsx`.
+ *
+ * Cleanup: delete this file once the experiment has shipped.
+ */
+import React from 'react';
+import type { OptionalPlugin } from '@atlaskit/editor-common/types';
+import type { BlockMenuPlugin } from '@atlaskit/editor-plugin-block-menu';
+import type { MaxContentSizePlugin } from '@atlaskit/editor-plugins/max-content-size';
+import type { MediaPlugin } from '@atlaskit/editor-plugins/media';
+import type { PrimaryToolbarPlugin } from '@atlaskit/editor-plugins/primary-toolbar';
+import type { ToolbarPlugin } from '@atlaskit/editor-plugins/toolbar';
+import type { EditorAppearanceComponentProps } from '../../../types/editor-appearance-component';
+type ComponentProps = EditorAppearanceComponentProps<[
+    OptionalPlugin<MediaPlugin>,
+    OptionalPlugin<MaxContentSizePlugin>,
+    OptionalPlugin<PrimaryToolbarPlugin>,
+    OptionalPlugin<ToolbarPlugin>,
+    OptionalPlugin<BlockMenuPlugin>
+]>;
+export declare const CommentEditorWithIntlCompiled: {
+    (props: ComponentProps): React.JSX.Element;
+    displayName: string;
+};
+export {};

package/dist/types/ui/Appearance/Comment/Comment-emotion.d.ts

@@ -0,0 +1,20 @@
+import { jsx } from '@emotion/react';
+import type { OptionalPlugin } from '@atlaskit/editor-common/types';
+import type { BlockMenuPlugin } from '@atlaskit/editor-plugin-block-menu';
+import type { MaxContentSizePlugin } from '@atlaskit/editor-plugins/max-content-size';
+import type { MediaPlugin } from '@atlaskit/editor-plugins/media';
+import type { PrimaryToolbarPlugin } from '@atlaskit/editor-plugins/primary-toolbar';
+import type { ToolbarPlugin } from '@atlaskit/editor-plugins/toolbar';
+import type { EditorAppearanceComponentProps } from '../../../types/editor-appearance-component';
+type ComponentProps = EditorAppearanceComponentProps<[
+    OptionalPlugin<MediaPlugin>,
+    OptionalPlugin<MaxContentSizePlugin>,
+    OptionalPlugin<PrimaryToolbarPlugin>,
+    OptionalPlugin<ToolbarPlugin>,
+    OptionalPlugin<BlockMenuPlugin>
+]>;
+export declare const CommentEditorWithIntlEmotion: {
+    (props: ComponentProps): jsx.JSX.Element;
+    displayName: string;
+};
+export {};

package/dist/types/ui/Appearance/Comment/Comment.d.ts

@@ -1,20 +1,2 @@
-import { jsx } from '@emotion/react';
-import type { OptionalPlugin } from '@atlaskit/editor-common/types';
-import type { BlockMenuPlugin } from '@atlaskit/editor-plugin-block-menu';
-import type { MaxContentSizePlugin } from '@atlaskit/editor-plugins/max-content-size';
-import type { MediaPlugin } from '@atlaskit/editor-plugins/media';
-import type { PrimaryToolbarPlugin } from '@atlaskit/editor-plugins/primary-toolbar';
-import type { ToolbarPlugin } from '@atlaskit/editor-plugins/toolbar';
-import type { EditorAppearanceComponentProps } from '../../../types/editor-appearance-component';
-type ComponentProps = EditorAppearanceComponentProps<[
-    OptionalPlugin<MediaPlugin>,
-    OptionalPlugin<MaxContentSizePlugin>,
-    OptionalPlugin<PrimaryToolbarPlugin>,
-    OptionalPlugin<ToolbarPlugin>,
-    OptionalPlugin<BlockMenuPlugin>
-]>;
-export declare const CommentEditorWithIntl: {
-    (props: ComponentProps): jsx.JSX.Element;
-    displayName: string;
-};
-export {};
+import { CommentEditorWithIntlCompiled } from './Comment-compiled';
+export declare const CommentEditorWithIntl: typeof CommentEditorWithIntlCompiled;

package/dist/types/ui/Appearance/FullPage/FullPageContentArea-compiled.d.ts

@@ -0,0 +1,56 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import type { ReactElement } from 'react';
+import React from 'react';
+import type { WithIntlProps, WrappedComponentProps } from 'react-intl';
+import type { DispatchAnalyticsEvent } from '@atlaskit/editor-common/analytics';
+import type { EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
+import type { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
+import type { EditorAppearance, EditorContentMode, FeatureFlags, OptionalPlugin, PublicPluginAPI, ReactHookFactory, UIComponentFactory } from '@atlaskit/editor-common/types';
+import type { BasePlugin } from '@atlaskit/editor-plugins/base';
+import type { BlockMenuPlugin } from '@atlaskit/editor-plugins/block-menu';
+import type { ContextPanelPlugin } from '@atlaskit/editor-plugins/context-panel';
+import type { ViewMode } from '@atlaskit/editor-plugins/editor-viewmode';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type EditorActions from '../../../actions';
+import type { ContentComponents, ReactComponents } from '../../../types/editor-props';
+import type { MarkdownModePlugin } from '../../../types/markdown-mode';
+import type { ScrollContainerRefs } from './types';
+type EditorAPI = PublicPluginAPI<[
+    OptionalPlugin<ContextPanelPlugin>,
+    BasePlugin,
+    OptionalPlugin<BlockMenuPlugin>,
+    OptionalPlugin<MarkdownModePlugin>
+]>;
+interface FullPageEditorContentAreaProps {
+    appearance: EditorAppearance | undefined;
+    contentComponents: UIComponentFactory[] | undefined;
+    contentMode: EditorContentMode | undefined;
+    contextPanel: ReactComponents | undefined;
+    customContentComponents: ContentComponents | undefined;
+    disabled: boolean | undefined;
+    dispatchAnalyticsEvent: DispatchAnalyticsEvent | undefined;
+    editorActions: EditorActions | undefined;
+    editorAPI: EditorAPI | undefined;
+    editorDOMElement: ReactElement;
+    editorView: EditorView;
+    eventDispatcher: EventDispatcher | undefined;
+    featureFlags?: FeatureFlags;
+    hasHadInteraction?: boolean;
+    isEditorToolbarHidden?: boolean;
+    pluginHooks: ReactHookFactory[] | undefined;
+    popupsBoundariesElement: HTMLElement | undefined;
+    popupsMountPoint: HTMLElement | undefined;
+    popupsScrollableElement: HTMLElement | undefined;
+    providerFactory: ProviderFactory;
+    viewMode: ViewMode | undefined;
+    wrapperElement: HTMLElement | null;
+}
+export declare const CONTENT_AREA_TEST_ID = "ak-editor-fp-content-area";
+export declare const EDITOR_CONTAINER = "ak-editor-container";
+export declare const FullPageContentAreaCompiled: React.ForwardRefExoticComponent<Omit<WithIntlProps<React.PropsWithChildren<FullPageEditorContentAreaProps & WrappedComponentProps & React.RefAttributes<ScrollContainerRefs>>>, 'ref'> & React.RefAttributes<any>> & {
+    WrappedComponent: React.ComponentType<FullPageEditorContentAreaProps & WrappedComponentProps & React.RefAttributes<ScrollContainerRefs>>;
+};
+export {};