Reactで、選んだ文字を太字にするツールバー付きの入力欄を作る方法

import { useCallback, useEffect, useRef, useState } from 'react';

type Props = {
  initialHtml?: string;
  onChange: (html: string) => void;
};

export function BoldEditor({ initialHtml = '', onChange }: Props) {
  const editorRef = useRef<HTMLDivElement>(null);
  // 最初の中身を固定する。以後、React はこの div の中を書き換えない
  const [initial] = useState(() => ({ __html: initialHtml }));
  const [isBold, setIsBold] = useState(false);

  // キャレットや選択範囲が太字の中にあるかを、ボタンの表示に写す
  const updateBold = useCallback(() => {
    const editor = editorRef.current;
    const sel = document.getSelection();
    const inside = !!editor && !!sel && sel.rangeCount > 0 && editor.contains(sel.anchorNode);
    setIsBold(inside && document.queryCommandState('bold') === true);
  }, []);

  useEffect(() => {
    document.addEventListener('selectionchange', updateBold);
    return () => document.removeEventListener('selectionchange', updateBold);
  }, [updateBold]);

  const toggleBold = () => {
    document.execCommand('bold');
    updateBold();
  };

  // 貼り付けは書式を捨てて、文字だけを入れる
  const handlePaste = (e: React.ClipboardEvent<HTMLDivElement>) => {
    e.preventDefault();
    const text = e.clipboardData.getData('text/plain');
    document.execCommand('insertText', false, text);
  };

  return (
    <div className="editor">
      <div role="toolbar" aria-label="書式" className="toolbar">
        <button
          type="button"
          aria-label="太字"
          aria-pressed={isBold}
          // 押してもフォーカスと選択範囲を入力欄に残す
          onMouseDown={(e) => e.preventDefault()}
          onClick={toggleBold}
        >
          <b>B</b>
        </button>
      </div>
      <div
        ref={editorRef}
        className="body"
        contentEditable
        role="textbox"
        aria-multiline="true"
        aria-label="本文"
        dangerouslySetInnerHTML={initial}
        onInput={(e) => {
          onChange(e.currentTarget.innerHTML);
          updateBold();
        }}
        onPaste={handlePaste}
      />
    </div>
  );
}

「猫」を選択
  → 本文: 猫は<b>よく眠る</b>動物です。 | 選択:「猫」 | フォーカス: 本文 | aria-pressed=false | 下の表示: 猫は<b>よく眠る</b>動物です。
太字ボタンをクリック
  → 本文: <b>猫</b>は<b>よく眠る</b>動物です。 | 選択:「猫」 | フォーカス: 本文 | aria-pressed=true | 下の表示: <b>猫</b>は<b>よく眠る</b>動物です。
End キーで行末へ移り、「よ」と入力
  → 本文: <b>猫</b>は<b>よく眠る</b>動物です。よ | 選択:「」 | フォーカス: 本文 | aria-pressed=false | 下の表示: <b>猫</b>は<b>よく眠る</b>動物です。よ
「よく眠る」（もともと太字）を選択
  → 本文: <b>猫</b>は<b>よく眠る</b>動物です。よ | 選択:「よく眠る」 | フォーカス: 本文 | aria-pressed=true | 下の表示: <b>猫</b>は<b>よく眠る</b>動物です。よ
太字ボタンをクリック
  → 本文: <b>猫</b>はよく眠る動物です。よ | 選択:「よく眠る」 | フォーカス: 本文 | aria-pressed=false | 下の表示: <b>猫</b>はよく眠る動物です。よ
「猫は」（「猫」だけ太字）を選択
  → 本文: <b>猫</b>はよく眠る動物です。よ | 選択:「猫は」 | フォーカス: 本文 | aria-pressed=false | 下の表示: <b>猫</b>はよく眠る動物です。よ
太字ボタンをクリック
  → 本文: <b>猫は</b>よく眠る動物です。よ | 選択:「猫は」 | フォーカス: 本文 | aria-pressed=true | 下の表示: <b>猫は</b>よく眠る動物です。よ

太字ボタンをクリック
  → 本文: 猫は<b>よく眠る</b>動物です。 | 選択:「」 | フォーカス: 本文 | aria-pressed=true | 下の表示: 猫は<b>よく眠る</b>動物です。
「とても」と入力
  → 本文: 猫は<b>よく眠る</b>動物です。<b>とても</b> | 選択:「」 | フォーカス: 本文 | aria-pressed=true | 下の表示: 猫は<b>よく眠る</b>動物です。<b>とても</b>
もう一度太字ボタンをクリックし、「かわいい」と入力
  → 本文: 猫は<b>よく眠る</b>動物です。<b>とても</b>かわいい | 選択:「」 | フォーカス: 本文 | aria-pressed=false | 下の表示: 猫は<b>よく眠る</b>動物です。<b>とても</b>かわいい

「動物」を選択
  → 本文: 猫は<b>よく眠る</b>動物です。 | 選択:「動物」 | フォーカス: 本文 | aria-pressed=false | 下の表示: 猫は<b>よく眠る</b>動物です。
Ctrl+B を押す
  → 本文: 猫は<b>よく眠る動物</b>です。 | 選択:「動物」 | フォーカス: 本文 | aria-pressed=true | 下の表示: 猫は<b>よく眠る動物</b>です。
  （input: formatBold）
Ctrl+Z を押す
  → 本文: 猫は<b>よく眠る</b>動物です。 | 選択:「動物」 | フォーカス: 本文 | aria-pressed=false | 下の表示: 猫は<b>よく眠る</b>動物です。
  （input: historyUndo）
「猫」を選んで太字ボタンをクリック
  → 本文: <b>猫</b>は<b>よく眠る</b>動物です。 | 選択:「猫」 | フォーカス: 本文 | aria-pressed=true | 下の表示: <b>猫</b>は<b>よく眠る</b>動物です。
  （input: formatBold）
Ctrl+Z を押す
  → 本文: 猫は<b>よく眠る</b>動物です。 | 選択:「猫」 | フォーカス: 本文 | aria-pressed=false | 下の表示: 猫は<b>よく眠る</b>動物です。
  （input: historyUndo）

本文をクリックし、End キーで行末へ
  → 本文: 猫は<b>よく眠る</b>動物です。 | 選択:「」 | フォーカス: 本文 | 下の表示: 猫は<b>よく眠る</b>動物です。
「ね」と入力
  → 本文: 猫は<b>よく眠る</b>動物です。ね | 選択:「」 | フォーカス: 本文 | 下の表示: 猫は<b>よく眠る</b>動物です。ね
続けて「こ」と入力
  → 本文: こ猫は<b>よく眠る</b>動物です。ね | 選択:「」 | フォーカス: 本文 | 下の表示: こ猫は<b>よく眠る</b>動物です。ね
続けて「だ」と入力
  → 本文: だこ猫は<b>よく眠る</b>動物です。ね | 選択:「」 | フォーカス: 本文 | 下の表示: だこ猫は<b>よく眠る</b>動物です。ね
  キャレットの位置: 先頭から 0 文字目の後ろ（本文は 14 文字）

[preventDefault する版]
「猫」を選んで太字ボタンをクリック （本文の blur: 0回、click の処理が始まったときのフォーカス: 本文）
  → 本文: <b>猫</b>は<b>よく眠る</b>動物です。 | 選択:「猫」 | フォーカス: 本文 | aria-pressed=true | 下の表示: <b>猫</b>は<b>よく眠る</b>動物です。
[preventDefault しない版]
「猫」を選んで太字ボタンをクリック （本文の blur: 1回、click の処理が始まったときのフォーカス: 太字ボタン）
  → 本文: <b>猫</b>は<b>よく眠る</b>動物です。 | 選択:「猫」 | フォーカス: 本文 | 下の表示: <b>猫</b>は<b>よく眠る</b>動物です。

- main:
  - toolbar "書式":
    - button "太字" [pressed]: B
  - textbox "本文"
  - text: 猫は<b>よく眠る</b>動物です。

onPaste で文字だけを入れる版：「動物」を選び、赤い 40px の「子猫」を貼り付ける
  → 本文: 猫は<b>よく眠る</b>子猫です。 | 選択:「」 | フォーカス: 本文 | aria-pressed=false | 下の表示: 猫は<b>よく眠る</b>子猫です。
  続けて Ctrl+Z を押す
  → 本文: 猫は<b>よく眠る</b>動物です。 | 選択:「動物」 | フォーカス: 本文 | aria-pressed=false | 下の表示: 猫は<b>よく眠る</b>動物です。
onPaste がない版：「動物」を選び、赤い 40px の「子猫」を貼り付ける
  → 本文: 猫は<b>よく眠る</b><span style="color: red; font-size: 40px">子猫</span>です。 | 選択:「」 | フォーカス: 本文 | 下の表示: 猫は<b>よく眠る</b><span style="color: red; font-size: 40px">子猫</span>です。