Something went wrong. Try again.
a tool for shared writing and social publishing
Something went wrong. Try again.
7.5 kB · 180 lines
TSX
at main
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181import { useState, useEffect, useMemo } from "react";import * as Y from "yjs";import { Awareness } from "y-protocols/awareness";import * as base64 from "base64-js";import { useEntity, useReplicache } from "src/replicache";import { useYjsRealtime, YjsRealtimeConnection } from "src/yjsRealtime";import { remoteCursorPlugin } from "./remoteCursorPlugin";import { RemoteCursors } from "./RemoteCursors";import { SCHEMA_VERSION } from "./schema";import { markClientStale, stampDocSchemaVersion, updateSchemaVersion, useStaleClient,} from "./schemaVersion";
// Everything a collaboratively-edited text entity needs for live multiplayer,// in one place so the moving parts can't drift apart between the text block// and footnote call sites:// - the synced yjs value to bind ySyncPlugin to (`yText`, from// useYJSValue below, which owns the doc and its replicache/realtime// sync),// - the ProseMirror plugin that publishes the local selection to awareness// and decorates remote selections (`cursorPlugin`), and// - the overlay that draws remote carets outside the contenteditable// (`overlay`).// The plugin is memoized on the (stable) awareness so it's built once, and// the overlay element carries the same awareness, so a caller only has to// drop `cursorPlugin` into its plugin list and render `overlay`.export function useCollabText(entityID: string) { let { yText, awareness } = useYJSValue(entityID); let cursorPlugin = useMemo( () => remoteCursorPlugin(awareness, entityID), [awareness, entityID], ); let overlay = <RemoteCursors entityID={entityID} awareness={awareness} />; return { yText, awareness, cursorPlugin, overlay };}
// The yjs document behind a collaboratively-edited text entity, wired to its// two sync paths:// - replicache holds the source of truth (the `block/text` fact is the full// encoded doc state): applied here on load and on pokes, and written back// (debounced) when local edits change the fragment;// - the realtime channel carries live incremental updates, and its shared// connection-level awareness carries cursor state (tagged with the// entityID it points into — see src/yjsRealtime).// Both inbound doc paths are gated on the doc's schema version (see// ./schemaVersion): content from a newer schema is never applied to a doc an// editor binds to. The channel side of that gate lives in yjsRealtime; the// replicache side is here.// Every text doc with a debounced write still waiting to fire. Callers that// need the block/text facts to be current before they read them server-side// (saving a version) run these first, so a snapshot taken right after a// keystroke doesn't capture the pre-edit text.const pendingTextWrites = new Set<() => Promise<void>>();export async function flushPendingTextWrites() { let pending = [...pendingTextWrites]; pendingTextWrites.clear(); await Promise.all(pending.map((write) => write()));}
// The doc each text entity was last bound to, kept briefly past unmount. A// block that moves in the tree (e.g. into a canvas group) remounts on a fresh// doc, and its block/text subscription hasn't delivered on that first render —// text typed since page load isn't in the initial facts — so it would render// empty and then apply its text mid-render. The new mount seeds from the old// doc instead.const recentDocs = new Map<string, Y.Doc>();const docMounts = new WeakMap<Y.Doc, number>();
export function useYJSValue(entityID: string) { const [ydoc] = useState(() => { let doc = new Y.Doc(); let recent = recentDocs.get(entityID); if (recent) Y.applyUpdate(doc, Y.encodeStateAsUpdate(recent)); return doc; }); useEffect(() => { recentDocs.set(entityID, ydoc); docMounts.set(ydoc, (docMounts.get(ydoc) ?? 0) + 1); return () => { docMounts.set(ydoc, docMounts.get(ydoc)! - 1); setTimeout(() => { if (docMounts.get(ydoc) === 0 && recentDocs.get(entityID) === ydoc) recentDocs.delete(entityID); }, 2000); }; }, [entityID, ydoc]); const docStateFromReplicache = useEntity(entityID, "block/text"); let rep = useReplicache(); let realtime = useYjsRealtime(); // Outside a YjsRealtimeProvider (read-only contexts) there are never any // peers; a throwaway awareness keeps the cursor plugin and overlay // unconditional. const [fallbackAwareness] = useState(() => realtime ? null : new Awareness(new Y.Doc()), ); const awareness = realtime?.awareness ?? fallbackAwareness!; useEffect(() => { return () => fallbackAwareness?.destroy(); }, [fallbackAwareness]); const [yText] = useState(() => ydoc.getXmlFragment("prosemirror"));
// Content written by a newer schema must never reach the editor's doc (see // ./schemaVersion) — leave it unapplied and go stale; the read-only // fallback renders the fact directly. const factValue = docStateFromReplicache?.data.value; const factTooNew = useMemo( () => !!factValue && updateSchemaVersion(base64.toByteArray(factValue)) > SCHEMA_VERSION, [factValue], ); useEffect(() => { if (factTooNew) markClientStale(); }, [factTooNew]);
if (docStateFromReplicache && !factTooNew) { const update = base64.toByteArray(docStateFromReplicache.data.value); Y.applyUpdate(ydoc, update); }
// Broadcast local edits to connected peers and apply theirs as they // arrive. Cursors travel through the connection's shared awareness; doc // updates also flow through replicache below. let connection = realtime?.connection ?? null; useEffect(() => { if (!connection) return; return connection.register(entityID, ydoc); }, [connection, entityID, ydoc]);
useEffect(() => { if (!rep.rep) return; let timeout = null as null | number; const updateReplicache = async () => { // The debounced flush can fire after going stale unmounts the editor; // writing then could clobber newer content already in the fact. if (useStaleClient.getState().stale) return; stampDocSchemaVersion(ydoc); const update = Y.encodeStateAsUpdate(ydoc); await rep.rep?.mutate.assertFact({ //These undos are handled above in the Prosemirror context ignoreUndo: true, entity: entityID, attribute: "block/text", data: { value: base64.fromByteArray(update), type: "text", }, }); }; const flushEarly = async () => { if (timeout) clearTimeout(timeout); timeout = null; await updateReplicache(); }; const f = async (events: Y.YEvent<any>[], transaction: Y.Transaction) => { // Transactions with no origin come from replicache itself, and ones // originating from the realtime channel are persisted by the peer that // authored them — only local edits should be written back. if (!transaction.origin) return; if (transaction.origin instanceof YjsRealtimeConnection) return; if (timeout) clearTimeout(timeout); pendingTextWrites.add(flushEarly); timeout = window.setTimeout(async () => { timeout = null; pendingTextWrites.delete(flushEarly); updateReplicache(); }, 300); };
yText.observeDeep(f); return () => { yText.unobserveDeep(f); pendingTextWrites.delete(flushEarly); }; }, [yText, entityID, rep, ydoc]); return { yText, awareness };}