@atlaskit/editor-core 207.19.1 → 207.19.3

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @atlaskit/editor-core
 
+## 207.19.3
+
+### Patch Changes
+
+- [#168742](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/168742)
+  [`43b55fe50be89`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/43b55fe50be89) -
+  Add experiment to show no cursor on initial edit page
+- Updated dependencies
+
+## 207.19.2
+
+### Patch Changes
+
+- [#169135](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/169135)
+  [`028b3051e55d3`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/028b3051e55d3) -
+  Migrate extensionStyles to static emotion CSS
+- [#169185](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/169185)
+  [`4b4788179f7a2`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/4b4788179f7a2) -
+  refactor emotion styles for content styles
+- Updated dependencies
+
 ## 207.19.1
 
 ### Patch Changes

package/dist/cjs/create-editor/ReactEditorView.js

@@ -479,13 +479,13 @@ function ReactEditorView(props) {
     if (shouldFocus && editorView !== null && editorView !== void 0 && (_editorView$props$edi = (_editorView$props = editorView.props).editable) !== null && _editorView$props$edi !== void 0 && _editorView$props$edi.call(_editorView$props, editorView.state) && (0, _platformFeatureFlags.fg)('platform_editor_react_18_autofocus_fix')) {
       if ((0, _platformFeatureFlags.fg)('platform_editor_reduce_scroll_jump_on_editor_start')) {
         if (!mitigateScrollJump) {
-          var liveDocWithContent = __livePage && !(0, _document.isEmptyDocument)(editorView.state.doc);
+          var liveDocWithContent = (__livePage || (0, _expValEquals.expValEquals)('platform_editor_no_cursor_on_edit_page_init', 'isEnabled', true)) && !(0, _document.isEmptyDocument)(editorView.state.doc);
           if (!liveDocWithContent || !(0, _platformFeatureFlags.fg)('platform_editor_no_cursor_on_live_doc_init')) {
             focusTimeoutId.current = (0, _handleEditorFocus.handleEditorFocus)(editorView);
           }
         }
       } else {
-        var _liveDocWithContent = __livePage && !(0, _document.isEmptyDocument)(editorView.state.doc);
+        var _liveDocWithContent = (__livePage || (0, _expValEquals.expValEquals)('platform_editor_no_cursor_on_edit_page_init', 'isEnabled', true)) && !(0, _document.isEmptyDocument)(editorView.state.doc);
         if (!_liveDocWithContent || !(0, _platformFeatureFlags.fg)('platform_editor_no_cursor_on_live_doc_init')) {
           focusTimeoutId.current = (0, _handleEditorFocus.handleEditorFocus)(editorView);
         }
@@ -534,13 +534,13 @@ function ReactEditorView(props) {
         if (shouldFocus && view.props.editable && view.props.editable(view.state)) {
           if ((0, _platformFeatureFlags.fg)('platform_editor_reduce_scroll_jump_on_editor_start')) {
             if (!mitigateScrollJump) {
-              var isLivePageWithContent = __livePage && !(0, _document.isEmptyDocument)(view.state.doc) && (0, _platformFeatureFlags.fg)('platform_editor_no_cursor_on_live_doc_init');
+              var isLivePageWithContent = (__livePage || (0, _expValEquals.expValEquals)('platform_editor_no_cursor_on_edit_page_init', 'isEnabled', true)) && !(0, _document.isEmptyDocument)(view.state.doc) && (0, _platformFeatureFlags.fg)('platform_editor_no_cursor_on_live_doc_init');
               if (!isLivePageWithContent && shouldFocus && view.props.editable && view.props.editable(view.state)) {
                 focusTimeoutId.current = (0, _handleEditorFocus.handleEditorFocus)(view);
               }
             }
           } else {
-            var _isLivePageWithContent = __livePage && !(0, _document.isEmptyDocument)(view.state.doc) && (0, _platformFeatureFlags.fg)('platform_editor_no_cursor_on_live_doc_init');
+            var _isLivePageWithContent = (__livePage || (0, _expValEquals.expValEquals)('platform_editor_no_cursor_on_edit_page_init', 'isEnabled', true)) && !(0, _document.isEmptyDocument)(view.state.doc) && (0, _platformFeatureFlags.fg)('platform_editor_no_cursor_on_live_doc_init');
             if (!_isLivePageWithContent && shouldFocus && view.props.editable && view.props.editable(view.state)) {
               focusTimeoutId.current = (0, _handleEditorFocus.handleEditorFocus)(view);
             }
@@ -611,7 +611,7 @@ function ReactEditorView(props) {
           return !disabled;
         }
       });
-      var isLivePageWithContent = __livePage && !(0, _document.isEmptyDocument)(viewRef.current.state.doc) && (0, _platformFeatureFlags.fg)('platform_editor_no_cursor_on_live_doc_init');
+      var isLivePageWithContent = (__livePage || (0, _expValEquals.expValEquals)('platform_editor_no_cursor_on_edit_page_init', 'isEnabled', true)) && !(0, _document.isEmptyDocument)(viewRef.current.state.doc) && (0, _platformFeatureFlags.fg)('platform_editor_no_cursor_on_live_doc_init');
       if (!disabled && shouldFocus && !isLivePageWithContent) {
         focusTimeoutId.current = (0, _handleEditorFocus.handleEditorFocus)(viewRef.current);
       }

package/dist/cjs/i18n/sk.js

@@ -13,7 +13,7 @@ exports.default = void 0;
  */
 //Slovak
 var _default = exports.default = {
-  'fabric.editor.chromeCollapsedPlaceholder': 'None',
+  'fabric.editor.chromeCollapsedPlaceholder': 'Napíšte niečo…',
   'fabric.editor.editorAssistiveLabel': 'Hlavná oblasť obsahu, sem začnite zadávať text.',
-  'fabric.editor.headingLink.toolbarHelpTitle': 'None'
+  'fabric.editor.headingLink.toolbarHelpTitle': 'Otvoriť dialógové okno pomoci'
 };

package/dist/cjs/i18n/sr.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+/* prettier-ignore */
+/**
+ * NOTE:
+ *
+ * This file is automatically generated by Traduki 2.0.
+ * DO NOT CHANGE IT BY HAND or your changes will be lost.
+ */
+//Serbian (Serbia) [sr-RS]
+var _default = exports.default = {
+  'fabric.editor.chromeCollapsedPlaceholder': 'Unesite tekst…',
+  'fabric.editor.editorAssistiveLabel': 'Glavna oblast za sadržaj, počnite da unosite tekst.',
+  'fabric.editor.headingLink.toolbarHelpTitle': 'Otvori dijalog pomoći'
+};

package/dist/cjs/presets/default.js

@@ -39,6 +39,7 @@ var _undoRedo = require("@atlaskit/editor-plugins/undo-redo");
 var _unsupportedContent = require("@atlaskit/editor-plugins/unsupported-content");
 var _width = require("@atlaskit/editor-plugins/width");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _isFullPage = require("../utils/is-full-page");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } // #region Imports
@@ -58,7 +59,7 @@ function createDefaultPreset(options) {
     performanceTracking: options.performanceTracking
   }], Boolean(options.allowAnalyticsGASV3)).add(_betterTypeHistory.betterTypeHistoryPlugin).add([_paste.pastePlugin, _objectSpread(_objectSpread({}, options === null || options === void 0 ? void 0 : options.paste), {}, {
     isFullPage: isFullPage
-  })]).add(_clipboard.clipboardPlugin).add(_focus.focusPlugin).maybeAdd(_interaction.interactionPlugin, Boolean(options === null || options === void 0 ? void 0 : options.__livePage) && (0, _platformFeatureFlags.fg)('platform_editor_no_cursor_on_live_doc_init')).add(_composition.compositionPlugin).add([_contextIdentifier.contextIdentifierPlugin, {
+  })]).add(_clipboard.clipboardPlugin).add(_focus.focusPlugin).maybeAdd(_interaction.interactionPlugin, Boolean(options === null || options === void 0 ? void 0 : options.__livePage) ? (0, _platformFeatureFlags.fg)('platform_editor_no_cursor_on_live_doc_init') : (0, _expValEquals.expValEquals)('platform_editor_no_cursor_on_edit_page_init', 'isEnabled', true)).add(_composition.compositionPlugin).add([_contextIdentifier.contextIdentifierPlugin, {
     contextIdentifierProvider: options.contextIdentifierProvider
   }]).add([_base.basePlugin, options.base]).add(_decorations.decorationsPlugin).add([_typeAhead.typeAheadPlugin, options.typeAhead]).maybeAdd(_history.historyPlugin, Boolean(options.allowUndoRedoButtons)).add([_primaryToolbar.primaryToolbarPlugin, {
     contextualFormattingEnabled: isFullPage
@@ -70,7 +71,9 @@ function createDefaultPreset(options) {
   }]).add([_hyperlink.hyperlinkPlugin, _objectSpread(_objectSpread({}, options.hyperlinkOptions), {}, {
     // @ts-ignore Temporary solution to check for Live Page editor.
     __livePage: options.__livePage
-  })]).add([_textFormatting.textFormattingPlugin, options.textFormatting]).add(_width.widthPlugin).add([_quickInsert.quickInsertPlugin, options.quickInsert]).add([_placeholder.placeholderPlugin, options.placeholder]).add(_unsupportedContent.unsupportedContentPlugin).add(_editorDisabled.editorDisabledPlugin).add([_submitEditor.submitEditorPlugin, options.submitEditor]).add(_copyButton.copyButtonPlugin).add(_floatingToolbar.floatingToolbarPlugin).add([_selection.selectionPlugin, _objectSpread(_objectSpread({}, options.selection), {}, {
+  })]).add([_textFormatting.textFormattingPlugin, options.textFormatting]).add(_width.widthPlugin).add([_quickInsert.quickInsertPlugin, options.quickInsert]).add([_placeholder.placeholderPlugin, options.placeholder]).add(_unsupportedContent.unsupportedContentPlugin).add([_editorDisabled.editorDisabledPlugin, {
+    initialDisabledState: options.disabled
+  }]).add([_submitEditor.submitEditorPlugin, options.submitEditor]).add(_copyButton.copyButtonPlugin).add(_floatingToolbar.floatingToolbarPlugin).add([_selection.selectionPlugin, _objectSpread(_objectSpread({}, options.selection), {}, {
     __livePage: options.__livePage
   })]).add([_codeBlock.codeBlockPlugin, options.codeBlock]);
   return preset;

package/dist/cjs/ui/EditorContentContainer/EditorContentContainer.js

@@ -4,32 +4,34 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.placeholderStyles = exports.default = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@emotion/react");
 var _browser = require("@atlaskit/editor-common/browser");
-var _styles = require("@atlaskit/editor-common/styles");
-var _commonStyles = require("@atlaskit/editor-plugins/table/ui/common-styles");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _tokens = require("@atlaskit/tokens");
-var _extension = require("../ContentStyles/extension");
 var _aiPanel = require("./styles/aiPanel");
 var _annotationStyles = require("./styles/annotationStyles");
 var _backgroundColorStyles = require("./styles/backgroundColorStyles");
+var _baseStyles = require("./styles/baseStyles");
 var _blockMarksStyles = require("./styles/blockMarksStyles");
 var _blockTypeStyles = require("./styles/blockTypeStyles");
 var _codeBlockStyles = require("./styles/codeBlockStyles");
 var _codeMarkStyles = require("./styles/codeMarkStyles");
+var _commentEditorStyles = require("./styles/commentEditorStyles");
+var _cursorStyles = require("./styles/cursorStyles");
 var _dateStyles = require("./styles/dateStyles");
 var _editorUGCTokenStyles = require("./styles/editorUGCTokenStyles");
 var _embedCardStyles = require("./styles/embedCardStyles");
 var _emoji = require("./styles/emoji");
 var _expandStyles = require("./styles/expandStyles");
+var _extensionStyles = require("./styles/extensionStyles");
 var _findReplaceStyles = require("./styles/findReplaceStyles");
 var _firstBlockNodeStyles = require("./styles/firstBlockNodeStyles");
+var _floatingToolbarStyles = require("./styles/floatingToolbarStyles");
+var _fullPageEditorStyles = require("./styles/fullPageEditorStyles");
 var _gapCursorStyles = require("./styles/gapCursorStyles");
 var _gridStyles = require("./styles/gridStyles");
 var _indentationStyles = require("./styles/indentationStyles");
@@ -41,160 +43,31 @@ var _mediaStyles = require("./styles/mediaStyles");
 var _mentions = require("./styles/mentions");
 var _panelStyles = require("./styles/panelStyles");
 var _paragraphStyles = require("./styles/paragraphStyles");
-var _placeholderTextStyles = require("./styles/placeholderTextStyles");
+var _placeholderStyles = require("./styles/placeholderStyles");
 var _resizerStyles = require("./styles/resizerStyles");
 var _rule = require("./styles/rule");
+var _scrollbarStyles = require("./styles/scrollbarStyles");
+var _selectionStyles = require("./styles/selectionStyles");
 var _shadowStyles = require("./styles/shadowStyles");
 var _smartCardStyles = require("./styles/smartCardStyles");
 var _statusStyles = require("./styles/statusStyles");
+var _tableStyles = require("./styles/tableStyles");
 var _tasksAndDecisionsStyles = require("./styles/tasksAndDecisionsStyles");
 var _telepointerStyles = require("./styles/telepointerStyles");
 var _textColorStyles = require("./styles/textColorStyles");
 var _textHighlightStyles = require("./styles/textHighlightStyles");
 var _unsupportedStyles = require("./styles/unsupportedStyles");
 var _whitespaceStyles = require("./styles/whitespaceStyles");
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+/* eslint-disable @atlaskit/platform/ensure-feature-flag-prefix */
 /* eslint-disable @atlaskit/design-system/consistent-css-prop-usage */
-/* eslint-disable react-hooks/rules-of-hooks */
-/* eslint-disable @atlaskit/design-system/no-css-tagged-template-expression -- Requires manual remediation over time due to use of unsafe nested mixins */
 /**
  * @jsxRuntime classic
  * @jsx jsx
  */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-var isFirefox = typeof navigator !== 'undefined' && navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-var placeholderStyles = exports.placeholderStyles = (0, _react2.css)({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-  '.ProseMirror .placeholder-decoration': {
-    color: "var(--ds-text-subtlest, #626F86)",
-    width: '100%',
-    pointerEvents: 'none',
-    userSelect: 'none',
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-    '.placeholder-android': {
-      pointerEvents: 'none',
-      outline: 'none',
-      userSelect: 'none',
-      position: 'absolute'
-    }
-  }
-});
-var placeholderOverflowStyles = (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-18766
-  '.ProseMirror p:has(.placeholder-decoration-hide-overflow)': {
-    overflow: 'hidden',
-    whiteSpace: 'nowrap',
-    textOverflow: 'ellipsis'
-  }
-});
-var placeholderWrapStyles = (0, _react2.css)({
-  // As part of controls work, we add placeholder `Search` to quick insert command
-  // This style is to prevent `/Search` being wrapped if it's triggered at the end of the line
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
-  '.ProseMirror mark[data-type-ahead-query="true"]:has(.placeholder-decoration-wrap)': {
-    whiteSpace: 'nowrap'
-  }
-});
-
-// The breakpoint for small devices is 1266px, copied from getBreakpoint in platform/packages/editor/editor-common/src/ui/WidthProvider/index.tsx
-var akEditorBreakpointForSmallDevice = "1266px";
-
-// jest warning: JSDOM version (22) doesn't support the new @container CSS rule
-var contentStyles = function contentStyles() {
-  return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t--ak-editor--default-gutter-padding: ", "px;\n\t/* 52 is from akEditorGutterPaddingDynamic via editor-shared-styles */\n\t--ak-editor--large-gutter-padding: ", "px;\n\t--ak-editor--default-layout-width: ", "px;\n\t--ak-editor--full-width-layout-width: ", "px;\n\t/* calculate editor line length, 100cqw is the editor container width */\n\t--ak-editor--line-length: min(\n\t\tcalc(100cqw - var(--ak-editor--large-gutter-padding) * 2),\n\t\tvar(--ak-editor--default-layout-width)\n\t);\n\t--ak-editor--breakout-wide-layout-width: ", "px;\n\t--ak-editor--breakout-full-page-guttering-padding: calc(\n\t\tvar(--ak-editor--large-gutter-padding) * 2 + var(--ak-editor--default-gutter-padding)\n\t);\n\n\t.fabric-editor--full-width-mode {\n\t\t--ak-editor--line-length: min(\n\t\t\tcalc(100cqw - var(--ak-editor--large-gutter-padding) * 2),\n\t\t\tvar(--ak-editor--full-width-layout-width)\n\t\t);\n\t}\n\n\t.ProseMirror {\n\t\t--ak-editor-max-container-width: calc(100cqw - var(--ak-editor--large-gutter-padding));\n\t}\n\n\t/* We can't allow nodes that are inside other nodes to bleed from the parent container */\n\t.ProseMirror > div[data-prosemirror-node-block] [data-prosemirror-node-block] {\n\t\t--ak-editor-max-container-width: 100%;\n\t}\n\n\t/* container editor-area is defined in platform/packages/editor/editor-core/src/ui/Appearance/FullPage/StyledComponents.ts */\n\t@container editor-area (width >= ", ") {\n\t\t.ProseMirror {\n\t\t\t--ak-editor--breakout-wide-layout-width: ", "px;\n\t\t}\n\t}\n\n\t.ProseMirror {\n\t\toutline: none;\n\t\tfont-size: var(--ak-editor-base-font-size);\n\n\t\t", ";\n\n\t\t", ";\n\n\t\t", ";\n\n\t\t", ";\n\t}\n\n\t.ProseMirror-hideselection *::selection {\n\t\tbackground: transparent;\n\t}\n\n\t.ProseMirror-hideselection *::-moz-selection {\n\t\tbackground: transparent;\n\t}\n\n\t/**\n\t * This prosemirror css style: https://github.com/ProseMirror/prosemirror-view/blob/f37ebb29befdbde3cd194fe13fe17b78e743d2f2/style/prosemirror.css#L24\n\t *\n\t * 1. Merge and Release platform_editor_hide_cursor_when_pm_hideselection\n\t * 2. Cleanup duplicated style from platform_editor_advanced_code_blocks\n\t *    https://product-fabric.atlassian.net/browse/ED-26331\n\t */\n\t", "\n\n\t/* This prosemirror css style: https://github.com/ProseMirror/prosemirror-view/blob/f37ebb29befdbde3cd194fe13fe17b78e743d2f2/style/prosemirror.css#L24 */\n\t", "\n\n\t.ProseMirror-selectednode {\n\t\toutline: none;\n\t}\n\n\t.ProseMirror-selectednode:empty {\n\t\toutline: 2px solid ", ";\n\t}\n\n\t.ProseMirror.ProseMirror-focused:has(.ProseMirror-mark-boundary-cursor) {\n\t\tcaret-color: transparent;\n\t}\n\t.ProseMirror:not(.ProseMirror-focused) .ProseMirror-mark-boundary-cursor {\n\t\tdisplay: none;\n\t}\n\n\t", "\n\n\t", "\n\n\t", "\n\n\t", "\n\n\t", "\n\n\t", "\n\t", "\n  \t", "\n\n\n  \t", "\n\n\t", "\n\t", "\n\n\t", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  /* This needs to be after telepointer styles as some overlapping rules have equal specificity, and so the order is significant */\n  ", "\n\n  ", ";\n\n\t", "\n\n\t", "\n\n\t", "\n\n\t", "\n\t", "\n\n\t", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n  ", "\n  ", "\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  // Switch between the two icons based on the visual refresh feature gate\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n\t.panelView-content-wrap {\n\t\tbox-sizing: border-box;\n\t}\n\n\t.mediaGroupView-content-wrap ul {\n\t\tpadding: 0;\n\t}\n\n\t/** Needed to override any cleared floats, e.g. image wrapping */\n\n\tdiv.fabric-editor-block-mark[class^='fabric-editor-align'] {\n\t\tclear: none !important;\n\t}\n\n\t.fabric-editor-align-end {\n\t\ttext-align: right;\n\t}\n\n\t.fabric-editor-align-start {\n\t\ttext-align: left;\n\t}\n\n\t.fabric-editor-align-center {\n\t\ttext-align: center;\n\t}\n\n\t// For FullPage only when inside a table\n\t// Related code all lives inside: packages/editor/editor-core/src/ui/Appearance/FullPage/StyledComponents.ts\n\t// In the \"editorContentAreaContainerStyle\" function\n\t.fabric-editor--full-width-mode {\n\t\t.pm-table-container {\n\t\t\t.code-block,\n\t\t\t.extension-container,\n\t\t\t.multiBodiedExtension--container {\n\t\t\t\tmax-width: 100%;\n\t\t\t}\n\t\t}\n\t}\n\n\t.pm-table-header-content-wrap :not(.fabric-editor-alignment),\n\t.pm-table-header-content-wrap :not(p, .fabric-editor-block-mark) + div.fabric-editor-block-mark,\n\t.pm-table-cell-content-wrap :not(p, .fabric-editor-block-mark) + div.fabric-editor-block-mark {\n\t\tp:first-of-type {\n\t\t\tmargin-top: 0;\n\t\t}\n\t}\n\t.pm-table-cell-content-wrap .mediaGroupView-content-wrap {\n\t\tclear: both;\n\t}\n\n\t.hyperlink-floating-toolbar {\n\t\tpadding: 0;\n\t}\n\n\t/* Legacy Link icon in the Atlaskit package\n\t is bigger than the others, new ADS icon does not have this issue\n  */\n\t", "\n"])), _editorSharedStyles.akEditorGutterPadding, (0, _editorSharedStyles.akEditorGutterPaddingDynamic)(), _editorSharedStyles.akEditorDefaultLayoutWidth, _editorSharedStyles.akEditorFullWidthLayoutWidth, _editorSharedStyles.akEditorCalculatedWideLayoutWidthSmallViewport, akEditorBreakpointForSmallDevice, _editorSharedStyles.akEditorCalculatedWideLayoutWidth, _whitespaceStyles.whitespaceStyles, _indentationStyles.indentationStyles, _shadowStyles.shadowStyles, _inlineNodeViewSharedStyles.InlineNodeViewSharedStyles, (0, _platformFeatureFlags.fg)('platform_editor_hide_cursor_when_pm_hideselection') ? (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t.ProseMirror-hideselection {\n\t\t\t\t\tcaret-color: transparent;\n\t\t\t\t}\n\t\t\t"]))) : null, (0, _experiments.editorExperiment)('platform_editor_advanced_code_blocks', true) ? (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t.ProseMirror-hideselection {\n\t\t\t\t\tcaret-color: transparent;\n\t\t\t\t}\n\t\t\t"]))) : null, "var(--ds-border-focused, #8cf)", _placeholderTextStyles.placeholderTextStyles, placeholderStyles, (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? placeholderOverflowStyles : null, (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_quick_insert_placeholder') ? placeholderWrapStyles : null, _codeBlockStyles.codeBlockStyles, !(0, _platformFeatureFlags.fg)('platform_editor_typography_ugc') && _editorUGCTokenStyles.editorUGCTokensDefault,
-  // eslint-disable-next-line @atlaskit/platform/no-preconditioning
-  (0, _platformFeatureFlags.fg)('platform_editor_typography_ugc') && ( /* eslint-disable @atlaskit/platform/ensure-feature-flag-prefix */
-  (0, _platformFeatureFlags.fg)('platform-dst-jira-web-fonts') || (0, _platformFeatureFlags.fg)('confluence_typography_refreshed') || (0, _platformFeatureFlags.fg)('atlas_editor_typography_refreshed')) && _editorUGCTokenStyles.editorUGCTokensRefreshed
-  /* eslint-enable @atlaskit/platform/ensure-feature-flag-prefix */,
-  // eslint-disable-next-line @atlaskit/platform/no-preconditioning
-  (0, _platformFeatureFlags.fg)('platform_editor_typography_ugc') && /* eslint-disable @atlaskit/platform/ensure-feature-flag-prefix */
-  !((0, _platformFeatureFlags.fg)('platform-dst-jira-web-fonts') || (0, _platformFeatureFlags.fg)('confluence_typography_refreshed') || (0, _platformFeatureFlags.fg)('atlas_editor_typography_refreshed')) && _editorUGCTokenStyles.editorUGCTokensModernized
-  /* eslint-enable @atlaskit/platform/ensure-feature-flag-prefix */, _blockTypeStyles.blocktypeStyles, (0, _platformFeatureFlags.fg)('platform_editor_typography_ugc') && _blockTypeStyles.blocktypeStyles_fg_platform_editor_typography_ugc, !(0, _platformFeatureFlags.fg)('platform_editor_typography_ugc') && _blockTypeStyles.blocktypeStyles_without_fg_platform_editor_typography_ugc, (0, _platformFeatureFlags.fg)('platform_editor_nested_dnd_styles_changes') && _blockTypeStyles.blocktypeStyles_fg_platform_editor_nested_dnd_styles_changes, _codeMarkStyles.codeMarkStyles, _textColorStyles.textColorStyles, _backgroundColorStyles.backgroundColorStyles, _list.listsStyles, _rule.ruleStyles, _mediaStyles.mediaStyles, (0, _platformFeatureFlags.fg)('confluence_team_presence_scroll_to_pointer') ? _telepointerStyles.telepointerStyle : _telepointerStyles.telepointerStyleWithInitialOnly, _telepointerStyles.telepointerColorAndCommonStyle, _gapCursorStyles.gapCursorStyles, _panelStyles.panelStyles, (0, _platformFeatureFlags.fg)('platform_editor_add_border_for_nested_panel') && _panelStyles.panelStylesMixin_fg_platform_editor_add_border_for_nested_panel, (0, _platformFeatureFlags.fg)('platform_editor_nested_dnd_styles_changes') && _panelStyles.panelStylesMixin_fg_platform_editor_nested_dnd_styles_changes, (0, _platformFeatureFlags.fg)('platform_editor_lcm_nested_panel_icon_fix') && _panelStyles.panelStylesMixin_fg_platform_editor_lcm_nested_panel_icon_fix, !(0, _platformFeatureFlags.fg)('platform_editor_lcm_nested_panel_icon_fix') && _panelStyles.panelStylesMixin_without_fg_platform_editor_lcm_nested_panel_icon_fix, _mentions.mentionsStyles, _tasksAndDecisionsStyles.tasksAndDecisionsStyles, _gridStyles.gridStyles, _blockMarksStyles.blockMarksStyles, _dateStyles.dateStyles, _extension.extensionStyles, _expandStyles.expandStyles, (0, _platformFeatureFlags.fg)('platform_editor_nested_dnd_styles_changes') && _expandStyles.expandStylesMixin_fg_platform_editor_nested_dnd_styles_changes, !(0, _platformFeatureFlags.fg)('platform_editor_nested_dnd_styles_changes') && _expandStyles.expandStylesMixin_without_fg_platform_editor_nested_dnd_styles_changes, (0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') && _expandStyles.expandStylesMixin_fg_platform_visual_refresh_icons, _findReplaceStyles.findReplaceStyles, _textHighlightStyles.textHighlightStyle, _tasksAndDecisionsStyles.decisionStyles, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true, {
-    exposure: false
-  }) && _tasksAndDecisionsStyles.vanillaTaskItemStyles, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true, {
-    exposure: false
-  }) && _tasksAndDecisionsStyles.vanillaDecisionStyles, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true, {
-    exposure: false
-  }) && (0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') && _tasksAndDecisionsStyles.vanillaDecisionIconWithVisualRefresh, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true, {
-    exposure: false
-  }) && !(0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') && _tasksAndDecisionsStyles.vanillaDecisionIconWithoutVisualRefresh, _statusStyles.statusStyles, (0, _platformFeatureFlags.fg)('platform-component-visual-refresh') && _statusStyles.statusStylesMixin_fg_platform_component_visual_refresh, !(0, _platformFeatureFlags.fg)('platform-component-visual-refresh') && _statusStyles.statusStylesMixin_without_fg_platform_component_visual_refresh, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true) && _statusStyles.vanillaStatusStyles, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true) && (0, _platformFeatureFlags.fg)('platform-component-visual-refresh') && _statusStyles.vanillaStatusStylesMixin_fg_platform_component_visual_refresh, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true) && !(0, _platformFeatureFlags.fg)('platform-component-visual-refresh') && _statusStyles.vanillaStatusStylesMixin_without_fg_platform_component_visual_refresh, _annotationStyles.annotationStyles, _smartCardStyles.smartCardStyles, _embedCardStyles.embedCardStyles, _unsupportedStyles.unsupportedStyles, _resizerStyles.resizerStyles, !(0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') ? (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t.hyperlink-open-link {\n\t\t\t\t\tmin-width: 24px;\n\t\t\t\t\tsvg {\n\t\t\t\t\t\tmax-width: 18px;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t"]))) : null);
-};
-var CommentEditorMargin = 14;
-
-// Originally copied from packages/editor/editor-core/src/ui/Appearance/Comment/Comment.tsx
-var commentEditorStyles = (0, _react2.css)({
-  flexGrow: 1,
-  overflowX: 'clip',
-  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
-  lineHeight: '24px',
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-  '.ProseMirror': {
-    margin: "var(--ds-space-150, 12px)"
-  },
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-  '.gridParent': {
-    marginLeft: "var(--ds-space-025, 2px)",
-    marginRight: "var(--ds-space-025, 2px)",
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    width: "calc(100% + ".concat(CommentEditorMargin - _styles.GRID_GUTTER, "px)")
-  },
-  padding: "var(--ds-space-250, 20px)"
-},
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-_commonStyles.tableCommentEditorStyles);
-
-// Originally copied from scrollStyles in packages/editor/editor-core/src/ui/Appearance/FullPage/StyledComponents.ts
-var fullPageEditorStyles = (0, _react2.css)({
-  flexGrow: 1,
-  height: '100%',
-  overflowY: 'scroll',
-  position: 'relative',
-  display: 'flex',
-  flexDirection: 'column',
-  scrollBehavior: 'smooth'
-});
-var scrollbarStyles = (0, _react2.css)({
-  '-ms-overflow-style': '-ms-autohiding-scrollbar',
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
-  '&::-webkit-scrollbar': {
-    overflow: 'hidden'
-  },
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
-  '&::-webkit-scrollbar-corner': {
-    display: 'none'
-  },
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
-  '&::-webkit-scrollbar-thumb': {
-    backgroundColor: "var(--ds-background-neutral-subtle, #00000000)"
-  },
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
-  '&:hover::-webkit-scrollbar-thumb': {
-    backgroundColor: "var(--ds-background-neutral-bold, #44546F)",
-    borderRadius: 8
-  },
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
-  '&::-webkit-scrollbar-thumb:hover': {
-    backgroundColor: "var(--ds-background-neutral-bold-hovered, #2C3E5D)"
-  }
-});
-var listLayoutShiftFix = (0, _react2.css)({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  '.ProseMirror ul, .ProseMirror ol': {
-    // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
-    marginTop: '10px'
-  }
-});
 
-// Make sure the first floating toolbar button has focus ring when focused via .focus()
-var firstFloatingToolbarButtonStyles = (0, _react2.css)({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  'button.first-floating-toolbar-button:focus': {
-    outline: "2px solid ".concat("var(--ds-border-focused, #2684FF)")
-  }
-});
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
+var isFirefox = typeof navigator !== 'undefined' && navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
 /**
  * EditorContentStyles is a wrapper component that applies styles to its children
  * based on the provided feature flags, view mode, and other props.
@@ -217,7 +90,147 @@ var EditorContentContainer = /*#__PURE__*/_react.default.forwardRef(function (pr
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     className: className,
     ref: ref,
-    css: [contentStyles(),
+    css: [
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    _baseStyles.baseStyles,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    _whitespaceStyles.whitespaceStyles,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    _indentationStyles.indentationStyles,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    _shadowStyles.shadowStyles,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    _inlineNodeViewSharedStyles.InlineNodeViewSharedStyles,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    _selectionStyles.hideSelectionStyles, ((0, _platformFeatureFlags.fg)('platform_editor_hide_cursor_when_pm_hideselection') || (0, _experiments.editorExperiment)('platform_editor_advanced_code_blocks', true)) &&
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    _selectionStyles.hideCursorWhenHideSelectionStyles,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    _selectionStyles.selectedNodeStyles,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    _cursorStyles.cursorStyles,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    (0, _platformFeatureFlags.fg)('platform_editor_fix_floating_toolbar_focus') && _floatingToolbarStyles.firstFloatingToolbarButtonStyles,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    _placeholderStyles.placeholderTextStyles,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    _placeholderStyles.placeholderStyles,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && _placeholderStyles.placeholderOverflowStyles, (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_quick_insert_placeholder') &&
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    _placeholderStyles.placeholderWrapStyles,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    _codeBlockStyles.codeBlockStyles,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    !(0, _platformFeatureFlags.fg)('platform_editor_typography_ugc') && _editorUGCTokenStyles.editorUGCTokensDefault, ((0, _platformFeatureFlags.fg)('platform-dst-jira-web-fonts') || (0, _platformFeatureFlags.fg)('confluence_typography_refreshed') || (0, _platformFeatureFlags.fg)('atlas_editor_typography_refreshed')) && (0, _platformFeatureFlags.fg)('platform_editor_typography_ugc') &&
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    _editorUGCTokenStyles.editorUGCTokensRefreshed, !((0, _platformFeatureFlags.fg)('platform-dst-jira-web-fonts') || (0, _platformFeatureFlags.fg)('confluence_typography_refreshed') || (0, _platformFeatureFlags.fg)('atlas_editor_typography_refreshed')) && (0, _platformFeatureFlags.fg)('platform_editor_typography_ugc') &&
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    _editorUGCTokenStyles.editorUGCTokensModernized,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    _blockTypeStyles.blocktypeStyles,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    (0, _platformFeatureFlags.fg)('platform_editor_typography_ugc') ?
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    _blockTypeStyles.blocktypeStyles_fg_platform_editor_typography_ugc :
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    _blockTypeStyles.blocktypeStyles_without_fg_platform_editor_typography_ugc, (0, _platformFeatureFlags.fg)('platform_editor_nested_dnd_styles_changes') &&
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    _blockTypeStyles.blocktypeStyles_fg_platform_editor_nested_dnd_styles_changes,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    _codeMarkStyles.codeMarkStyles,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    _textColorStyles.textColorStyles,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    _backgroundColorStyles.backgroundColorStyles,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    _list.listsStyles,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    _rule.ruleStyles,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    _mediaStyles.mediaStyles, (0, _platformFeatureFlags.fg)('confluence_team_presence_scroll_to_pointer') ?
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    _telepointerStyles.telepointerStyle :
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    _telepointerStyles.telepointerStyleWithInitialOnly, /* This needs to be after telepointer styles as some overlapping rules have equal specificity, and so the order is significant */
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    _telepointerStyles.telepointerColorAndCommonStyle,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    _gapCursorStyles.gapCursorStyles,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    _panelStyles.panelStyles, (0, _platformFeatureFlags.fg)('platform_editor_add_border_for_nested_panel') &&
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    _panelStyles.panelStylesMixin_fg_platform_editor_add_border_for_nested_panel, (0, _platformFeatureFlags.fg)('platform_editor_nested_dnd_styles_changes') &&
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    _panelStyles.panelStylesMixin_fg_platform_editor_nested_dnd_styles_changes, (0, _platformFeatureFlags.fg)('platform_editor_lcm_nested_panel_icon_fix') ?
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    _panelStyles.panelStylesMixin_fg_platform_editor_lcm_nested_panel_icon_fix :
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    _panelStyles.panelStylesMixin_without_fg_platform_editor_lcm_nested_panel_icon_fix,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    _mentions.mentionsStyles,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    _tasksAndDecisionsStyles.tasksAndDecisionsStyles,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    _gridStyles.gridStyles,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    _blockMarksStyles.blockMarksStyles,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    _dateStyles.dateStyles,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    _extensionStyles.extensionStyles,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    _expandStyles.expandStyles, (0, _platformFeatureFlags.fg)('platform_editor_nested_dnd_styles_changes') ?
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    _expandStyles.expandStylesMixin_fg_platform_editor_nested_dnd_styles_changes :
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    _expandStyles.expandStylesMixin_without_fg_platform_editor_nested_dnd_styles_changes,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    (0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') && _expandStyles.expandStylesMixin_fg_platform_visual_refresh_icons,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    _findReplaceStyles.findReplaceStyles,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    _textHighlightStyles.textHighlightStyle,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    _tasksAndDecisionsStyles.decisionStyles, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true, {
+      exposure: false
+    }) &&
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    _tasksAndDecisionsStyles.vanillaTaskItemStyles, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true, {
+      exposure: false
+    }) &&
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    _tasksAndDecisionsStyles.vanillaDecisionStyles, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true, {
+      exposure: false
+    }) && (0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') &&
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    _tasksAndDecisionsStyles.vanillaDecisionIconWithVisualRefresh, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true, {
+      exposure: false
+    }) && !(0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') &&
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    _tasksAndDecisionsStyles.vanillaDecisionIconWithoutVisualRefresh,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    _statusStyles.statusStyles, (0, _platformFeatureFlags.fg)('platform-component-visual-refresh') ?
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    _statusStyles.statusStylesMixin_fg_platform_component_visual_refresh :
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    _statusStyles.statusStylesMixin_without_fg_platform_component_visual_refresh,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true) && _statusStyles.vanillaStatusStyles, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true) && (0, _platformFeatureFlags.fg)('platform-component-visual-refresh') &&
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    _statusStyles.vanillaStatusStylesMixin_fg_platform_component_visual_refresh, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true) && !(0, _platformFeatureFlags.fg)('platform-component-visual-refresh') &&
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    _statusStyles.vanillaStatusStylesMixin_without_fg_platform_component_visual_refresh,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    _annotationStyles.annotationStyles,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    _smartCardStyles.smartCardStyles,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    _embedCardStyles.embedCardStyles,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    _unsupportedStyles.unsupportedStyles,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    _resizerStyles.resizerStyles,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
     _layout.layoutBaseStyles,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
@@ -285,7 +298,17 @@ var EditorContentContainer = /*#__PURE__*/_react.default.forwardRef(function (pr
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
     _layout.layoutSelectedStylesForViewNotAdvanced, viewMode === 'view' && (0, _experiments.editorExperiment)('advanced_layouts', true) &&
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
-    _layout.layoutResponsiveStylesForView, isComment && commentEditorStyles, isFullPage && fullPageEditorStyles, isFullPage && scrollbarStyles, (0, _platformFeatureFlags.fg)('platform_editor_ssr_fix_lists') && listLayoutShiftFix, (0, _platformFeatureFlags.fg)('platform_editor_nested_dnd_styles_changes') ?
+    _layout.layoutResponsiveStylesForView,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    isComment && _commentEditorStyles.commentEditorStyles,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    isComment && _tableStyles.tableCommentEditorStyles,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    isFullPage && _fullPageEditorStyles.fullPageEditorStyles,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    isFullPage && _scrollbarStyles.scrollbarStyles,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    (0, _platformFeatureFlags.fg)('platform_editor_ssr_fix_lists') && _list.listLayoutShiftFix, (0, _platformFeatureFlags.fg)('platform_editor_nested_dnd_styles_changes') ?
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
     _codeBlockStyles.firstCodeBlockWithNoMargin :
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
@@ -305,14 +328,28 @@ var EditorContentContainer = /*#__PURE__*/_react.default.forwardRef(function (pr
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
     _emoji.vanillaEmojiStyles :
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
-    _emoji.reactEmojiStyles, (0, _platformFeatureFlags.fg)('platform_editor_fix_floating_toolbar_focus') && firstFloatingToolbarButtonStyles],
+    _emoji.reactEmojiStyles,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    _panelStyles.panelViewStyles,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    _mediaStyles.mediaGroupStyles,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    _mediaStyles.mediaAlignmentStyles,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    _tableStyles.tableLayoutFixes,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    _link.hyperLinkFloatingToolbarStyles,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    !(0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') && _link.linkLegacyIconStylesFix],
     "data-editor-scroll-container": isScrollable ? 'true' : undefined,
     "data-testid": "editor-content-container",
     style: {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
       '--ak-editor-base-font-size': "".concat((0, _editorSharedStyles.editorFontSize)({
         theme: theme
-      }), "px")
+      }), "px"),
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+      '--ak-editor--large-gutter-padding': "".concat((0, _editorSharedStyles.akEditorGutterPaddingDynamic)(), "px")
     }
   }, children);
 });

package/dist/cjs/ui/EditorContentContainer/styles/baseStyles.js

@@ -0,0 +1,53 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.baseStyles = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = require("@emotion/react");
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
+
+// = akEditorDefaultLayoutWidth * breakoutWideScaleRatio = 1010.8 ~ 1011 This is a resulting width value that is applied to nodes that currently use breakouts (except table) and are set to `wide` when the viewport's width is > 1329px.
+var akEditorCalculatedWideLayoutWidth = 1011;
+// from breakoutConsts.calcWideWidth, layoutMaxWidth * breakoutConsts.wideScaleRatio = 904.8 ~ 905 This is a resulting width value that is applied to nodes that currently use breakouts (except table) and are set to `wide` when the viewport's width is <= 1266px.
+var akEditorCalculatedWideLayoutWidthSmallViewport = 905;
+var akEditorGutterPadding = 32;
+var akEditorDefaultLayoutWidth = 760;
+var akEditorFullWidthLayoutWidth = 1800;
+// The breakpoint for small devices is 1266px, copied from getBreakpoint in platform/packages/editor/editor-common/src/ui/WidthProvider/index.tsx
+var akEditorBreakpointForSmallDevice = "1266px";
+
+// jest warning: JSDOM version (22) doesn't support the new @container CSS rule
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
+var baseStyles = exports.baseStyles = (0, _react.css)((0, _defineProperty2.default)({
+  '--ak-editor--default-gutter-padding': "".concat(akEditorGutterPadding, "px"),
+  '--ak-editor--default-layout-width': "".concat(akEditorDefaultLayoutWidth, "px"),
+  '--ak-editor--full-width-layout-width': "".concat(akEditorFullWidthLayoutWidth, "px"),
+  /* calculate editor line length, 100cqw is the editor container width */
+  '--ak-editor--line-length': 'min(calc(100cqw - var(--ak-editor--large-gutter-padding) * 2), var(--ak-editor--default-layout-width))',
+  '--ak-editor--breakout-wide-layout-width': "".concat(akEditorCalculatedWideLayoutWidthSmallViewport, "px"),
+  '--ak-editor--breakout-full-page-guttering-padding': 'calc(var(--ak-editor--large-gutter-padding) * 2 + var(--ak-editor--default-gutter-padding))',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.fabric-editor--full-width-mode': {
+    '--ak-editor--line-length': 'min(calc(100cqw - var(--ak-editor--large-gutter-padding) * 2), var(--ak-editor--full-width-layout-width))'
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.ProseMirror': {
+    '--ak-editor-max-container-width': 'calc(100cqw - var(--ak-editor--large-gutter-padding))',
+    outline: 'none',
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+    fontSize: 'var(--ak-editor-base-font-size)'
+  },
+  /* We can't allow nodes that are inside other nodes to bleed from the parent container */
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.ProseMirror > div[data-prosemirror-node-block] [data-prosemirror-node-block]': {
+    '--ak-editor-max-container-width': '100%'
+  }
+}, "@container editor-area (width >= ".concat(akEditorBreakpointForSmallDevice, ")"), {
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.ProseMirror': {
+    '--ak-editor--breakout-wide-layout-width': "".concat(akEditorCalculatedWideLayoutWidth, "px")
+  }
+}));