Reactで、入力した文章を原稿用紙のマス目に並べる方法

// 文章を、原稿用紙のマス目に入れる形に分ける関数

export type Cell = { ch: string; hang?: string };
export type Line = Cell[];
export type Sheet = Line[];

// 行の頭に置かず、前の行の最後のマスに入れる文字
const HANG = new Set(['、', '。', '，', '．', '」', '』', '）']);

const segmenter = new Intl.Segmenter('ja', { granularity: 'grapheme' });

// 見た目の1文字（書記素）ごとに分ける
export function splitGraphemes(text: string): string[] {
  return Array.from(segmenter.segment(text), (s) => s.segment);
}

// 1行 cols マスで、行に分ける。改行のあとは次の行から書く
export function toLines(text: string, cols: number): Line[] {
  const lines: Line[] = [];
  for (const paragraph of text.replace(/\r\n?/g, '\n').split('\n')) {
    let line: Line = [];
    for (const ch of splitGraphemes(paragraph)) {
      if (line.length === cols) {
        const last = line[cols - 1];
        // 行の頭に来る句読点と閉じかっこは、前の行の最後のマスに入れる（「。」」のように2文字まで）
        const hang = last.hang ?? '';
        if (HANG.has(ch) && hang.length < 2) {
          last.hang = hang + ch;
          continue;
        }
        lines.push(line);
        line = [];
      }
      line.push({ ch });
    }
    lines.push(line);
  }
  return lines;
}

// rows 行ごとに、1枚の原稿用紙にまとめる
export function toSheets(text: string, cols: number, rows: number): Sheet[] {
  const lines = toLines(text, cols);
  const sheets: Sheet[] = [];
  for (let i = 0; i < lines.length; i += rows) {
    sheets.push(lines.slice(i, i + rows));
  }
  return sheets;
}

import { memo } from 'react';
import { toSheets } from './genko';

type Props = {
  text: string;
  cols?: number;
  rows?: number;
  vertical?: boolean;
};

// text などが変わらないときは、描き直さない
export const GenkoPaper = memo(function GenkoPaper({ text, cols = 20, rows = 20, vertical = true }: Props) {
  const sheets = toSheets(text, cols, rows);

  return (
    <div className={vertical ? 'genko vertical' : 'genko'}>
      {sheets.map((sheet, i) => (
        <div className="sheet" key={i}>
          {Array.from({ length: rows }, (_, r) => (
            <div className="line" key={r}>
              {Array.from({ length: cols }, (_, c) => {
                const cell = sheet[r]?.[c];
                return (
                  <span className="cell" key={c}>
                    {cell?.ch}
                    {cell?.hang && <span className="hang">{cell.hang}</span>}
                  </span>
                );
              })}
            </div>
          ))}
        </div>
      ))}
    </div>
  );
});

.genko {
  --cell: 26px;
  --rule: #00c8e8;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  /* 画面より広いときは、この要素の中でスクロールする */
  max-width: 100%;
  overflow-x: auto;
}
.genko.vertical {
  writing-mode: vertical-rl;
}
.sheet {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
  /* 行の外にはみ出す句読点のぶん、行の終わりの側をあけておく */
  padding-inline-end: calc(var(--cell) * 2);
  border: 1px solid var(--rule);
  background: #fff;
}
.line {
  display: flex;
  border: 1px solid var(--rule);
}
.cell {
  position: relative;
  display: grid;
  place-items: center;
  inline-size: var(--cell);
  block-size: var(--cell);
  font-size: calc(var(--cell) * 0.72);
  line-height: 1;
  /* 縦書きで、半角の英数字を横に倒さず立てる */
  text-orientation: upright;
}
.cell + .cell {
  border-inline-start: 1px solid var(--rule);
}
.hang {
  position: absolute;
  inset-inline-start: 100%;
  inset-block-start: 0;
  block-size: var(--cell);
  line-height: var(--cell);
  white-space: nowrap;
}

import { useDeferredValue, useId, useState } from 'react';
import { GenkoPaper } from './GenkoPaper';
import { toSheets } from './genko';

export function GenkoEditor({ initial = '' }: { initial?: string }) {
  const id = useId();
  const [text, setText] = useState(initial);
  const [vertical, setVertical] = useState(true);
  // マス目は、入力欄より後回しにして描き直す
  const deferredText = useDeferredValue(text);
  const count = toSheets(deferredText, 20, 20).length;

  return (
    <div className="genko-editor">
      <label htmlFor={`${id}-text`}>文章</label>
      <textarea id={`${id}-text`} rows={5} value={text} onChange={(e) => setText(e.target.value)} />
      <label>
        <input type="checkbox" checked={vertical} onChange={(e) => setVertical(e.target.checked)} />
        縦書き
      </label>
      <p aria-live="polite">400字詰めで{count}枚</p>
      <div className={text !== deferredText ? 'stale' : undefined}>
        <GenkoPaper text={deferredText} vertical={vertical} />
      </div>
    </div>
  );
}

.genko-editor {
  display: grid;
  /* 列の幅を、中のマス目の幅に合わせて広げない */
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
}
.genko-editor .stale {
  opacity: 0.5;
}
.genko-editor textarea {
  font: inherit;
}