@atlaskit/editor-core 208.3.4 → 208.3.6

package/CHANGELOG.md

@@ -1,5 +1,38 @@
 # @atlaskit/editor-core
 
+## 208.3.6
+
+### Patch Changes
+
+- [#165932](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/165932)
+  [`993d95ad7a45c`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/993d95ad7a45c) -
+  migrated toolbar off dynamic styles to static styles behind experiment
+
+## 208.3.5
+
+### Patch Changes
+
+- [#175895](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/175895)
+  [`6165a5dc5b6b1`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/6165a5dc5b6b1) -
+  Remove deprecated path for react version of mentions
+- [#175471](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/175471)
+  [`302b93e537e73`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/302b93e537e73) -
+  ff cleanup for platform_editor_scroll_table_flickering_fix (FD-91488)
+- [#175569](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/175569)
+  [`3bcbd0cff0437`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/3bcbd0cff0437) -
+  [ux] ED-27958 extend the find algorithm to search smart cards behind
+  platform_editor_find_and_replace_improvements
+- [#176023](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/176023)
+  [`d88b8886797ae`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/d88b8886797ae) -
+  clean up experiment platform_editor_vanilla_dom on task
+- [#175339](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/175339)
+  [`d4115e4055a0a`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/d4115e4055a0a) -
+  ED-28314 Cleanup platform_editor_controls_patch_12
+- [#175899](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/175899)
+  [`a28d5dc386dbf`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/a28d5dc386dbf) -
+  Clean up platform_editor_fix_floating_toolbar_focus
+- Updated dependencies
+
 ## 208.3.4
 
 ### Patch Changes

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

@@ -0,0 +1,119 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MainToolbarForSecondChildWrapper = exports.MainToolbarForFirstChildWrapper = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@emotion/react");
+var _platformFeatureFlagsReact = require("@atlaskit/platform-feature-flags-react");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
+var _MainToolbar = require("./MainToolbar");
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
+// Pre-computed static styles for first- and second-child wrappers.
+// These contain no runtime logic and are safe for static-emotion mode.
+
+var firstChildStaticBase = (0, _react2.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
+var firstChildStaticTwoLine = (0, _react2.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'
+  }
+});
+var secondChildStaticBase = (0, _react2.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
+var secondChildStaticTwoLine = (0, _react2.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 ----------------
+var FirstChildWrapperStatic = function FirstChildWrapperStatic(_ref) {
+  var twoLineEditorToolbar = _ref.twoLineEditorToolbar,
+    children = _ref.children,
+    role = _ref.role,
+    ariaLabel = _ref['aria-label'],
+    testId = _ref['data-testid'];
+  return (0, _react2.jsx)("div", {
+    css: [firstChildStaticBase, twoLineEditorToolbar && firstChildStaticTwoLine],
+    role: role,
+    "aria-label": ariaLabel,
+    "data-testid": testId
+  }, children);
+};
+var FirstChildWrapperDynamic = function FirstChildWrapperDynamic(_ref2) {
+  var twoLineEditorToolbar = _ref2.twoLineEditorToolbar,
+    children = _ref2.children,
+    role = _ref2.role,
+    ariaLabel = _ref2['aria-label'],
+    testId = _ref2['data-testid'];
+  return (0, _react2.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: (0, _MainToolbar.mainToolbarFirstChildStyle)(twoLineEditorToolbar),
+    role: role,
+    "aria-label": ariaLabel,
+    "data-testid": testId
+  }, children);
+};
+var MainToolbarForFirstChildWrapper = exports.MainToolbarForFirstChildWrapper = (0, _platformFeatureFlagsReact.componentWithCondition)(function () {
+  return (0, _expValEquals.expValEquals)('platform_editor_core_static_emotion_non_central', 'isEnabled', true);
+}, FirstChildWrapperStatic, FirstChildWrapperDynamic);
+
+// ---------------- Second child wrapper ----------------
+var SecondChildWrapperStatic = function SecondChildWrapperStatic(_ref3) {
+  var twoLineEditorToolbar = _ref3.twoLineEditorToolbar,
+    children = _ref3.children,
+    role = _ref3.role,
+    ariaLabel = _ref3['aria-label'],
+    testId = _ref3['data-testid'];
+  return (0, _react2.jsx)("div", {
+    css: [secondChildStaticBase, twoLineEditorToolbar && secondChildStaticTwoLine],
+    role: role,
+    "aria-label": ariaLabel,
+    "data-testid": testId
+  }, children);
+};
+var SecondChildWrapperDynamic = function SecondChildWrapperDynamic(_ref4) {
+  var twoLineEditorToolbar = _ref4.twoLineEditorToolbar,
+    children = _ref4.children,
+    role = _ref4.role,
+    ariaLabel = _ref4['aria-label'],
+    testId = _ref4['data-testid'];
+  return (0, _react2.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: (0, _MainToolbar.mainToolbarSecondChildStyle)(twoLineEditorToolbar),
+    role: role,
+    "aria-label": ariaLabel,
+    "data-testid": testId
+  }, children);
+};
+var MainToolbarForSecondChildWrapper = exports.MainToolbarForSecondChildWrapper = (0, _platformFeatureFlagsReact.componentWithCondition)(function () {
+  return (0, _expValEquals.expValEquals)('platform_editor_core_static_emotion_non_central', 'isEnabled', true);
+}, SecondChildWrapperStatic, SecondChildWrapperDynamic);

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

@@ -13,6 +13,7 @@ var _browser = require("@atlaskit/editor-common/browser");
 var _hooks = require("@atlaskit/editor-common/hooks");
 var _ui = require("@atlaskit/editor-common/ui");
 var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
+var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _getPrimaryToolbarComponents = require("../../Toolbar/getPrimaryToolbarComponents");
@@ -163,7 +164,11 @@ var FullPageEditor = exports.FullPageEditor = function 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': (0, _editorSharedStyles.FULL_PAGE_EDITOR_TOOLBAR_HEIGHT)()
+    }
   }, !isEditorToolbarHidden && (0, _react2.jsx)(_FullPageToolbar.FullPageToolbar, {
     appearance: props.appearance,
     editorAPI: editorAPI,

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

@@ -17,7 +17,9 @@ var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _ToolbarPortal = require("../../Toolbar/ToolbarPortal");
 var _ToolbarWithSizeDetector = require("../../Toolbar/ToolbarWithSizeDetector");
 var _BeforeWrapper = require("./BeforeWrapper");
+var _CustomToolbarWrapper = require("./CustomToolbarWrapper");
 var _MainToolbar = require("./MainToolbar");
+var _MainToolbarWrapper = require("./MainToolbarWrapper");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 /**
  * @jsxRuntime classic
@@ -130,18 +132,16 @@ var EditorToolbar = exports.EditorToolbar = /*#__PURE__*/_react.default.memo(fun
       isShortcutToFocusToolbar: isShortcutToFocusToolbar,
       handleEscape: handleEscape,
       intl: props.intl
-    }, (0, _react2.jsx)(ToolbarPortal, null, (0, _react2.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: (0, _MainToolbar.mainToolbarStyle)(props.showKeyline || contextPanelWidth > 0, twoLineEditorToolbar),
+    }, (0, _react2.jsx)(ToolbarPortal, null, (0, _react2.jsx)(_MainToolbarWrapper.MainToolbarWrapper, {
+      showKeyline: props.showKeyline || contextPanelWidth > 0,
+      twoLineEditorToolbar: twoLineEditorToolbar,
       "data-testid": "ak-editor-main-toolbar"
-    }, (0, _react2.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: (0, _MainToolbar.mainToolbarFirstChildStyle)(twoLineEditorToolbar),
+    }, (0, _react2.jsx)(_CustomToolbarWrapper.MainToolbarForFirstChildWrapper, {
+      twoLineEditorToolbar: twoLineEditorToolbar,
       role: "toolbar",
       "aria-label": props.intl.formatMessage(_messages.fullPageMessages.toolbarLabel)
-    }, shouldSplitToolbar ? customToolbar : nonCustomToolbar), (0, _react2.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: (0, _MainToolbar.mainToolbarSecondChildStyle)(twoLineEditorToolbar),
+    }, shouldSplitToolbar ? customToolbar : nonCustomToolbar), (0, _react2.jsx)(_CustomToolbarWrapper.MainToolbarForSecondChildWrapper, {
+      twoLineEditorToolbar: twoLineEditorToolbar,
       "data-testid": "avatar-group-outside-plugin",
       role: "region",
       "aria-label": props.intl.formatMessage(_messages.fullPageMessages.pageActionsLabel)

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

@@ -0,0 +1,97 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MainToolbarWrapper = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@emotion/react");
+var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _platformFeatureFlagsReact = require("@atlaskit/platform-feature-flags-react");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
+var _MainToolbar = require("./MainToolbar");
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
+// Base styles that don't depend on feature flags
+var baseToolbarStyles = (0, _react2.css)({
+  position: 'relative',
+  alignItems: 'center',
+  boxShadow: 'none',
+  borderBottom: "1px solid ".concat("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 ".concat(_editorSharedStyles.akEditorSwoopCubicBezier),
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
+  zIndex: _editorSharedStyles.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'
+  }
+});
+var flexibleIconSize = (0, _react2.css)({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '& span svg': {
+    maxWidth: '100%'
+  }
+});
+// box-shadow is overriden by the mainToolbar
+var mainToolbarWithKeyline = (0, _react2.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)"
+});
+var mainToolbarTwoLineStyle = (0, _react2.css)((0, _defineProperty2.default)({}, "@media (max-width: ".concat(_MainToolbar.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)"
+}));
+var MainToolbarWrapperNext = function MainToolbarWrapperNext(_ref) {
+  var showKeyline = _ref.showKeyline,
+    twoLineEditorToolbar = _ref.twoLineEditorToolbar,
+    children = _ref.children,
+    testId = _ref['data-testid'];
+  return (0, _react2.jsx)("div", {
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+    css: [baseToolbarStyles, (0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') && flexibleIconSize, showKeyline && mainToolbarWithKeyline, twoLineEditorToolbar && mainToolbarTwoLineStyle],
+    "data-testid": testId
+  }, children);
+};
+
+/**
+ * Original version of the toolbar wrapper using dynamic styles
+ */
+var MainToolbarWrapperOld = function MainToolbarWrapperOld(_ref2) {
+  var showKeyline = _ref2.showKeyline,
+    twoLineEditorToolbar = _ref2.twoLineEditorToolbar,
+    children = _ref2.children,
+    testId = _ref2['data-testid'];
+  return (0, _react2.jsx)("div", {
+    css:
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values
+    (0, _MainToolbar.mainToolbarStyle)(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>
+ */
+var MainToolbarWrapper = exports.MainToolbarWrapper = (0, _platformFeatureFlagsReact.componentWithCondition)(function () {
+  return (0, _expValEquals.expValEquals)('platform_editor_core_static_emotion_non_central', 'isEnabled', true);
+}, MainToolbarWrapperNext, MainToolbarWrapperOld);

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

@@ -22,6 +22,7 @@ var _styles4 = require("@atlaskit/editor-plugins/paste-options-toolbar/styles");
 var _styles5 = require("@atlaskit/editor-plugins/placeholder-text/styles");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _tokens = require("@atlaskit/tokens");
 var _getInlineNodeViewProducer = require("../../nodeviews/getInlineNodeViewProducer.styles");
@@ -51,13 +52,17 @@ var linkStyles = exports.linkStyles = (0, _react2.css)(_templateObject || (_temp
 var ruleStyles = function ruleStyles() {
   return (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n\t.ProseMirror {\n\t\t", ";\n\n\t\thr {\n\t\t\tcursor: pointer;\n\t\t\tpadding: ", " 0;\n\t\t\tmargin: ", " 0;\n\t\t\tbackground-clip: content-box;\n\n\t\t\t&.", " {\n\t\t\t\toutline: none;\n\t\t\t\tbackground-color: ", ";\n\t\t\t}\n\t\t}\n\t}\n"])), (0, _styles.ruleSharedStyles)(), "var(--ds-space-050, 4px)", "var(--ds-space-300, 24px)", _editorSharedStyles.akEditorSelectedNodeClassName, "var(--ds-border-selected, ".concat(_editorSharedStyles.akEditorSelectedBorderColor, ")"));
 };
-var vanillaMentionsStyles = (0, _react2.css)({
+var mentionNodeStyles = (0, _react2.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)",
@@ -154,15 +159,11 @@ var akEditorBreakpointForSmallDevice = "1266px";
 var legacyContentStyles = function legacyContentStyles(props) {
   return (0, _react2.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n\t--ak-editor--default-gutter-padding: ", "px;\n\t/* 52 is from akEditorGutterPaddingDynamic via editor-shared-styles */\n\t--ak-editor--large-gutter-padding: ", "px;\n\t--ak-editor--default-layout-width: ", "px;\n\t--ak-editor--full-width-layout-width: ", "px;\n\t/* calculate editor line length, 100cqw is the editor container width */\n\t--ak-editor--line-length: min(\n\t\tcalc(100cqw - var(--ak-editor--large-gutter-padding) * 2),\n\t\tvar(--ak-editor--default-layout-width)\n\t);\n\t--ak-editor--breakout-wide-layout-width: ", "px;\n\t--ak-editor--breakout-full-page-guttering-padding: calc(\n\t\tvar(--ak-editor--large-gutter-padding) * 2 + var(--ak-editor--default-gutter-padding)\n\t);\n\n\t--ak-editor--breakout-fallback-width: calc(\n\t\t100cqw - var(--ak-editor--breakout-full-page-guttering-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\n\t\t/* in full width appearances it's not possible to rely on cqw because it doesn't account for the page scrollbar, which depends on users system settings */\n\t\t--ak-editor--breakout-fallback-width: 100%;\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\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\t", "\n  ", "\n  ", "\n  ", "\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"])), _editorSharedStyles.akEditorGutterPadding, (0, _editorSharedStyles.akEditorGutterPaddingDynamic)(), _editorSharedStyles.akEditorDefaultLayoutWidth, _editorSharedStyles.akEditorFullWidthLayoutWidth, _editorSharedStyles.akEditorCalculatedWideLayoutWidthSmallViewport, akEditorBreakpointForSmallDevice, _editorSharedStyles.akEditorCalculatedWideLayoutWidth, (0, _editorSharedStyles.editorFontSize)({
     theme: props.theme
-  }), _styles.whitespaceSharedStyles, (0, _styles.paragraphSharedStyles)(props.typographyTheme), _styles.listsSharedStyles, _styles.indentationSharedStyles, _styles.shadowSharedStyle, _getInlineNodeViewProducer.InlineNodeViewSharedStyles, (0, _platformFeatureFlags.fg)('platform_editor_hide_cursor_when_pm_hideselection') ? (0, _react2.css)(_templateObject0 || (_templateObject0 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t.ProseMirror-hideselection {\n\t\t\t\t\tcaret-color: transparent;\n\t\t\t\t}\n\t\t\t"]))) : null, (0, _experiments.editorExperiment)('platform_editor_advanced_code_blocks', true) ? (0, _react2.css)(_templateObject1 || (_templateObject1 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t.ProseMirror-hideselection {\n\t\t\t\t\tcaret-color: transparent;\n\t\t\t\t}\n\t\t\t"]))) : null, "var(--ds-border-focused, #8cf)", (0, _platformFeatureFlags.fg)('platform_editor_fix_floating_toolbar_focus') ? firstFloatingToolbarButtonStyles : null, _styles5.placeholderTextStyles, (0, _platformFeatureFlags.fg)('platform_editor_system_fake_text_highlight_colour') && _styles5.placeholderTextStyles_fg_platform_editor_system_fake_text_highlight_colour, placeholderStyles, (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? placeholderOverflowStyles : null, (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_quick_insert_placeholder') ? placeholderWrapStyles : null, (0, _codeBlock.codeBlockStyles)(), (0, _styles2.blocktypeStyles)(props.typographyTheme), (0, _styles.codeMarkSharedStyles)(), _styles.textColorStyles, (0, _styles.backgroundColorStyles)(), listsStyles, ruleStyles(), (0, _media.mediaStyles)(), (0, _layout.layoutStyles)(props.viewMode), (0, _platformFeatureFlags.fg)('confluence_team_presence_scroll_to_pointer') ? _collab.telepointerStyle : _collab.telepointerStyleWithInitialOnly, _selection.gapCursorStyles, (0, _panel2.panelStyles)(), mentionsStyles, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true, {
-    exposure: false
-  }) && vanillaMentionsStyles, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true, {
+  }), _styles.whitespaceSharedStyles, (0, _styles.paragraphSharedStyles)(props.typographyTheme), _styles.listsSharedStyles, _styles.indentationSharedStyles, _styles.shadowSharedStyle, _getInlineNodeViewProducer.InlineNodeViewSharedStyles, (0, _platformFeatureFlags.fg)('platform_editor_hide_cursor_when_pm_hideselection') ? (0, _react2.css)(_templateObject0 || (_templateObject0 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t.ProseMirror-hideselection {\n\t\t\t\t\tcaret-color: transparent;\n\t\t\t\t}\n\t\t\t"]))) : null, (0, _experiments.editorExperiment)('platform_editor_advanced_code_blocks', true) ? (0, _react2.css)(_templateObject1 || (_templateObject1 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t.ProseMirror-hideselection {\n\t\t\t\t\tcaret-color: transparent;\n\t\t\t\t}\n\t\t\t"]))) : null, "var(--ds-border-focused, #8cf)", firstFloatingToolbarButtonStyles, _styles5.placeholderTextStyles, (0, _platformFeatureFlags.fg)('platform_editor_system_fake_text_highlight_colour') && _styles5.placeholderTextStyles_fg_platform_editor_system_fake_text_highlight_colour, placeholderStyles, (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? placeholderOverflowStyles : null, (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_quick_insert_placeholder') ? placeholderWrapStyles : null, (0, _codeBlock.codeBlockStyles)(), (0, _styles2.blocktypeStyles)(props.typographyTheme), (0, _styles.codeMarkSharedStyles)(), _styles.textColorStyles, (0, _styles.backgroundColorStyles)(), listsStyles, ruleStyles(), (0, _media.mediaStyles)(), (0, _layout.layoutStyles)(props.viewMode), (0, _platformFeatureFlags.fg)('confluence_team_presence_scroll_to_pointer') ? _collab.telepointerStyle : _collab.telepointerStyleWithInitialOnly, _selection.gapCursorStyles, (0, _panel2.panelStyles)(), mentionsStyles, mentionNodeStyles, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true, {
     exposure: false
   }) && vanillaSelectionStyles, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true, {
     exposure: false
-  }) ? emojiStyles : reactEmojiStyles, emojiStyles, _styles.tasksAndDecisionsStyles, _styles.gridStyles, linkStyles, _styles.blockMarksSharedStyles, _styles.dateSharedStyle, _extension.extensionStyles, (0, _expand.expandStyles)(), _styles3.findReplaceStyles, _styles4.textHighlightStyle, _tasksAndDecisions.taskDecisionStyles, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true, {
-    exposure: false
-  }) && _tasksAndDecisions.vanillaTaskItemStyles, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true, {
+  }) ? emojiStyles : reactEmojiStyles, emojiStyles, _styles.tasksAndDecisionsStyles, _styles.gridStyles, linkStyles, _styles.blockMarksSharedStyles, _styles.dateSharedStyle, _extension.extensionStyles, (0, _expand.expandStyles)(), (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_find_and_replace_improvements', 'isEnabled', true) ? _styles3.findReplaceStylesNew : _styles3.findReplaceStyles, _styles4.textHighlightStyle, _tasksAndDecisions.taskDecisionStyles, _tasksAndDecisions.vanillaTaskItemStyles, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true, {
     exposure: false
   }) && _tasksAndDecisions.vanillaTaskDecisionStyles, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true, {
     exposure: false

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

@@ -159,7 +159,7 @@ var vanillaTaskItemStyles = exports.vanillaTaskItemStyles = (0, _react.css)((0,
     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/cjs/ui/EditorContentContainer/EditorContentContainer.js

@@ -112,7 +112,7 @@ var EditorContentContainer = /*#__PURE__*/_react.default.forwardRef(function (pr
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
     _cursorStyles.cursorStyles,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
-    (0, _platformFeatureFlags.fg)('platform_editor_fix_floating_toolbar_focus') && _floatingToolbarStyles.firstFloatingToolbarButtonStyles,
+    _floatingToolbarStyles.firstFloatingToolbarButtonStyles,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
     _placeholderStyles.placeholderTextStyles, (0, _platformFeatureFlags.fg)('platform_editor_system_fake_text_highlight_colour') &&
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
@@ -126,11 +126,9 @@ var EditorContentContainer = /*#__PURE__*/_react.default.forwardRef(function (pr
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
     _codeBlockStyles.codeBlockStyles,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
-    !(0, _platformFeatureFlags.fg)('platform_editor_typography_ugc') && _editorUGCTokenStyles.editorUGCTokensDefault, ((0, _platformFeatureFlags.fg)('platform-dst-jira-web-fonts') || (0, _platformFeatureFlags.fg)('confluence_typography_refreshed') || (0, _platformFeatureFlags.fg)('atlas_editor_typography_refreshed')) && (0, _platformFeatureFlags.fg)('platform_editor_typography_ugc') &&
+    !(0, _platformFeatureFlags.fg)('platform_editor_typography_ugc') && _editorUGCTokenStyles.editorUGCTokensDefault, (0, _platformFeatureFlags.fg)('platform_editor_typography_ugc') &&
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
-    _editorUGCTokenStyles.editorUGCTokensRefreshed, !((0, _platformFeatureFlags.fg)('platform-dst-jira-web-fonts') || (0, _platformFeatureFlags.fg)('confluence_typography_refreshed') || (0, _platformFeatureFlags.fg)('atlas_editor_typography_refreshed')) && (0, _platformFeatureFlags.fg)('platform_editor_typography_ugc') &&
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
-    _editorUGCTokenStyles.editorUGCTokensModernized,
+    _editorUGCTokenStyles.editorUGCTokensRefreshed,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
     _blockTypeStyles.blocktypeStyles,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
@@ -188,15 +186,15 @@ var EditorContentContainer = /*#__PURE__*/_react.default.forwardRef(function (pr
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
     _expandStyles.expandStylesMixin_without_fg_platform_editor_nested_dnd_styles_changes,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
-    (0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') && _expandStyles.expandStylesMixin_fg_platform_visual_refresh_icons,
+    (0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') && _expandStyles.expandStylesMixin_fg_platform_visual_refresh_icons, (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_find_and_replace_improvements', 'isEnabled', true) ?
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    _findReplaceStyles.findReplaceStylesNew :
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
     _findReplaceStyles.findReplaceStyles,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
     _textHighlightStyles.textHighlightStyle,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
-    _tasksAndDecisionsStyles.decisionStyles, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true, {
-      exposure: false
-    }) &&
+    _tasksAndDecisionsStyles.decisionStyles,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
     _tasksAndDecisionsStyles.vanillaTaskItemStyles, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true, {
       exposure: false
@@ -268,12 +266,10 @@ var EditorContentContainer = /*#__PURE__*/_react.default.forwardRef(function (pr
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
     _smartCardStyles.linkingVisualRefreshV1Styles,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
-    _dateStyles.dateVanillaStyles, (0, _platformFeatureFlags.fg)('platform_editor_typography_ugc') ? (0, _platformFeatureFlags.fg)('platform-dst-jira-web-fonts') || (0, _platformFeatureFlags.fg)('confluence_typography_refreshed') || (0, _platformFeatureFlags.fg)('atlas_editor_typography_refreshed') ?
+    _dateStyles.dateVanillaStyles, (0, _platformFeatureFlags.fg)('platform_editor_typography_ugc') ?
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
     _paragraphStyles.paragraphStylesUGCRefreshed :
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
-    _paragraphStyles.paragraphStylesUGCModernized :
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
     _paragraphStyles.paragraphStylesOld,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
     (0, _platformFeatureFlags.fg)('platform_editor_hyperlink_underline') ? _link.linkStyles : _link.linkStylesOld,
@@ -318,15 +314,11 @@ var EditorContentContainer = /*#__PURE__*/_react.default.forwardRef(function (pr
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
     _codeBlockStyles.firstCodeBlockWithNoMarginOld,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
-    _firstBlockNodeStyles.firstBlockNodeStyles, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true, {
-      exposure: false
-    }) &&
+    _firstBlockNodeStyles.firstBlockNodeStyles,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
-    _mentions.vanillaMentionsStyles, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true, {
-      exposure: false
-    }) &&
+    _mentions.mentionNodeStyles,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
-    _mentions.vanillaMentionsSelectionStyles, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true, {
+    _mentions.mentionsSelectionStyles, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true, {
       exposure: false
     }) ?
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.findReplaceStyles = void 0;
+exports.findReplaceStylesNew = exports.findReplaceStyles = void 0;
 var _react = require("@emotion/react");
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
 
@@ -19,4 +19,85 @@ var findReplaceStyles = exports.findReplaceStyles = (0, _react.css)({
   '.selected-search-match': {
     backgroundColor: "var(--ds-background-accent-teal-subtle, #6CC3E0)"
   }
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
+var findReplaceStylesNew = exports.findReplaceStylesNew = (0, _react.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))".concat(", 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: "\n\t\t\tinset 0 0 0 1px ".concat("var(--ds-background-accent-yellow-subtler-pressed, #E2B203)", ",\n\t\t\tinset 0 0 0 5px ", "var(--ds-background-accent-yellow-subtler, #F8E6A0)", "\n\t\t\t")
+    }
+  },
+  // 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: "\n\t\t\tinset 0 0 0 1px ".concat("var(--ds-background-accent-yellow-subtler-pressed, #E2B203)", ",\n\t\t\tinset 0 0 0 4px ", "var(--ds-background-accent-yellow-subtlest-pressed, #F5CD47)", "\n\t\t\t")
+    }
+  },
+  /** 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: "\n\t\t\tinset 0 0 0 1px ".concat("var(--ds-background-accent-yellow-subtler-pressed, #E2B203)", ",\n\t\t\tinset 0 0 0 5px ", "var(--ds-background-accent-yellow-subtler, #F8E6A0)", ",\n\t\t\t0 0 0 1px ", "var(--ds-border-selected, #0C66E4)", "\n\t\t\t")
+    }
+  },
+  // 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: "\n\t\t\tinset 0 0 0 1px ".concat("var(--ds-background-accent-yellow-subtler-pressed, #E2B203)", ",\n\t\t\tinset 0 0 0 4px ", "var(--ds-background-accent-yellow-subtlest-pressed, #F5CD47)", ",\n\t\t\t0 0 0 1px ", "var(--ds-border-selected, #0C66E4)", "\n\t\t\t")
+    }
+  },
+  /** 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: "\n\t\t\tinset 0 0 0 1px ".concat("var(--ds-background-accent-yellow-bolder, #946F00)", ",\n\t\t\tinset 0 0 0 5px ", "var(--ds-background-accent-yellow-bolder-pressed, #533F04)", "\n\t\t\t")
+    }
+  },
+  // 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: "\n\t\t\tinset 0 0 0 1px ".concat("var(--ds-background-accent-yellow-bolder, #946F00)", ",\n\t\t\tinset 0 0 0 4px ", "var(--ds-background-accent-yellow-bolder-hovered, #7F5F01)", "\n\t\t\t")
+    }
+  },
+  /** 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: "\n\t\t\tinset 0 0 0 1px ".concat("var(--ds-background-accent-yellow-bolder, #946F00)", ",\n\t\t\tinset 0 0 0 5px ", "var(--ds-background-accent-yellow-bolder-pressed, #533F04)", ",\n\t\t\t0 0 0 1px ", "var(--ds-border-selected, #0C66E4)", "\n\t\t\t")
+    }
+  },
+  // 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: "\n\t\t\tinset 0 0 0 1px ".concat("var(--ds-background-accent-yellow-bolder, #946F00)", ",\n\t\t\tinset 0 0 0 4px ", "var(--ds-background-accent-yellow-bolder-hovered, #7F5F01)", ",\n\t\t\t0 0 0 1px ", "var(--ds-border-selected, #0C66E4)", "\n\t\t\t")
+    }
+  }
 });

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

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.vanillaMentionsStyles = exports.vanillaMentionsSelectionStyles = exports.mentionsStyles = void 0;
+exports.mentionsStyles = exports.mentionsSelectionStyles = exports.mentionNodeStyles = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("@emotion/react");
 var _mention = require("@atlaskit/editor-common/mention");
@@ -36,13 +36,17 @@ _selectionStyles.backgroundSelectionStyles, mentionsSelectedColor])), '.danger',
 })));
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
-var vanillaMentionsStyles = exports.vanillaMentionsStyles = (0, _react.css)({
+var mentionNodeStyles = exports.mentionNodeStyles = (0, _react.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)",
@@ -83,7 +87,7 @@ var vanillaMentionsStyles = exports.vanillaMentionsStyles = (0, _react.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
-var vanillaMentionsSelectionStyles = exports.vanillaMentionsSelectionStyles = (0, _react.css)((0, _defineProperty2.default)({
+var mentionsSelectionStyles = exports.mentionsSelectionStyles = (0, _react.css)((0, _defineProperty2.default)({
   // 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/cjs/ui/EditorContentContainer/styles/tasksAndDecisionsStyles.js

@@ -246,7 +246,7 @@ var vanillaTaskItemStyles = exports.vanillaTaskItemStyles = (0, _react.css)((0,
     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/cjs/version-wrapper.js

@@ -5,4 +5,4 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.version = exports.name = void 0;
 var name = exports.name = "@atlaskit/editor-core";
-var version = exports.version = "208.3.3";
+var version = exports.version = "208.3.5";