@atlaskit/editor-core 221.3.0 → 221.3.2

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

@@ -0,0 +1,190 @@
+/* FullPageContentArea-compiled.tsx generated by @compiled/babel-plugin v0.39.1 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FullPageContentAreaCompiled = exports.EDITOR_CONTAINER = exports.CONTENT_AREA_TEST_ID = void 0;
+require("./FullPageContentArea-compiled.compiled.css");
+var _runtime = require("@compiled/react/runtime");
+var _react = _interopRequireWildcard(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _reactIntl = require("react-intl");
+var _hooks = require("@atlaskit/editor-common/hooks");
+var _messages = require("@atlaskit/editor-common/messages");
+var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
+var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
+var _ClickAreaBlock = require("../../Addon/ClickAreaBlock");
+var _contentComponentWrapper = require("../../Addon/ClickAreaBlock/contentComponentWrapper");
+var _ContextPanel = require("../../ContextPanel");
+var _EditorContentContainer = _interopRequireDefault(require("../../EditorContentContainer/EditorContentContainer"));
+var _PluginSlot = _interopRequireDefault(require("../../PluginSlot"));
+var _StyledComponents = require("./StyledComponents");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+// Ignored via go/ees005
+// eslint-disable-next-line import/no-named-as-default
+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 (0, _editorSharedStyles.akEditorGutterPaddingDynamic)() * 2;
+};
+var compiledStyles = {
+  editorContentAreaProsemirrorStyle: "_j9k7kb7n _18q6usvi _l4a11hrf _1nw4glyw _yq1qglyw _1qzyglyw _ongaglyw _1rnyglyw _vtulglyw _13svglyw _t2fzglyw _7uc0glyw _1gl01ejb",
+  hideEditorContentAreaProsemirrorWithAttributeStyle: "_12glglyw",
+  hideEditorContentAreaScrollGutterWithAttributeStyle: "_amwgglyw",
+  hideEditorScrollGutterStyle: "_1e0cglyw",
+  fullWidthNonChromelessBreakoutBlockTableStyle: "_xpemaq80 _pnffaq80 _zr7faq80 _qkfz261p _i92uagmp",
+  contentAreaReservedPrimaryToolbarSpace: "_19pknm9q",
+  contentAreaReducedHeaderSpace: "_ca0qxy5q",
+  editorContentAreaNew: "_19pk1wug _2hwx1wug _otyr1wug _18u01wug _v5641fxv _vwz41tcg _ca0qoahv _n3tdoahv _4t3i1ap5 _1bsb1osq _2lx21bp4 _16jlkb7n _p12f5kin _1uizkqmb",
+  tableFullPageEditorStylesNew: "_1tb2idpf _8vye1n1a _1k8i1osq",
+  editorContentAreaContainerNestedDndStyle: "_tynl4diq",
+  editorContentAreaContainerStyleExcludeCodeBlockNew: "_1wxymslj _9dtbmslj _17q71osq _1b7c1kw7 _tynlfknx",
+  editorContentAreaContainerStyleNew: "_142emslj _1wxymslj _9dtbmslj _17q71osq _1b7c1kw7 _tynlfknx",
+  editorContentGutterStyleFG: "_ca0qidpf _u5f3t9kd _n3tdidpf _19bvt9kd",
+  editorContentGutterStyles: "_ca0qidpf _u5f31ex1 _n3tdidpf _19bv1ex1 _vchhusvi",
+  editorContentReducedGutterStyles: "_1d7gidpf _n2nw1tcg _d329idpf _105p1tcg",
+  contentAreaNew: "_19pkidpf _2hwxidpf _otyridpf _18u0idpf _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _v5642kub _1e0c1txw _2lx2vrvc _4t3ibhu0 _vchhusvi _8j6w1lxk",
+  contentAreaHeightNoToolbar: "_4t3i1osq",
+  markdownModeContainerBackgroundStyle: "_bfhkhfxm",
+  markdownModeContentAreaStyle: "_19pkidpf _2hwxidpf _otyridpf _18u0idpf _vchhusvi _4t3i1osq _p12fglyw _1ul9idpf _n3tdidpf _ca0qidpf _1bsb1osq _fh67idpf _71ybidpf _evz0idpf _1n5qidpf _1wrrusvi _13jk1txw _q0l01bp4 _1a1d1osq _1vbxidpf _1xouidpf _4tbp1osq _1e8kkb7n _boivkb7n _13t61wug _11bl1txw _1593idpf _qgzyidpf _li931osq"
+};
+var CONTENT_AREA_TEST_ID = exports.CONTENT_AREA_TEST_ID = 'ak-editor-fp-content-area';
+// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
+var EDITOR_CONTAINER = exports.EDITOR_CONTAINER = 'ak-editor-container';
+var Content = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
+  var _props$editorAPI, _props$editorAPI$bloc, _props$editorAPI2, _contentAreaRef$curre, _allowScrollGutter$gu, _allowScrollGutter$gu2;
+  var fullWidthMode = props.appearance === 'full-width';
+  var maxWidthMode = props.appearance === 'max';
+  var scrollContainerRef = (0, _react.useRef)(null);
+  var contentAreaRef = (0, _react.useRef)(null);
+  var containerRef = (0, _react.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 : _editorSharedStyles.akEditorDefaultLayoutWidth : akEditorFullWidthLayoutWidth);
+
+  // Get useStandardNodeWidth from block menu plugin shared state
+  // Only access editorAPI when the experiment is enabled to avoid performance impact
+  var useStandardNodeWidth = (0, _experiments.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);
+  (0, _react.useImperativeHandle)(ref, function () {
+    return {
+      get scrollContainer() {
+        return scrollContainerRef.current;
+      },
+      get contentArea() {
+        return contentAreaRef.current;
+      },
+      get containerArea() {
+        return containerRef.current;
+      }
+    };
+  }, []);
+  var markdownPluginCurrentView = (0, _hooks.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 = (0, _hooks.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 = (0, _expValEqualsNoExposure.expValEqualsNoExposure)('cc-markdown-mode', 'isEnabled', true);
+  var shouldHideProseMirrorForMarkdownMode = isMarkdownModeExperimentEnabled && markdownPluginCurrentView !== 'preview' && markdownPluginCurrentIsMarkdownMode;
+  var shouldHideScrollGutterForMarkdownMode = isMarkdownModeExperimentEnabled && markdownPluginCurrentIsMarkdownMode;
+  var shouldUseMarkdownModeMvpLayout = shouldHideProseMirrorForMarkdownMode && (0, _platformFeatureFlags.fg)('platform_editor_md_mvp_layout');
+  return /*#__PURE__*/_react.default.createElement("div", {
+    "data-testid": CONTENT_AREA_TEST_ID,
+    ref: containerRef,
+    className: (0, _runtime.ax)([compiledStyles.contentAreaNew, props.isEditorToolbarHidden && compiledStyles.contentAreaHeightNoToolbar])
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    "data-testid": EDITOR_CONTAINER,
+    "data-editor-container": 'true',
+    className: (0, _runtime.ax)(["_1bsb1osq _7cca15wb _1f38dez1 _njlp131u", shouldUseMarkdownModeMvpLayout && compiledStyles.markdownModeContainerBackgroundStyle])
+  }, /*#__PURE__*/_react.default.createElement(_EditorContentContainer.default
+  // 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
+  }, /*#__PURE__*/_react.default.createElement(_ClickAreaBlock.ClickAreaBlock, {
+    editorView: props.editorView,
+    editorDisabled: props.disabled
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    "data-markdown-mode-hide-prosemirror": shouldHideProseMirrorForMarkdownMode ? 'true' : undefined,
+    "data-markdown-mode-hide-scroll-gutter": shouldHideScrollGutterForMarkdownMode ? 'true' : undefined,
+    style: {
+      '--ak-editor-content-area-max-width': "".concat(contentAreaMaxWidth, "px")
+    }
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+    ,
+    className: (0, _runtime.ax)([compiledStyles.editorContentAreaNew, compiledStyles.editorContentAreaProsemirrorStyle, shouldHideProseMirrorForMarkdownMode && compiledStyles.hideEditorContentAreaProsemirrorWithAttributeStyle, shouldHideScrollGutterForMarkdownMode && compiledStyles.hideEditorContentAreaScrollGutterWithAttributeStyle, shouldUseMarkdownModeMvpLayout && compiledStyles.markdownModeContentAreaStyle, compiledStyles.tableFullPageEditorStylesNew, compiledStyles.fullWidthNonChromelessBreakoutBlockTableStyle, (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_breakout_resizing', 'isEnabled', true) ? compiledStyles.editorContentAreaContainerStyleExcludeCodeBlockNew : compiledStyles.editorContentAreaContainerStyleNew, (0, _platformFeatureFlags.fg)('platform_editor_nested_dnd_styles_changes') && compiledStyles.editorContentAreaContainerNestedDndStyle, !(0, _platformFeatureFlags.fg)('platform_editor_controls_no_toolbar_space') && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && compiledStyles.contentAreaReducedHeaderSpace, !(0, _platformFeatureFlags.fg)('platform_editor_controls_no_toolbar_space') && props.isEditorToolbarHidden && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && compiledStyles.contentAreaReservedPrimaryToolbarSpace, "ak-editor-content-area-region"]),
+    "data-editor-editable-content": true,
+    role: "region",
+    "aria-label": props.intl.formatMessage(_messages.fullPageMessages.editableContentLabel),
+    ref: contentAreaRef,
+    "data-vc": "editor-content-area-region"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    className: (0, _runtime.ax)([compiledStyles.editorContentGutterStyles, (0, _platformFeatureFlags.fg)('platform_editor_controls_increase_full_page_gutter') && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && compiledStyles.editorContentGutterStyleFG, (0, _experiments.editorExperiment)('platform_editor_preview_panel_responsiveness', true, {
+      exposure: true
+      // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values
+    }) && compiledStyles.editorContentReducedGutterStyles, (0, _classnames.default)('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 ? (0, _contentComponentWrapper.contentComponentClickWrapper)(props.customContentComponents.before) : (0, _contentComponentWrapper.contentComponentClickWrapper)(props.customContentComponents), /*#__PURE__*/_react.default.createElement(_PluginSlot.default, {
+    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 ? (0, _contentComponentWrapper.contentComponentClickWrapper)(props.customContentComponents.after) : null, allowScrollGutter && ((0, _experiments.editorExperiment)('platform_editor_blocks', true) ? /*#__PURE__*/_react.default.createElement("div", {
+    id: "editor-scroll-gutter",
+    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",
+    className: (0, _runtime.ax)([shouldHideScrollGutterForMarkdownMode && compiledStyles.hideEditorScrollGutterStyle])
+  }) : /*#__PURE__*/_react.default.createElement("div", {
+    id: "editor-scroll-gutter",
+    style: {
+      paddingBottom: "".concat((_allowScrollGutter$gu2 = allowScrollGutter.gutterSize) !== null && _allowScrollGutter$gu2 !== void 0 ? _allowScrollGutter$gu2 : '120', "px")
+    },
+    "data-vc": "scroll-gutter",
+    className: (0, _runtime.ax)([shouldHideScrollGutterForMarkdownMode && compiledStyles.hideEditorScrollGutterStyle])
+  }))))))), /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _runtime.ax)(["_4t3i1osq _vchhusvi _1wpzesu3 _1hgw1wug _1t1q1if8 _uj9widpf _13hh1y6m"])
+  }, props.contextPanel || /*#__PURE__*/_react.default.createElement(_ContextPanel.ContextPanel, {
+    editorAPI: props.editorAPI,
+    visible: false
+  })));
+});
+
+// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
+var FullPageContentAreaCompiled = exports.FullPageContentAreaCompiled = (0, _reactIntl.injectIntl)(Content, {
+  forwardRef: true
+});

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

@@ -0,0 +1,413 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FullPageContentAreaEmotion = exports.EDITOR_CONTAINER = exports.CONTENT_AREA_TEST_ID = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireWildcard(require("react"));
+var _react2 = require("@emotion/react");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _reactIntl = require("react-intl");
+var _adfSchema = require("@atlaskit/adf-schema");
+var _hooks = require("@atlaskit/editor-common/hooks");
+var _messages = require("@atlaskit/editor-common/messages");
+var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
+var _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");
+var _ContextPanel = require("../../ContextPanel");
+var _EditorContentContainer = _interopRequireDefault(require("../../EditorContentContainer/EditorContentContainer"));
+var _PluginSlot = _interopRequireDefault(require("../../PluginSlot"));
+var _StyledComponents = require("./StyledComponents");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+
+/* 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 */
+
+// Ignored via go/ees005
+// eslint-disable-next-line import/no-named-as-default
+
+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 (0, _editorSharedStyles.akEditorGutterPaddingDynamic)() * 2;
+};
+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)"
+  })
+});
+
+/*
+ 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 = (0, _react2.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 = (0, _react2.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 = (0, _react2.css)({
+  display: 'none'
+});
+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)"
+});
+
+// new styles
+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)", " + 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 = (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 editorContentReducedGutterStyles = (0, _react2.css)((0, _defineProperty2.default)({}, "@container editor-area (max-width: ".concat(_editorSharedStyles.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(_editorSharedStyles.akEditorGutterPaddingReduced, "px")
+}));
+var contentAreaNew = (0, _react2.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 = (0, _react2.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 = (0, _react2.css)({
+  backgroundColor: "var(--ds-surface-sunken, #F8F8F8)"
+});
+var markdownModeContentAreaStyle = (0, _react2.css)({
+  boxSizing: 'border-box',
+  height: '100%',
+  margin: 0,
+  maxWidth: 'none',
+  minWidth: 0,
+  paddingBottom: 0,
+  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%'
+  }
+});
+var CONTENT_AREA_TEST_ID = exports.CONTENT_AREA_TEST_ID = 'ak-editor-fp-content-area';
+// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
+var EDITOR_CONTAINER = exports.EDITOR_CONTAINER = 'ak-editor-container';
+var Content = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
+  var _props$editorAPI, _props$editorAPI$bloc, _props$editorAPI2, _contentAreaRef$curre, _allowScrollGutter$gu, _allowScrollGutter$gu2;
+  var theme = (0, _react2.useTheme)();
+  var fullWidthMode = props.appearance === 'full-width';
+  var maxWidthMode = props.appearance === 'max';
+  var scrollContainerRef = (0, _react.useRef)(null);
+  var contentAreaRef = (0, _react.useRef)(null);
+  var containerRef = (0, _react.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 : (0, _expValEquals.expValEquals)('platform_editor_core_non_ecc_static_css', 'isEnabled', true) || (0, _expValEquals.expValEquals)('platform_editor_core_static_css', 'isEnabled', true) ? _editorSharedStyles.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 = (0, _experiments.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);
+  (0, _react.useImperativeHandle)(ref, function () {
+    return {
+      get scrollContainer() {
+        return scrollContainerRef.current;
+      },
+      get contentArea() {
+        return contentAreaRef.current;
+      },
+      get containerArea() {
+        return containerRef.current;
+      }
+    };
+  }, []);
+  var markdownPluginCurrentView = (0, _hooks.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 = (0, _hooks.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 = (0, _expValEqualsNoExposure.expValEqualsNoExposure)('cc-markdown-mode', 'isEnabled', true);
+  var shouldHideProseMirrorForMarkdownMode = isMarkdownModeExperimentEnabled && markdownPluginCurrentView !== 'preview' && markdownPluginCurrentIsMarkdownMode;
+  var shouldHideScrollGutterForMarkdownMode = isMarkdownModeExperimentEnabled && markdownPluginCurrentIsMarkdownMode;
+  var shouldUseMarkdownModeMvpLayout = shouldHideProseMirrorForMarkdownMode && (0, _platformFeatureFlags.fg)('platform_editor_md_mvp_layout');
+  return (0, _react2.jsx)("div", {
+    css: [contentAreaNew, props.isEditorToolbarHidden && contentAreaHeightNoToolbar],
+    "data-testid": CONTENT_AREA_TEST_ID,
+    ref: containerRef
+  }, (0, _react2.jsx)("div", {
+    css: [
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values
+    _StyledComponents.contentAreaWrapper, shouldUseMarkdownModeMvpLayout && markdownModeContainerBackgroundStyle],
+    "data-testid": EDITOR_CONTAINER,
+    "data-editor-container": 'true'
+  }, (0, _react2.jsx)(_EditorContentContainer.default
+  // 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
+  }, (0, _react2.jsx)(_ClickAreaBlock.default, {
+    editorView: props.editorView,
+    editorDisabled: props.disabled
+  }, (0, _react2.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
+    (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_breakout_resizing', 'isEnabled', true) ? 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],
+    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.fullPageMessages.editableContentLabel),
+    ref: contentAreaRef,
+    "data-vc": "editor-content-area-region"
+  }, (0, _react2.jsx)("div", {
+    css: [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, (0, _experiments.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: (0, _classnames.default)('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 ? (0, _contentComponentWrapper.contentComponentClickWrapper)(props.customContentComponents.before) : (0, _contentComponentWrapper.contentComponentClickWrapper)(props.customContentComponents), (0, _react2.jsx)(_PluginSlot.default, {
+    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 ? (0, _contentComponentWrapper.contentComponentClickWrapper)(props.customContentComponents.after) : null, allowScrollGutter && ((0, _experiments.editorExperiment)('platform_editor_blocks', true) ? (0, _react2.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"
+  }) : (0, _react2.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"
+  }))))))), (0, _react2.jsx)("div", {
+    css: _StyledComponents.sidebarArea
+  }, props.contextPanel || (0, _react2.jsx)(_ContextPanel.ContextPanel, {
+    editorAPI: props.editorAPI,
+    visible: false
+  })));
+});
+
+// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
+var FullPageContentAreaEmotion = exports.FullPageContentAreaEmotion = (0, _reactIntl.injectIntl)(Content, {
+  forwardRef: true
+});