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

package/node/http-server.ts

@@ -0,0 +1,81 @@
+import { createServer } from "node:http"
+
+import { Server } from "socket.io"
+
+import { identityById } from "../src/identities.ts"
+import {
+	createMarkdownDocumentService,
+	type MarkdownDocumentService,
+} from "./service.ts"
+
+export type MarkdownCollaborationHttpServer = {
+	close(): Promise<void>
+	readonly collaboration: MarkdownDocumentService
+}
+
+export async function createMarkdownCollaborationHttpServer(options: {
+	readonly collaboration?: MarkdownDocumentService
+	readonly port: number
+}): Promise<MarkdownCollaborationHttpServer> {
+	const collaboration =
+		options.collaboration ?? (await createMarkdownDocumentService())
+	const httpServer = createServer((request, response) => {
+		if (request.url === `/health`) {
+			response.writeHead(200, { "content-type": `application/json` })
+			response.end(
+				JSON.stringify({ ok: true, revision: collaboration.revision }),
+			)
+			return
+		}
+		response.writeHead(404)
+		response.end()
+	})
+	const socketServer = new Server(httpServer)
+
+	socketServer.on(`connection`, (socket) => {
+		const requestedActor =
+			typeof socket.handshake.auth.actor === `string`
+				? socket.handshake.auth.actor
+				: undefined
+		const session =
+			typeof socket.handshake.auth.session === `string`
+				? socket.handshake.auth.session
+				: ``
+		const identity = identityById(requestedActor)
+		if (
+			identity.id !== requestedActor ||
+			session.length === 0 ||
+			session.includes(`::`)
+		) {
+			socket.disconnect(true)
+			return
+		}
+		void collaboration.bindSocket({ actor: identity.id, session, socket })
+	})
+
+	await new Promise<void>((resolve, reject) => {
+		const onError = (error: Error): void => {
+			reject(error)
+		}
+		httpServer.once(`error`, onError)
+		httpServer.listen(options.port, `127.0.0.1`, () => {
+			httpServer.off(`error`, onError)
+			resolve()
+		})
+	})
+
+	let closed = false
+	return {
+		async close() {
+			if (closed) return
+			closed = true
+			await new Promise<void>((resolve) =>
+				socketServer.close(() => {
+					resolve()
+				}),
+			)
+			collaboration[Symbol.dispose]()
+		},
+		collaboration,
+	}
+}

package/node/server.ts

@@ -1,67 +1,19 @@
-import { createServer } from "node:http"
+import { createMarkdownCollaborationHttpServer } from "./http-server.ts"
 
-import { Silo } from "atom.io"
-import type { UserKey } from "atom.io/realtime"
-import { createMosaicServer, realtime } from "atom.io/realtime-server"
-import { Server } from "socket.io"
-
-import { identityById } from "../src/identities.ts"
-import { markdownAtomRegistration } from "./mosaic-atom.ts"
-
-const PORT = 3000
-const mosaic = createMosaicServer({ registrations: [markdownAtomRegistration] })
-const silo = new Silo({
-	name: `markdown-collaboration-server`,
-	lifespan: `immortal`,
-	isProduction: process.env.NODE_ENV === `production`,
-})
-const httpServer = createServer((request, response) => {
-	if (request.url === `/health`) {
-		response.writeHead(200, { "content-type": `application/json` })
-		response.end(JSON.stringify({ ok: true }))
-		return
-	}
-	response.writeHead(404)
-	response.end()
-})
-const socketServer = new Server(httpServer)
-
-const disposeRealtime = realtime(
-	socketServer,
-	(handshake) => {
-		const requestedId =
-			typeof handshake.auth.userId === `string`
-				? handshake.auth.userId
-				: undefined
-		const sessionId =
-			typeof handshake.auth.sessionId === `string`
-				? handshake.auth.sessionId
-				: undefined
-		if (!sessionId || sessionId.includes(`::`)) {
-			return new Error(`A valid Mosaic session is required.`)
-		}
-		const identity = identityById(requestedId)
-		return `user::${identity.id}::${sessionId}` satisfies UserKey
-	},
-	({ socket, consumer }) => {
-		const [, actor, session] = consumer.split(`::`)
-		if (!actor || !session) {
-			throw new Error(`Malformed Mosaic user session.`)
-		}
-		return mosaic.connect({ actor, session, socket })
-	},
-	silo.store,
+const portArgument = process.argv.indexOf(`--port`)
+const configuredPort =
+	portArgument === -1 ? process.env.PORT : process.argv[portArgument + 1]
+const PORT = Number.parseInt(configuredPort ?? `3000`, 10)
+if (!Number.isSafeInteger(PORT) || PORT < 1 || PORT > 65_535) {
+	throw new Error(`PORT must be an integer between 1 and 65535.`)
+}
+const server = await createMarkdownCollaborationHttpServer({ port: PORT })
+console.log(
+	`Markdown collaboration server listening on http://localhost:${PORT}`,
 )
 
-httpServer.listen(PORT, () => {
-	console.log(
-		`Markdown collaboration server listening on http://localhost:${PORT}`,
-	)
-})
-
 const shutdown = async (): Promise<void> => {
-	await disposeRealtime()
-	await mosaic.dispose()
+	await server.close()
 }
 process.once(`SIGINT`, () => void shutdown())
 process.once(`SIGTERM`, () => void shutdown())

package/node/service.ts

@@ -0,0 +1,310 @@
+import { Silo } from "atom.io"
+import type {
+	MosaicAcceptedDomainBatchEnvelope,
+	MosaicTextIndexLookup,
+	MosaicTextIndexRange,
+	MosaicTextIndexSummary,
+	MosaicTextRelativePosition,
+	MosaicTextSnapshot,
+} from "@atom.io/realtime"
+import {
+	bindMosaicDomainHistoryServerSocket,
+	bindMosaicDomainPresenceServerSocket,
+	bindMosaicDomainResidencyServerSocket,
+	createMosaicDomainBatchServer,
+	createMosaicDomainHistoryCoordinator,
+	createMosaicDomainPresenceServer,
+	createMosaicDomainResidencyServer,
+	createMosaicTextDocumentCoordinator,
+	InMemoryMosaicDomainCheckpointStorage,
+	type MosaicDomainCheckpointStorageAdapter,
+	type MosaicDomainHistoryConnection,
+	type MosaicTextDocumentInstrumentation,
+	type MosaicTextDocumentRangeInspection,
+} from "@atom.io/realtime/server"
+import type { Socket } from "socket.io"
+import { z } from "zod"
+
+import {
+	activateMarkdownDocumentDomain,
+	MARKDOWN_INDEX_OPTIONS,
+	markdownIndexMemberModel,
+	markdownIndexRootModel,
+	markdownSourceAtom,
+	markdownSourceModel,
+	type MarkdownDocumentDomain,
+	type MarkdownText,
+} from "../src/document-domain.ts"
+import { INITIAL_MARKDOWN } from "../src/initial-markdown.ts"
+import {
+	MARKDOWN_EVENTS,
+	type MarkdownAcknowledgement,
+	type MarkdownCommand,
+} from "../src/protocol.ts"
+
+export type MarkdownDocumentInstrumentation =
+	MosaicTextDocumentInstrumentation & {
+		readonly activeFullDocumentModels: 1
+		readonly maximumFullDocumentModels: 1
+	}
+
+export type MarkdownDocumentRangeInspection = MosaicTextDocumentRangeInspection
+
+export type MarkdownDocumentService = Disposable & {
+	bindSocket(options: {
+		readonly actor: string
+		readonly session: string
+		readonly socket: Socket
+	}): Promise<() => Promise<void>>
+	command(identity: {
+		readonly actor: string
+		readonly command: MarkdownCommand
+		readonly session: string
+	}): Promise<MosaicAcceptedDomainBatchEnvelope>
+	readonly domain: MarkdownDocumentDomain
+	history(identity: {
+		readonly actor: string
+		readonly session: string
+	}): MosaicDomainHistoryConnection
+	readonly instrumentation: MarkdownDocumentInstrumentation
+	readonly indexSummary: MosaicTextIndexSummary | null
+	inspectRange(
+		range: MosaicTextIndexRange,
+	): Promise<MarkdownDocumentRangeInspection>
+	readonly length: number
+	materialize(): string
+	positionAtOffset(offset: number): Promise<MosaicTextIndexLookup>
+	resolvePosition(position: MosaicTextRelativePosition): Promise<number>
+	readonly revision: number
+	sourceSnapshot(): MosaicTextSnapshot
+}
+
+export async function createMarkdownDocumentService(
+	options: {
+		readonly authorizeImport?: (identity: {
+			readonly actor: string
+			readonly session: string
+		}) => boolean | Promise<boolean>
+		readonly initialText?: string
+		readonly presenceTtlMs?: number
+		readonly silo?: Silo
+		readonly storage?: MosaicDomainCheckpointStorageAdapter
+	} = {},
+): Promise<MarkdownDocumentService> {
+	let bootstrapText = options.initialText ?? INITIAL_MARKDOWN
+	const silo =
+		options.silo ??
+		new Silo({
+			isProduction: process.env.NODE_ENV === `production`,
+			lifespan: `ephemeral`,
+			name: `markdown-document-server`,
+		})
+	const domain = await activateMarkdownDocumentDomain({ silo })
+	const storage = options.storage ?? new InMemoryMosaicDomainCheckpointStorage()
+	const batches = createMosaicDomainBatchServer({
+		domain,
+		limits: {
+			maxBytes: 192 * 1024 * 1024,
+			maxMembers: 65_536,
+			maxOperations: 65_536,
+		},
+		storage,
+	})
+	const source = (): InstanceType<typeof MarkdownText> =>
+		silo.getState(markdownSourceAtom) as InstanceType<typeof MarkdownText>
+	const document = await createMosaicTextDocumentCoordinator({
+		authorizeImport:
+			options.authorizeImport ??
+			(({ actor, session }) => actor === `ada` || session === `bootstrap`),
+		batches,
+		domain,
+		index: {
+			memberAddress: (id) => domain.address(`indexMembers`, id),
+			memberModel: markdownIndexMemberModel,
+			options: MARKDOWN_INDEX_OPTIONS,
+			rootAddress: domain.address(`indexRoot`),
+			rootModel: markdownIndexRootModel,
+		},
+		serviceIdentity: { actor: `markdown-service`, session: `markdown-service` },
+		source: {
+			address: domain.address(`source`),
+			model: markdownSourceModel,
+			read: source,
+		},
+	})
+	const history = createMosaicDomainHistoryCoordinator({
+		batches,
+		completeCompensation: document.completeCompensation,
+		domain,
+		limits: { undoStepsPerActor: 100 },
+		storage,
+	})
+	const residency = createMosaicDomainResidencyServer({
+		batches,
+		domain,
+		maxResidentMembers: 128,
+		range: {
+			resolve: ({ limit, member, range }) =>
+				member === `indexMembers`
+					? document.resolveRange(range, limit)
+					: Promise.resolve([]),
+			schema: z
+				.object({
+					end: z.number().int().nonnegative(),
+					kind: z.literal(`utf16-range`),
+					start: z.number().int().nonnegative(),
+				})
+				.strict()
+				.refine(({ end, start }) => end >= start),
+		},
+	})
+	const presence = createMosaicDomainPresenceServer({
+		domain,
+		ttlMs: options.presenceTtlMs,
+	})
+	const submitCommand = ({
+		actor,
+		command: input,
+		session,
+	}: {
+		readonly actor: string
+		readonly command: MarkdownCommand
+		readonly session: string
+	}): Promise<MosaicAcceptedDomainBatchEnvelope> =>
+		document.submit({
+			actor,
+			command:
+				input.type === `import`
+					? input
+					: {
+							gestureId: input.gestureId,
+							selection: { anchor: input.anchor, head: input.head },
+							sequence: input.sequence,
+							text: input.text,
+							type: `replace`,
+						},
+			session,
+		})
+
+	if (bootstrapText.length > 0) {
+		await submitCommand({
+			actor: `system`,
+			command: {
+				gestureId: `bootstrap`,
+				sequence: 1,
+				text: bootstrapText,
+				type: `import`,
+			},
+			session: `bootstrap`,
+		})
+		await history.flush()
+	}
+	bootstrapText = ``
+
+	let disposed = false
+	const cleanups = new Set<() => Promise<void>>()
+	const acknowledge = <Value>(
+		work: Promise<Value>,
+		respond: (acknowledgement: MarkdownAcknowledgement<Value>) => void,
+	): void => {
+		void work.then(
+			(value) => {
+				respond({ ok: true, value })
+			},
+			(error: unknown) => {
+				respond({
+					ok: false,
+					reason: error instanceof Error ? error.message : String(error),
+				})
+			},
+		)
+	}
+
+	return {
+		bindSocket({ actor, session, socket }) {
+			const unbindResidency = bindMosaicDomainResidencyServerSocket(
+				residency.connect({ actor, session }),
+				socket,
+			)
+			const unbindHistory = bindMosaicDomainHistoryServerSocket(
+				history.connect({ actor, session }),
+				socket,
+				{ session },
+			)
+			const unbindPresence = bindMosaicDomainPresenceServerSocket(
+				presence.connect({ actor, session }),
+				socket,
+			)
+			const onCommand = (input: MarkdownCommand, respond: any): void => {
+				acknowledge(submitCommand({ actor, command: input, session }), respond)
+			}
+			const onMaterialize = (respond: any): void => {
+				acknowledge(Promise.resolve(document.materialize()), respond)
+			}
+			const onPosition = (offset: number, respond: any): void => {
+				acknowledge(document.positionAtOffset(offset), respond)
+			}
+			const onResolve = (
+				position: MosaicTextRelativePosition,
+				respond: any,
+			): void => {
+				acknowledge(Promise.resolve(document.resolvePosition(position)), respond)
+			}
+			socket.on(MARKDOWN_EVENTS.command, onCommand)
+			socket.on(MARKDOWN_EVENTS.materialize, onMaterialize)
+			socket.on(MARKDOWN_EVENTS.positionAtOffset, onPosition)
+			socket.on(MARKDOWN_EVENTS.resolvePosition, onResolve)
+			let cleaned = false
+			const cleanup = async (): Promise<void> => {
+				if (cleaned) return
+				cleaned = true
+				socket.off(MARKDOWN_EVENTS.command, onCommand)
+				socket.off(MARKDOWN_EVENTS.materialize, onMaterialize)
+				socket.off(MARKDOWN_EVENTS.positionAtOffset, onPosition)
+				socket.off(MARKDOWN_EVENTS.resolvePosition, onResolve)
+				unbindResidency()
+				unbindHistory()
+				await unbindPresence()
+				cleanups.delete(cleanup)
+			}
+			cleanups.add(cleanup)
+			return Promise.resolve(cleanup)
+		},
+		command: submitCommand,
+		domain,
+		history: (identity) => history.connect(identity),
+		get instrumentation() {
+			return {
+				...document.instrumentation,
+				activeFullDocumentModels: 1 as const,
+				maximumFullDocumentModels: 1 as const,
+			}
+		},
+		get indexSummary() {
+			return document.indexSummary
+		},
+		inspectRange: document.inspectRange,
+		get length() {
+			return document.length
+		},
+		materialize: document.materialize,
+		positionAtOffset: document.positionAtOffset,
+		resolvePosition: (position) =>
+			Promise.resolve(document.resolvePosition(position)),
+		get revision() {
+			return batches.revision
+		},
+		sourceSnapshot: () => source().toJSON(),
+		[Symbol.dispose]() {
+			if (disposed) return
+			disposed = true
+			for (const cleanup of cleanups) void cleanup().catch(() => undefined)
+			presence[Symbol.dispose]()
+			residency[Symbol.dispose]()
+			history[Symbol.dispose]()
+			document[Symbol.dispose]()
+			batches.dispose()
+			domain[Symbol.dispose]()
+		},
+	}
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atom.io/template-react-realtime-text-editor",
-  "version": "0.0.10",
+  "version": "0.0.12",
   "description": "A realtime text editor built with atom.io, React, and Lasertag.",
   "repository": {
     "type": "git",
@@ -10,35 +10,43 @@
   "license": "Apache-2.0",
   "type": "module",
   "dependencies": {
-    "atom.io": "0.53.2",
-    "react": "19.3.0",
-    "react-dom": "19.3.0",
-    "socket.io": "4.8.3",
-    "socket.io-client": "4.8.3",
-    "zod": "4.6.5"
+    "@atom.io/react": "0.1.0",
+    "@atom.io/realtime": "0.1.0",
+    "@lexical/react": "0.52.0",
+    "@lexical/selection": "0.52.0",
+    "atom.io": "0.54.0",
+    "lexical": "0.52.0",
+    "react": "19.3.1",
+    "react-dom": "19.3.1",
+    "socket.io": "4.8.4",
+    "socket.io-client": "4.8.4",
+    "zod": "4.6.7"
   },
   "devDependencies": {
-    "@dprint/json": "0.24.0",
-    "@dprint/markdown": "0.24.0",
-    "@dprint/oxc": "0.40.0",
+    "@atom.io/eslint-plugin": "0.1.0",
+    "@dprint/json": "0.25.2",
+    "@dprint/markdown": "0.28.0",
+    "@dprint/oxc": "0.47.0",
+    "@playwright/test": "1.64.1",
     "@testing-library/dom": "10.4.2",
     "@testing-library/react": "16.3.3",
-    "@types/node": "26.6.1",
+    "@types/node": "26.6.5",
     "@types/react": "19.3.0",
     "@types/react-dom": "19.3.0",
-    "@typescript-eslint/parser": "8.70.0",
-    "@vitejs/plugin-react": "6.1.1",
-    "concurrently": "10.0.5",
-    "dprint": "0.57.4",
+    "@typescript-eslint/parser": "8.72.0",
+    "@typescript/native": "npm:typescript@7.0.2",
+    "@vitejs/plugin-react": "6.1.2",
+    "concurrently": "10.0.6",
+    "dprint": "0.64.1",
     "dprint-plugin-malva": "0.16.0",
-    "eslint": "10.10.0",
-    "happy-dom": "20.14.5",
-    "lasertag": "0.8.2",
-    "oxlint": "1.83.0",
-    "oxlint-tsgolint": "7.0.2001",
-    "typescript": "7.0.2",
-    "vite": "8.3.0",
-    "vitest": "5.0.1"
+    "eslint": "10.13.0",
+    "happy-dom": "21.0.4",
+    "lasertag": "0.8.9",
+    "oxlint": "1.89.0",
+    "oxlint-tsgolint": "7.0.2004",
+    "typescript": "npm:@typescript/typescript6@6.0.2",
+    "vite": "8.3.5",
+    "vitest": "5.0.5"
   },
   "engines": {
     "node": ">=24.12.0"
@@ -58,6 +66,7 @@
     "lint:types": "tsc -b",
     "preview": "concurrently \"vite preview\" \"node node/server.ts\"",
     "test": "vitest run",
+    "test:browser": "playwright test",
     "test:once": "vitest run"
   }
 }

package/playwright.config.ts

@@ -0,0 +1,34 @@
+import { defineConfig } from "@playwright/test"
+
+const FRONTEND_PORT = 5_527
+const executablePath = process.env.MOSAIC_PLAYWRIGHT_EXECUTABLE_PATH
+
+export default defineConfig({
+	fullyParallel: false,
+	outputDir: `test-results/browser`,
+	reporter: process.env.CI ? [[`github`], [`list`]] : `list`,
+	retries: 0,
+	testDir: `tests/browser`,
+	timeout: 60_000,
+	use: {
+		baseURL: `http://127.0.0.1:${FRONTEND_PORT}`,
+		launchOptions:
+			executablePath === undefined
+				? {}
+				: {
+						executablePath,
+					},
+		screenshot: `only-on-failure`,
+		trace: `retain-on-failure`,
+		video: `retain-on-failure`,
+	},
+	webServer: [
+		{
+			command: `pnpm exec vite --mode browser-conformance --host 127.0.0.1 --port ${FRONTEND_PORT} --strictPort`,
+			reuseExistingServer: false,
+			timeout: 30_000,
+			url: `http://127.0.0.1:${FRONTEND_PORT}`,
+		},
+	],
+	workers: 1,
+})

package/src/LexicalMarkdownEditor.css

@@ -0,0 +1,88 @@
+.LexicalMarkdownEditor_editor {
+	position: relative;
+	display: block;
+	min-height: 32rem;
+}
+
+.LexicalMarkdownEditor_contentEditable {
+	position: relative;
+	z-index: 1;
+	min-height: 32rem;
+	padding: 1.45rem 1.45rem 3rem 3.7rem;
+	outline: 0;
+	color: var(--editor-ink);
+	caret-color: var(--accent);
+	font-family: "DM Mono", monospace;
+	font-size: 0.83rem;
+	line-height: 1.72rem;
+	overflow-wrap: anywhere;
+	tab-size: 2;
+	white-space: pre-wrap;
+}
+
+.LexicalMarkdownEditor_paragraph {
+	margin: 0;
+}
+
+.LexicalMarkdownEditor_placeholder {
+	position: absolute;
+	top: 1.45rem;
+	left: 3.7rem;
+	display: block;
+	color: var(--editor-placeholder);
+	font-family: "DM Mono", monospace;
+	font-size: 0.83rem;
+	pointer-events: none;
+}
+
+.LexicalMarkdownEditor_overlays {
+	position: absolute;
+	z-index: 2;
+	inset: 0;
+	display: block;
+	pointer-events: none;
+}
+
+.LexicalMarkdownEditor_presence {
+	display: contents;
+}
+
+.LexicalMarkdownEditor_selection,
+.LexicalMarkdownEditor_caret {
+	position: absolute;
+	display: block;
+}
+
+.LexicalMarkdownEditor_selection {
+	border-radius: 0.18rem;
+	background: color-mix(
+		in srgb,
+		var(--collaborator-color) 25%,
+		transparent
+	);
+	box-shadow: inset 0 -1px var(--collaborator-color);
+}
+
+.LexicalMarkdownEditor_caret {
+	width: 2px;
+	background: var(--collaborator-color);
+	box-shadow: 0 0 0 1px var(--overlay-outline);
+}
+
+.LexicalMarkdownEditor_label {
+	position: absolute;
+	top: -1.25rem;
+	left: -1px;
+	display: block;
+	max-width: 10rem;
+	padding: 0.16rem 0.38rem;
+	border-radius: 0.28rem 0.28rem 0.28rem 0;
+	color: white;
+	background: var(--collaborator-color);
+	font-family: system-ui, sans-serif;
+	font-size: 0.58rem;
+	font-weight: 750;
+	line-height: 1.05rem;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}

package/src/LexicalMarkdownEditor.module.css

@@ -0,0 +1,8 @@
+lexical-markdown-editor.class {
+	display: block;
+	min-height: 32rem;
+
+	> mosaic-lexical-text-editor {
+		display: contents;
+	}
+}