Reactで、絵文字を選んで入力欄に入れるピッカーを作る方法

export type Emoji = { char: string; name: string; keywords: string[] };

// 検索に使う名前とキーワードは、ひらがなと漢字で持つ
export const EMOJIS: Emoji[] = [
  { char: '😀', name: 'にっこり', keywords: ['笑顔', 'えがお'] },
  { char: '😂', name: 'うれし泣き', keywords: ['笑う', 'わらう', '涙'] },
  { char: '😍', name: 'ハートの目', keywords: ['好き', 'すき'] },

// テキストエリアの選択範囲を text で置き換え、キャレットを text の直後に置く
export function insertAtCaret(el: HTMLTextAreaElement, text: string) {
  el.focus();
  // ブラウザの編集として入れると、Ctrl+Z（元に戻す）の履歴に残り、input イベントも起きる
  if (document.execCommand('insertText', false, text)) return;
  // execCommand が使えなかったとき
  el.setRangeText(text, el.selectionStart, el.selectionEnd, 'end');
  el.dispatchEvent(new Event('input', { bubbles: true }));
}

--- state を書き換えて入れる ---
入れた直後: "ねこ🐈‍⬛ です" キャレット 6 フォーカス テキストエリア
Ctrl+Z 1回目: "ねこ🐈‍⬛ です"
Ctrl+Z 2回目: "ねこ🐈‍⬛ です"
Ctrl+Z 3回目: "ねこ🐈‍⬛ です"
--- insertAtCaret で入れる ---
入れた直後: "ねこ🐈‍⬛ です" キャレット 6 フォーカス テキストエリア
Ctrl+Z 1回目: "ねこ です"
Ctrl+Z 2回目: "ねこ で"
Ctrl+Z 3回目: "ねこ "
insertAtCaret 側の state: "ねこ "

👍  length 2  U+1F44D
👍🏽  length 4  U+1F44D U+1F3FD
🐈‍⬛  length 4  U+1F408 U+200D U+2B1B
❤️  length 2  U+2764 U+FE0F
🇯🇵  length 4  U+1F1EF U+1F1F5

いいね: 入れた値 👍（length 2）→ Backspace 1回で （空）
いいね（中間の肌の色）: 入れた値 👍🏽（length 4）→ Backspace 1回で （空）
黒ねこ: 入れた値 🐈‍⬛（length 4）→ Backspace 1回で （空）
ハート: 入れた値 ❤️（length 2）→ Backspace 1回で （空）
日本の旗: 入れた値 🇯🇵（length 4）→ Backspace 1回で （空）

import { useRef, useState, type KeyboardEvent } from 'react';
import { EMOJIS, type Emoji } from './emojis';

const COLS = 8; // CSS の grid-template-columns と同じ列数にする
const NAMES = new Map(EMOJIS.map((e) => [e.char, e.name]));

export function filterEmojis(query: string): Emoji[] {
  const q = query.trim().toLowerCase();
  if (!q) return EMOJIS;
  return EMOJIS.filter((e) => [e.name, ...e.keywords].some((w) => w.toLowerCase().includes(q)));
}

type Props = {
  recent: string[];
  onPick: (char: string) => void;
  onClose: () => void;
};

export function EmojiPicker({ recent, onPick, onClose }: Props) {
  const [query, setQuery] = useState('');
  const [active, setActive] = useState(0); // 一覧の中で Tab で入れる位置
  const gridRef = useRef<HTMLDivElement>(null);
  const items = filterEmojis(query);

  const focusItem = (i: number) => {
    setActive(i);
    gridRef.current?.querySelectorAll<HTMLButtonElement>('button')[i]?.focus();
  };

  const onSearchKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
    if (e.key === 'ArrowDown' && items.length > 0) {
      e.preventDefault();
      focusItem(0);
    } else if (e.key === 'Enter' && items.length > 0) {
      e.preventDefault();
      onPick(items[0].char);
    }
  };

  const onGridKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {
    const steps: Record<string, number> = { ArrowRight: 1, ArrowLeft: -1, ArrowDown: COLS, ArrowUp: -COLS };
    const step = steps[e.key];
    if (step === undefined) return;
    e.preventDefault();
    const next = active + step;
    if (next >= 0 && next < items.length) focusItem(next);
  };

  return (
    <div
      className="picker"
      role="dialog"
      aria-label="絵文字を選ぶ"
      onKeyDown={(e) => {
        if (e.key === 'Escape') {
          e.preventDefault();
          onClose();
        }
      }}
    >
      <input
        type="search"
        aria-label="絵文字を検索"
        placeholder="検索（例：ねこ）"
        autoFocus
        value={query}
        onChange={(e) => {
          setQuery(e.target.value);
          setActive(0);
        }}
        onKeyDown={onSearchKeyDown}
      />
      {query === '' && recent.length > 0 && (
        <div className="recent" role="group" aria-label="最近使った絵文字">
          {recent.map((c) => (
            <button key={c} type="button" aria-label={NAMES.get(c) ?? c} onClick={() => onPick(c)}>
              {c}
            </button>
          ))}
        </div>
      )}
      {items.length === 0 ? (
        <p className="empty">見つかりませんでした</p>
      ) : (
        <div className="grid" role="group" aria-label="絵文字の一覧" ref={gridRef} onKeyDown={onGridKeyDown}>
          {items.map((e, i) => (
            <button
              key={e.char}
              type="button"
              tabIndex={i === active ? 0 : -1}
              aria-label={e.name}
              title={e.name}
              onFocus={() => setActive(i)}
              onClick={() => onPick(e.char)}
            >
              {e.char}
            </button>
          ))}
        </div>
      )}
    </div>
  );
}

const KEY = 'emoji-recent';
const MAX = 8;

// 保存した値が壊れていたり、localStorage が使えなかったりしたら空にする
export function loadRecent(): string[] {
  try {
    const v: unknown = JSON.parse(localStorage.getItem(KEY) ?? '[]');
    return Array.isArray(v) ? v.filter((c): c is string => typeof c === 'string').slice(0, MAX) : [];
  } catch {
    return [];
  }
}

// 使った絵文字を先頭に移し、MAX 個までにして保存する
export function pushRecent(list: string[], char: string): string[] {
  const next = [char, ...list.filter((c) => c !== char)].slice(0, MAX);
  try {
    localStorage.setItem(KEY, JSON.stringify(next));
  } catch {
    // 保存できなくても、開いている間の一覧は使える
  }
  return next;
}

import { useEffect, useRef, useState } from 'react';
import { EmojiPicker } from './EmojiPicker';
import { insertAtCaret } from './insertAtCaret';
import { loadRecent, pushRecent } from './recent';

export function EmojiTextarea() {
  const [value, setValue] = useState('');
  const [open, setOpen] = useState(false);
  const [recent, setRecent] = useState(loadRecent);
  const textareaRef = useRef<HTMLTextAreaElement>(null);
  const popupRef = useRef<HTMLDivElement>(null);

  // ピッカーの外を押したら閉じる
  useEffect(() => {
    if (!open) return;
    const onPointerDown = (e: PointerEvent) => {
      if (!popupRef.current?.contains(e.target as Node)) setOpen(false);
    };
    document.addEventListener('pointerdown', onPointerDown);
    return () => document.removeEventListener('pointerdown', onPointerDown);
  }, [open]);

  const pick = (char: string) => {
    setOpen(false);
    insertAtCaret(textareaRef.current!, char);
    setRecent((list) => pushRecent(list, char));
  };

  const close = () => {
    setOpen(false);
    textareaRef.current?.focus();
  };

  return (
    <div className="emoji-field">
      <textarea
        ref={textareaRef}
        aria-label="メッセージ"
        rows={3}
        value={value}
        onChange={(e) => setValue(e.target.value)}
      />
      <div className="popup" ref={popupRef}>
        <button
          type="button"
          className="toggle"
          aria-label="絵文字を入れる"
          aria-haspopup="dialog"
          aria-expanded={open}
          onClick={() => setOpen((o) => !o)}
        >
          😀
        </button>
        {open && <EmojiPicker recent={recent} onPick={pick} onClose={close} />}
      </div>
    </div>
  );
}

キャレットを「ねこ」の後ろへ: 値 "ねこ です" 選択 2-2 フォーカス テキストエリア ピッカー 閉 aria-expanded=false
ボタンを押した: 値 "ねこ です" 選択 2-2 フォーカス 絵文字を検索 ピッカー 開 aria-expanded=true
一覧の数: 40
「ねこ」で検索: 🐱ねこの顔* 🐈ねこ 🐈‍⬛黒ねこ
検索欄に打った: 値 "ねこ です" 選択 2-2 フォーカス 絵文字を検索 ピッカー 開 aria-expanded=true
↓: 値 "ねこ です" 選択 2-2 フォーカス 絵文字の一覧のねこの顔 ピッカー 開 aria-expanded=true
→ を2回: 値 "ねこ です" 選択 2-2 フォーカス 絵文字の一覧の黒ねこ ピッカー 開 aria-expanded=true
Tab で入る位置（*）: 🐱ねこの顔 🐈ねこ 🐈‍⬛黒ねこ*
Enter: 値 "ねこ🐈‍⬛ です" 選択 6-6 フォーカス テキストエリア ピッカー 閉 aria-expanded=false
続けて「がいる」と打った: 値 "ねこ🐈‍⬛がいる です" 選択 9-9 フォーカス テキストエリア ピッカー 閉 aria-expanded=false

「です」を選んだ: 値 "ねこ🐈‍⬛がいる です" 選択 10-12 フォーカス テキストエリア ピッカー 閉 aria-expanded=false
「いいね」をクリック: 値 "ねこ🐈‍⬛がいる 👍" 選択 12-12 フォーカス テキストエリア ピッカー 閉 aria-expanded=false

↓（検索欄から一覧へ）: 値 "ねこ🐈‍⬛がいる 👍" 選択 12-12 フォーカス 絵文字の一覧のにっこり ピッカー 開 aria-expanded=true
↓: 値 "ねこ🐈‍⬛がいる 👍" 選択 12-12 フォーカス 絵文字の一覧のいいね ピッカー 開 aria-expanded=true
←: 値 "ねこ🐈‍⬛がいる 👍" 選択 12-12 フォーカス 絵文字の一覧のこらえる ピッカー 開 aria-expanded=true
↑ を2回（1段目より上はない）: 値 "ねこ🐈‍⬛がいる 👍" 選択 12-12 フォーカス 絵文字の一覧のこらえる ピッカー 開 aria-expanded=true
Shift+Tab: 値 "ねこ🐈‍⬛がいる 👍" 選択 12-12 フォーカス 最近使った絵文字の黒ねこ ピッカー 開 aria-expanded=true
Shift+Tab: 値 "ねこ🐈‍⬛がいる 👍" 選択 12-12 フォーカス 最近使った絵文字のいいね ピッカー 開 aria-expanded=true

Esc: 値 "ねこ🐈‍⬛がいる 👍" 選択 12-12 フォーカス テキストエリア ピッカー 閉 aria-expanded=false
ピッカーの外をクリック: 値 "ねこ🐈‍⬛がいる 👍" 選択 12-12 フォーカス BODY ピッカー 閉 aria-expanded=false
ボタンをもう一度押した: 値 "ねこ🐈‍⬛がいる 👍" 選択 12-12 フォーカス 絵文字を入れる ピッカー 閉 aria-expanded=false

最近使った: 👍いいね 🐈‍⬛黒ねこ
localStorage: ["👍","🐈‍⬛"]
黒ねこを使った後: 🐈‍⬛黒ねこ 👍いいね
検索欄に打つと、最近使ったの行: なし
読み込み直した後: 🐈‍⬛黒ねこ 👍いいね
壊れた値を入れて読み込み直した後: 最近使ったの行 なし

「ねこ」と打って Enter: 値 "🐱" 選択 2-2 フォーカス テキストエリア ピッカー 閉 aria-expanded=false