Reactで、入力欄で「@」を打つと名前の候補を出す方法

export type User = { id: string; name: string };
export type Mention = { start: number; query: string };

// キャレットの直前が「@」と、それに続く空白以外の文字になっているかを調べる
// 「@」の前が英数字のときは開かない（cat@example.com のようなメールアドレスを除く）
// 日本語の文の中では「さん、@」のように、空白を入れずに打たれることがある
export function findMention(text: string, caret: number): Mention | null {
  const m = /(?:^|[^A-Za-z0-9])@([^\s@]*)$/.exec(text.slice(0, caret));
  if (!m) return null;
  return { start: caret - m[1].length - 1, query: m[1] };
}

// id（ローマ字）か名前（ひらがな）の先頭が一致するものを、最大5件まで
export function filterUsers(users: User[], query: string): User[] {
  const q = query.toLowerCase();
  return users.filter((u) => u.id.startsWith(q) || u.name.startsWith(q)).slice(0, 5);
}

// 送信するときに、本文に書かれたメンションの id を取り出す
export function extractMentions(text: string, users: User[]): string[] {
  const ids = new Set(users.map((u) => u.id));
  const found = [...text.matchAll(/(?:^|[^A-Za-z0-9])@([a-z0-9_]+)/g)].map((m) => m[1]);
  return [...new Set(found)].filter((id) => ids.has(id));
}

// textarea と同じ見た目の div を作り、指定した文字の位置（textarea の左上からの距離）を測る
const COPY = [
  'fontFamily', 'fontSize', 'fontWeight', 'fontStyle', 'letterSpacing', 'wordSpacing',
  'lineHeight', 'textTransform', 'textIndent', 'tabSize',
  'paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft',
] as const;

export function caretPosition(el: HTMLTextAreaElement, index: number) {
  const style = getComputedStyle(el);
  const mirror = document.createElement('div');
  for (const p of COPY) mirror.style[p] = style[p];
  Object.assign(mirror.style, {
    position: 'absolute',
    visibility: 'hidden',
    top: '0',
    left: '0',
    boxSizing: 'border-box',
    width: `${el.clientWidth}px`, // padding を含み、枠線とスクロールバーを含まない幅
    whiteSpace: 'pre-wrap',
    overflowWrap: 'break-word',
  });
  mirror.textContent = el.value.slice(0, index);
  const marker = document.createElement('span');
  marker.textContent = el.value.slice(index) || '.';
  mirror.append(marker);
  document.body.append(mirror);
  const top = el.clientTop + marker.offsetTop - el.scrollTop;
  const left = el.clientLeft + marker.offsetLeft - el.scrollLeft;
  const lineHeight = parseFloat(style.lineHeight);
  mirror.remove();
  return { top, left, lineHeight };
}

import { useId, useLayoutEffect, useRef, useState, type ComponentProps, type KeyboardEvent } from 'react';
import { caretPosition, filterUsers, findMention, type Mention, type User } from './mention';

type Props = Omit<ComponentProps<'textarea'>, 'value' | 'onChange'> & {
  users: User[];
  value: string;
  onChange: (value: string) => void;
};

const LIST_WIDTH = 200;

export function MentionTextarea({ users, value, onChange, ...rest }: Props) {
  const ref = useRef<HTMLTextAreaElement>(null);
  const listId = useId();
  const [mention, setMention] = useState<Mention | null>(null);
  const [active, setActive] = useState(0);
  const [pos, setPos] = useState({ top: 0, left: 0 });
  const lastKey = useRef(''); // 前回の「@の位置:検索文字列」
  const dismissedAt = useRef<number | null>(null); // Esc で閉じた「@」の位置
  const nextCaret = useRef<number | null>(null); // 候補を入れたあとに置くキャレットの位置

  const candidates = mention ? filterUsers(users, mention.query) : [];
  const open = candidates.length > 0;

  // 入力やキャレットの移動のたびに、キャレットの前を調べ直す
  function update(el: HTMLTextAreaElement) {
    const caret = el.selectionStart;
    const found = caret === el.selectionEnd ? findMention(el.value, caret) : null;
    if (found?.start !== dismissedAt.current) dismissedAt.current = null;
    const m = found && found.start !== dismissedAt.current ? found : null;
    const key = m ? `${m.start}:${m.query}` : '';
    if (key !== lastKey.current) {
      lastKey.current = key;
      setActive(0); // 検索文字列が変わったら、先頭の候補を選び直す
    }
    setMention(m);
    if (m) {
      const p = caretPosition(el, m.start);
      setPos({ top: p.top + p.lineHeight, left: Math.min(p.left, el.offsetWidth - LIST_WIDTH) });
    }
  }

  function select(user: User) {
    if (!mention) return;
    const end = mention.start + 1 + mention.query.length; // 「@」と検索文字列の終わり
    const insert = `@${user.id} `;
    const rest = value.slice(end);
    nextCaret.current = mention.start + insert.length;
    onChange(value.slice(0, mention.start) + insert + (rest.startsWith(' ') ? rest.slice(1) : rest));
    setMention(null);
  }

  // 値を書き換えるとキャレットが末尾に動くので、入れた名前の直後に戻す
  useLayoutEffect(() => {
    if (nextCaret.current === null) return;
    ref.current!.setSelectionRange(nextCaret.current, nextCaret.current);
    nextCaret.current = null;
  }, [value]);

  function handleKeyDown(e: KeyboardEvent<HTMLTextAreaElement>) {
    if (!open || e.nativeEvent.isComposing) return; // 変換中のキーは IME に任せる
    switch (e.key) {
      case 'ArrowDown':
        e.preventDefault();
        setActive((i) => (i + 1) % candidates.length);
        break;
      case 'ArrowUp':
        e.preventDefault();
        setActive((i) => (i - 1 + candidates.length) % candidates.length);
        break;
      case 'Enter':
      case 'Tab':
        e.preventDefault();
        select(candidates[active]);
        break;
      case 'Escape':
        e.preventDefault();
        dismissedAt.current = mention!.start;
        setMention(null);
        break;
    }
  }

  return (
    <div style={{ position: 'relative' }}>
      <textarea
        {...rest}
        ref={ref}
        value={value}
        onChange={(e) => {
          onChange(e.target.value);
          update(e.target);
        }}
        onSelect={(e) => update(e.currentTarget)}
        onKeyDown={handleKeyDown}
        onBlur={() => setMention(null)}
        aria-autocomplete="list"
        aria-controls={open ? listId : undefined}
        aria-activedescendant={open ? `${listId}-${active}` : undefined}
      />
      {open && (
        <ul
          id={listId}
          role="listbox"
          aria-label="メンションの候補"
          style={{ position: 'absolute', top: pos.top, left: pos.left, width: LIST_WIDTH }}
          className="mention-list"
        >
          {candidates.map((u, i) => (
            <li
              key={u.id}
              id={`${listId}-${i}`}
              role="option"
              aria-selected={i === active}
              onMouseDown={(e) => e.preventDefault()} // 押した時点で textarea のフォーカスを外さない
              onClick={() => select(u)}
              onMouseEnter={() => setActive(i)}
            >
              {u.name} <span className="mention-id">@{u.id}</span>
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}

import { useState, type FormEvent } from 'react';
import { MentionTextarea } from './MentionTextarea';
import { extractMentions, type User } from './mention';

const USERS: User[] = [
  { id: 'tama', name: 'たま' },
  { id: 'tora', name: 'とら' },
  { id: 'mike', name: 'みけ' },
  { id: 'kuro', name: 'くろ' },
  { id: 'shiro', name: 'しろ' },
];

export function App() {
  const [text, setText] = useState('');
  const [sent, setSent] = useState<string[] | null>(null);

  const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    setSent(extractMentions(text, USERS));
  };

  return (
    <form onSubmit={handleSubmit}>
      <label htmlFor="comment">コメント</label>
      <MentionTextarea id="comment" users={USERS} value={text} onChange={setText} rows={4} placeholder="@ で名前の候補が出ます" />
      <button type="submit">送信</button>
      <p role="status">{sent && `メンション：${sent.length ? sent.join('、') : 'なし'}`}</p>
    </form>
  );
}