Reactで、表の入力欄からMarkdownの表を作る方法

入力：a\|b
  | を \| にしただけ：| a\\|b | 次 |
    remark-gfm  [a\][b]
    markdown-it [a|b][次]
    marked      [a\][b]
    cmark-gfm   [a|b][次]

export type Align = 'none' | 'left' | 'center' | 'right';
export type Column = { id: number; title: string; align: Align };
// セルは列の id をキーにして持つ（列を消しても、ほかの列の値がずれない）
export type Row = { id: number; cells: Record<number, string> };

const DELIMITER: Record<Align, string> = {
  none: '---',
  left: ':---',
  center: ':---:',
  right: '---:',
};

// | の前に \ を足す。直前に \ が続いていたら、その \ も2つずつにする
export function escapeCell(text: string): string {
  return text.trim().replace(/(\\*)\|/g, (_, bs: string) => `${bs}${bs}\\|`);
}

export function toMarkdown(columns: Column[], rows: Row[]): string {
  const line = (cells: string[]) => `| ${cells.join(' | ')} |`;
  return [
    line(columns.map((c) => escapeCell(c.title))),
    line(columns.map((c) => DELIMITER[c.align])),
    ...rows.map((r) => line(columns.map((c) => escapeCell(r.cells[c.id] ?? '')))),
  ].join('\n');
}

import { useId, useRef, useState } from 'react';
import { toMarkdown, type Align, type Column, type Row } from './markdownTable';

const ALIGN_LABELS: Record<Align, string> = { none: '指定なし', left: '左', center: '中央', right: '右' };
const ALIGNS = Object.keys(ALIGN_LABELS) as Align[];

export function TableEditor() {
  const nextId = useRef(3);
  const [columns, setColumns] = useState<Column[]>([
    { id: 0, title: '', align: 'none' },
    { id: 1, title: '', align: 'none' },
  ]);
  const [rows, setRows] = useState<Row[]>([{ id: 2, cells: {} }]);
  const [copiedText, setCopiedText] = useState<string | null>(null);
  const outputId = useId();

  const markdown = toMarkdown(columns, rows);

  function updateColumn(id: number, patch: Partial<Column>) {
    setColumns(columns.map((c) => (c.id === id ? { ...c, ...patch } : c)));
  }
  function updateCell(rowId: number, colId: number, value: string) {
    setRows(rows.map((r) => (r.id === rowId ? { ...r, cells: { ...r.cells, [colId]: value } } : r)));
  }
  function addColumn() {
    setColumns([...columns, { id: nextId.current++, title: '', align: 'none' }]);
  }
  function removeColumn(id: number) {
    setColumns(columns.filter((c) => c.id !== id));
  }
  function addRow() {
    setRows([...rows, { id: nextId.current++, cells: {} }]);
  }
  function removeRow(id: number) {
    setRows(rows.filter((r) => r.id !== id));
  }
  async function copy() {
    await navigator.clipboard.writeText(markdown);
    setCopiedText(markdown);
  }

  return (
    <div className="table-editor">
      <table>
        <thead>
          <tr>
            {columns.map((c, i) => (
              <th key={c.id}>
                <input
                  aria-label={`${i + 1}列目の見出し`}
                  placeholder="見出し"
                  value={c.title}
                  onChange={(e) => updateColumn(c.id, { title: e.target.value })}
                />
                <select
                  aria-label={`${i + 1}列目の寄せ方`}
                  value={c.align}
                  onChange={(e) => updateColumn(c.id, { align: e.target.value as Align })}
                >
                  {ALIGNS.map((a) => (
                    <option key={a} value={a}>{ALIGN_LABELS[a]}</option>
                  ))}
                </select>
                <button
                  type="button"
                  aria-label={`${i + 1}列目を削除`}
                  disabled={columns.length === 1}
                  onClick={() => removeColumn(c.id)}
                >
                  ×
                </button>
              </th>
            ))}
            <th />
          </tr>
        </thead>
        <tbody>
          {rows.map((r, ri) => (
            <tr key={r.id}>
              {columns.map((c, ci) => (
                <td key={c.id}>
                  <input
                    aria-label={`${ri + 1}行目・${ci + 1}列目`}
                    value={r.cells[c.id] ?? ''}
                    onChange={(e) => updateCell(r.id, c.id, e.target.value)}
                  />
                </td>
              ))}
              <td>
                <button type="button" aria-label={`${ri + 1}行目を削除`} onClick={() => removeRow(r.id)}>
                  ×
                </button>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
      <p className="actions">
        <button type="button" onClick={addRow}>行を追加</button>
        <button type="button" onClick={addColumn}>列を追加</button>
      </p>
      <label htmlFor={outputId}>Markdown</label>
      <textarea id={outputId} readOnly rows={rows.length + 2} value={markdown} />
      <p className="actions">
        <button type="button" onClick={copy}>コピー</button>
        <span role="status">{copiedText === markdown ? 'コピーしました' : ''}</span>
      </p>
    </div>
  );
}

| 名前 | 値段 | メモ |
| --- | --- | --- |
| りんご | 120 | 赤\|青 |
| みかん | 80 |  |