@atlaskit/editor-core 208.4.0 → 208.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (25) hide show
  1. package/CHANGELOG.md +28 -0
  2. package/dist/cjs/create-editor/ReactEditorView/focusEditorElement.js +3 -1
  3. package/dist/cjs/ui/Appearance/FullPage/FullPageContentArea.js +2 -19
  4. package/dist/cjs/ui/ContentStyles/index.js +12 -2
  5. package/dist/cjs/ui/EditorContentContainer/EditorContentContainer.js +5 -2
  6. package/dist/cjs/ui/EditorContentContainer/styles/findReplaceStyles.js +57 -6
  7. package/dist/cjs/ui/EditorContentContainer/styles/mentions.js +12 -1
  8. package/dist/cjs/version-wrapper.js +1 -1
  9. package/dist/es2019/create-editor/ReactEditorView/focusEditorElement.js +3 -1
  10. package/dist/es2019/ui/Appearance/FullPage/FullPageContentArea.js +2 -19
  11. package/dist/es2019/ui/ContentStyles/index.js +11 -0
  12. package/dist/es2019/ui/EditorContentContainer/EditorContentContainer.js +6 -3
  13. package/dist/es2019/ui/EditorContentContainer/styles/findReplaceStyles.js +57 -6
  14. package/dist/es2019/ui/EditorContentContainer/styles/mentions.js +11 -0
  15. package/dist/es2019/version-wrapper.js +1 -1
  16. package/dist/esm/create-editor/ReactEditorView/focusEditorElement.js +3 -1
  17. package/dist/esm/ui/Appearance/FullPage/FullPageContentArea.js +2 -19
  18. package/dist/esm/ui/ContentStyles/index.js +12 -2
  19. package/dist/esm/ui/EditorContentContainer/EditorContentContainer.js +6 -3
  20. package/dist/esm/ui/EditorContentContainer/styles/findReplaceStyles.js +57 -6
  21. package/dist/esm/ui/EditorContentContainer/styles/mentions.js +11 -0
  22. package/dist/esm/version-wrapper.js +1 -1
  23. package/dist/types/ui/EditorContentContainer/styles/mentions.d.ts +1 -0
  24. package/dist/types-ts4.5/ui/EditorContentContainer/styles/mentions.d.ts +1 -0
  25. package/package.json +6 -6
package/CHANGELOG.md CHANGED
@@ -1,5 +1,33 @@
1
1
  # @atlaskit/editor-core
2
2
 
3
+ ## 208.5.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#175370](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/175370)
8
+ [`fb5f9531ef9d8`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/fb5f9531ef9d8) -
9
+ [ux] [ED-27956] this PR is adding support for Find with expand titles and updating the search
10
+ match styles behind the experiment `platform_editor_find_and_replace_improvements`
11
+
12
+ ### Patch Changes
13
+
14
+ - Updated dependencies
15
+
16
+ ## 208.4.1
17
+
18
+ ### Patch Changes
19
+
20
+ - [#176892](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/176892)
21
+ [`7c387af73cfb2`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/7c387af73cfb2) -
22
+ [ux] Prevent scroll on focus before editor
23
+ - [#176864](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/176864)
24
+ [`980fda095ab20`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/980fda095ab20) -
25
+ [ux] Adjust mention styles to use flex centering instead of fixed padding values
26
+ - [#177647](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/177647)
27
+ [`422759e00f33d`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/422759e00f33d) -
28
+ ED-28282 Clean up platform_editor_fix_table_width_inline_comment
29
+ - Updated dependencies
30
+
3
31
  ## 208.4.0
4
32
 
5
33
  ### Minor Changes
@@ -9,5 +9,7 @@ function focusEditorElement(editorId) {
9
9
  if (!(parentElement instanceof HTMLElement)) {
10
10
  return;
11
11
  }
12
- parentElement.focus();
12
+ parentElement.focus({
13
+ preventScroll: true
14
+ });
13
15
  }
@@ -55,7 +55,7 @@ var editorContentAreaStyle = function editorContentAreaStyle(_ref) {
55
55
  var layoutMaxWidth = _ref.layoutMaxWidth,
56
56
  fullWidthMode = _ref.fullWidthMode,
57
57
  isEditorToolbarHidden = _ref.isEditorToolbarHidden;
58
- return [editorContentArea, editorContentAreaProsemirrorStyle, (0, _platformFeatureFlags.fg)('platform_editor_fix_table_width_inline_comment') ? fullWidthNonChromelessBreakoutBlockTableStyle : fullWidthModeBreakoutBlockTableStyle, !fullWidthMode && editorContentAreaWithLayoutWith(layoutMaxWidth),
58
+ return [editorContentArea, editorContentAreaProsemirrorStyle, fullWidthNonChromelessBreakoutBlockTableStyle, !fullWidthMode && editorContentAreaWithLayoutWith(layoutMaxWidth),
59
59
  // for breakout resizing, there's no need to restrict the width of codeblocks as they're always wrapped in a breakout mark
60
60
  (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') &&
61
61
  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values
@@ -162,23 +162,6 @@ var editorContentAreaProsemirrorStyle = (0, _react2.css)({
162
162
  marginBottom: "var(--ds-space-300, 24px)"
163
163
  })
164
164
  });
165
- var fullWidthModeBreakoutBlockTableStyle = (0, _react2.css)({
166
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-1
167
- '.fabric-editor--full-width-mode': {
168
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
169
- '.fabric-editor-breakout-mark, .extension-container.block, .pm-table-container': {
170
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
171
- width: '100% !important'
172
- },
173
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
174
- '.fabric-editor-breakout-mark': {
175
- // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview, @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
176
- marginLeft: 'unset !important',
177
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
178
- transform: 'none !important'
179
- }
180
- }
181
- });
182
165
  var fullWidthNonChromelessBreakoutBlockTableStyle = (0, _react2.css)({
183
166
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-1
184
167
  '.fabric-editor--full-width-mode:not(:has(#chromeless-editor))': {
@@ -410,7 +393,7 @@ var Content = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
410
393
  editorView: props.editorView,
411
394
  editorDisabled: props.disabled
412
395
  }, (0, _react2.jsx)("div", {
413
- css: (0, _expValEquals.expValEquals)('platform_editor_core_static_emotion_non_central', 'isEnabled', true) ? [editorContentAreaNew, editorContentAreaProsemirrorStyle, tableFullPageEditorStylesNew, (0, _platformFeatureFlags.fg)('platform_editor_fix_table_width_inline_comment') ? fullWidthNonChromelessBreakoutBlockTableStyle : fullWidthModeBreakoutBlockTableStyle,
396
+ css: (0, _expValEquals.expValEquals)('platform_editor_core_static_emotion_non_central', 'isEnabled', true) ? [editorContentAreaNew, editorContentAreaProsemirrorStyle, tableFullPageEditorStylesNew, fullWidthNonChromelessBreakoutBlockTableStyle,
414
397
  // for breakout resizing, there's no need to restrict the width of codeblocks as they're always wrapped in a breakout mark
415
398
  (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({
416
399
  fullWidthMode: fullWidthMode,
@@ -100,6 +100,16 @@ var mentionNodeStyles = (0, _react2.css)({
100
100
  }
101
101
  }
102
102
  });
103
+
104
+ // The feature-gate for this is dependent on the use of refreshed typography - bear this in mind when cleaning up
105
+ // This is currently enforced through statsig prerequisite gates, as per #help-afm recommendation.
106
+ // So it will need to be considered if the typography gates are still in use when this is cleaned up.
107
+ var mentionNodeStylesMixin_fg_platform_editor_centre_mention_padding = (0, _react2.css)({
108
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
109
+ '.editor-mention-primitive': {
110
+ padding: '1px 0.3em 1px 0.23em'
111
+ }
112
+ });
103
113
  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)");
104
114
  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)");
105
115
  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";
157
167
  // Under editor experiment platform_editor_core_static_emotion
158
168
  // If you are making changes to this file, please make sure to update in EditorContentContainer.tsx as well
159
169
  var legacyContentStyles = function legacyContentStyles(props) {
160
- 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)({
170
+ 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)({
161
171
  theme: props.theme
162
- }), _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, {
172
+ }), _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, {
163
173
  exposure: false
164
174
  }) && vanillaSelectionStyles, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true, {
165
175
  exposure: false
@@ -10,6 +10,7 @@ var _react2 = require("@emotion/react");
10
10
  var _browser = require("@atlaskit/editor-common/browser");
11
11
  var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
12
12
  var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
13
+ var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
13
14
  var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
14
15
  var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
15
16
  var _tokens = require("@atlaskit/tokens");
@@ -186,7 +187,7 @@ var EditorContentContainer = /*#__PURE__*/_react.default.forwardRef(function (pr
186
187
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
187
188
  _expandStyles.expandStylesMixin_without_fg_platform_editor_nested_dnd_styles_changes,
188
189
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
189
- (0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') && _expandStyles.expandStylesMixin_fg_platform_visual_refresh_icons, (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_find_and_replace_improvements', 'isEnabled', true) ?
190
+ (0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') && _expandStyles.expandStylesMixin_fg_platform_visual_refresh_icons, (0, _expValEquals.expValEquals)('platform_editor_find_and_replace_improvements', 'isEnabled', true) ?
190
191
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
191
192
  _findReplaceStyles.findReplaceStylesNew :
192
193
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
@@ -318,7 +319,9 @@ var EditorContentContainer = /*#__PURE__*/_react.default.forwardRef(function (pr
318
319
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
319
320
  _mentions.mentionNodeStyles,
320
321
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
321
- _mentions.mentionsSelectionStyles, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true, {
322
+ _mentions.mentionsSelectionStyles, (0, _platformFeatureFlags.fg)('platform_editor_centre_mention_padding') &&
323
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
324
+ _mentions.mentionsStylesMixin_platform_editor_centre_mention_padding, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true, {
322
325
  exposure: false
323
326
  }) ?
324
327
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
@@ -24,15 +24,32 @@ var findReplaceStyles = exports.findReplaceStyles = (0, _react.css)({
24
24
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
25
25
  var findReplaceStylesNew = exports.findReplaceStylesNew = (0, _react.css)({
26
26
  /** Text match styles */
27
+
28
+ /** Light mode */
29
+
27
30
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
28
- '.search-match': {
29
- borderRadius: '3px',
30
- backgroundColor: "var(--ds-background-accent-teal-subtlest, #E7F9FF)",
31
- boxShadow: "var(--ds-shadow-raised, 0 1px 1px 0 rgba(9, 30, 66, 0.25), 0 0 1px 0 rgba(9, 30, 66, 0.31))".concat(", inset 0 0 0 1px ", "var(--ds-border-input, #8590A2)")
31
+ '.search-match-text': {
32
+ borderRadius: "var(--ds-space-050, 4px)",
33
+ padding: "var(--ds-space-050, 4px)".concat(" 0"),
34
+ border: "1px solid ".concat("var(--ds-background-accent-yellow-subtler-pressed, #E2B203)"),
35
+ backgroundColor: "var(--ds-background-accent-yellow-subtler, #F8E6A0)",
36
+ color: "var(--ds-text, #172B4D)"
32
37
  },
33
38
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
34
- '.search-match-selected': {
35
- backgroundColor: "var(--ds-background-accent-teal-subtle, #6CC3E0)"
39
+ '.search-match-text.selected-search-match': {
40
+ backgroundColor: "var(--ds-background-accent-yellow-subtlest-pressed, #F5CD47)"
41
+ },
42
+ /** Dark mode */
43
+
44
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
45
+ '.search-match-text.search-match-dark': {
46
+ border: "1px solid ".concat("var(--ds-background-accent-yellow-bolder, #946F00)"),
47
+ backgroundColor: "var(--ds-background-accent-yellow-bolder-pressed, #533F04)",
48
+ color: "var(--ds-text-inverse, #FFFFFF)"
49
+ },
50
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
51
+ '.search-match-text.selected-search-match.search-match-dark': {
52
+ backgroundColor: "var(--ds-background-accent-yellow-bolder-hovered, #7F5F01)"
36
53
  },
37
54
  /** Block match styles */
38
55
 
@@ -138,5 +155,39 @@ var findReplaceStylesNew = exports.findReplaceStylesNew = (0, _react.css)({
138
155
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
139
156
  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")
140
157
  }
158
+ },
159
+ /** Expand title match styles */
160
+
161
+ /** Light mode */
162
+
163
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
164
+ '.search-match-expand-title > .ak-editor-expand__title-container > .ak-editor-expand__input-container': {
165
+ borderRadius: "var(--ds-space-050, 4px)",
166
+ padding: "var(--ds-space-050, 4px)".concat(" 0"),
167
+ border: "1px solid ".concat("var(--ds-background-accent-yellow-subtler-pressed, #E2B203)"),
168
+ backgroundColor: "var(--ds-background-accent-yellow-subtler, #F8E6A0)",
169
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
170
+ '.ak-editor-expand__title-input': {
171
+ color: "var(--ds-text, #172B4D)"
172
+ }
173
+ },
174
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
175
+ '.search-match-expand-title.selected-search-match > .ak-editor-expand__title-container > .ak-editor-expand__input-container': {
176
+ backgroundColor: "var(--ds-background-accent-yellow-subtlest-pressed, #F5CD47)"
177
+ },
178
+ /** Dark mode */
179
+
180
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
181
+ '.search-match-expand-title.search-match-dark > .ak-editor-expand__title-container > .ak-editor-expand__input-container': {
182
+ border: "1px solid ".concat("var(--ds-background-accent-yellow-bolder, #946F00)"),
183
+ backgroundColor: "var(--ds-background-accent-yellow-bolder-pressed, #533F04)",
184
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
185
+ '.ak-editor-expand__title-input': {
186
+ color: "var(--ds-text-inverse, #FFFFFF)"
187
+ }
188
+ },
189
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
190
+ '.search-match-expand-title.selected-search-match.search-match-dark > .ak-editor-expand__title-container > .ak-editor-expand__input-container': {
191
+ backgroundColor: "var(--ds-background-accent-yellow-bolder-hovered, #7F5F01)"
141
192
  }
142
193
  });
@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
4
4
  Object.defineProperty(exports, "__esModule", {
5
5
  value: true
6
6
  });
7
- exports.mentionsStyles = exports.mentionsSelectionStyles = exports.mentionNodeStyles = void 0;
7
+ exports.mentionsStylesMixin_platform_editor_centre_mention_padding = exports.mentionsStyles = exports.mentionsSelectionStyles = exports.mentionNodeStyles = void 0;
8
8
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
9
9
  var _react = require("@emotion/react");
10
10
  var _mention = require("@atlaskit/editor-common/mention");
@@ -85,6 +85,17 @@ var mentionNodeStyles = exports.mentionNodeStyles = (0, _react.css)({
85
85
  }
86
86
  });
87
87
 
88
+ // The feature-gate for this is dependent on the use of refreshed typography - bear this in mind when cleaning up
89
+ // This is currently enforced through statsig prerequisite gates, as per #help-afm recommendation.
90
+ // So it will need to be considered if the typography gates are still in use when this is cleaned up.
91
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
92
+ var mentionsStylesMixin_platform_editor_centre_mention_padding = exports.mentionsStylesMixin_platform_editor_centre_mention_padding = (0, _react.css)({
93
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
94
+ '.editor-mention-primitive': {
95
+ padding: '1px 0.3em 1px 0.23em'
96
+ }
97
+ });
98
+
88
99
  // This is mentions styles for mentions selection styles based on the vanilla node view
89
100
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
90
101
  var mentionsSelectionStyles = exports.mentionsSelectionStyles = (0, _react.css)((0, _defineProperty2.default)({
@@ -5,4 +5,4 @@ Object.defineProperty(exports, "__esModule", {
5
5
  });
6
6
  exports.version = exports.name = void 0;
7
7
  var name = exports.name = "@atlaskit/editor-core";
8
- var version = exports.version = "208.3.6";
8
+ var version = exports.version = "208.4.1";
@@ -3,5 +3,7 @@ export function focusEditorElement(editorId) {
3
3
  if (!(parentElement instanceof HTMLElement)) {
4
4
  return;
5
5
  }
6
- parentElement.focus();
6
+ parentElement.focus({
7
+ preventScroll: true
8
+ });
7
9
  }
@@ -41,7 +41,7 @@ const editorContentAreaStyle = ({
41
41
  layoutMaxWidth,
42
42
  fullWidthMode,
43
43
  isEditorToolbarHidden
44
- }) => [editorContentArea, editorContentAreaProsemirrorStyle, fg('platform_editor_fix_table_width_inline_comment') ? fullWidthNonChromelessBreakoutBlockTableStyle : fullWidthModeBreakoutBlockTableStyle, !fullWidthMode && editorContentAreaWithLayoutWith(layoutMaxWidth),
44
+ }) => [editorContentArea, editorContentAreaProsemirrorStyle, fullWidthNonChromelessBreakoutBlockTableStyle, !fullWidthMode && editorContentAreaWithLayoutWith(layoutMaxWidth),
45
45
  // for breakout resizing, there's no need to restrict the width of codeblocks as they're always wrapped in a breakout mark
46
46
  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') &&
47
47
  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values
@@ -145,23 +145,6 @@ const editorContentAreaProsemirrorStyle = css({
145
145
  }
146
146
  }
147
147
  });
148
- const fullWidthModeBreakoutBlockTableStyle = css({
149
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-1
150
- '.fabric-editor--full-width-mode': {
151
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
152
- '.fabric-editor-breakout-mark, .extension-container.block, .pm-table-container': {
153
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
154
- width: '100% !important'
155
- },
156
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
157
- '.fabric-editor-breakout-mark': {
158
- // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview, @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
159
- marginLeft: 'unset !important',
160
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
161
- transform: 'none !important'
162
- }
163
- }
164
- });
165
148
  const fullWidthNonChromelessBreakoutBlockTableStyle = css({
166
149
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-1
167
150
  '.fabric-editor--full-width-mode:not(:has(#chromeless-editor))': {
@@ -389,7 +372,7 @@ const Content = /*#__PURE__*/React.forwardRef((props, ref) => {
389
372
  editorView: props.editorView,
390
373
  editorDisabled: props.disabled
391
374
  }, jsx("div", {
392
- css: expValEquals('platform_editor_core_static_emotion_non_central', 'isEnabled', true) ? [editorContentAreaNew, editorContentAreaProsemirrorStyle, tableFullPageEditorStylesNew, fg('platform_editor_fix_table_width_inline_comment') ? fullWidthNonChromelessBreakoutBlockTableStyle : fullWidthModeBreakoutBlockTableStyle,
375
+ css: expValEquals('platform_editor_core_static_emotion_non_central', 'isEnabled', true) ? [editorContentAreaNew, editorContentAreaProsemirrorStyle, tableFullPageEditorStylesNew, fullWidthNonChromelessBreakoutBlockTableStyle,
393
376
  // for breakout resizing, there's no need to restrict the width of codeblocks as they're always wrapped in a breakout mark
394
377
  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] : [
395
378
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
@@ -109,6 +109,16 @@ const mentionNodeStyles = css({
109
109
  }
110
110
  }
111
111
  });
112
+
113
+ // The feature-gate for this is dependent on the use of refreshed typography - bear this in mind when cleaning up
114
+ // This is currently enforced through statsig prerequisite gates, as per #help-afm recommendation.
115
+ // So it will need to be considered if the typography gates are still in use when this is cleaned up.
116
+ const mentionNodeStylesMixin_fg_platform_editor_centre_mention_padding = css({
117
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
118
+ '.editor-mention-primitive': {
119
+ padding: '1px 0.3em 1px 0.23em'
120
+ }
121
+ });
112
122
  const vanillaSelectionStyles = css`
113
123
  .danger {
114
124
  .editor-mention-primitive {
@@ -413,6 +423,7 @@ const legacyContentStyles = props => css`
413
423
  ${panelStyles()}
414
424
  ${mentionsStyles}
415
425
  ${mentionNodeStyles}
426
+ ${fg('platform_editor_centre_mention_padding') && mentionNodeStylesMixin_fg_platform_editor_centre_mention_padding}
416
427
  ${editorExperiment('platform_editor_vanilla_dom', true, {
417
428
  exposure: false
418
429
  }) && vanillaSelectionStyles}
@@ -11,6 +11,7 @@ import { jsx, useTheme } from '@emotion/react';
11
11
  import { browser } from '@atlaskit/editor-common/browser';
12
12
  import { akEditorGutterPaddingDynamic, editorFontSize } from '@atlaskit/editor-shared-styles';
13
13
  import { fg } from '@atlaskit/platform-feature-flags';
14
+ import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
14
15
  import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
15
16
  import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
16
17
  import { useThemeObserver } from '@atlaskit/tokens';
@@ -42,7 +43,7 @@ import { layoutBaseStyles, layoutBaseStylesAdvanced, layoutBaseStylesFixesUnderN
42
43
  import { hyperLinkFloatingToolbarStyles, linkLegacyIconStylesFix, linkStyles, linkStylesOld } from './styles/link';
43
44
  import { listsStyles, listsStylesSafariFix } from './styles/list';
44
45
  import { mediaAlignmentStyles, mediaGroupStyles, mediaStyles } from './styles/mediaStyles';
45
- import { mentionsStyles, mentionsSelectionStyles, mentionNodeStyles } from './styles/mentions';
46
+ import { mentionsStyles, mentionsSelectionStyles, mentionNodeStyles, mentionsStylesMixin_platform_editor_centre_mention_padding } from './styles/mentions';
46
47
  import { panelStyles, panelStylesMixin, panelStylesMixin_fg_platform_editor_add_border_for_nested_panel, panelStylesMixin_fg_platform_editor_nested_dnd_styles_changes, panelViewStyles } from './styles/panelStyles';
47
48
  import { paragraphStylesOld, paragraphStylesUGCRefreshed } from './styles/paragraphStyles';
48
49
  import { placeholderOverflowStyles, placeholderStyles, placeholderTextStyles, placeholderTextStylesMixin_fg_platform_editor_system_fake_text_highlight_colour, placeholderWrapStyles } from './styles/placeholderStyles';
@@ -181,7 +182,7 @@ const EditorContentContainer = /*#__PURE__*/React.forwardRef((props, ref) => {
181
182
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
182
183
  expandStylesMixin_without_fg_platform_editor_nested_dnd_styles_changes,
183
184
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
184
- fg('platform-visual-refresh-icons') && expandStylesMixin_fg_platform_visual_refresh_icons, expValEqualsNoExposure('platform_editor_find_and_replace_improvements', 'isEnabled', true) ?
185
+ fg('platform-visual-refresh-icons') && expandStylesMixin_fg_platform_visual_refresh_icons, expValEquals('platform_editor_find_and_replace_improvements', 'isEnabled', true) ?
185
186
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
186
187
  findReplaceStylesNew :
187
188
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
@@ -313,7 +314,9 @@ const EditorContentContainer = /*#__PURE__*/React.forwardRef((props, ref) => {
313
314
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
314
315
  mentionNodeStyles,
315
316
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
316
- mentionsSelectionStyles, editorExperiment('platform_editor_vanilla_dom', true, {
317
+ mentionsSelectionStyles, fg('platform_editor_centre_mention_padding') &&
318
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
319
+ mentionsStylesMixin_platform_editor_centre_mention_padding, editorExperiment('platform_editor_vanilla_dom', true, {
317
320
  exposure: false
318
321
  }) ?
319
322
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
@@ -17,15 +17,32 @@ export const findReplaceStyles = css({
17
17
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
18
18
  export const findReplaceStylesNew = css({
19
19
  /** Text match styles */
20
+
21
+ /** Light mode */
22
+
20
23
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
21
- '.search-match': {
22
- borderRadius: '3px',
23
- backgroundColor: "var(--ds-background-accent-teal-subtlest, #E7F9FF)",
24
- boxShadow: `${"var(--ds-shadow-raised, 0 1px 1px 0 rgba(9, 30, 66, 0.25), 0 0 1px 0 rgba(9, 30, 66, 0.31))"}, inset 0 0 0 1px ${"var(--ds-border-input, #8590A2)"}`
24
+ '.search-match-text': {
25
+ borderRadius: "var(--ds-space-050, 4px)",
26
+ padding: `${"var(--ds-space-050, 4px)"} 0`,
27
+ border: `1px solid ${"var(--ds-background-accent-yellow-subtler-pressed, #E2B203)"}`,
28
+ backgroundColor: "var(--ds-background-accent-yellow-subtler, #F8E6A0)",
29
+ color: "var(--ds-text, #172B4D)"
25
30
  },
26
31
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
27
- '.search-match-selected': {
28
- backgroundColor: "var(--ds-background-accent-teal-subtle, #6CC3E0)"
32
+ '.search-match-text.selected-search-match': {
33
+ backgroundColor: "var(--ds-background-accent-yellow-subtlest-pressed, #F5CD47)"
34
+ },
35
+ /** Dark mode */
36
+
37
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
38
+ '.search-match-text.search-match-dark': {
39
+ border: `1px solid ${"var(--ds-background-accent-yellow-bolder, #946F00)"}`,
40
+ backgroundColor: "var(--ds-background-accent-yellow-bolder-pressed, #533F04)",
41
+ color: "var(--ds-text-inverse, #FFFFFF)"
42
+ },
43
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
44
+ '.search-match-text.selected-search-match.search-match-dark': {
45
+ backgroundColor: "var(--ds-background-accent-yellow-bolder-hovered, #7F5F01)"
29
46
  },
30
47
  /** Block match styles */
31
48
 
@@ -159,5 +176,39 @@ export const findReplaceStylesNew = css({
159
176
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
160
177
  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`
161
178
  }
179
+ },
180
+ /** Expand title match styles */
181
+
182
+ /** Light mode */
183
+
184
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
185
+ '.search-match-expand-title > .ak-editor-expand__title-container > .ak-editor-expand__input-container': {
186
+ borderRadius: "var(--ds-space-050, 4px)",
187
+ padding: `${"var(--ds-space-050, 4px)"} 0`,
188
+ border: `1px solid ${"var(--ds-background-accent-yellow-subtler-pressed, #E2B203)"}`,
189
+ backgroundColor: "var(--ds-background-accent-yellow-subtler, #F8E6A0)",
190
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
191
+ '.ak-editor-expand__title-input': {
192
+ color: "var(--ds-text, #172B4D)"
193
+ }
194
+ },
195
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
196
+ '.search-match-expand-title.selected-search-match > .ak-editor-expand__title-container > .ak-editor-expand__input-container': {
197
+ backgroundColor: "var(--ds-background-accent-yellow-subtlest-pressed, #F5CD47)"
198
+ },
199
+ /** Dark mode */
200
+
201
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
202
+ '.search-match-expand-title.search-match-dark > .ak-editor-expand__title-container > .ak-editor-expand__input-container': {
203
+ border: `1px solid ${"var(--ds-background-accent-yellow-bolder, #946F00)"}`,
204
+ backgroundColor: "var(--ds-background-accent-yellow-bolder-pressed, #533F04)",
205
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
206
+ '.ak-editor-expand__title-input': {
207
+ color: "var(--ds-text-inverse, #FFFFFF)"
208
+ }
209
+ },
210
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
211
+ '.search-match-expand-title.selected-search-match.search-match-dark > .ak-editor-expand__title-container > .ak-editor-expand__input-container': {
212
+ backgroundColor: "var(--ds-background-accent-yellow-bolder-hovered, #7F5F01)"
162
213
  }
163
214
  });
@@ -91,6 +91,17 @@ export const mentionNodeStyles = css({
91
91
  }
92
92
  });
93
93
 
94
+ // The feature-gate for this is dependent on the use of refreshed typography - bear this in mind when cleaning up
95
+ // This is currently enforced through statsig prerequisite gates, as per #help-afm recommendation.
96
+ // So it will need to be considered if the typography gates are still in use when this is cleaned up.
97
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
98
+ export const mentionsStylesMixin_platform_editor_centre_mention_padding = css({
99
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
100
+ '.editor-mention-primitive': {
101
+ padding: '1px 0.3em 1px 0.23em'
102
+ }
103
+ });
104
+
94
105
  // This is mentions styles for mentions selection styles based on the vanilla node view
95
106
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
96
107
  export const mentionsSelectionStyles = css({
@@ -1,2 +1,2 @@
1
1
  export const name = "@atlaskit/editor-core";
2
- export const version = "208.3.6";
2
+ export const version = "208.4.1";
@@ -3,5 +3,7 @@ export function focusEditorElement(editorId) {
3
3
  if (!(parentElement instanceof HTMLElement)) {
4
4
  return;
5
5
  }
6
- parentElement.focus();
6
+ parentElement.focus({
7
+ preventScroll: true
8
+ });
7
9
  }
@@ -45,7 +45,7 @@ var editorContentAreaStyle = function editorContentAreaStyle(_ref) {
45
45
  var layoutMaxWidth = _ref.layoutMaxWidth,
46
46
  fullWidthMode = _ref.fullWidthMode,
47
47
  isEditorToolbarHidden = _ref.isEditorToolbarHidden;
48
- return [editorContentArea, editorContentAreaProsemirrorStyle, fg('platform_editor_fix_table_width_inline_comment') ? fullWidthNonChromelessBreakoutBlockTableStyle : fullWidthModeBreakoutBlockTableStyle, !fullWidthMode && editorContentAreaWithLayoutWith(layoutMaxWidth),
48
+ return [editorContentArea, editorContentAreaProsemirrorStyle, fullWidthNonChromelessBreakoutBlockTableStyle, !fullWidthMode && editorContentAreaWithLayoutWith(layoutMaxWidth),
49
49
  // for breakout resizing, there's no need to restrict the width of codeblocks as they're always wrapped in a breakout mark
50
50
  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') &&
51
51
  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values
@@ -152,23 +152,6 @@ var editorContentAreaProsemirrorStyle = css({
152
152
  marginBottom: "var(--ds-space-300, 24px)"
153
153
  })
154
154
  });
155
- var fullWidthModeBreakoutBlockTableStyle = css({
156
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-1
157
- '.fabric-editor--full-width-mode': {
158
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
159
- '.fabric-editor-breakout-mark, .extension-container.block, .pm-table-container': {
160
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
161
- width: '100% !important'
162
- },
163
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
164
- '.fabric-editor-breakout-mark': {
165
- // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview, @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
166
- marginLeft: 'unset !important',
167
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
168
- transform: 'none !important'
169
- }
170
- }
171
- });
172
155
  var fullWidthNonChromelessBreakoutBlockTableStyle = css({
173
156
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-1
174
157
  '.fabric-editor--full-width-mode:not(:has(#chromeless-editor))': {
@@ -400,7 +383,7 @@ var Content = /*#__PURE__*/React.forwardRef(function (props, ref) {
400
383
  editorView: props.editorView,
401
384
  editorDisabled: props.disabled
402
385
  }, jsx("div", {
403
- css: expValEquals('platform_editor_core_static_emotion_non_central', 'isEnabled', true) ? [editorContentAreaNew, editorContentAreaProsemirrorStyle, tableFullPageEditorStylesNew, fg('platform_editor_fix_table_width_inline_comment') ? fullWidthNonChromelessBreakoutBlockTableStyle : fullWidthModeBreakoutBlockTableStyle,
386
+ css: expValEquals('platform_editor_core_static_emotion_non_central', 'isEnabled', true) ? [editorContentAreaNew, editorContentAreaProsemirrorStyle, tableFullPageEditorStylesNew, fullWidthNonChromelessBreakoutBlockTableStyle,
404
387
  // for breakout resizing, there's no need to restrict the width of codeblocks as they're always wrapped in a breakout mark
405
388
  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({
406
389
  fullWidthMode: fullWidthMode,
@@ -93,6 +93,16 @@ var mentionNodeStyles = css({
93
93
  }
94
94
  }
95
95
  });
96
+
97
+ // The feature-gate for this is dependent on the use of refreshed typography - bear this in mind when cleaning up
98
+ // This is currently enforced through statsig prerequisite gates, as per #help-afm recommendation.
99
+ // So it will need to be considered if the typography gates are still in use when this is cleaned up.
100
+ var mentionNodeStylesMixin_fg_platform_editor_centre_mention_padding = css({
101
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
102
+ '.editor-mention-primitive': {
103
+ padding: '1px 0.3em 1px 0.23em'
104
+ }
105
+ });
96
106
  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)");
97
107
  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)");
98
108
  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";
150
160
  // Under editor experiment platform_editor_core_static_emotion
151
161
  // If you are making changes to this file, please make sure to update in EditorContentContainer.tsx as well
152
162
  var legacyContentStyles = function legacyContentStyles(props) {
153
- 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({
163
+ 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({
154
164
  theme: props.theme
155
- }), 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, {
165
+ }), 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, {
156
166
  exposure: false
157
167
  }) && vanillaSelectionStyles, editorExperiment('platform_editor_vanilla_dom', true, {
158
168
  exposure: false
@@ -11,6 +11,7 @@ import { jsx, useTheme } from '@emotion/react';
11
11
  import { browser } from '@atlaskit/editor-common/browser';
12
12
  import { akEditorGutterPaddingDynamic, editorFontSize } from '@atlaskit/editor-shared-styles';
13
13
  import { fg } from '@atlaskit/platform-feature-flags';
14
+ import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
14
15
  import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
15
16
  import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
16
17
  import { useThemeObserver } from '@atlaskit/tokens';
@@ -42,7 +43,7 @@ import { layoutBaseStyles, layoutBaseStylesAdvanced, layoutBaseStylesFixesUnderN
42
43
  import { hyperLinkFloatingToolbarStyles, linkLegacyIconStylesFix, linkStyles, linkStylesOld } from './styles/link';
43
44
  import { listsStyles, listsStylesSafariFix } from './styles/list';
44
45
  import { mediaAlignmentStyles, mediaGroupStyles, mediaStyles } from './styles/mediaStyles';
45
- import { mentionsStyles, mentionsSelectionStyles, mentionNodeStyles } from './styles/mentions';
46
+ import { mentionsStyles, mentionsSelectionStyles, mentionNodeStyles, mentionsStylesMixin_platform_editor_centre_mention_padding } from './styles/mentions';
46
47
  import { panelStyles, panelStylesMixin, panelStylesMixin_fg_platform_editor_add_border_for_nested_panel, panelStylesMixin_fg_platform_editor_nested_dnd_styles_changes, panelViewStyles } from './styles/panelStyles';
47
48
  import { paragraphStylesOld, paragraphStylesUGCRefreshed } from './styles/paragraphStyles';
48
49
  import { placeholderOverflowStyles, placeholderStyles, placeholderTextStyles, placeholderTextStylesMixin_fg_platform_editor_system_fake_text_highlight_colour, placeholderWrapStyles } from './styles/placeholderStyles';
@@ -178,7 +179,7 @@ var EditorContentContainer = /*#__PURE__*/React.forwardRef(function (props, ref)
178
179
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
179
180
  expandStylesMixin_without_fg_platform_editor_nested_dnd_styles_changes,
180
181
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
181
- fg('platform-visual-refresh-icons') && expandStylesMixin_fg_platform_visual_refresh_icons, expValEqualsNoExposure('platform_editor_find_and_replace_improvements', 'isEnabled', true) ?
182
+ fg('platform-visual-refresh-icons') && expandStylesMixin_fg_platform_visual_refresh_icons, expValEquals('platform_editor_find_and_replace_improvements', 'isEnabled', true) ?
182
183
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
183
184
  findReplaceStylesNew :
184
185
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
@@ -310,7 +311,9 @@ var EditorContentContainer = /*#__PURE__*/React.forwardRef(function (props, ref)
310
311
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
311
312
  mentionNodeStyles,
312
313
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
313
- mentionsSelectionStyles, editorExperiment('platform_editor_vanilla_dom', true, {
314
+ mentionsSelectionStyles, fg('platform_editor_centre_mention_padding') &&
315
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
316
+ mentionsStylesMixin_platform_editor_centre_mention_padding, editorExperiment('platform_editor_vanilla_dom', true, {
314
317
  exposure: false
315
318
  }) ?
316
319
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
@@ -17,15 +17,32 @@ export var findReplaceStyles = css({
17
17
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
18
18
  export var findReplaceStylesNew = css({
19
19
  /** Text match styles */
20
+
21
+ /** Light mode */
22
+
20
23
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
21
- '.search-match': {
22
- borderRadius: '3px',
23
- backgroundColor: "var(--ds-background-accent-teal-subtlest, #E7F9FF)",
24
- boxShadow: "var(--ds-shadow-raised, 0 1px 1px 0 rgba(9, 30, 66, 0.25), 0 0 1px 0 rgba(9, 30, 66, 0.31))".concat(", inset 0 0 0 1px ", "var(--ds-border-input, #8590A2)")
24
+ '.search-match-text': {
25
+ borderRadius: "var(--ds-space-050, 4px)",
26
+ padding: "var(--ds-space-050, 4px)".concat(" 0"),
27
+ border: "1px solid ".concat("var(--ds-background-accent-yellow-subtler-pressed, #E2B203)"),
28
+ backgroundColor: "var(--ds-background-accent-yellow-subtler, #F8E6A0)",
29
+ color: "var(--ds-text, #172B4D)"
25
30
  },
26
31
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
27
- '.search-match-selected': {
28
- backgroundColor: "var(--ds-background-accent-teal-subtle, #6CC3E0)"
32
+ '.search-match-text.selected-search-match': {
33
+ backgroundColor: "var(--ds-background-accent-yellow-subtlest-pressed, #F5CD47)"
34
+ },
35
+ /** Dark mode */
36
+
37
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
38
+ '.search-match-text.search-match-dark': {
39
+ border: "1px solid ".concat("var(--ds-background-accent-yellow-bolder, #946F00)"),
40
+ backgroundColor: "var(--ds-background-accent-yellow-bolder-pressed, #533F04)",
41
+ color: "var(--ds-text-inverse, #FFFFFF)"
42
+ },
43
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
44
+ '.search-match-text.selected-search-match.search-match-dark': {
45
+ backgroundColor: "var(--ds-background-accent-yellow-bolder-hovered, #7F5F01)"
29
46
  },
30
47
  /** Block match styles */
31
48
 
@@ -131,5 +148,39 @@ export var findReplaceStylesNew = css({
131
148
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
132
149
  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")
133
150
  }
151
+ },
152
+ /** Expand title match styles */
153
+
154
+ /** Light mode */
155
+
156
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
157
+ '.search-match-expand-title > .ak-editor-expand__title-container > .ak-editor-expand__input-container': {
158
+ borderRadius: "var(--ds-space-050, 4px)",
159
+ padding: "var(--ds-space-050, 4px)".concat(" 0"),
160
+ border: "1px solid ".concat("var(--ds-background-accent-yellow-subtler-pressed, #E2B203)"),
161
+ backgroundColor: "var(--ds-background-accent-yellow-subtler, #F8E6A0)",
162
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
163
+ '.ak-editor-expand__title-input': {
164
+ color: "var(--ds-text, #172B4D)"
165
+ }
166
+ },
167
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
168
+ '.search-match-expand-title.selected-search-match > .ak-editor-expand__title-container > .ak-editor-expand__input-container': {
169
+ backgroundColor: "var(--ds-background-accent-yellow-subtlest-pressed, #F5CD47)"
170
+ },
171
+ /** Dark mode */
172
+
173
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
174
+ '.search-match-expand-title.search-match-dark > .ak-editor-expand__title-container > .ak-editor-expand__input-container': {
175
+ border: "1px solid ".concat("var(--ds-background-accent-yellow-bolder, #946F00)"),
176
+ backgroundColor: "var(--ds-background-accent-yellow-bolder-pressed, #533F04)",
177
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
178
+ '.ak-editor-expand__title-input': {
179
+ color: "var(--ds-text-inverse, #FFFFFF)"
180
+ }
181
+ },
182
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
183
+ '.search-match-expand-title.selected-search-match.search-match-dark > .ak-editor-expand__title-container > .ak-editor-expand__input-container': {
184
+ backgroundColor: "var(--ds-background-accent-yellow-bolder-hovered, #7F5F01)"
134
185
  }
135
186
  });
@@ -78,6 +78,17 @@ export var mentionNodeStyles = css({
78
78
  }
79
79
  });
80
80
 
81
+ // The feature-gate for this is dependent on the use of refreshed typography - bear this in mind when cleaning up
82
+ // This is currently enforced through statsig prerequisite gates, as per #help-afm recommendation.
83
+ // So it will need to be considered if the typography gates are still in use when this is cleaned up.
84
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
85
+ export var mentionsStylesMixin_platform_editor_centre_mention_padding = css({
86
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
87
+ '.editor-mention-primitive': {
88
+ padding: '1px 0.3em 1px 0.23em'
89
+ }
90
+ });
91
+
81
92
  // This is mentions styles for mentions selection styles based on the vanilla node view
82
93
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
83
94
  export var mentionsSelectionStyles = css(_defineProperty({
@@ -1,2 +1,2 @@
1
1
  export var name = "@atlaskit/editor-core";
2
- export var version = "208.3.6";
2
+ export var version = "208.4.1";
@@ -1,3 +1,4 @@
1
1
  export declare const mentionsStyles: import("@emotion/react").SerializedStyles;
2
2
  export declare const mentionNodeStyles: import("@emotion/react").SerializedStyles;
3
+ export declare const mentionsStylesMixin_platform_editor_centre_mention_padding: import("@emotion/react").SerializedStyles;
3
4
  export declare const mentionsSelectionStyles: import("@emotion/react").SerializedStyles;
@@ -1,3 +1,4 @@
1
1
  export declare const mentionsStyles: import("@emotion/react").SerializedStyles;
2
2
  export declare const mentionNodeStyles: import("@emotion/react").SerializedStyles;
3
+ export declare const mentionsStylesMixin_platform_editor_centre_mention_padding: import("@emotion/react").SerializedStyles;
3
4
  export declare const mentionsSelectionStyles: import("@emotion/react").SerializedStyles;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-core",
3
- "version": "208.4.0",
3
+ "version": "208.5.0",
4
4
  "description": "A package contains Atlassian editor core functionality",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -51,7 +51,7 @@
51
51
  "@atlaskit/editor-performance-metrics": "^2.1.0",
52
52
  "@atlaskit/editor-plugin-quick-insert": "^2.6.0",
53
53
  "@atlaskit/editor-plugin-user-preferences": "^0.2.0",
54
- "@atlaskit/editor-plugins": "^9.3.0",
54
+ "@atlaskit/editor-plugins": "^9.4.0",
55
55
  "@atlaskit/editor-prosemirror": "7.0.0",
56
56
  "@atlaskit/editor-shared-styles": "^3.4.0",
57
57
  "@atlaskit/emoji": "^69.3.0",
@@ -63,7 +63,7 @@
63
63
  "@atlaskit/platform-feature-flags-react": "^0.2.0",
64
64
  "@atlaskit/react-ufo": "^3.14.0",
65
65
  "@atlaskit/task-decision": "^19.2.0",
66
- "@atlaskit/tmp-editor-statsig": "^8.2.0",
66
+ "@atlaskit/tmp-editor-statsig": "^8.3.0",
67
67
  "@atlaskit/tokens": "^5.4.0",
68
68
  "@atlaskit/tooltip": "^20.3.0",
69
69
  "@atlaskit/width-detector": "^5.0.0",
@@ -555,9 +555,6 @@
555
555
  "confluence_team_presence_scroll_to_pointer": {
556
556
  "type": "boolean"
557
557
  },
558
- "platform_editor_fix_table_width_inline_comment": {
559
- "type": "boolean"
560
- },
561
558
  "dst-a11y__replace-anchor-with-link__editor": {
562
559
  "type": "boolean"
563
560
  },
@@ -585,6 +582,9 @@
585
582
  },
586
583
  "cc_editor_focus_before_editor_on_load": {
587
584
  "type": "boolean"
585
+ },
586
+ "platform_editor_centre_mention_padding": {
587
+ "type": "boolean"
588
588
  }
589
589
  },
590
590
  "stricter": {