Reactのテキストエリアで、Tabキーを押して字下げする方法

2行目の先頭で Tab
  値 "function meow() {\nconsole.log(\"にゃー\");\n}" | 選択 18〜18 | フォーカス: ボタン「保存」

Tab        止めた
Shift+Tab  止めた
Ctrl+Tab   止めていない
Alt+Tab    止めていない

export const INDENT = '  '; // 字下げ1つ分（半角スペース2つ）

export type IndentEdit = {
  from: number; // 置き換える範囲の始まり
  to: number; // 置き換える範囲の終わり
  insert: string; // 代わりに入れる文字
  selStart: number; // 置き換えたあとの選択範囲
  selEnd: number;
};

// Tab（outdent = false）か Shift+Tab（outdent = true）を押したときの変更を求める。変更がなければ null
export function computeIndent(value: string, start: number, end: number, outdent: boolean): IndentEdit | null {
  const multiLine = value.slice(start, end).includes('\n');
  // 1行の中だけなら、キャレットの位置（選んでいればその範囲）に字下げを入れる
  if (!outdent && !multiLine) {
    const caret = start + INDENT.length;
    return { from: start, to: end, insert: INDENT, selStart: caret, selEnd: caret };
  }
  // 選択範囲にかかる行を、最初の行の先頭から最後の行の末尾まで取り出す
  const from = value.lastIndexOf('\n', start - 1) + 1;
  // 選択の終わりが行の先頭にあるときは、その行は含めない
  const last = end > start && value[end - 1] === '\n' ? end - 1 : end;
  const lineEnd = value.indexOf('\n', last);
  const to = lineEnd === -1 ? value.length : lineEnd;
  const lines = value.slice(from, to).split('\n');

  if (!outdent) {
    return {
      from, to,
      insert: lines.map((line) => INDENT + line).join('\n'),
      selStart: start + INDENT.length,
      selEnd: end + INDENT.length * lines.length,
    };
  }
  // 行頭のタブ1つか、スペースを INDENT の長さまで取り除く
  const removed = lines.map((line) => (line.startsWith('\t') ? 1 : line.match(/^ */)![0].slice(0, INDENT.length).length));
  if (removed.every((n) => n === 0)) return null;
  const total = removed.reduce((a, b) => a + b, 0);
  return {
    from, to,
    insert: lines.map((line, i) => line.slice(removed[i])).join('\n'),
    selStart: Math.max(from, start - removed[0]),
    selEnd: Math.max(from, end - total),
  };
}

キャレットが b の前で Tab（選択 2〜2）
  前 "a\n[]b\nc"
  後 "a\n  []b\nc"
「b」を選んで Tab（選択 2〜3）
  前 "a\n[b]\nc"
  後 "a\n  []\nc"
a〜b を選んで Tab（選択 0〜3）
  前 "[a\nb]\nc"
  後 "  [a\n  b]\nc"
a〜b の改行まで選んで Tab（選択 0〜4）
  前 "[a\nb\n]c"
  後 "  [a\n  b\n]c"
全体を選んで Shift+Tab（選択 0〜14）
  前 "[    a\n  b\n\tc\nd]"
  後 "[  a\nb\nc\nd]"
キャレットが b の後で Shift+Tab（選択 9〜9）
  前 "    a\n  b[]\n\tc\nd"
  後 "    a\nb[]\n\tc\nd"
d の行で Shift+Tab（選択 14〜14）
  前 "    a\n  b\n\tc\nd[]"
  後 null（変更なし）
「  」だけの行で Shift+Tab（選択 2〜2）
  前 "  []"
  後 "[]"

import { useState, type KeyboardEvent } from 'react';
import { computeIndent, type IndentEdit } from './indent';

const INITIAL = 'function meow() {\nconsole.log("にゃー");\n}';

// ブラウザの編集として置き換える（Ctrl+Z で戻せて、input イベントも起きる）
function applyEdit(el: HTMLTextAreaElement, edit: IndentEdit) {
  el.setSelectionRange(edit.from, edit.to);
  const ok = edit.insert === ''
    ? document.execCommand('delete')
    : document.execCommand('insertText', false, edit.insert);
  if (!ok) {
    // execCommand が使えなかったとき（Ctrl+Z では戻せない）
    el.setRangeText(edit.insert, edit.from, edit.to);
    el.dispatchEvent(new Event('input', { bubbles: true }));
  }
  el.setSelectionRange(edit.selStart, edit.selEnd);
}

export function TabTextarea() {
  const [text, setText] = useState(INITIAL);
  // Esc を押した直後だけ、Tab でフォーカスを移せるようにする
  const [tabMovesFocus, setTabMovesFocus] = useState(false);

  function handleKeyDown(e: KeyboardEvent<HTMLTextAreaElement>) {
    if (e.key === 'Escape') {
      setTabMovesFocus(true);
      return;
    }
    if (e.key !== 'Tab' || e.ctrlKey || e.altKey || e.metaKey || tabMovesFocus) {
      // Tab 以外のキーか、Esc の直後の Tab は、ブラウザに任せる
      setTabMovesFocus(false);
      return;
    }
    e.preventDefault(); // フォーカスを次の要素に移さない
    const el = e.currentTarget;
    const edit = computeIndent(el.value, el.selectionStart, el.selectionEnd, e.shiftKey);
    if (edit) applyEdit(el, edit);
  }

  return (
    <div>
      <label htmlFor="code">コード</label>
      <textarea
        id="code"
        rows={6}
        value={text}
        onChange={(e) => setText(e.target.value)}
        onKeyDown={handleKeyDown}
        onFocus={() => setTabMovesFocus(false)}
        aria-describedby="code-help"
        spellCheck={false}
      />
      <p id="code-help" className="help">
        {tabMovesFocus
          ? '次に Tab を押すと、次の項目へ移ります。'
          : 'Tab で字下げ、Shift+Tab で字下げを戻します。Esc を押してから Tab を押すと、次の項目へ移ります。'}
      </p>
    </div>
  );
}

Tab 1回目      値 "function meow() {\n  console.log(\"にゃー\");\n}"   | 選択 20〜20
Tab 2回目      値 "function meow() {\n    console.log(\"にゃー\");\n}" | 選択 22〜22
Shift+Tab      値 "function meow() {\n  console.log(\"にゃー\");\n}"   | 選択 20〜20
Ctrl+Z 1回目   値 "function meow() {\n    console.log(\"にゃー\");\n}" | 選択 18〜41
Ctrl+Z 2回目   値 "function meow() {\n  console.log(\"にゃー\");\n}"   | 選択 20〜20
Ctrl+Z 3回目   値 "function meow() {\nconsole.log(\"にゃー\");\n}"     | 選択 18〜18

全体を選んで Tab   値 "  function meow() {\n  console.log(\"にゃー\");\n  }" | 選択 2〜45
  input イベントの inputType: []
Ctrl+Z 1回目       値 "  function meow() {\n  console.log(\"にゃー\");\n  }" | 選択 2〜45

本文で Tab を3回             選択 45〜45 | フォーカス: 本文
Esc のあと Tab              選択 45〜45 | フォーカス: ボタン「保存」
ボタンから Shift+Tab で本文に戻る  選択 45〜45 | フォーカス: 本文
戻ってから Tab              選択 47〜47 | フォーカス: 本文
Esc、「a」と打ってから Tab     選択 50〜50 | フォーカス: 本文