@atlaskit/editor-core 206.0.2 → 206.1.0

package/dist/esm/ui/Appearance/Comment/Comment.js

@@ -18,11 +18,14 @@ import { WidthConsumer, WidthProvider } from '@atlaskit/editor-common/ui';
 import { ToolbarArrowKeyNavigationProvider } from '@atlaskit/editor-common/ui-menu';
 import { tableCommentEditorStyles } from '@atlaskit/editor-plugins/table/ui/common-styles';
 import { akEditorMobileBreakoutPoint } from '@atlaskit/editor-shared-styles';
+import { componentWithCondition } from '@atlaskit/platform-feature-flags-react';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 // Ignored via go/ees005
 // eslint-disable-next-line import/no-named-as-default
 import ClickAreaBlock from '../../Addon/ClickAreaBlock';
 import { contentComponentClickWrapper } from '../../Addon/ClickAreaBlock/contentComponentWrapper';
 import { createEditorContentStyle } from '../../ContentStyles';
+import EditorContentContainer from '../../EditorContentContainer';
 import PluginSlot from '../../PluginSlot';
 import { ToolbarWithSizeDetector as Toolbar } from '../../Toolbar/ToolbarWithSizeDetector';
 import WithFlash from '../../WithFlash';
@@ -74,6 +77,9 @@ var secondaryToolbarStyles = css({
   padding: "var(--ds-space-150, 12px)".concat(" ", "var(--ds-space-025, 2px)")
 });
 var appearance = 'comment';
+var EditorContainer = componentWithCondition(function () {
+  return editorExperiment('platform_editor_core_static_emotion', true);
+}, EditorContentContainer, ContentArea);
 export var CommentEditorWithIntl = function CommentEditorWithIntl(props) {
   var editorAPI = props.editorAPI;
   var _useSharedPluginState = useSharedPluginState(editorAPI, ['media', 'maxContentSize', 'primaryToolbar', 'editorViewMode']),
@@ -208,7 +214,7 @@ export var CommentEditorWithIntl = function CommentEditorWithIntl(props) {
     editorDisabled: disabled
   }, jsx(WidthConsumer, null, function (_ref) {
     var width = _ref.width;
-    return jsx(ContentArea, {
+    return jsx(EditorContainer, {
       ref: containerElement,
       css: maxHeight ?
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
@@ -227,7 +233,8 @@ export var CommentEditorWithIntl = function CommentEditorWithIntl(props) {
         'less-margin': width < akEditorMobileBreakoutPoint
       }),
       featureFlags: featureFlags,
-      viewMode: editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode
+      viewMode: editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode,
+      appearance: appearance
     }, customContentComponents && 'before' in customContentComponents ? contentComponentClickWrapper(customContentComponents.before) : contentComponentClickWrapper(customContentComponents), jsx(PluginSlot, {
       editorView: editorView,
       editorActions: editorActions,

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

@@ -7,21 +7,43 @@ import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import React, { useImperativeHandle, useRef } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { jsx, useTheme } from '@emotion/react';
+import { css, jsx, useTheme } from '@emotion/react';
 import classnames from 'classnames';
 import { injectIntl } from 'react-intl-next';
 import { fullPageMessages as messages } from '@atlaskit/editor-common/messages';
+import { scrollbarStyles } from '@atlaskit/editor-shared-styles/scrollbar';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { componentWithCondition } from '@atlaskit/platform-feature-flags-react';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 // Ignored via go/ees005
 // eslint-disable-next-line import/no-named-as-default
 import ClickAreaBlock from '../../Addon/ClickAreaBlock';
 import { contentComponentClickWrapper } from '../../Addon/ClickAreaBlock/contentComponentWrapper';
+import { createEditorContentStyle } from '../../ContentStyles';
 import { ContextPanel } from '../../ContextPanel';
+import EditorContentContainer from '../../EditorContentContainer';
 import PluginSlot from '../../PluginSlot';
-import { contentArea, contentAreaHeightNoToolbar, contentAreaWrapper, editorContentAreaStyle, editorContentGutterStyle, ScrollContainer, sidebarArea } from './StyledComponents';
+import { contentArea, contentAreaHeightNoToolbar, contentAreaWrapper, editorContentAreaStyle, editorContentGutterStyle, sidebarArea } from './StyledComponents';
 export var CONTENT_AREA_TEST_ID = 'ak-editor-fp-content-area';
 export var EDITOR_CONTAINER = 'ak-editor-container';
+var scrollStyles = css({
+  flexGrow: 1,
+  height: '100%',
+  overflowY: 'scroll',
+  position: 'relative',
+  display: 'flex',
+  flexDirection: 'column',
+  scrollBehavior: 'smooth'
+},
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+scrollbarStyles);
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+var ScrollContainer = createEditorContentStyle(scrollStyles);
+ScrollContainer.displayName = 'ScrollContainer';
+var EditorContainer = componentWithCondition(function () {
+  return editorExperiment('platform_editor_core_static_emotion', true);
+}, EditorContentContainer, ScrollContainer);
 var Content = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _contentAreaRef$curre;
   var theme = useTheme();
@@ -65,14 +87,15 @@ var Content = /*#__PURE__*/React.forwardRef(function (props, ref) {
     contentAreaWrapper,
     "data-testid": EDITOR_CONTAINER,
     "data-editor-container": 'true'
-  }, jsx(ScrollContainer
+  }, jsx(EditorContainer
   // 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
+    isScrollable: true,
+    appearance: props.appearance
   }, jsx(ClickAreaBlock, {
     editorView: props.editorView,
     editorDisabled: props.disabled

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

@@ -12,6 +12,7 @@ import { injectIntl } from 'react-intl-next';
 import { fullPageMessages as messages } from '@atlaskit/editor-common/messages';
 import { ContextPanelConsumer } from '@atlaskit/editor-common/ui';
 import { ToolbarArrowKeyNavigationProvider } from '@atlaskit/editor-common/ui-menu';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { ToolbarPortalMountPoint, useToolbarPortal } from '../../Toolbar/ToolbarPortal';
 import { ToolbarWithSizeDetector as Toolbar } from '../../Toolbar/ToolbarWithSizeDetector';
@@ -64,7 +65,7 @@ export var EditorToolbar = /*#__PURE__*/React.memo(function (props) {
     css: customToolbarWrapperStyle
   }, !!props.customPrimaryToolbarComponents && 'before' in props.customPrimaryToolbarComponents ? jsx(BeforePrimaryToolbarWrapper, {
     beforePrimaryToolbarComponents: (_props$customPrimaryT = props.customPrimaryToolbarComponents) === null || _props$customPrimaryT === void 0 ? void 0 : _props$customPrimaryT.before
-  }) : null, editorAPI !== null && editorAPI !== void 0 && editorAPI.findReplace && twoLineEditorToolbar ? editorAPI === null || editorAPI === void 0 ? void 0 : editorAPI.findReplace.actions.registerToolbarButton({
+  }) : null, !(editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_find_and_replace_duplication')) && editorAPI !== null && editorAPI !== void 0 && editorAPI.findReplace && twoLineEditorToolbar ? editorAPI === null || editorAPI === void 0 ? void 0 : editorAPI.findReplace.actions.registerToolbarButton({
     popupsBoundariesElement: props.popupsBoundariesElement,
     popupsMountPoint: popupsMountPoint,
     popupsScrollableElement: props.popupsScrollableElement,

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

@@ -6,11 +6,8 @@ import { decisionListSelector, taskListSelector } from '@atlaskit/adf-schema';
 import { tableFullPageEditorStyles } from '@atlaskit/editor-plugins/table/ui/common-styles';
 import { tableMarginFullWidthMode } from '@atlaskit/editor-plugins/table/ui/consts';
 import { FULL_PAGE_EDITOR_TOOLBAR_HEIGHT, akEditorFullWidthLayoutWidth, akEditorGutterPaddingDynamic, akEditorSwoopCubicBezier, akLayoutGutterOffset } from '@atlaskit/editor-shared-styles';
-import { scrollbarStyles } from '@atlaskit/editor-shared-styles/scrollbar';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
-import { createEditorContentStyle } from '../../ContentStyles';
-
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
 var SWOOP_ANIMATION = "0.5s ".concat(akEditorSwoopCubicBezier);
 var getTotalPadding = function getTotalPadding() {
@@ -25,21 +22,6 @@ export var fullPageEditorWrapper = css({
   flexDirection: 'column',
   boxSizing: 'border-box'
 });
-var scrollStyles = css({
-  flexGrow: 1,
-  height: '100%',
-  overflowY: 'scroll',
-  position: 'relative',
-  display: 'flex',
-  flexDirection: 'column',
-  scrollBehavior: 'smooth'
-},
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-scrollbarStyles);
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export var ScrollContainer = createEditorContentStyle(scrollStyles);
-ScrollContainer.displayName = 'ScrollContainer';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export var contentArea = function contentArea() {

package/dist/esm/ui/ContentStyles/index.js

@@ -142,7 +142,12 @@ export var fixBlockControlStylesSSR = function fixBlockControlStylesSSR() {
 
 // The breakpoint for small devices is 1266px, copied from getBreakpoint in platform/packages/editor/editor-common/src/ui/WidthProvider/index.tsx
 var akEditorBreakpointForSmallDevice = "1266px";
-var contentStyles = function contentStyles(props) {
+
+// We are going to deprecate this in near future
+// Currently, we are migrating content styles in packages/editor/editor-core/src/ui/EditorContentContainer.tsx
+// Under editor experiment platform_editor_core_static_emotion
+// If you are making changes to this file, please make sure to update in EditorContentContainer.tsx as well
+var legacyContentStyles = function legacyContentStyles(props) {
   return css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\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: ", "px;\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t}\n\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\t", "\n\t", "\n\t", "\n\n  ", "\n\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", ";\n\t", "\n\t", "\n\t", "\n\t", "\n\t", "\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\t", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n\n  .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\tRelated code all lives inside: packages/editor/editor-core/src/ui/Appearance/FullPage/StyledComponents.ts\n\tIn 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.", " {\n\t\tpadding: 0;\n\t}\n\n\t/* Legacy Link icon in the Atlaskit package\n     is bigger than the others, new ADS icon does not have this issue\n  */\n\t", "\n"])), akEditorGutterPadding, akEditorGutterPaddingDynamic(), akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorCalculatedWideLayoutWidthSmallViewport, akEditorBreakpointForSmallDevice, akEditorCalculatedWideLayoutWidth, editorFontSize({
     theme: props.theme
   }), whitespaceSharedStyles, paragraphSharedStyles(props.typographyTheme), listsSharedStyles, indentationSharedStyles, shadowSharedStyle, InlineNodeViewSharedStyles, fg('editor_request_to_edit_task') ? null : css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n\t\t\t\t.ProseMirror[contenteditable='false'] .taskItemView-content-wrap {\n\t\t\t\t\tpointer-events: none;\n\t\t\t\t\topacity: 0.7;\n\t\t\t\t}\n\t\t\t"]))), fg('platform_editor_hide_cursor_when_pm_hideselection') ? css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\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, editorExperiment('platform_editor_advanced_code_blocks', true) ? css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\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, placeholderStyles, editorExperiment('platform_editor_controls', 'variant1') ? placeholderOverflowStyles : null, editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_quick_insert_placeholder') ? placeholderWrapStyles : null, codeBlockStyles(), blocktypeStyles(props.typographyTheme), codeMarkSharedStyles(), textColorStyles, backgroundColorStyles(), listsStyles, ruleStyles(), mediaStyles(), layoutStyles(props.viewMode), fg('confluence_team_presence_scroll_to_pointer') ? telepointerStyle : telepointerStyleWithInitialOnly, gapCursorStyles, panelStyles(), mentionsStyles, editorExperiment('platform_editor_vanilla_dom', true, {
@@ -171,7 +176,7 @@ export var createEditorContentStyle = function createEditorContentStyle(styles)
       colorMode = _useThemeObserver.colorMode,
       typography = _useThemeObserver.typography;
     var memoizedStyle = useMemo(function () {
-      return contentStyles({
+      return legacyContentStyles({
         theme: theme,
         colorMode: colorMode,
         featureFlags: featureFlags,
@@ -185,14 +190,16 @@ export var createEditorContentStyle = function createEditorContentStyle(styles)
         className: className,
         ref: ref,
         css: [memoizedStyle, styles],
-        "data-editor-scroll-container": "true"
+        "data-editor-scroll-container": "true",
+        "data-testid": "editor-content-container"
       }, children);
     }
     return jsx("div", {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       className: className,
       ref: ref,
-      css: [memoizedStyle, styles]
+      css: [memoizedStyle, styles],
+      "data-testid": "editor-content-container"
     }, children);
   });
 };

package/dist/esm/ui/ContentStyles/layout.js

@@ -40,6 +40,8 @@ var columnSeparatorStyles = function columnSeparatorStyles(viewMode) {
 var rowSeparatorStyles = function rowSeparatorStyles(viewMode) {
   return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n\t[data-layout-content]::before {\n\t\tcontent: '';\n\t\tborder-top: ", "px solid\n\t\t\t", ";\n\t\tposition: absolute;\n\t\twidth: calc(100% - 32px);\n\t\tmargin-top: -13px;\n\n\t\t/* clear styles for column separator */\n\t\tborder-left: unset;\n\t\tmargin-left: unset;\n\t\theight: unset;\n\t}\n"])), viewMode === 'view' ? 0 : akEditorSelectedBorderSize, "var(--ds-border, #091E4224)");
 };
+
+// jest warning: JSDOM version (22) doesn't support the new @container CSS rule
 var layoutWithSeparatorBorderResponsiveStyles = function layoutWithSeparatorBorderResponsiveStyles(breakpoint, viewMode
 // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
 ) {
@@ -51,6 +53,8 @@ var layoutWithSeparatorBorderStyles = function layoutWithSeparatorBorderStyles(v
   // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
   return css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n\t\t&.selected [data-layout-column]:not(:first-of-type),\n\t\t[data-empty-layout='true'] [data-layout-column]:not(:first-of-type),\n\t\t&:hover [data-layout-column]:not(:first-of-type) {\n\t\t\t", "\n\t\t}\n\n\t\t&.selected.danger [data-layout-section] {\n\t\t\tbackground-color: ", ";\n\n\t\t\tbox-shadow: 0 0 0 ", "px\n\t\t\t\t", ";\n\t\t\tborder-radius: 4px;\n\t\t\t[data-layout-column]:not(:first-of-type) {\n\t\t\t\t", "\n\t\t\t}\n\t\t}\n\n\t\t&.", ":not(.danger) [data-layout-section] {\n\t\t\tbox-shadow: 0 0 0 ", "px\n\t\t\t\t", ";\n\t\t\tborder-radius: 4px;\n\t\t\tbackground-color: ", ";\n\t\t\t[data-layout-column] {\n\t\t\t\t", "\n\t\t\t\tborder: 0px;\n\t\t\t\t::before {\n\t\t\t\t\tbackground-color: transparent;\n\t\t\t\t}\n\t\t\t}\n\t\t\t[data-layout-column]:not(:first-of-type) {\n\t\t\t\t", "\n\t\t\t}\n\t\t}\n\t"])), columnSeparatorStyles(viewMode), "var(--ds-background-danger, ".concat(akEditorDeleteBackground, ")"), viewMode === 'view' ? 0 : akEditorSelectedBorderSize, akEditorDeleteBorder, columnSeparatorStyles(viewMode), akEditorSelectedNodeClassName, viewMode === 'view' ? 0 : akEditorSelectedBorderSize, "var(--ds-border-selected, #0C66E4)", "var(--ds-background-selected, #E9F2FF)", getSelectionStyles([SelectionStyle.Blanket]), columnSeparatorStyles(viewMode));
 };
+
+// jest warning: JSDOM version (22) doesn't support the new @container CSS rule
 var layoutResponsiveStyles = function layoutResponsiveStyles(viewMode) {
   return (// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
     css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n\t\t/* chosen breakpoints in container queries are to make sure layout responsiveness in editor aligns with renderer */\n\t\t/* not resized layout in full-width editor */\n\t\t.fabric-editor--full-width-mode .ProseMirror {\n\t\t\t> .layoutSectionView-content-wrap {\n\t\t\t\t[data-layout-section] {\n\t\t\t\t\t@container editor-area (max-width:724px) {\n\t\t\t\t\t\tflex-direction: column;\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t", "\n\t\t\t}\n\t\t}\n\n\t\t/* not resized layout in fixed-width editor */\n\t\t.ak-editor-content-area:not(.fabric-editor--full-width-mode) .ProseMirror {\n\t\t\t> .layoutSectionView-content-wrap {\n\t\t\t\t[data-layout-section] {\n\t\t\t\t\t@container editor-area (max-width:788px) {\n\t\t\t\t\t\tflex-direction: column;\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t", "\n\t\t\t}\n\t\t}\n\n\t\t/* resized layout in full/fixed-width editor */\n\t\t.ProseMirror .fabric-editor-breakout-mark {\n\t\t\t.layoutSectionView-content-wrap {\n\t\t\t\t[data-layout-section] {\n\t\t\t\t\t@container editor-area (max-width:820px) {\n\t\t\t\t\t\tflex-direction: column;\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t", "\n\t\t\t}\n\t\t}\n\t"])), layoutWithSeparatorBorderResponsiveStyles(724, viewMode), layoutWithSeparatorBorderResponsiveStyles(788, viewMode), layoutWithSeparatorBorderResponsiveStyles(820, viewMode))

package/dist/esm/ui/EditorContentContainer.js

@@ -0,0 +1,251 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14;
+/* 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
+ */
+import React, { useMemo } from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { css, jsx, useTheme } from '@emotion/react';
+import { browser } from '@atlaskit/editor-common/browser';
+import { telepointerStyle, telepointerStyleWithInitialOnly } from '@atlaskit/editor-common/collab';
+import { EmojiSharedCssClassName, defaultEmojiHeight } from '@atlaskit/editor-common/emoji';
+import { MentionSharedCssClassName } from '@atlaskit/editor-common/mention';
+import { PanelSharedCssClassName } from '@atlaskit/editor-common/panel';
+import { gapCursorStyles } from '@atlaskit/editor-common/selection';
+import { CodeBlockSharedCssClassName, GRID_GUTTER, MediaSharedClassNames, SmartCardSharedCssClassName, annotationSharedStyles, backgroundColorStyles, blockMarksSharedStyles, codeBlockInListSafariFix, codeMarkSharedStyles, dateSharedStyle, embedCardStyles, expandClassNames, getSmartCardSharedStyles, gridStyles, indentationSharedStyles, linkSharedStyle, listsSharedStyles, paragraphSharedStyles, resizerStyles, ruleSharedStyles, shadowSharedStyle, smartCardSharedStyles, smartCardStyles, tasksAndDecisionsStyles, textColorStyles, unsupportedStyles, whitespaceSharedStyles } from '@atlaskit/editor-common/styles';
+import { blocktypeStyles } from '@atlaskit/editor-plugins/block-type/styles';
+import { findReplaceStyles } from '@atlaskit/editor-plugins/find-replace/styles';
+import { textHighlightStyle } from '@atlaskit/editor-plugins/paste-options-toolbar/styles';
+import { placeholderTextStyles } from '@atlaskit/editor-plugins/placeholder-text/styles';
+import { tableCommentEditorStyles } from '@atlaskit/editor-plugins/table/ui/common-styles';
+import { SelectionStyle, akEditorCalculatedWideLayoutWidth, akEditorCalculatedWideLayoutWidthSmallViewport, akEditorDefaultLayoutWidth, akEditorDeleteBackgroundWithOpacity, akEditorDeleteBorder, akEditorFullWidthLayoutWidth, akEditorGutterPadding, akEditorGutterPaddingDynamic, akEditorSelectedBorderColor, akEditorSelectedBorderSize, akEditorSelectedNodeClassName, blockNodesVerticalMargin, editorFontSize, getSelectionStyles } from '@atlaskit/editor-shared-styles';
+import { scrollbarStyles } from '@atlaskit/editor-shared-styles/scrollbar';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
+import { useThemeObserver } from '@atlaskit/tokens';
+import { InlineNodeViewSharedStyles } from '../nodeviews/getInlineNodeViewProducer.styles';
+import { aiPanelStyles } from './ContentStyles/ai-panels';
+import { codeBlockStyles } from './ContentStyles/code-block';
+import { dateStyles, dateVanillaStyles } from './ContentStyles/date';
+import { expandStyles } from './ContentStyles/expand';
+import { extensionStyles } from './ContentStyles/extension';
+import { layoutStyles } from './ContentStyles/layout';
+import { mediaStyles } from './ContentStyles/media';
+import { panelStyles } from './ContentStyles/panel';
+import { statusStyles, vanillaStatusStyles } from './ContentStyles/status';
+import { taskDecisionStyles, vanillaTaskDecisionIconWithoutVisualRefresh as vanillaDecisionIconWithoutVisualRefresh, vanillaTaskDecisionIconWithVisualRefresh as vanillaDecisionIconWithVisualRefresh, vanillaTaskDecisionStyles as vanillaDecisionStyles, vanillaTaskItemStyles } from './ContentStyles/tasks-and-decisions';
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+export var linkStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\t.ProseMirror {\n\t\t", "\n\t}\n"])), linkSharedStyle());
+var ruleStyles = function ruleStyles() {
+  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n\t.ProseMirror {\n\t\t", ";\n\n\t\thr {\n\t\t\tcursor: pointer;\n\t\t\tpadding: ", " 0;\n\t\t\tmargin: ", " 0;\n\t\t\tbackground-clip: content-box;\n\n\t\t\t&.", " {\n\t\t\t\toutline: none;\n\t\t\t\tbackground-color: ", ";\n\t\t\t}\n\t\t}\n\t}\n"])), ruleSharedStyles(), "var(--ds-space-050, 4px)", "var(--ds-space-300, 24px)", akEditorSelectedNodeClassName, "var(--ds-border-selected, ".concat(akEditorSelectedBorderColor, ")"));
+};
+var vanillaMentionsStyles = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '.editor-mention-primitive': {
+    display: 'inline',
+    borderRadius: '20px',
+    cursor: 'pointer',
+    padding: '0 0.3em 2px 0.23em',
+    fontWeight: "var(--ds-font-weight-regular, 400)",
+    wordBreak: 'break-word',
+    background: "var(--ds-background-neutral, #091E420F)",
+    border: '1px solid transparent',
+    color: "var(--ds-text-subtle, #44546F)",
+    '&:hover': {
+      background: "var(--ds-background-neutral-hovered, #091E4224)"
+    },
+    '&:active': {
+      background: "var(--ds-background-neutral-pressed, #091E424F)"
+    }
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '.editor-mention-primitive.mention-restricted': {
+    background: 'transparent',
+    border: "1px solid ".concat("var(--ds-border-bold, #758195)"),
+    color: "var(--ds-text, #172B4D)",
+    '&:hover': {
+      background: 'transparent'
+    },
+    '&:active': {
+      background: 'transparent'
+    }
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '.editor-mention-primitive.mention-self': {
+    background: "var(--ds-background-brand-bold, #0C66E4)",
+    border: '1px solid transparent',
+    color: "var(--ds-text-inverse, #FFFFFF)",
+    '&:hover': {
+      background: "var(--ds-background-brand-bold-hovered, #0055CC)"
+    },
+    '&:active': {
+      background: "var(--ds-background-brand-bold-pressed, #09326C)"
+    }
+  }
+});
+var vanillaSelectionStyles = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n\t.danger {\n\t\t.editor-mention-primitive {\n\t\t\tbox-shadow: 0 0 0 ", "px ", ";\n\t\t\tbackground-color: ", ";\n\t\t}\n\t}\n\n\t.", " > .editor-mention-primitive,\n\t.", " > .editor-mention-primitive.mention-self,\n\t.", " > .editor-mention-primitive.mention-restricted {\n\t\t", "\n\t\t/* need to specify dark text colour because personal mentions\n\t\t   (in dark blue) have white text by default */\n\t\tcolor: ", "\n\t}\n"])), akEditorSelectedBorderSize, akEditorDeleteBorder, "var(--ds-background-danger, ".concat(akEditorDeleteBackgroundWithOpacity, ")"), akEditorSelectedNodeClassName, akEditorSelectedNodeClassName, akEditorSelectedNodeClassName, getSelectionStyles([SelectionStyle.BoxShadow, SelectionStyle.Background]), "var(--ds-text-subtle, #44546F)");
+var mentionsStyles = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n\t.", " {\n\t\t&.", " [data-mention-id] > span {\n\t\t\t", "\n\n\t\t\t/* need to specify dark text colour because personal mentions\n\t\t (in dark blue) have white text by default */\n\t  color: ", ";\n\t\t}\n\t}\n\n\t.danger {\n\t\t.", ".", "\n\t\t\t> span\n\t\t\t> span\n\t\t\t> span {\n\t\t\tbox-shadow: 0 0 0 ", "px ", ";\n\t\t\tbackground-color: ", ";\n\t\t}\n\t\t.", " > span > span > span {\n\t\t\tbackground-color: ", ";\n\t\t\tcolor: ", ";\n\t\t}\n\t}\n"])), MentionSharedCssClassName.MENTION_CONTAINER, akEditorSelectedNodeClassName, getSelectionStyles([SelectionStyle.BoxShadow, SelectionStyle.Background]), "var(--ds-text-subtle, #44546F)", MentionSharedCssClassName.MENTION_CONTAINER, akEditorSelectedNodeClassName, akEditorSelectedBorderSize, akEditorDeleteBorder, "var(--ds-background-danger, ".concat(akEditorDeleteBackgroundWithOpacity, ")"), MentionSharedCssClassName.MENTION_CONTAINER, "var(--ds-background-neutral, #091E420F)", "var(--ds-text-subtle, #44546F)");
+var listsStyles = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n\t.ProseMirror {\n\t\tli {\n\t\t\tposition: relative;\n\n\t\t\t> p:not(:first-child) {\n\t\t\t\tmargin: ", " 0 0 0;\n\t\t\t}\n\n\t\t\t// In SSR the above rule will apply to all p tags because first-child would be a style tag.\n\t\t\t// The following rule resets the first p tag back to its original margin\n\t\t\t// defined in packages/editor/editor-common/src/styles/shared/paragraph.ts\n\t\t\t> style:first-child + p {\n\t\t\t\tmargin-top: ", ";\n\t\t\t}\n\t\t}\n\n\t\t&:not([data-node-type='decisionList']) > li,\n\t// This prevents https://product-fabric.atlassian.net/browse/ED-20924\n\t&:not(.", ") > li {\n\t\t\t", "\n\t\t}\n\t}\n"])), "var(--ds-space-050, 4px)", blockNodesVerticalMargin, SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER, browser.safari ? codeBlockInListSafariFix : '');
+var reactEmojiStyles = css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n\t.", " {\n\t\tdisplay: inline-block;\n\n\t\t.", " {\n\t\t\tcursor: pointer;\n\n\t\t\t&.", " > span {\n\t\t\t\t/** needed for selection style to cover custom emoji image properly */\n\t\t\t\tdisplay: flex;\n\t\t\t}\n\t\t}\n\n\t\t&.", " {\n\t\t\t.", ", .", " {\n\t\t\t\tborder-radius: 2px;\n\t\t\t\t", "\n\t\t\t}\n\t\t}\n\t}\n"])), EmojiSharedCssClassName.EMOJI_CONTAINER, EmojiSharedCssClassName.EMOJI_NODE, EmojiSharedCssClassName.EMOJI_IMAGE, akEditorSelectedNodeClassName, EmojiSharedCssClassName.EMOJI_SPRITE, EmojiSharedCssClassName.EMOJI_IMAGE, getSelectionStyles([SelectionStyle.Blanket, SelectionStyle.BoxShadow]));
+var emojiStyles = css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n\t[data-prosemirror-node-view-type='vanilla'] {\n\t\t.", " {\n\t\t\tdisplay: inline-block;\n\t\t}\n\n\t\t.", ", .", " {\n\t\t\tbackground: no-repeat transparent;\n\t\t\tdisplay: inline-block;\n\t\t\theight: ", "px;\n\t\t\tmax-height: ", "px;\n\t\t\tcursor: pointer;\n\t\t\tvertical-align: middle;\n\t\t\tuser-select: all;\n\t\t}\n\n\t\t&.", " {\n\t\t\t.", ", .", " {\n\t\t\t\tborder-radius: 2px;\n\t\t\t\t", "\n\t\t\t}\n\t\t}\n\t}\n"])), EmojiSharedCssClassName.EMOJI_CONTAINER, EmojiSharedCssClassName.EMOJI_SPRITE, EmojiSharedCssClassName.EMOJI_IMAGE, defaultEmojiHeight, defaultEmojiHeight, akEditorSelectedNodeClassName, EmojiSharedCssClassName.EMOJI_SPRITE, EmojiSharedCssClassName.EMOJI_IMAGE, getSelectionStyles([SelectionStyle.Blanket, SelectionStyle.BoxShadow]));
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+export var placeholderStyles = 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 = 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 = 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'
+  }
+});
+var firstBlockNodeStyles = css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n\t.ProseMirror {\n\t\t> .", ",\n\t\t\t> .", ",\n\t\t\t> .", ",\n\t\t\t> div[data-task-list-local-id],\n\t\t> div[data-layout-section],\n\t\t> .", " {\n\t\t\t&:first-child {\n\t\t\t\tmargin-top: 0;\n\t\t\t}\n\t\t}\n\n\t\t> hr:first-of-type {\n\t\t\tmargin-top: 0;\n\t\t}\n\t}\n"])), PanelSharedCssClassName.prefix, CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER, SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER, expandClassNames.prefix);
+var firstBlockNodeStylesNew = css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n\t.ProseMirror {\n\t\t> .", ",\n\t\t\t> .", ",\n\t\t\t> .", ",\n\t\t\t> div[data-task-list-local-id],\n\t\t> div[data-layout-section],\n\t\t> .", " {\n\t\t\t&:first-child {\n\t\t\t\tmargin-top: 0;\n\t\t\t}\n\t\t}\n\n\t\t> hr:first-child,\n\t\t> .ProseMirror-widget:first-child + hr {\n\t\t\tmargin-top: 0;\n\t\t}\n\t}\n"])), PanelSharedCssClassName.prefix, CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER, SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER, expandClassNames.prefix);
+
+/**
+ * fix layout issue of first block node
+ */
+export var fixBlockControlStylesSSR = function fixBlockControlStylesSSR() {
+  if (fg('platform_editor_element_dnd_nested_fix_patch_6')) {
+    return firstBlockNodeStylesNew;
+  }
+  return firstBlockNodeStyles;
+};
+
+// 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(props) {
+  return css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\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: ", "px;\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t}\n\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\t", "\n\t", "\n\t", "\n\n  ", "\n\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", ";\n\t", "\n\t", "\n\t", "\n\t", "\n\t", "\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\t", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n\n  .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.", " {\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"])), akEditorGutterPadding, akEditorGutterPaddingDynamic(), akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorCalculatedWideLayoutWidthSmallViewport, akEditorBreakpointForSmallDevice, akEditorCalculatedWideLayoutWidth, editorFontSize({
+    theme: props.theme
+  }), whitespaceSharedStyles, paragraphSharedStyles(props.typographyTheme), listsSharedStyles, indentationSharedStyles, shadowSharedStyle, InlineNodeViewSharedStyles, fg('editor_request_to_edit_task') ? null : css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n\t\t\t\t.ProseMirror[contenteditable='false'] .taskItemView-content-wrap {\n\t\t\t\t\tpointer-events: none;\n\t\t\t\t\topacity: 0.7;\n\t\t\t\t}\n\t\t\t"]))), fg('platform_editor_hide_cursor_when_pm_hideselection') ? css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\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, editorExperiment('platform_editor_advanced_code_blocks', true) ? css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\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, placeholderStyles, editorExperiment('platform_editor_controls', 'variant1') ? placeholderOverflowStyles : null, editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_quick_insert_placeholder') ? placeholderWrapStyles : null, codeBlockStyles(), blocktypeStyles(props.typographyTheme), codeMarkSharedStyles(), textColorStyles, backgroundColorStyles(), listsStyles, ruleStyles(), mediaStyles(), layoutStyles(props.viewMode), fg('confluence_team_presence_scroll_to_pointer') ? telepointerStyle : telepointerStyleWithInitialOnly, gapCursorStyles, panelStyles(), mentionsStyles, editorExperiment('platform_editor_vanilla_dom', true, {
+    exposure: false
+  }) && vanillaMentionsStyles, editorExperiment('platform_editor_vanilla_dom', true, {
+    exposure: false
+  }) && vanillaSelectionStyles, editorExperiment('platform_editor_vanilla_dom', true, {
+    exposure: false
+  }) ? emojiStyles : reactEmojiStyles, emojiStyles, tasksAndDecisionsStyles, gridStyles, linkStyles, blockMarksSharedStyles, dateSharedStyle, extensionStyles, expandStyles(), findReplaceStyles, textHighlightStyle, taskDecisionStyles, editorExperiment('platform_editor_vanilla_dom', true, {
+    exposure: false
+  }) && vanillaTaskItemStyles, editorExperiment('platform_editor_vanilla_dom', true, {
+    exposure: false
+  }) && vanillaDecisionStyles, editorExperiment('platform_editor_vanilla_dom', true, {
+    exposure: false
+  }) && fg('platform-visual-refresh-icons') && vanillaDecisionIconWithVisualRefresh, editorExperiment('platform_editor_vanilla_dom', true, {
+    exposure: false
+  }) && !fg('platform-visual-refresh-icons') && vanillaDecisionIconWithoutVisualRefresh, statusStyles, editorExperiment('platform_editor_vanilla_dom', true) ? vanillaStatusStyles : null, annotationSharedStyles(), smartCardStyles(), fg('platform-linking-visual-refresh-v1') ? getSmartCardSharedStyles() : smartCardSharedStyles, editorExperiment('platform_editor_vanilla_dom', true) ? dateVanillaStyles : null, dateStyles, embedCardStyles(), unsupportedStyles, resizerStyles, aiPanelStyles(props.colorMode), fixBlockControlStylesSSR(), MediaSharedClassNames.FLOATING_TOOLBAR_COMPONENT, !fg('platform-visual-refresh-icons') ? css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\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 = 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 - 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
+tableCommentEditorStyles);
+
+// Originally copied from scrollStyles in packages/editor/editor-core/src/ui/Appearance/FullPage/StyledComponents.ts
+var fullPageEditorStyles = css({
+  flexGrow: 1,
+  height: '100%',
+  overflowY: 'scroll',
+  position: 'relative',
+  display: 'flex',
+  flexDirection: 'column',
+  scrollBehavior: 'smooth'
+},
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+scrollbarStyles);
+
+/**
+ * EditorContentStyles is a wrapper component that applies styles to its children
+ * based on the provided feature flags, view mode, and other props.
+ * It uses Emotion for styling and supports scrollable content.
+ * The component is memoized to optimize performance.
+ *
+ * This will be used in near future to replace the current editor content styles from index.tsx
+ *
+ * @param {EditorContentContainerProps} props - The props for the component.
+ * @param {string} props.className - Additional class name for the component.
+ * @param {React.ReactNode} props.children - The content to be rendered inside the component.
+ * @param {FeatureFlags} props.featureFlags - Feature flags to control the styles.
+ * @param {'view' | 'edit'} props.viewMode - The view mode of the editor.
+ * @param {boolean} props.isScrollable - Whether the content is scrollable.
+ * @param {'full-page' | 'full-width' | 'comment' | 'chromeless'} props.appearance - The appearance of the editor.
+ * @returns {JSX.Element} The styled content component.
+ */
+var EditorContentContainer = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var className = props.className,
+    children = props.children,
+    featureFlags = props.featureFlags,
+    viewMode = props.viewMode,
+    isScrollable = props.isScrollable,
+    appearance = props.appearance;
+  var theme = useTheme();
+  var _useThemeObserver = useThemeObserver(),
+    colorMode = _useThemeObserver.colorMode,
+    typography = _useThemeObserver.typography;
+  var memoizedStyle = useMemo(function () {
+    return contentStyles({
+      theme: theme,
+      colorMode: colorMode,
+      featureFlags: featureFlags,
+      viewMode: viewMode,
+      typographyTheme: typography
+    });
+  }, [theme, colorMode, featureFlags, viewMode, typography]);
+  var isFullPage = appearance === 'full-page' || appearance === 'full-width';
+  var isComment = appearance === 'comment';
+  return jsx("div", {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    className: className,
+    ref: ref,
+    css: [memoizedStyle, isComment && commentEditorStyles, isFullPage && fullPageEditorStyles],
+    "data-editor-scroll-container": isScrollable ? 'true' : undefined,
+    "data-testid": "editor-content-container"
+  }, children);
+});
+export default EditorContentContainer;

package/dist/esm/version-wrapper.js

@@ -1,2 +1,2 @@
 export var name = "@atlaskit/editor-core";
-export var version = "206.0.2";
+export var version = "206.1.0";

package/dist/types/create-editor/create-universal-preset.d.ts

@@ -713,6 +713,7 @@ export declare function createUniversalPreset({ props, prevProps, initialPluginC
             suppressToolbar?: (() => boolean) | undefined;
             unsuppressToolbar?: (() => boolean) | undefined;
             setToolbarDocking?: ((toolbarDocking: import("packages/editor/editor-plugin-selection-toolbar/dist/types/types").ToolbarDocking) => boolean) | undefined;
+            forceToolbarDockingWithoutAnalytics?: ((toolbarDocking: import("packages/editor/editor-plugin-selection-toolbar/dist/types/types").ToolbarDocking) => boolean) | undefined;
             refreshToolbarDocking?: (() => boolean) | undefined;
         } | undefined;
     }, import("@atlaskit/editor-plugins/selection-toolbar").SelectionToolbarPluginOptions>>];
@@ -794,6 +795,7 @@ export declare function createUniversalPreset({ props, prevProps, initialPluginC
         suppressToolbar?: (() => boolean) | undefined;
         unsuppressToolbar?: (() => boolean) | undefined;
         setToolbarDocking?: ((toolbarDocking: import("packages/editor/editor-plugin-selection-toolbar/dist/types/types").ToolbarDocking) => boolean) | undefined;
+        forceToolbarDockingWithoutAnalytics?: ((toolbarDocking: import("packages/editor/editor-plugin-selection-toolbar/dist/types/types").ToolbarDocking) => boolean) | undefined;
         refreshToolbarDocking?: (() => boolean) | undefined;
     } | undefined;
 }, import("@atlaskit/editor-plugins/selection-toolbar").SelectionToolbarPluginOptions>, import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"clearMarksOnEmptyDoc", {}, undefined>, import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"blockType", {
@@ -877,6 +879,7 @@ export declare function createUniversalPreset({ props, prevProps, initialPluginC
             suppressToolbar?: (() => boolean) | undefined;
             unsuppressToolbar?: (() => boolean) | undefined;
             setToolbarDocking?: ((toolbarDocking: import("packages/editor/editor-plugin-selection-toolbar/dist/types/types").ToolbarDocking) => boolean) | undefined;
+            forceToolbarDockingWithoutAnalytics?: ((toolbarDocking: import("packages/editor/editor-plugin-selection-toolbar/dist/types/types").ToolbarDocking) => boolean) | undefined;
             refreshToolbarDocking?: (() => boolean) | undefined;
         } | undefined;
     }, import("@atlaskit/editor-plugins/selection-toolbar").SelectionToolbarPluginOptions>>];

package/dist/types/presets/universal.d.ts

@@ -765,6 +765,7 @@ export default function createUniversalPresetInternal({ appearance, props, featu
             suppressToolbar?: (() => boolean) | undefined;
             unsuppressToolbar?: (() => boolean) | undefined;
             setToolbarDocking?: ((toolbarDocking: import("packages/editor/editor-plugin-selection-toolbar/dist/types/types").ToolbarDocking) => boolean) | undefined;
+            forceToolbarDockingWithoutAnalytics?: ((toolbarDocking: import("packages/editor/editor-plugin-selection-toolbar/dist/types/types").ToolbarDocking) => boolean) | undefined;
             refreshToolbarDocking?: (() => boolean) | undefined;
         } | undefined;
     }, import("@atlaskit/editor-plugins/selection-toolbar").SelectionToolbarPluginOptions>>];
@@ -846,6 +847,7 @@ export default function createUniversalPresetInternal({ appearance, props, featu
         suppressToolbar?: (() => boolean) | undefined;
         unsuppressToolbar?: (() => boolean) | undefined;
         setToolbarDocking?: ((toolbarDocking: import("packages/editor/editor-plugin-selection-toolbar/dist/types/types").ToolbarDocking) => boolean) | undefined;
+        forceToolbarDockingWithoutAnalytics?: ((toolbarDocking: import("packages/editor/editor-plugin-selection-toolbar/dist/types/types").ToolbarDocking) => boolean) | undefined;
         refreshToolbarDocking?: (() => boolean) | undefined;
     } | undefined;
 }, import("@atlaskit/editor-plugins/selection-toolbar").SelectionToolbarPluginOptions>, import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"clearMarksOnEmptyDoc", {}, undefined>, import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"blockType", {
@@ -929,6 +931,7 @@ export default function createUniversalPresetInternal({ appearance, props, featu
             suppressToolbar?: (() => boolean) | undefined;
             unsuppressToolbar?: (() => boolean) | undefined;
             setToolbarDocking?: ((toolbarDocking: import("packages/editor/editor-plugin-selection-toolbar/dist/types/types").ToolbarDocking) => boolean) | undefined;
+            forceToolbarDockingWithoutAnalytics?: ((toolbarDocking: import("packages/editor/editor-plugin-selection-toolbar/dist/types/types").ToolbarDocking) => boolean) | undefined;
             refreshToolbarDocking?: (() => boolean) | undefined;
         } | undefined;
     }, import("@atlaskit/editor-plugins/selection-toolbar").SelectionToolbarPluginOptions>>];

package/dist/types/presets/useUniversalPreset.d.ts

@@ -713,6 +713,7 @@ export default function useUniversalPreset({ props, initialPluginConfiguration }
             suppressToolbar?: (() => boolean) | undefined;
             unsuppressToolbar?: (() => boolean) | undefined;
             setToolbarDocking?: ((toolbarDocking: import("packages/editor/editor-plugin-selection-toolbar/dist/types/types").ToolbarDocking) => boolean) | undefined;
+            forceToolbarDockingWithoutAnalytics?: ((toolbarDocking: import("packages/editor/editor-plugin-selection-toolbar/dist/types/types").ToolbarDocking) => boolean) | undefined;
             refreshToolbarDocking?: (() => boolean) | undefined;
         } | undefined;
     }, import("@atlaskit/editor-plugins/selection-toolbar").SelectionToolbarPluginOptions>>];
@@ -794,6 +795,7 @@ export default function useUniversalPreset({ props, initialPluginConfiguration }
         suppressToolbar?: (() => boolean) | undefined;
         unsuppressToolbar?: (() => boolean) | undefined;
         setToolbarDocking?: ((toolbarDocking: import("packages/editor/editor-plugin-selection-toolbar/dist/types/types").ToolbarDocking) => boolean) | undefined;
+        forceToolbarDockingWithoutAnalytics?: ((toolbarDocking: import("packages/editor/editor-plugin-selection-toolbar/dist/types/types").ToolbarDocking) => boolean) | undefined;
         refreshToolbarDocking?: (() => boolean) | undefined;
     } | undefined;
 }, import("@atlaskit/editor-plugins/selection-toolbar").SelectionToolbarPluginOptions>, import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"clearMarksOnEmptyDoc", {}, undefined>, import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"blockType", {
@@ -877,6 +879,7 @@ export default function useUniversalPreset({ props, initialPluginConfiguration }
             suppressToolbar?: (() => boolean) | undefined;
             unsuppressToolbar?: (() => boolean) | undefined;
             setToolbarDocking?: ((toolbarDocking: import("packages/editor/editor-plugin-selection-toolbar/dist/types/types").ToolbarDocking) => boolean) | undefined;
+            forceToolbarDockingWithoutAnalytics?: ((toolbarDocking: import("packages/editor/editor-plugin-selection-toolbar/dist/types/types").ToolbarDocking) => boolean) | undefined;
             refreshToolbarDocking?: (() => boolean) | undefined;
         } | undefined;
     }, import("@atlaskit/editor-plugins/selection-toolbar").SelectionToolbarPluginOptions>>];