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>(

app/scenes/Document/components/CommentEditor.tsx

@@ -9,6 +9,7 @@ import MentionMenuExtension from "~/editor/extensions/MentionMenu";
 import PasteHandler from "~/editor/extensions/PasteHandler";
 import PreventTab from "~/editor/extensions/PreventTab";
 import SmartText from "~/editor/extensions/SmartText";
+import useCurrentUser from "~/hooks/useCurrentUser";
 
 const extensions = [
   ...withComments(basicExtensions),
@@ -25,6 +26,12 @@ const extensions = [
 const CommentEditor = (
   props: EditorProps,
   ref: React.RefObject<SharedEditor>
-) => <Editor extensions={extensions} {...props} ref={ref} />;
+) => {
+  const user = useCurrentUser({ rejectOnEmpty: false });
+
+  return (
+    <Editor extensions={extensions} userId={user?.id} {...props} ref={ref} />
+  );
+};
 
 export default React.forwardRef(CommentEditor);