Populate list of suggestions matching @mentions

src/sidebar/components/Annotation/AnnotationEditor.tsx

@@ -167,6 +167,9 @@ function AnnotationEditor({
 
   const textStyle = applyTheme(['annotationFontFamily'], settings);
 
+  const atMentionsEnabled = store.isFeatureEnabled('at_mentions');
+  const usersWhoAnnotated = store.usersWhoAnnotated();
+
   return (
     /* eslint-disable-next-line jsx-a11y/no-static-element-interactions */
     <div
@@ -179,7 +182,8 @@ function AnnotationEditor({
         label={isReplyAnno ? 'Enter reply' : 'Enter comment'}
         text={text}
         onEditText={onEditText}
-        atMentionsEnabled={store.isFeatureEnabled('at_mentions')}
+        atMentionsEnabled={atMentionsEnabled}
+        usersWhoAnnotated={usersWhoAnnotated}
       />
       <TagEditor
         onAddTag={onAddTag}

src/sidebar/components/Annotation/test/AnnotationEditor-test.js

@@ -62,6 +62,7 @@ describe('AnnotationEditor', () => {
       removeDraft: sinon.stub(),
       removeAnnotations: sinon.stub(),
       isFeatureEnabled: sinon.stub().returns(false),
+      usersWhoAnnotated: sinon.stub().returns([]),
     };
 
     $imports.$mock(mockImportedComponents());

src/sidebar/components/MarkdownEditor.tsx

@@ -20,9 +20,14 @@ import {
 import type { IconComponent } from '@hypothesis/frontend-shared/lib/types';
 import classnames from 'classnames';
 import type { Ref, JSX } from 'preact';
-import { useEffect, useMemo, useRef, useState } from 'preact/hooks';
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'preact/hooks';
 
-import { ListenerCollection } from '../../shared/listener-collection';
 import { isMacOS } from '../../shared/user-agent';
 import {
   LinkType,
@@ -181,49 +186,82 @@ function ToolbarButton({
   );
 }
 
+export type UserItem = {
+  username: string;
+  displayName: string | null;
+};
+
 type TextAreaProps = {
   classes?: string;
   containerRef?: Ref<HTMLTextAreaElement>;
   atMentionsEnabled: boolean;
+  usersWhoAnnotated: UserItem[];
+  onEditText: (text: string) => void;
 };
 
 function TextArea({
   classes,
   containerRef,
   atMentionsEnabled,
+  usersWhoAnnotated,
+  onEditText,
   ...restProps
-}: TextAreaProps & JSX.TextareaHTMLAttributes<HTMLTextAreaElement>) {
+}: TextAreaProps & JSX.TextareaHTMLAttributes) {
   const [popoverOpen, setPopoverOpen] = useState(false);
+  const [activeMention, setActiveMention] = useState<string>();
   const textareaRef = useSyncedRef(containerRef);
-
-  useEffect(() => {
-    if (!atMentionsEnabled) {
-      return () => {};
+  const [highlightedSuggestion, setHighlightedSuggestion] = useState(0);
+  const suggestions = useMemo(() => {
+    if (!atMentionsEnabled || activeMention === undefined) {
+      return [];
     }
 
-    const textarea = textareaRef.current!;
-    const listenerCollection = new ListenerCollection();
-    const checkForMentionAtCaret = () => {
+    return usersWhoAnnotated
+      .filter(
+        u =>
+          // Match all users if the active mention is empty, which happens right
+          // after typing `@`
+          !activeMention ||
+          `${u.username} ${u.displayName ?? ''}`
+            .toLowerCase()
+            .match(activeMention.toLowerCase()),
+      )
+      .slice(0, 10);
+  }, [activeMention, atMentionsEnabled, usersWhoAnnotated]);
+
+  const checkForMentionAtCaret = useCallback(
+    (textarea: HTMLTextAreaElement) => {
+      if (!atMentionsEnabled) {
+        return;
+      }
+
       const term = termBeforePosition(textarea.value, textarea.selectionStart);
-      setPopoverOpen(term.startsWith('@'));
-    };
-
-    // We listen for `keyup` to make sure the text in the textarea reflects the
-    // just-pressed key when we evaluate it
-    listenerCollection.add(textarea, 'keyup', e => {
-      // `Esc` key is used to close the popover. Do nothing and let users close
-      // it that way, even if the caret is in a mention
-      if (e.key !== 'Escape') {
-        checkForMentionAtCaret();
+      const isAtMention = term.startsWith('@');
+
+      setPopoverOpen(isAtMention);
+      setActiveMention(isAtMention ? term.substring(1) : undefined);
+
+      // Reset highlighted suggestion when closing the popover
+      if (!isAtMention) {
+        setHighlightedSuggestion(0);
       }
-    });
+    },
+    [atMentionsEnabled],
+  );
+  const applySuggestion = useCallback(
+    (suggestion: UserItem) => {
+      const textarea = textareaRef.current!;
+      const term = termBeforePosition(textarea.value, textarea.selectionStart);
 
-    // When clicking the textarea it's possible the caret is moved "into" a
-    // mention, so we check if the popover should be opened
-    listenerCollection.add(textarea, 'click', checkForMentionAtCaret);
+      onEditText(textarea.value.replace(term, `@${suggestion.username}`));
 
-    return () => listenerCollection.removeAll();
-  }, [atMentionsEnabled, popoverOpen, textareaRef]);
+      // Close popover and reset highlighted suggestion once the value is
+      // replaced
+      setPopoverOpen(false);
+      setHighlightedSuggestion(0);
+    },
+    [onEditText, textareaRef],
+  );
 
   return (
     <div className="relative">
@@ -234,17 +272,92 @@ function TextArea({
           'focus:bg-white focus:outline-none focus:shadow-focus-inner',
           classes,
         )}
+        onInput={(e: Event) => onEditText((e.target as HTMLInputElement).value)}
         {...restProps}
+        // We listen for `keyup` to make sure the text in the textarea reflects the
+        // just-pressed key when we evaluate it
+        onKeyUp={e => {
+          // `Esc` key is used to close the popover. Do nothing and let users close
+          // it that way, even if the caret is in a mention
+          // `Enter` is handled on keydown. Do not handle it here.
+          if (!['Escape', 'Enter'].includes(e.key)) {
+            checkForMentionAtCaret(e.target as HTMLTextAreaElement);
+          }
+        }}
+        onKeyDown={e => {
+          if (
+            !popoverOpen ||
+            suggestions.length === 0 ||
+            !['ArrowDown', 'ArrowUp', 'Enter'].includes(e.key)
+          ) {
+            return;
+          }
+
+          // When vertical arrows or Enter are pressed while the popover is open
+          // with suggestions, highlight or pick the right suggestion.
+          e.preventDefault();
+          e.stopPropagation();
+
+          if (e.key === 'ArrowDown') {
+            setHighlightedSuggestion(prev =>
+              Math.min(prev + 1, suggestions.length - 1),
+            );
+          } else if (e.key === 'ArrowUp') {
+            setHighlightedSuggestion(prev => Math.max(prev - 1, 0));
+          } else if (e.key === 'Enter') {
+            e.preventDefault();
+            applySuggestion(suggestions[highlightedSuggestion]);
+          }
+        }}
+        // When clicking the textarea, it's possible the caret is moved "into" a
+        // mention, so we check if the popover should be opened
+        onClick={e => checkForMentionAtCaret(e.target as HTMLTextAreaElement)}
         ref={textareaRef}
       />
       {atMentionsEnabled && (
         <Popover
           open={popoverOpen}
           onClose={() => setPopoverOpen(false)}
           anchorElementRef={textareaRef}
-          classes="p-2"
+          classes="p-1"
         >
-          Suggestions
+          <ul
+            className="flex-col gap-y-0.5"
+            role="listbox"
+            aria-orientation="vertical"
+          >
+            {suggestions.map((s, index) => (
+              // These options are indirectly handled via keyboard event
+              // handlers in the textarea, hence, we don't want to add keyboard
+              // event handler here, but we want to handle click events
+              // eslint-disable-next-line jsx-a11y/click-events-have-key-events
+              <li
+                key={s.username}
+                className={classnames(
+                  'flex justify-between items-center',
+                  'rounded p-2 hover:bg-grey-2',
+                  {
+                    'bg-grey-2': highlightedSuggestion === index,
+                  },
+                )}
+                onClick={e => {
+                  e.stopPropagation();
+                  applySuggestion(s);
+                }}
+                role="option"
+                aria-selected={highlightedSuggestion === index}
+                tabIndex={highlightedSuggestion === index ? 0 : -1}
+              >
+                <span className="truncate">{s.username}</span>
+                <span className="text-color-text-light">{s.displayName}</span>
+              </li>
+            ))}
+            {suggestions.length === 0 && (
+              <li className="italic p-2">
+                No matches. You can still write the username
+              </li>
+            )}
+          </ul>
         </Popover>
       )}
     </div>
@@ -392,6 +505,13 @@ export type MarkdownEditorProps = {
   text: string;
 
   onEditText?: (text: string) => void;
+
+  /**
+   * List of users who have annotated current document and belong to active group.
+   * This is used to populate the @mentions suggestions, when `atMentionsEnabled`
+   * is `true`.
+   */
+  usersWhoAnnotated: UserItem[];
 };
 
 /**
@@ -403,6 +523,7 @@ export default function MarkdownEditor({
   onEditText = () => {},
   text,
   textStyle = {},
+  usersWhoAnnotated,
 }: MarkdownEditorProps) {
   // Whether the preview mode is currently active.
   const [preview, setPreview] = useState(false);
@@ -467,12 +588,11 @@ export default function MarkdownEditor({
           containerRef={input}
           onClick={(e: Event) => e.stopPropagation()}
           onKeyDown={handleKeyDown}
-          onInput={(e: Event) =>
-            onEditText((e.target as HTMLInputElement).value)
-          }
+          onEditText={onEditText}
           value={text}
           style={textStyle}
           atMentionsEnabled={atMentionsEnabled}
+          usersWhoAnnotated={usersWhoAnnotated}
         />
       )}
     </div>

src/sidebar/components/test/MarkdownEditor-test.js

@@ -2,7 +2,7 @@ import {
   checkAccessibility,
   mockImportedComponents,
 } from '@hypothesis/frontend-testing';
-import { mount } from '@hypothesis/frontend-testing';
+import { mount, unmountAll } from '@hypothesis/frontend-testing';
 import { render } from 'preact';
 import { act } from 'preact/test-utils';
 
@@ -23,13 +23,18 @@ describe('MarkdownEditor', () => {
   };
   let fakeIsMacOS;
   let MarkdownView;
+  let fakeStore;
 
   beforeEach(() => {
     fakeMarkdownCommands.convertSelectionToLink.resetHistory();
     fakeMarkdownCommands.toggleBlockStyle.resetHistory();
     fakeMarkdownCommands.toggleSpanStyle.resetHistory();
     fakeIsMacOS = sinon.stub().returns(false);
 
+    fakeStore = {
+      isFeatureEnabled: sinon.stub().returns(false),
+    };
+
     MarkdownView = function MarkdownView() {
       return null;
     };
@@ -41,11 +46,13 @@ describe('MarkdownEditor', () => {
       '../../shared/user-agent': {
         isMacOS: fakeIsMacOS,
       },
+      '../store': { useSidebarStore: () => fakeStore },
     });
   });
 
   afterEach(() => {
     $imports.$restore();
+    unmountAll();
   });
 
   function createComponent(props = {}, mountProps = {}) {

src/sidebar/store/modules/annotations.ts

@@ -8,6 +8,7 @@ import { createSelector } from 'reselect';
 import { hasOwn } from '../../../shared/has-own';
 import type { Annotation, SavedAnnotation } from '../../../types/api';
 import type { HighlightCluster } from '../../../types/shared';
+import { username as getUsername } from '../../helpers/account-id';
 import * as metadata from '../../helpers/annotation-metadata';
 import { isHighlight, isSaved } from '../../helpers/annotation-metadata';
 import { countIf, toTrueMap, trueKeys } from '../../util/collections';
@@ -34,6 +35,11 @@ type AnnotationStub = {
   $tag?: string;
 };
 
+export type UserItem = {
+  user: string;
+  displayName: string | null;
+};
+
 const initialState = {
   annotations: [],
   highlighted: {},
@@ -567,6 +573,37 @@ const savedAnnotations = createSelector(
   annotations => annotations.filter(ann => isSaved(ann)) as SavedAnnotation[],
 );
 
+/**
+ * Return the list of unique users who authored any annotation, ordered by username.
+ */
+const usersWhoAnnotated = createSelector(
+  (state: State) => state.annotations,
+  annotations => {
+    const usersMap = new Map<
+      string,
+      { user: string; username: string; displayName: string | null }
+    >();
+    annotations.forEach(anno => {
+      const { user } = anno;
+      const username = getUsername(user);
+      const displayName = anno.user_info?.display_name ?? null;
+
+      // Keep a unique list of users
+      if (!usersMap.has(user)) {
+        usersMap.set(user, { user, username, displayName });
+      }
+    });
+
+    // Sort users by username
+    return [...usersMap.values()].sort((a, b) => {
+      const lowerAUsername = a.username.toLowerCase();
+      const lowerBUsername = b.username.toLowerCase();
+
+      return lowerAUsername.localeCompare(lowerBUsername);
+    });
+  },
+);
+
 export const annotationsModule = createStoreModule(initialState, {
   namespace: 'annotations',
   reducers,
@@ -597,5 +634,6 @@ export const annotationsModule = createStoreModule(initialState, {
     noteCount,
     orphanCount,
     savedAnnotations,
+    usersWhoAnnotated,
   },
 });