@atlaskit/editor-core 207.11.0 → 207.11.2

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

@@ -0,0 +1,207 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.telepointerStyleWithInitialOnly = exports.telepointerStyle = exports.telepointerColorAndCommonStyle = void 0;
+var _react = require("@emotion/react");
+/* eslint-disable @atlaskit/ui-styling-standard/no-nested-selectors */
+/* eslint-disable @atlaskit/ui-styling-standard/no-exported-styles */
+/* eslint-disable @atlaskit/ui-styling-standard/use-compiled */
+
+var pulseIn = (0, _react.keyframes)({
+  '0%, 100%': {
+    transform: 'scaleX(0)',
+    opacity: 0
+  },
+  '13%': {
+    transform: 'scaleX(1.4) scaleY(1.4)',
+    opacity: 1
+  },
+  '20%, 85%': {
+    transform: 'scaleX(1) scaleY(1)',
+    opacity: 1
+  }
+});
+var pulseOut = (0, _react.keyframes)({
+  '0%, 90%, 100%': {
+    transform: 'scaleX(1)',
+    opacity: 1
+  },
+  '10%, 80%': {
+    transform: 'scaleX(0)',
+    opacity: 0
+  }
+});
+var telepointerColorAndCommonStyle = exports.telepointerColorAndCommonStyle = (0, _react.css)({
+  '.ProseMirror .telepointer': {
+    position: 'relative',
+    transition: 'opacity 200ms',
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '&.telepointer-selection:not(.inlineNodeView)': {
+      // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+      lineHeight: 1.2,
+      pointerEvents: 'none',
+      userSelect: 'none'
+    },
+    '&.telepointer-dim': {
+      opacity: 0.2
+    },
+    '&.color-0': {
+      '--telepointer-participant-text-color': "var(--ds-text-inverse, #FFFFFF)",
+      '--telepointer-participant-bg-color': "var(--ds-background-accent-red-bolder, #C9372C)"
+    },
+    '&.color-1': {
+      '--telepointer-participant-text-color': "var(--ds-text-inverse, #FFFFFF)",
+      '--telepointer-participant-bg-color': "var(--ds-background-accent-blue-bolder, #0C66E4)"
+    },
+    '&.color-2': {
+      '--telepointer-participant-text-color': "var(--ds-text-inverse, #FFFFFF)",
+      '--telepointer-participant-bg-color': "var(--ds-background-accent-green-bolder, #1F845A)"
+    },
+    '&.color-3': {
+      '--telepointer-participant-text-color': "var(--ds-text-inverse, #FFFFFF)",
+      '--telepointer-participant-bg-color': "var(--ds-background-accent-yellow-bolder, #946F00)"
+    },
+    '&.color-4': {
+      '--telepointer-participant-text-color': "var(--ds-text-inverse, #FFFFFF)",
+      '--telepointer-participant-bg-color': "var(--ds-background-accent-purple-bolder, #6E5DC6)"
+    },
+    '&.color-5': {
+      '--telepointer-participant-text-color': "var(--ds-text-inverse, #FFFFFF)",
+      '--telepointer-participant-bg-color': "var(--ds-background-accent-magenta-bolder, #AE4787)"
+    },
+    '&.color-6': {
+      '--telepointer-participant-text-color': "var(--ds-text-inverse, #FFFFFF)",
+      '--telepointer-participant-bg-color': "var(--ds-background-accent-teal-bolder, #227D9B)"
+    },
+    '&.color-7': {
+      '--telepointer-participant-text-color': "var(--ds-text-inverse, #FFFFFF)",
+      '--telepointer-participant-bg-color': "var(--ds-background-accent-orange-bolder, #C25100)"
+    },
+    '&.color-8': {
+      '--telepointer-participant-text-color': "var(--ds-text-inverse, #FFFFFF)",
+      '--telepointer-participant-bg-color': "var(--ds-background-accent-lime-bolder, #5B7F24)"
+    },
+    '&.color-9': {
+      '--telepointer-participant-text-color': "var(--ds-text-inverse, #FFFFFF)",
+      '--telepointer-participant-bg-color': "var(--ds-background-accent-gray-bolder, #626F86)"
+    },
+    '&.color-10': {
+      '--telepointer-participant-text-color': "var(--ds-text-accent-gray-bolder, #091E42)",
+      '--telepointer-participant-bg-color': "var(--ds-background-accent-blue-subtle, #579DFF)"
+    },
+    '&.color-11': {
+      '--telepointer-participant-text-color': "var(--ds-text-accent-gray-bolder, #091E42)",
+      '--telepointer-participant-bg-color': "var(--ds-background-accent-red-subtle, #F87168)"
+    },
+    '&.color-12': {
+      '--telepointer-participant-text-color': "var(--ds-text-accent-gray-bolder, #091E42)",
+      '--telepointer-participant-bg-color': "var(--ds-background-accent-orange-subtle, #FEA362)"
+    },
+    '&.color-13': {
+      '--telepointer-participant-text-color': "var(--ds-text-accent-gray-bolder, #091E42)",
+      '--telepointer-participant-bg-color': "var(--ds-background-accent-yellow-subtle, #F5CD47)"
+    },
+    '&.color-14': {
+      '--telepointer-participant-text-color': "var(--ds-text-accent-gray-bolder, #091E42)",
+      '--telepointer-participant-bg-color': "var(--ds-background-accent-green-subtle, #4BCE97)"
+    },
+    '&.color-15': {
+      '--telepointer-participant-text-color': "var(--ds-text-accent-gray-bolder, #091E42)",
+      '--telepointer-participant-bg-color': "var(--ds-background-accent-teal-subtle, #6CC3E0)"
+    },
+    '&.color-16': {
+      '--telepointer-participant-text-color': "var(--ds-text-accent-gray-bolder, #091E42)",
+      '--telepointer-participant-bg-color': "var(--ds-background-accent-purple-subtle, #9F8FEF)"
+    },
+    '&.color-17': {
+      '--telepointer-participant-text-color': "var(--ds-text-accent-gray-bolder, #091E42)",
+      '--telepointer-participant-bg-color': "var(--ds-background-accent-magenta-subtle, #E774BB)"
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
+    'html:not([data-color-mode=dark]) &': {
+      '--telepointer-participant-background-first-stop': '-850000%',
+      '--telepointer-participant-background-second-stop': '150000%'
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
+    'html[data-color-mode=dark] &': {
+      '--telepointer-participant-background-first-stop': '-800000%',
+      '--telepointer-participant-background-second-stop': '200000%'
+    },
+    '&[class*="color-"]': {
+      background: 'linear-gradient(to bottom, var(--telepointer-participant-bg-color) var(--telepointer-participant-background-first-stop), transparent var(--telepointer-participant-background-second-stop))',
+      '&::after': {
+        backgroundColor: 'var(--telepointer-participant-bg-color)',
+        color: 'var(--telepointer-participant-text-color)',
+        borderColor: 'var(--telepointer-participant-bg-color)'
+      }
+    }
+  }
+});
+var telepointerStyle = exports.telepointerStyle = (0, _react.css)({
+  '.ProseMirror .telepointer': {
+    '&.telepointer-selection-badge': {
+      '.telepointer-initial, .telepointer-fullname': {
+        position: 'absolute',
+        display: 'block',
+        userSelect: 'none',
+        whiteSpace: 'pre',
+        top: -14,
+        left: 0,
+        font: "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
+        paddingLeft: "var(--ds-space-050, 4px)",
+        paddingRight: "var(--ds-space-050, 4px)",
+        color: "var(--ds-text-inverse, #FFFFFF)",
+        borderRadius: '0 2px 2px 0'
+      },
+      '.telepointer-initial': {
+        opacity: 1,
+        transition: 'opacity 0.15s ease-out'
+      },
+      '.telepointer-fullname': {
+        opacity: 0,
+        transform: 'scaleX(0)',
+        transformOrigin: 'top left',
+        transition: 'transform 0.15s ease-out, opacity 0.15s ease-out'
+      }
+    },
+    '&.telepointer-pulse-animate': {
+      '.telepointer-initial': {
+        animation: "".concat(pulseOut, " 2s ease-in-out")
+      },
+      '.telepointer-fullname': {
+        animation: "".concat(pulseIn, " 2s ease-in-out")
+      }
+    },
+    '&:hover': {
+      '.telepointer-initial': {
+        opacity: 0,
+        transitionDelay: '150ms'
+      },
+      '.telepointer-fullname': {
+        transform: 'scaleX(1)',
+        opacity: 1,
+        zIndex: 1
+      }
+    }
+  }
+});
+var telepointerStyleWithInitialOnly = exports.telepointerStyleWithInitialOnly = (0, _react.css)({
+  '.ProseMirror .telepointer': {
+    '&.telepointer-selection-badge::after': {
+      content: 'attr(data-initial)',
+      position: 'absolute',
+      display: 'block',
+      top: -14,
+      // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+      fontSize: '0.5625rem',
+      padding: "var(--ds-space-025, 2px)",
+      color: "var(--ds-text-inverse, #FFFFFF)",
+      left: 0,
+      borderRadius: '2px 2px 2px 0',
+      // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+      lineHeight: 'initial'
+    }
+  }
+});

package/dist/cjs/version-wrapper.js

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

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

@@ -10,9 +10,6 @@ import React from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx, useTheme } from '@emotion/react';
 import { browser } from '@atlaskit/editor-common/browser';
-import { telepointerStyle, telepointerStyleWithInitialOnly } from '@atlaskit/editor-common/collab';
-import { EmojiSharedCssClassName, defaultEmojiHeight } from '@atlaskit/editor-common/emoji';
-import { MentionSharedCssClassName } from '@atlaskit/editor-common/mention';
 import { gapCursorStyles } from '@atlaskit/editor-common/selection';
 import { GRID_GUTTER, listsSharedStyles } from '@atlaskit/editor-common/styles';
 import { blocktypeStyles } from '@atlaskit/editor-plugins/block-type/styles';
@@ -20,7 +17,7 @@ import { findReplaceStyles } from '@atlaskit/editor-plugins/find-replace/styles'
 import { textHighlightStyle } from '@atlaskit/editor-plugins/paste-options-toolbar/styles';
 import { placeholderTextStyles } from '@atlaskit/editor-plugins/placeholder-text/styles';
 import { tableCommentEditorStyles } from '@atlaskit/editor-plugins/table/ui/common-styles';
-import { SelectionStyle, akEditorCalculatedWideLayoutWidth, akEditorCalculatedWideLayoutWidthSmallViewport, akEditorDefaultLayoutWidth, akEditorDeleteBackgroundWithOpacity, akEditorDeleteBorder, akEditorFullWidthLayoutWidth, akEditorGutterPadding, akEditorGutterPaddingDynamic, akEditorSelectedBorderSize, akEditorSelectedNodeClassName, editorFontSize, getSelectionStyles } from '@atlaskit/editor-shared-styles';
+import { akEditorCalculatedWideLayoutWidth, akEditorCalculatedWideLayoutWidthSmallViewport, akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorGutterPadding, akEditorGutterPaddingDynamic, editorFontSize } from '@atlaskit/editor-shared-styles';
 import { scrollbarStyles } from '@atlaskit/editor-shared-styles/scrollbar';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
@@ -39,6 +36,7 @@ import { codeBlockStyles, firstCodeBlockWithNoMargin, firstCodeBlockWithNoMargin
 import { codeMarkStyles } from './styles/codeMarkStyles';
 import { dateStyles, dateVanillaStyles } from './styles/dateStyles';
 import { embedCardStyles } from './styles/embedCardStyles';
+import { reactEmojiStyles, vanillaEmojiStyles } from './styles/emoji';
 import { firstBlockNodeStyles, firstBlockNodeStylesOld } from './styles/firstBlockNodeStyles';
 import { gridStyles } from './styles/gridStyles';
 import { indentationStyles } from './styles/indentationStyles';
@@ -46,147 +44,18 @@ import { layoutBaseStyles, layoutViewStyles } from './styles/layout';
 import { linkStyles, linkStylesOld } from './styles/link';
 import { listsStyles, listsStylesSafariFix } from './styles/list';
 import { mediaStyles } from './styles/mediaStyles';
+import { mentionsStyles, vanillaMentionsStyles, vanillaMentionsSelectionStyles } from './styles/mentions';
 import { paragraphStylesOld, paragraphStylesUGCModernized, paragraphStylesUGCRefreshed } from './styles/paragraphStyles';
 import { resizerStyles, pragmaticResizerStyles } from './styles/resizerStyles';
 import { ruleStyles } from './styles/rule';
 import { shadowStyles } from './styles/shadowStyles';
 import { linkingVisualRefreshV1Styles, smartCardStyles, smartLinksInLivePagesStyles, smartLinksInLivePagesStylesOld } from './styles/smartCardStyles';
 import { tasksAndDecisionsStyles } from './styles/tasksAndDecisionsStyles';
+import { telepointerColorAndCommonStyle, telepointerStyle, telepointerStyleWithInitialOnly } from './styles/telepointerStyles';
 import { textColorStyles } from './styles/textColorStyles';
 import { unsupportedStyles } from './styles/unsupportedStyles';
 import { whitespaceStyles } from './styles/whitespaceStyles';
-export const isFirefox = typeof navigator !== 'undefined' && navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
-const vanillaMentionsStyles = 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',
-    fontWeight: "var(--ds-font-weight-regular, 400)",
-    wordBreak: 'break-word',
-    background: "var(--ds-background-neutral, #091E420F)",
-    border: '1px solid transparent',
-    color: "var(--ds-text-subtle, #44546F)",
-    '&:hover': {
-      background: "var(--ds-background-neutral-hovered, #091E4224)"
-    },
-    '&:active': {
-      background: "var(--ds-background-neutral-pressed, #091E424F)"
-    }
-  },
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-  '.editor-mention-primitive.mention-restricted': {
-    background: 'transparent',
-    border: `1px solid ${"var(--ds-border-bold, #758195)"}`,
-    color: "var(--ds-text, #172B4D)",
-    '&:hover': {
-      background: 'transparent'
-    },
-    '&:active': {
-      background: 'transparent'
-    }
-  },
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-  '.editor-mention-primitive.mention-self': {
-    background: "var(--ds-background-brand-bold, #0C66E4)",
-    border: '1px solid transparent',
-    color: "var(--ds-text-inverse, #FFFFFF)",
-    '&:hover': {
-      background: "var(--ds-background-brand-bold-hovered, #0055CC)"
-    },
-    '&:active': {
-      background: "var(--ds-background-brand-bold-pressed, #09326C)"
-    }
-  }
-});
-const vanillaSelectionStyles = css`
-	.danger {
-		.editor-mention-primitive {
-			box-shadow: 0 0 0 ${akEditorSelectedBorderSize}px ${akEditorDeleteBorder};
-			background-color: ${`var(--ds-background-danger, ${akEditorDeleteBackgroundWithOpacity})`};
-		}
-	}
-
-	.${akEditorSelectedNodeClassName} > .editor-mention-primitive,
-	.${akEditorSelectedNodeClassName} > .editor-mention-primitive.mention-self,
-	.${akEditorSelectedNodeClassName} > .editor-mention-primitive.mention-restricted {
-		${getSelectionStyles([SelectionStyle.BoxShadow, SelectionStyle.Background])}
-		/* need to specify dark text colour because personal mentions
-		   (in dark blue) have white text by default */
-		color: ${"var(--ds-text-subtle, #44546F)"}
-	}
-`;
-const mentionsStyles = css`
-	.${MentionSharedCssClassName.MENTION_CONTAINER} {
-		&.${akEditorSelectedNodeClassName} [data-mention-id] > span {
-			${getSelectionStyles([SelectionStyle.BoxShadow, SelectionStyle.Background])}
-
-			/* need to specify dark text colour because personal mentions
-		 (in dark blue) have white text by default */
-	  color: ${"var(--ds-text-subtle, #44546F)"};
-		}
-	}
-
-	.danger {
-		.${MentionSharedCssClassName.MENTION_CONTAINER}.${akEditorSelectedNodeClassName}
-			> span
-			> span
-			> span {
-			box-shadow: 0 0 0 ${akEditorSelectedBorderSize}px ${akEditorDeleteBorder};
-			background-color: ${`var(--ds-background-danger, ${akEditorDeleteBackgroundWithOpacity})`};
-		}
-		.${MentionSharedCssClassName.MENTION_CONTAINER} > span > span > span {
-			background-color: ${"var(--ds-background-neutral, #091E420F)"};
-			color: ${"var(--ds-text-subtle, #44546F)"};
-		}
-	}
-`;
-const reactEmojiStyles = css`
-	.${EmojiSharedCssClassName.EMOJI_CONTAINER} {
-		display: inline-block;
-
-		.${EmojiSharedCssClassName.EMOJI_NODE} {
-			cursor: pointer;
-
-			&.${EmojiSharedCssClassName.EMOJI_IMAGE} > span {
-				/** needed for selection style to cover custom emoji image properly */
-				display: flex;
-			}
-		}
-
-		&.${akEditorSelectedNodeClassName} {
-			.${EmojiSharedCssClassName.EMOJI_SPRITE}, .${EmojiSharedCssClassName.EMOJI_IMAGE} {
-				border-radius: 2px;
-				${getSelectionStyles([SelectionStyle.Blanket, SelectionStyle.BoxShadow])}
-			}
-		}
-	}
-`;
-const emojiStyles = css`
-	[data-prosemirror-node-view-type='vanilla'] {
-		.${EmojiSharedCssClassName.EMOJI_CONTAINER} {
-			display: inline-block;
-		}
-
-		.${EmojiSharedCssClassName.EMOJI_SPRITE}, .${EmojiSharedCssClassName.EMOJI_IMAGE} {
-			background: no-repeat transparent;
-			display: inline-block;
-			height: ${defaultEmojiHeight}px;
-			max-height: ${defaultEmojiHeight}px;
-			cursor: pointer;
-			vertical-align: middle;
-			user-select: all;
-		}
-
-		&.${akEditorSelectedNodeClassName} {
-			.${EmojiSharedCssClassName.EMOJI_SPRITE}, .${EmojiSharedCssClassName.EMOJI_IMAGE} {
-				border-radius: 2px;
-				${getSelectionStyles([SelectionStyle.Blanket, SelectionStyle.BoxShadow])}
-			}
-		}
-	}
-`;
+const isFirefox = typeof navigator !== 'undefined' && navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export const placeholderStyles = css({
@@ -355,26 +224,16 @@ const contentStyles = () => css`
   ${mediaStyles}
 
   ${fg('confluence_team_presence_scroll_to_pointer') ? telepointerStyle : telepointerStyleWithInitialOnly}
+
+  /* This needs to be after telepointer styles as some overlapping rules have equal specificity, and so the order is significant */
+  ${telepointerColorAndCommonStyle}
+
   ${gapCursorStyles};
 
 	${panelStyles()}
 
 	${mentionsStyles}
 
-  ${editorExperiment('platform_editor_vanilla_dom', true, {
-  exposure: false
-}) && vanillaMentionsStyles}
-
-  ${editorExperiment('platform_editor_vanilla_dom', true, {
-  exposure: false
-}) && vanillaSelectionStyles}
-
-  ${editorExperiment('platform_editor_vanilla_dom', true, {
-  exposure: false
-}) ? emojiStyles : reactEmojiStyles}
-
-  ${emojiStyles}
-
   ${tasksAndDecisionsStyles}
 
   ${gridStyles}
@@ -599,7 +458,21 @@ const EditorContentContainer = /*#__PURE__*/React.forwardRef((props, ref) => {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
     firstBlockNodeStyles :
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
-    firstBlockNodeStylesOld],
+    firstBlockNodeStylesOld, editorExperiment('platform_editor_vanilla_dom', true, {
+      exposure: false
+    }) &&
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    vanillaMentionsStyles, editorExperiment('platform_editor_vanilla_dom', true, {
+      exposure: false
+    }) &&
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    vanillaMentionsSelectionStyles, editorExperiment('platform_editor_vanilla_dom', true, {
+      exposure: false
+    }) ?
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    vanillaEmojiStyles :
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    reactEmojiStyles],
     "data-editor-scroll-container": isScrollable ? 'true' : undefined,
     "data-testid": "editor-content-container",
     style: {

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

@@ -0,0 +1,74 @@
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
+import { css } from '@emotion/react';
+import { defaultEmojiHeight, EmojiSharedCssClassName } from '@atlaskit/editor-common/emoji';
+import { akEditorSelectedNodeClassName } from '@atlaskit/editor-shared-styles';
+import { blanketSelectionStyles, boxShadowSelectionStyles, hideNativeBrowserTextSelectionStyles } from './selectionStyles';
+const reactEmojiSelectionStyles = css({
+  borderRadius: '2px'
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
+export const reactEmojiStyles = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
+  [`.${EmojiSharedCssClassName.EMOJI_CONTAINER}`]: {
+    display: 'inline-block',
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
+    [`.${EmojiSharedCssClassName.EMOJI_NODE}`]: {
+      cursor: 'pointer',
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
+      [`&.${EmojiSharedCssClassName.EMOJI_IMAGE} > span`]: {
+        /** needed for selection style to cover custom emoji image properly */
+        display: 'flex'
+      }
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
+    [`&.${akEditorSelectedNodeClassName}`]: {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
+      [`.${EmojiSharedCssClassName.EMOJI_SPRITE}, .${EmojiSharedCssClassName.EMOJI_IMAGE}`]: [
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+      blanketSelectionStyles,
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+      boxShadowSelectionStyles,
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+      hideNativeBrowserTextSelectionStyles, reactEmojiSelectionStyles]
+    }
+  }
+});
+const vanillaEmojiSelectionStyles = css({
+  borderRadius: '2px'
+});
+
+// Emoji styles from Emoji vanilla node view
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
+export const vanillaEmojiStyles = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '[data-prosemirror-node-view-type="vanilla"]': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
+    [`.${EmojiSharedCssClassName.EMOJI_CONTAINER}`]: {
+      display: 'inline-block'
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
+    [`.${EmojiSharedCssClassName.EMOJI_SPRITE}, .${EmojiSharedCssClassName.EMOJI_IMAGE}`]: {
+      background: 'no-repeat transparent',
+      display: 'inline-block',
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
+      height: `${defaultEmojiHeight}px`,
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
+      maxHeight: `${defaultEmojiHeight}px`,
+      cursor: 'pointer',
+      verticalAlign: 'middle',
+      userSelect: 'all'
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
+    [`&.${akEditorSelectedNodeClassName}`]: {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
+      [`.${EmojiSharedCssClassName.EMOJI_SPRITE}, .${EmojiSharedCssClassName.EMOJI_IMAGE}`]: [vanillaEmojiSelectionStyles,
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+      blanketSelectionStyles,
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+      boxShadowSelectionStyles,
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+      hideNativeBrowserTextSelectionStyles]
+    }
+  }
+});

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

@@ -0,0 +1,115 @@
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
+import { css } from '@emotion/react';
+import { MentionSharedCssClassName } from '@atlaskit/editor-common/mention';
+import { akEditorDeleteBorder, akEditorSelectedBorderSize, akEditorSelectedNodeClassName } from '@atlaskit/editor-shared-styles';
+import { backgroundSelectionStyles, boxShadowSelectionStyles, hideNativeBrowserTextSelectionStyles } from './selectionStyles';
+
+/* need to specify dark text colour because personal mentions
+(in dark blue) have white text by default */
+const mentionsSelectedColor = css({
+  color: "var(--ds-text-subtle, #44546F)"
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
+export const mentionsStyles = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
+  [`.${MentionSharedCssClassName.MENTION_CONTAINER}`]: {
+    // TODO: ED-28075 - refactor selection styles to unblock Compiled CSS migration
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
+    [`&.${akEditorSelectedNodeClassName} [data-mention-id] > span`]: [
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    boxShadowSelectionStyles,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    backgroundSelectionStyles, mentionsSelectedColor]
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.danger': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
+    [`.${MentionSharedCssClassName.MENTION_CONTAINER}.${akEditorSelectedNodeClassName}`]: {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+      '> span > span > span': {
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
+        boxShadow: `0 0 0 ${akEditorSelectedBorderSize}px ${akEditorDeleteBorder}`,
+        backgroundColor: "var(--ds-background-danger, #FFECEB)"
+      }
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
+    [`.${MentionSharedCssClassName.MENTION_CONTAINER} > span > span > span`]: {
+      backgroundColor: "var(--ds-background-neutral, #091E420F)",
+      color: "var(--ds-text-subtle, #44546F)"
+    }
+  }
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
+export const vanillaMentionsStyles = 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',
+    fontWeight: "var(--ds-font-weight-regular, 400)",
+    wordBreak: 'break-word',
+    background: "var(--ds-background-neutral, #091E420F)",
+    border: '1px solid transparent',
+    color: "var(--ds-text-subtle, #44546F)",
+    '&:hover': {
+      background: "var(--ds-background-neutral-hovered, #091E4224)"
+    },
+    '&:active': {
+      background: "var(--ds-background-neutral-pressed, #091E424F)"
+    }
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '.editor-mention-primitive.mention-restricted': {
+    background: 'transparent',
+    border: `1px solid ${"var(--ds-border-bold, #758195)"}`,
+    color: "var(--ds-text, #172B4D)",
+    '&:hover': {
+      background: 'transparent'
+    },
+    '&:active': {
+      background: 'transparent'
+    }
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '.editor-mention-primitive.mention-self': {
+    background: "var(--ds-background-brand-bold, #0C66E4)",
+    border: '1px solid transparent',
+    color: "var(--ds-text-inverse, #FFFFFF)",
+    '&:hover': {
+      background: "var(--ds-background-brand-bold-hovered, #0055CC)"
+    },
+    '&:active': {
+      background: "var(--ds-background-brand-bold-pressed, #09326C)"
+    }
+  }
+});
+
+// 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({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.danger': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '.editor-mention-primitive': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
+      boxShadow: `0 0 0 ${akEditorSelectedBorderSize}px ${akEditorDeleteBorder}`,
+      backgroundColor: "var(--ds-background-danger, #FFECEB)"
+    }
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
+  [`.${akEditorSelectedNodeClassName}`]: {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '> .editor-mention-primitive, > .editor-mention-primitive.mention-self, > .editor-mention-primitive.mention-restricted':
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values,
+    [
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    boxShadowSelectionStyles,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    backgroundSelectionStyles,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    hideNativeBrowserTextSelectionStyles, mentionsSelectedColor]
+  }
+});