Something went wrong. Try again.
a tool for shared writing and social publishing
Something went wrong. Try again.
5.8 kB · 142 lines
TSX
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143import { 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 { useIdentityData } from "components/IdentityProvider";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), [awareness]); 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 cursor// (awareness) state between connected peers.// Both inbound 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.export function useYJSValue(entityID: string) { const [ydoc] = useState(() => new Y.Doc()); const docStateFromReplicache = useEntity(entityID, "block/text"); let rep = useReplicache(); let realtime = useYjsRealtime(); let { identity } = useIdentityData(); const [yText] = useState(() => ydoc.getXmlFragment("prosemirror")); const [awareness] = useState(() => new Awareness(ydoc));
// 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); }
let userName = identity?.bsky_profiles?.record?.displayName || identity?.bsky_profiles?.handle || "Anonymous"; useEffect(() => { // a stable hue offset per client; each peer derives the actual cursor // color from their own theme's accent (see collabCursor.ts) awareness.setLocalStateField("user", { name: userName, hue: (ydoc.clientID % 8) * 45, }); }, [awareness, userName, ydoc]);
// Broadcast local edits and cursor positions to connected peers, and apply // theirs as they arrive. Cursors only ever travel over the channel; doc // updates also flow through replicache below. useEffect(() => { if (!realtime) return; return realtime.register(entityID, ydoc, awareness); }, [realtime, entityID, ydoc, awareness]);
useEffect(() => { return () => { awareness.destroy(); }; }, [awareness]);
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 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); timeout = window.setTimeout(async () => { updateReplicache(); }, 300); };
yText.observeDeep(f); return () => { yText.unobserveDeep(f); }; }, [yText, entityID, rep, ydoc]); return { yText, awareness };}