Display a popover when hovering over highlighted mentions

src/sidebar/components/Annotation/AnnotationBody.tsx

@@ -106,6 +106,7 @@ function AnnotationBody({ annotation, settings }: AnnotationBodyProps) {
             })}
             style={textStyle}
             mentions={annotation.mentions}
+            mentionsEnabled={store.isFeatureEnabled('at_mentions')}
           />
         </Excerpt>
       )}

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

@@ -4,6 +4,7 @@ import {
 } from '@hypothesis/frontend-testing';
 import { mount } from '@hypothesis/frontend-testing';
 import { act } from 'preact/test-utils';
+import sinon from 'sinon';
 
 import * as fixtures from '../../../test/annotation-fixtures';
 import AnnotationBody, { $imports } from '../AnnotationBody';
@@ -54,6 +55,7 @@ describe('AnnotationBody', () => {
       getLink: sinon
         .stub()
         .callsFake((linkPath, { tag }) => `http://www.example.com/${tag}`),
+      isFeatureEnabled: sinon.stub().returns(false),
     };
 
     $imports.$mock(mockImportedComponents());

src/sidebar/components/MarkdownEditor.tsx

@@ -617,6 +617,7 @@ export default function MarkdownEditor({
           classes="border bg-grey-1 p-2"
           style={textStyle}
           mentions={mentions}
+          mentionsEnabled={mentionsEnabled}
         />
       ) : (
         <TextArea

src/sidebar/components/MarkdownView.tsx

@@ -1,19 +1,41 @@
-import { useEffect, useMemo, useRef } from 'preact/hooks';
+import { Popover } from '@hypothesis/frontend-shared';
+import classnames from 'classnames';
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'preact/hooks';
 
 import type { Mention } from '../../types/api';
+import type { InvalidUsername } from '../helpers/mentions';
 import { renderMentionTags } from '../helpers/mentions';
 import { replaceLinksWithEmbeds } from '../media-embedder';
 import { renderMathAndMarkdown } from '../render-markdown';
 import StyledText from './StyledText';
+import MentionPreviewContent from './mentions/MentionPreviewContent';
 
 export type MarkdownViewProps = {
   /** The string of markdown to display as HTML. */
   markdown: string;
   classes?: string;
   style?: Record<string, string>;
   mentions?: Mention[];
+
+  /**
+   * Whether the at-mentions feature ir enabled or not.
+   * Defaults to false.
+   */
+  mentionsEnabled?: boolean;
+
+  // Test seams
+  setTimeout_?: typeof setTimeout;
+  clearTimeout_?: typeof clearTimeout;
 };
 
+type PopoverContent = Mention | InvalidUsername | null;
+
 /**
  * A component which renders markdown as HTML and replaces recognized links
  * with embedded video/audio.
@@ -22,14 +44,50 @@ export default function MarkdownView({
   markdown,
   classes,
   style,
-  mentions,
+  mentions = [],
+  mentionsEnabled = false,
+  /* istanbul ignore next - test seam */
+  setTimeout_ = setTimeout,
+  /* istanbul ignore next - test seam */
+  clearTimeout_ = clearTimeout,
 }: MarkdownViewProps) {
   const html = useMemo(
     () => (markdown ? renderMathAndMarkdown(markdown) : ''),
     [markdown],
   );
   const content = useRef<HTMLDivElement | null>(null);
 
+  const mentionsPopoverAnchorRef = useRef<HTMLElement | null>(null);
+  const elementToMentionMap = useRef(
+    new Map<HTMLElement, Mention | InvalidUsername>(),
+  );
+  const [popoverContent, doSetPopoverContent] = useState<PopoverContent>(null);
+  /**
+   * This allows the content to be set with a small delay, so that popovers don't flickr
+   */
+  const popoverContentTimeout = useRef<ReturnType<typeof setTimeout> | null>();
+  const setPopoverContent = useCallback(
+    (content: PopoverContent) => {
+      if (popoverContentTimeout.current) {
+        clearTimeout_(popoverContentTimeout.current);
+      }
+
+      const setContent = () => {
+        doSetPopoverContent(content);
+        popoverContentTimeout.current = null;
+      };
+
+      // Set the content immediately when resetting, so that there's no delay
+      // when hiding the popover, only when showing it
+      if (content === null) {
+        setContent();
+      } else {
+        popoverContentTimeout.current = setTimeout_(setContent, 400);
+      }
+    },
+    [clearTimeout_, setTimeout_],
+  );
+
   useEffect(() => {
     replaceLinksWithEmbeds(content.current!, {
       // Make embeds the full width of the sidebar, unless the sidebar has been
@@ -40,7 +98,7 @@ export default function MarkdownView({
   }, [markdown]);
 
   useEffect(() => {
-    renderMentionTags(content.current!, mentions ?? []);
+    elementToMentionMap.current = renderMentionTags(content.current!, mentions);
   }, [mentions]);
 
   // NB: The following could be implemented by setting attribute props directly
@@ -50,14 +108,57 @@ export default function MarkdownView({
   // a review in the future.
   return (
     <div className="w-full break-anywhere cursor-text">
-      <StyledText>
+      <StyledText
+        classes={classnames({
+          // A `relative` wrapper around the `Popover` component is needed for
+          // when the native Popover API is not supported.
+          relative: mentionsEnabled,
+        })}
+      >
         <div
           className={classes}
           data-testid="markdown-text"
           ref={content}
           dangerouslySetInnerHTML={{ __html: html }}
           style={style}
+          // React types do not define `onMouseEnterCapture`, but preact does
+          // eslint-disable-next-line react/no-unknown-property
+          onMouseEnterCapture={
+            mentionsEnabled
+              ? ({ target }) => {
+                  const element = target as HTMLElement;
+                  const mention = elementToMentionMap.current.get(element);
+
+                  if (mention) {
+                    setPopoverContent(mention);
+                    mentionsPopoverAnchorRef.current = element;
+                  }
+                }
+              : undefined
+          }
+          // React types do not define `onMouseLeaveCapture`, but preact does
+          // eslint-disable-next-line react/no-unknown-property
+          onMouseLeaveCapture={
+            mentionsEnabled
+              ? () => {
+                  setPopoverContent(null);
+                  mentionsPopoverAnchorRef.current = null;
+                }
+              : undefined
+          }
         />
+        {mentionsEnabled && (
+          <Popover
+            open={!!popoverContent}
+            onClose={() => setPopoverContent(null)}
+            anchorElementRef={mentionsPopoverAnchorRef}
+            classes="px-3 py-2"
+          >
+            {popoverContent !== null && (
+              <MentionPreviewContent content={popoverContent} />
+            )}
+          </Popover>
+        )}
       </StyledText>
     </div>
   );

src/sidebar/components/mentions/MentionPreviewContent.tsx

@@ -0,0 +1,31 @@
+import type { Mention } from '../../../types/api';
+import type { InvalidUsername } from '../../helpers/mentions';
+
+export type MentionPreviewContent = {
+  content: Mention | InvalidUsername;
+};
+
+/**
+ * Information to display on a Popover when hovering over a processed mention
+ */
+export default function MentionPreviewContent({
+  content,
+}: MentionPreviewContent) {
+  if (typeof content === 'string') {
+    return (
+      <>
+        No user with username <span className="font-bold">{content}</span>{' '}
+        exists
+      </>
+    );
+  }
+
+  return (
+    <div className="flex flex-col gap-y-1.5">
+      <div className="text-md font-bold">@{content.username}</div>
+      {content.display_name && (
+        <div className="text-color-text-light">{content.display_name}</div>
+      )}
+    </div>
+  );
+}

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

@@ -1,4 +1,7 @@
-import { checkAccessibility } from '@hypothesis/frontend-testing';
+import {
+  checkAccessibility,
+  mockImportedComponents,
+} from '@hypothesis/frontend-testing';
 import { mount } from '@hypothesis/frontend-testing';
 import sinon from 'sinon';
 
@@ -8,14 +11,28 @@ describe('MarkdownView', () => {
   let fakeRenderMathAndMarkdown;
   let fakeReplaceLinksWithEmbeds;
   let fakeRenderMentionTags;
+  let fakeClearTimeout;
 
   const markdownSelector = '[data-testid="markdown-text"]';
 
+  function createComponent(props = {}) {
+    return mount(
+      <MarkdownView
+        markdown=""
+        {...props}
+        setTimeout_={callback => setTimeout(callback, 1)}
+        clearTimeout_={fakeClearTimeout}
+      />,
+    );
+  }
+
   beforeEach(() => {
     fakeRenderMathAndMarkdown = markdown => `rendered:${markdown}`;
     fakeReplaceLinksWithEmbeds = sinon.stub();
     fakeRenderMentionTags = sinon.stub();
+    fakeClearTimeout = sinon.stub();
 
+    $imports.$mock(mockImportedComponents());
     $imports.$mock({
       '../render-markdown': {
         renderMathAndMarkdown: fakeRenderMathAndMarkdown,
@@ -34,18 +51,18 @@ describe('MarkdownView', () => {
   });
 
   it('renders nothing if no markdown is provided', () => {
-    const wrapper = mount(<MarkdownView />);
+    const wrapper = createComponent();
     assert.equal(wrapper.text(), '');
   });
 
   it('renders markdown as HTML', () => {
-    const wrapper = mount(<MarkdownView markdown="**test**" />);
+    const wrapper = createComponent({ markdown: '**test**' });
     const rendered = wrapper.find(markdownSelector).getDOMNode();
     assert.equal(rendered.innerHTML, 'rendered:**test**');
   });
 
   it('re-renders markdown after an update', () => {
-    const wrapper = mount(<MarkdownView markdown="**test**" />);
+    const wrapper = createComponent({ markdown: '**test**' });
     wrapper.setProps({ markdown: '_updated_' });
     const rendered = wrapper.find(markdownSelector).getDOMNode();
     assert.equal(rendered.innerHTML, 'rendered:_updated_');
@@ -77,15 +94,22 @@ describe('MarkdownView', () => {
 
   [undefined, [{}]].forEach(mentions => {
     it('renders mention tags based on provided mentions', () => {
-      mount(<MarkdownView mentions={mentions} />);
+      createComponent({ mentions });
       assert.calledWith(fakeRenderMentionTags, sinon.match.any, mentions ?? []);
     });
   });
 
+  [true, false].forEach(mentionsEnabled => {
+    it('renders Popover only if mentions are enabled', () => {
+      const wrapper = createComponent({ mentionsEnabled });
+      assert.equal(wrapper.exists('Popover'), mentionsEnabled);
+    });
+  });
+
   it(
     'should pass a11y checks',
     checkAccessibility({
-      content: () => <MarkdownView markdown="foo" />,
+      content: () => createComponent({ markdown: 'foo' }),
     }),
   );
 });