@growgroup/visual-editor 0.4.1 → 0.7.0

package/src/editor/collab/binding.ts

@@ -0,0 +1,269 @@
+/**
+ * ページの部屋の本文(Y.Text "html")と、編集中の紙面をつなぐ(取り決め §4)。
+ *
+ * - 種まき: 部屋と同期して本文が空なら、読み込み直後の姿を FNV-1a の clientID で 1 回だけ入れる
+ *   (同じ本文なら何人が同時に撒いても構造体の ID が同じになり、Yjs が重複を捨てる)
+ * - 自分の変更: 履歴の present が変わる・打鍵する(input)たびに 120ms 間引いて、
+ *   紙面(getCleanHtml → encode)と shadow の差分を 1 つの transaction で送る。同じなら送らない
+ * - 他人の変更: idiomorph で紙面に当て、履歴は段を作らずに追従させる。
+ *   打鍵中の要素に掛かる分は blur まで保留する。ドラッグ中は離すまで待つ
+ * - 取り消し: Y.UndoManager(自分の origin だけを追う)。結果は他人の変更と同じ経路で紙面に当てる
+ *
+ * shadow と差分の合わせ方は merge.ts を参照
+ */
+
+import * as Y from 'yjs';
+import { getCleanHtml } from '../utils/html-utils';
+import { refreshSelectionOverlay } from '../utils/dom-utils';
+import { fnv1a32 } from './color';
+import { morphArtboard } from './morph';
+import { replacementsOf, transformReplacements } from './merge';
+import type { Room } from './connection';
+
+/** 自分の変更を送る間隔(ms)。打鍵中も相手に 1 秒以内に見えるように */
+const SEND_THROTTLE_MS = 120;
+/** 他人の変更を当てるまでの待ち(ms)。続けて届いた更新を 1 回にまとめる */
+const APPLY_DELAY_MS = 16;
+/** 取り消しの 1 段にまとめる時間(ms) */
+const CAPTURE_TIMEOUT_MS = 500;
+/** ポインタを押している間は当てない。離した合図を取りこぼしてもこれ以上は待たない(ms) */
+const POINTER_HOLD_MAX_MS = 15000;
+
+export type BindingState = { pending: boolean; canUndo: boolean; canRedo: boolean; localPending: boolean };
+
+export type PageBindingOptions = {
+  room: Room;
+  doc: Document;
+  /** 読み込み直後の紙面の姿(encode 済み)。種まきに使う */
+  initialShared: string;
+  encode: (cleanHtml: string) => string;
+  decode: (shared: string) => string;
+  /** 他人の変更を当てた直後の #artboard.innerHTML(履歴の present を段を作らずに追従させる) */
+  onApplied: (artboardHtml: string) => void;
+  /** 自分の変更を送った(案件の部屋の pages の rev を進める) */
+  onLocalSent: () => void;
+  onState: (state: BindingState) => void;
+};
+
+export class PageBinding {
+  private readonly opts: PageBindingOptions;
+  private readonly origin = { collab: 'local' };
+  private readonly text: Y.Text;
+  private readonly undoManager: Y.UndoManager;
+  /** 最後に Y.Text と揃えたときの紙面の姿(encode 済み) */
+  private shadow: string;
+  /** 部屋と一度でも同期した(それまでは送らない・当てない) */
+  private synced = false;
+  private destroyed = false;
+  private sendTimer: ReturnType<typeof setTimeout> | null = null;
+  private applyTimer: ReturnType<typeof setTimeout> | null = null;
+  private pointerDownAt: number | null = null;
+  private applyAfterPointer = false;
+  private state: BindingState = { pending: false, canUndo: false, canRedo: false, localPending: false };
+  private readonly cleanups: (() => void)[] = [];
+
+  constructor(opts: PageBindingOptions) {
+    this.opts = opts;
+    this.text = opts.room.doc.getText('html');
+    this.shadow = opts.initialShared;
+    this.undoManager = new Y.UndoManager(this.text, {
+      trackedOrigins: new Set([this.origin]),
+      captureTimeout: CAPTURE_TIMEOUT_MS,
+    });
+    const onStack = () =>
+      this.setState({ canUndo: this.undoManager.undoStack.length > 0, canRedo: this.undoManager.redoStack.length > 0 });
+    this.undoManager.on('stack-item-added', onStack);
+    this.undoManager.on('stack-item-popped', onStack);
+    this.undoManager.on('stack-cleared', onStack);
+
+    this.text.observe(this.onTextChange);
+
+    const provider = opts.room.provider;
+    const onSynced = () => this.onSynced();
+    provider.on('synced', onSynced);
+    this.cleanups.push(() => provider.off('synced', onSynced));
+
+    const doc = opts.doc;
+    const onInput = () => this.scheduleSend();
+    // blur: 打鍵の分を送り、保留していた他人の変更を当てる(contenteditable が外れてから)
+    const onFocusOut = () => {
+      this.scheduleSend();
+      setTimeout(() => this.scheduleApply(), 30);
+    };
+    const onPointerDown = () => {
+      this.pointerDownAt = Date.now();
+    };
+    const onPointerUp = () => {
+      this.pointerDownAt = null;
+      if (this.applyAfterPointer) {
+        this.applyAfterPointer = false;
+        this.scheduleApply();
+      }
+    };
+    doc.addEventListener('input', onInput, true);
+    doc.addEventListener('focusout', onFocusOut, true);
+    doc.addEventListener('pointerdown', onPointerDown, true);
+    doc.addEventListener('pointerup', onPointerUp, true);
+    window.addEventListener('pointerup', onPointerUp, true);
+    this.cleanups.push(() => {
+      doc.removeEventListener('input', onInput, true);
+      doc.removeEventListener('focusout', onFocusOut, true);
+      doc.removeEventListener('pointerdown', onPointerDown, true);
+      doc.removeEventListener('pointerup', onPointerUp, true);
+      window.removeEventListener('pointerup', onPointerUp, true);
+    });
+
+    if (provider.synced) this.onSynced();
+  }
+
+  /** 自分の変更があったかもしれない(履歴の present が変わった・打鍵した)。間引いて送る */
+  scheduleSend(): void {
+    if (this.destroyed) return;
+    this.setState({ localPending: true });
+    if (this.sendTimer) return;
+    this.sendTimer = setTimeout(() => {
+      this.sendTimer = null;
+      this.flushLocal();
+    }, SEND_THROTTLE_MS);
+  }
+
+  /** まだ送っていない変更を今すぐ送る(ページ切替・保存ボタン・離脱の前) */
+  flush(): void {
+    if (this.sendTimer) {
+      clearTimeout(this.sendTimer);
+      this.sendTimer = null;
+    }
+    this.flushLocal();
+  }
+
+  undo(): void {
+    if (this.destroyed) return;
+    this.flush();
+    this.undoManager.undo();
+  }
+
+  redo(): void {
+    if (this.destroyed) return;
+    this.flush();
+    this.undoManager.redo();
+  }
+
+  /** 部屋の本文(decode 済み)。空なら null */
+  sharedHtml(): string | null {
+    const text = this.text.toString();
+    return text ? this.opts.decode(text) : null;
+  }
+
+  destroy(): void {
+    if (this.destroyed) return;
+    this.flush();
+    this.destroyed = true;
+    if (this.sendTimer) clearTimeout(this.sendTimer);
+    if (this.applyTimer) clearTimeout(this.applyTimer);
+    this.text.unobserve(this.onTextChange);
+    this.undoManager.destroy();
+    this.cleanups.forEach((fn) => fn());
+  }
+
+  // ------------------------------------------------------------
+
+  private readonly onTextChange = (_event: Y.YTextEvent, tx: Y.Transaction) => {
+    // 自分が送った変更は紙面に既にある。それ以外(他人・種まき・取り消し)は紙面へ当てる
+    if (tx.origin === this.origin) return;
+    this.scheduleApply();
+  };
+
+  private onSynced(): void {
+    if (this.destroyed || !this.opts.room.provider.synced) return;
+    if (!this.synced && this.text.length === 0 && this.opts.initialShared) this.seed(this.opts.initialShared);
+    this.synced = true;
+    this.flushLocal();
+    this.applyRemote();
+  }
+
+  /** 空の部屋に最初の本文を入れる(取り決め §4 の手順どおり) */
+  private seed(text: string): void {
+    const tmp = new Y.Doc();
+    tmp.clientID = fnv1a32(text) || 1;
+    tmp.getText('html').insert(0, text);
+    Y.applyUpdate(this.opts.room.doc, Y.encodeStateAsUpdate(tmp), 'seed');
+    tmp.destroy();
+  }
+
+  private flushLocal(): void {
+    if (this.destroyed) return;
+    // 部屋と揃う前は送らない(同期したときに、ここまでの変更をまとめて送る)
+    if (!this.synced) return;
+    const doc = this.opts.doc;
+    if (!doc.defaultView || !doc.getElementById('artboard')) {
+      this.setState({ localPending: false });
+      return;
+    }
+    const next = this.opts.encode(getCleanHtml(doc));
+    this.setState({ localPending: false });
+    if (next === this.shadow) return;
+    const current = this.text.toString();
+    const ops = transformReplacements(
+      replacementsOf(this.shadow, next),
+      current === this.shadow ? [] : replacementsOf(this.shadow, current),
+    );
+    this.shadow = next;
+    if (ops.length === 0) return;
+    this.opts.room.doc.transact(() => {
+      for (const op of ops) {
+        if (op.deleteCount > 0) this.text.delete(op.at, op.deleteCount);
+        if (op.insert) this.text.insert(op.at, op.insert);
+      }
+    }, this.origin);
+    this.opts.onLocalSent();
+  }
+
+  private scheduleApply(): void {
+    if (this.destroyed || this.applyTimer) return;
+    this.applyTimer = setTimeout(() => {
+      this.applyTimer = null;
+      this.applyRemote();
+    }, APPLY_DELAY_MS);
+  }
+
+  private applyRemote(): void {
+    if (this.destroyed || !this.synced) return;
+    // 掴んで動かしている最中に書き換えると、掴んでいる要素が入れ替わる。離してから当てる
+    if (this.pointerDownAt != null && Date.now() - this.pointerDownAt < POINTER_HOLD_MAX_MS) {
+      this.applyAfterPointer = true;
+      return;
+    }
+    const doc = this.opts.doc;
+    const artboard = doc.getElementById('artboard');
+    if (!doc.defaultView || !artboard) return;
+    // 自分のまだ送っていない変更を先に送る(当て込みで紙面から消さないため)
+    this.flush();
+    const shared = this.text.toString();
+    if (shared === this.shadow) {
+      this.setState({ pending: false });
+      return;
+    }
+    const hold = artboard.querySelector<HTMLElement>('[contenteditable="true"]');
+    const { heldChanged } = morphArtboard(artboard, this.opts.decode(shared), hold);
+    this.shadow = this.opts.encode(getCleanHtml(doc));
+    try {
+      refreshSelectionOverlay(doc);
+    } catch {
+      /* 選択枠が無い */
+    }
+    this.opts.onApplied(artboard.innerHTML);
+    this.setState({ pending: !!hold && heldChanged });
+  }
+
+  private setState(patch: Partial<BindingState>): void {
+    const next = { ...this.state, ...patch };
+    if (
+      next.pending === this.state.pending &&
+      next.canUndo === this.state.canUndo &&
+      next.canRedo === this.state.canRedo &&
+      next.localPending === this.state.localPending
+    ) return;
+    this.state = next;
+    this.opts.onState(next);
+  }
+}

package/src/editor/collab/color.ts

@@ -0,0 +1,28 @@
+/**
+ * 共同編集の小道具(依存なし)。種まきの clientID と参加者の色。
+ */
+
+/** FNV-1a 32bit。UTF-8 のバイト列に掛ける(取り決め §4 の種まきと同じ式) */
+export function fnv1a32(str: string): number {
+  const bytes = new TextEncoder().encode(str);
+  let h = 0x811c9dc5;
+  for (const b of bytes) {
+    h ^= b;
+    h = Math.imul(h, 0x01000193);
+  }
+  return h >>> 0;
+}
+
+/** 参加者の色。白い文字を載せても読める濃さの 8 色 */
+export const COLLAB_COLORS = ['#E5484D', '#E0661B', '#A77B00', '#2F9E5B', '#0E8F8A', '#1F7AE0', '#8B5CF6', '#D6409F'] as const;
+
+/** 本人が color を渡していなければ id の hash で決める(同じ人はどの画面でも同じ色) */
+export function colorFor(id: string, preferred?: string): string {
+  if (preferred) return preferred;
+  return COLLAB_COLORS[fnv1a32(id) % COLLAB_COLORS.length];
+}
+
+/** アバターの文字(名前の頭 1 文字) */
+export function initialOf(name: string): string {
+  return (name.trim() || '?').slice(0, 1).toUpperCase();
+}

package/src/editor/collab/connection.ts

@@ -0,0 +1,110 @@
+/**
+ * Hocuspocus への接続(1 タブ 1 本の WebSocket に部屋を相乗りさせる)。
+ *
+ * - WebSocket は URL ごとに 1 本(HocuspocusProviderWebsocket)。部屋(HocuspocusProvider)はそこへ attach する。
+ *   v3 は websocketProvider を共有すると attach() を呼ぶまで繋がらない(取り決め §2 の実測)
+ * - 部屋を手放すときは、まず自分の居場所(awareness)を消し、数秒の猶予のあと detach する。
+ *   猶予の間に同じ部屋へ戻れば(ページを行き来した・1 ページ表示でエディタが作り直された)繋ぎ直さない
+ * - WebSocket も最後の部屋が抜けてから猶予を置いて閉じる
+ */
+
+import { HocuspocusProvider, HocuspocusProviderWebsocket } from '@hocuspocus/provider';
+import * as Y from 'yjs';
+
+/** WebSocket を閉じるまでの猶予(ms) */
+const SOCKET_GRACE_MS = 5000;
+/** 部屋を detach するまでの猶予(ms) */
+export const ROOM_GRACE_MS = 4000;
+
+type SocketEntry = { socket: HocuspocusProviderWebsocket; refs: number; timer: ReturnType<typeof setTimeout> | null };
+const sockets = new Map<string, SocketEntry>();
+
+export function acquireSocket(url: string): HocuspocusProviderWebsocket {
+  let entry = sockets.get(url);
+  if (!entry) {
+    entry = { socket: new HocuspocusProviderWebsocket({ url }), refs: 0, timer: null };
+    sockets.set(url, entry);
+  }
+  if (entry.timer) {
+    clearTimeout(entry.timer);
+    entry.timer = null;
+  }
+  entry.refs += 1;
+  return entry.socket;
+}
+
+export function releaseSocket(url: string): void {
+  const entry = sockets.get(url);
+  if (!entry) return;
+  entry.refs = Math.max(0, entry.refs - 1);
+  if (entry.refs > 0 || entry.timer) return;
+  entry.timer = setTimeout(() => {
+    entry.timer = null;
+    if (entry.refs > 0) return;
+    sockets.delete(url);
+    entry.socket.destroy();
+  }, SOCKET_GRACE_MS);
+}
+
+/** いま張っている WebSocket(検証で切断・再接続を起こすのに使う) */
+export function socketFor(url: string): HocuspocusProviderWebsocket | null {
+  return sockets.get(url)?.socket ?? null;
+}
+
+export type Room = {
+  key: string;
+  url: string;
+  name: string;
+  doc: Y.Doc;
+  provider: HocuspocusProvider;
+  refs: number;
+  timer: ReturnType<typeof setTimeout> | null;
+};
+const rooms = new Map<string, Room>();
+
+export function acquireRoom(url: string, name: string, token?: () => Promise<string | undefined>): Room {
+  const key = `${url}\n${name}`;
+  const existing = rooms.get(key);
+  if (existing) {
+    if (existing.timer) {
+      clearTimeout(existing.timer);
+      existing.timer = null;
+    }
+    existing.refs += 1;
+    return existing;
+  }
+  const socket = acquireSocket(url);
+  const doc = new Y.Doc();
+  const provider = new HocuspocusProvider({
+    websocketProvider: socket,
+    name,
+    document: doc,
+    // 本番の wf/ の部屋は token 無し(空文字)で通る。渡されていればそれを使う
+    token: token ? async () => (await token()) ?? '' : '',
+  });
+  provider.attach();
+  const room: Room = { key, url, name, doc, provider, refs: 1, timer: null };
+  rooms.set(key, room);
+  return room;
+}
+
+/** 部屋を手放す。居場所はすぐ消し、接続は猶予のあと切る */
+export function releaseRoom(room: Room, graceMs = ROOM_GRACE_MS): void {
+  room.refs = Math.max(0, room.refs - 1);
+  if (room.refs > 0) return;
+  room.provider.awareness?.setLocalState(null);
+  if (room.timer) clearTimeout(room.timer);
+  room.timer = setTimeout(() => {
+    room.timer = null;
+    if (room.refs > 0) return;
+    rooms.delete(room.key);
+    room.provider.destroy();
+    room.doc.destroy();
+    releaseSocket(room.url);
+  }, graceMs);
+}
+
+/** 既に持っている部屋(猶予中も含む)。無ければ null */
+export function peekRoom(url: string, name: string): Room | null {
+  return rooms.get(`${url}\n${name}`) ?? null;
+}

package/src/editor/collab/layer.ts

@@ -0,0 +1,168 @@
+'use client';
+
+/**
+ * 紙面の中に、他人の選択枠(名前札)とカーソルを描く(.gg-collab-layer)。
+ * コメントのピン(.gg-comment-layer)と同じ作り: #artboard の中の表示専用の層で、座標は紙面の px。
+ * 線の太さ・名前札の大きさは「内側の倍率 × 外側のキャンバス倍率」で割って画面上で一定に保つ。
+ * 保存 HTML(getCleanHtml)・履歴・共有する本文には入らない
+ */
+
+import { useEffect } from 'react';
+import { findAnchored } from '../components/ppt/PptComments';
+import { useCanvasViewStateOptional } from '../contexts/MultiPageCanvasContext';
+import { collabStore } from './store';
+
+/** 要素の移動・編集にゆるく追従する間隔(ms) */
+const RENDER_INTERVAL_MS = 400;
+
+const CURSOR_SVG =
+  '<svg viewBox="0 0 16 16" width="16" height="16" style="display:block;overflow:visible">' +
+  '<path d="M1 1 L1 13.5 L4.6 10.1 L7.1 15.2 L9.4 14.1 L6.9 9.1 L11.8 9.1 Z" stroke="#fff" stroke-width="1.2" stroke-linejoin="round"/></svg>';
+
+/** 同じ値の再代入をしない(無駄な再計算を起こさない) */
+function applyStyles(el: HTMLElement, styles: Record<string, string>) {
+  const style = el.style as unknown as Record<string, string>;
+  for (const [key, value] of Object.entries(styles)) {
+    if (style[key] !== value) style[key] = value;
+  }
+}
+
+export function useCollabLayer(doc: Document | null, enabled: boolean): void {
+  const outerZoom = useCanvasViewStateOptional()?.canvasZoom ?? 1;
+
+  useEffect(() => {
+    if (!enabled || !doc) return;
+    let alive = true;
+
+    const render = () => {
+      if (!alive || !doc.defaultView) return;
+      const artboard = doc.getElementById('artboard');
+      if (!artboard) return;
+      const peers = collabStore.get().pagePeers;
+      let layer = artboard.querySelector<HTMLElement>(':scope > .gg-collab-layer');
+      if (!layer) {
+        if (peers.length === 0) return;
+        layer = doc.createElement('div');
+        layer.className = 'gg-collab-layer';
+        layer.setAttribute('aria-hidden', 'true');
+        layer.style.cssText = 'position:absolute;inset:0;pointer-events:none;z-index:9001;overflow:visible;';
+        artboard.appendChild(layer);
+      }
+      const root = artboard.getBoundingClientRect();
+      const inner = root.width / (artboard.offsetWidth || 1) || 1;
+      const scale = inner * outerZoom || 1;
+      const wanted = new Set<string>();
+      const ensure = (key: string, build: () => HTMLElement): HTMLElement => {
+        let el = layer!.querySelector<HTMLElement>(`:scope > [data-collab-key="${CSS.escape(key)}"]`);
+        if (!el) {
+          el = build();
+          el.setAttribute('data-collab-key', key);
+          layer!.appendChild(el);
+        }
+        wanted.add(key);
+        return el;
+      };
+      const nameTag = (label: string, color: string): HTMLElement => {
+        const tag = doc.createElement('span');
+        tag.setAttribute('data-collab-name', '');
+        tag.textContent = label;
+        tag.style.background = color;
+        return tag;
+      };
+
+      for (const peer of peers) {
+        const anchors = [...peer.selection];
+        if (peer.editing && !anchors.includes(peer.editing)) anchors.push(peer.editing);
+        anchors.forEach((anchor, index) => {
+          const target = findAnchored(artboard, anchor);
+          if (!target) return;
+          const r = target.getBoundingClientRect();
+          const editing = anchor === peer.editing;
+          const box = ensure(`sel:${peer.clientId}:${index}`, () => {
+            const el = doc.createElement('div');
+            el.setAttribute('data-collab-selection', String(peer.clientId));
+            el.appendChild(nameTag('', peer.user.color));
+            return el;
+          });
+          box.setAttribute('data-collab-user', peer.user.id);
+          box.toggleAttribute('data-collab-editing', editing);
+          applyStyles(box, {
+            position: 'absolute',
+            left: `${(r.left - root.left) / inner}px`,
+            top: `${(r.top - root.top) / inner}px`,
+            width: `${r.width / inner}px`,
+            height: `${r.height / inner}px`,
+            boxSizing: 'border-box',
+            border: `${2 / scale}px ${editing ? 'dashed' : 'solid'} ${peer.user.color}`,
+            borderRadius: `${2 / scale}px`,
+          });
+          const tag = box.firstElementChild as HTMLElement;
+          const label = editing ? `${peer.user.name}(入力中)` : peer.user.name;
+          if (tag.textContent !== label) tag.textContent = label;
+          applyStyles(tag, {
+            position: 'absolute',
+            left: `${-2 / scale}px`,
+            bottom: '100%',
+            marginBottom: `${2 / scale}px`,
+            background: peer.user.color,
+            color: '#fff',
+            font: `600 ${11 / scale}px/1.35 system-ui, -apple-system, sans-serif`,
+            padding: `${1 / scale}px ${5 / scale}px`,
+            borderRadius: `${3 / scale}px`,
+            whiteSpace: 'nowrap',
+          });
+        });
+
+        if (peer.cursor) {
+          const cursor = ensure(`cur:${peer.clientId}`, () => {
+            const el = doc.createElement('div');
+            el.setAttribute('data-collab-cursor', String(peer.clientId));
+            el.innerHTML = CURSOR_SVG;
+            el.appendChild(nameTag(peer.user.name, peer.user.color));
+            return el;
+          });
+          cursor.setAttribute('data-collab-user', peer.user.id);
+          applyStyles(cursor, {
+            position: 'absolute',
+            left: `${peer.cursor.x}px`,
+            top: `${peer.cursor.y}px`,
+            transform: `scale(${1 / scale})`,
+            transformOrigin: '0 0',
+          });
+          const path = cursor.querySelector('path');
+          if (path && path.getAttribute('fill') !== peer.user.color) path.setAttribute('fill', peer.user.color);
+          const tag = cursor.querySelector<HTMLElement>('[data-collab-name]')!;
+          if (tag.textContent !== peer.user.name) tag.textContent = peer.user.name;
+          applyStyles(tag, {
+            position: 'absolute',
+            left: '12px',
+            top: '15px',
+            background: peer.user.color,
+            color: '#fff',
+            font: '600 11px/1.35 system-ui, -apple-system, sans-serif',
+            padding: '1px 5px',
+            borderRadius: '3px',
+            whiteSpace: 'nowrap',
+          });
+        }
+      }
+      layer.querySelectorAll<HTMLElement>(':scope > [data-collab-key]').forEach((el) => {
+        if (!wanted.has(el.getAttribute('data-collab-key') ?? '')) el.remove();
+      });
+    };
+
+    render();
+    const unsubscribe = collabStore.subscribe(render);
+    const timer = setInterval(render, RENDER_INTERVAL_MS);
+    return () => {
+      alive = false;
+      unsubscribe();
+      clearInterval(timer);
+      try {
+        doc.querySelector('#artboard > .gg-collab-layer')?.remove();
+      } catch {
+        /* 文書が既に無い */
+      }
+    };
+  }, [doc, enabled, outerZoom]);
+}

package/src/editor/collab/merge.ts

@@ -0,0 +1,112 @@
+/**
+ * 共有する本文(文字列)の差分と、同時の変更の合わせ方。
+ *
+ * エディタは「最後に Y.Text と揃えた紙面の姿」(shadow)を持つ。自分の変更は
+ * shadow → いまの紙面 の差分(local)で、その間に届いた他人の変更は shadow → Y.Text の差分(remote)。
+ * local の位置を remote に通して Y.Text の位置へ写し、1 つの transaction で当てる。
+ *
+ * こうするのは、紙面と Y.Text が 1 文字も違わないとは限らないため:
+ * - 打鍵中の要素に掛かる他人の変更は blur まで紙面に入れない(その間も自分の打鍵は送る)
+ * - 他人の本文を当てた紙面を getCleanHtml すると、属性の並び・書き戻しの印(data-gg-dirty)などが
+ *   元の文字列と少し違うことがある
+ * 「Y.Text と今の紙面の差分」をそのまま送ると、前者では他人の変更を消し、後者では
+ * 同じ整形を何人もが送って挿入が重なる。
+ */
+
+import diff from 'fast-diff';
+
+/** base の [from, to) を insert に置き換える */
+export type Replacement = { from: number; to: number; insert: string };
+
+/** Y.Text に当てる 1 手(at は当てる前の Y.Text の位置) */
+export type TextOp = { at: number; deleteCount: number; insert: string };
+
+/** base → next の差分を、base の位置での置き換えの列にする(位置の昇順・重ならない) */
+export function replacementsOf(base: string, next: string): Replacement[] {
+  if (base === next) return [];
+  const out: Replacement[] = [];
+  let pos = 0;
+  let current: Replacement | null = null;
+  for (const [type, text] of diff(base, next)) {
+    if (type === diff.EQUAL) {
+      if (current) out.push(current);
+      current = null;
+      pos += text.length;
+    } else if (type === diff.DELETE) {
+      if (!current) current = { from: pos, to: pos, insert: '' };
+      current.to += text.length;
+      pos += text.length;
+    } else {
+      if (!current) current = { from: pos, to: pos, insert: '' };
+      current.insert += text;
+    }
+  }
+  if (current) out.push(current);
+  return out;
+}
+
+/**
+ * base の位置 → remote を当てたあとの位置。
+ * remote に置き換えられた範囲の中は、その置き換えの先頭へ寄せる。
+ * 同じ位置への挿入は remote が先(自分の挿入はその後ろ)
+ */
+function mapPosition(pos: number, remote: Replacement[]): number {
+  let delta = 0;
+  for (const r of remote) {
+    if (pos < r.from) break;
+    if (pos >= r.to) {
+      delta += r.insert.length - (r.to - r.from);
+      continue;
+    }
+    return r.from + delta;
+  }
+  return pos + delta;
+}
+
+/**
+ * local(base の位置)を remote を当てたあとの文字列の手に写す。
+ * - local の削除のうち、remote が既に置き換えた範囲は消さない(他人の挿入も消さない)
+ * - local の挿入は、写した位置に入れる
+ * 戻り値は位置の降順(前から当てると後ろの位置がずれるため)。同じ位置では削除 → 挿入の順
+ */
+export function transformReplacements(local: Replacement[], remote: Replacement[]): TextOp[] {
+  const ops: (TextOp & { order: number })[] = [];
+  let order = 0;
+  for (const l of local) {
+    // 削除: [from, to) から remote の範囲を抜いた残り。remote の挿入(幅 0)は切れ目にする
+    if (l.to > l.from) {
+      let start = l.from;
+      for (const r of remote) {
+        if (r.to < l.from || r.from > l.to) continue;
+        if (r.from === r.to) {
+          if (r.from > l.from && r.from < l.to) {
+            if (r.from > start) ops.push({ at: mapPosition(start, remote), deleteCount: r.from - start, insert: '', order: order++ });
+            start = r.from;
+          }
+          continue;
+        }
+        const cutFrom = Math.max(r.from, l.from);
+        const cutTo = Math.min(r.to, l.to);
+        if (cutTo <= cutFrom) continue;
+        if (cutFrom > start) ops.push({ at: mapPosition(start, remote), deleteCount: cutFrom - start, insert: '', order: order++ });
+        start = Math.max(start, cutTo);
+      }
+      if (l.to > start) ops.push({ at: mapPosition(start, remote), deleteCount: l.to - start, insert: '', order: order++ });
+    }
+    if (l.insert) ops.push({ at: mapPosition(l.from, remote), deleteCount: 0, insert: l.insert, order: order++ });
+  }
+  ops.sort((a, b) => {
+    if (a.at !== b.at) return b.at - a.at;
+    // 同じ位置: 削除を先に(挿入してから消すと、入れた文字を消してしまう)。挿入どうしは後のものを先に入れる
+    if ((a.deleteCount > 0) !== (b.deleteCount > 0)) return a.deleteCount > 0 ? -1 : 1;
+    return b.order - a.order;
+  });
+  return ops.map(({ at, deleteCount, insert }) => ({ at, deleteCount, insert }));
+}
+
+/** 文字列に手を当てる(検証と、Y.Text に当てる前の確かめに使う) */
+export function applyTextOps(text: string, ops: TextOp[]): string {
+  let out = text;
+  for (const op of ops) out = out.slice(0, op.at) + op.insert + out.slice(op.at + op.deleteCount);
+  return out;
+}