Reactで、行番号付きのテキストエリアを作る方法

import { useEffect, useRef, useState, type CSSProperties, type UIEvent } from 'react';

type Props = {
  id: string;
  value: string;
  onChange: (value: string) => void;
  rows?: number;
};

// キャレットがある行の番号（1から数える）
function caretLine(el: HTMLTextAreaElement) {
  const pos = el.selectionDirection === 'backward' ? el.selectionStart : el.selectionEnd;
  return el.value.slice(0, pos).split('\n').length;
}

export function LineNumberTextarea({ id, value, onChange, rows = 8 }: Props) {
  const textareaRef = useRef<HTMLTextAreaElement>(null);
  const numbersRef = useRef<HTMLDivElement>(null);
  const [current, setCurrent] = useState(1);
  const count = value.split('\n').length;

  // キャレットが動くたびに、キャレットのある行を求め直す
  useEffect(() => {
    const el = textareaRef.current!;
    const update = () => setCurrent(caretLine(el));
    el.addEventListener('selectionchange', update);
    return () => el.removeEventListener('selectionchange', update);
  }, []);

  // textarea のスクロールに合わせて、行番号の列を上にずらす
  const handleScroll = (e: UIEvent<HTMLTextAreaElement>) => {
    const top = e.currentTarget.scrollTop;
    if (numbersRef.current) numbersRef.current.style.transform = `translateY(${-top}px)`;
  };

  return (
    <div className="ln-wrap" style={{ '--digits': String(count).length } as CSSProperties}>
      <div className="ln-gutter" aria-hidden="true">
        <div ref={numbersRef}>
          {Array.from({ length: count }, (_, i) => (
            <div key={i} className={i + 1 === current ? 'ln-current' : undefined}>
              {i + 1}
            </div>
          ))}
        </div>
      </div>
      <textarea
        ref={textareaRef}
        id={id}
        className="ln-input"
        value={value}
        rows={rows}
        spellCheck={false}
        onChange={(e) => onChange(e.target.value)}
        onScroll={handleScroll}
      />
    </div>
  );
}

- text: 設定ファイル
- textbox "設定ファイル": a = 1 b = 2
- button "クリア"

import { useState } from 'react';
import { LineNumberTextarea } from './LineNumberTextarea';

export function App() {
  const [code, setCode] = useState('');

  return (
    <form onSubmit={(e) => e.preventDefault()}>
      <label htmlFor="code">設定ファイル</label>
      <LineNumberTextarea id="code" value={code} onChange={setCode} />
      <button type="button" onClick={() => setCode('')}>
        クリア
      </button>
    </form>
  );
}

.ln-wrap {
  display: flex;
  border: 1px solid #9aa5ab;
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
}
.ln-wrap:focus-within {
  outline: 2px solid #00c8e8;
  outline-offset: 1px;
}

/* 行の高さを決める指定は、行番号の列と textarea で必ずそろえる */
.ln-gutter,
.ln-input {
  margin: 0;
  padding-block: 8px;
  font: 14px/1.6 "Noto Sans Mono CJK JP", monospace;
}

.ln-gutter {
  flex: none;
  contain: size; /* 行番号の数で高さが伸びないようにし、高さは textarea に合わせる */
  overflow: hidden;
  width: calc(var(--digits) * 1ch);
  min-width: 2ch;
  padding-inline: 8px;
  text-align: right;
  color: #9aa5ab;
  background: #eefafd;
  user-select: none;
}
.ln-current {
  color: #067a98;
  font-weight: bold;
}

.ln-input {
  flex: 1;
  min-width: 0;
  padding-inline: 8px;
  border: 0;
  outline: none;
  resize: vertical;
  white-space: pre;
  overflow: auto;
  color: #1f2a30;
}

[scrolltop・long] textarea: scrollTop=508 scrollHeight=688 clientHeight=180
[scrolltop・long] 行番号の列: scrollTop=493 scrollHeight=688 clientHeight=195 transform=なし
[scrolltop・long] 行番号と行の上端の差（最大）: 15px、列のいちばん下に見える行番号: 30

[final・long] textarea: scrollTop=508 scrollHeight=688 clientHeight=180
[final・long] 行番号の列: scrollTop=0 scrollHeight=688 clientHeight=195 transform=translateY(-508px)
[final・long] 行番号と行の上端の差（最大）: 0.3px、列のいちばん下に見える行番号: 30

--- キャレットのある行（onselect）---
Shift+↑ を2回（後ろから前へ選択）: 1
選択範囲の中の2行目をクリック: 1 （キャレットは2行目）

--- キャレットのある行（final）---
Shift+↑ を2回（後ろから前へ選択）: 1
選択範囲の中の2行目をクリック: 2 （キャレットは2行目）