@atlaskit/editor-core 207.21.3 → 207.22.0

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/editor-core
 
+## 207.22.0
+
+### Minor Changes
+
+- [#170958](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/170958)
+  [`0b7ee494d452a`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/0b7ee494d452a) -
+  [ux] Update fake text-selection styles to use system highlight colours (behind feature gate)
+
+### Patch Changes
+
+- [#167340](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/167340)
+  [`c56340c1e531b`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/c56340c1e531b) -
+  [ED-28168] Refactor dynamic styles in comment toolbar to static emotion
+- Updated dependencies
+
 ## 207.21.3
 
 ### Patch Changes

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

@@ -7,6 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.CommentEditorWithIntl = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
 var _classnames = _interopRequireDefault(require("classnames"));
@@ -22,6 +24,7 @@ var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-
 var _commonStyles = require("@atlaskit/editor-plugins/table/ui/common-styles");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _platformFeatureFlagsReact = require("@atlaskit/platform-feature-flags-react");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _ClickAreaBlock = _interopRequireDefault(require("../../Addon/ClickAreaBlock"));
 var _contentComponentWrapper = require("../../Addon/ClickAreaBlock/contentComponentWrapper");
@@ -32,18 +35,17 @@ var _getPrimaryToolbarComponents = require("../../Toolbar/getPrimaryToolbarCompo
 var _ToolbarWithSizeDetector = require("../../Toolbar/ToolbarWithSizeDetector");
 var _WithFlash = _interopRequireDefault(require("../../WithFlash"));
 var _Toolbar = require("./Toolbar");
-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); }
+var _templateObject;
 /**
  * @jsxRuntime classic
  * @jsx jsx
  */
-
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-
 // Ignored via go/ees005
 // eslint-disable-next-line import/no-named-as-default
-
+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); }
 var CommentEditorMargin = 14;
+var MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT = 490;
 var commentEditorStyles = (0, _react2.css)({
   display: 'flex',
   flexDirection: 'column',
@@ -89,6 +91,27 @@ var secondaryToolbarStyles = (0, _react2.css)({
   display: 'flex',
   padding: "var(--ds-space-150, 12px)".concat(" ", "var(--ds-space-025, 2px)")
 });
+var mainToolbarCustomComponentsSlotStyle = function mainToolbarCustomComponentsSlotStyle() {
+  var isTwoLineEditorToolbar = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+  return (// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Needs manual remediation
+    (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t\tdisplay: flex;\n\t\tjustify-content: flex-end;\n\t\talign-items: center;\n\t\tflex-grow: 1;\n\t\tpadding-right: ", ";\n\t\t> div {\n\t\t\tdisplay: flex;\n\t\t\tflex-shrink: 0;\n\t\t}\n\t\t", "\n\t"])), "var(--ds-space-250, 20px)", isTwoLineEditorToolbar && "\n    @media (max-width: ".concat(MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT, "px) {\n      {\n        padding-right: 0;\n      }\n    }\n  "))
+  );
+};
+var mainToolbarCustomComponentsSlotStyleNew = (0, _react2.css)({
+  display: 'flex',
+  justifyContent: 'flex-end',
+  alignItems: 'center',
+  flexGrow: 1,
+  paddingRight: "var(--ds-space-250, 20px)",
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '> div': {
+    display: 'flex',
+    flexShrink: 0
+  }
+});
+var mainToolbarCustomComponentsSlotStyleTwoLineToolbarNew = (0, _react2.css)((0, _defineProperty2.default)({}, "@media (max-width: ".concat(MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT, "px)"), {
+  paddingRight: 0
+}));
 var appearance = 'comment';
 var EditorContainer = (0, _platformFeatureFlagsReact.componentWithCondition)(function () {
   return (0, _experiments.editorExperiment)('platform_editor_core_static_emotion', true, {
@@ -243,7 +266,8 @@ var CommentEditorWithIntl = exports.CommentEditorWithIntl = function CommentEdit
     containerElement: containerElement.current,
     twoLineEditorToolbar: isTwoLineToolbarEnabled
   }), (0, _react2.jsx)("div", {
-    css: (0, _Toolbar.mainToolbarCustomComponentsSlotStyle)(isTwoLineToolbarEnabled)
+    css: (0, _expValEquals.expValEquals)('platform_editor_core_static_emotion_non_central', 'isEnabled', true) ? [mainToolbarCustomComponentsSlotStyleNew, isTwoLineToolbarEnabled && mainToolbarCustomComponentsSlotStyleTwoLineToolbarNew] : /* eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766 */
+    mainToolbarCustomComponentsSlotStyle(isTwoLineToolbarEnabled)
   }, customPrimaryToolbarComponents))), (0, _react2.jsx)(_ClickAreaBlock.default, {
     editorView: editorView,
     editorDisabled: disabled

package/dist/cjs/ui/Appearance/Comment/Toolbar.js

@@ -5,16 +5,17 @@ var _typeof3 = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.mainToolbarCustomComponentsSlotStyle = exports.MainToolbar = void 0;
+exports.MainToolbar = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
-var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
-var _templateObject, _templateObject2, _templateObject3;
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
+var _templateObject, _templateObject2;
 /**
  * @jsxRuntime classic
  * @jsx jsx
@@ -22,6 +23,8 @@ var _templateObject, _templateObject2, _templateObject3;
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 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" != _typeof3(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); }
 var MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT = 490;
+var akEditorMenuZIndex = 500;
+var akEditorToolbarKeylineHeight = 2;
 
 /* eslint-disable @atlaskit/platform/ensure-feature-flag-registration */
 // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Needs manual remediation
@@ -29,10 +32,63 @@ var mainToolbarWrapperStyle = function mainToolbarWrapperStyle() {
   var isTwoLineEditorToolbar = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
   return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\tposition: relative;\n\talign-items: center;\n\tpadding: ", " ", " 0;\n\tdisplay: flex;\n\theight: auto;\n\tbackground-color: ", ";\n\tbox-shadow: none;\n\tpadding-left: ", ";\n\n\t& > div {\n\t\t> :first-child:not(style),\n\t\t> style:first-child + * {\n\t\t\tmargin-left: 0;\n\t\t}\n\t\t", "\n\t}\n\n\t.block-type-btn {\n\t\tpadding-left: 0;\n\t}\n\n\t", "\n"])), "var(--ds-space-100, 8px)", "var(--ds-space-100, 8px)", "var(--ds-surface, white)", "var(--ds-space-250, 20px)", isTwoLineEditorToolbar && "\n        @media (max-width: ".concat(MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT, "px) {\n          flex-direction: column-reverse;\n          align-items: end;\n          display: flex;\n          justify-content: flex-end;\n        }\n\n        /* make this more explicit for a toolbar */\n        > *:nth-child(1) {\n          @media (max-width: ").concat(MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT, "px) {\n            > div:nth-child(2) {\n              justify-content: flex-end;\n              display: flex;\n            }\n          }\n        }\n    "), (0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') && 'span svg { max-width: 100%; }');
 };
+var mainToolbarWrapperStyleNew = (0, _react2.css)({
+  position: 'relative',
+  alignItems: 'center',
+  padding: "var(--ds-space-100, 8px)".concat(" ", "var(--ds-space-100, 8px)", " 0"),
+  display: 'flex',
+  height: 'auto',
+  backgroundColor: "var(--ds-surface, white)",
+  boxShadow: 'none',
+  paddingLeft: "var(--ds-space-250, 20px)",
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '> div': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '> div:first-of-type:not(style), > style:first-of-type + *': {
+      marginLeft: 0
+    }
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+  '.block-type-btn': {
+    paddingLeft: 0
+  }
+});
+var mainToolbarTwoLineStylesNew = (0, _react2.css)({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '& > div': (0, _defineProperty2.default)((0, _defineProperty2.default)({}, "@media (max-width: ".concat(MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT, "px)"), {
+    flexDirection: 'column-reverse',
+    alignItems: 'end',
+    display: 'flex',
+    justifyContent: 'flex-end'
+  }), '> div:first-of-type', (0, _defineProperty2.default)({}, "@media (max-width: ".concat(MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT, "px)"), {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '> div:nth-of-type(2)': {
+      justifyContent: 'flex-end',
+      display: 'flex'
+    }
+  }))
+});
+var mainToolbarWrapperStylesVisualRefresh = (0, _react2.css)({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  'span svg': {
+    maxWidth: '100%'
+  }
+});
+
 /* eslint-enable @atlaskit/platform/ensure-feature-flag-registration */
 
 // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
-var stickyToolbarWrapperStyle = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n\t/* stylelint-disable declaration-block-no-duplicate-properties */\n\tposition: relative;\n\tposition: sticky;\n\t/* stylelint-enable declaration-block-no-duplicate-properties */\n\tpadding-bottom: ", ";\n\tz-index: ", ";\n\ttransition: box-shadow ease-in-out 0.2s;\n\t&.show-keyline {\n\t\tbox-shadow: 0 ", "px 0 0\n\t\t\t", ";\n\t}\n"])), "var(--ds-space-100, 8px)", _editorSharedStyles.akEditorMenuZIndex, _editorSharedStyles.akEditorToolbarKeylineHeight, "var(--ds-background-accent-gray-subtlest, #F1F2F4)");
+var stickyToolbarWrapperStyle = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n\t/* stylelint-disable declaration-block-no-duplicate-properties */\n\tposition: relative;\n\tposition: sticky;\n\t/* stylelint-enable declaration-block-no-duplicate-properties */\n\tpadding-bottom: ", ";\n\tz-index: ", ";\n\ttransition: box-shadow ease-in-out 0.2s;\n\t&.show-keyline {\n\t\tbox-shadow: 0 ", "px 0 0\n\t\t\t", ";\n\t}\n"])), "var(--ds-space-100, 8px)", akEditorMenuZIndex, akEditorToolbarKeylineHeight, "var(--ds-background-accent-gray-subtlest, #F1F2F4)");
+var stickyToolbarWrapperStyleNew = (0, _react2.css)({
+  position: 'sticky',
+  paddingBottom: "var(--ds-space-100, 8px)",
+  zIndex: akEditorMenuZIndex,
+  transition: 'box-shadow ease-in-out 0.2s',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '&.show-keyline': {
+    boxShadow: "0 ".concat(akEditorToolbarKeylineHeight, "px 0 0 ", "var(--ds-background-accent-gray-subtlest, #F1F2F4)")
+  }
+});
 var StickyToolbar = function StickyToolbar(props) {
   var _useState = (0, _react.useState)(0),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -53,8 +109,9 @@ var StickyToolbar = function StickyToolbar(props) {
   return (
     // eslint-disable-next-line @atlaskit/design-system/prefer-primitives
     (0, _react2.jsx)("div", {
+      css: (0, _expValEquals.expValEquals)('platform_editor_core_static_emotion_non_central', 'isEnabled', true) ? [mainToolbarWrapperStyleNew, props.twoLineEditorToolbar && mainToolbarTwoLineStylesNew, (0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') && mainToolbarWrapperStylesVisualRefresh, stickyToolbarWrapperStyleNew] :
       // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
-      css: [mainToolbarWrapperStyle(props.twoLineEditorToolbar), stickyToolbarWrapperStyle]
+      [mainToolbarWrapperStyle(props.twoLineEditorToolbar), stickyToolbarWrapperStyle]
       // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
       ,
       style: {
@@ -71,8 +128,9 @@ var FixedToolbar = function FixedToolbar(props) {
   return (
     // eslint-disable-next-line @atlaskit/design-system/prefer-primitives
     (0, _react2.jsx)("div", {
+      css: (0, _expValEquals.expValEquals)('platform_editor_core_static_emotion_non_central', 'isEnabled', true) ? [mainToolbarWrapperStyleNew, props.twoLineEditorToolbar && mainToolbarTwoLineStylesNew, (0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') && mainToolbarWrapperStylesVisualRefresh] :
       // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
-      css: mainToolbarWrapperStyle(props.twoLineEditorToolbar),
+      mainToolbarWrapperStyle(props.twoLineEditorToolbar),
       "data-testid": "ak-editor-main-toolbar"
     }, props.children)
   );
@@ -120,10 +178,4 @@ var MainToolbar = exports.MainToolbar = function MainToolbar(_ref) {
   return (0, _react2.jsx)(FixedToolbar, {
     twoLineEditorToolbar: twoLineEditorToolbar
   }, children);
-};
-var mainToolbarCustomComponentsSlotStyle = exports.mainToolbarCustomComponentsSlotStyle = function mainToolbarCustomComponentsSlotStyle() {
-  var isTwoLineEditorToolbar = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
-  return (// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Needs manual remediation
-    (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n\t\tdisplay: flex;\n\t\tjustify-content: flex-end;\n\t\talign-items: center;\n\t\tflex-grow: 1;\n\t\tpadding-right: ", ";\n\t\t> div {\n\t\t\tdisplay: flex;\n\t\t\tflex-shrink: 0;\n\t\t}\n\t\t", "\n\t"])), "var(--ds-space-250, 20px)", isTwoLineEditorToolbar && "\n    @media (max-width: ".concat(MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT, "px) {\n      {\n        padding-right: 0;\n      }\n    }\n  "))
-  );
 };

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

@@ -13,7 +13,6 @@ var _reactIntlNext = require("react-intl-next");
 var _messages = require("@atlaskit/editor-common/messages");
 var _ui = require("@atlaskit/editor-common/ui");
 var _uiMenu = require("@atlaskit/editor-common/ui-menu");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _ToolbarPortal = require("../../Toolbar/ToolbarPortal");
 var _ToolbarWithSizeDetector = require("../../Toolbar/ToolbarWithSizeDetector");
@@ -74,7 +73,7 @@ var EditorToolbar = exports.EditorToolbar = /*#__PURE__*/_react.default.memo(fun
     css: _MainToolbar.customToolbarWrapperStyle
   }, !!props.customPrimaryToolbarComponents && 'before' in props.customPrimaryToolbarComponents ? (0, _react2.jsx)(_BeforeWrapper.BeforePrimaryToolbarWrapper, {
     beforePrimaryToolbarComponents: (_props$customPrimaryT = props.customPrimaryToolbarComponents) === null || _props$customPrimaryT === void 0 ? void 0 : _props$customPrimaryT.before
-  }) : null, !((0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_find_and_replace_duplication')) && editorAPI !== null && editorAPI !== void 0 && editorAPI.findReplace && twoLineEditorToolbar ? editorAPI === null || editorAPI === void 0 ? void 0 : editorAPI.findReplace.actions.registerToolbarButton({
+  }) : null, !(0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && editorAPI !== null && editorAPI !== void 0 && editorAPI.findReplace && twoLineEditorToolbar ? editorAPI === null || editorAPI === void 0 ? void 0 : editorAPI.findReplace.actions.registerToolbarButton({
     popupsBoundariesElement: props.popupsBoundariesElement,
     popupsMountPoint: popupsMountPoint,
     popupsScrollableElement: props.popupsScrollableElement,

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

@@ -152,9 +152,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 (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.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  ", "\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)({
+  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.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\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  ", "\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, 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, {
+  }), _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, {
     exposure: false

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

@@ -112,7 +112,9 @@ var EditorContentContainer = /*#__PURE__*/_react.default.forwardRef(function (pr
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
     (0, _platformFeatureFlags.fg)('platform_editor_fix_floating_toolbar_focus') && _floatingToolbarStyles.firstFloatingToolbarButtonStyles,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
-    _placeholderStyles.placeholderTextStyles,
+    _placeholderStyles.placeholderTextStyles, (0, _platformFeatureFlags.fg)('platform_editor_system_fake_text_highlight_colour') &&
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    _placeholderStyles.placeholderTextStylesMixin_fg_platform_editor_system_fake_text_highlight_colour,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
     _placeholderStyles.placeholderStyles,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.placeholderWrapStyles = exports.placeholderTextStyles = exports.placeholderStyles = exports.placeholderOverflowStyles = void 0;
+exports.placeholderWrapStyles = exports.placeholderTextStylesMixin_fg_platform_editor_system_fake_text_highlight_colour = exports.placeholderTextStyles = exports.placeholderStyles = exports.placeholderOverflowStyles = void 0;
 var _react = require("@emotion/react");
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
 
@@ -71,6 +71,21 @@ var placeholderTextStyles = exports.placeholderTextStyles = (0, _react.css)({
   }
 });
 
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
+var placeholderTextStylesMixin_fg_platform_editor_system_fake_text_highlight_colour = exports.placeholderTextStylesMixin_fg_platform_editor_system_fake_text_highlight_colour = (0, _react.css)({
+  // 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-selection': {
+      // Follow the system highlight colour to match native text selection
+      backgroundColor: 'Highlight',
+      // We should also match the text colour to the system highlight text colour.
+      // That way if the system highlight background is dark, the text will still be readable.
+      color: 'HighlightText'
+    }
+  }
+});
+
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 var placeholderStyles = exports.placeholderStyles = (0, _react.css)({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766

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 = "207.21.2";
+var version = exports.version = "207.22.0";

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

@@ -19,6 +19,7 @@ import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared
 import { tableCommentEditorStyles } from '@atlaskit/editor-plugins/table/ui/common-styles';
 import { akEditorMobileBreakoutPoint } from '@atlaskit/editor-shared-styles';
 import { componentWithCondition } from '@atlaskit/platform-feature-flags-react';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 // Ignored via go/ees005
 // eslint-disable-next-line import/no-named-as-default
@@ -30,8 +31,9 @@ import PluginSlot from '../../PluginSlot';
 import { getPrimaryToolbarComponents } from '../../Toolbar/getPrimaryToolbarComponents';
 import { ToolbarWithSizeDetector as Toolbar } from '../../Toolbar/ToolbarWithSizeDetector';
 import WithFlash from '../../WithFlash';
-import { MainToolbar, mainToolbarCustomComponentsSlotStyle } from './Toolbar';
+import { MainToolbar } from './Toolbar';
 const CommentEditorMargin = 14;
+const MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT = 490;
 const commentEditorStyles = css({
   display: 'flex',
   flexDirection: 'column',
@@ -77,6 +79,44 @@ const secondaryToolbarStyles = css({
   display: 'flex',
   padding: `${"var(--ds-space-150, 12px)"} ${"var(--ds-space-025, 2px)"}`
 });
+const mainToolbarCustomComponentsSlotStyle = (isTwoLineEditorToolbar = false) =>
+// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Needs manual remediation
+css`
+		display: flex;
+		justify-content: flex-end;
+		align-items: center;
+		flex-grow: 1;
+		padding-right: ${"var(--ds-space-250, 20px)"};
+		> div {
+			display: flex;
+			flex-shrink: 0;
+		}
+		${isTwoLineEditorToolbar && `
+    @media (max-width: ${MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT}px) {
+      {
+        padding-right: 0;
+      }
+    }
+  `}
+	`;
+const mainToolbarCustomComponentsSlotStyleNew = css({
+  display: 'flex',
+  justifyContent: 'flex-end',
+  alignItems: 'center',
+  flexGrow: 1,
+  paddingRight: "var(--ds-space-250, 20px)",
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '> div': {
+    display: 'flex',
+    flexShrink: 0
+  }
+});
+const mainToolbarCustomComponentsSlotStyleTwoLineToolbarNew = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
+  [`@media (max-width: ${MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT}px)`]: {
+    paddingRight: 0
+  }
+});
 const appearance = 'comment';
 const EditorContainer = componentWithCondition(() => editorExperiment('platform_editor_core_static_emotion', true, {
   exposure: true
@@ -227,7 +267,8 @@ export const CommentEditorWithIntl = props => {
     containerElement: containerElement.current,
     twoLineEditorToolbar: isTwoLineToolbarEnabled
   }), jsx("div", {
-    css: mainToolbarCustomComponentsSlotStyle(isTwoLineToolbarEnabled)
+    css: expValEquals('platform_editor_core_static_emotion_non_central', 'isEnabled', true) ? [mainToolbarCustomComponentsSlotStyleNew, isTwoLineToolbarEnabled && mainToolbarCustomComponentsSlotStyleTwoLineToolbarNew] : /* eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766 */
+    mainToolbarCustomComponentsSlotStyle(isTwoLineToolbarEnabled)
   }, customPrimaryToolbarComponents))), jsx(ClickAreaBlock, {
     editorView: editorView,
     editorDisabled: disabled

package/dist/es2019/ui/Appearance/Comment/Toolbar.js

@@ -8,9 +8,11 @@ import React, { useEffect, useState } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
-import { akEditorMenuZIndex, akEditorToolbarKeylineHeight } from '@atlaskit/editor-shared-styles';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 const MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT = 490;
+const akEditorMenuZIndex = 500;
+const akEditorToolbarKeylineHeight = 2;
 
 /* eslint-disable @atlaskit/platform/ensure-feature-flag-registration */
 // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Needs manual remediation
@@ -55,6 +57,58 @@ const mainToolbarWrapperStyle = (isTwoLineEditorToolbar = false) => css`
 
 	${fg('platform-visual-refresh-icons') && 'span svg { max-width: 100%; }'}
 `;
+const mainToolbarWrapperStyleNew = css({
+  position: 'relative',
+  alignItems: 'center',
+  padding: `${"var(--ds-space-100, 8px)"} ${"var(--ds-space-100, 8px)"} 0`,
+  display: 'flex',
+  height: 'auto',
+  backgroundColor: "var(--ds-surface, white)",
+  boxShadow: 'none',
+  paddingLeft: "var(--ds-space-250, 20px)",
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '> div': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '> div:first-of-type:not(style), > style:first-of-type + *': {
+      marginLeft: 0
+    }
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+  '.block-type-btn': {
+    paddingLeft: 0
+  }
+});
+const mainToolbarTwoLineStylesNew = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '& > div': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
+    [`@media (max-width: ${MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT}px)`]: {
+      flexDirection: 'column-reverse',
+      alignItems: 'end',
+      display: 'flex',
+      justifyContent: 'flex-end'
+    },
+    /* make this more explicit for a toolbar */
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '> div:first-of-type': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
+      [`@media (max-width: ${MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT}px)`]: {
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+        '> div:nth-of-type(2)': {
+          justifyContent: 'flex-end',
+          display: 'flex'
+        }
+      }
+    }
+  }
+});
+const mainToolbarWrapperStylesVisualRefresh = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  'span svg': {
+    maxWidth: '100%'
+  }
+});
+
 /* eslint-enable @atlaskit/platform/ensure-feature-flag-registration */
 
 // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
@@ -71,6 +125,16 @@ const stickyToolbarWrapperStyle = css`
 			${"var(--ds-background-accent-gray-subtlest, #F1F2F4)"};
 	}
 `;
+const stickyToolbarWrapperStyleNew = css({
+  position: 'sticky',
+  paddingBottom: "var(--ds-space-100, 8px)",
+  zIndex: akEditorMenuZIndex,
+  transition: 'box-shadow ease-in-out 0.2s',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '&.show-keyline': {
+    boxShadow: `0 ${akEditorToolbarKeylineHeight}px 0 0 ${"var(--ds-background-accent-gray-subtlest, #F1F2F4)"}`
+  }
+});
 const StickyToolbar = props => {
   const [top, setTop] = useState(0);
 
@@ -88,8 +152,9 @@ const StickyToolbar = props => {
   return (
     // eslint-disable-next-line @atlaskit/design-system/prefer-primitives
     jsx("div", {
+      css: expValEquals('platform_editor_core_static_emotion_non_central', 'isEnabled', true) ? [mainToolbarWrapperStyleNew, props.twoLineEditorToolbar && mainToolbarTwoLineStylesNew, fg('platform-visual-refresh-icons') && mainToolbarWrapperStylesVisualRefresh, stickyToolbarWrapperStyleNew] :
       // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
-      css: [mainToolbarWrapperStyle(props.twoLineEditorToolbar), stickyToolbarWrapperStyle]
+      [mainToolbarWrapperStyle(props.twoLineEditorToolbar), stickyToolbarWrapperStyle]
       // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
       ,
       style: {
@@ -105,8 +170,9 @@ const StickyToolbar = props => {
 const FixedToolbar = props =>
 // eslint-disable-next-line @atlaskit/design-system/prefer-primitives
 jsx("div", {
+  css: expValEquals('platform_editor_core_static_emotion_non_central', 'isEnabled', true) ? [mainToolbarWrapperStyleNew, props.twoLineEditorToolbar && mainToolbarTwoLineStylesNew, fg('platform-visual-refresh-icons') && mainToolbarWrapperStylesVisualRefresh] :
   // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
-  css: mainToolbarWrapperStyle(props.twoLineEditorToolbar),
+  mainToolbarWrapperStyle(props.twoLineEditorToolbar),
   "data-testid": "ak-editor-main-toolbar"
 }, props.children);
 
@@ -153,24 +219,4 @@ export const MainToolbar = ({
   return jsx(FixedToolbar, {
     twoLineEditorToolbar: twoLineEditorToolbar
   }, children);
-};
-export const mainToolbarCustomComponentsSlotStyle = (isTwoLineEditorToolbar = false) =>
-// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Needs manual remediation
-css`
-		display: flex;
-		justify-content: flex-end;
-		align-items: center;
-		flex-grow: 1;
-		padding-right: ${"var(--ds-space-250, 20px)"};
-		> div {
-			display: flex;
-			flex-shrink: 0;
-		}
-		${isTwoLineEditorToolbar && `
-    @media (max-width: ${MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT}px) {
-      {
-        padding-right: 0;
-      }
-    }
-  `}
-	`;
+};

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

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

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

@@ -21,7 +21,7 @@ import { CodeBlockSharedCssClassName, MediaSharedClassNames, SmartCardSharedCssC
 import { blocktypeStyles } from '@atlaskit/editor-plugins/block-type/styles';
 import { findReplaceStyles } from '@atlaskit/editor-plugins/find-replace/styles';
 import { textHighlightStyle } from '@atlaskit/editor-plugins/paste-options-toolbar/styles';
-import { placeholderTextStyles } from '@atlaskit/editor-plugins/placeholder-text/styles';
+import { 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 { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
@@ -381,6 +381,7 @@ const legacyContentStyles = props => css`
 
 	${fg('platform_editor_fix_floating_toolbar_focus') ? firstFloatingToolbarButtonStyles : null}
 	${placeholderTextStyles}
+	${fg('platform_editor_system_fake_text_highlight_colour') && placeholderTextStyles_fg_platform_editor_system_fake_text_highlight_colour}
 	${placeholderStyles}
 	${editorExperiment('platform_editor_controls', 'variant1') ? placeholderOverflowStyles : null}
 	${editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_quick_insert_placeholder') ? placeholderWrapStyles : null}

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

@@ -44,7 +44,7 @@ import { mediaAlignmentStyles, mediaGroupStyles, mediaStyles } from './styles/me
 import { mentionsStyles, vanillaMentionsSelectionStyles, vanillaMentionsStyles } 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 { placeholderOverflowStyles, placeholderStyles, placeholderTextStyles, placeholderWrapStyles } from './styles/placeholderStyles';
+import { placeholderOverflowStyles, placeholderStyles, placeholderTextStyles, placeholderTextStylesMixin_fg_platform_editor_system_fake_text_highlight_colour, placeholderWrapStyles } from './styles/placeholderStyles';
 import { pragmaticResizerStyles, pragmaticStylesLayoutFirstNodeResizeHandleFix, pragmaticResizerStylesForTooltip, resizerStyles } from './styles/resizerStyles';
 import { ruleStyles } from './styles/rule';
 import { scrollbarStyles } from './styles/scrollbarStyles';
@@ -107,7 +107,9 @@ const EditorContentContainer = /*#__PURE__*/React.forwardRef((props, ref) => {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
     fg('platform_editor_fix_floating_toolbar_focus') && firstFloatingToolbarButtonStyles,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
-    placeholderTextStyles,
+    placeholderTextStyles, fg('platform_editor_system_fake_text_highlight_colour') &&
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    placeholderTextStylesMixin_fg_platform_editor_system_fake_text_highlight_colour,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
     placeholderStyles,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values

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

@@ -64,6 +64,21 @@ export const placeholderTextStyles = css({
   }
 });
 
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
+export const placeholderTextStylesMixin_fg_platform_editor_system_fake_text_highlight_colour = css({
+  // 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-selection': {
+      // Follow the system highlight colour to match native text selection
+      backgroundColor: 'Highlight',
+      // We should also match the text colour to the system highlight text colour.
+      // That way if the system highlight background is dark, the text will still be readable.
+      color: 'HighlightText'
+    }
+  }
+});
+
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export const placeholderStyles = css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766

package/dist/es2019/version-wrapper.js

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

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

@@ -1,4 +1,7 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _templateObject;
 /**
  * @jsxRuntime classic
  * @jsx jsx
@@ -20,6 +23,7 @@ import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared
 import { tableCommentEditorStyles } from '@atlaskit/editor-plugins/table/ui/common-styles';
 import { akEditorMobileBreakoutPoint } from '@atlaskit/editor-shared-styles';
 import { componentWithCondition } from '@atlaskit/platform-feature-flags-react';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 // Ignored via go/ees005
 // eslint-disable-next-line import/no-named-as-default
@@ -31,8 +35,9 @@ import PluginSlot from '../../PluginSlot';
 import { getPrimaryToolbarComponents } from '../../Toolbar/getPrimaryToolbarComponents';
 import { ToolbarWithSizeDetector as Toolbar } from '../../Toolbar/ToolbarWithSizeDetector';
 import WithFlash from '../../WithFlash';
-import { MainToolbar, mainToolbarCustomComponentsSlotStyle } from './Toolbar';
+import { MainToolbar } from './Toolbar';
 var CommentEditorMargin = 14;
+var MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT = 490;
 var commentEditorStyles = css({
   display: 'flex',
   flexDirection: 'column',
@@ -78,6 +83,27 @@ var secondaryToolbarStyles = css({
   display: 'flex',
   padding: "var(--ds-space-150, 12px)".concat(" ", "var(--ds-space-025, 2px)")
 });
+var mainToolbarCustomComponentsSlotStyle = function mainToolbarCustomComponentsSlotStyle() {
+  var isTwoLineEditorToolbar = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+  return (// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Needs manual remediation
+    css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\t\tdisplay: flex;\n\t\tjustify-content: flex-end;\n\t\talign-items: center;\n\t\tflex-grow: 1;\n\t\tpadding-right: ", ";\n\t\t> div {\n\t\t\tdisplay: flex;\n\t\t\tflex-shrink: 0;\n\t\t}\n\t\t", "\n\t"])), "var(--ds-space-250, 20px)", isTwoLineEditorToolbar && "\n    @media (max-width: ".concat(MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT, "px) {\n      {\n        padding-right: 0;\n      }\n    }\n  "))
+  );
+};
+var mainToolbarCustomComponentsSlotStyleNew = css({
+  display: 'flex',
+  justifyContent: 'flex-end',
+  alignItems: 'center',
+  flexGrow: 1,
+  paddingRight: "var(--ds-space-250, 20px)",
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '> div': {
+    display: 'flex',
+    flexShrink: 0
+  }
+});
+var mainToolbarCustomComponentsSlotStyleTwoLineToolbarNew = css(_defineProperty({}, "@media (max-width: ".concat(MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT, "px)"), {
+  paddingRight: 0
+}));
 var appearance = 'comment';
 var EditorContainer = componentWithCondition(function () {
   return editorExperiment('platform_editor_core_static_emotion', true, {
@@ -232,7 +258,8 @@ export var CommentEditorWithIntl = function CommentEditorWithIntl(props) {
     containerElement: containerElement.current,
     twoLineEditorToolbar: isTwoLineToolbarEnabled
   }), jsx("div", {
-    css: mainToolbarCustomComponentsSlotStyle(isTwoLineToolbarEnabled)
+    css: expValEquals('platform_editor_core_static_emotion_non_central', 'isEnabled', true) ? [mainToolbarCustomComponentsSlotStyleNew, isTwoLineToolbarEnabled && mainToolbarCustomComponentsSlotStyleTwoLineToolbarNew] : /* eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766 */
+    mainToolbarCustomComponentsSlotStyle(isTwoLineToolbarEnabled)
   }, customPrimaryToolbarComponents))), jsx(ClickAreaBlock, {
     editorView: editorView,
     editorDisabled: disabled

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

@@ -1,8 +1,9 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _typeof from "@babel/runtime/helpers/typeof";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3;
+var _templateObject, _templateObject2;
 /**
  * @jsxRuntime classic
  * @jsx jsx
@@ -12,9 +13,11 @@ import React, { useEffect, useState } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
-import { akEditorMenuZIndex, akEditorToolbarKeylineHeight } from '@atlaskit/editor-shared-styles';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 var MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT = 490;
+var akEditorMenuZIndex = 500;
+var akEditorToolbarKeylineHeight = 2;
 
 /* eslint-disable @atlaskit/platform/ensure-feature-flag-registration */
 // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Needs manual remediation
@@ -22,10 +25,63 @@ var mainToolbarWrapperStyle = function mainToolbarWrapperStyle() {
   var isTwoLineEditorToolbar = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
   return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\tposition: relative;\n\talign-items: center;\n\tpadding: ", " ", " 0;\n\tdisplay: flex;\n\theight: auto;\n\tbackground-color: ", ";\n\tbox-shadow: none;\n\tpadding-left: ", ";\n\n\t& > div {\n\t\t> :first-child:not(style),\n\t\t> style:first-child + * {\n\t\t\tmargin-left: 0;\n\t\t}\n\t\t", "\n\t}\n\n\t.block-type-btn {\n\t\tpadding-left: 0;\n\t}\n\n\t", "\n"])), "var(--ds-space-100, 8px)", "var(--ds-space-100, 8px)", "var(--ds-surface, white)", "var(--ds-space-250, 20px)", isTwoLineEditorToolbar && "\n        @media (max-width: ".concat(MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT, "px) {\n          flex-direction: column-reverse;\n          align-items: end;\n          display: flex;\n          justify-content: flex-end;\n        }\n\n        /* make this more explicit for a toolbar */\n        > *:nth-child(1) {\n          @media (max-width: ").concat(MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT, "px) {\n            > div:nth-child(2) {\n              justify-content: flex-end;\n              display: flex;\n            }\n          }\n        }\n    "), fg('platform-visual-refresh-icons') && 'span svg { max-width: 100%; }');
 };
+var mainToolbarWrapperStyleNew = css({
+  position: 'relative',
+  alignItems: 'center',
+  padding: "var(--ds-space-100, 8px)".concat(" ", "var(--ds-space-100, 8px)", " 0"),
+  display: 'flex',
+  height: 'auto',
+  backgroundColor: "var(--ds-surface, white)",
+  boxShadow: 'none',
+  paddingLeft: "var(--ds-space-250, 20px)",
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '> div': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '> div:first-of-type:not(style), > style:first-of-type + *': {
+      marginLeft: 0
+    }
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+  '.block-type-btn': {
+    paddingLeft: 0
+  }
+});
+var mainToolbarTwoLineStylesNew = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '& > div': _defineProperty(_defineProperty({}, "@media (max-width: ".concat(MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT, "px)"), {
+    flexDirection: 'column-reverse',
+    alignItems: 'end',
+    display: 'flex',
+    justifyContent: 'flex-end'
+  }), '> div:first-of-type', _defineProperty({}, "@media (max-width: ".concat(MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT, "px)"), {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '> div:nth-of-type(2)': {
+      justifyContent: 'flex-end',
+      display: 'flex'
+    }
+  }))
+});
+var mainToolbarWrapperStylesVisualRefresh = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  'span svg': {
+    maxWidth: '100%'
+  }
+});
+
 /* eslint-enable @atlaskit/platform/ensure-feature-flag-registration */
 
 // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
 var stickyToolbarWrapperStyle = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n\t/* stylelint-disable declaration-block-no-duplicate-properties */\n\tposition: relative;\n\tposition: sticky;\n\t/* stylelint-enable declaration-block-no-duplicate-properties */\n\tpadding-bottom: ", ";\n\tz-index: ", ";\n\ttransition: box-shadow ease-in-out 0.2s;\n\t&.show-keyline {\n\t\tbox-shadow: 0 ", "px 0 0\n\t\t\t", ";\n\t}\n"])), "var(--ds-space-100, 8px)", akEditorMenuZIndex, akEditorToolbarKeylineHeight, "var(--ds-background-accent-gray-subtlest, #F1F2F4)");
+var stickyToolbarWrapperStyleNew = css({
+  position: 'sticky',
+  paddingBottom: "var(--ds-space-100, 8px)",
+  zIndex: akEditorMenuZIndex,
+  transition: 'box-shadow ease-in-out 0.2s',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '&.show-keyline': {
+    boxShadow: "0 ".concat(akEditorToolbarKeylineHeight, "px 0 0 ", "var(--ds-background-accent-gray-subtlest, #F1F2F4)")
+  }
+});
 var StickyToolbar = function StickyToolbar(props) {
   var _useState = useState(0),
     _useState2 = _slicedToArray(_useState, 2),
@@ -46,8 +102,9 @@ var StickyToolbar = function StickyToolbar(props) {
   return (
     // eslint-disable-next-line @atlaskit/design-system/prefer-primitives
     jsx("div", {
+      css: expValEquals('platform_editor_core_static_emotion_non_central', 'isEnabled', true) ? [mainToolbarWrapperStyleNew, props.twoLineEditorToolbar && mainToolbarTwoLineStylesNew, fg('platform-visual-refresh-icons') && mainToolbarWrapperStylesVisualRefresh, stickyToolbarWrapperStyleNew] :
       // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
-      css: [mainToolbarWrapperStyle(props.twoLineEditorToolbar), stickyToolbarWrapperStyle]
+      [mainToolbarWrapperStyle(props.twoLineEditorToolbar), stickyToolbarWrapperStyle]
       // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
       ,
       style: {
@@ -64,8 +121,9 @@ var FixedToolbar = function FixedToolbar(props) {
   return (
     // eslint-disable-next-line @atlaskit/design-system/prefer-primitives
     jsx("div", {
+      css: expValEquals('platform_editor_core_static_emotion_non_central', 'isEnabled', true) ? [mainToolbarWrapperStyleNew, props.twoLineEditorToolbar && mainToolbarTwoLineStylesNew, fg('platform-visual-refresh-icons') && mainToolbarWrapperStylesVisualRefresh] :
       // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
-      css: mainToolbarWrapperStyle(props.twoLineEditorToolbar),
+      mainToolbarWrapperStyle(props.twoLineEditorToolbar),
       "data-testid": "ak-editor-main-toolbar"
     }, props.children)
   );
@@ -113,10 +171,4 @@ export var MainToolbar = function MainToolbar(_ref) {
   return jsx(FixedToolbar, {
     twoLineEditorToolbar: twoLineEditorToolbar
   }, children);
-};
-export var mainToolbarCustomComponentsSlotStyle = function mainToolbarCustomComponentsSlotStyle() {
-  var isTwoLineEditorToolbar = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
-  return (// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Needs manual remediation
-    css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n\t\tdisplay: flex;\n\t\tjustify-content: flex-end;\n\t\talign-items: center;\n\t\tflex-grow: 1;\n\t\tpadding-right: ", ";\n\t\t> div {\n\t\t\tdisplay: flex;\n\t\t\tflex-shrink: 0;\n\t\t}\n\t\t", "\n\t"])), "var(--ds-space-250, 20px)", isTwoLineEditorToolbar && "\n    @media (max-width: ".concat(MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT, "px) {\n      {\n        padding-right: 0;\n      }\n    }\n  "))
-  );
 };

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

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

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

@@ -23,7 +23,7 @@ import { CodeBlockSharedCssClassName, MediaSharedClassNames, SmartCardSharedCssC
 import { blocktypeStyles } from '@atlaskit/editor-plugins/block-type/styles';
 import { findReplaceStyles } from '@atlaskit/editor-plugins/find-replace/styles';
 import { textHighlightStyle } from '@atlaskit/editor-plugins/paste-options-toolbar/styles';
-import { placeholderTextStyles } from '@atlaskit/editor-plugins/placeholder-text/styles';
+import { 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 { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
@@ -145,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\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  ", "\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\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  ", "\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)", 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, {
+  }), 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, fg('platform_editor_system_fake_text_highlight_colour') && placeholderTextStyles_fg_platform_editor_system_fake_text_highlight_colour, 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

@@ -44,7 +44,7 @@ import { mediaAlignmentStyles, mediaGroupStyles, mediaStyles } from './styles/me
 import { mentionsStyles, vanillaMentionsSelectionStyles, vanillaMentionsStyles } 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 { placeholderOverflowStyles, placeholderStyles, placeholderTextStyles, placeholderWrapStyles } from './styles/placeholderStyles';
+import { placeholderOverflowStyles, placeholderStyles, placeholderTextStyles, placeholderTextStylesMixin_fg_platform_editor_system_fake_text_highlight_colour, placeholderWrapStyles } from './styles/placeholderStyles';
 import { pragmaticResizerStyles, pragmaticStylesLayoutFirstNodeResizeHandleFix, pragmaticResizerStylesForTooltip, resizerStyles } from './styles/resizerStyles';
 import { ruleStyles } from './styles/rule';
 import { scrollbarStyles } from './styles/scrollbarStyles';
@@ -104,7 +104,9 @@ var EditorContentContainer = /*#__PURE__*/React.forwardRef(function (props, ref)
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
     fg('platform_editor_fix_floating_toolbar_focus') && firstFloatingToolbarButtonStyles,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
-    placeholderTextStyles,
+    placeholderTextStyles, fg('platform_editor_system_fake_text_highlight_colour') &&
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    placeholderTextStylesMixin_fg_platform_editor_system_fake_text_highlight_colour,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
     placeholderStyles,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values

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

@@ -64,6 +64,21 @@ export var placeholderTextStyles = css({
   }
 });
 
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
+export var placeholderTextStylesMixin_fg_platform_editor_system_fake_text_highlight_colour = css({
+  // 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-selection': {
+      // Follow the system highlight colour to match native text selection
+      backgroundColor: 'Highlight',
+      // We should also match the text colour to the system highlight text colour.
+      // That way if the system highlight background is dark, the text will still be readable.
+      color: 'HighlightText'
+    }
+  }
+});
+
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export var placeholderStyles = css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766

package/dist/esm/version-wrapper.js

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

package/dist/types/ui/Appearance/Comment/Toolbar.d.ts

@@ -7,5 +7,4 @@ type MainToolbarProps = {
     children?: React.ReactNode;
 };
 export declare const MainToolbar: ({ useStickyToolbar, twoLineEditorToolbar, children, }: MainToolbarProps) => jsx.JSX.Element;
-export declare const mainToolbarCustomComponentsSlotStyle: (isTwoLineEditorToolbar?: boolean) => import("@emotion/react").SerializedStyles;
 export {};

package/dist/types/ui/EditorContentContainer/styles/placeholderStyles.d.ts

@@ -1,4 +1,5 @@
 export declare const placeholderTextStyles: import("@emotion/react").SerializedStyles;
+export declare const placeholderTextStylesMixin_fg_platform_editor_system_fake_text_highlight_colour: import("@emotion/react").SerializedStyles;
 export declare const placeholderStyles: import("@emotion/react").SerializedStyles;
 export declare const placeholderOverflowStyles: import("@emotion/react").SerializedStyles;
 export declare const placeholderWrapStyles: import("@emotion/react").SerializedStyles;

package/dist/types-ts4.5/ui/Appearance/Comment/Toolbar.d.ts

@@ -7,5 +7,4 @@ type MainToolbarProps = {
     children?: React.ReactNode;
 };
 export declare const MainToolbar: ({ useStickyToolbar, twoLineEditorToolbar, children, }: MainToolbarProps) => jsx.JSX.Element;
-export declare const mainToolbarCustomComponentsSlotStyle: (isTwoLineEditorToolbar?: boolean) => import("@emotion/react").SerializedStyles;
 export {};

package/dist/types-ts4.5/ui/EditorContentContainer/styles/placeholderStyles.d.ts

@@ -1,4 +1,5 @@
 export declare const placeholderTextStyles: import("@emotion/react").SerializedStyles;
+export declare const placeholderTextStylesMixin_fg_platform_editor_system_fake_text_highlight_colour: import("@emotion/react").SerializedStyles;
 export declare const placeholderStyles: import("@emotion/react").SerializedStyles;
 export declare const placeholderOverflowStyles: import("@emotion/react").SerializedStyles;
 export declare const placeholderWrapStyles: import("@emotion/react").SerializedStyles;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-core",
-	"version": "207.21.3",
+	"version": "207.22.0",
 	"description": "A package contains Atlassian editor core functionality",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -46,12 +46,12 @@
 		"@atlaskit/analytics-next-stable-react-context": "1.0.1",
 		"@atlaskit/button": "^23.2.0",
 		"@atlaskit/css": "^0.10.0",
-		"@atlaskit/editor-common": "^106.9.0",
+		"@atlaskit/editor-common": "^106.10.0",
 		"@atlaskit/editor-json-transformer": "^8.24.0",
 		"@atlaskit/editor-performance-metrics": "^2.1.0",
 		"@atlaskit/editor-plugin-quick-insert": "^2.6.0",
 		"@atlaskit/editor-plugin-user-preferences": "^0.2.0",
-		"@atlaskit/editor-plugins": "^9.1.0",
+		"@atlaskit/editor-plugins": "^9.2.0",
 		"@atlaskit/editor-prosemirror": "7.0.0",
 		"@atlaskit/editor-shared-styles": "^3.4.0",
 		"@atlaskit/emoji": "^69.3.0",
@@ -542,9 +542,6 @@
 			"type": "boolean",
 			"referenceOnly": true
 		},
-		"platform_editor_find_and_replace_duplication": {
-			"type": "boolean"
-		},
 		"platform_editor_find_and_replace_1": {
 			"type": "boolean"
 		},
@@ -555,30 +552,6 @@
 			"type": "boolean",
 			"referenceOnly": true
 		},
-		"platform_editor_controls_increase_full_page_gutter": {
-			"type": "boolean",
-			"referenceOnly": true
-		},
-		"platform_editor_controls_patch_2": {
-			"type": "boolean",
-			"referenceOnly": true
-		},
-		"platform_editor_controls_patch_3": {
-			"type": "boolean",
-			"referenceOnly": true
-		},
-		"platform_editor_controls_patch_4": {
-			"type": "boolean",
-			"referenceOnly": true
-		},
-		"platform_editor_controls_patch_5": {
-			"type": "boolean",
-			"referenceOnly": true
-		},
-		"platform_editor_controls_patch_6": {
-			"type": "boolean",
-			"referenceOnly": true
-		},
 		"platform_editor_controls_patch_7": {
 			"type": "boolean",
 			"referenceOnly": true
@@ -664,6 +637,9 @@
 		"platform_editor_add_border_for_nested_panel": {
 			"type": "boolean",
 			"referenceOnly": true
+		},
+		"platform_editor_system_fake_text_highlight_colour": {
+			"type": "boolean"
 		}
 	},
 	"stricter": {