@atom.io/template-react-realtime-text-editor 0.0.1

package/src/MarkdownWorkspace.tsx

@@ -0,0 +1,424 @@
+import type { MosaicTextSelection } from "atom.io/realtime"
+import { useO } from "atom.io/react"
+import { useMosaic } from "atom.io/realtime-react"
+import {
+	Fragment,
+	createElement,
+	type CSSProperties,
+	type ReactElement,
+	type ReactNode,
+	useEffect,
+	useLayoutEffect,
+	useMemo,
+	useRef,
+	useState,
+} from "react"
+
+import {
+	lineAndColumnAt,
+	Markdown,
+	markdownAtom,
+	markdownCharacterCountSelector,
+	markdownWordCountSelector,
+	type MarkdownPresence,
+} from "./collaboration/mosaic.ts"
+import { SIMULATED_IDENTITIES } from "./identities.ts"
+import type { Identity } from "./identities.ts"
+import { switchBrowserIdentity } from "./session.ts"
+import css from "./MarkdownWorkspace.module.css"
+
+type MarkdownWorkspaceProps = {
+	clientId: string
+	identity: Identity
+}
+
+type CaretStyle = CSSProperties &
+	Record<`--caret-column` | `--caret-line` | `--person-color`, number | string>
+
+function safeHref(candidate: string): string | undefined {
+	return /^(https?:\/\/|mailto:|#)/.test(candidate) ? candidate : undefined
+}
+
+function renderInline(text: string, keyPrefix: string): ReactNode[] {
+	const pattern = /(`[^`]+`|\*\*[^*]+\*\*|\*[^*]+\*|\[[^\]]+\]\([^)]+\))/g
+	const nodes: ReactNode[] = []
+	let cursor = 0
+	for (const match of text.matchAll(pattern)) {
+		const index = match.index
+		if (index > cursor) nodes.push(text.slice(cursor, index))
+		const token = match[0]
+		const key = `${keyPrefix}:${index}`
+		if (token.startsWith(`\``)) {
+			nodes.push(<code key={key}>{token.slice(1, -1)}</code>)
+		} else if (token.startsWith(`**`)) {
+			nodes.push(<strong key={key}>{token.slice(2, -2)}</strong>)
+		} else if (token.startsWith(`*`)) {
+			nodes.push(<em key={key}>{token.slice(1, -1)}</em>)
+		} else {
+			const link = /^\[([^\]]+)\]\(([^)]+)\)$/.exec(token)
+			const href = safeHref(link?.[2] ?? ``)
+			nodes.push(
+				href ? (
+					<a key={key} href={href} rel="noreferrer">
+						{link?.[1]}
+					</a>
+				) : (
+					<Fragment key={key}>{token}</Fragment>
+				),
+			)
+		}
+		cursor = index + token.length
+	}
+	if (cursor < text.length) nodes.push(text.slice(cursor))
+	return nodes
+}
+
+function startsBlock(line: string): boolean {
+	return /^(#{1,6} |```|> |[-*] |\d+\. )/.test(line)
+}
+
+function renderMarkdown(markdown: string): ReactNode[] {
+	const lines = markdown.split(`\n`)
+	const blocks: ReactNode[] = []
+	let index = 0
+	while (index < lines.length) {
+		const line = lines[index]
+		if (line.trim() === ``) {
+			index++
+			continue
+		}
+		if (line.startsWith(`\`\`\``)) {
+			const language = line.slice(3).trim()
+			const code: string[] = []
+			index++
+			while (index < lines.length && !lines[index].startsWith(`\`\`\``)) {
+				code.push(lines[index])
+				index++
+			}
+			index++
+			blocks.push(
+				<pre key={`code:${index}`} data-language={language || undefined}>
+					<code>{code.join(`\n`)}</code>
+				</pre>,
+			)
+			continue
+		}
+		const heading = /^(#{1,6}) (.*)$/.exec(line)
+		if (heading) {
+			blocks.push(
+				createElement(
+					`h${heading[1].length}`,
+					{ key: `heading:${index}` },
+					renderInline(heading[2], `heading:${index}`),
+				),
+			)
+			index++
+			continue
+		}
+		if (/^[-*] /.test(line)) {
+			const items: ReactNode[] = []
+			while (index < lines.length && /^[-*] /.test(lines[index])) {
+				items.push(
+					<li key={`item:${index}`}>
+						{renderInline(lines[index].slice(2), `item:${index}`)}
+					</li>,
+				)
+				index++
+			}
+			blocks.push(<ul key={`list:${index}`}>{items}</ul>)
+			continue
+		}
+		if (/^\d+\. /.test(line)) {
+			const items: ReactNode[] = []
+			while (index < lines.length && /^\d+\. /.test(lines[index])) {
+				items.push(
+					<li key={`item:${index}`}>
+						{renderInline(lines[index].replace(/^\d+\. /, ``), `item:${index}`)}
+					</li>,
+				)
+				index++
+			}
+			blocks.push(<ol key={`list:${index}`}>{items}</ol>)
+			continue
+		}
+		if (line.startsWith(`> `)) {
+			blocks.push(
+				<blockquote key={`quote:${index}`}>
+					{renderInline(line.slice(2), `quote:${index}`)}
+				</blockquote>,
+			)
+			index++
+			continue
+		}
+
+		const paragraph = [line]
+		index++
+		while (
+			index < lines.length &&
+			lines[index].trim() !== `` &&
+			!startsBlock(lines[index])
+		) {
+			paragraph.push(lines[index])
+			index++
+		}
+		blocks.push(
+			<p key={`paragraph:${index}`}>
+				{renderInline(paragraph.join(` `), `paragraph:${index}`)}
+			</p>,
+		)
+	}
+	return blocks
+}
+
+function getStatusLabel(status: string, pending: number): string {
+	if (status === `offline`) return `Offline · changes stay queued`
+	if (status === `recovering` || status === `syncing`) {
+		return `Catching up…`
+	}
+	if (status === `rejected`) return `Collaboration needs attention`
+	return pending === 0
+		? `All changes saved`
+		: `Saving ${pending} change${pending === 1 ? `` : `s`}…`
+}
+
+export function MarkdownWorkspace({
+	clientId,
+	identity,
+}: MarkdownWorkspaceProps): ReactElement {
+	const mosaic = useMosaic<InstanceType<typeof Markdown>, MarkdownPresence>(
+		markdownAtom,
+		{ actor: identity.id, session: clientId },
+	)
+	const document = useO(markdownAtom)
+	const characterCount = useO(markdownCharacterCountSelector)
+	const wordCount = useO(markdownWordCountSelector)
+	const markdown = document.text
+	const history = document.historyFor(identity.id)
+	const presence = mosaic.presence.map(({ actor, presence: peer, session }) => ({
+		...peer,
+		clientId: session,
+		id: actor,
+	}))
+	const editorRef = useRef<HTMLTextAreaElement | null>(null)
+	const selectionRef = useRef<MosaicTextSelection | null>(null)
+	const [scroll, setScroll] = useState({ left: 0, top: 0 })
+	const preview = useMemo(() => renderMarkdown(markdown), [markdown])
+	const collaborators = presence.filter(({ clientId: id }) => id !== clientId)
+	const pending = mosaic.pending.length
+
+	const publishSelection = (selection: MosaicTextSelection | null): void => {
+		mosaic.publishPresence({
+			color: identity.color,
+			lastActiveAt: Date.now(),
+			name: identity.name,
+			selection,
+		})
+	}
+
+	useEffect(() => {
+		if (mosaic.status === `live`) publishSelection(selectionRef.current)
+	}, [mosaic.status])
+
+	useLayoutEffect(() => {
+		const editor = editorRef.current
+		const selection = selectionRef.current
+		if (!editor || !selection || globalThis.document.activeElement !== editor) {
+			return
+		}
+		editor.setSelectionRange(
+			document.resolvePosition(selection.anchor),
+			document.resolvePosition(selection.head),
+		)
+	}, [markdown])
+
+	const rememberSelection = (editor: HTMLTextAreaElement): void => {
+		selectionRef.current = document.selectionFromOffsets(
+			editor.selectionStart,
+			editor.selectionEnd,
+		)
+		publishSelection(selectionRef.current)
+	}
+
+	return (
+		<markdown-workspace className={css.class}>
+			<header>
+				<brand-lockup>
+					<mark>M</mark>
+					<label-set>
+						<strong>Mosaic</strong>
+						<span>Shared markdown</span>
+					</label-set>
+				</brand-lockup>
+				<document-title>
+					<strong>Launch field notes</strong>
+					<span>{getStatusLabel(mosaic.status, pending)}</span>
+				</document-title>
+				<toolbar-actions>
+					<button
+						type="button"
+						disabled={history.undo.length === 0}
+						onClick={() => mosaic.change({ type: `undo` })}
+						title="Undo my last change"
+					>
+						↶ <span>Undo mine</span>
+					</button>
+					<button
+						type="button"
+						disabled={history.redo.length === 0}
+						onClick={() => mosaic.change({ type: `redo` })}
+						title="Redo my last change"
+					>
+						↷ <span>Redo</span>
+					</button>
+					<label>
+						<avatar-dot
+							style={{ "--person-color": identity.color } as CSSProperties}
+						>
+							{identity.name[0]}
+						</avatar-dot>
+						<select
+							aria-label="Simulated identity"
+							value={identity.id}
+							onChange={(event) => {
+								switchBrowserIdentity(event.target.value)
+							}}
+						>
+							{SIMULATED_IDENTITIES.map((person) => (
+								<option key={person.id} value={person.id}>
+									{person.name}
+								</option>
+							))}
+						</select>
+					</label>
+				</toolbar-actions>
+			</header>
+			<main>
+				<editor-pane>
+					<pane-heading>
+						<label htmlFor="markdown-source">Markdown</label>
+						<span>
+							{characterCount.toLocaleString()} characters ·{` `}
+							{wordCount.toLocaleString()} words
+						</span>
+					</pane-heading>
+					<editor-surface>
+						<textarea
+							id="markdown-source"
+							ref={editorRef}
+							aria-label="Shared markdown source"
+							value={markdown}
+							disabled={
+								mosaic.status === `recovering` || mosaic.status === `syncing`
+							}
+							onChange={(event) => {
+								const { selectionStart, selectionEnd, value } =
+									event.currentTarget
+								mosaic.change({ text: value, type: `replace-text` })
+								selectionRef.current = document.selectionFromOffsets(
+									selectionStart,
+									selectionEnd,
+								)
+								publishSelection(selectionRef.current)
+							}}
+							onKeyDown={(event) => {
+								if (!(event.metaKey || event.ctrlKey) || event.key !== `z`)
+									return
+								event.preventDefault()
+								mosaic.change({ type: event.shiftKey ? `redo` : `undo` })
+							}}
+							onScroll={(event) => {
+								setScroll({
+									left: event.currentTarget.scrollLeft,
+									top: event.currentTarget.scrollTop,
+								})
+							}}
+							onSelect={(event) => {
+								rememberSelection(event.currentTarget)
+							}}
+							spellCheck
+						/>
+						<caret-layer aria-hidden="true">
+							{collaborators.map((person) => {
+								const relative = person.selection?.head
+								if (!relative) return null
+								const offset = document.resolvePosition(relative)
+								const { line, column } = lineAndColumnAt(markdown, offset)
+								const style: CaretStyle = {
+									"--caret-column": column,
+									"--caret-line": line,
+									"--person-color": person.color,
+									translate: `${-scroll.left}px ${-scroll.top}px`,
+								}
+								return (
+									<remote-caret key={person.clientId} style={style}>
+										<span>{person.name.split(` `)[0]}</span>
+									</remote-caret>
+								)
+							})}
+						</caret-layer>
+					</editor-surface>
+				</editor-pane>
+				<preview-pane>
+					<pane-heading>
+						<strong>Preview</strong>
+						<span>React-rendered · safe HTML</span>
+					</pane-heading>
+					<article>{preview}</article>
+				</preview-pane>
+				<presence-rail>
+					<strong>In this document</strong>
+					<ul>
+						{presence.map((person) => {
+							const offset = person.selection
+								? document.resolvePosition(person.selection.head)
+								: null
+							const line =
+								offset === null
+									? null
+									: lineAndColumnAt(markdown, offset).line + 1
+							return (
+								<li
+									key={person.clientId}
+									data-self={person.clientId === clientId}
+								>
+									<avatar-dot
+										style={{ "--person-color": person.color } as CSSProperties}
+									>
+										{person.name[0]}
+									</avatar-dot>
+									<person-label>
+										<strong>{person.name}</strong>
+										<span>
+											{person.clientId === clientId
+												? `You · editing now`
+												: line
+													? `Editing near line ${line}`
+													: `Viewing`}
+										</span>
+									</person-label>
+								</li>
+							)
+						})}
+					</ul>
+					<aside>
+						<strong>Undo without collisions</strong>
+						<p>
+							Your history removes only characters and deletion marks you
+							authored. Everyone else’s work stays put.
+						</p>
+					</aside>
+				</presence-rail>
+			</main>
+			<footer>
+				<span data-status={mosaic.status} />
+				<strong>
+					{mosaic.status === `live`
+						? `Realtime connected`
+						: getStatusLabel(mosaic.status, pending)}
+				</strong>
+				<small>Revision {mosaic.revision}</small>
+				{mosaic.problem ? <output>{mosaic.problem.reason}</output> : null}
+			</footer>
+		</markdown-workspace>
+	)
+}

package/src/collaboration/mosaic.ts

@@ -0,0 +1,46 @@
+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 }
+}

package/src/globals.css

@@ -0,0 +1,38 @@
+@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 {
+	font-family: "Manrope", system-ui, sans-serif;
+	color: #292936;
+	background: #f3f2f7;
+	font-synthesis: none;
+	text-rendering: optimizeLegibility;
+}
+
+* {
+	box-sizing: border-box;
+}
+
+html,
+body,
+#root {
+	min-width: 320px;
+	min-height: 100%;
+	margin: 0;
+}
+
+button,
+input,
+select,
+textarea {
+	font: inherit;
+}
+
+button,
+select {
+	cursor: pointer;
+}
+
+button:disabled,
+textarea:disabled {
+	cursor: not-allowed;
+}

package/src/identities.ts

@@ -0,0 +1,23 @@
+export type Identity = {
+	readonly color: string
+	readonly id: string
+	readonly name: string
+}
+
+export const SIMULATED_IDENTITIES = [
+	{ id: `maya`, name: `Maya Chen`, color: `#7c5cff` },
+	{ id: `theo`, name: `Theo Brooks`, color: `#eb5e8d` },
+	{ id: `samira`, name: `Samira Okafor`, color: `#1aa981` },
+	{ id: `noah`, name: `Noah Williams`, color: `#e8892f` },
+] as const satisfies readonly Identity[]
+
+export function identityById(id: string | null | undefined): Identity {
+	return (
+		SIMULATED_IDENTITIES.find((identity) => identity.id === id) ??
+		SIMULATED_IDENTITIES[0]
+	)
+}
+
+export function identityFromUserKey(userKey: string): Identity {
+	return identityById(userKey.replace(/^user::/, ``).split(`::`)[0])
+}

package/src/initial-markdown.ts

@@ -0,0 +1,22 @@
+export const INITIAL_MARKDOWN = `# Field notes for the launch
+
+Welcome to **Mosaic**, a realtime markdown room.
+
+## What we know
+
+- Everyone edits the same convergent document.
+- Presence is live and selections survive nearby edits.
+- Your undo only reverses _your_ last writing gesture.
+
+> Open this page in another tab and choose a different simulated teammate.
+
+## Ship list
+
+1. Tighten the opening story
+2. Add rollout owners
+3. Celebrate the tiny details
+
+\`\`\`ts
+const collaboration = "optimistic, ordered, and kind"
+\`\`\`
+`

package/src/main.tsx

@@ -0,0 +1,24 @@
+import "./globals.css"
+
+import { RealtimeProvider } from "atom.io/realtime-react"
+import { StrictMode } from "react"
+import { createRoot } from "react-dom/client"
+import { io } from "socket.io-client"
+
+import { MarkdownWorkspace } from "./MarkdownWorkspace.tsx"
+import { getBrowserSession, realtimeAuth } from "./session.ts"
+
+const session = getBrowserSession()
+const socket = io(window.location.origin, {
+	auth: realtimeAuth(session.identity, session.clientId),
+	reconnection: true,
+	reconnectionDelayMax: 4_000,
+})
+
+createRoot(document.getElementById(`root`)!).render(
+	<StrictMode>
+		<RealtimeProvider socket={socket}>
+			<MarkdownWorkspace {...session} />
+		</RealtimeProvider>
+	</StrictMode>,
+)

package/src/session.ts

@@ -0,0 +1,29 @@
+import { identityById } from "./identities.ts"
+
+import type { Identity } from "./identities.ts"
+
+const IDENTITY_KEY = `markdown-collab-identity`
+
+export function getBrowserSession(): { clientId: string; identity: Identity } {
+	const queryIdentity = new URL(window.location.href).searchParams.get(`as`)
+	const storedIdentity = window.localStorage.getItem(IDENTITY_KEY)
+	const identity = identityById(queryIdentity ?? storedIdentity)
+	window.localStorage.setItem(IDENTITY_KEY, identity.id)
+
+	const clientId = `browser:${window.crypto.randomUUID()}`
+	return { clientId, identity }
+}
+
+export function realtimeAuth(
+	identity: Identity,
+	clientId: string,
+): { sessionId: string; userId: string } {
+	return { sessionId: clientId, userId: identity.id }
+}
+
+export function switchBrowserIdentity(identityId: string): void {
+	window.localStorage.setItem(IDENTITY_KEY, identityId)
+	const url = new URL(window.location.href)
+	url.searchParams.set(`as`, identityId)
+	window.location.assign(url)
+}

package/src/vite-env.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="vite/client" />
+
+// eslint-disable-next-line quotes
+declare module "*.css"