@atlaskit/editor-core 207.19.1 → 207.19.2

package/dist/esm/ui/EditorContentContainer/EditorContentContainer.js

@@ -1,8 +1,5 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-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
@@ -10,46 +7,52 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 import React 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 { jsx, useTheme } from '@emotion/react';
 import { browser } from '@atlaskit/editor-common/browser';
-import { GRID_GUTTER } from '@atlaskit/editor-common/styles';
-import { tableCommentEditorStyles } from '@atlaskit/editor-plugins/table/ui/common-styles';
-import { akEditorCalculatedWideLayoutWidth, akEditorCalculatedWideLayoutWidthSmallViewport, akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorGutterPadding, akEditorGutterPaddingDynamic, editorFontSize } from '@atlaskit/editor-shared-styles';
+import { akEditorGutterPaddingDynamic, editorFontSize } from '@atlaskit/editor-shared-styles';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { useThemeObserver } from '@atlaskit/tokens';
-import { extensionStyles } from '../ContentStyles/extension';
 import { aiPanelBaseFirefoxStyles, aiPanelBaseStyles, aiPanelDarkFirefoxStyles, aiPanelDarkStyles } from './styles/aiPanel';
 import { annotationStyles } from './styles/annotationStyles';
 import { backgroundColorStyles } from './styles/backgroundColorStyles';
+import { baseStyles } from './styles/baseStyles';
 import { blockMarksStyles } from './styles/blockMarksStyles';
 import { blocktypeStyles, blocktypeStyles_fg_platform_editor_nested_dnd_styles_changes, blocktypeStyles_fg_platform_editor_typography_ugc, blocktypeStyles_without_fg_platform_editor_typography_ugc } from './styles/blockTypeStyles';
 import { codeBlockStyles, firstCodeBlockWithNoMargin, firstCodeBlockWithNoMarginOld } from './styles/codeBlockStyles';
 import { codeMarkStyles } from './styles/codeMarkStyles';
+import { commentEditorStyles } from './styles/commentEditorStyles';
+import { cursorStyles } from './styles/cursorStyles';
 import { dateStyles, dateVanillaStyles } from './styles/dateStyles';
 import { editorUGCTokensDefault, editorUGCTokensModernized, editorUGCTokensRefreshed } from './styles/editorUGCTokenStyles';
 import { embedCardStyles } from './styles/embedCardStyles';
 import { reactEmojiStyles, vanillaEmojiStyles } from './styles/emoji';
 import { expandStyles, expandStylesMixin_fg_platform_editor_nested_dnd_styles_changes, expandStylesMixin_fg_platform_visual_refresh_icons, expandStylesMixin_without_fg_platform_editor_nested_dnd_styles_changes } from './styles/expandStyles';
+import { extensionStyles } from './styles/extensionStyles';
 import { findReplaceStyles } from './styles/findReplaceStyles';
 import { firstBlockNodeStyles } from './styles/firstBlockNodeStyles';
+import { firstFloatingToolbarButtonStyles } from './styles/floatingToolbarStyles';
+import { fullPageEditorStyles } from './styles/fullPageEditorStyles';
 import { gapCursorStyles } from './styles/gapCursorStyles';
 import { gridStyles } from './styles/gridStyles';
 import { indentationStyles } from './styles/indentationStyles';
 import { InlineNodeViewSharedStyles } from './styles/inlineNodeViewSharedStyles';
 import { layoutColumnResponsiveStyles, layoutBaseStyles, layoutBaseStylesAdvanced, layoutBaseStylesFixesUnderNestedDnDFG, layoutSelectedStylesNotAdvanced, layoutSelectedStylesForViewNotAdvanced, layoutColumnMartinTopFixesNew, layoutColumnMartinTopFixesOld, layoutColumnStylesAdvanced, layoutColumnStylesNotAdvanced, layoutResponsiveBaseStyles, layoutResponsiveStylesForView, layoutSectionStylesAdvanced, layoutSectionStylesNotAdvanced, layoutStylesForView, layoutSelectedStylesAdvanced, layoutSelectedStylesForViewAdvanced } from './styles/layout';
-import { linkStyles, linkStylesOld } from './styles/link';
-import { listsStyles, listsStylesSafariFix } from './styles/list';
-import { mediaStyles } from './styles/mediaStyles';
+import { hyperLinkFloatingToolbarStyles, linkStyles, linkStylesOld, linkLegacyIconStylesFix } from './styles/link';
+import { listLayoutShiftFix, listsStyles, listsStylesSafariFix } from './styles/list';
+import { mediaAlignmentStyles, mediaGroupStyles, mediaStyles } from './styles/mediaStyles';
 import { mentionsStyles, vanillaMentionsStyles, vanillaMentionsSelectionStyles } from './styles/mentions';
-import { panelStyles, panelStylesMixin_fg_platform_editor_add_border_for_nested_panel, panelStylesMixin_fg_platform_editor_lcm_nested_panel_icon_fix, panelStylesMixin_fg_platform_editor_nested_dnd_styles_changes, panelStylesMixin_without_fg_platform_editor_lcm_nested_panel_icon_fix } from './styles/panelStyles';
+import { panelStyles, panelStylesMixin_fg_platform_editor_add_border_for_nested_panel, panelStylesMixin_fg_platform_editor_lcm_nested_panel_icon_fix, panelStylesMixin_fg_platform_editor_nested_dnd_styles_changes, panelStylesMixin_without_fg_platform_editor_lcm_nested_panel_icon_fix, panelViewStyles } from './styles/panelStyles';
 import { paragraphStylesOld, paragraphStylesUGCModernized, paragraphStylesUGCRefreshed } from './styles/paragraphStyles';
-import { placeholderTextStyles } from './styles/placeholderTextStyles';
+import { placeholderOverflowStyles, placeholderStyles, placeholderTextStyles, placeholderWrapStyles } from './styles/placeholderStyles';
 import { resizerStyles, pragmaticResizerStyles, pragmaticResizerStylesForTooltip } from './styles/resizerStyles';
 import { ruleStyles } from './styles/rule';
+import { scrollbarStyles } from './styles/scrollbarStyles';
+import { hideCursorWhenHideSelectionStyles, hideSelectionStyles, selectedNodeStyles } from './styles/selectionStyles';
 import { shadowStyles } from './styles/shadowStyles';
 import { linkingVisualRefreshV1Styles, smartCardStyles, smartLinksInLivePagesStyles, smartLinksInLivePagesStylesOld } from './styles/smartCardStyles';
 import { statusStyles, statusStylesMixin_fg_platform_component_visual_refresh, statusStylesMixin_without_fg_platform_component_visual_refresh, vanillaStatusStyles, vanillaStatusStylesMixin_fg_platform_component_visual_refresh, vanillaStatusStylesMixin_without_fg_platform_component_visual_refresh } from './styles/statusStyles';
+import { tableCommentEditorStyles, tableLayoutFixes } from './styles/tableStyles';
 import { decisionStyles, tasksAndDecisionsStyles, vanillaDecisionIconWithoutVisualRefresh, vanillaDecisionIconWithVisualRefresh, vanillaDecisionStyles, vanillaTaskItemStyles } from './styles/tasksAndDecisionsStyles';
 import { telepointerColorAndCommonStyle, telepointerStyle, telepointerStyleWithInitialOnly } from './styles/telepointerStyles';
 import { textColorStyles } from './styles/textColorStyles';
@@ -57,138 +60,6 @@ import { textHighlightStyle } from './styles/textHighlightStyles';
 import { unsupportedStyles } from './styles/unsupportedStyles';
 import { whitespaceStyles } from './styles/whitespaceStyles';
 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
-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'
-  }
-});
-
-// 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 css(_templateObject || (_templateObject = _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: 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"])), akEditorGutterPadding, akEditorGutterPaddingDynamic(), akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorCalculatedWideLayoutWidthSmallViewport, akEditorBreakpointForSmallDevice, akEditorCalculatedWideLayoutWidth, whitespaceStyles, indentationStyles, shadowStyles, InlineNodeViewSharedStyles, fg('platform_editor_hide_cursor_when_pm_hideselection') ? css(_templateObject2 || (_templateObject2 = _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(_templateObject3 || (_templateObject3 = _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, !fg('platform_editor_typography_ugc') && editorUGCTokensDefault,
-  // eslint-disable-next-line @atlaskit/platform/no-preconditioning
-  fg('platform_editor_typography_ugc') && ( /* eslint-disable @atlaskit/platform/ensure-feature-flag-prefix */
-  fg('platform-dst-jira-web-fonts') || fg('confluence_typography_refreshed') || fg('atlas_editor_typography_refreshed')) && editorUGCTokensRefreshed
-  /* eslint-enable @atlaskit/platform/ensure-feature-flag-prefix */,
-  // eslint-disable-next-line @atlaskit/platform/no-preconditioning
-  fg('platform_editor_typography_ugc') && /* eslint-disable @atlaskit/platform/ensure-feature-flag-prefix */
-  !(fg('platform-dst-jira-web-fonts') || fg('confluence_typography_refreshed') || fg('atlas_editor_typography_refreshed')) && editorUGCTokensModernized
-  /* eslint-enable @atlaskit/platform/ensure-feature-flag-prefix */, blocktypeStyles, fg('platform_editor_typography_ugc') && blocktypeStyles_fg_platform_editor_typography_ugc, !fg('platform_editor_typography_ugc') && blocktypeStyles_without_fg_platform_editor_typography_ugc, fg('platform_editor_nested_dnd_styles_changes') && blocktypeStyles_fg_platform_editor_nested_dnd_styles_changes, codeMarkStyles, textColorStyles, backgroundColorStyles, listsStyles, ruleStyles, mediaStyles, fg('confluence_team_presence_scroll_to_pointer') ? telepointerStyle : telepointerStyleWithInitialOnly, telepointerColorAndCommonStyle, gapCursorStyles, panelStyles, fg('platform_editor_add_border_for_nested_panel') && panelStylesMixin_fg_platform_editor_add_border_for_nested_panel, fg('platform_editor_nested_dnd_styles_changes') && panelStylesMixin_fg_platform_editor_nested_dnd_styles_changes, fg('platform_editor_lcm_nested_panel_icon_fix') && panelStylesMixin_fg_platform_editor_lcm_nested_panel_icon_fix, !fg('platform_editor_lcm_nested_panel_icon_fix') && panelStylesMixin_without_fg_platform_editor_lcm_nested_panel_icon_fix, mentionsStyles, tasksAndDecisionsStyles, gridStyles, blockMarksStyles, dateStyles, extensionStyles, expandStyles, fg('platform_editor_nested_dnd_styles_changes') && expandStylesMixin_fg_platform_editor_nested_dnd_styles_changes, !fg('platform_editor_nested_dnd_styles_changes') && expandStylesMixin_without_fg_platform_editor_nested_dnd_styles_changes, fg('platform-visual-refresh-icons') && expandStylesMixin_fg_platform_visual_refresh_icons, findReplaceStyles, textHighlightStyle, decisionStyles, 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, fg('platform-component-visual-refresh') && statusStylesMixin_fg_platform_component_visual_refresh, !fg('platform-component-visual-refresh') && statusStylesMixin_without_fg_platform_component_visual_refresh, editorExperiment('platform_editor_vanilla_dom', true) && vanillaStatusStyles, editorExperiment('platform_editor_vanilla_dom', true) && fg('platform-component-visual-refresh') && vanillaStatusStylesMixin_fg_platform_component_visual_refresh, editorExperiment('platform_editor_vanilla_dom', true) && !fg('platform-component-visual-refresh') && vanillaStatusStylesMixin_without_fg_platform_component_visual_refresh, annotationStyles, smartCardStyles, embedCardStyles, unsupportedStyles, resizerStyles, !fg('platform-visual-refresh-icons') ? css(_templateObject4 || (_templateObject4 = _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'
-});
-var scrollbarStyles = 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 = 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 = 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)")
-  }
-});
-
 /**
  * EditorContentStyles is a wrapper component that applies styles to its children
  * based on the provided feature flags, view mode, and other props.
@@ -211,7 +82,147 @@ var EditorContentContainer = /*#__PURE__*/React.forwardRef(function (props, ref)
     // 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,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    whitespaceStyles,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    indentationStyles,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    shadowStyles,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    InlineNodeViewSharedStyles,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    hideSelectionStyles, (fg('platform_editor_hide_cursor_when_pm_hideselection') || editorExperiment('platform_editor_advanced_code_blocks', true)) &&
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    hideCursorWhenHideSelectionStyles,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    selectedNodeStyles,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    cursorStyles,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    fg('platform_editor_fix_floating_toolbar_focus') && firstFloatingToolbarButtonStyles,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    placeholderTextStyles,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    placeholderStyles,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    editorExperiment('platform_editor_controls', 'variant1') && placeholderOverflowStyles, editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_quick_insert_placeholder') &&
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    placeholderWrapStyles,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    codeBlockStyles,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    !fg('platform_editor_typography_ugc') && editorUGCTokensDefault, (fg('platform-dst-jira-web-fonts') || fg('confluence_typography_refreshed') || fg('atlas_editor_typography_refreshed')) && fg('platform_editor_typography_ugc') &&
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    editorUGCTokensRefreshed, !(fg('platform-dst-jira-web-fonts') || fg('confluence_typography_refreshed') || fg('atlas_editor_typography_refreshed')) && fg('platform_editor_typography_ugc') &&
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    editorUGCTokensModernized,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    blocktypeStyles,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    fg('platform_editor_typography_ugc') ?
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    blocktypeStyles_fg_platform_editor_typography_ugc :
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    blocktypeStyles_without_fg_platform_editor_typography_ugc, fg('platform_editor_nested_dnd_styles_changes') &&
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    blocktypeStyles_fg_platform_editor_nested_dnd_styles_changes,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    codeMarkStyles,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    textColorStyles,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    backgroundColorStyles,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    listsStyles,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    ruleStyles,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    mediaStyles, fg('confluence_team_presence_scroll_to_pointer') ?
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    telepointerStyle :
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    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
+    telepointerColorAndCommonStyle,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    gapCursorStyles,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    panelStyles, fg('platform_editor_add_border_for_nested_panel') &&
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    panelStylesMixin_fg_platform_editor_add_border_for_nested_panel, fg('platform_editor_nested_dnd_styles_changes') &&
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    panelStylesMixin_fg_platform_editor_nested_dnd_styles_changes, fg('platform_editor_lcm_nested_panel_icon_fix') ?
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    panelStylesMixin_fg_platform_editor_lcm_nested_panel_icon_fix :
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    panelStylesMixin_without_fg_platform_editor_lcm_nested_panel_icon_fix,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    mentionsStyles,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    tasksAndDecisionsStyles,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    gridStyles,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    blockMarksStyles,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    dateStyles,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    extensionStyles,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    expandStyles, fg('platform_editor_nested_dnd_styles_changes') ?
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    expandStylesMixin_fg_platform_editor_nested_dnd_styles_changes :
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    expandStylesMixin_without_fg_platform_editor_nested_dnd_styles_changes,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    fg('platform-visual-refresh-icons') && expandStylesMixin_fg_platform_visual_refresh_icons,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    findReplaceStyles,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    textHighlightStyle,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    decisionStyles, editorExperiment('platform_editor_vanilla_dom', true, {
+      exposure: false
+    }) &&
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    vanillaTaskItemStyles, editorExperiment('platform_editor_vanilla_dom', true, {
+      exposure: false
+    }) &&
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    vanillaDecisionStyles, editorExperiment('platform_editor_vanilla_dom', true, {
+      exposure: false
+    }) && fg('platform-visual-refresh-icons') &&
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    vanillaDecisionIconWithVisualRefresh, editorExperiment('platform_editor_vanilla_dom', true, {
+      exposure: false
+    }) && !fg('platform-visual-refresh-icons') &&
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    vanillaDecisionIconWithoutVisualRefresh,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    statusStyles, fg('platform-component-visual-refresh') ?
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    statusStylesMixin_fg_platform_component_visual_refresh :
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    statusStylesMixin_without_fg_platform_component_visual_refresh,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    editorExperiment('platform_editor_vanilla_dom', true) && vanillaStatusStyles, editorExperiment('platform_editor_vanilla_dom', true) && fg('platform-component-visual-refresh') &&
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    vanillaStatusStylesMixin_fg_platform_component_visual_refresh, editorExperiment('platform_editor_vanilla_dom', true) && !fg('platform-component-visual-refresh') &&
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    vanillaStatusStylesMixin_without_fg_platform_component_visual_refresh,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    annotationStyles,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    smartCardStyles,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    embedCardStyles,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    unsupportedStyles,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    resizerStyles,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
     layoutBaseStyles,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
@@ -279,7 +290,17 @@ var EditorContentContainer = /*#__PURE__*/React.forwardRef(function (props, ref)
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
     layoutSelectedStylesForViewNotAdvanced, viewMode === 'view' && editorExperiment('advanced_layouts', true) &&
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
-    layoutResponsiveStylesForView, isComment && commentEditorStyles, isFullPage && fullPageEditorStyles, isFullPage && scrollbarStyles, fg('platform_editor_ssr_fix_lists') && listLayoutShiftFix, fg('platform_editor_nested_dnd_styles_changes') ?
+    layoutResponsiveStylesForView,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    isComment && commentEditorStyles,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    isComment && tableCommentEditorStyles,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    isFullPage && fullPageEditorStyles,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    isFullPage && scrollbarStyles,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    fg('platform_editor_ssr_fix_lists') && listLayoutShiftFix, fg('platform_editor_nested_dnd_styles_changes') ?
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
     firstCodeBlockWithNoMargin :
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
@@ -299,14 +320,28 @@ var EditorContentContainer = /*#__PURE__*/React.forwardRef(function (props, ref)
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
     vanillaEmojiStyles :
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
-    reactEmojiStyles, fg('platform_editor_fix_floating_toolbar_focus') && firstFloatingToolbarButtonStyles],
+    reactEmojiStyles,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    panelViewStyles,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    mediaGroupStyles,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    mediaAlignmentStyles,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    tableLayoutFixes,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    hyperLinkFloatingToolbarStyles,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    !fg('platform-visual-refresh-icons') && 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(editorFontSize({
         theme: theme
-      }), "px")
+      }), "px"),
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+      '--ak-editor--large-gutter-padding': "".concat(akEditorGutterPaddingDynamic(), "px")
     }
   }, children);
 });

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

@@ -0,0 +1,46 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
+import { css } from '@emotion/react';
+
+// = 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
+export var baseStyles = css(_defineProperty({
+  '--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")
+  }
+}));

package/dist/esm/ui/EditorContentContainer/styles/commentEditorStyles.js

@@ -0,0 +1,25 @@
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
+import { css } from '@emotion/react';
+var CommentEditorMargin = 14;
+var GRID_GUTTER = 12;
+
+// Originally copied from packages/editor/editor-core/src/ui/Appearance/Comment/Comment.tsx
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
+export 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)"
+});

package/dist/esm/ui/EditorContentContainer/styles/cursorStyles.js

@@ -0,0 +1,14 @@
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
+import { css } from '@emotion/react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
+export var cursorStyles = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+  '.ProseMirror.ProseMirror-focused:has(.ProseMirror-mark-boundary-cursor)': {
+    caretColor: 'transparent'
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+  '.ProseMirror:not(.ProseMirror-focused) .ProseMirror-mark-boundary-cursor': {
+    display: 'none'
+  }
+});