@atlaskit/editor-core 207.15.1 → 207.16.0

package/dist/es2019/ui/EditorContentContainer/EditorContentContainer.js

@@ -12,14 +12,11 @@ import { css, jsx, useTheme } from '@emotion/react';
 import { browser } from '@atlaskit/editor-common/browser';
 import { gapCursorStyles } from '@atlaskit/editor-common/selection';
 import { GRID_GUTTER } from '@atlaskit/editor-common/styles';
-import { placeholderTextStyles } from '@atlaskit/editor-plugins/placeholder-text/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 { 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 { expandStyles } from '../ContentStyles/expand';
 import { extensionStyles } from '../ContentStyles/extension';
 import { panelStyles } from '../ContentStyles/panel';
 import { statusStyles, vanillaStatusStyles } from '../ContentStyles/status';
@@ -34,16 +31,19 @@ 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 { findReplaceStyles } from './styles/findReplaceStyles';
 import { firstBlockNodeStyles } from './styles/firstBlockNodeStyles';
 import { gridStyles } from './styles/gridStyles';
 import { indentationStyles } from './styles/indentationStyles';
+import { InlineNodeViewSharedStyles } from './styles/inlineNodeViewSharedStyles';
 import { layoutBaseStyles, layoutViewStyles } from './styles/layout';
 import { linkStyles, linkStylesOld } from './styles/link';
 import { listsStyles, listsStylesSafariFix } from './styles/list';
 import { mediaStyles } from './styles/mediaStyles';
 import { mentionsStyles, vanillaMentionsStyles, vanillaMentionsSelectionStyles } from './styles/mentions';
 import { paragraphStylesOld, paragraphStylesUGCModernized, paragraphStylesUGCRefreshed } from './styles/paragraphStyles';
+import { placeholderTextStyles } from './styles/placeholderTextStyles';
 import { resizerStyles, pragmaticResizerStyles } from './styles/resizerStyles';
 import { ruleStyles } from './styles/rule';
 import { shadowStyles } from './styles/shadowStyles';
@@ -252,7 +252,10 @@ fg('platform_editor_typography_ugc') && /* eslint-disable @atlaskit/platform/ens
 
   ${extensionStyles}
 
-  ${expandStyles()}
+  ${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}
 
@@ -423,6 +426,14 @@ const listLayoutShiftFix = css({
   }
 });
 
+// Make sure the first floating toolbar button has focus ring when focused via .focus()
+const firstFloatingToolbarButtonStyles = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  'button.first-floating-toolbar-button:focus': {
+    outline: `2px solid ${"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.
@@ -500,7 +511,7 @@ const EditorContentContainer = /*#__PURE__*/React.forwardRef((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],
+    reactEmojiStyles, fg('platform_editor_fix_floating_toolbar_focus') && firstFloatingToolbarButtonStyles],
     "data-editor-scroll-container": isScrollable ? 'true' : undefined,
     "data-testid": "editor-content-container",
     style: {

package/dist/es2019/ui/EditorContentContainer/styles/expandStyles.js

@@ -0,0 +1,256 @@
+// 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 const expandStyles = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.ak-editor-expand__icon > div': {
+    display: 'flex'
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.ak-editor-expand': {
+    // sharedExpandStyles.containerStyles({ expanded: false, focused: false })(),
+    borderWidth: '1px',
+    borderStyle: 'solid',
+    borderColor: 'transparent',
+    borderRadius: "var(--ds-border-radius-100, 4px)",
+    minHeight: '25px',
+    background: "var(--ds-background-neutral-subtle, transparent)",
+    margin: `${"var(--ds-space-050, 0.25rem)"} 0 0`,
+    transition: 'background 0.3s cubic-bezier(0.15, 1, 0.3, 1), border-color 0.3s cubic-bezier(0.15, 1, 0.3, 1)',
+    padding: "var(--ds-space-100, 8px)",
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+    'td > :not(style):first-child, td > style:first-child + *': {
+      marginTop: 0
+    },
+    cursor: 'pointer',
+    boxSizing: 'border-box',
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+    'td > &': {
+      marginTop: 0
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '.ak-editor-expand__icon-container svg': {
+      color: "var(--ds-icon-subtle, #626F86)",
+      transform: 'rotate(90deg)'
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '&.ak-editor-selected-node:not(.danger)': {
+      // SelectionStyle.Blanket
+      position: 'relative',
+      // Fixes ED-9263, where emoji or inline card in panel makes selection go outside the panel
+      // in Safari. Looks like it's caused by user-select: all in the emoji element
+      '-webkit-user-select': 'text',
+      '&::before': {
+        position: 'absolute',
+        content: "''",
+        left: 0,
+        right: 0,
+        top: 0,
+        bottom: 0,
+        width: '100%',
+        pointerEvents: 'none',
+        zIndex: 12,
+        // akEditorStickyheaderZIndex (11) + 1
+        backgroundColor: "var(--ds-blanket-selected, #388BFF14)"
+      },
+      // SelectionStyle.Border (common case)
+      border: `1px solid ${"var(--ds-border-selected, #0C66E4)"}`,
+      // If fg('platform_editor_nested_dnd_styles_changes') is true,
+      // then we'll also need the rest of the selection styles for blanket
+
+      // hideNativeBrowserTextSelectionStyles
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+      '&::selection, *::selection': {
+        backgroundColor: 'transparent'
+      },
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+      '&::-moz-selection, *::-moz-selection': {
+        backgroundColor: 'transparent'
+      }
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '&.danger': {
+      background: "var(--ds-background-danger, #FFECEB)",
+      borderColor: "var(--ds-border-danger, #E2483D)"
+    }
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.ProseMirror > .ak-editor-expand__type-expand, .fabric-editor-breakout-mark-dom > .ak-editor-expand__type-expand': {
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
+    marginLeft: '-12px',
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
+    marginRight: '-12px'
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.ak-editor-expand__content': {
+    // sharedExpandStyles.contentStyles({ expanded: false, focused: false })(),
+    paddingTop: "var(--ds-space-0, 0px)",
+    paddingRight: "var(--ds-space-100, 8px)",
+    paddingLeft: "var(--ds-space-300, 24px)",
+    marginLeft: "var(--ds-space-050, 4px)",
+    display: 'flow-root',
+    /* The follow rules inside @supports block are added as a part of ED-8893
+    	The fix is targeting mobile bridge on iOS 12 or below,
+    	We should consider remove this fix when we no longer support iOS 12 */
+    '@supports not (display: flow-root)': {
+      width: '100%',
+      boxSizing: 'border-box'
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '.expand-content-wrapper, .nestedExpand-content-wrapper': {
+      /* We visually hide the content here to preserve the content during copy+paste */
+      /* Do not add text nowrap here because inline comment navigation depends on the location of the text */
+      width: '100%',
+      display: 'block',
+      height: 0,
+      overflow: 'hidden',
+      clip: 'rect(1px, 1px, 1px, 1px)',
+      userSelect: 'none'
+    },
+    cursor: 'text'
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.ak-editor-expand__title-input': {
+    // sharedExpandStyles.titleInputStyles(),
+    outline: 'none',
+    border: 'none',
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+    fontSize: 'calc(14rem / 16)',
+    // relativeFontSizeToBase16(14),
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+    lineHeight: 1.714,
+    // If fg('platform-visual-refresh-icons') then this needs to be overridden
+    fontWeight: "var(--ds-font-weight-regular, 400)",
+    color: "var(--ds-text-subtlest, #626F86)",
+    background: 'transparent',
+    display: 'flex',
+    flex: 1,
+    padding: `0 0 0 ${"var(--ds-space-050, 4px)"}`,
+    width: '100%',
+    '&::placeholder': {
+      opacity: 1,
+      color: "var(--ds-text-subtlest, #626F86)"
+    }
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.ak-editor-expand__title-container': {
+    // sharedExpandStyles.titleContainerStyles(),
+    padding: 0,
+    display: 'flex',
+    // Omitting alignItems: 'flex-start' as it would be overridden
+    background: 'none',
+    border: 'none',
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+    fontSize: 'calc(14rem / 16)',
+    // relativeFontSizeToBase16(14),
+    width: '100%',
+    color: "var(--ds-text-subtle, #44546F)",
+    // Omitting overflow: 'hidden' as it would be overridden
+    cursor: 'pointer',
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '&:focus': {
+      outline: 0
+    },
+    alignItems: 'center',
+    overflow: 'visible'
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.ak-editor-expand__expanded': {
+    background: "var(--ds-background-neutral-subtle, #00000000)",
+    borderColor: "var(--ds-border, #091E4224)",
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '.ak-editor-expand__content': {
+      paddingTop: "var(--ds-space-100, 8px)"
+      // If fg('platform_editor_nested_dnd_styles_changes') then this needs to be extended
+    }
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.ak-editor-expand__input-container': {
+    width: '100%'
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+  '.ak-editor-expand:not(.ak-editor-expand__expanded)': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '.ak-editor-expand__content': {
+      position: 'absolute',
+      height: '1px',
+      width: '1px',
+      overflow: 'hidden',
+      clip: 'rect(1px, 1px, 1px, 1px)',
+      whiteSpace: 'nowrap'
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '.ak-editor-expand__icon-container svg': {
+      color: "var(--ds-icon-subtle, #626F86)",
+      transform: 'rotate(0deg)'
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '&:not(.ak-editor-selected-node):not(.danger)': {
+      background: 'transparent',
+      borderColor: 'transparent',
+      '&:hover': {
+        borderColor: "var(--ds-border, #091E4224)",
+        background: "var(--ds-background-neutral-subtle, #00000000)"
+      }
+    }
+  }
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
+export const expandStylesMixin_fg_platform_visual_refresh_icons = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.ak-editor-expand__title-input': {
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+    lineHeight: 1
+  }
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
+export const expandStylesMixin_fg_platform_editor_nested_dnd_styles_changes = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.ak-editor-content-area.appearance-full-page .ProseMirror > .ak-editor-expand__type-expand, .fabric-editor-breakout-mark-dom > .ak-editor-expand__type-expand': {
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
+    marginLeft: '-20px',
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
+    marginRight: '-20px'
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.ak-editor-expand__expanded': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '.ak-editor-expand__content': {
+      // firstNodeWithNotMarginTop
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+      '> :nth-child(1 of :not(style, .ProseMirror-gapcursor, .ProseMirror-widget, span))': {
+        marginTop: 0
+      },
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+      '> div.ak-editor-expand[data-node-type="nestedExpand"]': {
+        marginTop: "var(--ds-space-050, 0.25rem)"
+      }
+    }
+  }
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
+export const expandStylesMixin_without_fg_platform_editor_nested_dnd_styles_changes = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.ak-editor-expand': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '&.ak-editor-selected-node:not(.danger)': {
+      // SelectionStyle.Border (with fg('platform_editor_nested_dnd_styles_changes'))
+      // Fixes ED-15246: Trello card is visible through a border of a table border
+      '&::after': {
+        height: '100%',
+        content: "'\\00a0'",
+        background: "var(--ds-border-selected, #0C66E4)",
+        position: 'absolute',
+        right: '-1px',
+        top: 0,
+        bottom: 0,
+        width: '1px',
+        border: 'none',
+        display: 'inline-block'
+      }
+    }
+  }
+});

package/dist/es2019/ui/EditorContentContainer/styles/inlineNodeViewSharedStyles.js

@@ -0,0 +1,40 @@
+// 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 const InlineNodeViewSharedStyles = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.inlineNodeView': {
+    display: 'inline',
+    userSelect: 'all',
+    whiteSpace: 'nowrap',
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '& > *:not(.zeroWidthSpaceContainer)': {
+      whiteSpace: 'pre-wrap'
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '& > .assistive': {
+      userSelect: 'none'
+    }
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '&.ua-safari': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '.inlineNodeView': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+      '&::selection, *::selection': {
+        background: 'transparent'
+      }
+    }
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '&.ua-chrome .inlineNodeView > span': {
+    userSelect: 'none'
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.inlineNodeViewAddZeroWidthSpace': {
+    '&::after': {
+      content: "'\u200b'" // ZERO_WIDTH_SPACE
+    }
+  }
+});

package/dist/es2019/ui/EditorContentContainer/styles/placeholderTextStyles.js

@@ -0,0 +1,65 @@
+// 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 const placeholderTextStyles = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.ProseMirror span[data-placeholder]': {
+    color: "var(--ds-text-subtlest, #626F86)",
+    display: 'inline'
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.ProseMirror span.pm-placeholder': {
+    display: 'inline',
+    color: "var(--ds-text-subtlest, #626F86)"
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.ProseMirror span.pm-placeholder__text': {
+    display: 'inline',
+    color: "var(--ds-text-subtlest, #626F86)"
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.ProseMirror span.pm-placeholder.ak-editor-selected-node': {
+    // ...backgroundSelectionStyles
+    backgroundColor: "var(--ds-background-selected, #E9F2FF)",
+    // ...backgroundSelectionStyles -> hideNativeBrowserTextSelectionStyles
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '&::selection,*::selection': {
+      backgroundColor: 'transparent'
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors, @atlaskit/ui-styling-standard/no-nested-selectors
+    '&::-moz-selection,*::-moz-selection': {
+      backgroundColor: 'transparent'
+    }
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.ProseMirror span.pm-placeholder__text[data-placeholder]::after': {
+    color: "var(--ds-text-subtlest, #626F86)",
+    cursor: 'text',
+    content: 'attr(data-placeholder)',
+    display: 'inline'
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.ProseMirror': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '.ProseMirror-fake-text-cursor': {
+      display: 'inline',
+      pointerEvents: 'none',
+      position: 'relative'
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '.ProseMirror-fake-text-cursor::after': {
+      content: '""',
+      display: 'inline',
+      top: 0,
+      position: 'absolute',
+      borderRight: `1px solid ${"var(--ds-border, #091E4224)"}`
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '.ProseMirror-fake-text-selection': {
+      display: 'inline',
+      pointerEvents: 'none',
+      position: 'relative',
+      backgroundColor: "var(--ds-background-selected, #B3D4FF)"
+    }
+  }
+});

package/dist/es2019/version-wrapper.js

@@ -1,2 +1,2 @@
 export const name = "@atlaskit/editor-core";
-export const version = "207.15.1";
+export const version = "207.16.0";

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

@@ -129,6 +129,14 @@ var placeholderWrapStyles = css({
 });
 var firstBlockNodeStylesNew = 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-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);
 
+// 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)")
+  }
+});
+
 // The breakpoint for small devices is 1266px, copied from getBreakpoint in platform/packages/editor/editor-common/src/ui/WidthProvider/index.tsx
 var akEditorBreakpointForSmallDevice = "1266px";
 
@@ -137,9 +145,9 @@ var akEditorBreakpointForSmallDevice = "1266px";
 // 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(_templateObject9 || (_templateObject9 = _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.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\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({
+  return css(_templateObject9 || (_templateObject9 = _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.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\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\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('platform_editor_hide_cursor_when_pm_hideselection') ? css(_templateObject0 || (_templateObject0 = _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(_templateObject1 || (_templateObject1 = _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, {
+  }), whitespaceSharedStyles, paragraphSharedStyles(props.typographyTheme), listsSharedStyles, indentationSharedStyles, shadowSharedStyle, InlineNodeViewSharedStyles, fg('platform_editor_hide_cursor_when_pm_hideselection') ? css(_templateObject0 || (_templateObject0 = _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(_templateObject1 || (_templateObject1 = _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)", fg('platform_editor_fix_floating_toolbar_focus') ? firstFloatingToolbarButtonStyles : null, 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

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

@@ -14,14 +14,11 @@ import { css, jsx, useTheme } from '@emotion/react';
 import { browser } from '@atlaskit/editor-common/browser';
 import { gapCursorStyles } from '@atlaskit/editor-common/selection';
 import { GRID_GUTTER } from '@atlaskit/editor-common/styles';
-import { placeholderTextStyles } from '@atlaskit/editor-plugins/placeholder-text/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 { 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 { expandStyles } from '../ContentStyles/expand';
 import { extensionStyles } from '../ContentStyles/extension';
 import { panelStyles } from '../ContentStyles/panel';
 import { statusStyles, vanillaStatusStyles } from '../ContentStyles/status';
@@ -36,16 +33,19 @@ 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 { findReplaceStyles } from './styles/findReplaceStyles';
 import { firstBlockNodeStyles } from './styles/firstBlockNodeStyles';
 import { gridStyles } from './styles/gridStyles';
 import { indentationStyles } from './styles/indentationStyles';
+import { InlineNodeViewSharedStyles } from './styles/inlineNodeViewSharedStyles';
 import { layoutBaseStyles, layoutViewStyles } from './styles/layout';
 import { linkStyles, linkStylesOld } from './styles/link';
 import { listsStyles, listsStylesSafariFix } from './styles/list';
 import { mediaStyles } from './styles/mediaStyles';
 import { mentionsStyles, vanillaMentionsStyles, vanillaMentionsSelectionStyles } from './styles/mentions';
 import { paragraphStylesOld, paragraphStylesUGCModernized, paragraphStylesUGCRefreshed } from './styles/paragraphStyles';
+import { placeholderTextStyles } from './styles/placeholderTextStyles';
 import { resizerStyles, pragmaticResizerStyles } from './styles/resizerStyles';
 import { ruleStyles } from './styles/rule';
 import { shadowStyles } from './styles/shadowStyles';
@@ -97,7 +97,7 @@ 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  ", "\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\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,
+  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  ", "\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\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
@@ -105,7 +105,7 @@ var contentStyles = function contentStyles() {
   // 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(), mentionsStyles, tasksAndDecisionsStyles, gridStyles, blockMarksStyles, dateStyles, extensionStyles, expandStyles(), findReplaceStyles, textHighlightStyle, decisionStyles, editorExperiment('platform_editor_vanilla_dom', true, {
+  /* 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(), 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
@@ -181,6 +181,14 @@ var listLayoutShiftFix = css({
   }
 });
 
+// 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.
@@ -255,7 +263,7 @@ 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],
+    reactEmojiStyles, fg('platform_editor_fix_floating_toolbar_focus') && firstFloatingToolbarButtonStyles],
     "data-editor-scroll-container": isScrollable ? 'true' : undefined,
     "data-testid": "editor-content-container",
     style: {