@atlaskit/editor-core 207.21.2 → 207.22.0

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @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
+
+- [#172260](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/172260)
+  [`ab178138e93db`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/ab178138e93db) -
+  revert list layout shift fix
+- Updated dependencies
+
 ## 207.21.2
 
 ### Patch Changes

package/dist/cjs/create-editor/ReactEditorView.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.ReactEditorView = ReactEditorView;
 exports.default = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
@@ -27,6 +28,7 @@ var _document = require("@atlaskit/editor-common/utils/document");
 var _state2 = require("@atlaskit/editor-prosemirror/state");
 var _view = require("@atlaskit/editor-prosemirror/view");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _interactionMetrics = require("@atlaskit/react-ufo/interaction-metrics");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _useProviders = require("../composable-editor/hooks/useProviders");
@@ -45,6 +47,9 @@ var _handleEditorFocus = require("./ReactEditorView/handleEditorFocus");
 var _useDispatchTransaction = require("./ReactEditorView/useDispatchTransaction");
 var _useFireFullWidthEvent = require("./ReactEditorView/useFireFullWidthEvent");
 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); }
+function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var EDIT_AREA_ID = 'ak-editor-textarea';
@@ -498,7 +503,77 @@ function ReactEditorView(props) {
       }
     }
   }, [editorView, shouldFocus, __livePage, mitigateScrollJump]);
+  var scrollElement = _react.default.useRef();
+  var possibleListeners = _react.default.useRef([]);
+  _react.default.useEffect(function () {
+    return function () {
+      if ((0, _platformFeatureFlags.fg)('cc_editor_abort_ufo_load_on_editor_scroll')) {
+        if (scrollElement.current) {
+          // eslint-disable-next-line react-hooks/exhaustive-deps
+          var _iterator = _createForOfIteratorHelper(possibleListeners.current),
+            _step;
+          try {
+            for (_iterator.s(); !(_step = _iterator.n()).done;) {
+              var _scrollElement$curren;
+              var possibleListener = _step.value;
+              // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
+              (_scrollElement$curren = scrollElement.current) === null || _scrollElement$curren === void 0 || _scrollElement$curren.removeEventListener.apply(_scrollElement$curren, (0, _toConsumableArray2.default)(possibleListener));
+            }
+          } catch (err) {
+            _iterator.e(err);
+          } finally {
+            _iterator.f();
+          }
+        }
+        scrollElement.current = null;
+      }
+    };
+  }, []);
   var handleEditorViewRef = (0, _react.useCallback)(function (node) {
+    if ((0, _platformFeatureFlags.fg)('cc_editor_abort_ufo_load_on_editor_scroll')) {
+      if (node) {
+        scrollElement.current = document.querySelector('[data-editor-scroll-container]');
+        var cleanupListeners = function cleanupListeners() {
+          // eslint-disable-next-line react-hooks/exhaustive-deps
+          var _iterator2 = _createForOfIteratorHelper(possibleListeners.current),
+            _step2;
+          try {
+            for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+              var _scrollElement$curren2;
+              var possibleListener = _step2.value;
+              // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
+              (_scrollElement$curren2 = scrollElement.current) === null || _scrollElement$curren2 === void 0 || _scrollElement$curren2.removeEventListener.apply(_scrollElement$curren2, (0, _toConsumableArray2.default)(possibleListener));
+            }
+          } catch (err) {
+            _iterator2.e(err);
+          } finally {
+            _iterator2.f();
+          }
+        };
+        if (scrollElement.current) {
+          var wheelAbortHandler = function wheelAbortHandler() {
+            var activeInteraction = (0, _interactionMetrics.getActiveInteraction)();
+            if (activeInteraction && ['edit-page', 'live-edit'].includes(activeInteraction.ufoName)) {
+              (0, _interactionMetrics.abortAll)('new_interaction', "wheel-on-editor-element");
+            }
+            cleanupListeners();
+          };
+          // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
+          scrollElement.current.addEventListener('wheel', wheelAbortHandler);
+          possibleListeners.current.push(['wheel', wheelAbortHandler]);
+          var scrollAbortHandler = function scrollAbortHandler() {
+            var activeInteraction = (0, _interactionMetrics.getActiveInteraction)();
+            if (activeInteraction && ['edit-page', 'live-edit'].includes(activeInteraction.ufoName)) {
+              (0, _interactionMetrics.abortAll)('new_interaction', "scroll-on-editor-element");
+            }
+            cleanupListeners();
+          };
+          // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
+          scrollElement.current.addEventListener('scroll', scrollAbortHandler);
+          possibleListeners.current.push(['scroll', scrollAbortHandler]);
+        }
+      }
+    }
     if (!viewRef.current && node) {
       // make sure this doesn't expose the experiment
       if ((0, _experiments.editorExperiment)('platform_editor_nodevisibility', true, {
@@ -509,8 +584,8 @@ function ReactEditorView(props) {
       var view = createEditorView(node);
       if ((0, _platformFeatureFlags.fg)('platform_editor_reduce_scroll_jump_on_editor_start')) {
         if (mitigateScrollJump) {
-          var scrollElement = document.querySelector('[data-editor-scroll-container]');
-          scrollElement === null || scrollElement === void 0 || scrollElement.scrollTo({
+          var _scrollElement = document.querySelector('[data-editor-scroll-container]');
+          _scrollElement === null || _scrollElement === void 0 || _scrollElement.scrollTo({
             top: originalScrollToRestore.current,
             behavior: 'instant'
           });

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
@@ -170,13 +170,6 @@ var legacyContentStyles = function legacyContentStyles(props) {
     exposure: false
   }) && !(0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') && _tasksAndDecisions.vanillaTaskDecisionIconWithoutVisualRefresh, _status.statusStyles, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true) ? (0, _status.vanillaStatusStyles)() : null, (0, _styles.annotationSharedStyles)(), (0, _styles.smartCardStyles)(), (0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1') ? (0, _styles.getSmartCardSharedStyles)() : _styles.smartCardSharedStyles, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true) ? _date.dateVanillaStyles : null, _date.dateStyles, (0, _styles.embedCardStyles)(), _styles.unsupportedStyles, _styles.resizerStyles, (0, _styles.pragmaticResizerStyles)(), (0, _styles.pragmaticStylesLayoutFirstNodeResizeHandleFix)(), (0, _styles.pragmaticResizerStylesForTooltip)(), (0, _aiPanels.aiPanelStyles)(props.colorMode), firstBlockNodeStylesNew, _styles.MediaSharedClassNames.FLOATING_TOOLBAR_COMPONENT, !(0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') ? (0, _react2.css)(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t.hyperlink-open-link {\n\t\t\t\t\tmin-width: 24px;\n\t\t\t\t\tsvg {\n\t\t\t\t\t\tmax-width: 18px;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t"]))) : null);
 };
-var listLayoutShiftFix = (0, _react2.css)({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  '.ProseMirror ul, .ProseMirror ol': {
-    // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
-    marginTop: '10px'
-  }
-});
 var createEditorContentStyle = exports.createEditorContentStyle = function createEditorContentStyle(styles) {
   return /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     var className = props.className,
@@ -209,7 +202,7 @@ var createEditorContentStyle = exports.createEditorContentStyle = function creat
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       className: className,
       ref: ref,
-      css: [memoizedStyle, styles, (0, _platformFeatureFlags.fg)('platform_editor_ssr_fix_lists') && listLayoutShiftFix],
+      css: [memoizedStyle, styles],
       "data-testid": "editor-content-container"
     }, children);
   });

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
@@ -306,9 +308,7 @@ var EditorContentContainer = /*#__PURE__*/_react.default.forwardRef(function (pr
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
     isFullPage && _fullPageEditorStyles.fullPageEditorStyles,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
-    isFullPage && _scrollbarStyles.scrollbarStyles,
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
-    (0, _platformFeatureFlags.fg)('platform_editor_ssr_fix_lists') && _list.listLayoutShiftFix, (0, _platformFeatureFlags.fg)('platform_editor_nested_dnd_styles_changes') ?
+    isFullPage && _scrollbarStyles.scrollbarStyles, (0, _platformFeatureFlags.fg)('platform_editor_nested_dnd_styles_changes') ?
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
     _codeBlockStyles.firstCodeBlockWithNoMargin :
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values

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

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.listsStylesSafariFix = exports.listsStyles = exports.listLayoutShiftFix = void 0;
+exports.listsStylesSafariFix = exports.listsStyles = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("@emotion/react");
 // eslint-disable-line @atlaskit/ui-styling-standard/use-compiled
@@ -147,13 +147,4 @@ var listsStylesSafariFix = exports.listsStylesSafariFix = (0, _react.css)((0, _d
 }), ".ProseMirror:not(.".concat(BLOCK_CARD_CONTAINER, ") > li > p:first-child, .ProseMirror:not(.").concat(BLOCK_CARD_CONTAINER, ") > li > .code-block:first-child, .ProseMirror:not(.").concat(BLOCK_CARD_CONTAINER, ") > li > .ProseMirror-gapcursor:first-child + .code-block"), {
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles, @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
   marginTop: "-".concat(akEditorLineHeight, "em !important")
-}));
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
-var listLayoutShiftFix = exports.listLayoutShiftFix = (0, _react.css)({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  '.ProseMirror ul, .ProseMirror ol': {
-    // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
-    marginTop: '10px'
-  }
-});
+}));

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

package/dist/es2019/create-editor/ReactEditorView.js

@@ -16,6 +16,7 @@ import { isEmptyDocument } from '@atlaskit/editor-common/utils/document';
 import { EditorState, Selection, TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { abortAll, getActiveInteraction } from '@atlaskit/react-ufo/interaction-metrics';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { useProviders } from '../composable-editor/hooks/useProviders';
@@ -469,7 +470,59 @@ export function ReactEditorView(props) {
       }
     }
   }, [editorView, shouldFocus, __livePage, mitigateScrollJump]);
+  const scrollElement = React.useRef();
+  const possibleListeners = React.useRef([]);
+  React.useEffect(() => {
+    return () => {
+      if (fg('cc_editor_abort_ufo_load_on_editor_scroll')) {
+        if (scrollElement.current) {
+          // eslint-disable-next-line react-hooks/exhaustive-deps
+          for (const possibleListener of possibleListeners.current) {
+            var _scrollElement$curren;
+            // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
+            (_scrollElement$curren = scrollElement.current) === null || _scrollElement$curren === void 0 ? void 0 : _scrollElement$curren.removeEventListener(...possibleListener);
+          }
+        }
+        scrollElement.current = null;
+      }
+    };
+  }, []);
   const handleEditorViewRef = useCallback(node => {
+    if (fg('cc_editor_abort_ufo_load_on_editor_scroll')) {
+      if (node) {
+        scrollElement.current = document.querySelector('[data-editor-scroll-container]');
+        const cleanupListeners = () => {
+          // eslint-disable-next-line react-hooks/exhaustive-deps
+          for (const possibleListener of possibleListeners.current) {
+            var _scrollElement$curren2;
+            // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
+            (_scrollElement$curren2 = scrollElement.current) === null || _scrollElement$curren2 === void 0 ? void 0 : _scrollElement$curren2.removeEventListener(...possibleListener);
+          }
+        };
+        if (scrollElement.current) {
+          const wheelAbortHandler = () => {
+            const activeInteraction = getActiveInteraction();
+            if (activeInteraction && ['edit-page', 'live-edit'].includes(activeInteraction.ufoName)) {
+              abortAll('new_interaction', `wheel-on-editor-element`);
+            }
+            cleanupListeners();
+          };
+          // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
+          scrollElement.current.addEventListener('wheel', wheelAbortHandler);
+          possibleListeners.current.push(['wheel', wheelAbortHandler]);
+          const scrollAbortHandler = () => {
+            const activeInteraction = getActiveInteraction();
+            if (activeInteraction && ['edit-page', 'live-edit'].includes(activeInteraction.ufoName)) {
+              abortAll('new_interaction', `scroll-on-editor-element`);
+            }
+            cleanupListeners();
+          };
+          // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
+          scrollElement.current.addEventListener('scroll', scrollAbortHandler);
+          possibleListeners.current.push(['scroll', scrollAbortHandler]);
+        }
+      }
+    }
     if (!viewRef.current && node) {
       // make sure this doesn't expose the experiment
       if (editorExperiment('platform_editor_nodevisibility', true, {