@atlaskit/editor-core 208.7.0 → 208.7.2

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

@@ -1,40 +1,32 @@
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css } from '@emotion/react';
 import { TaskDecisionSharedCssClassName } from '@atlaskit/editor-common/styles';
-import { akEditorDeleteBackgroundWithOpacity, akEditorDeleteBorder, akEditorSelectedBorderSize, akEditorSelectedNodeClassName, getSelectionStyles, SelectionStyle } from '@atlaskit/editor-shared-styles';
-// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export const taskDecisionStyles = css`
-	[data-decision-wrapper] {
-		cursor: pointer;
-	}
-
-	.${akEditorSelectedNodeClassName} > [data-decision-wrapper],
-	ol[data-node-type='decisionList'].${akEditorSelectedNodeClassName} {
-		border-radius: 4px;
-		${getSelectionStyles([SelectionStyle.BoxShadow, SelectionStyle.Blanket])}
-	}
-
-	.danger {
-		.${TaskDecisionSharedCssClassName.DECISION_CONTAINER}.${akEditorSelectedNodeClassName} > div {
-			box-shadow: 0 0 0 ${akEditorSelectedBorderSize}px
-				${`var(--ds-border-danger, ${akEditorDeleteBorder})`};
-			background-color: ${`var(--ds-blanket-danger, ${akEditorDeleteBackgroundWithOpacity})`};
-			&::after {
-				content: none; /* reset the Blanket selection style */
-			}
-		}
-	}
-`;
-
-// Combine this with taskDecisionStyles (above) when cleaning up the platform_editor_vanilla_dom experiment.
+import { getSelectionStyles, SelectionStyle } from '@atlaskit/editor-shared-styles';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export const vanillaTaskDecisionStyles = css({
+export const taskDecisionStyles = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.ak-editor-selected-node > [data-decision-wrapper], ol[data-node-type="decisionList"].ak-editor-selected-node':
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
+  [{
+    borderRadius: '4px'
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+  getSelectionStyles([SelectionStyle.BoxShadow, SelectionStyle.Blanket])],
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.danger decisionItemView-content-wrap.ak-editor-selected-node > div': {
+    boxShadow: `0 0 0 1px ${"var(--ds-border-danger, #E2483D)"}`,
+    backgroundColor: "var(--ds-blanket-danger, #EF5C4814)",
+    '&::after': {
+      content: 'none' // reset the Blanket selection style
+    }
+  },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  '[data-prosemirror-node-view-type="vanilla"][data-prosemirror-node-name="decisionItem"]': {
+  '[data-prosemirror-node-name="decisionItem"]': {
     listStyleType: 'none'
   },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  '[data-prosemirror-node-view-type="vanilla"][data-prosemirror-node-name="decisionItem"] > [data-decision-wrapper]': {
+  '[data-prosemirror-node-name="decisionItem"] > [data-decision-wrapper]': {
+    cursor: 'pointer',
     display: 'flex',
     flexDirection: 'row',
     margin: `${"var(--ds-space-100, 8px)"} 0 0 0`,
@@ -45,7 +37,7 @@ export const vanillaTaskDecisionStyles = css({
     position: 'relative'
   },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  '[data-prosemirror-node-view-type="vanilla"][data-prosemirror-node-name="decisionItem"] > [data-decision-wrapper] > [data-component="icon"]': {
+  '[data-prosemirror-node-name="decisionItem"] > [data-decision-wrapper] > [data-component="icon"]': {
     flex: '0 0 16px',
     height: '16px',
     width: '16px',
@@ -56,25 +48,25 @@ export const vanillaTaskDecisionStyles = css({
     justifyContent: 'center'
   },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors, @atlaskit/ui-styling-standard/no-nested-selectors
-  '[data-prosemirror-node-view-type="vanilla"][data-prosemirror-node-name="decisionItem"]:not(:has([data-empty]):not(:has([data-type-ahead]))) > [data-decision-wrapper] > [data-component="icon"]': {
+  '[data-prosemirror-node-name="decisionItem"]:not(:has([data-empty]):not(:has([data-type-ahead]))) > [data-decision-wrapper] > [data-component="icon"]': {
     color: "var(--ds-icon-success, #22A06B)"
   },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  '[data-prosemirror-node-view-type="vanilla"][data-prosemirror-node-name="decisionItem"] > [data-decision-wrapper] > [data-component="icon"] > span': {
+  '[data-prosemirror-node-name="decisionItem"] > [data-decision-wrapper] > [data-component="icon"] > span': {
     display: 'inline-block',
     flexShrink: 0,
     // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography -- Mirroring icon styles
     lineHeight: 1
   },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  '[data-prosemirror-node-view-type="vanilla"][data-prosemirror-node-name="decisionItem"] > [data-decision-wrapper] > [data-component="icon"] > span > svg': {
+  '[data-prosemirror-node-name="decisionItem"] > [data-decision-wrapper] > [data-component="icon"] > span > svg': {
     overflow: 'hidden',
     pointerEvents: 'none',
     color: 'currentColor',
     verticalAlign: 'bottom'
   },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  '[data-prosemirror-node-view-type="vanilla"][data-prosemirror-node-name="decisionItem"] > [data-decision-wrapper] > [data-component="placeholder"]': {
+  '[data-prosemirror-node-name="decisionItem"] > [data-decision-wrapper] > [data-component="placeholder"]': {
     margin: `0 0 0 calc(${"var(--ds-space-100, 8px)"} * 3.5)`,
     position: 'absolute',
     color: "var(--ds-text-subtlest, #626F86)",
@@ -85,11 +77,11 @@ export const vanillaTaskDecisionStyles = css({
     maxWidth: 'calc(100% - 50px)'
   },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors, @atlaskit/ui-styling-standard/no-nested-selectors
-  '[data-prosemirror-node-view-type="vanilla"][data-prosemirror-node-name="decisionItem"]:not(:has([data-empty]):not(:has([data-type-ahead]))) > [data-decision-wrapper] > [data-component="placeholder"]': {
+  '[data-prosemirror-node-name="decisionItem"]:not(:has([data-empty]):not(:has([data-type-ahead]))) > [data-decision-wrapper] > [data-component="placeholder"]': {
     display: 'none'
   },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  '[data-prosemirror-node-view-type="vanilla"][data-prosemirror-node-name="decisionItem"] > [data-decision-wrapper] > [data-component="content"]': {
+  '[data-prosemirror-node-name="decisionItem"] > [data-decision-wrapper] > [data-component="content"]': {
     margin: 0,
     wordWrap: 'break-word',
     minWidth: 0,
@@ -98,13 +90,13 @@ export const vanillaTaskDecisionStyles = css({
 });
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
-export const vanillaTaskDecisionIconWithVisualRefresh = css({
+export const taskDecisionIconWithVisualRefresh = css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  '[data-prosemirror-node-view-type="vanilla"][data-prosemirror-node-name="decisionItem"] > [data-decision-wrapper] > [data-component="icon"] > span >  svg[data-icon-source="legacy"]': {
+  '[data-prosemirror-node-name="decisionItem"] > [data-decision-wrapper] > [data-component="icon"] > span >  svg[data-icon-source="legacy"]': {
     display: 'none'
   },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  '[data-prosemirror-node-view-type="vanilla"][data-prosemirror-node-name="decisionItem"] > [data-decision-wrapper] > [data-component="icon"] > span': {
+  '[data-prosemirror-node-name="decisionItem"] > [data-decision-wrapper] > [data-component="icon"] > span': {
     boxSizing: 'border-box',
     paddingInlineEnd: 'var(--ds--button--new-icon-padding-end, 0)',
     paddingInlineStart: 'var(--ds--button--new-icon-padding-start, 0)',
@@ -114,20 +106,20 @@ export const vanillaTaskDecisionIconWithVisualRefresh = css({
     }
   },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  '[data-prosemirror-node-view-type="vanilla"][data-prosemirror-node-name="decisionItem"] > [data-decision-wrapper] > [data-component="icon"] > span > svg': {
+  '[data-prosemirror-node-name="decisionItem"] > [data-decision-wrapper] > [data-component="icon"] > span > svg': {
     width: "var(--ds-space-300, 24px)",
     height: "var(--ds-space-300, 24px)"
   }
 });
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
-export const vanillaTaskDecisionIconWithoutVisualRefresh = css({
+export const taskDecisionIconWithoutVisualRefresh = css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  '[data-prosemirror-node-view-type="vanilla"][data-prosemirror-node-name="decisionItem"] > [data-decision-wrapper] > [data-component="icon"] > span >  svg[data-icon-source="refreshed"]': {
+  '[data-prosemirror-node-name="decisionItem"] > [data-decision-wrapper] > [data-component="icon"] > span >  svg[data-icon-source="refreshed"]': {
     display: 'none'
   },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  '[data-prosemirror-node-view-type="vanilla"][data-prosemirror-node-name="decisionItem"] > [data-decision-wrapper] > [data-component="icon"] > span': {
+  '[data-prosemirror-node-name="decisionItem"] > [data-decision-wrapper] > [data-component="icon"] > span': {
     width: '32px',
     height: '32px',
     '@media screen and (forced-colors: active)': {
@@ -137,7 +129,7 @@ export const vanillaTaskDecisionIconWithoutVisualRefresh = css({
     }
   },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  '[data-prosemirror-node-view-type="vanilla"][data-prosemirror-node-name="decisionItem"] > [data-decision-wrapper] > [data-component="icon"] > span > svg': {
+  '[data-prosemirror-node-name="decisionItem"] > [data-decision-wrapper] > [data-component="icon"] > span > svg': {
     maxWidth: '100%',
     maxHeight: '100%',
     fill: "var(--ds-surface, #FFFFFF)",
@@ -147,19 +139,19 @@ export const vanillaTaskDecisionIconWithoutVisualRefresh = css({
 });
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
-export const vanillaTaskItemStyles = css({
+export const taskItemStyles = css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  '[data-prosemirror-node-view-type="vanilla"][data-prosemirror-node-name="taskItem"]': {
+  '[data-prosemirror-node-name="taskItem"]': {
     listStyle: 'none'
   },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  '[data-prosemirror-node-view-type="vanilla"][data-prosemirror-node-name="taskItem"] [data-component="task-item-main"]': {
+  '[data-prosemirror-node-name="taskItem"] [data-component="task-item-main"]': {
     display: 'flex',
     flexDirection: 'row',
     position: 'relative'
   },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  '[data-prosemirror-node-view-type="vanilla"][data-prosemirror-node-name="taskItem"] [data-component="placeholder"]': {
+  '[data-prosemirror-node-name="taskItem"] [data-component="placeholder"]': {
     position: 'absolute',
     color: "var(--ds-text-subtlest, #626F86)",
     margin: `0 0 0 calc(${"var(--ds-space-100, 8px)"} * 3)`,
@@ -171,11 +163,11 @@ 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-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
-  '[data-prosemirror-node-view-type="vanilla"][data-prosemirror-node-name="taskItem"] [data-component="content"]': {
+  '[data-prosemirror-node-name="taskItem"] [data-component="content"]': {
     margin: 0,
     wordWrap: 'break-word',
     minWidth: 0,
@@ -183,7 +175,7 @@ export const vanillaTaskItemStyles = css({
   },
   // copied styles from packages/design-system/icon/src/components/icon-new.tsx
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  '[data-prosemirror-node-view-type="vanilla"][data-prosemirror-node-name="taskItem"] [data-component="checkbox-icon-wrap"]': {
+  '[data-prosemirror-node-name="taskItem"] [data-component="checkbox-icon-wrap"]': {
     display: 'inline-block',
     boxSizing: 'border-box',
     flexShrink: 0,
@@ -193,7 +185,7 @@ export const vanillaTaskItemStyles = css({
     paddingInlineStart: 'var(--ds--button--new-icon-padding-start, 0)'
   },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  '[data-prosemirror-node-view-type="vanilla"][data-prosemirror-node-name="taskItem"] [data-component="checkbox-icon-wrap"] svg': {
+  '[data-prosemirror-node-name="taskItem"] [data-component="checkbox-icon-wrap"] svg': {
     overflow: 'hidden',
     pointerEvents: 'none',
     color: 'currentColor',
@@ -202,23 +194,23 @@ export const vanillaTaskItemStyles = css({
     height: "var(--ds-space-200, 16px)"
   },
   // 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"] input[type=checkbox]:not(:checked) + span [data-component=checkbox-checked-icon]': {
+  '[data-prosemirror-node-name="taskItem"] input[type=checkbox]:not(:checked) + span [data-component=checkbox-checked-icon]': {
     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"] input[type=checkbox]:not(:checked) + span [data-component=checkbox-unchecked-icon]': {
+  '[data-prosemirror-node-name="taskItem"] input[type=checkbox]:not(:checked) + span [data-component=checkbox-unchecked-icon]': {
     display: 'inline'
   },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  '[data-prosemirror-node-view-type="vanilla"][data-prosemirror-node-name="taskItem"] input[type=checkbox]:checked + span [data-component=checkbox-checked-icon]': {
+  '[data-prosemirror-node-name="taskItem"] input[type=checkbox]:checked + span [data-component=checkbox-checked-icon]': {
     display: 'inline'
   },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  '[data-prosemirror-node-view-type="vanilla"][data-prosemirror-node-name="taskItem"] input[type=checkbox]:checked + span [data-component=checkbox-unchecked-icon]': {
+  '[data-prosemirror-node-name="taskItem"] input[type=checkbox]:checked + span [data-component=checkbox-unchecked-icon]': {
     display: 'none'
   },
   // 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
-  [`[data-prosemirror-node-view-type="vanilla"][data-prosemirror-node-name="taskItem"] .${TaskDecisionSharedCssClassName.TASK_CHECKBOX_CONTAINER}`]: {
+  [`[data-prosemirror-node-name="taskItem"] .${TaskDecisionSharedCssClassName.TASK_CHECKBOX_CONTAINER}`]: {
     flex: '0 0 24px',
     width: '24px',
     height: '24px',

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

@@ -28,7 +28,7 @@ import { cursorStyles } from './styles/cursorStyles';
 import { dateStyles, dateVanillaStyles } from './styles/dateStyles';
 import { editorUGCTokensDefault, editorUGCTokensRefreshed } from './styles/editorUGCTokenStyles';
 import { embedCardStyles } from './styles/embedCardStyles';
-import { reactEmojiStyles, vanillaEmojiStyles } from './styles/emoji';
+import { emojiStyles } 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, findReplaceStylesNewMagenta, findReplaceStylesNewYellow } from './styles/findReplaceStyles';
@@ -56,7 +56,7 @@ import { shadowStyles } from './styles/shadowStyles';
 import { linkingVisualRefreshV1Styles, smartCardStyles, smartLinksInLivePagesStyles, smartLinksInLivePagesStylesOld } from './styles/smartCardStyles';
 import { statusStyles, statusStylesMixin_fg_platform_component_visual_refresh, statusStylesMixin_without_fg_platform_component_visual_refresh } from './styles/statusStyles';
 import { tableCommentEditorStyles, tableLayoutFixes } from './styles/tableStyles';
-import { decisionStyles, tasksAndDecisionsStyles, vanillaDecisionIconWithVisualRefresh, vanillaDecisionIconWithoutVisualRefresh, vanillaDecisionStyles, vanillaTaskItemStyles } from './styles/tasksAndDecisionsStyles';
+import { decisionStyles, tasksAndDecisionsStyles, decisionIconWithVisualRefresh, decisionIconWithoutVisualRefresh, taskItemStyles } from './styles/tasksAndDecisionsStyles';
 import { telepointerColorAndCommonStyle, telepointerStyle, telepointerStyleWithInitialOnly } from './styles/telepointerStyles';
 import { textColorStyles } from './styles/textColorStyles';
 import { textHighlightStyle } from './styles/textHighlightStyles';
@@ -196,19 +196,11 @@ const EditorContentContainer = /*#__PURE__*/React.forwardRef((props, ref) => {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
     decisionStyles,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
-    vanillaTaskItemStyles, editorExperiment('platform_editor_vanilla_dom', true, {
-      exposure: false
-    }) &&
+    taskItemStyles, fg('platform-visual-refresh-icons') &&
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
-    vanillaDecisionStyles, editorExperiment('platform_editor_vanilla_dom', true, {
-      exposure: false
-    }) && fg('platform-visual-refresh-icons') &&
+    decisionIconWithVisualRefresh, !fg('platform-visual-refresh-icons') &&
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
-    vanillaDecisionIconWithVisualRefresh, editorExperiment('platform_editor_vanilla_dom', true, {
-      exposure: false
-    }) && !fg('platform-visual-refresh-icons') &&
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
-    vanillaDecisionIconWithoutVisualRefresh,
+    decisionIconWithoutVisualRefresh,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
     statusStyles, fg('platform-component-visual-refresh') ?
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
@@ -314,13 +306,9 @@ const EditorContentContainer = /*#__PURE__*/React.forwardRef((props, ref) => {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
     mentionsSelectionStyles, fg('platform_editor_centre_mention_padding') &&
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
-    mentionsStylesMixin_platform_editor_centre_mention_padding, editorExperiment('platform_editor_vanilla_dom', true, {
-      exposure: false
-    }) ?
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
-    vanillaEmojiStyles :
+    mentionsStylesMixin_platform_editor_centre_mention_padding,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
-    reactEmojiStyles,
+    emojiStyles,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
     panelViewStyles,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values

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

@@ -3,72 +3,38 @@ 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({
+const emojiSelectionStyles = css({
   borderRadius: '2px'
 });
 
+// Emoji styles from Emoji vanilla node view
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
-export const reactEmojiStyles = css({
+export const emojiStyles = 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_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_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]
-    }
+    [`.${EmojiSharedCssClassName.EMOJI_SPRITE}, .${EmojiSharedCssClassName.EMOJI_IMAGE}`]: [emojiSelectionStyles,
+    // 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]
   }
 });