Highlight mentions of self in documents and comments

app/editor/index.tsx

@@ -1,6 +1,6 @@
 /* global File Promise */
 import { PluginSimple } from "markdown-it";
-import { transparentize } from "polished";
+import { darken, transparentize } from "polished";
 import { baseKeymap } from "prosemirror-commands";
 import { dropCursor } from "prosemirror-dropcursor";
 import { gapCursor } from "prosemirror-gapcursor";
@@ -56,7 +56,7 @@ import WithTheme from "./components/WithTheme";
 export type Props = {
   /** An optional identifier for the editor context. It is used to persist local settings */
   id?: string;
-  /** The current userId, if any */
+  /** The user id of the current user */
   userId?: string;
   /** The editor content, should only be changed if you wish to reset the content */
   value?: string;
@@ -753,6 +753,7 @@ export class Editor extends React.PureComponent<
               readOnly={readOnly}
               readOnlyWriteCheckboxes={canUpdate}
               focusedCommentId={this.props.focusedCommentId}
+              userId={this.props.userId}
               editorStyle={this.props.editorStyle}
               ref={this.elementRef}
               lang=""
@@ -791,7 +792,10 @@ export class Editor extends React.PureComponent<
   }
 }
 
-const EditorContainer = styled(Styles)<{ focusedCommentId?: string }>`
+const EditorContainer = styled(Styles)<{
+  userId?: string;
+  focusedCommentId?: string;
+}>`
   ${(props) =>
     props.focusedCommentId &&
     css`
@@ -799,6 +803,21 @@ const EditorContainer = styled(Styles)<{ focusedCommentId?: string }>`
         background: ${transparentize(0.5, props.theme.brand.marine)};
       }
     `}
+
+  ${(props) =>
+    props.userId &&
+    css`
+      .mention[data-id=${props.userId}] {
+        color: ${props.theme.textHighlightForeground};
+        background: ${props.theme.textHighlight};
+
+        &.ProseMirror-selectednode {
+          outline-color: ${props.readOnly
+            ? "transparent"
+            : darken(0.2, props.theme.textHighlight)};
+        }
+      }
+    `}
 `;
 
 const LazyLoadedEditor = React.forwardRef<Editor, Props>(