Populate list of suggestions matching @mentions

Author: acelaya

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,
@@ -31,7 +36,10 @@ import {
   toggleSpanStyle,
 } from '../markdown-commands';
 import type { EditorState } from '../markdown-commands';
-import { termBeforePosition } from '../util/term-before-position';
+import {
+  getTermCoordinatesAtPosition,
+  termBeforePosition,
+} from '../util/term-before-position';
 import MarkdownView from './MarkdownView';
 
 /**
@@ -181,49 +189,91 @@ 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,
+  onKeyDown,
   ...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 { value } = textarea;
+      const { start, end } = getTermCoordinatesAtPosition(
+        value,
+        textarea.selectionStart,
+      );
+      const beforeMention = value.slice(0, start);
+      const afterMention = value.slice(end);
 
-    // 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(`${beforeMention}@${suggestion.username} ${afterMention}`);
 
-    return () => listenerCollection.removeAll();
-  }, [atMentionsEnabled, popoverOpen, textareaRef]);
+      // TODO Preserve caret position after applying suggestion
+
+      // Close popover and reset highlighted suggestion once the value is
+      // replaced
+      setPopoverOpen(false);
+      setHighlightedSuggestion(0);
+    },
+    [onEditText, textareaRef],
+  );
 
   return (
     <div className="relative">
@@ -234,17 +284,90 @@ 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 => {
+          // Invoke original handler if present
+          onKeyDown?.(e);
+
+          if (!popoverOpen || suggestions.length === 0) {
+            return;
+          }
+
+          // When vertical arrows pressed while the popover is open with
+          // suggestions, highlight the right suggestion.
+          // When `Enter` is pressed, apply highlighted suggestion.
+          if (e.key === 'ArrowDown') {
+            e.preventDefault();
+            setHighlightedSuggestion(prev =>
+              Math.min(prev + 1, suggestions.length - 1),
+            );
+          } else if (e.key === 'ArrowUp') {
+            e.preventDefault();
+            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}
+              >
+                <span className="truncate">{s.username}</span>
+                <span className="text-color-text-light">{s.displayName}</span>
+              </li>
+            ))}
+            {suggestions.length === 0 && (
+              <li className="italic p-2" data-testid="suggestions-fallback">
+                No matches. You can still write the username
+              </li>
+            )}
+          </ul>
         </Popover>
       )}
     </div>
@@ -392,6 +515,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 +533,7 @@ export default function MarkdownEditor({
   onEditText = () => {},
   text,
   textStyle = {},
+  usersWhoAnnotated,
 }: MarkdownEditorProps) {
   // Whether the preview mode is currently active.
   const [preview, setPreview] = useState(false);
@@ -467,12 +598,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>