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

package/src/collaboration-client.ts

@@ -0,0 +1,238 @@
+import type { Silo } from "atom.io"
+import type {
+	MosaicTextIndexLookup,
+	MosaicTextSelection,
+} from "@atom.io/realtime"
+import {
+	createMosaicDomainHistoryClient,
+	createMosaicDomainHistorySocketTransport,
+	createMosaicDomainPresenceClient,
+	createMosaicDomainPresenceSocketTransport,
+	createMosaicDomainResidencyClient,
+	createMosaicDomainResidencySocketTransport,
+	createMosaicDomainSessionClient,
+	createMosaicTextProjectionClient,
+	type MosaicDomainHistoryClient,
+	type MosaicDomainPresenceClient,
+	type MosaicDomainResidencyClient,
+	type MosaicDomainSessionClientState,
+	type MosaicTextProjectionClient,
+	type MosaicTextLogicalEdit,
+} from "@atom.io/realtime/client"
+import type { Socket } from "socket.io-client"
+
+import {
+	activateMarkdownDocumentDomain,
+	markdownPresenceKey,
+	type MarkdownDocumentDomain,
+	type MarkdownPresence,
+} from "./document-domain.ts"
+import type { Identity } from "./identities.ts"
+import {
+	MARKDOWN_EVENTS,
+	type MarkdownAcknowledgement,
+	type MarkdownCommand,
+} from "./protocol.ts"
+
+type MarkdownRange = { end: number; kind: `utf16-range`; start: number }
+export type MarkdownClientStatus = MosaicDomainSessionClientState
+
+export type MarkdownCollaborationClient = Disposable & {
+	readonly domain: MarkdownDocumentDomain
+	readonly history: MosaicDomainHistoryClient
+	readonly identity: Identity
+	readonly presence: MosaicDomainPresenceClient
+	readonly projection: MosaicTextProjectionClient<
+		MarkdownDocumentDomain[`identity`],
+		MarkdownRange
+	>
+	publishPresence(
+		value: Omit<MarkdownPresence, `actor` | `session`>,
+	): Promise<void>
+	redo(): Promise<boolean>
+	replace(input: {
+		readonly selection: MosaicTextSelection
+		readonly text: string
+	}): Promise<void>
+	readonly residency: MosaicDomainResidencyClient<
+		MarkdownDocumentDomain[`identity`],
+		MarkdownRange
+	>
+	readonly sessionId: string
+	status(): MarkdownClientStatus
+	subscribe(listener: (status: MarkdownClientStatus) => void): () => void
+	undo(): Promise<boolean>
+}
+
+const request = <Value>(
+	socket: Socket,
+	event: string,
+	...parameters: readonly unknown[]
+): Promise<Value> =>
+	new Promise((resolve, reject) => {
+		if (!socket.connected) {
+			reject(new Error(`offline`))
+			return
+		}
+		let settled = false
+		const finish = (result: () => void): void => {
+			if (settled) return
+			settled = true
+			socket.off(`disconnect`, disconnected)
+			result()
+		}
+		const disconnected = (): void => {
+			finish(() => {
+				reject(new DOMException(`Socket disconnected`, `AbortError`))
+			})
+		}
+		socket.once(`disconnect`, disconnected)
+		socket.emit(
+			event,
+			...parameters,
+			(acknowledgement: MarkdownAcknowledgement<Value>) => {
+				finish(() => {
+					if (acknowledgement.ok) resolve(acknowledgement.value)
+					else reject(new Error(acknowledgement.reason))
+				})
+			},
+		)
+	})
+
+export async function createMarkdownCollaborationClient(options: {
+	readonly identity: Identity
+	readonly presenceRenewalMs?: number
+	readonly sessionId: string
+	readonly silo: Pick<Silo, `install` | `store`>
+	readonly socket: Socket
+}): Promise<MarkdownCollaborationClient> {
+	const { identity, sessionId, socket } = options
+	const presenceRenewalMs = options.presenceRenewalMs ?? 5_000
+	if (!Number.isSafeInteger(presenceRenewalMs) || presenceRenewalMs < 1) {
+		throw new Error(`Presence renewal must be a positive integer.`)
+	}
+	const domain = await activateMarkdownDocumentDomain({ silo: options.silo })
+	const residencyTransport = createMosaicDomainResidencySocketTransport<
+		MarkdownDocumentDomain[`identity`],
+		MarkdownRange
+	>(socket, {
+		idSource: () => `${sessionId}:residency:${crypto.randomUUID()}`,
+	})
+	const residency = createMosaicDomainResidencyClient({
+		actor: identity.id,
+		domain,
+		maxResidentBytes: 4 * 1024 * 1024,
+		maxResidentMembers: 128,
+		session: sessionId,
+		transport: residencyTransport,
+	})
+	const projection = createMosaicTextProjectionClient({
+		actor: identity.id,
+		domainKey: `markdown-body`,
+		evictReleased: true,
+		materialize: () => request(socket, MARKDOWN_EVENTS.materialize),
+		maximumActiveRanges: 8,
+		maximumRangeUtf16Units: 65_536,
+		planEdit(_edit: MosaicTextLogicalEdit) {
+			throw new Error(
+				`Markdown commands are authoritatively composed with index maintenance.`,
+			)
+		},
+		positionAtOffset: (offset) =>
+			request<MosaicTextIndexLookup>(
+				socket,
+				MARKDOWN_EVENTS.positionAtOffset,
+				offset,
+			),
+		rangeMember: `indexMembers`,
+		rangeMemberLimit: 64,
+		residency,
+		resolvePosition: (position) =>
+			request(socket, MARKDOWN_EVENTS.resolvePosition, position),
+		rootAddress: domain.address(`indexRoot`),
+		session: sessionId,
+	})
+	const presenceTransport = createMosaicDomainPresenceSocketTransport(socket, {
+		idSource: () => `${sessionId}:presence:${crypto.randomUUID()}`,
+	})
+	const presence = createMosaicDomainPresenceClient({
+		domain,
+		renewalMs: presenceRenewalMs,
+		session: sessionId,
+		transport: presenceTransport,
+	})
+	const historyTransport = createMosaicDomainHistorySocketTransport(socket, {
+		idSource: () => `${sessionId}:history:${crypto.randomUUID()}`,
+	})
+	const history = createMosaicDomainHistoryClient({
+		actor: identity.id,
+		onObserverError: (error) => {
+			domain.store.logger.error(
+				`🐞`,
+				`unknown`,
+				sessionId,
+				`A Mosaic Domain history client listener threw.`,
+				error,
+			)
+		},
+		session: sessionId,
+		transport: historyTransport,
+	})
+	const session = await createMosaicDomainSessionClient<MarkdownCommand>({
+		history,
+		presence,
+		residency,
+		send: (command) => request(socket, MARKDOWN_EVENTS.command, command),
+		socket,
+	})
+
+	return {
+		domain,
+		history,
+		identity,
+		presence,
+		projection,
+		publishPresence(value) {
+			const latest = structuredClone({
+				...value,
+				actor: identity.id,
+				session: sessionId,
+			})
+			return presence.publish(
+				domain.address(`collaborator`, markdownPresenceKey(latest)),
+				latest,
+			)
+		},
+		redo: () => session.history(`redo`),
+		replace({ selection, text }) {
+			return session.submit((sequence) => ({
+				anchor: selection.anchor,
+				gestureId: `${identity.id}:${sessionId}:edit:${sequence}`,
+				head: selection.head,
+				sequence,
+				text,
+				type: `replace`,
+			}))
+		},
+		residency,
+		sessionId,
+		status: session.state,
+		subscribe: session.subscribe,
+		undo: () => session.history(`undo`),
+		[Symbol.dispose]() {
+			session[Symbol.dispose]()
+			presence[Symbol.dispose]()
+			presenceTransport[Symbol.dispose]()
+			history[Symbol.dispose]()
+			historyTransport[Symbol.dispose]()
+			void projection
+				.dispose()
+				.catch(() => undefined)
+				.then(() => residency.dispose())
+				.catch(() => undefined)
+				.finally(() => {
+					domain[Symbol.dispose]()
+				})
+		},
+	}
+}

package/src/document-domain.ts

@@ -0,0 +1,169 @@
+import type { Silo } from "atom.io"
+import { atom, atomFamily, mutableAtom } from "atom.io"
+import {
+	createMosaicTextDomainModels,
+	mosaicDomain,
+	mosaicText,
+	type MosaicTextIndexMember,
+	type MosaicTextIndexRoot,
+	type MosaicTextSelection,
+} from "@atom.io/realtime"
+import { z } from "zod"
+
+export const MARKDOWN_INDEX_OPTIONS = {
+	maximumAliasGenerations: 4,
+	maximumAliasTargets: 8,
+	maximumChildrenPerNode: 32,
+	maximumFragmentsPerLeaf: 64,
+	maximumLeafGraphemes: 65_536,
+	maximumLeafUtf16Units: 65_536,
+	minimumChildrenPerNode: 8,
+	minimumLeafGraphemes: 16_384,
+	targetChildrenPerNode: 16,
+	targetLeafGraphemes: 32_768,
+} as const
+
+export const MarkdownText = mosaicText({
+	maximumDeletionIntervalsPerOperation: 16_384,
+	maximumHistoryTargets: 10_000,
+	maximumRunGraphemes: 65_536,
+	maximumRunUtf16Units: 1_000_000,
+	maximumRunsPerOperation: 65_536,
+})
+
+export const {
+	emptyIndexRoot: EMPTY_MARKDOWN_INDEX_ROOT,
+	indexMemberModel: markdownIndexMemberModel,
+	indexMemberSchema: markdownIndexMemberSchema,
+	indexRootModel: markdownIndexRootModel,
+	indexRootSchema: markdownIndexRootSchema,
+	sourceModel: markdownSourceModel,
+	sourceSnapshotSchema: markdownSourceSnapshotSchema,
+} = createMosaicTextDomainModels({
+	index: MARKDOWN_INDEX_OPTIONS,
+	text: MarkdownText,
+})
+
+const id = z.string().min(1).max(512)
+const emptyIndexMember = (memberId: string): MosaicTextIndexMember => ({
+	fragments: [],
+	id: memberId,
+	kind: `leaf`,
+	summary: { graphemes: 0, leafCount: 1, lineBreaks: 0, utf16Units: 0 },
+	version: 1,
+})
+
+export const markdownSourceAtom = mutableAtom<InstanceType<typeof MarkdownText>>(
+	{ class: MarkdownText, key: `markdownSource` },
+)
+export const markdownIndexRootAtom = atom<MosaicTextIndexRoot>({
+	default: EMPTY_MARKDOWN_INDEX_ROOT,
+	key: `markdownIndexRoot`,
+})
+export const markdownIndexMemberAtoms = atomFamily<
+	MosaicTextIndexMember,
+	string
+>({
+	default: emptyIndexMember,
+	key: `markdownIndexMember`,
+})
+
+export type MarkdownPresence = {
+	readonly actor: string
+	readonly color: string
+	readonly name: string
+	readonly selection: MosaicTextSelection | null
+	readonly session: string
+	readonly viewport: {
+		readonly anchor: MosaicTextSelection[`anchor`]
+		readonly head: MosaicTextSelection[`head`]
+	} | null
+}
+
+const relativePosition = z
+	.object({
+		affinity: z.enum([`left`, `right`]),
+		offset: z.number().int().nonnegative(),
+		runId: id.nullable(),
+	})
+	.strict()
+
+export const markdownPresenceSchema: z.ZodType<MarkdownPresence> = z
+	.object({
+		actor: id,
+		color: z.string().min(1).max(64),
+		name: z.string().min(1).max(128),
+		selection: z
+			.object({ anchor: relativePosition, head: relativePosition })
+			.strict()
+			.nullable(),
+		session: id,
+		viewport: z
+			.object({ anchor: relativePosition, head: relativePosition })
+			.strict()
+			.nullable(),
+	})
+	.strict()
+
+export const markdownPresenceAtoms = atomFamily<MarkdownPresence | null, string>(
+	{ default: null, key: `markdownPresence` },
+)
+export const markdownPresenceKey = (
+	identity: Pick<MarkdownPresence, `actor` | `session`>,
+): string => `${identity.actor}\u0000${identity.session}`
+
+export const markdownDocumentDomain = mosaicDomain({
+	configSchema: z.object({}).strict(),
+	key: `markdown-document`,
+	members: {
+		collaborator: {
+			keySchema: id,
+			role: `ephemeral`,
+			schema: markdownPresenceSchema,
+			token: markdownPresenceAtoms,
+		},
+		indexMembers: {
+			keySchema: id,
+			model: markdownIndexMemberModel,
+			role: `durable`,
+			schema: markdownIndexMemberSchema as never,
+			token: markdownIndexMemberAtoms,
+		},
+		indexRoot: {
+			model: markdownIndexRootModel,
+			role: `durable`,
+			schema: markdownIndexRootSchema,
+			token: markdownIndexRootAtom,
+		},
+		source: {
+			model: markdownSourceModel,
+			role: `durable`,
+			schema: markdownSourceSnapshotSchema,
+			token: markdownSourceAtom,
+		},
+	},
+	version: 1,
+})
+
+const MARKDOWN_DOMAIN_TOKENS = [
+	markdownSourceAtom,
+	markdownIndexRootAtom,
+	markdownIndexMemberAtoms,
+	markdownPresenceAtoms,
+] as const
+
+export function activateMarkdownDocumentDomain(options: {
+	readonly instance?: string
+	readonly silo: Pick<Silo, `install` | `store`>
+}): ReturnType<typeof markdownDocumentDomain.activate> {
+	options.silo.install([...MARKDOWN_DOMAIN_TOKENS])
+	return markdownDocumentDomain.activate({
+		config: {},
+		instance: options.instance ?? `shared-markdown`,
+		store: options.silo.store,
+	})
+}
+
+export type MarkdownDocumentDomain = Awaited<
+	ReturnType<typeof activateMarkdownDocumentDomain>
+>

package/src/globals.css

@@ -1,11 +1,18 @@
 @import url("https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700&family=Newsreader:opsz,wght@6..72,500;6..72,650&display=swap");
 
 :root {
+	color-scheme: dark light;
 	font-family: "Manrope", system-ui, sans-serif;
-	color: #292936;
-	background: #f3f2f7;
+	color: #f1edf7;
+	background: #121016;
 	font-synthesis: none;
 	text-rendering: optimizeLegibility;
+
+	@media (prefers-color-scheme: light) {
+		color-scheme: light;
+		color: #292936;
+		background: #f3f2f7;
+	}
 }
 
 * {

package/src/incremental-markdown.ts

@@ -0,0 +1,279 @@
+import type { MosaicTextRelativePosition } from "@atom.io/realtime"
+
+export type MarkdownSourceBlock = {
+	readonly anchor: MosaicTextRelativePosition
+	readonly end: number
+	readonly key: string
+	readonly start: number
+	readonly text: string
+}
+
+export type MarkdownSemanticBlock = MarkdownSourceBlock & {
+	readonly kind: `blockquote` | `code` | `heading` | `list-item` | `paragraph`
+	readonly level?: number
+	readonly ordered?: boolean
+}
+
+export type MarkdownParseInstrumentation = {
+	readonly canceled: boolean
+	readonly elapsedMs: number
+	readonly parsedBlocks: number
+	readonly scannedUtf16Units: number
+	readonly stableBoundaryIndex: number | null
+	readonly reusedBlocks: number
+}
+
+export type MarkdownParseResult = {
+	readonly blocks: readonly MarkdownSemanticBlock[]
+	readonly instrumentation: MarkdownParseInstrumentation
+}
+
+type FenceState = {
+	readonly anchor: MosaicTextRelativePosition
+	readonly end: number
+	readonly key: string
+	readonly language: string
+	readonly start: number
+	readonly text: string
+}
+
+type ParseState = { readonly fence: FenceState | null }
+
+type CacheEntry = {
+	readonly input: ParseState
+	readonly output: ParseState
+	readonly semantic: readonly MarkdownSemanticBlock[]
+	readonly source: MarkdownSourceBlock
+}
+
+const samePosition = (
+	left: MosaicTextRelativePosition,
+	right: MosaicTextRelativePosition,
+): boolean =>
+	left.affinity === right.affinity &&
+	left.offset === right.offset &&
+	left.runId === right.runId
+
+const sameFence = (left: FenceState | null, right: FenceState | null): boolean =>
+	left === right ||
+	(left !== null &&
+		right !== null &&
+		left.end === right.end &&
+		left.key === right.key &&
+		left.language === right.language &&
+		left.start === right.start &&
+		left.text === right.text &&
+		samePosition(left.anchor, right.anchor))
+
+const sameState = (left: ParseState, right: ParseState): boolean =>
+	sameFence(left.fence, right.fence)
+
+const sameSource = (
+	left: MarkdownSourceBlock,
+	right: MarkdownSourceBlock,
+): boolean =>
+	left.key === right.key &&
+	left.start === right.start &&
+	left.end === right.end &&
+	left.text === right.text &&
+	samePosition(left.anchor, right.anchor)
+
+const classify = (source: MarkdownSourceBlock): MarkdownSemanticBlock => {
+	const heading = /^(#{1,6})\s+(.*)$/u.exec(source.text)
+	if (heading) {
+		return {
+			...source,
+			kind: `heading`,
+			level: heading[1].length,
+			text: heading[2],
+		}
+	}
+	const ordered = /^\d+[.)]\s+(.*)$/u.exec(source.text)
+	if (ordered) {
+		return { ...source, kind: `list-item`, ordered: true, text: ordered[1] }
+	}
+	const unordered = /^[-*+]\s+(.*)$/u.exec(source.text)
+	if (unordered) {
+		return { ...source, kind: `list-item`, ordered: false, text: unordered[1] }
+	}
+	if (source.text.startsWith(`> `)) {
+		return { ...source, kind: `blockquote`, text: source.text.slice(2) }
+	}
+	return { ...source, kind: `paragraph` }
+}
+
+function parseOne(
+	source: MarkdownSourceBlock,
+	input: ParseState,
+): { readonly output: ParseState; readonly semantic: MarkdownSemanticBlock[] } {
+	const fenceMarker = /^```([^\n]*)$/u.exec(source.text.trimEnd())
+	if (input.fence === null) {
+		if (fenceMarker === null) {
+			return {
+				output: input,
+				semantic: source.text.trim() === `` ? [] : [classify(source)],
+			}
+		}
+		return {
+			output: {
+				fence: {
+					anchor: source.anchor,
+					end: source.end,
+					key: source.key,
+					language: fenceMarker[1].trim(),
+					start: source.start,
+					text: ``,
+				},
+			},
+			semantic: [],
+		}
+	}
+	if (fenceMarker !== null) {
+		return {
+			output: { fence: null },
+			semantic: [
+				{
+					anchor: input.fence.anchor,
+					end: source.end,
+					key: input.fence.key,
+					kind: `code`,
+					start: input.fence.start,
+					text: input.fence.text,
+				},
+			],
+		}
+	}
+	return {
+		output: {
+			fence: {
+				...input.fence,
+				end: source.end,
+				text:
+					input.fence.text === ``
+						? source.text
+						: `${input.fence.text}\n${source.text}`,
+			},
+		},
+		semantic: [],
+	}
+}
+
+const turn = (): Promise<void> =>
+	new Promise((resolve) => setTimeout(resolve, 0))
+
+/**
+ * Incremental block parser with explicit cancelation and stable-boundary reuse.
+ * It is renderer-neutral; the React viewport may be replaced without moving
+ * parser state into component instances.
+ */
+export class IncrementalMarkdownParser {
+	#cache: CacheEntry[] = []
+	#generation: AbortController | null = null
+
+	public cancel(): void {
+		this.#generation?.abort()
+	}
+
+	public async parse(
+		source: readonly MarkdownSourceBlock[],
+		options: {
+			readonly signal?: AbortSignal
+			readonly yieldAfterUtf16Units?: number
+		} = {},
+	): Promise<MarkdownParseResult> {
+		this.cancel()
+		const generation = new AbortController()
+		this.#generation = generation
+		const abort = (): void => {
+			generation.abort()
+		}
+		if (options.signal?.aborted) abort()
+		options.signal?.addEventListener(`abort`, abort, { once: true })
+		const started = performance.now()
+		const yieldAfter = options.yieldAfterUtf16Units ?? 16_384
+		let sinceYield = 0
+		let scannedUtf16Units = 0
+		let parsedBlocks = 0
+		let reusedBlocks = 0
+		let stableBoundaryIndex: number | null = null
+		let propagating = false
+		const next: CacheEntry[] = []
+		const semantic: MarkdownSemanticBlock[] = []
+		let state: ParseState = { fence: null }
+
+		try {
+			// Even the first bounded slice begins outside the browser input turn.
+			await turn()
+			for (let index = 0; index < source.length; index++) {
+				if (generation.signal.aborted) throw generation.signal.reason
+				const item = source[index]
+				const cached = this.#cache[index]
+				if (
+					cached !== undefined &&
+					sameSource(cached.source, item) &&
+					sameState(cached.input, state)
+				) {
+					next.push(cached)
+					semantic.push(...cached.semantic)
+					state = cached.output
+					reusedBlocks++
+					if (propagating) {
+						stableBoundaryIndex = index
+						propagating = false
+					}
+					continue
+				}
+				propagating = true
+				stableBoundaryIndex = null
+				const parsed = parseOne(item, state)
+				const entry = {
+					input: state,
+					output: parsed.output,
+					semantic: parsed.semantic,
+					source: item,
+				}
+				next.push(entry)
+				semantic.push(...parsed.semantic)
+				state = parsed.output
+				parsedBlocks++
+				scannedUtf16Units += item.text.length
+				sinceYield += item.text.length
+				if (sinceYield >= yieldAfter) {
+					sinceYield = 0
+					await turn()
+				}
+			}
+			if (state.fence !== null) {
+				semantic.push({ ...state.fence, kind: `code` })
+			}
+			if (!generation.signal.aborted) this.#cache = next
+			return {
+				blocks: semantic,
+				instrumentation: {
+					canceled: false,
+					elapsedMs: performance.now() - started,
+					parsedBlocks,
+					reusedBlocks,
+					scannedUtf16Units,
+					stableBoundaryIndex,
+				},
+			}
+		} catch (error) {
+			if (!generation.signal.aborted) throw error
+			return {
+				blocks: [],
+				instrumentation: {
+					canceled: true,
+					elapsedMs: performance.now() - started,
+					parsedBlocks,
+					reusedBlocks,
+					scannedUtf16Units,
+					stableBoundaryIndex,
+				},
+			}
+		} finally {
+			options.signal?.removeEventListener(`abort`, abort)
+			if (this.#generation === generation) this.#generation = null
+		}
+	}
+}