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

package/tests/incremental-markdown.test.tsx

@@ -0,0 +1,101 @@
+import {
+	IncrementalMarkdownParser,
+	type MarkdownSourceBlock,
+} from "../src/incremental-markdown.ts"
+import { markdownVirtualWindow } from "../src/virtualization.ts"
+
+const block = (
+	text: string,
+	index: number,
+	key = `run:${index}`,
+): MarkdownSourceBlock => ({
+	anchor: { affinity: `right`, offset: index, runId: `run` },
+	end: index + text.length,
+	key,
+	start: index,
+	text,
+})
+
+describe(`incremental Markdown rendering`, () => {
+	test(`propagates fences to a stable boundary and reuses the untouched suffix`, async () => {
+		const parser = new IncrementalMarkdownParser()
+		const first = [
+			block(`# Heading`, 0),
+			block(`paragraph`, 10),
+			block(`\`\`\`ts`, 20),
+			block(`const x = 1`, 30),
+			block(`\`\`\``, 45),
+			block(`tail`, 50),
+		]
+		const initial = await parser.parse(first, { yieldAfterUtf16Units: 8 })
+		expect(initial.blocks.map(({ kind }) => kind)).toEqual([
+			`heading`,
+			`paragraph`,
+			`code`,
+			`paragraph`,
+		])
+		expect(initial.instrumentation.parsedBlocks).toBe(6)
+
+		const edited = [...first]
+		edited[3] = block(`const x = 2`, 30)
+		const reparsed = await parser.parse(edited, { yieldAfterUtf16Units: 8 })
+		expect(reparsed.blocks.find(({ kind }) => kind === `code`)?.text).toBe(
+			`const x = 2`,
+		)
+		expect(reparsed.instrumentation.parsedBlocks).toBeLessThan(4)
+		expect(reparsed.instrumentation.reusedBlocks).toBeGreaterThan(2)
+		expect(reparsed.instrumentation.stableBoundaryIndex).toBe(5)
+		expect(reparsed.instrumentation.scannedUtf16Units).toBeLessThan(
+			first.reduce((sum, item) => sum + item.text.length, 0),
+		)
+	})
+
+	test(`cancels stale expensive work off the caller's input turn`, async () => {
+		const parser = new IncrementalMarkdownParser()
+		const large = Array.from({ length: 2_000 }, (_, index) =>
+			block(`paragraph ${index} ${`x`.repeat(64)}`, index * 80),
+		)
+		const stale = parser.parse(large, { yieldAfterUtf16Units: 128 })
+		const latest = parser.parse([block(`# Latest`, 0)], {
+			yieldAfterUtf16Units: 128,
+		})
+		expect((await stale).instrumentation.canceled).toBe(true)
+		expect((await latest).blocks).toMatchObject([
+			{ kind: `heading`, text: `Latest` },
+		])
+	})
+
+	test(`honors a cancelation signal that was already aborted`, async () => {
+		const parser = new IncrementalMarkdownParser()
+		const controller = new AbortController()
+		controller.abort()
+		const result = await parser.parse([block(`# Never parsed`, 0)], {
+			signal: controller.signal,
+		})
+		expect(result.blocks).toEqual([])
+		expect(result.instrumentation).toMatchObject({
+			canceled: true,
+			parsedBlocks: 0,
+			scannedUtf16Units: 0,
+		})
+	})
+
+	test(`keeps source and preview windows bounded at a deterministic 50 MB length`, () => {
+		const totalUtf16Units = 56_384_800
+		for (const scrollTop of [0, 1_000_000, 15_000_000]) {
+			const window = markdownVirtualWindow(
+				{ height: 720, scrollTop },
+				{
+					averageUtf16UnitsPerRow: 88,
+					overscanRows: 24,
+					rowHeight: 24,
+					totalUtf16Units,
+				},
+			)
+			expect(window.range.end - window.range.start).toBeLessThan(65_536)
+			expect(window.topSpacer + window.bottomSpacer).toBeLessThan(
+				totalUtf16Units,
+			)
+		}
+	})
+})

package/tsconfig.app.json

@@ -3,7 +3,7 @@
 		"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
 		"target": "ES2024",
 		"useDefineForClassFields": true,
-		"lib": ["ES2024", "DOM", "DOM.Iterable"],
+		"lib": ["ES2024", "ESNext.Disposable", "DOM", "DOM.Iterable"],
 		"module": "ESNext",
 		"types": ["vite/client", "lasertag/css-modules", "lasertag/react-jsx"],
 		"skipLibCheck": true,

package/tsconfig.node.json

@@ -2,7 +2,7 @@
 	"compilerOptions": {
 		"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
 		"target": "ES2024",
-		"lib": ["ES2024"],
+		"lib": ["ES2024", "ESNext.Disposable"],
 		"module": "ESNext",
 		"types": ["node"],
 		"skipLibCheck": true,
@@ -18,5 +18,11 @@
 		"noFallthroughCasesInSwitch": true,
 		"noUncheckedSideEffectImports": true
 	},
-	"include": ["node", "vite.config.ts", "vitest.config.ts", "eslint.config.ts"]
+	"include": [
+		"node",
+		"vite.config.ts",
+		"vitest.config.ts",
+		"playwright.config.ts",
+		"eslint.config.ts"
+	]
 }

package/tsconfig.test.json

@@ -9,5 +9,5 @@
 			"lasertag/react-jsx"
 		]
 	},
-	"include": ["node/mosaic-atom.ts", "src", "tests"]
+	"include": ["node", "src", "tests"]
 }

package/vite.config.ts

@@ -1,22 +1,26 @@
 import react from "@vitejs/plugin-react"
 import { defineConfig } from "vite"
 
-const BACKEND_URL = `http://localhost:3000`
-
-const proxyBackend = () => ({
+const proxyBackend = (backendUrl: string) => ({
 	[`/health`]: {
 		changeOrigin: true,
-		target: BACKEND_URL,
+		target: backendUrl,
 	},
 	[`/socket.io`]: {
 		changeOrigin: true,
-		target: BACKEND_URL,
+		target: backendUrl,
 		ws: true,
 	},
 })
 
-export default defineConfig({
-	plugins: [react()],
-	preview: { proxy: proxyBackend() },
-	server: { proxy: proxyBackend() },
+export default defineConfig(({ mode }) => {
+	const backendUrl =
+		mode === `browser-conformance`
+			? `http://127.0.0.1:3027`
+			: (process.env.VITE_BACKEND_URL ?? `http://localhost:3000`)
+	return {
+		plugins: [react()],
+		preview: { proxy: proxyBackend(backendUrl) },
+		server: { proxy: proxyBackend(backendUrl) },
+	}
 })

package/node/mosaic-atom.ts

@@ -1,88 +0,0 @@
-import type {
-	MosaicTextOperation,
-	MosaicTextSelection,
-	MosaicTextView,
-} from "atom.io/realtime"
-import { defineMosaicAtomRegistration } from "atom.io/realtime-server"
-import { z } from "zod"
-
-import {
-	Markdown,
-	markdownAtom,
-	type MarkdownPresence,
-} from "../src/collaboration/mosaic.ts"
-
-const idSchema = z.string().min(1).max(512)
-const nullableIdSchema = idSchema.nullable()
-
-const relativePositionSchema = z
-	.object({
-		affinity: z.enum([`left`, `right`]),
-		leftId: nullableIdSchema,
-		rightId: nullableIdSchema,
-	})
-	.strict()
-
-const selectionSchema = z
-	.object({
-		anchor: relativePositionSchema,
-		head: relativePositionSchema,
-	})
-	.strict()
-
-const operationSchema = z.discriminatedUnion(`type`, [
-	z
-		.object({
-			deletedIds: z.array(idSchema).max(200_000),
-			inserted: z
-				.array(
-					z
-						.object({
-							after: nullableIdSchema,
-							before: nullableIdSchema,
-							id: idSchema,
-							value: z.string().max(1_024),
-						})
-						.strict(),
-				)
-				.max(200_000),
-			type: z.literal(`edit`),
-		})
-		.strict(),
-	z
-		.object({
-			mode: z.enum([`redo`, `undo`]),
-			targetOperationIds: z.array(idSchema).min(1).max(10_000),
-			type: z.literal(`history`),
-		})
-		.strict(),
-]) satisfies z.ZodType<MosaicTextOperation>
-
-const presenceSchema = z
-	.object({
-		color: z.string().min(1).max(64),
-		lastActiveAt: z.number().finite().nonnegative(),
-		name: z.string().min(1).max(128),
-		selection: selectionSchema.nullable(),
-	})
-	.strict() satisfies z.ZodType<MarkdownPresence>
-
-const selectionResolvesWithin = (
-	document: MosaicTextView,
-	selection: MosaicTextSelection,
-): boolean =>
-	[selection.anchor, selection.head].every((position) => {
-		const offset = document.resolvePosition(position)
-		return offset >= 0 && offset <= document.length
-	})
-
-export const markdownAtomRegistration = defineMosaicAtomRegistration({
-	checkpointEvery: 128,
-	class: Markdown,
-	operationSchema,
-	presenceSchema,
-	target: markdownAtom,
-	validatePresence: (presence, { view }) =>
-		presence.selection === null ||
-		selectionResolvesWithin(view, presence.selection),
-})

package/src/collaboration/mosaic.ts

@@ -1,46 +0,0 @@
-import { mutableAtom, selector } from "atom.io"
-import type { MosaicTextSelection } from "atom.io/realtime"
-import { mosaicText } from "atom.io/realtime"
-
-import { INITIAL_MARKDOWN } from "../initial-markdown.ts"
-
-export type MarkdownPresence = {
-	readonly color: string
-	readonly lastActiveAt: number
-	readonly name: string
-	readonly selection: MosaicTextSelection | null
-}
-
-export const Markdown = mosaicText({
-	initialText: INITIAL_MARKDOWN,
-	maximumGraphemes: 200_000,
-})
-
-/** The collaborative document is an ordinary mutable atom. */
-export const markdownAtom = mutableAtom<InstanceType<typeof Markdown>>({
-	key: `markdown`,
-	class: Markdown,
-})
-
-/** Mosaic views participate in the state graph like every other atom value. */
-export const markdownCharacterCountSelector = selector<number>({
-	key: `markdownCharacterCount`,
-	get: ({ get }) => get(markdownAtom).length,
-})
-
-export const markdownWordCountSelector = selector<number>({
-	key: `markdownWordCount`,
-	get: ({ get }) => {
-		const text = get(markdownAtom).text.trim()
-		return text === `` ? 0 : text.split(/\s+/u).length
-	},
-})
-
-export function lineAndColumnAt(
-	text: string,
-	offset: number,
-): { column: number; line: number } {
-	const before = text.slice(0, offset)
-	const lines = before.split(`\n`)
-	return { column: lines.at(-1)?.length ?? 0, line: lines.length - 1 }
-}