@atlaskit/editor-core 208.3.3 → 208.3.5

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

@@ -19,11 +19,12 @@ import { PanelSharedCssClassName } from '@atlaskit/editor-common/panel';
 import { gapCursorStyles } from '@atlaskit/editor-common/selection';
 import { CodeBlockSharedCssClassName, MediaSharedClassNames, SmartCardSharedCssClassName, annotationSharedStyles, backgroundColorStyles, blockMarksSharedStyles, codeBlockInListSafariFix, codeMarkSharedStyles, dateSharedStyle, embedCardStyles, expandClassNames, getSmartCardSharedStyles, gridStyles, indentationSharedStyles, linkSharedStyle, listsSharedStyles, paragraphSharedStyles, resizerStyles, pragmaticResizerStyles, pragmaticStylesLayoutFirstNodeResizeHandleFix, pragmaticResizerStylesForTooltip, ruleSharedStyles, shadowSharedStyle, smartCardSharedStyles, smartCardStyles, tasksAndDecisionsStyles, textColorStyles, unsupportedStyles, whitespaceSharedStyles } from '@atlaskit/editor-common/styles';
 import { blocktypeStyles } from '@atlaskit/editor-plugins/block-type/styles';
-import { findReplaceStyles } from '@atlaskit/editor-plugins/find-replace/styles';
+import { findReplaceStyles, findReplaceStylesNew } from '@atlaskit/editor-plugins/find-replace/styles';
 import { textHighlightStyle } from '@atlaskit/editor-plugins/paste-options-toolbar/styles';
 import { placeholderTextStyles, placeholderTextStyles_fg_platform_editor_system_fake_text_highlight_colour } from '@atlaskit/editor-plugins/placeholder-text/styles';
 import { SelectionStyle, akEditorCalculatedWideLayoutWidth, akEditorCalculatedWideLayoutWidthSmallViewport, akEditorDefaultLayoutWidth, akEditorDeleteBackgroundWithOpacity, akEditorDeleteBorder, akEditorFullWidthLayoutWidth, akEditorGutterPadding, akEditorGutterPaddingDynamic, akEditorSelectedBorderColor, akEditorSelectedBorderSize, akEditorSelectedNodeClassName, blockNodesVerticalMargin, editorFontSize, getSelectionStyles } from '@atlaskit/editor-shared-styles';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { useThemeObserver } from '@atlaskit/tokens';
 import { InlineNodeViewSharedStyles } from '../../nodeviews/getInlineNodeViewProducer.styles';
@@ -60,13 +61,17 @@ const ruleStyles = () => css`
 		}
 	}
 `;
-const vanillaMentionsStyles = css({
+const mentionNodeStyles = css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '.editor-mention-primitive': {
     display: 'inline',
     borderRadius: '20px',
     cursor: 'pointer',
     padding: '0 0.3em 2px 0.23em',
+    // To match `packages/elements/mention/src/components/Mention/PrimitiveMention.tsx` implementation
+    // we match the line height exactly
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+    lineHeight: '1.714',
     fontWeight: "var(--ds-font-weight-regular, 400)",
     wordBreak: 'break-word',
     background: "var(--ds-background-neutral, #091E420F)",
@@ -386,7 +391,7 @@ const legacyContentStyles = props => css`
 		display: none;
 	}
 
-	${fg('platform_editor_fix_floating_toolbar_focus') ? firstFloatingToolbarButtonStyles : null}
+	${firstFloatingToolbarButtonStyles}
 	${placeholderTextStyles}
 	${fg('platform_editor_system_fake_text_highlight_colour') && placeholderTextStyles_fg_platform_editor_system_fake_text_highlight_colour}
 	${placeholderStyles}
@@ -407,9 +412,7 @@ const legacyContentStyles = props => css`
   ${gapCursorStyles};
 	${panelStyles()}
 	${mentionsStyles}
-	${editorExperiment('platform_editor_vanilla_dom', true, {
-  exposure: false
-}) && vanillaMentionsStyles}
+	${mentionNodeStyles}
 	${editorExperiment('platform_editor_vanilla_dom', true, {
   exposure: false
 }) && vanillaSelectionStyles}
@@ -424,12 +427,10 @@ const legacyContentStyles = props => css`
   ${dateSharedStyle}
   ${extensionStyles}
   ${expandStyles()}
-  ${findReplaceStyles}
+  ${expValEqualsNoExposure('platform_editor_find_and_replace_improvements', 'isEnabled', true) ? findReplaceStylesNew : findReplaceStyles}
   ${textHighlightStyle}
   ${taskDecisionStyles}
-  ${editorExperiment('platform_editor_vanilla_dom', true, {
-  exposure: false
-}) && vanillaTaskItemStyles}
+  ${vanillaTaskItemStyles}
   ${editorExperiment('platform_editor_vanilla_dom', true, {
   exposure: false
 }) && vanillaDecisionStyles}

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

@@ -171,7 +171,7 @@ export const vanillaTaskItemStyles = css({
     display: 'none'
   },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
-  '[data-prosemirror-node-view-type="vanilla"][data-prosemirror-node-name="taskItem"]:has([data-empty]):not(:has([data-type-ahead])) [data-component="placeholder"]': {
+  "[data-prosemirror-node-view-type='vanilla'][data-prosemirror-node-name='taskItem']:has([data-empty]):not(:has([data-type-ahead])) [data-component='placeholder']": {
     display: 'block'
   },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors

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

@@ -30,7 +30,7 @@ import { embedCardStyles } from './styles/embedCardStyles';
 import { reactEmojiStyles, vanillaEmojiStyles } from './styles/emoji';
 import { expandStyles, expandStylesMixin_fg_platform_editor_nested_dnd_styles_changes, expandStylesMixin_fg_platform_visual_refresh_icons, expandStylesMixin_without_fg_platform_editor_nested_dnd_styles_changes } from './styles/expandStyles';
 import { extensionStyles } from './styles/extensionStyles';
-import { findReplaceStyles } from './styles/findReplaceStyles';
+import { findReplaceStyles, findReplaceStylesNew } from './styles/findReplaceStyles';
 import { firstBlockNodeStyles } from './styles/firstBlockNodeStyles';
 import { firstFloatingToolbarButtonStyles } from './styles/floatingToolbarStyles';
 import { fullPageEditorStyles } from './styles/fullPageEditorStyles';
@@ -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, vanillaMentionsSelectionStyles, vanillaMentionsStyles } from './styles/mentions';
+import { mentionsStyles, mentionsSelectionStyles, mentionNodeStyles } from './styles/mentions';
 import { panelStyles, panelStylesMixin, panelStylesMixin_fg_platform_editor_add_border_for_nested_panel, panelStylesMixin_fg_platform_editor_nested_dnd_styles_changes, panelViewStyles } from './styles/panelStyles';
 import { paragraphStylesOld, paragraphStylesUGCModernized, paragraphStylesUGCRefreshed } from './styles/paragraphStyles';
 import { placeholderOverflowStyles, placeholderStyles, placeholderTextStyles, placeholderTextStylesMixin_fg_platform_editor_system_fake_text_highlight_colour, placeholderWrapStyles } from './styles/placeholderStyles';
@@ -107,7 +107,7 @@ const EditorContentContainer = /*#__PURE__*/React.forwardRef((props, ref) => {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
     cursorStyles,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
-    fg('platform_editor_fix_floating_toolbar_focus') && firstFloatingToolbarButtonStyles,
+    firstFloatingToolbarButtonStyles,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
     placeholderTextStyles, fg('platform_editor_system_fake_text_highlight_colour') &&
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
@@ -183,15 +183,15 @@ const EditorContentContainer = /*#__PURE__*/React.forwardRef((props, ref) => {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
     expandStylesMixin_without_fg_platform_editor_nested_dnd_styles_changes,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
-    fg('platform-visual-refresh-icons') && expandStylesMixin_fg_platform_visual_refresh_icons,
+    fg('platform-visual-refresh-icons') && expandStylesMixin_fg_platform_visual_refresh_icons, expValEqualsNoExposure('platform_editor_find_and_replace_improvements', 'isEnabled', true) ?
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    findReplaceStylesNew :
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
     findReplaceStyles,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
     textHighlightStyle,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
-    decisionStyles, editorExperiment('platform_editor_vanilla_dom', true, {
-      exposure: false
-    }) &&
+    decisionStyles,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
     vanillaTaskItemStyles, editorExperiment('platform_editor_vanilla_dom', true, {
       exposure: false
@@ -313,15 +313,11 @@ const EditorContentContainer = /*#__PURE__*/React.forwardRef((props, ref) => {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
     firstCodeBlockWithNoMarginOld,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
-    firstBlockNodeStyles, editorExperiment('platform_editor_vanilla_dom', true, {
-      exposure: false
-    }) &&
+    firstBlockNodeStyles,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
-    vanillaMentionsStyles, editorExperiment('platform_editor_vanilla_dom', true, {
-      exposure: false
-    }) &&
+    mentionNodeStyles,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
-    vanillaMentionsSelectionStyles, editorExperiment('platform_editor_vanilla_dom', true, {
+    mentionsSelectionStyles, 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

@@ -12,4 +12,113 @@ export const findReplaceStyles = css({
   '.selected-search-match': {
     backgroundColor: "var(--ds-background-accent-teal-subtle, #6CC3E0)"
   }
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
+export const findReplaceStylesNew = css({
+  /** Text match styles */
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.search-match': {
+    borderRadius: '3px',
+    backgroundColor: "var(--ds-background-accent-teal-subtlest, #E7F9FF)",
+    boxShadow: `${"var(--ds-shadow-raised, 0 1px 1px 0 rgba(9, 30, 66, 0.25), 0 0 1px 0 rgba(9, 30, 66, 0.31))"}, inset 0 0 0 1px ${"var(--ds-border-input, #8590A2)"}`
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.search-match-selected': {
+    backgroundColor: "var(--ds-background-accent-teal-subtle, #6CC3E0)"
+  },
+  /** Block match styles */
+
+  /** Light mode */
+
+  /** Without node selection */
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.search-match-block': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '[data-smart-link-container="true"], .loader-wrapper>div::after': {
+      boxShadow: `
+			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
+  '.search-match-selected.search-match-block': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '[data-smart-link-container="true"], .loader-wrapper>div::after': {
+      boxShadow: `
+			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)"}
+			`
+    }
+  },
+  /** With node selection */
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.search-match-block.ak-editor-selected-node': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '.loader-wrapper>div::after': {
+      boxShadow: `
+			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)"},
+			0 0 0 1px ${"var(--ds-border-selected, #0C66E4)"}
+			`
+    }
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.search-match-selected.search-match-block.ak-editor-selected-node': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '[data-smart-link-container="true"], .loader-wrapper>div::after': {
+      boxShadow: `
+			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)"},
+			0 0 0 1px ${"var(--ds-border-selected, #0C66E4)"}
+			`
+    }
+  },
+  /** 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: `
+			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
+  '.search-match-selected.search-match-block.search-match-dark': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '[data-smart-link-container="true"], .loader-wrapper>div::after': {
+      boxShadow: `
+			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)"}
+			`
+    }
+  },
+  /** With node selection */
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.search-match-block.search-match-dark.ak-editor-selected-node': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '.loader-wrapper>div::after': {
+      boxShadow: `
+			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)"},
+			0 0 0 1px ${"var(--ds-border-selected, #0C66E4)"}
+			`
+    }
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.search-match-selected.search-match-block.search-match-dark.ak-editor-selected-node': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '[data-smart-link-container="true"], .loader-wrapper>div::after': {
+      boxShadow: `
+			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)"},
+			0 0 0 1px ${"var(--ds-border-selected, #0C66E4)"}
+			`
+    }
+  }
 });

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

@@ -42,13 +42,17 @@ export const mentionsStyles = css({
 });
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
-export const vanillaMentionsStyles = css({
+export const mentionNodeStyles = css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '.editor-mention-primitive': {
     display: 'inline',
     borderRadius: '20px',
     cursor: 'pointer',
     padding: '0 0.3em 2px 0.23em',
+    // To match `packages/elements/mention/src/components/Mention/PrimitiveMention.tsx` implementation
+    // we match the line height exactly
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+    lineHeight: '1.714',
     fontWeight: "var(--ds-font-weight-regular, 400)",
     wordBreak: 'break-word',
     background: "var(--ds-background-neutral, #091E420F)",
@@ -89,7 +93,7 @@ export const vanillaMentionsStyles = css({
 
 // This is mentions styles for mentions selection styles based on the vanilla node view
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
-export const vanillaMentionsSelectionStyles = css({
+export const mentionsSelectionStyles = css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
   '.danger': {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors

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

@@ -253,7 +253,7 @@ export const vanillaTaskItemStyles = css({
     display: 'none'
   },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
-  '[data-prosemirror-node-view-type="vanilla"][data-prosemirror-node-name="taskItem"]:has([data-empty]):not(:has([data-type-ahead])) [data-component="placeholder"]': {
+  "[data-prosemirror-node-view-type='vanilla'][data-prosemirror-node-name='taskItem']:has([data-empty]):not(:has([data-type-ahead])) [data-component='placeholder']": {
     display: 'block'
   },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors

package/dist/es2019/version-wrapper.js

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