Reactで、Ctrl+Kで開くコマンドパレットを作る方法

export type Command = {
  id: string;
  label: string; // 一覧に出す名前
  group: string; // 右に小さく出す分類
  keywords?: string[]; // 名前にない言葉でも見つかるようにする
  run: () => void;
};

const commands = useMemo<Command[]>(() => {
  // 実行したら、画面の下に「実行：〇〇」と出す。act を省いたコマンドは、表示だけを変える
  const make = (id: string, label: string, group: string, keywords: string[], act = () => {}): Command => ({
    id,
    label,
    group,
    keywords,
    run: () => {
      act();
      setLastRun(label);
    },
  });
  return [
    make('theme', 'テーマを切り替える', '表示', ['dark', 'ダーク', 'ライト'], () => setDark((d) => !d)),
    make('bigger', '文字を大きくする', '表示', ['font', 'zoom'], () => setFontSize((s) => s + 2)),
    make('smaller', '文字を小さくする', '表示', ['font', 'zoom'], () => setFontSize((s) => s - 2)),
    make('search', '検索欄へ移動', '移動', ['search', 'けんさく'], () => searchRef.current?.focus()),
    make('memo', 'メモ欄へ移動', '移動', ['note'], () => memoRef.current?.focus()),
    make('top', 'ページの先頭へ移動', '移動', ['top', 'scroll']),
    make('new-memo', '新しいメモを作る', '作成', ['new', 'note']),
    make('memo-list', 'メモの一覧を開く', 'メモ', ['note', 'list']),
    make('memo-export', '書き出す（メモ）', 'メモ', ['export', 'download']),
    make('settings', '設定を開く', '全般', ['settings', 'preferences']),
    make('shortcuts', 'ショートカットの一覧', '全般', ['keyboard', 'help']),
    make('help', 'ヘルプを表示', '全般', ['help', '使い方']),
  ];
}, []);

import { useEffect } from 'react';

// Ctrl+K（Mac では ⌘K）でパレットを開け閉めする。入力欄の中でも反応させる
export function useCommandPaletteShortcut(toggle: () => void) {
  useEffect(() => {
    function handleKeyDown(e: KeyboardEvent) {
      if (e.key.toLowerCase() !== 'k' || !(e.ctrlKey || e.metaKey) || e.shiftKey || e.altKey) return;
      if (e.isComposing) return; // 変換中のキーは IME に任せる
      e.preventDefault(); // 押しっぱなしの2回目以降も、ブラウザの既定の動きは止める
      if (e.repeat) return; // 押しっぱなしでは、開け閉めをくり返さない
      toggle();
    }
    window.addEventListener('keydown', handleKeyDown);
    return () => window.removeEventListener('keydown', handleKeyDown);
  }, [toggle]);
}

const toggle = useCallback(() => setOpen((o) => !o), []);
useCommandPaletteShortcut(toggle);

import { useEffect, useId, useRef, useState } from 'react';
import type { KeyboardEvent } from 'react';
import type { Command } from './commands';
import { filterCommands } from './filterCommands';

type Props = {
  open: boolean;
  onClose: () => void;
  commands: Command[];
};

export function CommandPalette({ open, onClose, commands }: Props) {
  const dialogRef = useRef<HTMLDialogElement>(null);

  useEffect(() => {
    const dialog = dialogRef.current;
    if (!dialog) return;
    if (open && !dialog.open) dialog.showModal();
    if (!open && dialog.open) dialog.close();
  }, [open]);

  function run(command: Command) {
    // 先に閉じてフォーカスを戻してから、コマンドを実行する
    dialogRef.current?.close();
    command.run();
  }

  return (
    <dialog
      ref={dialogRef}
      className="palette"
      aria-label="コマンドパレット"
      onClose={onClose}
      onClick={(e) => {
        if (e.target === e.currentTarget) onClose(); // 幕の部分をクリックしたら閉じる
      }}
    >
      {open && <PaletteBody commands={commands} onRun={run} />}
    </dialog>
  );
}

import type { Command } from './commands';

// 全角・半角と大文字・小文字をそろえ、カタカナをひらがなにする
function normalize(s: string): string {
  return s
    .normalize('NFKC')
    .toLowerCase()
    .replace(/[ァ-ヶ]/g, (c) => String.fromCharCode(c.charCodeAt(0) - 0x60));
}

export function filterCommands(commands: Command[], query: string): Command[] {
  const q = normalize(query.trim());
  if (q === '') return commands;
  const hits: { command: Command; rank: number }[] = [];
  for (const command of commands) {
    const label = normalize(command.label);
    const keywords = (command.keywords ?? []).map(normalize);
    // 名前の先頭に一致 → 名前の途中に一致 → キーワードに一致、の順に並べる
    const rank = label.startsWith(q) ? 0 : label.includes(q) ? 1 : keywords.some((k) => k.includes(q)) ? 2 : -1;
    if (rank >= 0) hits.push({ command, rank });
  }
  // sort は安定なので、同じ順位の中では元の並びが保たれる
  return hits.sort((a, b) => a.rank - b.rank).map((h) => h.command);
}

「めも」: open=true modal=true focus=palette-input query="めも" 候補=[メモ欄へ移動／メモの一覧を開く／新しいメモを作る／書き出す（メモ）] 選択=メモ欄へ移動 activedescendant一致=true
「メモ」: open=true modal=true focus=palette-input query="メモ" 候補=[メモ欄へ移動／メモの一覧を開く／新しいメモを作る／書き出す（メモ）] 選択=メモ欄へ移動 activedescendant一致=true
「note」: open=true modal=true focus=palette-input query="note" 候補=[メモ欄へ移動／新しいメモを作る／メモの一覧を開く] 選択=メモ欄へ移動 activedescendant一致=true
「ＤＡＲＫ」: open=true modal=true focus=palette-input query="ＤＡＲＫ" 候補=[テーマを切り替える] 選択=テーマを切り替える activedescendant一致=true
「てーま」: open=true modal=true focus=palette-input query="てーま" 候補=[テーマを切り替える] 選択=テーマを切り替える activedescendant一致=true
「けんさく」: open=true modal=true focus=palette-input query="けんさく" 候補=[検索欄へ移動] 選択=検索欄へ移動 activedescendant一致=true
「xyz」: open=true modal=true focus=palette-input query="xyz" 候補=[] 選択=null activedescendant一致=true 表示="一致するコマンドはありません"

export function PaletteBody({ commands, onRun }: { commands: Command[]; onRun: (c: Command) => void }) {
  const [query, setQuery] = useState('');
  const [active, setActive] = useState(0);
  const results = filterCommands(commands, query);
  const listId = useId();
  const optionId = (i: number) => `${listId}-${i}`;
  const listRef = useRef<HTMLUListElement>(null);

  // 選んでいる行が一覧の外に出たら、見える位置までスクロールする
  useEffect(() => {
    listRef.current?.children[active]?.scrollIntoView({ block: 'nearest' });
  }, [active, query]);

  function handleKeyDown(e: KeyboardEvent<HTMLInputElement>) {
    if (e.nativeEvent.isComposing) return; // 日本語の変換中のキーは IME に任せる
    if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
      e.preventDefault(); // 入力欄のカーソルを動かさない
      if (results.length === 0) return;
      const step = e.key === 'ArrowDown' ? 1 : -1;
      setActive((i) => (i + step + results.length) % results.length);
    } else if (e.key === 'Enter' && results[active]) {
      e.preventDefault();
      onRun(results[active]);
    }
  }

  return (
    <>
      <input
        className="palette-input"
        role="combobox"
        aria-expanded="true"
        aria-controls={listId}
        aria-autocomplete="list"
        aria-activedescendant={results[active] ? optionId(active) : undefined}
        placeholder="コマンドを検索"
        value={query}
        onChange={(e) => {
          setQuery(e.target.value);
          setActive(0); // 絞り込みが変わったら、先頭を選び直す
        }}
        onKeyDown={handleKeyDown}
      />
      <ul id={listId} ref={listRef} role="listbox" aria-label="コマンド" className="palette-list">
        {results.map((command, i) => (
          <li
            key={command.id}
            id={optionId(i)}
            role="option"
            aria-selected={i === active}
            onMouseMove={() => setActive(i)}
            onMouseDown={(e) => e.preventDefault()} // 入力欄からフォーカスを外さない
            onClick={() => onRun(command)}
          >
            {command.label}
            <span className="palette-group">{command.group}</span>
          </li>
        ))}
      </ul>
      {results.length === 0 && <p className="palette-empty">一致するコマンドはありません</p>}
    </>
  );
}

function run(command: Command) {
  command.run();
  onClose(); // dialog が閉じるのは、この後の effect の中
}

先に閉じてから実行する版: open=false modal=false focus=search 「実行：検索欄へ移動」 dark=false
先に実行して、閉じるのは state に任せる版: open=false modal=false focus=opener 「実行：検索欄へ移動」 dark=false