@atlaskit/editor-core 208.3.4 → 208.3.6

package/dist/es2019/ui/Appearance/FullPage/CustomToolbarWrapper.js

@@ -0,0 +1,103 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import React from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { css, jsx } from '@emotion/react';
+import { componentWithCondition } from '@atlaskit/platform-feature-flags-react';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
+import { mainToolbarFirstChildStyle, mainToolbarSecondChildStyle } from './MainToolbar';
+// Pre-computed static styles for first- and second-child wrappers.
+// These contain no runtime logic and are safe for static-emotion mode.
+
+const firstChildStaticBase = css({
+  display: 'flex',
+  flexGrow: 1
+});
+
+// we can't avoid some kind of function call here, so we need to disable the rule
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+const firstChildStaticTwoLine = css({
+  '@media (max-width: 868px)': {
+    flex: '1 1 100%',
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+    height: 'var(--ak-editor-fullpage-toolbar-height)',
+    justifyContent: 'flex-end',
+    minWidth: 'fit-content'
+  }
+});
+const secondChildStaticBase = css({
+  minWidth: 'fit-content'
+});
+
+// we can't avoid some kind of function call here, so we need to disable the rule
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+const secondChildStaticTwoLine = css({
+  '@media (max-width: 868px)': {
+    display: 'flex',
+    flexGrow: 1,
+    flex: '1 1 100%',
+    margin: 'auto',
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+    height: 'var(--ak-editor-fullpage-toolbar-height)',
+    minWidth: 0
+  }
+});
+
+// ---------------- First child wrapper ----------------
+const FirstChildWrapperStatic = ({
+  twoLineEditorToolbar,
+  children,
+  role,
+  'aria-label': ariaLabel,
+  'data-testid': testId
+}) => jsx("div", {
+  css: [firstChildStaticBase, twoLineEditorToolbar && firstChildStaticTwoLine],
+  role: role,
+  "aria-label": ariaLabel,
+  "data-testid": testId
+}, children);
+const FirstChildWrapperDynamic = ({
+  twoLineEditorToolbar,
+  children,
+  role,
+  'aria-label': ariaLabel,
+  'data-testid': testId
+}) => jsx("div", {
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/design-system/consistent-css-prop-usage
+  css: mainToolbarFirstChildStyle(twoLineEditorToolbar),
+  role: role,
+  "aria-label": ariaLabel,
+  "data-testid": testId
+}, children);
+export const MainToolbarForFirstChildWrapper = componentWithCondition(() => expValEquals('platform_editor_core_static_emotion_non_central', 'isEnabled', true), FirstChildWrapperStatic, FirstChildWrapperDynamic);
+
+// ---------------- Second child wrapper ----------------
+const SecondChildWrapperStatic = ({
+  twoLineEditorToolbar,
+  children,
+  role,
+  'aria-label': ariaLabel,
+  'data-testid': testId
+}) => jsx("div", {
+  css: [secondChildStaticBase, twoLineEditorToolbar && secondChildStaticTwoLine],
+  role: role,
+  "aria-label": ariaLabel,
+  "data-testid": testId
+}, children);
+const SecondChildWrapperDynamic = ({
+  twoLineEditorToolbar,
+  children,
+  role,
+  'aria-label': ariaLabel,
+  'data-testid': testId
+}) => jsx("div", {
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/design-system/consistent-css-prop-usage
+  css: mainToolbarSecondChildStyle(twoLineEditorToolbar),
+  role: role,
+  "aria-label": ariaLabel,
+  "data-testid": testId
+}, children);
+export const MainToolbarForSecondChildWrapper = componentWithCondition(() => expValEquals('platform_editor_core_static_emotion_non_central', 'isEnabled', true), SecondChildWrapperStatic, SecondChildWrapperDynamic);

package/dist/es2019/ui/Appearance/FullPage/FullPage.js

@@ -10,6 +10,7 @@ import { browser } from '@atlaskit/editor-common/browser';
 import { sharedPluginStateHookMigratorFactory, useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { ContextPanelWidthProvider } from '@atlaskit/editor-common/ui';
 import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
+import { FULL_PAGE_EDITOR_TOOLBAR_HEIGHT } from '@atlaskit/editor-shared-styles';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { getPrimaryToolbarComponents } from '../../Toolbar/getPrimaryToolbarComponents';
@@ -148,7 +149,11 @@ export const FullPageEditor = props => {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     ,
     className: "akEditor",
-    ref: wrapperElementRef
+    ref: wrapperElementRef,
+    style: {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+      '--ak-editor-fullpage-toolbar-height': FULL_PAGE_EDITOR_TOOLBAR_HEIGHT()
+    }
   }, !isEditorToolbarHidden && jsx(FullPageToolbar, {
     appearance: props.appearance,
     editorAPI: editorAPI,

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

@@ -15,7 +15,9 @@ import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { ToolbarPortalMountPoint, useToolbarPortal } from '../../Toolbar/ToolbarPortal';
 import { ToolbarWithSizeDetector as Toolbar } from '../../Toolbar/ToolbarWithSizeDetector';
 import { BeforePrimaryToolbarWrapper } from './BeforeWrapper';
-import { customToolbarWrapperStyle, mainToolbarFirstChildStyle, mainToolbarIconBeforeStyle, mainToolbarSecondChildStyle, mainToolbarStyle, MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT, nonCustomToolbarWrapperStyle } from './MainToolbar';
+import { MainToolbarForFirstChildWrapper, MainToolbarForSecondChildWrapper } from './CustomToolbarWrapper';
+import { customToolbarWrapperStyle, mainToolbarIconBeforeStyle, MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT, nonCustomToolbarWrapperStyle } from './MainToolbar';
+import { MainToolbarWrapper } from './MainToolbarWrapper';
 export const EditorToolbar = /*#__PURE__*/React.memo(props => {
   var _props$primaryToolbar, _useToolbarPortal, _props$customPrimaryT;
   const [shouldSplitToolbar, setShouldSplitToolbar] = useState(false);
@@ -118,18 +120,16 @@ export const EditorToolbar = /*#__PURE__*/React.memo(props => {
     isShortcutToFocusToolbar: isShortcutToFocusToolbar,
     handleEscape: handleEscape,
     intl: props.intl
-  }, jsx(ToolbarPortal, null, jsx("div", {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
-    css: mainToolbarStyle(props.showKeyline || contextPanelWidth > 0, twoLineEditorToolbar),
+  }, jsx(ToolbarPortal, null, jsx(MainToolbarWrapper, {
+    showKeyline: props.showKeyline || contextPanelWidth > 0,
+    twoLineEditorToolbar: twoLineEditorToolbar,
     "data-testid": "ak-editor-main-toolbar"
-  }, jsx("div", {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
-    css: mainToolbarFirstChildStyle(twoLineEditorToolbar),
+  }, jsx(MainToolbarForFirstChildWrapper, {
+    twoLineEditorToolbar: twoLineEditorToolbar,
     role: "toolbar",
     "aria-label": props.intl.formatMessage(messages.toolbarLabel)
-  }, shouldSplitToolbar ? customToolbar : nonCustomToolbar), jsx("div", {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
-    css: mainToolbarSecondChildStyle(twoLineEditorToolbar),
+  }, shouldSplitToolbar ? customToolbar : nonCustomToolbar), jsx(MainToolbarForSecondChildWrapper, {
+    twoLineEditorToolbar: twoLineEditorToolbar,
     "data-testid": "avatar-group-outside-plugin",
     role: "region",
     "aria-label": props.intl.formatMessage(messages.pageActionsLabel)

package/dist/es2019/ui/Appearance/FullPage/MainToolbarWrapper.js

@@ -0,0 +1,92 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import React from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { css, jsx } from '@emotion/react';
+import { akEditorFloatingDialogZIndex, akEditorSwoopCubicBezier } from '@atlaskit/editor-shared-styles';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { componentWithCondition } from '@atlaskit/platform-feature-flags-react';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
+import { mainToolbarStyle as mainToolbarStyleDynamic, MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT } from './MainToolbar';
+
+// Base styles that don't depend on feature flags
+const baseToolbarStyles = css({
+  position: 'relative',
+  alignItems: 'center',
+  boxShadow: 'none',
+  borderBottom: `1px solid ${"var(--ds-border, #091E4224)"}`,
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
+  transition: `box-shadow 200ms ${akEditorSwoopCubicBezier}`,
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
+  zIndex: akEditorFloatingDialogZIndex,
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
+  display: 'flex',
+  height: 'var(--ak-editor-fullpage-toolbar-height)',
+  flexShrink: 0,
+  backgroundColor: "var(--ds-surface, #FFFFFF)",
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '& object': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
+    height: '0 !important'
+  }
+});
+const flexibleIconSize = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '& span svg': {
+    maxWidth: '100%'
+  }
+});
+// box-shadow is overriden by the mainToolbar
+const mainToolbarWithKeyline = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  boxShadow: `${"var(--ds-shadow-overflow, 0px 0px 8px #091E4228, 0px 0px 1px #091E421e)"}`
+});
+const mainToolbarTwoLineStyle = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+  [`@media (max-width: ${MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT}px)`]: {
+    flexWrap: 'wrap',
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+    height: `calc(var(--ak-editor-fullpage-toolbar-height) * 2)`
+  }
+});
+const MainToolbarWrapperNext = ({
+  showKeyline,
+  twoLineEditorToolbar,
+  children,
+  'data-testid': testId
+}) => {
+  return jsx("div", {
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+    css: [baseToolbarStyles, fg('platform-visual-refresh-icons') && flexibleIconSize, showKeyline && mainToolbarWithKeyline, twoLineEditorToolbar && mainToolbarTwoLineStyle],
+    "data-testid": testId
+  }, children);
+};
+
+/**
+ * Original version of the toolbar wrapper using dynamic styles
+ */
+const MainToolbarWrapperOld = ({
+  showKeyline,
+  twoLineEditorToolbar,
+  children,
+  'data-testid': testId
+}) => {
+  return jsx("div", {
+    css:
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values
+    mainToolbarStyleDynamic(showKeyline, twoLineEditorToolbar),
+    "data-testid": testId
+  }, children);
+};
+
+/**
+ * Wrapper component for the main toolbar that handles feature flag based styling
+ * @example
+ * <MainToolbarWrapper showKeyline={true} twoLineEditorToolbar={false}>
+ *   <ToolbarContent />
+ * </MainToolbarWrapper>
+ */
+export const MainToolbarWrapper = componentWithCondition(() => expValEquals('platform_editor_core_static_emotion_non_central', 'isEnabled', true), MainToolbarWrapperNext, MainToolbarWrapperOld);

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

@@ -19,11 +19,12 @@ import { PanelSharedCssClassName } from '@atlaskit/editor-common/panel';
 import { gapCursorStyles } from '@atlaskit/editor-common/selection';
 import { CodeBlockSharedCssClassName, MediaSharedClassNames, SmartCardSharedCssClassName, annotationSharedStyles, backgroundColorStyles, blockMarksSharedStyles, codeBlockInListSafariFix, codeMarkSharedStyles, dateSharedStyle, embedCardStyles, expandClassNames, getSmartCardSharedStyles, gridStyles, indentationSharedStyles, linkSharedStyle, listsSharedStyles, paragraphSharedStyles, resizerStyles, pragmaticResizerStyles, pragmaticStylesLayoutFirstNodeResizeHandleFix, pragmaticResizerStylesForTooltip, ruleSharedStyles, shadowSharedStyle, smartCardSharedStyles, smartCardStyles, tasksAndDecisionsStyles, textColorStyles, unsupportedStyles, whitespaceSharedStyles } from '@atlaskit/editor-common/styles';
 import { blocktypeStyles } from '@atlaskit/editor-plugins/block-type/styles';
-import { findReplaceStyles } from '@atlaskit/editor-plugins/find-replace/styles';
+import { findReplaceStyles, findReplaceStylesNew } from '@atlaskit/editor-plugins/find-replace/styles';
 import { textHighlightStyle } from '@atlaskit/editor-plugins/paste-options-toolbar/styles';
 import { placeholderTextStyles, placeholderTextStyles_fg_platform_editor_system_fake_text_highlight_colour } from '@atlaskit/editor-plugins/placeholder-text/styles';
 import { SelectionStyle, akEditorCalculatedWideLayoutWidth, akEditorCalculatedWideLayoutWidthSmallViewport, akEditorDefaultLayoutWidth, akEditorDeleteBackgroundWithOpacity, akEditorDeleteBorder, akEditorFullWidthLayoutWidth, akEditorGutterPadding, akEditorGutterPaddingDynamic, akEditorSelectedBorderColor, akEditorSelectedBorderSize, akEditorSelectedNodeClassName, blockNodesVerticalMargin, editorFontSize, getSelectionStyles } from '@atlaskit/editor-shared-styles';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { useThemeObserver } from '@atlaskit/tokens';
 import { InlineNodeViewSharedStyles } from '../../nodeviews/getInlineNodeViewProducer.styles';
@@ -60,13 +61,17 @@ const ruleStyles = () => css`
 		}
 	}
 `;
-const vanillaMentionsStyles = css({
+const mentionNodeStyles = css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '.editor-mention-primitive': {
     display: 'inline',
     borderRadius: '20px',
     cursor: 'pointer',
     padding: '0 0.3em 2px 0.23em',
+    // To match `packages/elements/mention/src/components/Mention/PrimitiveMention.tsx` implementation
+    // we match the line height exactly
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+    lineHeight: '1.714',
     fontWeight: "var(--ds-font-weight-regular, 400)",
     wordBreak: 'break-word',
     background: "var(--ds-background-neutral, #091E420F)",
@@ -386,7 +391,7 @@ const legacyContentStyles = props => css`
 		display: none;
 	}
 
-	${fg('platform_editor_fix_floating_toolbar_focus') ? firstFloatingToolbarButtonStyles : null}
+	${firstFloatingToolbarButtonStyles}
 	${placeholderTextStyles}
 	${fg('platform_editor_system_fake_text_highlight_colour') && placeholderTextStyles_fg_platform_editor_system_fake_text_highlight_colour}
 	${placeholderStyles}
@@ -407,9 +412,7 @@ const legacyContentStyles = props => css`
   ${gapCursorStyles};
 	${panelStyles()}
 	${mentionsStyles}
-	${editorExperiment('platform_editor_vanilla_dom', true, {
-  exposure: false
-}) && vanillaMentionsStyles}
+	${mentionNodeStyles}
 	${editorExperiment('platform_editor_vanilla_dom', true, {
   exposure: false
 }) && vanillaSelectionStyles}
@@ -424,12 +427,10 @@ const legacyContentStyles = props => css`
   ${dateSharedStyle}
   ${extensionStyles}
   ${expandStyles()}
-  ${findReplaceStyles}
+  ${expValEqualsNoExposure('platform_editor_find_and_replace_improvements', 'isEnabled', true) ? findReplaceStylesNew : findReplaceStyles}
   ${textHighlightStyle}
   ${taskDecisionStyles}
-  ${editorExperiment('platform_editor_vanilla_dom', true, {
-  exposure: false
-}) && vanillaTaskItemStyles}
+  ${vanillaTaskItemStyles}
   ${editorExperiment('platform_editor_vanilla_dom', true, {
   exposure: false
 }) && vanillaDecisionStyles}

package/dist/es2019/ui/ContentStyles/tasks-and-decisions.js

@@ -171,7 +171,7 @@ export const vanillaTaskItemStyles = css({
     display: 'none'
   },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
-  '[data-prosemirror-node-view-type="vanilla"][data-prosemirror-node-name="taskItem"]:has([data-empty]):not(:has([data-type-ahead])) [data-component="placeholder"]': {
+  "[data-prosemirror-node-view-type='vanilla'][data-prosemirror-node-name='taskItem']:has([data-empty]):not(:has([data-type-ahead])) [data-component='placeholder']": {
     display: 'block'
   },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors

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

@@ -25,12 +25,12 @@ 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 { editorUGCTokensDefault, 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 { findReplaceStyles, findReplaceStylesNew } from './styles/findReplaceStyles';
 import { firstBlockNodeStyles } from './styles/firstBlockNodeStyles';
 import { firstFloatingToolbarButtonStyles } from './styles/floatingToolbarStyles';
 import { fullPageEditorStyles } from './styles/fullPageEditorStyles';
@@ -42,9 +42,9 @@ import { layoutBaseStyles, layoutBaseStylesAdvanced, layoutBaseStylesFixesUnderN
 import { hyperLinkFloatingToolbarStyles, linkLegacyIconStylesFix, linkStyles, linkStylesOld } from './styles/link';
 import { listsStyles, listsStylesSafariFix } from './styles/list';
 import { mediaAlignmentStyles, mediaGroupStyles, mediaStyles } from './styles/mediaStyles';
-import { mentionsStyles, vanillaMentionsSelectionStyles, vanillaMentionsStyles } from './styles/mentions';
+import { mentionsStyles, mentionsSelectionStyles, mentionNodeStyles } from './styles/mentions';
 import { panelStyles, panelStylesMixin, panelStylesMixin_fg_platform_editor_add_border_for_nested_panel, panelStylesMixin_fg_platform_editor_nested_dnd_styles_changes, panelViewStyles } from './styles/panelStyles';
-import { paragraphStylesOld, paragraphStylesUGCModernized, paragraphStylesUGCRefreshed } from './styles/paragraphStyles';
+import { paragraphStylesOld, paragraphStylesUGCRefreshed } from './styles/paragraphStyles';
 import { placeholderOverflowStyles, placeholderStyles, placeholderTextStyles, placeholderTextStylesMixin_fg_platform_editor_system_fake_text_highlight_colour, placeholderWrapStyles } from './styles/placeholderStyles';
 import { pragmaticResizerStyles, pragmaticResizerStylesNew, pragmaticStylesLayoutFirstNodeResizeHandleFix, pragmaticResizerStylesForTooltip, resizerStyles } from './styles/resizerStyles';
 import { ruleStyles } from './styles/rule';
@@ -107,7 +107,7 @@ const EditorContentContainer = /*#__PURE__*/React.forwardRef((props, ref) => {
     // 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,
+    firstFloatingToolbarButtonStyles,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
     placeholderTextStyles, fg('platform_editor_system_fake_text_highlight_colour') &&
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
@@ -121,11 +121,9 @@ const EditorContentContainer = /*#__PURE__*/React.forwardRef((props, ref) => {
     // 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') &&
+    !fg('platform_editor_typography_ugc') && editorUGCTokensDefault, 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,
+    editorUGCTokensRefreshed,
     // 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
@@ -183,15 +181,15 @@ const EditorContentContainer = /*#__PURE__*/React.forwardRef((props, ref) => {
     // 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,
+    fg('platform-visual-refresh-icons') && expandStylesMixin_fg_platform_visual_refresh_icons, expValEqualsNoExposure('platform_editor_find_and_replace_improvements', 'isEnabled', true) ?
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    findReplaceStylesNew :
     // 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
-    }) &&
+    decisionStyles,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
     vanillaTaskItemStyles, editorExperiment('platform_editor_vanilla_dom', true, {
       exposure: false
@@ -263,12 +261,10 @@ const EditorContentContainer = /*#__PURE__*/React.forwardRef((props, ref) => {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
     linkingVisualRefreshV1Styles,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
-    dateVanillaStyles, fg('platform_editor_typography_ugc') ? fg('platform-dst-jira-web-fonts') || fg('confluence_typography_refreshed') || fg('atlas_editor_typography_refreshed') ?
+    dateVanillaStyles, fg('platform_editor_typography_ugc') ?
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
     paragraphStylesUGCRefreshed :
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
-    paragraphStylesUGCModernized :
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
     paragraphStylesOld,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
     fg('platform_editor_hyperlink_underline') ? linkStyles : linkStylesOld,
@@ -313,15 +309,11 @@ const EditorContentContainer = /*#__PURE__*/React.forwardRef((props, ref) => {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
     firstCodeBlockWithNoMarginOld,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
-    firstBlockNodeStyles, editorExperiment('platform_editor_vanilla_dom', true, {
-      exposure: false
-    }) &&
+    firstBlockNodeStyles,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
-    vanillaMentionsStyles, editorExperiment('platform_editor_vanilla_dom', true, {
-      exposure: false
-    }) &&
+    mentionNodeStyles,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
-    vanillaMentionsSelectionStyles, editorExperiment('platform_editor_vanilla_dom', true, {
+    mentionsSelectionStyles, editorExperiment('platform_editor_vanilla_dom', true, {
       exposure: false
     }) ?
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values

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

@@ -12,4 +12,113 @@ export const findReplaceStyles = css({
   '.selected-search-match': {
     backgroundColor: "var(--ds-background-accent-teal-subtle, #6CC3E0)"
   }
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
+export const findReplaceStylesNew = css({
+  /** Text match styles */
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.search-match': {
+    borderRadius: '3px',
+    backgroundColor: "var(--ds-background-accent-teal-subtlest, #E7F9FF)",
+    boxShadow: `${"var(--ds-shadow-raised, 0 1px 1px 0 rgba(9, 30, 66, 0.25), 0 0 1px 0 rgba(9, 30, 66, 0.31))"}, inset 0 0 0 1px ${"var(--ds-border-input, #8590A2)"}`
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.search-match-selected': {
+    backgroundColor: "var(--ds-background-accent-teal-subtle, #6CC3E0)"
+  },
+  /** Block match styles */
+
+  /** Light mode */
+
+  /** Without node selection */
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.search-match-block': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '[data-smart-link-container="true"], .loader-wrapper>div::after': {
+      boxShadow: `
+			inset 0 0 0 1px ${"var(--ds-background-accent-yellow-subtler-pressed, #E2B203)"},
+			inset 0 0 0 5px ${"var(--ds-background-accent-yellow-subtler, #F8E6A0)"}
+			`
+    }
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.search-match-selected.search-match-block': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '[data-smart-link-container="true"], .loader-wrapper>div::after': {
+      boxShadow: `
+			inset 0 0 0 1px ${"var(--ds-background-accent-yellow-subtler-pressed, #E2B203)"},
+			inset 0 0 0 4px ${"var(--ds-background-accent-yellow-subtlest-pressed, #F5CD47)"}
+			`
+    }
+  },
+  /** With node selection */
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.search-match-block.ak-editor-selected-node': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '.loader-wrapper>div::after': {
+      boxShadow: `
+			inset 0 0 0 1px ${"var(--ds-background-accent-yellow-subtler-pressed, #E2B203)"},
+			inset 0 0 0 5px ${"var(--ds-background-accent-yellow-subtler, #F8E6A0)"},
+			0 0 0 1px ${"var(--ds-border-selected, #0C66E4)"}
+			`
+    }
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.search-match-selected.search-match-block.ak-editor-selected-node': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '[data-smart-link-container="true"], .loader-wrapper>div::after': {
+      boxShadow: `
+			inset 0 0 0 1px ${"var(--ds-background-accent-yellow-subtler-pressed, #E2B203)"},
+			inset 0 0 0 4px ${"var(--ds-background-accent-yellow-subtlest-pressed, #F5CD47)"},
+			0 0 0 1px ${"var(--ds-border-selected, #0C66E4)"}
+			`
+    }
+  },
+  /** Dark mode */
+
+  /** Without node selection */
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.search-match-block.search-match-dark': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '[data-smart-link-container="true"], .loader-wrapper>div::after': {
+      boxShadow: `
+			inset 0 0 0 1px ${"var(--ds-background-accent-yellow-bolder, #946F00)"},
+			inset 0 0 0 5px ${"var(--ds-background-accent-yellow-bolder-pressed, #533F04)"}
+			`
+    }
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.search-match-selected.search-match-block.search-match-dark': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '[data-smart-link-container="true"], .loader-wrapper>div::after': {
+      boxShadow: `
+			inset 0 0 0 1px ${"var(--ds-background-accent-yellow-bolder, #946F00)"},
+			inset 0 0 0 4px ${"var(--ds-background-accent-yellow-bolder-hovered, #7F5F01)"}
+			`
+    }
+  },
+  /** With node selection */
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.search-match-block.search-match-dark.ak-editor-selected-node': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '.loader-wrapper>div::after': {
+      boxShadow: `
+			inset 0 0 0 1px ${"var(--ds-background-accent-yellow-bolder, #946F00)"},
+			inset 0 0 0 5px ${"var(--ds-background-accent-yellow-bolder-pressed, #533F04)"},
+			0 0 0 1px ${"var(--ds-border-selected, #0C66E4)"}
+			`
+    }
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.search-match-selected.search-match-block.search-match-dark.ak-editor-selected-node': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '[data-smart-link-container="true"], .loader-wrapper>div::after': {
+      boxShadow: `
+			inset 0 0 0 1px ${"var(--ds-background-accent-yellow-bolder, #946F00)"},
+			inset 0 0 0 4px ${"var(--ds-background-accent-yellow-bolder-hovered, #7F5F01)"},
+			0 0 0 1px ${"var(--ds-border-selected, #0C66E4)"}
+			`
+    }
+  }
 });

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

@@ -42,13 +42,17 @@ export const mentionsStyles = css({
 });
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
-export const vanillaMentionsStyles = css({
+export const mentionNodeStyles = css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '.editor-mention-primitive': {
     display: 'inline',
     borderRadius: '20px',
     cursor: 'pointer',
     padding: '0 0.3em 2px 0.23em',
+    // To match `packages/elements/mention/src/components/Mention/PrimitiveMention.tsx` implementation
+    // we match the line height exactly
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+    lineHeight: '1.714',
     fontWeight: "var(--ds-font-weight-regular, 400)",
     wordBreak: 'break-word',
     background: "var(--ds-background-neutral, #091E420F)",
@@ -89,7 +93,7 @@ export const vanillaMentionsStyles = css({
 
 // This is mentions styles for mentions selection styles based on the vanilla node view
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
-export const vanillaMentionsSelectionStyles = css({
+export const mentionsSelectionStyles = css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
   '.danger': {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors

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

@@ -253,7 +253,7 @@ export const vanillaTaskItemStyles = css({
     display: 'none'
   },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
-  '[data-prosemirror-node-view-type="vanilla"][data-prosemirror-node-name="taskItem"]:has([data-empty]):not(:has([data-type-ahead])) [data-component="placeholder"]': {
+  "[data-prosemirror-node-view-type='vanilla'][data-prosemirror-node-name='taskItem']:has([data-empty]):not(:has([data-type-ahead])) [data-component='placeholder']": {
     display: 'block'
   },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors

package/dist/es2019/version-wrapper.js

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