@atom.io/template-react-realtime-text-editor 0.0.11 → 0.0.12

package/src/main.tsx

@@ -1,24 +1,45 @@
 import "./globals.css"
 
-import { RealtimeProvider } from "atom.io/realtime-react"
-import { StrictMode } from "react"
+import { Silo } from "atom.io"
+import { StoreProvider } from "@atom.io/react"
 import { createRoot } from "react-dom/client"
 import { io } from "socket.io-client"
 
+import { createMarkdownCollaborationClient } from "./collaboration-client.ts"
 import { MarkdownWorkspace } from "./MarkdownWorkspace.tsx"
-import { getBrowserSession, realtimeAuth } from "./session.ts"
+import { getBrowserSession } from "./session.ts"
+import { createMarkdownWorkspaceState } from "./workspace-state.ts"
 
 const session = getBrowserSession()
+const silo = new Silo({
+	isProduction: import.meta.env.PROD,
+	lifespan: `ephemeral`,
+	name: `markdown-client:${session.clientId}`,
+})
 const socket = io(window.location.origin, {
-	auth: realtimeAuth(session.identity, session.clientId),
+	auth: { actor: session.identity.id, session: session.clientId },
 	reconnection: true,
 	reconnectionDelayMax: 4_000,
 })
+const client = await createMarkdownCollaborationClient({
+	identity: session.identity,
+	sessionId: session.clientId,
+	silo,
+	socket,
+})
+const workspace = createMarkdownWorkspaceState({ client, silo })
+window.addEventListener(
+	`pagehide`,
+	() => {
+		workspace[Symbol.dispose]()
+		client[Symbol.dispose]()
+		socket.close()
+	},
+	{ once: true },
+)
 
 createRoot(document.getElementById(`root`)!).render(
-	<StrictMode>
-		<RealtimeProvider socket={socket}>
-			<MarkdownWorkspace {...session} />
-		</RealtimeProvider>
-	</StrictMode>,
+	<StoreProvider store={silo.store}>
+		<MarkdownWorkspace client={client} state={workspace} />
+	</StoreProvider>,
 )

package/src/protocol.ts

@@ -0,0 +1,35 @@
+import type {
+	MosaicTextIndexRange,
+	MosaicTextRelativePosition,
+} from "@atom.io/realtime"
+
+export const MARKDOWN_EVENTS = {
+	command: `markdown-domain:command`,
+	materialize: `markdown-domain:materialize`,
+	positionAtOffset: `markdown-domain:position-at-offset`,
+	resolvePosition: `markdown-domain:resolve-position`,
+} as const
+
+export type MarkdownAcknowledgement<Value> =
+	| { readonly ok: true; readonly value: Value }
+	| { readonly ok: false; readonly reason: string }
+
+export type MarkdownEditCommand = {
+	readonly anchor: MosaicTextRelativePosition
+	readonly gestureId: string
+	readonly head: MosaicTextRelativePosition
+	readonly sequence: number
+	readonly text: string
+	readonly type: `replace`
+}
+
+export type MarkdownImportCommand = {
+	readonly gestureId: string
+	readonly sequence: number
+	readonly text: string
+	readonly type: `import`
+}
+
+export type MarkdownCommand = MarkdownEditCommand | MarkdownImportCommand
+
+export type MarkdownViewport = MosaicTextIndexRange

package/src/virtualization.ts

@@ -0,0 +1,53 @@
+import type { MosaicTextIndexRange } from "@atom.io/realtime"
+
+export type MarkdownVirtualMetrics = {
+	readonly averageUtf16UnitsPerRow: number
+	readonly overscanRows: number
+	readonly rowHeight: number
+	readonly totalUtf16Units: number
+}
+
+export type MarkdownVirtualWindow = {
+	readonly bottomSpacer: number
+	readonly range: MosaicTextIndexRange
+	readonly topSpacer: number
+}
+
+/** Map a scroll viewport to a bounded logical range without a segment manifest. */
+export function markdownVirtualWindow(
+	viewport: { readonly height: number; readonly scrollTop: number },
+	metrics: MarkdownVirtualMetrics,
+): MarkdownVirtualWindow {
+	for (const [name, value] of Object.entries({ ...viewport, ...metrics })) {
+		if (!Number.isFinite(value) || value < 0) {
+			throw new RangeError(`${name} must be a finite non-negative number.`)
+		}
+	}
+	if (metrics.averageUtf16UnitsPerRow < 1 || metrics.rowHeight < 1) {
+		throw new RangeError(`Virtual row estimates must be positive.`)
+	}
+	const totalRows = Math.max(
+		1,
+		Math.ceil(metrics.totalUtf16Units / metrics.averageUtf16UnitsPerRow),
+	)
+	const firstVisibleRow = Math.floor(viewport.scrollTop / metrics.rowHeight)
+	const visibleRows = Math.max(1, Math.ceil(viewport.height / metrics.rowHeight))
+	const firstRow = Math.max(0, firstVisibleRow - metrics.overscanRows)
+	const lastRow = Math.min(
+		totalRows,
+		firstVisibleRow + visibleRows + metrics.overscanRows,
+	)
+	const start = Math.min(
+		metrics.totalUtf16Units,
+		Math.floor(firstRow * metrics.averageUtf16UnitsPerRow),
+	)
+	const end = Math.min(
+		metrics.totalUtf16Units,
+		Math.max(start, Math.ceil(lastRow * metrics.averageUtf16UnitsPerRow)),
+	)
+	return {
+		bottomSpacer: Math.max(0, (totalRows - lastRow) * metrics.rowHeight),
+		range: { end, kind: `utf16-range`, start },
+		topSpacer: firstRow * metrics.rowHeight,
+	}
+}

package/src/workspace-state.ts

@@ -0,0 +1,275 @@
+import type { ReadonlyPureSelectorToken, RegularAtomToken, Silo } from "atom.io"
+import type { MosaicTextSelection } from "@atom.io/realtime"
+import {
+	createMosaicTextRangeController,
+	type MosaicTextRangeController,
+	type MosaicTextRangeView,
+} from "@atom.io/realtime/client"
+
+import type {
+	MarkdownClientStatus,
+	MarkdownCollaborationClient,
+} from "./collaboration-client.ts"
+import type { MarkdownPresence } from "./document-domain.ts"
+import {
+	IncrementalMarkdownParser,
+	type MarkdownParseInstrumentation,
+	type MarkdownSemanticBlock,
+} from "./incremental-markdown.ts"
+import {
+	markdownVirtualWindow,
+	type MarkdownVirtualWindow,
+} from "./virtualization.ts"
+
+export type MarkdownScrollViewport = {
+	readonly height: number
+	readonly scrollTop: number
+}
+
+export type MarkdownWorkspacePeer = {
+	readonly id: string
+	readonly selection: MosaicTextSelection | null
+	readonly value: MarkdownPresence
+}
+
+export type MarkdownWorkspaceState = Disposable & {
+	readonly parse: RegularAtomToken<readonly MarkdownSemanticBlock[]>
+	readonly parseMetrics: RegularAtomToken<MarkdownParseInstrumentation>
+	readonly peers: ReadonlyPureSelectorToken<readonly MarkdownWorkspacePeer[]>
+	readonly presence: RegularAtomToken<readonly MarkdownPresence[]>
+	readonly problem: RegularAtomToken<string | null>
+	readonly readProblem: RegularAtomToken<string | null>
+	readonly scroll: RegularAtomToken<MarkdownScrollViewport>
+	readonly status: RegularAtomToken<MarkdownClientStatus>
+	readonly totalLength: RegularAtomToken<number>
+	readonly view: RegularAtomToken<MosaicTextRangeView>
+	readonly window: ReadonlyPureSelectorToken<MarkdownVirtualWindow>
+	flushDeferredScroll(hasLocalDraft: boolean): void
+	publishSelection(selection: MosaicTextSelection): Promise<void>
+	publishViewport(viewport: MosaicTextSelection): Promise<void>
+	refreshLength(): Promise<number | null>
+	replace(
+		input: Parameters<MarkdownCollaborationClient[`replace`]>[0],
+	): Promise<void>
+	reportEditorError(error: unknown): void
+	setDocumentLength(length: number): void
+	setScroll(viewport: MarkdownScrollViewport, defer: boolean): void
+}
+
+export const EMPTY_PARSE_METRICS: MarkdownParseInstrumentation = {
+	canceled: false,
+	elapsedMs: 0,
+	parsedBlocks: 0,
+	reusedBlocks: 0,
+	scannedUtf16Units: 0,
+	stableBoundaryIndex: null,
+}
+
+const activePresence = (
+	client: MarkdownCollaborationClient,
+): MarkdownPresence[] =>
+	client.presence.state.presence.flatMap((envelope) =>
+		envelope.kind === `update` && envelope.address.member === `collaborator`
+			? [envelope.value as MarkdownPresence]
+			: [],
+	)
+
+/** Store-owned application state around the renderer-neutral text controllers. */
+export function createMarkdownWorkspaceState(options: {
+	readonly client: MarkdownCollaborationClient
+	readonly silo: Silo
+}): MarkdownWorkspaceState {
+	const { client, silo } = options
+	const key = `markdown-workspace:${client.sessionId}`
+	const statusAtom = silo.atom<MarkdownClientStatus>({
+		default: client.status(),
+		// eslint-disable-next-line atom.io/naming-convention -- A shared Store needs one workspace namespace per realtime session.
+		key: `${key}:status`,
+	})
+	const presenceAtom = silo.atom<readonly MarkdownPresence[]>({
+		default: activePresence(client),
+		// eslint-disable-next-line atom.io/naming-convention -- A shared Store needs one workspace namespace per realtime session.
+		key: `${key}:presence`,
+	})
+	const totalLengthAtom = silo.atom<number>({
+		default: 0,
+		// eslint-disable-next-line atom.io/naming-convention -- A shared Store needs one workspace namespace per realtime session.
+		key: `${key}:totalLength`,
+	})
+	const scrollAtom = silo.atom<MarkdownScrollViewport>({
+		default: { height: 560, scrollTop: 0 },
+		// eslint-disable-next-line atom.io/naming-convention -- A shared Store needs one workspace namespace per realtime session.
+		key: `${key}:scroll`,
+	})
+	const parseAtom = silo.atom<readonly MarkdownSemanticBlock[]>({
+		default: [],
+		// eslint-disable-next-line atom.io/naming-convention -- A shared Store needs one workspace namespace per realtime session.
+		key: `${key}:parse`,
+	})
+	const parseMetricsAtom = silo.atom<MarkdownParseInstrumentation>({
+		default: EMPTY_PARSE_METRICS,
+		// eslint-disable-next-line atom.io/naming-convention -- A shared Store needs one workspace namespace per realtime session.
+		key: `${key}:parseMetrics`,
+	})
+	const readProblemAtom = silo.atom<string | null>({
+		default: null,
+		// eslint-disable-next-line atom.io/naming-convention -- A shared Store needs one workspace namespace per realtime session.
+		key: `${key}:readProblem`,
+	})
+	const problemAtom = silo.atom<string | null>({
+		default: null,
+		// eslint-disable-next-line atom.io/naming-convention -- A shared Store needs one workspace namespace per realtime session.
+		key: `${key}:problem`,
+	})
+	const windowSelector = silo.selector<MarkdownVirtualWindow>({
+		get: ({ get }) =>
+			markdownVirtualWindow(get(scrollAtom), {
+				averageUtf16UnitsPerRow: 88,
+				overscanRows: 24,
+				rowHeight: 24,
+				totalUtf16Units: get(totalLengthAtom),
+			}),
+		// eslint-disable-next-line atom.io/naming-convention -- A shared Store needs one workspace namespace per realtime session.
+		key: `${key}:window`,
+	})
+	const peersSelector = silo.selector<readonly MarkdownWorkspacePeer[]>({
+		get: ({ get }) =>
+			get(presenceAtom)
+				.filter((person) => person.session !== client.sessionId)
+				.map((person) => ({
+					id: person.session,
+					selection: person.selection,
+					value: person,
+				})),
+		// eslint-disable-next-line atom.io/naming-convention -- A shared Store needs one workspace namespace per realtime session.
+		key: `${key}:peers`,
+	})
+	const initialWindow = silo.getState(windowSelector)
+	const range: MosaicTextRangeController = createMosaicTextRangeController({
+		client: client.projection,
+		deferStart: true,
+		initialRange: initialWindow.range,
+		key: `${key}:text-range`,
+		overscan: 2_048,
+		silo,
+	})
+	const parser = new IncrementalMarkdownParser()
+	let deferredScroll: MarkdownScrollViewport | null = null
+	let disposed = false
+
+	const refreshLength = async (): Promise<number | null> => {
+		try {
+			const length = await client.projection.readLength()
+			if (disposed) return null
+			silo.setState(totalLengthAtom, length)
+			silo.setState(readProblemAtom, null)
+			if (length === 0) {
+				silo.setState(range.view, {
+					error: null,
+					projection: {
+						blocks: [],
+						complete: true,
+						range: { end: 0, kind: `utf16-range`, start: 0 },
+						segments: [],
+						text: ``,
+					},
+					status: `ready`,
+				})
+			} else {
+				range.start()
+			}
+			return length
+		} catch (error) {
+			if (!disposed) {
+				silo.setState(
+					readProblemAtom,
+					error instanceof Error ? error.message : String(error),
+				)
+			}
+			return null
+		}
+	}
+	const parseProjection = (view: MosaicTextRangeView): void => {
+		if (view.status !== `ready`) return
+		void parser.parse(view.projection.blocks).then((result) => {
+			if (disposed || result.instrumentation.canceled) return
+			silo.setState(parseAtom, result.blocks)
+			silo.setState(parseMetricsAtom, result.instrumentation)
+		})
+	}
+	const stopStatus = client.subscribe((next) => {
+		silo.setState(statusAtom, next)
+		if (next.connection === `live`) void refreshLength()
+	})
+	const stopPresence = client.presence.subscribe(() => {
+		silo.setState(presenceAtom, activePresence(client))
+	})
+	const stopWindow = silo.subscribe(windowSelector, ({ newValue }) => {
+		silo.setState(range.range, newValue.range)
+	})
+	const stopView = silo.subscribe(range.view, ({ newValue }) => {
+		parseProjection(newValue)
+	})
+	parseProjection(silo.getState(range.view))
+	void refreshLength()
+
+	return {
+		parse: parseAtom,
+		parseMetrics: parseMetricsAtom,
+		peers: peersSelector,
+		presence: presenceAtom,
+		problem: problemAtom,
+		readProblem: readProblemAtom,
+		scroll: scrollAtom,
+		status: statusAtom,
+		totalLength: totalLengthAtom,
+		view: range.view,
+		window: windowSelector,
+		flushDeferredScroll(hasLocalDraft) {
+			if (hasLocalDraft || deferredScroll === null) return
+			silo.setState(scrollAtom, deferredScroll)
+			deferredScroll = null
+		},
+		publishSelection(selection) {
+			return client.publishPresence({
+				color: client.identity.color,
+				name: client.identity.name,
+				selection,
+				viewport: null,
+			})
+		},
+		publishViewport(viewport) {
+			return client.publishPresence({
+				color: client.identity.color,
+				name: client.identity.name,
+				selection: null,
+				viewport,
+			})
+		},
+		refreshLength,
+		replace: (input) => client.replace(input),
+		reportEditorError(error) {
+			silo.setState(
+				problemAtom,
+				error instanceof Error ? error.message : String(error),
+			)
+		},
+		setDocumentLength(length) {
+			silo.setState(totalLengthAtom, length)
+		},
+		setScroll(viewport, defer) {
+			if (defer) deferredScroll = viewport
+			else silo.setState(scrollAtom, viewport)
+		},
+		[Symbol.dispose]() {
+			if (disposed) return
+			disposed = true
+			stopStatus()
+			stopPresence()
+			stopWindow()
+			stopView()
+			parser.cancel()
+			range[Symbol.dispose]()
+		},
+	}
+}