ReactでMarkdownエディタのスクロールを同期する方法

const ratio = src.scrollTop / (src.scrollHeight - src.clientHeight);
dst.scrollTop = ratio * (dst.scrollHeight - dst.clientHeight);

// プレビューのいちばん外側のブロックに、Markdown の何行目から作られたかを data-line で持たせる
function rehypeSourceLine() {
  return (tree: Root) => {
    for (const node of tree.children) {
      if (node.type === 'element' && node.position) {
        node.properties.dataLine = node.position.start.line;
      }
    }
  };
}
const rehypePlugins = [rehypeSourceLine];

/* 入力欄と、行の位置を測るための写し。文字の並び方を決める指定はそろえる */
.md-input,
.md-mirror {
  box-sizing: border-box;
  margin: 0;
  padding: 12px;
  font: 15px/1.7 "Noto Sans CJK JP", sans-serif;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

// 入力欄とプレビューで、同じ場所を指すスクロール位置の組
export type Anchor = { editor: number; preview: number };
export type Pane = keyof Anchor;

// 組を、両方の位置が増えていく順になるものだけ残し、先頭（0, 0）と末尾（両方の最大値）を足す
export function buildAnchors(pairs: Anchor[], editorMax: number, previewMax: number): Anchor[] {
  const anchors: Anchor[] = [{ editor: 0, preview: 0 }];
  for (const p of pairs) {
    const last = anchors[anchors.length - 1];
    if (p.editor > last.editor && p.preview > last.preview && p.editor < editorMax && p.preview < previewMax) {
      anchors.push(p);
    }
  }
  anchors.push({ editor: Math.max(editorMax, 0), preview: Math.max(previewMax, 0) });
  return anchors;
}

// from 側のスクロール位置 value を、前後の組のあいだで比例配分して、to 側の位置に直す
export function mapScroll(anchors: Anchor[], from: Pane, to: Pane, value: number): number {
  for (let i = 1; i < anchors.length; i++) {
    const a = anchors[i - 1];
    const b = anchors[i];
    if (value <= b[from] || i === anchors.length - 1) {
      const span = b[from] - a[from];
      const t = span > 0 ? Math.min(Math.max((value - a[from]) / span, 0), 1) : 0;
      return a[to] + (b[to] - a[to]) * t;
    }
  }
  return 0;
}

import { useCallback, useEffect, useLayoutEffect, useRef } from 'react';
import Markdown from 'react-markdown';
import remarkGfm from 'remark-gfm';
import type { Root } from 'hast';
import { buildAnchors, mapScroll, type Anchor, type Pane } from './scrollMap';

// プレビューのいちばん外側のブロックに、Markdown の何行目から作られたかを data-line で持たせる
function rehypeSourceLine() {
  return (tree: Root) => {
    for (const node of tree.children) {
      if (node.type === 'element' && node.position) {
        node.properties.dataLine = node.position.start.line;
      }
    }
  };
}
const remarkPlugins = [remarkGfm];
const rehypePlugins = [rehypeSourceLine];

type Props = {
  value: string;
  onChange: (value: string) => void;
};

export function MarkdownEditor({ value, onChange }: Props) {
  const editorRef = useRef<HTMLTextAreaElement>(null);
  const mirrorRef = useRef<HTMLDivElement>(null);
  const previewRef = useRef<HTMLDivElement>(null);
  const bodyRef = useRef<HTMLDivElement>(null);
  const anchorsRef = useRef<Anchor[]>([]);
  // 自分でスクロールさせた要素と、そのときの scrollTop
  const expectedRef = useRef<Record<Pane, number | null>>({ editor: null, preview: null });

  // 見出しや段落ごとに、入力欄での位置とプレビューでの位置を測って組にする
  const measure = useCallback(() => {
    const editor = editorRef.current!;
    const mirror = mirrorRef.current!;
    const preview = previewRef.current!;
    mirror.style.width = `${editor.clientWidth}px`;
    const lines = mirror.children as HTMLCollectionOf<HTMLElement>;
    const pairs: Anchor[] = [];
    for (const el of preview.querySelectorAll<HTMLElement>('[data-line]')) {
      const line = lines[Number(el.dataset.line) - 1];
      if (line) pairs.push({ editor: line.offsetTop, preview: el.offsetTop });
    }
    anchorsRef.current = buildAnchors(
      pairs,
      editor.scrollHeight - editor.clientHeight,
      preview.scrollHeight - preview.clientHeight,
    );
  }, []);

  // 文字を入力したら測り直す
  useLayoutEffect(measure, [value, measure]);

  // 画像の読み込みや幅の変化で高さが変わったときも測り直す
  useEffect(() => {
    const observer = new ResizeObserver(measure);
    observer.observe(editorRef.current!);
    observer.observe(bodyRef.current!);
    return () => observer.disconnect();
  }, [measure]);

  const sync = (from: Pane) => {
    const to: Pane = from === 'editor' ? 'preview' : 'editor';
    const src = from === 'editor' ? editorRef.current! : previewRef.current!;
    const dst = to === 'editor' ? editorRef.current! : previewRef.current!;
    // こちらから動かしたスクロールなら、相手へ送り返さない
    const expected = expectedRef.current[from];
    expectedRef.current[from] = null;
    if (expected !== null && Math.abs(src.scrollTop - expected) < 1) return;

    dst.scrollTop = mapScroll(anchorsRef.current, from, to, src.scrollTop);
    expectedRef.current[to] = dst.scrollTop;
  };

  return (
    <div className="md-editor">
      <div className="md-input-wrap">
        <textarea
          ref={editorRef}
          className="md-input"
          aria-label="Markdown"
          value={value}
          spellCheck={false}
          onChange={(e) => onChange(e.target.value)}
          onScroll={() => sync('editor')}
        />
        <div ref={mirrorRef} className="md-mirror" aria-hidden="true">
          {value.split('\n').map((line, i) => (
            <div key={i}>{line === '' ? ' ' : line}</div>
          ))}
        </div>
      </div>
      <div ref={previewRef} className="md-preview" onScroll={() => sync('preview')}>
        <div ref={bodyRef}>
          <Markdown remarkPlugins={remarkPlugins} rehypePlugins={rehypePlugins}>{value}</Markdown>
        </div>
      </div>
    </div>
  );
}

.md-editor {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  height: 420px;
}

.md-input-wrap {
  position: relative;
  overflow: hidden;
  min-width: 0;
}
.md-input {
  width: 100%;
  height: 100%;
  border: 1px solid #9aa5ab;
  border-radius: 6px;
  resize: none;
  overflow-y: auto;
  color: #1f2a30;
}
.md-mirror {
  position: absolute;
  top: 0;
  left: 0;
  border: 0;
  visibility: hidden;
  pointer-events: none;
}

.md-preview {
  position: relative; /* 中のブロックの offsetTop を、この要素から測る */
  min-width: 0;
  overflow-y: auto;
  padding: 0 16px;
  border: 1px solid #9aa5ab;
  border-radius: 6px;
  font: 15px/1.7 "Noto Sans CJK JP", sans-serif;
  color: #1f2a30;
}
.md-preview img {
  max-width: 100%;
  height: auto;
}
.md-preview pre {
  overflow-x: auto;
  padding: 8px;
  background: #eefafd;
  font: 13px/1.5 "Noto Sans Mono CJK JP", monospace;
}
.md-preview table {
  border-collapse: collapse;
}
.md-preview th,
.md-preview td {
  border: 1px solid #9aa5ab;
  padding: 2px 8px;
}

import { useState } from 'react';
import { MarkdownEditor } from './MarkdownEditor';
import './MarkdownEditor.css';
import { sample } from './sample';

export function App() {
  const [text, setText] = useState(sample);
  return <MarkdownEditor value={text} onChange={setText} />;
}

[naive] 入力欄で scrollTo({ top: 900, behavior: 'smooth' }): scroll イベント 4回 / 入力欄の最後の scrollTop=2 プレビュー=3
[naive] 順番: 入2 プ3 入2 入2

[final] 入力欄で scrollTo({ top: 900, behavior: 'smooth' }): scroll イベント 58回 / 入力欄の最後の scrollTop=900 プレビュー=1149

[noobserver] 入力欄→プレビュー ## 4. 記録を集計するスクリプト: 入力欄 scrollTop=1007 プレビュー scrollTop=1035 見出しと上端の差=330px
[noobserver] 入力欄をいちばん下まで: 入力欄 scrollTop=1825 プレビュー scrollTop=1691（最大 2020）