@atlaskit/editor-core 208.3.6 → 208.4.1

package/CHANGELOG.md

@@ -1,5 +1,35 @@
 # @atlaskit/editor-core
 
+## 208.4.1
+
+### Patch Changes
+
+- [#176892](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/176892)
+  [`7c387af73cfb2`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/7c387af73cfb2) -
+  [ux] Prevent scroll on focus before editor
+- [#176864](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/176864)
+  [`980fda095ab20`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/980fda095ab20) -
+  [ux] Adjust mention styles to use flex centering instead of fixed padding values
+- [#177647](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/177647)
+  [`422759e00f33d`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/422759e00f33d) -
+  ED-28282 Clean up platform_editor_fix_table_width_inline_comment
+- Updated dependencies
+
+## 208.4.0
+
+### Minor Changes
+
+- [#177117](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/177117)
+  [`49ae44aea25fc`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/49ae44aea25fc) -
+  Add new styles for inline nodes for find and replace, include these in block node checks
+
+### Patch Changes
+
+- [#177523](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/177523)
+  [`1faed88065ff6`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/1faed88065ff6) -
+  refactor editor fullpage toolbar height in FullPageContentArea
+- Updated dependencies
+
 ## 208.3.6
 
 ### Patch Changes

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

@@ -9,5 +9,7 @@ function focusEditorElement(editorId) {
   if (!(parentElement instanceof HTMLElement)) {
     return;
   }
-  parentElement.focus();
+  parentElement.focus({
+    preventScroll: true
+  });
 }

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

@@ -46,8 +46,6 @@ var tableMarginFullWidthMode = 2;
 var akLayoutGutterOffset = 12;
 var SWOOP_ANIMATION = "0.5s ".concat(akEditorSwoopCubicBezier);
 var AK_NESTED_DND_GUTTER_OFFSET = 8;
-var FULL_PAGE_EDITOR_TOOLBAR_HEIGHT = "var(--ds-space-500, 40px)";
-var FULL_PAGE_EDITOR_TOOLBAR_HEIGHT_LIVE_PAGE = '2.188rem';
 var getTotalPadding = function getTotalPadding() {
   return (0, _editorSharedStyles.akEditorGutterPaddingDynamic)() * 2;
 };
@@ -57,7 +55,7 @@ var editorContentAreaStyle = function editorContentAreaStyle(_ref) {
   var layoutMaxWidth = _ref.layoutMaxWidth,
     fullWidthMode = _ref.fullWidthMode,
     isEditorToolbarHidden = _ref.isEditorToolbarHidden;
-  return [editorContentArea, editorContentAreaProsemirrorStyle, (0, _platformFeatureFlags.fg)('platform_editor_fix_table_width_inline_comment') ? fullWidthNonChromelessBreakoutBlockTableStyle : fullWidthModeBreakoutBlockTableStyle, !fullWidthMode && editorContentAreaWithLayoutWith(layoutMaxWidth),
+  return [editorContentArea, editorContentAreaProsemirrorStyle, fullWidthNonChromelessBreakoutBlockTableStyle, !fullWidthMode && editorContentAreaWithLayoutWith(layoutMaxWidth),
   // for breakout resizing, there's no need to restrict the width of codeblocks as they're always wrapped in a breakout mark
   (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_breakout_resizing', 'isEnabled', true) && (0, _platformFeatureFlags.fg)('platform_editor_breakout_resizing_width_changes') ? editorContentAreaContainerStyleExcludeCodeBlock() : editorContentAreaContainerStyle()].concat((0, _toConsumableArray2.default)((0, _platformFeatureFlags.fg)('platform_editor_controls_no_toolbar_space') ? [] : [(0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') &&
   // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values
@@ -164,23 +162,6 @@ var editorContentAreaProsemirrorStyle = (0, _react2.css)({
     marginBottom: "var(--ds-space-300, 24px)"
   })
 });
-var fullWidthModeBreakoutBlockTableStyle = (0, _react2.css)({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-1
-  '.fabric-editor--full-width-mode': {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-    '.fabric-editor-breakout-mark, .extension-container.block, .pm-table-container': {
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
-      width: '100% !important'
-    },
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-    '.fabric-editor-breakout-mark': {
-      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview, @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
-      marginLeft: 'unset !important',
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
-      transform: 'none !important'
-    }
-  }
-});
 var fullWidthNonChromelessBreakoutBlockTableStyle = (0, _react2.css)({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-1
   '.fabric-editor--full-width-mode:not(:has(#chromeless-editor))': {
@@ -220,18 +201,6 @@ var editorContentGutterStyle = function editorContentGutterStyle() {
 };
 
 // new styles
-var editorContentAreaNoToolbarLivePageJumpMitigation = (0, _react2.css)({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
-  '.ak-editor-content-area-no-toolbar &': {
-    paddingTop: "calc(".concat("var(--ds-space-600, 48px)", " + ", FULL_PAGE_EDITOR_TOOLBAR_HEIGHT_LIVE_PAGE, " + 1px)")
-  }
-});
-var editorContentAreaNoToolbarControls = (0, _react2.css)({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
-  '.ak-editor-content-area-no-toolbar &': {
-    paddingTop: "calc(".concat("var(--ds-space-600, 48px)", " + ", FULL_PAGE_EDITOR_TOOLBAR_HEIGHT, " + 1px)")
-  }
-});
 var editorContentAreaNew = (0, _react2.css)({
   // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
   lineHeight: '24px',
@@ -240,7 +209,7 @@ var editorContentAreaNew = (0, _react2.css)({
   '.ak-editor-content-area-no-toolbar &': {
     // When the toolbar is hidden, we don't want content to jump up
     // the extra 1px is to account for the border on the toolbar
-    paddingTop: "calc(".concat("var(--ds-space-600, 48px)", " + ", FULL_PAGE_EDITOR_TOOLBAR_HEIGHT, " + 1px)")
+    paddingTop: "calc(".concat("var(--ds-space-600, 48px)", " + var(--ak-editor-fullpage-toolbar-height) + 1px)")
   },
   paddingBottom: "var(--ds-space-600, 48px)",
   height: 'calc( 100% - 105px )',
@@ -330,7 +299,7 @@ var editorContentGutterStyles = (0, _react2.css)({
 var contentAreaNew = (0, _react2.css)({
   display: 'flex',
   flexDirection: 'row',
-  height: "calc(100% - ".concat(FULL_PAGE_EDITOR_TOOLBAR_HEIGHT, ")"),
+  height: "calc(100% - var(--ak-editor-fullpage-toolbar-height))",
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values
   '&.ak-editor-content-area-no-toolbar': {
     // The editor toolbar height is 1px off (from the border) -- so we need to add 1px to the height
@@ -342,12 +311,6 @@ var contentAreaNew = (0, _react2.css)({
   padding: 0,
   transition: "padding 0ms ".concat(akEditorSwoopCubicBezier)
 });
-var contentAreaHeightLivePageJumpMitigation = (0, _react2.css)({
-  height: "calc(100% - ".concat(FULL_PAGE_EDITOR_TOOLBAR_HEIGHT_LIVE_PAGE, ")")
-});
-var contentAreaHeightControls = (0, _react2.css)({
-  height: "calc(100% - ".concat(FULL_PAGE_EDITOR_TOOLBAR_HEIGHT, ")")
-});
 var contentAreaHeightNoToolbar = (0, _react2.css)({
   height: '100%'
 });
@@ -404,9 +367,7 @@ var Content = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     return (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1');
   };
   return (0, _react2.jsx)("div", {
-    css: (0, _expValEquals.expValEquals)('platform_editor_core_static_emotion_non_central', 'isEnabled', true) ? [contentAreaNew, (0, _platformFeatureFlags.fg)('live_pages_content_jump_mitigation') && contentAreaHeightLivePageJumpMitigation, (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1', {
-      exposure: true
-    }) && contentAreaHeightControls, props.isEditorToolbarHidden && contentAreaHeightNoToolbar] : [
+    css: (0, _expValEquals.expValEquals)('platform_editor_core_static_emotion_non_central', 'isEnabled', true) ? [contentAreaNew, props.isEditorToolbarHidden && contentAreaHeightNoToolbar] : [
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
     _StyledComponents.contentArea,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
@@ -432,9 +393,7 @@ var Content = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     editorView: props.editorView,
     editorDisabled: props.disabled
   }, (0, _react2.jsx)("div", {
-    css: (0, _expValEquals.expValEquals)('platform_editor_core_static_emotion_non_central', 'isEnabled', true) ? [editorContentAreaNew, editorContentAreaProsemirrorStyle, tableFullPageEditorStylesNew, (0, _platformFeatureFlags.fg)('live_pages_content_jump_mitigation') && editorContentAreaNoToolbarLivePageJumpMitigation, (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1', {
-      exposure: true
-    }) && editorContentAreaNoToolbarControls, (0, _platformFeatureFlags.fg)('platform_editor_fix_table_width_inline_comment') ? fullWidthNonChromelessBreakoutBlockTableStyle : fullWidthModeBreakoutBlockTableStyle,
+    css: (0, _expValEquals.expValEquals)('platform_editor_core_static_emotion_non_central', 'isEnabled', true) ? [editorContentAreaNew, editorContentAreaProsemirrorStyle, tableFullPageEditorStylesNew, fullWidthNonChromelessBreakoutBlockTableStyle,
     // for breakout resizing, there's no need to restrict the width of codeblocks as they're always wrapped in a breakout mark
     (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_breakout_resizing', 'isEnabled', true) && (0, _platformFeatureFlags.fg)('platform_editor_breakout_resizing_width_changes') ? editorContentAreaContainerStyleExcludeCodeBlockNew : editorContentAreaContainerStyleNew, (0, _platformFeatureFlags.fg)('platform_editor_nested_dnd_styles_changes') && editorContentAreaContainerNestedDndStyle, !(0, _platformFeatureFlags.fg)('platform_editor_controls_no_toolbar_space') && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && contentAreaReducedHeaderSpace, !(0, _platformFeatureFlags.fg)('platform_editor_controls_no_toolbar_space') && props.isEditorToolbarHidden && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && contentAreaReservedPrimaryToolbarSpace] : (0, _toConsumableArray2.default)(editorContentAreaStyle({
       fullWidthMode: fullWidthMode,

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

@@ -100,6 +100,16 @@ var mentionNodeStyles = (0, _react2.css)({
     }
   }
 });
+
+// The feature-gate for this is dependent on the use of refreshed typography - bear this in mind when cleaning up
+// This is currently enforced through statsig prerequisite gates, as per #help-afm recommendation.
+// So it will need to be considered if the typography gates are still in use when this is cleaned up.
+var mentionNodeStylesMixin_fg_platform_editor_centre_mention_padding = (0, _react2.css)({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '.editor-mention-primitive': {
+    padding: '1px 0.3em 1px 0.23em'
+  }
+});
 var vanillaSelectionStyles = (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n\t.danger {\n\t\t.editor-mention-primitive {\n\t\t\tbox-shadow: 0 0 0 ", "px ", ";\n\t\t\tbackground-color: ", ";\n\t\t}\n\t}\n\n\t.", " > .editor-mention-primitive,\n\t.", " > .editor-mention-primitive.mention-self,\n\t.", " > .editor-mention-primitive.mention-restricted {\n\t\t", "\n\t\t/* need to specify dark text colour because personal mentions\n\t       (in dark blue) have white text by default */\n\t\tcolor: ", "\n\t}\n"])), _editorSharedStyles.akEditorSelectedBorderSize, _editorSharedStyles.akEditorDeleteBorder, "var(--ds-background-danger, ".concat(_editorSharedStyles.akEditorDeleteBackgroundWithOpacity, ")"), _editorSharedStyles.akEditorSelectedNodeClassName, _editorSharedStyles.akEditorSelectedNodeClassName, _editorSharedStyles.akEditorSelectedNodeClassName, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow, _editorSharedStyles.SelectionStyle.Background]), "var(--ds-text-subtle, #44546F)");
 var mentionsStyles = (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n\t.", " {\n\t\t&.", " [data-mention-id] > span {\n\t\t\t", "\n\n\t\t\t/* need to specify dark text colour because personal mentions\n         (in dark blue) have white text by default */\n      color: ", ";\n\t\t}\n\t}\n\n\t.danger {\n\t\t.", ".", "\n\t\t\t> span\n\t\t\t> span\n\t\t\t> span {\n\t\t\tbox-shadow: 0 0 0 ", "px ", ";\n\t\t\tbackground-color: ", ";\n\t\t}\n\t\t.", " > span > span > span {\n\t\t\tbackground-color: ", ";\n\t\t\tcolor: ", ";\n\t\t}\n\t}\n"])), _mention.MentionSharedCssClassName.MENTION_CONTAINER, _editorSharedStyles.akEditorSelectedNodeClassName, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow, _editorSharedStyles.SelectionStyle.Background]), "var(--ds-text-subtle, #44546F)", _mention.MentionSharedCssClassName.MENTION_CONTAINER, _editorSharedStyles.akEditorSelectedNodeClassName, _editorSharedStyles.akEditorSelectedBorderSize, _editorSharedStyles.akEditorDeleteBorder, "var(--ds-background-danger, ".concat(_editorSharedStyles.akEditorDeleteBackgroundWithOpacity, ")"), _mention.MentionSharedCssClassName.MENTION_CONTAINER, "var(--ds-background-neutral, #091E420F)", "var(--ds-text-subtle, #44546F)");
 var listsStyles = (0, _react2.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n\t.ProseMirror {\n\t\tli {\n\t\t\tposition: relative;\n\n\t\t\t> p:not(:first-child) {\n\t\t\t\tmargin: ", " 0 0 0;\n\t\t\t}\n\n\t\t\t/* In SSR the above rule will apply to all p tags because first-child would be a style tag.\n\t\t\tThe following rule resets the first p tag back to its original margin\n\t\t\tdefined in packages/editor/editor-common/src/styles/shared/paragraph.ts */\n\t\t\t> style:first-child + p {\n\t\t\t\tmargin-top: ", ";\n\t\t\t}\n\t\t}\n\n\t\t&:not([data-node-type='decisionList']) > li,\n    /* This prevents https://product-fabric.atlassian.net/browse/ED-20924 */\n    &:not(.", ") > li {\n\t\t\t", "\n\t\t}\n\t}\n"])), "var(--ds-space-050, 4px)", _editorSharedStyles.blockNodesVerticalMargin, _styles.SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER, _browser.browser.safari ? _styles.codeBlockInListSafariFix : '');
@@ -157,9 +167,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--ak-editor--breakout-fallback-width: calc(\n\t\t100cqw - var(--ak-editor--breakout-full-page-guttering-padding)\n\t);\n\n\t.fabric-editor--full-width-mode {\n\t\t--ak-editor--line-length: min(\n\t\t\tcalc(100cqw - var(--ak-editor--large-gutter-padding) * 2),\n\t\t\tvar(--ak-editor--full-width-layout-width)\n\t\t);\n\n\t\t/* in full width appearances it's not possible to rely on cqw because it doesn't account for the page scrollbar, which depends on users system settings */\n\t\t--ak-editor--breakout-fallback-width: 100%;\n\t}\n\n\t.ProseMirror {\n\t\t--ak-editor-max-container-width: calc(100cqw - var(--ak-editor--large-gutter-padding));\n\t}\n\n\t/* We can't allow nodes that are inside other nodes to bleed from the parent container */\n\t.ProseMirror > div[data-prosemirror-node-block] [data-prosemirror-node-block] {\n\t\t--ak-editor-max-container-width: 100%;\n\t}\n\n\t/* container editor-area is defined in platform/packages/editor/editor-core/src/ui/Appearance/FullPage/StyledComponents.ts */\n\t@container editor-area (width >= ", ") {\n\t\t.ProseMirror {\n\t\t\t--ak-editor--breakout-wide-layout-width: ", "px;\n\t\t}\n\t}\n\n\t.ProseMirror {\n\t\toutline: none;\n\t\tfont-size: ", "px;\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t}\n\n\t.ProseMirror-hideselection *::selection {\n\t\tbackground: transparent;\n\t}\n\n\t.ProseMirror-hideselection *::-moz-selection {\n\t\tbackground: transparent;\n\t}\n\n\t/**\n\t * This prosemirror css style: https://github.com/ProseMirror/prosemirror-view/blob/f37ebb29befdbde3cd194fe13fe17b78e743d2f2/style/prosemirror.css#L24\n\t *\n\t * 1. Merge and Release platform_editor_hide_cursor_when_pm_hideselection\n\t * 2. Cleanup duplicated style from platform_editor_advanced_code_blocks\n\t *    https://product-fabric.atlassian.net/browse/ED-26331\n\t */\n\t", "\n\n\t/* This prosemirror css style: https://github.com/ProseMirror/prosemirror-view/blob/f37ebb29befdbde3cd194fe13fe17b78e743d2f2/style/prosemirror.css#L24 */\n\t", "\n\n\t.ProseMirror-selectednode {\n\t\toutline: none;\n\t}\n\n\t.ProseMirror-selectednode:empty {\n\t\toutline: 2px solid ", ";\n\t}\n\n\t.ProseMirror.ProseMirror-focused:has(.ProseMirror-mark-boundary-cursor) {\n\t\tcaret-color: transparent;\n\t}\n\t.ProseMirror:not(.ProseMirror-focused) .ProseMirror-mark-boundary-cursor {\n\t\tdisplay: none;\n\t}\n\n\t", "\n\t", "\n\t", "\n\t", "\n\t", "\n\t", "\n\n  ", "\n\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", ";\n\t", "\n\t", "\n\t", "\n\t", "\n\t", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  /* Switch between the two icons based on the visual refresh feature gate */\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n\t", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n\n  .panelView-content-wrap {\n\t\tbox-sizing: border-box;\n\t}\n\n\t.mediaGroupView-content-wrap ul {\n\t\tpadding: 0;\n\t}\n\n\t/** Needed to override any cleared floats, e.g. image wrapping */\n\n\tdiv.fabric-editor-block-mark[class^='fabric-editor-align'] {\n\t\tclear: none !important;\n\t}\n\n\t.fabric-editor-align-end {\n\t\ttext-align: right;\n\t}\n\n\t.fabric-editor-align-start {\n\t\ttext-align: left;\n\t}\n\n\t.fabric-editor-align-center {\n\t\ttext-align: center;\n\t}\n\n\t/* For FullPage only when inside a table\n\tRelated code all lives inside: packages/editor/editor-core/src/ui/Appearance/FullPage/StyledComponents.ts\n\tIn the \"editorContentAreaContainerStyle\" function */\n\t.fabric-editor--full-width-mode {\n\t\t.pm-table-container {\n\t\t\t.code-block,\n\t\t\t.extension-container,\n\t\t\t.multiBodiedExtension--container {\n\t\t\t\tmax-width: 100%;\n\t\t\t}\n\t\t}\n\t}\n\n\t.pm-table-header-content-wrap :not(.fabric-editor-alignment),\n\t.pm-table-header-content-wrap :not(p, .fabric-editor-block-mark) + div.fabric-editor-block-mark,\n\t.pm-table-cell-content-wrap :not(p, .fabric-editor-block-mark) + div.fabric-editor-block-mark {\n\t\tp:first-of-type {\n\t\t\tmargin-top: 0;\n\t\t}\n\t}\n\t.pm-table-cell-content-wrap .mediaGroupView-content-wrap {\n\t\tclear: both;\n\t}\n\n\t.hyperlink-floating-toolbar,\n\t.", " {\n\t\tpadding: 0;\n\t}\n\n\t/* Legacy Link icon in the Atlaskit package\n     is bigger than the others, new ADS icon does not have this issue\n  */\n\t", "\n"])), _editorSharedStyles.akEditorGutterPadding, (0, _editorSharedStyles.akEditorGutterPaddingDynamic)(), _editorSharedStyles.akEditorDefaultLayoutWidth, _editorSharedStyles.akEditorFullWidthLayoutWidth, _editorSharedStyles.akEditorCalculatedWideLayoutWidthSmallViewport, akEditorBreakpointForSmallDevice, _editorSharedStyles.akEditorCalculatedWideLayoutWidth, (0, _editorSharedStyles.editorFontSize)({
+  return (0, _react2.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n\t--ak-editor--default-gutter-padding: ", "px;\n\t/* 52 is from akEditorGutterPaddingDynamic via editor-shared-styles */\n\t--ak-editor--large-gutter-padding: ", "px;\n\t--ak-editor--default-layout-width: ", "px;\n\t--ak-editor--full-width-layout-width: ", "px;\n\t/* calculate editor line length, 100cqw is the editor container width */\n\t--ak-editor--line-length: min(\n\t\tcalc(100cqw - var(--ak-editor--large-gutter-padding) * 2),\n\t\tvar(--ak-editor--default-layout-width)\n\t);\n\t--ak-editor--breakout-wide-layout-width: ", "px;\n\t--ak-editor--breakout-full-page-guttering-padding: calc(\n\t\tvar(--ak-editor--large-gutter-padding) * 2 + var(--ak-editor--default-gutter-padding)\n\t);\n\n\t--ak-editor--breakout-fallback-width: calc(\n\t\t100cqw - var(--ak-editor--breakout-full-page-guttering-padding)\n\t);\n\n\t.fabric-editor--full-width-mode {\n\t\t--ak-editor--line-length: min(\n\t\t\tcalc(100cqw - var(--ak-editor--large-gutter-padding) * 2),\n\t\t\tvar(--ak-editor--full-width-layout-width)\n\t\t);\n\n\t\t/* in full width appearances it's not possible to rely on cqw because it doesn't account for the page scrollbar, which depends on users system settings */\n\t\t--ak-editor--breakout-fallback-width: 100%;\n\t}\n\n\t.ProseMirror {\n\t\t--ak-editor-max-container-width: calc(100cqw - var(--ak-editor--large-gutter-padding));\n\t}\n\n\t/* We can't allow nodes that are inside other nodes to bleed from the parent container */\n\t.ProseMirror > div[data-prosemirror-node-block] [data-prosemirror-node-block] {\n\t\t--ak-editor-max-container-width: 100%;\n\t}\n\n\t/* container editor-area is defined in platform/packages/editor/editor-core/src/ui/Appearance/FullPage/StyledComponents.ts */\n\t@container editor-area (width >= ", ") {\n\t\t.ProseMirror {\n\t\t\t--ak-editor--breakout-wide-layout-width: ", "px;\n\t\t}\n\t}\n\n\t.ProseMirror {\n\t\toutline: none;\n\t\tfont-size: ", "px;\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t}\n\n\t.ProseMirror-hideselection *::selection {\n\t\tbackground: transparent;\n\t}\n\n\t.ProseMirror-hideselection *::-moz-selection {\n\t\tbackground: transparent;\n\t}\n\n\t/**\n\t * This prosemirror css style: https://github.com/ProseMirror/prosemirror-view/blob/f37ebb29befdbde3cd194fe13fe17b78e743d2f2/style/prosemirror.css#L24\n\t *\n\t * 1. Merge and Release platform_editor_hide_cursor_when_pm_hideselection\n\t * 2. Cleanup duplicated style from platform_editor_advanced_code_blocks\n\t *    https://product-fabric.atlassian.net/browse/ED-26331\n\t */\n\t", "\n\n\t/* This prosemirror css style: https://github.com/ProseMirror/prosemirror-view/blob/f37ebb29befdbde3cd194fe13fe17b78e743d2f2/style/prosemirror.css#L24 */\n\t", "\n\n\t.ProseMirror-selectednode {\n\t\toutline: none;\n\t}\n\n\t.ProseMirror-selectednode:empty {\n\t\toutline: 2px solid ", ";\n\t}\n\n\t.ProseMirror.ProseMirror-focused:has(.ProseMirror-mark-boundary-cursor) {\n\t\tcaret-color: transparent;\n\t}\n\t.ProseMirror:not(.ProseMirror-focused) .ProseMirror-mark-boundary-cursor {\n\t\tdisplay: none;\n\t}\n\n\t", "\n\t", "\n\t", "\n\t", "\n\t", "\n\t", "\n\n  ", "\n\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", ";\n\t", "\n\t", "\n\t", "\n\t", "\n\t", "\n\t", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  /* Switch between the two icons based on the visual refresh feature gate */\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n\t", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n\n  .panelView-content-wrap {\n\t\tbox-sizing: border-box;\n\t}\n\n\t.mediaGroupView-content-wrap ul {\n\t\tpadding: 0;\n\t}\n\n\t/** Needed to override any cleared floats, e.g. image wrapping */\n\n\tdiv.fabric-editor-block-mark[class^='fabric-editor-align'] {\n\t\tclear: none !important;\n\t}\n\n\t.fabric-editor-align-end {\n\t\ttext-align: right;\n\t}\n\n\t.fabric-editor-align-start {\n\t\ttext-align: left;\n\t}\n\n\t.fabric-editor-align-center {\n\t\ttext-align: center;\n\t}\n\n\t/* For FullPage only when inside a table\n\tRelated code all lives inside: packages/editor/editor-core/src/ui/Appearance/FullPage/StyledComponents.ts\n\tIn the \"editorContentAreaContainerStyle\" function */\n\t.fabric-editor--full-width-mode {\n\t\t.pm-table-container {\n\t\t\t.code-block,\n\t\t\t.extension-container,\n\t\t\t.multiBodiedExtension--container {\n\t\t\t\tmax-width: 100%;\n\t\t\t}\n\t\t}\n\t}\n\n\t.pm-table-header-content-wrap :not(.fabric-editor-alignment),\n\t.pm-table-header-content-wrap :not(p, .fabric-editor-block-mark) + div.fabric-editor-block-mark,\n\t.pm-table-cell-content-wrap :not(p, .fabric-editor-block-mark) + div.fabric-editor-block-mark {\n\t\tp:first-of-type {\n\t\t\tmargin-top: 0;\n\t\t}\n\t}\n\t.pm-table-cell-content-wrap .mediaGroupView-content-wrap {\n\t\tclear: both;\n\t}\n\n\t.hyperlink-floating-toolbar,\n\t.", " {\n\t\tpadding: 0;\n\t}\n\n\t/* Legacy Link icon in the Atlaskit package\n     is bigger than the others, new ADS icon does not have this issue\n  */\n\t", "\n"])), _editorSharedStyles.akEditorGutterPadding, (0, _editorSharedStyles.akEditorGutterPaddingDynamic)(), _editorSharedStyles.akEditorDefaultLayoutWidth, _editorSharedStyles.akEditorFullWidthLayoutWidth, _editorSharedStyles.akEditorCalculatedWideLayoutWidthSmallViewport, akEditorBreakpointForSmallDevice, _editorSharedStyles.akEditorCalculatedWideLayoutWidth, (0, _editorSharedStyles.editorFontSize)({
     theme: props.theme
-  }), _styles.whitespaceSharedStyles, (0, _styles.paragraphSharedStyles)(props.typographyTheme), _styles.listsSharedStyles, _styles.indentationSharedStyles, _styles.shadowSharedStyle, _getInlineNodeViewProducer.InlineNodeViewSharedStyles, (0, _platformFeatureFlags.fg)('platform_editor_hide_cursor_when_pm_hideselection') ? (0, _react2.css)(_templateObject0 || (_templateObject0 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t.ProseMirror-hideselection {\n\t\t\t\t\tcaret-color: transparent;\n\t\t\t\t}\n\t\t\t"]))) : null, (0, _experiments.editorExperiment)('platform_editor_advanced_code_blocks', true) ? (0, _react2.css)(_templateObject1 || (_templateObject1 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t.ProseMirror-hideselection {\n\t\t\t\t\tcaret-color: transparent;\n\t\t\t\t}\n\t\t\t"]))) : null, "var(--ds-border-focused, #8cf)", firstFloatingToolbarButtonStyles, _styles5.placeholderTextStyles, (0, _platformFeatureFlags.fg)('platform_editor_system_fake_text_highlight_colour') && _styles5.placeholderTextStyles_fg_platform_editor_system_fake_text_highlight_colour, placeholderStyles, (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? placeholderOverflowStyles : null, (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_quick_insert_placeholder') ? placeholderWrapStyles : null, (0, _codeBlock.codeBlockStyles)(), (0, _styles2.blocktypeStyles)(props.typographyTheme), (0, _styles.codeMarkSharedStyles)(), _styles.textColorStyles, (0, _styles.backgroundColorStyles)(), listsStyles, ruleStyles(), (0, _media.mediaStyles)(), (0, _layout.layoutStyles)(props.viewMode), (0, _platformFeatureFlags.fg)('confluence_team_presence_scroll_to_pointer') ? _collab.telepointerStyle : _collab.telepointerStyleWithInitialOnly, _selection.gapCursorStyles, (0, _panel2.panelStyles)(), mentionsStyles, mentionNodeStyles, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true, {
+  }), _styles.whitespaceSharedStyles, (0, _styles.paragraphSharedStyles)(props.typographyTheme), _styles.listsSharedStyles, _styles.indentationSharedStyles, _styles.shadowSharedStyle, _getInlineNodeViewProducer.InlineNodeViewSharedStyles, (0, _platformFeatureFlags.fg)('platform_editor_hide_cursor_when_pm_hideselection') ? (0, _react2.css)(_templateObject0 || (_templateObject0 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t.ProseMirror-hideselection {\n\t\t\t\t\tcaret-color: transparent;\n\t\t\t\t}\n\t\t\t"]))) : null, (0, _experiments.editorExperiment)('platform_editor_advanced_code_blocks', true) ? (0, _react2.css)(_templateObject1 || (_templateObject1 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t.ProseMirror-hideselection {\n\t\t\t\t\tcaret-color: transparent;\n\t\t\t\t}\n\t\t\t"]))) : null, "var(--ds-border-focused, #8cf)", firstFloatingToolbarButtonStyles, _styles5.placeholderTextStyles, (0, _platformFeatureFlags.fg)('platform_editor_system_fake_text_highlight_colour') && _styles5.placeholderTextStyles_fg_platform_editor_system_fake_text_highlight_colour, placeholderStyles, (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? placeholderOverflowStyles : null, (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_quick_insert_placeholder') ? placeholderWrapStyles : null, (0, _codeBlock.codeBlockStyles)(), (0, _styles2.blocktypeStyles)(props.typographyTheme), (0, _styles.codeMarkSharedStyles)(), _styles.textColorStyles, (0, _styles.backgroundColorStyles)(), listsStyles, ruleStyles(), (0, _media.mediaStyles)(), (0, _layout.layoutStyles)(props.viewMode), (0, _platformFeatureFlags.fg)('confluence_team_presence_scroll_to_pointer') ? _collab.telepointerStyle : _collab.telepointerStyleWithInitialOnly, _selection.gapCursorStyles, (0, _panel2.panelStyles)(), mentionsStyles, mentionNodeStyles, (0, _platformFeatureFlags.fg)('platform_editor_centre_mention_padding') && mentionNodeStylesMixin_fg_platform_editor_centre_mention_padding, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true, {
     exposure: false
   }) && vanillaSelectionStyles, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true, {
     exposure: false

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

@@ -318,7 +318,9 @@ var EditorContentContainer = /*#__PURE__*/_react.default.forwardRef(function (pr
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
     _mentions.mentionNodeStyles,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
-    _mentions.mentionsSelectionStyles, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true, {
+    _mentions.mentionsSelectionStyles, (0, _platformFeatureFlags.fg)('platform_editor_centre_mention_padding') &&
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    _mentions.mentionsStylesMixin_platform_editor_centre_mention_padding, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true, {
       exposure: false
     }) ?
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values

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

@@ -44,13 +44,23 @@ var findReplaceStylesNew = exports.findReplaceStylesNew = (0, _react.css)({
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
     '[data-smart-link-container="true"], .loader-wrapper>div::after': {
       boxShadow: "\n\t\t\tinset 0 0 0 1px ".concat("var(--ds-background-accent-yellow-subtler-pressed, #E2B203)", ",\n\t\t\tinset 0 0 0 5px ", "var(--ds-background-accent-yellow-subtler, #F8E6A0)", "\n\t\t\t")
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '.loader-wrapper>a, .lozenge-wrapper, .editor-mention-primitive, .date-lozenger-container': {
+      boxShadow: "0px 0px 0px 4px ".concat("var(--ds-background-accent-yellow-subtler, #F8E6A0)", ", 0px 0px 0px 5px ", "var(--ds-background-accent-yellow-subtler-pressed, #E2B203)"),
+      borderRadius: '3px'
     }
   },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  '.search-match-selected.search-match-block': {
+  '.search-match-block.search-match-block-selected': {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
     '[data-smart-link-container="true"], .loader-wrapper>div::after': {
       boxShadow: "\n\t\t\tinset 0 0 0 1px ".concat("var(--ds-background-accent-yellow-subtler-pressed, #E2B203)", ",\n\t\t\tinset 0 0 0 4px ", "var(--ds-background-accent-yellow-subtlest-pressed, #F5CD47)", "\n\t\t\t")
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '.loader-wrapper>a, .lozenge-wrapper, .editor-mention-primitive, .date-lozenger-container': {
+      boxShadow: "0px 0px 0px 4px ".concat("var(--ds-background-accent-yellow-subtlest-pressed, #F5CD47)", ", 0px 0px 0px 5px ", "var(--ds-background-accent-yellow-subtler-pressed, #E2B203)"),
+      borderRadius: '3px'
     }
   },
   /** With node selection */
@@ -59,30 +69,49 @@ var findReplaceStylesNew = exports.findReplaceStylesNew = (0, _react.css)({
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
     '.loader-wrapper>div::after': {
       boxShadow: "\n\t\t\tinset 0 0 0 1px ".concat("var(--ds-background-accent-yellow-subtler-pressed, #E2B203)", ",\n\t\t\tinset 0 0 0 5px ", "var(--ds-background-accent-yellow-subtler, #F8E6A0)", ",\n\t\t\t0 0 0 1px ", "var(--ds-border-selected, #0C66E4)", "\n\t\t\t")
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '.loader-wrapper>a, .lozenge-wrapper': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
+      boxShadow: "0 0 0 1px ".concat("var(--ds-border-selected, #0C66E4)", ", 0px 0px 0px 4px ", "var(--ds-background-accent-yellow-subtler, #F8E6A0)", ", 0px 0px 0px 5px ", "var(--ds-background-accent-yellow-subtler-pressed, #E2B203)", " !important")
     }
   },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  '.search-match-selected.search-match-block.ak-editor-selected-node': {
+  '.search-match-block.search-match-block-selected.ak-editor-selected-node': {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
     '[data-smart-link-container="true"], .loader-wrapper>div::after': {
       boxShadow: "\n\t\t\tinset 0 0 0 1px ".concat("var(--ds-background-accent-yellow-subtler-pressed, #E2B203)", ",\n\t\t\tinset 0 0 0 4px ", "var(--ds-background-accent-yellow-subtlest-pressed, #F5CD47)", ",\n\t\t\t0 0 0 1px ", "var(--ds-border-selected, #0C66E4)", "\n\t\t\t")
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '.loader-wrapper>a, .lozenge-wrapper': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
+      boxShadow: "0 0 0 1px ".concat("var(--ds-border-selected, #0C66E4)", ", 0px 0px 0px 4px ", "var(--ds-background-accent-yellow-subtlest-pressed, #F5CD47)", ", 0px 0px 0px 5px ", "var(--ds-background-accent-yellow-subtler-pressed, #E2B203)", " !important")
     }
   },
   /** Dark mode */
-
   /** Without node selection */
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
   '.search-match-block.search-match-dark': {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
     '[data-smart-link-container="true"], .loader-wrapper>div::after': {
       boxShadow: "\n\t\t\tinset 0 0 0 1px ".concat("var(--ds-background-accent-yellow-bolder, #946F00)", ",\n\t\t\tinset 0 0 0 5px ", "var(--ds-background-accent-yellow-bolder-pressed, #533F04)", "\n\t\t\t")
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '.loader-wrapper>a, .lozenge-wrapper, .editor-mention-primitive, .date-lozenger-container': {
+      boxShadow: "0px 0px 0px 4px ".concat("var(--ds-background-accent-yellow-bolder-pressed, #533F04)", ", 0px 0px 0px 5px ", "var(--ds-background-accent-yellow-bolder, #946F00)"),
+      borderRadius: '3px'
     }
   },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  '.search-match-selected.search-match-block.search-match-dark': {
+  '.search-match-block.search-match-block-selected.search-match-dark': {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
     '[data-smart-link-container="true"], .loader-wrapper>div::after': {
       boxShadow: "\n\t\t\tinset 0 0 0 1px ".concat("var(--ds-background-accent-yellow-bolder, #946F00)", ",\n\t\t\tinset 0 0 0 4px ", "var(--ds-background-accent-yellow-bolder-hovered, #7F5F01)", "\n\t\t\t")
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '.loader-wrapper>a, .lozenge-wrapper, .editor-mention-primitive, .date-lozenger-container': {
+      boxShadow: "0px 0px 0px 4px ".concat("var(--ds-background-accent-yellow-bolder-hovered, #7F5F01)", ", 0px 0px 0px 5px ", "var(--ds-background-accent-yellow-bolder, #946F00)"),
+      borderRadius: '3px'
     }
   },
   /** With node selection */
@@ -91,13 +120,23 @@ var findReplaceStylesNew = exports.findReplaceStylesNew = (0, _react.css)({
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
     '.loader-wrapper>div::after': {
       boxShadow: "\n\t\t\tinset 0 0 0 1px ".concat("var(--ds-background-accent-yellow-bolder, #946F00)", ",\n\t\t\tinset 0 0 0 5px ", "var(--ds-background-accent-yellow-bolder-pressed, #533F04)", ",\n\t\t\t0 0 0 1px ", "var(--ds-border-selected, #0C66E4)", "\n\t\t\t")
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '.loader-wrapper>a, .lozenge-wrapper': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
+      boxShadow: "0 0 0 1px ".concat("var(--ds-border-selected, #0C66E4)", ", 0px 0px 0px 4px ", "var(--ds-background-accent-yellow-bolder-pressed, #533F04)", ", 0px 0px 0px 5px ", "var(--ds-background-accent-yellow-bolder, #946F00)", " !important")
     }
   },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  '.search-match-selected.search-match-block.search-match-dark.ak-editor-selected-node': {
+  '.search-match-block.search-match-block-selected.search-match-dark.ak-editor-selected-node': {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
     '[data-smart-link-container="true"], .loader-wrapper>div::after': {
       boxShadow: "\n\t\t\tinset 0 0 0 1px ".concat("var(--ds-background-accent-yellow-bolder, #946F00)", ",\n\t\t\tinset 0 0 0 4px ", "var(--ds-background-accent-yellow-bolder-hovered, #7F5F01)", ",\n\t\t\t0 0 0 1px ", "var(--ds-border-selected, #0C66E4)", "\n\t\t\t")
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '.loader-wrapper>a, .lozenge-wrapper': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
+      boxShadow: "0 0 0 1px ".concat("var(--ds-border-selected, #0C66E4)", ", 0px 0px 0px 4px ", "var(--ds-background-accent-yellow-bolder-hovered, #7F5F01)", ", 0px 0px 0px 5px ", "var(--ds-background-accent-yellow-bolder, #946F00)", " !important")
     }
   }
 });

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

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.mentionsStyles = exports.mentionsSelectionStyles = exports.mentionNodeStyles = void 0;
+exports.mentionsStylesMixin_platform_editor_centre_mention_padding = exports.mentionsStyles = exports.mentionsSelectionStyles = exports.mentionNodeStyles = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("@emotion/react");
 var _mention = require("@atlaskit/editor-common/mention");
@@ -85,6 +85,17 @@ var mentionNodeStyles = exports.mentionNodeStyles = (0, _react.css)({
   }
 });
 
+// The feature-gate for this is dependent on the use of refreshed typography - bear this in mind when cleaning up
+// This is currently enforced through statsig prerequisite gates, as per #help-afm recommendation.
+// So it will need to be considered if the typography gates are still in use when this is cleaned up.
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
+var mentionsStylesMixin_platform_editor_centre_mention_padding = exports.mentionsStylesMixin_platform_editor_centre_mention_padding = (0, _react.css)({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '.editor-mention-primitive': {
+    padding: '1px 0.3em 1px 0.23em'
+  }
+});
+
 // This is mentions styles for mentions selection styles based on the vanilla node view
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
 var mentionsSelectionStyles = exports.mentionsSelectionStyles = (0, _react.css)((0, _defineProperty2.default)({

package/dist/cjs/version-wrapper.js

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

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

@@ -3,5 +3,7 @@ export function focusEditorElement(editorId) {
   if (!(parentElement instanceof HTMLElement)) {
     return;
   }
-  parentElement.focus();
+  parentElement.focus({
+    preventScroll: true
+  });
 }

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

@@ -12,7 +12,7 @@ import { injectIntl } from 'react-intl-next';
 import { decisionListSelector, taskListSelector } from '@atlaskit/adf-schema';
 import { fullPageMessages as messages } from '@atlaskit/editor-common/messages';
 import { tableFullPageEditorStyles } from '@atlaskit/editor-plugins/table/ui/common-styles';
-import { FULL_PAGE_EDITOR_TOOLBAR_HEIGHT as FULL_PAGE_EDITOR_TOOLBAR_HEIGHT_OLD, akEditorGutterPaddingDynamic } from '@atlaskit/editor-shared-styles';
+import { FULL_PAGE_EDITOR_TOOLBAR_HEIGHT, akEditorGutterPaddingDynamic } from '@atlaskit/editor-shared-styles';
 import { scrollbarStyles } from '@atlaskit/editor-shared-styles/scrollbar';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { componentWithCondition } from '@atlaskit/platform-feature-flags-react';
@@ -34,8 +34,6 @@ const tableMarginFullWidthMode = 2;
 const akLayoutGutterOffset = 12;
 const SWOOP_ANIMATION = `0.5s ${akEditorSwoopCubicBezier}`;
 const AK_NESTED_DND_GUTTER_OFFSET = 8;
-const FULL_PAGE_EDITOR_TOOLBAR_HEIGHT = "var(--ds-space-500, 40px)";
-const FULL_PAGE_EDITOR_TOOLBAR_HEIGHT_LIVE_PAGE = '2.188rem';
 const getTotalPadding = () => akEditorGutterPaddingDynamic() * 2;
 
 // old styles - to be deleted when cleaning up experiment `platform_editor_core_static_emotion_non_central`
@@ -43,7 +41,7 @@ const editorContentAreaStyle = ({
   layoutMaxWidth,
   fullWidthMode,
   isEditorToolbarHidden
-}) => [editorContentArea, editorContentAreaProsemirrorStyle, fg('platform_editor_fix_table_width_inline_comment') ? fullWidthNonChromelessBreakoutBlockTableStyle : fullWidthModeBreakoutBlockTableStyle, !fullWidthMode && editorContentAreaWithLayoutWith(layoutMaxWidth),
+}) => [editorContentArea, editorContentAreaProsemirrorStyle, fullWidthNonChromelessBreakoutBlockTableStyle, !fullWidthMode && editorContentAreaWithLayoutWith(layoutMaxWidth),
 // for breakout resizing, there's no need to restrict the width of codeblocks as they're always wrapped in a breakout mark
 expValEqualsNoExposure('platform_editor_breakout_resizing', 'isEnabled', true) && fg('platform_editor_breakout_resizing_width_changes') ? editorContentAreaContainerStyleExcludeCodeBlock() : editorContentAreaContainerStyle(), ...(fg('platform_editor_controls_no_toolbar_space') ? [] : [editorExperiment('platform_editor_controls', 'variant1') &&
 // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values
@@ -114,7 +112,7 @@ const editorContentArea = css({
     // When the toolbar is hidden, we don't want content to jump up
     // the extra 1px is to account for the border on the toolbar
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,  @atlaskit/ui-styling-standard/no-unsafe-values
-    paddingTop: `calc(${"var(--ds-space-600, 48px)"} + ${FULL_PAGE_EDITOR_TOOLBAR_HEIGHT_OLD()} + 1px)`
+    paddingTop: `calc(${"var(--ds-space-600, 48px)"} + ${FULL_PAGE_EDITOR_TOOLBAR_HEIGHT()} + 1px)`
   },
   paddingBottom: "var(--ds-space-600, 48px)",
   height: 'calc( 100% - 105px )',
@@ -147,23 +145,6 @@ const editorContentAreaProsemirrorStyle = css({
     }
   }
 });
-const fullWidthModeBreakoutBlockTableStyle = css({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-1
-  '.fabric-editor--full-width-mode': {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-    '.fabric-editor-breakout-mark, .extension-container.block, .pm-table-container': {
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
-      width: '100% !important'
-    },
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-    '.fabric-editor-breakout-mark': {
-      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview, @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
-      marginLeft: 'unset !important',
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
-      transform: 'none !important'
-    }
-  }
-});
 const fullWidthNonChromelessBreakoutBlockTableStyle = css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-1
   '.fabric-editor--full-width-mode:not(:has(#chromeless-editor))': {
@@ -203,18 +184,6 @@ const editorContentGutterStyle = () => {
 };
 
 // new styles
-const editorContentAreaNoToolbarLivePageJumpMitigation = css({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
-  '.ak-editor-content-area-no-toolbar &': {
-    paddingTop: `calc(${"var(--ds-space-600, 48px)"} + ${FULL_PAGE_EDITOR_TOOLBAR_HEIGHT_LIVE_PAGE} + 1px)`
-  }
-});
-const editorContentAreaNoToolbarControls = css({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
-  '.ak-editor-content-area-no-toolbar &': {
-    paddingTop: `calc(${"var(--ds-space-600, 48px)"} + ${FULL_PAGE_EDITOR_TOOLBAR_HEIGHT} + 1px)`
-  }
-});
 const editorContentAreaNew = css({
   // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
   lineHeight: '24px',
@@ -223,7 +192,7 @@ const editorContentAreaNew = css({
   '.ak-editor-content-area-no-toolbar &': {
     // When the toolbar is hidden, we don't want content to jump up
     // the extra 1px is to account for the border on the toolbar
-    paddingTop: `calc(${"var(--ds-space-600, 48px)"} + ${FULL_PAGE_EDITOR_TOOLBAR_HEIGHT} + 1px)`
+    paddingTop: `calc(${"var(--ds-space-600, 48px)"} + var(--ak-editor-fullpage-toolbar-height) + 1px)`
   },
   paddingBottom: "var(--ds-space-600, 48px)",
   height: 'calc( 100% - 105px )',
@@ -313,7 +282,7 @@ const editorContentGutterStyles = css({
 const contentAreaNew = css({
   display: 'flex',
   flexDirection: 'row',
-  height: `calc(100% - ${FULL_PAGE_EDITOR_TOOLBAR_HEIGHT})`,
+  height: `calc(100% - var(--ak-editor-fullpage-toolbar-height))`,
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values
   '&.ak-editor-content-area-no-toolbar': {
     // The editor toolbar height is 1px off (from the border) -- so we need to add 1px to the height
@@ -325,12 +294,6 @@ const contentAreaNew = css({
   padding: 0,
   transition: `padding 0ms ${akEditorSwoopCubicBezier}`
 });
-const contentAreaHeightLivePageJumpMitigation = css({
-  height: `calc(100% - ${FULL_PAGE_EDITOR_TOOLBAR_HEIGHT_LIVE_PAGE})`
-});
-const contentAreaHeightControls = css({
-  height: `calc(100% - ${FULL_PAGE_EDITOR_TOOLBAR_HEIGHT})`
-});
 const contentAreaHeightNoToolbar = css({
   height: '100%'
 });
@@ -383,9 +346,7 @@ const Content = /*#__PURE__*/React.forwardRef((props, ref) => {
     return editorExperiment('platform_editor_controls', 'variant1');
   };
   return jsx("div", {
-    css: expValEquals('platform_editor_core_static_emotion_non_central', 'isEnabled', true) ? [contentAreaNew, fg('live_pages_content_jump_mitigation') && contentAreaHeightLivePageJumpMitigation, editorExperiment('platform_editor_controls', 'variant1', {
-      exposure: true
-    }) && contentAreaHeightControls, props.isEditorToolbarHidden && contentAreaHeightNoToolbar] : [
+    css: expValEquals('platform_editor_core_static_emotion_non_central', 'isEnabled', true) ? [contentAreaNew, props.isEditorToolbarHidden && contentAreaHeightNoToolbar] : [
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
     contentArea,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
@@ -411,9 +372,7 @@ const Content = /*#__PURE__*/React.forwardRef((props, ref) => {
     editorView: props.editorView,
     editorDisabled: props.disabled
   }, jsx("div", {
-    css: expValEquals('platform_editor_core_static_emotion_non_central', 'isEnabled', true) ? [editorContentAreaNew, editorContentAreaProsemirrorStyle, tableFullPageEditorStylesNew, fg('live_pages_content_jump_mitigation') && editorContentAreaNoToolbarLivePageJumpMitigation, editorExperiment('platform_editor_controls', 'variant1', {
-      exposure: true
-    }) && editorContentAreaNoToolbarControls, fg('platform_editor_fix_table_width_inline_comment') ? fullWidthNonChromelessBreakoutBlockTableStyle : fullWidthModeBreakoutBlockTableStyle,
+    css: expValEquals('platform_editor_core_static_emotion_non_central', 'isEnabled', true) ? [editorContentAreaNew, editorContentAreaProsemirrorStyle, tableFullPageEditorStylesNew, fullWidthNonChromelessBreakoutBlockTableStyle,
     // for breakout resizing, there's no need to restrict the width of codeblocks as they're always wrapped in a breakout mark
     expValEqualsNoExposure('platform_editor_breakout_resizing', 'isEnabled', true) && fg('platform_editor_breakout_resizing_width_changes') ? editorContentAreaContainerStyleExcludeCodeBlockNew : editorContentAreaContainerStyleNew, fg('platform_editor_nested_dnd_styles_changes') && editorContentAreaContainerNestedDndStyle, !fg('platform_editor_controls_no_toolbar_space') && editorExperiment('platform_editor_controls', 'variant1') && contentAreaReducedHeaderSpace, !fg('platform_editor_controls_no_toolbar_space') && props.isEditorToolbarHidden && editorExperiment('platform_editor_controls', 'variant1') && contentAreaReservedPrimaryToolbarSpace] : [
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766

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

@@ -109,6 +109,16 @@ const mentionNodeStyles = css({
     }
   }
 });
+
+// The feature-gate for this is dependent on the use of refreshed typography - bear this in mind when cleaning up
+// This is currently enforced through statsig prerequisite gates, as per #help-afm recommendation.
+// So it will need to be considered if the typography gates are still in use when this is cleaned up.
+const mentionNodeStylesMixin_fg_platform_editor_centre_mention_padding = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '.editor-mention-primitive': {
+    padding: '1px 0.3em 1px 0.23em'
+  }
+});
 const vanillaSelectionStyles = css`
 	.danger {
 		.editor-mention-primitive {
@@ -413,6 +423,7 @@ const legacyContentStyles = props => css`
 	${panelStyles()}
 	${mentionsStyles}
 	${mentionNodeStyles}
+	${fg('platform_editor_centre_mention_padding') && mentionNodeStylesMixin_fg_platform_editor_centre_mention_padding}
 	${editorExperiment('platform_editor_vanilla_dom', true, {
   exposure: false
 }) && vanillaSelectionStyles}

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

@@ -42,7 +42,7 @@ import { layoutBaseStyles, layoutBaseStylesAdvanced, layoutBaseStylesFixesUnderN
 import { hyperLinkFloatingToolbarStyles, linkLegacyIconStylesFix, linkStyles, linkStylesOld } from './styles/link';
 import { listsStyles, listsStylesSafariFix } from './styles/list';
 import { mediaAlignmentStyles, mediaGroupStyles, mediaStyles } from './styles/mediaStyles';
-import { mentionsStyles, mentionsSelectionStyles, mentionNodeStyles } from './styles/mentions';
+import { mentionsStyles, mentionsSelectionStyles, mentionNodeStyles, mentionsStylesMixin_platform_editor_centre_mention_padding } 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, paragraphStylesUGCRefreshed } from './styles/paragraphStyles';
 import { placeholderOverflowStyles, placeholderStyles, placeholderTextStyles, placeholderTextStylesMixin_fg_platform_editor_system_fake_text_highlight_colour, placeholderWrapStyles } from './styles/placeholderStyles';
@@ -313,7 +313,9 @@ const EditorContentContainer = /*#__PURE__*/React.forwardRef((props, ref) => {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
     mentionNodeStyles,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
-    mentionsSelectionStyles, editorExperiment('platform_editor_vanilla_dom', true, {
+    mentionsSelectionStyles, fg('platform_editor_centre_mention_padding') &&
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    mentionsStylesMixin_platform_editor_centre_mention_padding, editorExperiment('platform_editor_vanilla_dom', true, {
       exposure: false
     }) ?
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values

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

@@ -40,16 +40,26 @@ export const findReplaceStylesNew = css({
 			inset 0 0 0 1px ${"var(--ds-background-accent-yellow-subtler-pressed, #E2B203)"},
 			inset 0 0 0 5px ${"var(--ds-background-accent-yellow-subtler, #F8E6A0)"}
 			`
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '.loader-wrapper>a, .lozenge-wrapper, .editor-mention-primitive, .date-lozenger-container': {
+      boxShadow: `0px 0px 0px 4px ${"var(--ds-background-accent-yellow-subtler, #F8E6A0)"}, 0px 0px 0px 5px ${"var(--ds-background-accent-yellow-subtler-pressed, #E2B203)"}`,
+      borderRadius: '3px'
     }
   },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  '.search-match-selected.search-match-block': {
+  '.search-match-block.search-match-block-selected': {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
     '[data-smart-link-container="true"], .loader-wrapper>div::after': {
       boxShadow: `
 			inset 0 0 0 1px ${"var(--ds-background-accent-yellow-subtler-pressed, #E2B203)"},
 			inset 0 0 0 4px ${"var(--ds-background-accent-yellow-subtlest-pressed, #F5CD47)"}
 			`
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '.loader-wrapper>a, .lozenge-wrapper, .editor-mention-primitive, .date-lozenger-container': {
+      boxShadow: `0px 0px 0px 4px ${"var(--ds-background-accent-yellow-subtlest-pressed, #F5CD47)"}, 0px 0px 0px 5px ${"var(--ds-background-accent-yellow-subtler-pressed, #E2B203)"}`,
+      borderRadius: '3px'
     }
   },
   /** With node selection */
@@ -62,10 +72,15 @@ export const findReplaceStylesNew = css({
 			inset 0 0 0 5px ${"var(--ds-background-accent-yellow-subtler, #F8E6A0)"},
 			0 0 0 1px ${"var(--ds-border-selected, #0C66E4)"}
 			`
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '.loader-wrapper>a, .lozenge-wrapper': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
+      boxShadow: `0 0 0 1px ${"var(--ds-border-selected, #0C66E4)"}, 0px 0px 0px 4px ${"var(--ds-background-accent-yellow-subtler, #F8E6A0)"}, 0px 0px 0px 5px ${"var(--ds-background-accent-yellow-subtler-pressed, #E2B203)"} !important`
     }
   },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  '.search-match-selected.search-match-block.ak-editor-selected-node': {
+  '.search-match-block.search-match-block-selected.ak-editor-selected-node': {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
     '[data-smart-link-container="true"], .loader-wrapper>div::after': {
       boxShadow: `
@@ -73,10 +88,14 @@ export const findReplaceStylesNew = css({
 			inset 0 0 0 4px ${"var(--ds-background-accent-yellow-subtlest-pressed, #F5CD47)"},
 			0 0 0 1px ${"var(--ds-border-selected, #0C66E4)"}
 			`
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '.loader-wrapper>a, .lozenge-wrapper': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
+      boxShadow: `0 0 0 1px ${"var(--ds-border-selected, #0C66E4)"}, 0px 0px 0px 4px ${"var(--ds-background-accent-yellow-subtlest-pressed, #F5CD47)"}, 0px 0px 0px 5px ${"var(--ds-background-accent-yellow-subtler-pressed, #E2B203)"} !important`
     }
   },
   /** Dark mode */
-
   /** Without node selection */
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
   '.search-match-block.search-match-dark': {
@@ -86,16 +105,26 @@ export const findReplaceStylesNew = css({
 			inset 0 0 0 1px ${"var(--ds-background-accent-yellow-bolder, #946F00)"},
 			inset 0 0 0 5px ${"var(--ds-background-accent-yellow-bolder-pressed, #533F04)"}
 			`
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '.loader-wrapper>a, .lozenge-wrapper, .editor-mention-primitive, .date-lozenger-container': {
+      boxShadow: `0px 0px 0px 4px ${"var(--ds-background-accent-yellow-bolder-pressed, #533F04)"}, 0px 0px 0px 5px ${"var(--ds-background-accent-yellow-bolder, #946F00)"}`,
+      borderRadius: '3px'
     }
   },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  '.search-match-selected.search-match-block.search-match-dark': {
+  '.search-match-block.search-match-block-selected.search-match-dark': {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
     '[data-smart-link-container="true"], .loader-wrapper>div::after': {
       boxShadow: `
 			inset 0 0 0 1px ${"var(--ds-background-accent-yellow-bolder, #946F00)"},
 			inset 0 0 0 4px ${"var(--ds-background-accent-yellow-bolder-hovered, #7F5F01)"}
 			`
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '.loader-wrapper>a, .lozenge-wrapper, .editor-mention-primitive, .date-lozenger-container': {
+      boxShadow: `0px 0px 0px 4px ${"var(--ds-background-accent-yellow-bolder-hovered, #7F5F01)"}, 0px 0px 0px 5px ${"var(--ds-background-accent-yellow-bolder, #946F00)"}`,
+      borderRadius: '3px'
     }
   },
   /** With node selection */
@@ -108,10 +137,15 @@ export const findReplaceStylesNew = css({
 			inset 0 0 0 5px ${"var(--ds-background-accent-yellow-bolder-pressed, #533F04)"},
 			0 0 0 1px ${"var(--ds-border-selected, #0C66E4)"}
 			`
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '.loader-wrapper>a, .lozenge-wrapper': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
+      boxShadow: `0 0 0 1px ${"var(--ds-border-selected, #0C66E4)"}, 0px 0px 0px 4px ${"var(--ds-background-accent-yellow-bolder-pressed, #533F04)"}, 0px 0px 0px 5px ${"var(--ds-background-accent-yellow-bolder, #946F00)"} !important`
     }
   },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  '.search-match-selected.search-match-block.search-match-dark.ak-editor-selected-node': {
+  '.search-match-block.search-match-block-selected.search-match-dark.ak-editor-selected-node': {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
     '[data-smart-link-container="true"], .loader-wrapper>div::after': {
       boxShadow: `
@@ -119,6 +153,11 @@ export const findReplaceStylesNew = css({
 			inset 0 0 0 4px ${"var(--ds-background-accent-yellow-bolder-hovered, #7F5F01)"},
 			0 0 0 1px ${"var(--ds-border-selected, #0C66E4)"}
 			`
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '.loader-wrapper>a, .lozenge-wrapper': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
+      boxShadow: `0 0 0 1px ${"var(--ds-border-selected, #0C66E4)"}, 0px 0px 0px 4px ${"var(--ds-background-accent-yellow-bolder-hovered, #7F5F01)"}, 0px 0px 0px 5px ${"var(--ds-background-accent-yellow-bolder, #946F00)"} !important`
     }
   }
 });

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

@@ -91,6 +91,17 @@ export const mentionNodeStyles = css({
   }
 });
 
+// The feature-gate for this is dependent on the use of refreshed typography - bear this in mind when cleaning up
+// This is currently enforced through statsig prerequisite gates, as per #help-afm recommendation.
+// So it will need to be considered if the typography gates are still in use when this is cleaned up.
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
+export const mentionsStylesMixin_platform_editor_centre_mention_padding = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '.editor-mention-primitive': {
+    padding: '1px 0.3em 1px 0.23em'
+  }
+});
+
 // This is mentions styles for mentions selection styles based on the vanilla node view
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
 export const mentionsSelectionStyles = css({

package/dist/es2019/version-wrapper.js

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

package/dist/esm/create-editor/ReactEditorView/focusEditorElement.js

@@ -3,5 +3,7 @@ export function focusEditorElement(editorId) {
   if (!(parentElement instanceof HTMLElement)) {
     return;
   }
-  parentElement.focus();
+  parentElement.focus({
+    preventScroll: true
+  });
 }

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

@@ -14,7 +14,7 @@ import { injectIntl } from 'react-intl-next';
 import { decisionListSelector, taskListSelector } from '@atlaskit/adf-schema';
 import { fullPageMessages as messages } from '@atlaskit/editor-common/messages';
 import { tableFullPageEditorStyles } from '@atlaskit/editor-plugins/table/ui/common-styles';
-import { FULL_PAGE_EDITOR_TOOLBAR_HEIGHT as FULL_PAGE_EDITOR_TOOLBAR_HEIGHT_OLD, akEditorGutterPaddingDynamic } from '@atlaskit/editor-shared-styles';
+import { FULL_PAGE_EDITOR_TOOLBAR_HEIGHT, akEditorGutterPaddingDynamic } from '@atlaskit/editor-shared-styles';
 import { scrollbarStyles } from '@atlaskit/editor-shared-styles/scrollbar';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { componentWithCondition } from '@atlaskit/platform-feature-flags-react';
@@ -36,8 +36,6 @@ var tableMarginFullWidthMode = 2;
 var akLayoutGutterOffset = 12;
 var SWOOP_ANIMATION = "0.5s ".concat(akEditorSwoopCubicBezier);
 var AK_NESTED_DND_GUTTER_OFFSET = 8;
-var FULL_PAGE_EDITOR_TOOLBAR_HEIGHT = "var(--ds-space-500, 40px)";
-var FULL_PAGE_EDITOR_TOOLBAR_HEIGHT_LIVE_PAGE = '2.188rem';
 var getTotalPadding = function getTotalPadding() {
   return akEditorGutterPaddingDynamic() * 2;
 };
@@ -47,7 +45,7 @@ var editorContentAreaStyle = function editorContentAreaStyle(_ref) {
   var layoutMaxWidth = _ref.layoutMaxWidth,
     fullWidthMode = _ref.fullWidthMode,
     isEditorToolbarHidden = _ref.isEditorToolbarHidden;
-  return [editorContentArea, editorContentAreaProsemirrorStyle, fg('platform_editor_fix_table_width_inline_comment') ? fullWidthNonChromelessBreakoutBlockTableStyle : fullWidthModeBreakoutBlockTableStyle, !fullWidthMode && editorContentAreaWithLayoutWith(layoutMaxWidth),
+  return [editorContentArea, editorContentAreaProsemirrorStyle, fullWidthNonChromelessBreakoutBlockTableStyle, !fullWidthMode && editorContentAreaWithLayoutWith(layoutMaxWidth),
   // for breakout resizing, there's no need to restrict the width of codeblocks as they're always wrapped in a breakout mark
   expValEqualsNoExposure('platform_editor_breakout_resizing', 'isEnabled', true) && fg('platform_editor_breakout_resizing_width_changes') ? editorContentAreaContainerStyleExcludeCodeBlock() : editorContentAreaContainerStyle()].concat(_toConsumableArray(fg('platform_editor_controls_no_toolbar_space') ? [] : [editorExperiment('platform_editor_controls', 'variant1') &&
   // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values
@@ -125,7 +123,7 @@ var editorContentArea = css({
     // When the toolbar is hidden, we don't want content to jump up
     // the extra 1px is to account for the border on the toolbar
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,  @atlaskit/ui-styling-standard/no-unsafe-values
-    paddingTop: "calc(".concat("var(--ds-space-600, 48px)", " + ", FULL_PAGE_EDITOR_TOOLBAR_HEIGHT_OLD(), " + 1px)")
+    paddingTop: "calc(".concat("var(--ds-space-600, 48px)", " + ", FULL_PAGE_EDITOR_TOOLBAR_HEIGHT(), " + 1px)")
   },
   paddingBottom: "var(--ds-space-600, 48px)",
   height: 'calc( 100% - 105px )',
@@ -154,23 +152,6 @@ var editorContentAreaProsemirrorStyle = css({
     marginBottom: "var(--ds-space-300, 24px)"
   })
 });
-var fullWidthModeBreakoutBlockTableStyle = css({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-1
-  '.fabric-editor--full-width-mode': {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-    '.fabric-editor-breakout-mark, .extension-container.block, .pm-table-container': {
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
-      width: '100% !important'
-    },
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-    '.fabric-editor-breakout-mark': {
-      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview, @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
-      marginLeft: 'unset !important',
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
-      transform: 'none !important'
-    }
-  }
-});
 var fullWidthNonChromelessBreakoutBlockTableStyle = css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-1
   '.fabric-editor--full-width-mode:not(:has(#chromeless-editor))': {
@@ -210,18 +191,6 @@ var editorContentGutterStyle = function editorContentGutterStyle() {
 };
 
 // new styles
-var editorContentAreaNoToolbarLivePageJumpMitigation = css({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
-  '.ak-editor-content-area-no-toolbar &': {
-    paddingTop: "calc(".concat("var(--ds-space-600, 48px)", " + ", FULL_PAGE_EDITOR_TOOLBAR_HEIGHT_LIVE_PAGE, " + 1px)")
-  }
-});
-var editorContentAreaNoToolbarControls = css({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
-  '.ak-editor-content-area-no-toolbar &': {
-    paddingTop: "calc(".concat("var(--ds-space-600, 48px)", " + ", FULL_PAGE_EDITOR_TOOLBAR_HEIGHT, " + 1px)")
-  }
-});
 var editorContentAreaNew = css({
   // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
   lineHeight: '24px',
@@ -230,7 +199,7 @@ var editorContentAreaNew = css({
   '.ak-editor-content-area-no-toolbar &': {
     // When the toolbar is hidden, we don't want content to jump up
     // the extra 1px is to account for the border on the toolbar
-    paddingTop: "calc(".concat("var(--ds-space-600, 48px)", " + ", FULL_PAGE_EDITOR_TOOLBAR_HEIGHT, " + 1px)")
+    paddingTop: "calc(".concat("var(--ds-space-600, 48px)", " + var(--ak-editor-fullpage-toolbar-height) + 1px)")
   },
   paddingBottom: "var(--ds-space-600, 48px)",
   height: 'calc( 100% - 105px )',
@@ -320,7 +289,7 @@ var editorContentGutterStyles = css({
 var contentAreaNew = css({
   display: 'flex',
   flexDirection: 'row',
-  height: "calc(100% - ".concat(FULL_PAGE_EDITOR_TOOLBAR_HEIGHT, ")"),
+  height: "calc(100% - var(--ak-editor-fullpage-toolbar-height))",
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values
   '&.ak-editor-content-area-no-toolbar': {
     // The editor toolbar height is 1px off (from the border) -- so we need to add 1px to the height
@@ -332,12 +301,6 @@ var contentAreaNew = css({
   padding: 0,
   transition: "padding 0ms ".concat(akEditorSwoopCubicBezier)
 });
-var contentAreaHeightLivePageJumpMitigation = css({
-  height: "calc(100% - ".concat(FULL_PAGE_EDITOR_TOOLBAR_HEIGHT_LIVE_PAGE, ")")
-});
-var contentAreaHeightControls = css({
-  height: "calc(100% - ".concat(FULL_PAGE_EDITOR_TOOLBAR_HEIGHT, ")")
-});
 var contentAreaHeightNoToolbar = css({
   height: '100%'
 });
@@ -394,9 +357,7 @@ var Content = /*#__PURE__*/React.forwardRef(function (props, ref) {
     return editorExperiment('platform_editor_controls', 'variant1');
   };
   return jsx("div", {
-    css: expValEquals('platform_editor_core_static_emotion_non_central', 'isEnabled', true) ? [contentAreaNew, fg('live_pages_content_jump_mitigation') && contentAreaHeightLivePageJumpMitigation, editorExperiment('platform_editor_controls', 'variant1', {
-      exposure: true
-    }) && contentAreaHeightControls, props.isEditorToolbarHidden && contentAreaHeightNoToolbar] : [
+    css: expValEquals('platform_editor_core_static_emotion_non_central', 'isEnabled', true) ? [contentAreaNew, props.isEditorToolbarHidden && contentAreaHeightNoToolbar] : [
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
     contentArea,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
@@ -422,9 +383,7 @@ var Content = /*#__PURE__*/React.forwardRef(function (props, ref) {
     editorView: props.editorView,
     editorDisabled: props.disabled
   }, jsx("div", {
-    css: expValEquals('platform_editor_core_static_emotion_non_central', 'isEnabled', true) ? [editorContentAreaNew, editorContentAreaProsemirrorStyle, tableFullPageEditorStylesNew, fg('live_pages_content_jump_mitigation') && editorContentAreaNoToolbarLivePageJumpMitigation, editorExperiment('platform_editor_controls', 'variant1', {
-      exposure: true
-    }) && editorContentAreaNoToolbarControls, fg('platform_editor_fix_table_width_inline_comment') ? fullWidthNonChromelessBreakoutBlockTableStyle : fullWidthModeBreakoutBlockTableStyle,
+    css: expValEquals('platform_editor_core_static_emotion_non_central', 'isEnabled', true) ? [editorContentAreaNew, editorContentAreaProsemirrorStyle, tableFullPageEditorStylesNew, fullWidthNonChromelessBreakoutBlockTableStyle,
     // for breakout resizing, there's no need to restrict the width of codeblocks as they're always wrapped in a breakout mark
     expValEqualsNoExposure('platform_editor_breakout_resizing', 'isEnabled', true) && fg('platform_editor_breakout_resizing_width_changes') ? editorContentAreaContainerStyleExcludeCodeBlockNew : editorContentAreaContainerStyleNew, fg('platform_editor_nested_dnd_styles_changes') && editorContentAreaContainerNestedDndStyle, !fg('platform_editor_controls_no_toolbar_space') && editorExperiment('platform_editor_controls', 'variant1') && contentAreaReducedHeaderSpace, !fg('platform_editor_controls_no_toolbar_space') && props.isEditorToolbarHidden && editorExperiment('platform_editor_controls', 'variant1') && contentAreaReservedPrimaryToolbarSpace] : _toConsumableArray(editorContentAreaStyle({
       fullWidthMode: fullWidthMode,

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

@@ -93,6 +93,16 @@ var mentionNodeStyles = css({
     }
   }
 });
+
+// The feature-gate for this is dependent on the use of refreshed typography - bear this in mind when cleaning up
+// This is currently enforced through statsig prerequisite gates, as per #help-afm recommendation.
+// So it will need to be considered if the typography gates are still in use when this is cleaned up.
+var mentionNodeStylesMixin_fg_platform_editor_centre_mention_padding = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '.editor-mention-primitive': {
+    padding: '1px 0.3em 1px 0.23em'
+  }
+});
 var vanillaSelectionStyles = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n\t.danger {\n\t\t.editor-mention-primitive {\n\t\t\tbox-shadow: 0 0 0 ", "px ", ";\n\t\t\tbackground-color: ", ";\n\t\t}\n\t}\n\n\t.", " > .editor-mention-primitive,\n\t.", " > .editor-mention-primitive.mention-self,\n\t.", " > .editor-mention-primitive.mention-restricted {\n\t\t", "\n\t\t/* need to specify dark text colour because personal mentions\n\t       (in dark blue) have white text by default */\n\t\tcolor: ", "\n\t}\n"])), akEditorSelectedBorderSize, akEditorDeleteBorder, "var(--ds-background-danger, ".concat(akEditorDeleteBackgroundWithOpacity, ")"), akEditorSelectedNodeClassName, akEditorSelectedNodeClassName, akEditorSelectedNodeClassName, getSelectionStyles([SelectionStyle.BoxShadow, SelectionStyle.Background]), "var(--ds-text-subtle, #44546F)");
 var mentionsStyles = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n\t.", " {\n\t\t&.", " [data-mention-id] > span {\n\t\t\t", "\n\n\t\t\t/* need to specify dark text colour because personal mentions\n         (in dark blue) have white text by default */\n      color: ", ";\n\t\t}\n\t}\n\n\t.danger {\n\t\t.", ".", "\n\t\t\t> span\n\t\t\t> span\n\t\t\t> span {\n\t\t\tbox-shadow: 0 0 0 ", "px ", ";\n\t\t\tbackground-color: ", ";\n\t\t}\n\t\t.", " > span > span > span {\n\t\t\tbackground-color: ", ";\n\t\t\tcolor: ", ";\n\t\t}\n\t}\n"])), MentionSharedCssClassName.MENTION_CONTAINER, akEditorSelectedNodeClassName, getSelectionStyles([SelectionStyle.BoxShadow, SelectionStyle.Background]), "var(--ds-text-subtle, #44546F)", MentionSharedCssClassName.MENTION_CONTAINER, akEditorSelectedNodeClassName, akEditorSelectedBorderSize, akEditorDeleteBorder, "var(--ds-background-danger, ".concat(akEditorDeleteBackgroundWithOpacity, ")"), MentionSharedCssClassName.MENTION_CONTAINER, "var(--ds-background-neutral, #091E420F)", "var(--ds-text-subtle, #44546F)");
 var listsStyles = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n\t.ProseMirror {\n\t\tli {\n\t\t\tposition: relative;\n\n\t\t\t> p:not(:first-child) {\n\t\t\t\tmargin: ", " 0 0 0;\n\t\t\t}\n\n\t\t\t/* In SSR the above rule will apply to all p tags because first-child would be a style tag.\n\t\t\tThe following rule resets the first p tag back to its original margin\n\t\t\tdefined in packages/editor/editor-common/src/styles/shared/paragraph.ts */\n\t\t\t> style:first-child + p {\n\t\t\t\tmargin-top: ", ";\n\t\t\t}\n\t\t}\n\n\t\t&:not([data-node-type='decisionList']) > li,\n    /* This prevents https://product-fabric.atlassian.net/browse/ED-20924 */\n    &:not(.", ") > li {\n\t\t\t", "\n\t\t}\n\t}\n"])), "var(--ds-space-050, 4px)", blockNodesVerticalMargin, SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER, browser.safari ? codeBlockInListSafariFix : '');
@@ -150,9 +160,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--ak-editor--breakout-fallback-width: calc(\n\t\t100cqw - var(--ak-editor--breakout-full-page-guttering-padding)\n\t);\n\n\t.fabric-editor--full-width-mode {\n\t\t--ak-editor--line-length: min(\n\t\t\tcalc(100cqw - var(--ak-editor--large-gutter-padding) * 2),\n\t\t\tvar(--ak-editor--full-width-layout-width)\n\t\t);\n\n\t\t/* in full width appearances it's not possible to rely on cqw because it doesn't account for the page scrollbar, which depends on users system settings */\n\t\t--ak-editor--breakout-fallback-width: 100%;\n\t}\n\n\t.ProseMirror {\n\t\t--ak-editor-max-container-width: calc(100cqw - var(--ak-editor--large-gutter-padding));\n\t}\n\n\t/* We can't allow nodes that are inside other nodes to bleed from the parent container */\n\t.ProseMirror > div[data-prosemirror-node-block] [data-prosemirror-node-block] {\n\t\t--ak-editor-max-container-width: 100%;\n\t}\n\n\t/* container editor-area is defined in platform/packages/editor/editor-core/src/ui/Appearance/FullPage/StyledComponents.ts */\n\t@container editor-area (width >= ", ") {\n\t\t.ProseMirror {\n\t\t\t--ak-editor--breakout-wide-layout-width: ", "px;\n\t\t}\n\t}\n\n\t.ProseMirror {\n\t\toutline: none;\n\t\tfont-size: ", "px;\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t}\n\n\t.ProseMirror-hideselection *::selection {\n\t\tbackground: transparent;\n\t}\n\n\t.ProseMirror-hideselection *::-moz-selection {\n\t\tbackground: transparent;\n\t}\n\n\t/**\n\t * This prosemirror css style: https://github.com/ProseMirror/prosemirror-view/blob/f37ebb29befdbde3cd194fe13fe17b78e743d2f2/style/prosemirror.css#L24\n\t *\n\t * 1. Merge and Release platform_editor_hide_cursor_when_pm_hideselection\n\t * 2. Cleanup duplicated style from platform_editor_advanced_code_blocks\n\t *    https://product-fabric.atlassian.net/browse/ED-26331\n\t */\n\t", "\n\n\t/* This prosemirror css style: https://github.com/ProseMirror/prosemirror-view/blob/f37ebb29befdbde3cd194fe13fe17b78e743d2f2/style/prosemirror.css#L24 */\n\t", "\n\n\t.ProseMirror-selectednode {\n\t\toutline: none;\n\t}\n\n\t.ProseMirror-selectednode:empty {\n\t\toutline: 2px solid ", ";\n\t}\n\n\t.ProseMirror.ProseMirror-focused:has(.ProseMirror-mark-boundary-cursor) {\n\t\tcaret-color: transparent;\n\t}\n\t.ProseMirror:not(.ProseMirror-focused) .ProseMirror-mark-boundary-cursor {\n\t\tdisplay: none;\n\t}\n\n\t", "\n\t", "\n\t", "\n\t", "\n\t", "\n\t", "\n\n  ", "\n\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", ";\n\t", "\n\t", "\n\t", "\n\t", "\n\t", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  /* Switch between the two icons based on the visual refresh feature gate */\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n\t", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n\n  .panelView-content-wrap {\n\t\tbox-sizing: border-box;\n\t}\n\n\t.mediaGroupView-content-wrap ul {\n\t\tpadding: 0;\n\t}\n\n\t/** Needed to override any cleared floats, e.g. image wrapping */\n\n\tdiv.fabric-editor-block-mark[class^='fabric-editor-align'] {\n\t\tclear: none !important;\n\t}\n\n\t.fabric-editor-align-end {\n\t\ttext-align: right;\n\t}\n\n\t.fabric-editor-align-start {\n\t\ttext-align: left;\n\t}\n\n\t.fabric-editor-align-center {\n\t\ttext-align: center;\n\t}\n\n\t/* For FullPage only when inside a table\n\tRelated code all lives inside: packages/editor/editor-core/src/ui/Appearance/FullPage/StyledComponents.ts\n\tIn the \"editorContentAreaContainerStyle\" function */\n\t.fabric-editor--full-width-mode {\n\t\t.pm-table-container {\n\t\t\t.code-block,\n\t\t\t.extension-container,\n\t\t\t.multiBodiedExtension--container {\n\t\t\t\tmax-width: 100%;\n\t\t\t}\n\t\t}\n\t}\n\n\t.pm-table-header-content-wrap :not(.fabric-editor-alignment),\n\t.pm-table-header-content-wrap :not(p, .fabric-editor-block-mark) + div.fabric-editor-block-mark,\n\t.pm-table-cell-content-wrap :not(p, .fabric-editor-block-mark) + div.fabric-editor-block-mark {\n\t\tp:first-of-type {\n\t\t\tmargin-top: 0;\n\t\t}\n\t}\n\t.pm-table-cell-content-wrap .mediaGroupView-content-wrap {\n\t\tclear: both;\n\t}\n\n\t.hyperlink-floating-toolbar,\n\t.", " {\n\t\tpadding: 0;\n\t}\n\n\t/* Legacy Link icon in the Atlaskit package\n     is bigger than the others, new ADS icon does not have this issue\n  */\n\t", "\n"])), 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--ak-editor--breakout-fallback-width: calc(\n\t\t100cqw - var(--ak-editor--breakout-full-page-guttering-padding)\n\t);\n\n\t.fabric-editor--full-width-mode {\n\t\t--ak-editor--line-length: min(\n\t\t\tcalc(100cqw - var(--ak-editor--large-gutter-padding) * 2),\n\t\t\tvar(--ak-editor--full-width-layout-width)\n\t\t);\n\n\t\t/* in full width appearances it's not possible to rely on cqw because it doesn't account for the page scrollbar, which depends on users system settings */\n\t\t--ak-editor--breakout-fallback-width: 100%;\n\t}\n\n\t.ProseMirror {\n\t\t--ak-editor-max-container-width: calc(100cqw - var(--ak-editor--large-gutter-padding));\n\t}\n\n\t/* We can't allow nodes that are inside other nodes to bleed from the parent container */\n\t.ProseMirror > div[data-prosemirror-node-block] [data-prosemirror-node-block] {\n\t\t--ak-editor-max-container-width: 100%;\n\t}\n\n\t/* container editor-area is defined in platform/packages/editor/editor-core/src/ui/Appearance/FullPage/StyledComponents.ts */\n\t@container editor-area (width >= ", ") {\n\t\t.ProseMirror {\n\t\t\t--ak-editor--breakout-wide-layout-width: ", "px;\n\t\t}\n\t}\n\n\t.ProseMirror {\n\t\toutline: none;\n\t\tfont-size: ", "px;\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t}\n\n\t.ProseMirror-hideselection *::selection {\n\t\tbackground: transparent;\n\t}\n\n\t.ProseMirror-hideselection *::-moz-selection {\n\t\tbackground: transparent;\n\t}\n\n\t/**\n\t * This prosemirror css style: https://github.com/ProseMirror/prosemirror-view/blob/f37ebb29befdbde3cd194fe13fe17b78e743d2f2/style/prosemirror.css#L24\n\t *\n\t * 1. Merge and Release platform_editor_hide_cursor_when_pm_hideselection\n\t * 2. Cleanup duplicated style from platform_editor_advanced_code_blocks\n\t *    https://product-fabric.atlassian.net/browse/ED-26331\n\t */\n\t", "\n\n\t/* This prosemirror css style: https://github.com/ProseMirror/prosemirror-view/blob/f37ebb29befdbde3cd194fe13fe17b78e743d2f2/style/prosemirror.css#L24 */\n\t", "\n\n\t.ProseMirror-selectednode {\n\t\toutline: none;\n\t}\n\n\t.ProseMirror-selectednode:empty {\n\t\toutline: 2px solid ", ";\n\t}\n\n\t.ProseMirror.ProseMirror-focused:has(.ProseMirror-mark-boundary-cursor) {\n\t\tcaret-color: transparent;\n\t}\n\t.ProseMirror:not(.ProseMirror-focused) .ProseMirror-mark-boundary-cursor {\n\t\tdisplay: none;\n\t}\n\n\t", "\n\t", "\n\t", "\n\t", "\n\t", "\n\t", "\n\n  ", "\n\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", ";\n\t", "\n\t", "\n\t", "\n\t", "\n\t", "\n\t", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  /* Switch between the two icons based on the visual refresh feature gate */\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n\t", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n\n  .panelView-content-wrap {\n\t\tbox-sizing: border-box;\n\t}\n\n\t.mediaGroupView-content-wrap ul {\n\t\tpadding: 0;\n\t}\n\n\t/** Needed to override any cleared floats, e.g. image wrapping */\n\n\tdiv.fabric-editor-block-mark[class^='fabric-editor-align'] {\n\t\tclear: none !important;\n\t}\n\n\t.fabric-editor-align-end {\n\t\ttext-align: right;\n\t}\n\n\t.fabric-editor-align-start {\n\t\ttext-align: left;\n\t}\n\n\t.fabric-editor-align-center {\n\t\ttext-align: center;\n\t}\n\n\t/* For FullPage only when inside a table\n\tRelated code all lives inside: packages/editor/editor-core/src/ui/Appearance/FullPage/StyledComponents.ts\n\tIn the \"editorContentAreaContainerStyle\" function */\n\t.fabric-editor--full-width-mode {\n\t\t.pm-table-container {\n\t\t\t.code-block,\n\t\t\t.extension-container,\n\t\t\t.multiBodiedExtension--container {\n\t\t\t\tmax-width: 100%;\n\t\t\t}\n\t\t}\n\t}\n\n\t.pm-table-header-content-wrap :not(.fabric-editor-alignment),\n\t.pm-table-header-content-wrap :not(p, .fabric-editor-block-mark) + div.fabric-editor-block-mark,\n\t.pm-table-cell-content-wrap :not(p, .fabric-editor-block-mark) + div.fabric-editor-block-mark {\n\t\tp:first-of-type {\n\t\t\tmargin-top: 0;\n\t\t}\n\t}\n\t.pm-table-cell-content-wrap .mediaGroupView-content-wrap {\n\t\tclear: both;\n\t}\n\n\t.hyperlink-floating-toolbar,\n\t.", " {\n\t\tpadding: 0;\n\t}\n\n\t/* Legacy Link icon in the Atlaskit package\n     is bigger than the others, new ADS icon does not have this issue\n  */\n\t", "\n"])), 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)", firstFloatingToolbarButtonStyles, 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, mentionNodeStyles, 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)", firstFloatingToolbarButtonStyles, 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, mentionNodeStyles, fg('platform_editor_centre_mention_padding') && mentionNodeStylesMixin_fg_platform_editor_centre_mention_padding, editorExperiment('platform_editor_vanilla_dom', true, {
     exposure: false
   }) && vanillaSelectionStyles, editorExperiment('platform_editor_vanilla_dom', true, {
     exposure: false

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

@@ -42,7 +42,7 @@ import { layoutBaseStyles, layoutBaseStylesAdvanced, layoutBaseStylesFixesUnderN
 import { hyperLinkFloatingToolbarStyles, linkLegacyIconStylesFix, linkStyles, linkStylesOld } from './styles/link';
 import { listsStyles, listsStylesSafariFix } from './styles/list';
 import { mediaAlignmentStyles, mediaGroupStyles, mediaStyles } from './styles/mediaStyles';
-import { mentionsStyles, mentionsSelectionStyles, mentionNodeStyles } from './styles/mentions';
+import { mentionsStyles, mentionsSelectionStyles, mentionNodeStyles, mentionsStylesMixin_platform_editor_centre_mention_padding } 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, paragraphStylesUGCRefreshed } from './styles/paragraphStyles';
 import { placeholderOverflowStyles, placeholderStyles, placeholderTextStyles, placeholderTextStylesMixin_fg_platform_editor_system_fake_text_highlight_colour, placeholderWrapStyles } from './styles/placeholderStyles';
@@ -310,7 +310,9 @@ var EditorContentContainer = /*#__PURE__*/React.forwardRef(function (props, ref)
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
     mentionNodeStyles,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
-    mentionsSelectionStyles, editorExperiment('platform_editor_vanilla_dom', true, {
+    mentionsSelectionStyles, fg('platform_editor_centre_mention_padding') &&
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    mentionsStylesMixin_platform_editor_centre_mention_padding, editorExperiment('platform_editor_vanilla_dom', true, {
       exposure: false
     }) ?
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values

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

@@ -37,13 +37,23 @@ export var findReplaceStylesNew = css({
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
     '[data-smart-link-container="true"], .loader-wrapper>div::after': {
       boxShadow: "\n\t\t\tinset 0 0 0 1px ".concat("var(--ds-background-accent-yellow-subtler-pressed, #E2B203)", ",\n\t\t\tinset 0 0 0 5px ", "var(--ds-background-accent-yellow-subtler, #F8E6A0)", "\n\t\t\t")
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '.loader-wrapper>a, .lozenge-wrapper, .editor-mention-primitive, .date-lozenger-container': {
+      boxShadow: "0px 0px 0px 4px ".concat("var(--ds-background-accent-yellow-subtler, #F8E6A0)", ", 0px 0px 0px 5px ", "var(--ds-background-accent-yellow-subtler-pressed, #E2B203)"),
+      borderRadius: '3px'
     }
   },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  '.search-match-selected.search-match-block': {
+  '.search-match-block.search-match-block-selected': {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
     '[data-smart-link-container="true"], .loader-wrapper>div::after': {
       boxShadow: "\n\t\t\tinset 0 0 0 1px ".concat("var(--ds-background-accent-yellow-subtler-pressed, #E2B203)", ",\n\t\t\tinset 0 0 0 4px ", "var(--ds-background-accent-yellow-subtlest-pressed, #F5CD47)", "\n\t\t\t")
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '.loader-wrapper>a, .lozenge-wrapper, .editor-mention-primitive, .date-lozenger-container': {
+      boxShadow: "0px 0px 0px 4px ".concat("var(--ds-background-accent-yellow-subtlest-pressed, #F5CD47)", ", 0px 0px 0px 5px ", "var(--ds-background-accent-yellow-subtler-pressed, #E2B203)"),
+      borderRadius: '3px'
     }
   },
   /** With node selection */
@@ -52,30 +62,49 @@ export var findReplaceStylesNew = css({
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
     '.loader-wrapper>div::after': {
       boxShadow: "\n\t\t\tinset 0 0 0 1px ".concat("var(--ds-background-accent-yellow-subtler-pressed, #E2B203)", ",\n\t\t\tinset 0 0 0 5px ", "var(--ds-background-accent-yellow-subtler, #F8E6A0)", ",\n\t\t\t0 0 0 1px ", "var(--ds-border-selected, #0C66E4)", "\n\t\t\t")
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '.loader-wrapper>a, .lozenge-wrapper': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
+      boxShadow: "0 0 0 1px ".concat("var(--ds-border-selected, #0C66E4)", ", 0px 0px 0px 4px ", "var(--ds-background-accent-yellow-subtler, #F8E6A0)", ", 0px 0px 0px 5px ", "var(--ds-background-accent-yellow-subtler-pressed, #E2B203)", " !important")
     }
   },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  '.search-match-selected.search-match-block.ak-editor-selected-node': {
+  '.search-match-block.search-match-block-selected.ak-editor-selected-node': {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
     '[data-smart-link-container="true"], .loader-wrapper>div::after': {
       boxShadow: "\n\t\t\tinset 0 0 0 1px ".concat("var(--ds-background-accent-yellow-subtler-pressed, #E2B203)", ",\n\t\t\tinset 0 0 0 4px ", "var(--ds-background-accent-yellow-subtlest-pressed, #F5CD47)", ",\n\t\t\t0 0 0 1px ", "var(--ds-border-selected, #0C66E4)", "\n\t\t\t")
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '.loader-wrapper>a, .lozenge-wrapper': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
+      boxShadow: "0 0 0 1px ".concat("var(--ds-border-selected, #0C66E4)", ", 0px 0px 0px 4px ", "var(--ds-background-accent-yellow-subtlest-pressed, #F5CD47)", ", 0px 0px 0px 5px ", "var(--ds-background-accent-yellow-subtler-pressed, #E2B203)", " !important")
     }
   },
   /** Dark mode */
-
   /** Without node selection */
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
   '.search-match-block.search-match-dark': {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
     '[data-smart-link-container="true"], .loader-wrapper>div::after': {
       boxShadow: "\n\t\t\tinset 0 0 0 1px ".concat("var(--ds-background-accent-yellow-bolder, #946F00)", ",\n\t\t\tinset 0 0 0 5px ", "var(--ds-background-accent-yellow-bolder-pressed, #533F04)", "\n\t\t\t")
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '.loader-wrapper>a, .lozenge-wrapper, .editor-mention-primitive, .date-lozenger-container': {
+      boxShadow: "0px 0px 0px 4px ".concat("var(--ds-background-accent-yellow-bolder-pressed, #533F04)", ", 0px 0px 0px 5px ", "var(--ds-background-accent-yellow-bolder, #946F00)"),
+      borderRadius: '3px'
     }
   },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  '.search-match-selected.search-match-block.search-match-dark': {
+  '.search-match-block.search-match-block-selected.search-match-dark': {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
     '[data-smart-link-container="true"], .loader-wrapper>div::after': {
       boxShadow: "\n\t\t\tinset 0 0 0 1px ".concat("var(--ds-background-accent-yellow-bolder, #946F00)", ",\n\t\t\tinset 0 0 0 4px ", "var(--ds-background-accent-yellow-bolder-hovered, #7F5F01)", "\n\t\t\t")
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '.loader-wrapper>a, .lozenge-wrapper, .editor-mention-primitive, .date-lozenger-container': {
+      boxShadow: "0px 0px 0px 4px ".concat("var(--ds-background-accent-yellow-bolder-hovered, #7F5F01)", ", 0px 0px 0px 5px ", "var(--ds-background-accent-yellow-bolder, #946F00)"),
+      borderRadius: '3px'
     }
   },
   /** With node selection */
@@ -84,13 +113,23 @@ export var findReplaceStylesNew = css({
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
     '.loader-wrapper>div::after': {
       boxShadow: "\n\t\t\tinset 0 0 0 1px ".concat("var(--ds-background-accent-yellow-bolder, #946F00)", ",\n\t\t\tinset 0 0 0 5px ", "var(--ds-background-accent-yellow-bolder-pressed, #533F04)", ",\n\t\t\t0 0 0 1px ", "var(--ds-border-selected, #0C66E4)", "\n\t\t\t")
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '.loader-wrapper>a, .lozenge-wrapper': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
+      boxShadow: "0 0 0 1px ".concat("var(--ds-border-selected, #0C66E4)", ", 0px 0px 0px 4px ", "var(--ds-background-accent-yellow-bolder-pressed, #533F04)", ", 0px 0px 0px 5px ", "var(--ds-background-accent-yellow-bolder, #946F00)", " !important")
     }
   },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  '.search-match-selected.search-match-block.search-match-dark.ak-editor-selected-node': {
+  '.search-match-block.search-match-block-selected.search-match-dark.ak-editor-selected-node': {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
     '[data-smart-link-container="true"], .loader-wrapper>div::after': {
       boxShadow: "\n\t\t\tinset 0 0 0 1px ".concat("var(--ds-background-accent-yellow-bolder, #946F00)", ",\n\t\t\tinset 0 0 0 4px ", "var(--ds-background-accent-yellow-bolder-hovered, #7F5F01)", ",\n\t\t\t0 0 0 1px ", "var(--ds-border-selected, #0C66E4)", "\n\t\t\t")
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '.loader-wrapper>a, .lozenge-wrapper': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
+      boxShadow: "0 0 0 1px ".concat("var(--ds-border-selected, #0C66E4)", ", 0px 0px 0px 4px ", "var(--ds-background-accent-yellow-bolder-hovered, #7F5F01)", ", 0px 0px 0px 5px ", "var(--ds-background-accent-yellow-bolder, #946F00)", " !important")
     }
   }
 });

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

@@ -78,6 +78,17 @@ export var mentionNodeStyles = css({
   }
 });
 
+// The feature-gate for this is dependent on the use of refreshed typography - bear this in mind when cleaning up
+// This is currently enforced through statsig prerequisite gates, as per #help-afm recommendation.
+// So it will need to be considered if the typography gates are still in use when this is cleaned up.
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
+export var mentionsStylesMixin_platform_editor_centre_mention_padding = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '.editor-mention-primitive': {
+    padding: '1px 0.3em 1px 0.23em'
+  }
+});
+
 // This is mentions styles for mentions selection styles based on the vanilla node view
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
 export var mentionsSelectionStyles = css(_defineProperty({

package/dist/esm/version-wrapper.js

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

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

@@ -1,3 +1,4 @@
 export declare const mentionsStyles: import("@emotion/react").SerializedStyles;
 export declare const mentionNodeStyles: import("@emotion/react").SerializedStyles;
+export declare const mentionsStylesMixin_platform_editor_centre_mention_padding: import("@emotion/react").SerializedStyles;
 export declare const mentionsSelectionStyles: import("@emotion/react").SerializedStyles;

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

@@ -1,3 +1,4 @@
 export declare const mentionsStyles: import("@emotion/react").SerializedStyles;
 export declare const mentionNodeStyles: import("@emotion/react").SerializedStyles;
+export declare const mentionsStylesMixin_platform_editor_centre_mention_padding: import("@emotion/react").SerializedStyles;
 export declare const mentionsSelectionStyles: import("@emotion/react").SerializedStyles;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-core",
-	"version": "208.3.6",
+	"version": "208.4.1",
 	"description": "A package contains Atlassian editor core functionality",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -51,7 +51,7 @@
 		"@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.2.0",
+		"@atlaskit/editor-plugins": "^9.3.0",
 		"@atlaskit/editor-prosemirror": "7.0.0",
 		"@atlaskit/editor-shared-styles": "^3.4.0",
 		"@atlaskit/emoji": "^69.3.0",
@@ -63,7 +63,7 @@
 		"@atlaskit/platform-feature-flags-react": "^0.2.0",
 		"@atlaskit/react-ufo": "^3.14.0",
 		"@atlaskit/task-decision": "^19.2.0",
-		"@atlaskit/tmp-editor-statsig": "^8.2.0",
+		"@atlaskit/tmp-editor-statsig": "^8.3.0",
 		"@atlaskit/tokens": "^5.4.0",
 		"@atlaskit/tooltip": "^20.3.0",
 		"@atlaskit/width-detector": "^5.0.0",
@@ -105,7 +105,7 @@
 		"@atlaskit/primitives": "^14.9.0",
 		"@atlaskit/renderer": "^119.0.0",
 		"@atlaskit/section-message": "^8.2.0",
-		"@atlaskit/smart-card": "^38.15.0",
+		"@atlaskit/smart-card": "^38.16.0",
 		"@atlaskit/synchrony-test-helpers": "workspace:^",
 		"@atlaskit/toggle": "^15.0.0",
 		"@atlaskit/util-data-test": "^18.0.0",
@@ -555,9 +555,6 @@
 		"confluence_team_presence_scroll_to_pointer": {
 			"type": "boolean"
 		},
-		"platform_editor_fix_table_width_inline_comment": {
-			"type": "boolean"
-		},
 		"dst-a11y__replace-anchor-with-link__editor": {
 			"type": "boolean"
 		},
@@ -585,6 +582,9 @@
 		},
 		"cc_editor_focus_before_editor_on_load": {
 			"type": "boolean"
+		},
+		"platform_editor_centre_mention_padding": {
+			"type": "boolean"
 		}
 	},
 	"stricter": {