@tldraw/tlschema 5.3.0-next.fc37bd96825b → 5.3.1

package/src/records/TLComment.test.ts

@@ -0,0 +1,255 @@
+import { describe, expect, it } from 'vitest'
+import { createTLSchema } from '../createTLSchema'
+import { toRichText } from '../misc/TLRichText'
+import {
+	commentReactionRecordConfig,
+	commentRecordConfig,
+	commentSchemaRecords,
+	commentThreadRecordConfig,
+	createComment,
+	createCommentId,
+	createCommentReaction,
+	createCommentReactionId,
+	createCommentThread,
+	createCommentThreadId,
+	isCommentId,
+	isCommentReactionId,
+	isCommentThreadId,
+	TLCommentAnchor,
+} from './TLComment'
+import { TLPageId } from './TLPage'
+import { TLShapeId } from './TLShape'
+
+const pageId = 'page:page1' as TLPageId
+const shapeId = 'shape:box1' as TLShapeId
+
+const anchors: TLCommentAnchor[] = [
+	{ type: 'shape', shapeId, x: 1, y: 0, isPrecise: false },
+	{ type: 'point', x: 100, y: 200 },
+	{ type: 'region', x: 0, y: 0, w: 300, h: 150 },
+	{ type: 'page' },
+]
+
+describe('TLCommentThread', () => {
+	it.each(anchors)('creates a valid thread anchored to %j', (anchor) => {
+		const thread = createCommentThread({ pageId, anchor, createdBy: 'user1', now: 1000 })
+		expect(commentThreadRecordConfig.validator.validate(thread)).toEqual(thread)
+		expect(thread).toMatchObject({
+			typeName: 'comment-thread',
+			pageId,
+			anchor,
+			createdAt: 1000,
+			resolved: null,
+			meta: {},
+		})
+	})
+
+	it('validates resolution state', () => {
+		const thread = createCommentThread({
+			pageId,
+			anchor: { type: 'page' },
+			createdBy: 'user1',
+			now: 1000,
+		})
+		const resolved = { ...thread, resolved: { at: 2000, by: 'user2' } }
+		expect(commentThreadRecordConfig.validator.validate(resolved)).toEqual(resolved)
+		expect(() =>
+			commentThreadRecordConfig.validator.validate({ ...thread, resolved: { at: 2000 } })
+		).toThrow()
+	})
+
+	it('rejects unknown anchor kinds and malformed anchors', () => {
+		const thread = createCommentThread({
+			pageId,
+			anchor: { type: 'shape', shapeId, x: 1, y: 0, isPrecise: false },
+			createdBy: 'user1',
+			now: 1000,
+		})
+		expect(() =>
+			commentThreadRecordConfig.validator.validate({
+				...thread,
+				anchor: { type: 'volume', level: 11 },
+			})
+		).toThrow()
+		expect(() =>
+			commentThreadRecordConfig.validator.validate({
+				...thread,
+				// shape anchors must reference a shape id
+				anchor: { type: 'shape', shapeId: 'page:nope', x: 1, y: 0, isPrecise: false },
+			})
+		).toThrow()
+	})
+})
+
+describe('TLComment', () => {
+	const threadId = createCommentThreadId('thread1')
+
+	it('creates a valid comment with a rich text body', () => {
+		const comment = createComment({
+			threadId,
+			pageId,
+			authorId: 'user1',
+			body: toRichText('hello'),
+			now: 1000,
+		})
+		expect(commentRecordConfig.validator.validate(comment)).toEqual(comment)
+		expect(comment).toMatchObject({
+			typeName: 'comment',
+			threadId,
+			pageId,
+			createdAt: 1000,
+			editedAt: null,
+			isDeleted: false,
+		})
+	})
+
+	it('validates soft-deletion state', () => {
+		const comment = createComment({
+			threadId,
+			pageId,
+			authorId: 'user1',
+			body: toRichText('hello'),
+			now: 1000,
+		})
+		const deleted = { ...comment, isDeleted: true }
+		expect(commentRecordConfig.validator.validate(deleted)).toEqual(deleted)
+		expect(() => commentRecordConfig.validator.validate({ ...comment, isDeleted: 'yes' })).toThrow()
+	})
+
+	it('accepts an editedAt timestamp after edits', () => {
+		const comment = createComment({
+			threadId,
+			pageId,
+			authorId: 'user1',
+			body: toRichText('hello'),
+			now: 1000,
+		})
+		const edited = { ...comment, editedAt: 2000, body: toRichText('hello, edited') }
+		expect(commentRecordConfig.validator.validate(edited)).toEqual(edited)
+	})
+
+	it('rejects a threadId that is not a comment-thread id', () => {
+		const comment = createComment({
+			threadId,
+			pageId,
+			authorId: 'user1',
+			body: toRichText('hello'),
+			now: 1000,
+		})
+		expect(() =>
+			commentRecordConfig.validator.validate({ ...comment, threadId: 'comment:not-a-thread' })
+		).toThrow()
+	})
+})
+
+describe('schema registration', () => {
+	it('registers both record types via commentSchemaRecords', () => {
+		const schema = createTLSchema({ records: commentSchemaRecords })
+		// custom record types aren't part of the default TLRecord union, so index untyped
+		const types = schema.types as Record<string, { scope: string } | undefined>
+		expect(types['comment-thread']?.scope).toBe('document')
+		expect(types['comment']?.scope).toBe('document')
+	})
+})
+
+describe('isCommentThreadId / isCommentId', () => {
+	it('isCommentThreadId accepts comment-thread ids and rejects everything else', () => {
+		expect(isCommentThreadId(createCommentThreadId())).toBe(true)
+		expect(isCommentThreadId(createCommentId())).toBe(false)
+		expect(isCommentThreadId('shape:box1')).toBe(false)
+		expect(isCommentThreadId('not-an-id')).toBe(false)
+	})
+
+	it('isCommentId accepts comment ids and rejects everything else, including comment-thread ids', () => {
+		expect(isCommentId(createCommentId())).toBe(true)
+		expect(isCommentId(createCommentThreadId())).toBe(false)
+		expect(isCommentId('shape:box1')).toBe(false)
+		expect(isCommentId('not-an-id')).toBe(false)
+	})
+})
+
+describe('comment-thread migrations', () => {
+	const migration = (commentThreadRecordConfig.migrations as any).sequence.find(
+		(m: any) => m.id === 'com.tldraw.comment-thread/2'
+	) as { up(r: any): any; down(r: any): any }
+
+	it('stamps existing shape anchors with the top-right position (x:1, y:0)', () => {
+		expect(migration.up({ anchor: { type: 'shape', shapeId } })).toEqual({
+			anchor: { type: 'shape', shapeId, x: 1, y: 0, isPrecise: false },
+		})
+	})
+
+	it('leaves shape anchors that already have x/y unchanged', () => {
+		const anchor = { type: 'shape', shapeId, x: 0.25, y: 0.75, isPrecise: true }
+		expect(migration.up({ anchor })).toEqual({ anchor })
+	})
+
+	it('leaves non-shape anchors untouched', () => {
+		const anchor = { type: 'point', x: 5, y: 6 }
+		expect(migration.up({ anchor })).toEqual({ anchor })
+	})
+
+	it('down-migrates by dropping x/y', () => {
+		expect(
+			migration.down({ anchor: { type: 'shape', shapeId, x: 0.3, y: 0.4, isPrecise: true } })
+		).toEqual({
+			anchor: { type: 'shape', shapeId },
+		})
+	})
+})
+
+describe('comment-reaction record', () => {
+	it('createCommentReaction derives its id from the comment, user, and emoji', () => {
+		const commentId = createCommentId('c1')
+		const make = (emoji: string) =>
+			createCommentReaction({
+				commentId,
+				threadId: createCommentThreadId('t1'),
+				pageId,
+				userId: 'user1',
+				emoji,
+			})
+		// same emoji → same record (re-picking toggles it); different emoji → its own record (multi)
+		expect(make('👍').id).toBe(make('👍').id)
+		expect(make('👍').id).not.toBe(make('🎉').id)
+		expect(isCommentReactionId(make('👍').id)).toBe(true)
+	})
+
+	it('validates a well-formed reaction record', () => {
+		const reaction = createCommentReaction({
+			commentId: createCommentId('c1'),
+			threadId: createCommentThreadId('t1'),
+			pageId,
+			userId: 'user1',
+			emoji: '👍',
+		})
+		expect(commentReactionRecordConfig.validator.validate(reaction)).toEqual(reaction)
+	})
+
+	it('rejects an empty or oversized emoji token', () => {
+		const reaction = createCommentReaction({
+			commentId: createCommentId('c1'),
+			threadId: createCommentThreadId('t1'),
+			pageId,
+			userId: 'user1',
+			emoji: '👍',
+		})
+		// the reaction id embeds the emoji verbatim, so an unbounded token means an unbounded id
+		expect(() =>
+			commentReactionRecordConfig.validator.validate({ ...reaction, emoji: '' })
+		).toThrow()
+		expect(() =>
+			commentReactionRecordConfig.validator.validate({ ...reaction, emoji: 'x'.repeat(65) })
+		).toThrow()
+	})
+
+	it('createCommentReactionId is injective when a part contains a colon', () => {
+		// two different triples that a naive slice+join would collapse onto one id:
+		// comment "foo" + user "bar:baz" + 👍   vs   comment "foo:bar" + user "baz" + 👍
+		const a = createCommentReactionId(createCommentId('foo'), 'bar:baz', '👍')
+		const b = createCommentReactionId(createCommentId('foo:bar'), 'baz', '👍')
+		expect(a).not.toBe(b)
+		expect(isCommentReactionId(a)).toBe(true)
+		expect(isCommentReactionId(b)).toBe(true)
+	})
+})

package/src/records/TLComment.ts

@@ -0,0 +1,446 @@
+import { BaseRecord, RecordId, createRecordMigrationSequence } from '@tldraw/store'
+import { JsonObject } from '@tldraw/utils'
+import { T } from '@tldraw/validate'
+import { idValidator } from '../misc/id-validator'
+import { richTextValidator, TLRichText } from '../misc/TLRichText'
+import { CustomRecordInfo, createCustomRecordId, isCustomRecordId } from './TLCustomRecord'
+import { TLPageId } from './TLPage'
+import { TLShapeId } from './TLShape'
+
+/**
+ * Where a comment thread is anchored on the canvas. Modeled as a discriminated union so new
+ * anchor kinds can be added without breaking existing threads:
+ *
+ * - `shape` — pinned to a shape. `x`/`y` are normalized (0–1) within the shape's bounds, so the pin
+ *   keeps its spot as the shape moves, resizes, and rotates. `isPrecise` mirrors arrow bindings:
+ *   when false (the default) the pin sits at a consumer-defined spot instead, top-right out of the
+ *   box, and `x`/`y` are the remembered precise position
+ * - `point` — pinned to a fixed point on the page, in page coordinates
+ * - `region` — pinned to a rectangular area of the page, in page coordinates
+ * - `page` — a page-level thread with no spatial anchor
+ *
+ * @public
+ */
+export type TLCommentAnchor =
+	| { type: 'shape'; shapeId: TLShapeId; x: number; y: number; isPrecise: boolean }
+	| { type: 'point'; x: number; y: number }
+	| {
+			type: 'region'
+			x: number
+			y: number
+			w: number
+			h: number
+			/** The normalized (0–1) corner the pin sits on — where the creating drag was released.
+			 *  Absent on older records; consumers fall back to a corner of their own choosing. */
+			pinX?: number
+			pinY?: number
+	  }
+	| { type: 'page' }
+
+/**
+ * A comment thread. The thread owns the anchor (where the conversation lives on the canvas) and
+ * the resolution state; the messages themselves are `TLComment` records pointing at the thread
+ * via `threadId`, ordered by `createdAt`. v1 threads are flat — no nested replies.
+ *
+ * Threads and comments are document records, but they're intended to be served through the sync
+ * server's object-store lane: gated by the session's `objectAccess` rather than `isReadonly`
+ * (so "can comment but not edit" is expressible), excluded from document snapshots and `.tldr`
+ * exports server-side, and persisted in a separate lane from the main document.
+ *
+ * Opt-in: register with `createTLSchema({ records: commentSchemaRecords })` on the server and
+ * the matching `records` option on the client — neither type is part of the default schema, and
+ * both sides must register them identically.
+ *
+ * @public
+ */
+export interface TLCommentThread extends BaseRecord<'comment-thread', TLCommentThreadId> {
+	/** The page the thread lives on. */
+	pageId: TLPageId
+	/** Where the thread is anchored on that page. */
+	anchor: TLCommentAnchor
+	/** Who started the thread. Client-supplied; sync servers are expected to stamp/verify it. */
+	createdBy: string
+	createdAt: number
+	/** Resolution state: when and by whom the thread was resolved, or null while open. */
+	resolved: { at: number; by: string } | null
+	/**
+	 * Whether the thread is soft-deleted. Clients set the flag and leave the record in place. Sync
+	 * servers are expected to enforce it as write-once and creator-only, reject client hard
+	 * deletes, and drop flagged threads from future room loads.
+	 */
+	isDeleted: boolean
+	meta: JsonObject
+}
+
+/** @public */
+export type TLCommentThreadId = RecordId<TLCommentThread>
+
+/**
+ * A single comment message within a thread. See `TLCommentThread` for the overall model and
+ * sync/registration notes.
+ *
+ * Comment mutations are deliberately not undoable — create/edit them with
+ * `{ history: 'ignore' }` to avoid multiplayer surprises like a comment reappearing after
+ * someone else deleted it.
+ *
+ * @public
+ */
+export interface TLComment extends BaseRecord<'comment', TLCommentId> {
+	/** The thread this comment belongs to. */
+	threadId: TLCommentThreadId
+	/** Denormalized from the thread so per-page queries don't need a join. */
+	pageId: TLPageId
+	/** See `TLCommentThread.createdBy` — same server-stamping caveat applies. */
+	authorId: string
+	createdAt: number
+	/** Null until the comment is first edited. */
+	editedAt: number | null
+	/** Rich text body. Use `toRichText(...)` for plaintext input. */
+	body: TLRichText
+	/** Whether the comment is soft-deleted. Same model as `TLCommentThread.isDeleted`. */
+	isDeleted: boolean
+	meta: JsonObject
+}
+
+/** @public */
+export type TLCommentId = RecordId<TLComment>
+
+/**
+ * One person's emoji reaction to one comment.
+ *
+ * A reaction is its own record rather than a field on the comment: comment records are owner-only
+ * for updates, and a shared field would make concurrent reactions race to overwrite each other.
+ *
+ * A user holds at most one record per (comment, emoji) pair, enforced by the derived id — see
+ * `createCommentReactionId`. Limiting a user to one reaction overall is client-side policy (the
+ * commenting package's `reactionMode`), not a property of this record.
+ *
+ * @public
+ */
+export interface TLCommentReaction extends BaseRecord<'comment-reaction', TLCommentReactionId> {
+	/** The comment being reacted to. */
+	commentId: TLCommentId
+	/** Denormalized from the comment, so a thread's reactions can be found without a join. */
+	threadId: TLCommentThreadId
+	/** Denormalized from the comment — see `TLComment.pageId`. */
+	pageId: TLPageId
+	/** Who reacted. See `TLCommentThread.createdBy` — same server-stamping caveat applies. */
+	userId: string
+	/** The emoji itself, as a string (e.g. `'👍'`), not a shortcode. */
+	emoji: string
+	createdAt: number
+	meta: JsonObject
+}
+
+/** @public */
+export type TLCommentReactionId = RecordId<TLCommentReaction>
+
+/**
+ * An emoji shortcode or literal. Bounded because reaction ids embed the emoji verbatim
+ * (see {@link createCommentReactionId}), so an unbounded value means an unbounded record id.
+ */
+const emojiValidator = T.string.check((value) => {
+	if (value.length === 0 || value.length > 64) {
+		throw new T.ValidationError(`Expected an emoji of 1-64 characters, got ${value.length}`)
+	}
+})
+
+const commentAnchorValidator: T.Validator<TLCommentAnchor> = T.union('type', {
+	shape: T.object({
+		type: T.literal('shape'),
+		shapeId: idValidator<TLShapeId>('shape'),
+		x: T.number,
+		y: T.number,
+		isPrecise: T.boolean,
+	}),
+	point: T.object({
+		type: T.literal('point'),
+		x: T.number,
+		y: T.number,
+	}),
+	region: T.object({
+		type: T.literal('region'),
+		x: T.number,
+		y: T.number,
+		w: T.number,
+		h: T.number,
+		pinX: T.number.optional(),
+		pinY: T.number.optional(),
+	}),
+	page: T.object({
+		type: T.literal('page'),
+	}),
+})
+
+/**
+ * Guard migrations for the comment record types. Each sequence starts with an identity migration
+ * that has no `down`, so a session whose schema predates the comment types is rejected with
+ * CLIENT_TOO_OLD instead of being sent records its store can't represent.
+ */
+function createCommentGuardMigrations(
+	typeName: 'comment' | 'comment-thread' | 'comment-reaction',
+	extra: Parameters<typeof createRecordMigrationSequence>[0]['sequence'] = []
+) {
+	return createRecordMigrationSequence({
+		sequenceId: `com.tldraw.${typeName}`,
+		recordType: typeName,
+		retroactive: true,
+		sequence: [
+			{
+				id: `com.tldraw.${typeName}/1`,
+				up: (record) => record,
+			},
+			...extra,
+		],
+	})
+}
+
+/**
+ * Config for registering the `comment-thread` record type in a tldraw schema. Pass via
+ * `commentSchemaRecords`; see `TLCommentThread`.
+ *
+ * @public
+ */
+export const commentThreadRecordConfig: CustomRecordInfo = {
+	scope: 'document',
+	migrations: createCommentGuardMigrations('comment-thread', [
+		{
+			// Shape anchors gained normalized x/y + isPrecise; existing ones were imprecise (top-right).
+			id: 'com.tldraw.comment-thread/2',
+			up: (record) => {
+				const anchor = (record as any).anchor
+				if (anchor?.type === 'shape' && anchor.x === undefined) {
+					;(record as any).anchor = { ...anchor, x: 1, y: 0, isPrecise: false }
+				}
+				return record
+			},
+			down: (record) => {
+				const anchor = (record as any).anchor
+				if (anchor?.type === 'shape') {
+					;(record as any).anchor = { type: 'shape', shapeId: anchor.shapeId }
+				}
+				return record
+			},
+		},
+		{
+			// Region anchors gained an optional pin corner (where the creating drag released).
+			id: 'com.tldraw.comment-thread/3',
+			up: (record) => record,
+			down: (record) => {
+				const anchor = (record as any).anchor
+				if (anchor?.type === 'region') {
+					const { pinX: _pinX, pinY: _pinY, ...rest } = anchor
+					;(record as any).anchor = rest
+				}
+				return record
+			},
+		},
+	]),
+	validator: T.object({
+		id: idValidator<TLCommentThreadId>('comment-thread'),
+		typeName: T.literal('comment-thread'),
+		pageId: idValidator<TLPageId>('page'),
+		anchor: commentAnchorValidator,
+		createdBy: T.string,
+		createdAt: T.number,
+		resolved: T.object({ at: T.number, by: T.string }).nullable(),
+		isDeleted: T.boolean,
+		meta: T.jsonValue,
+	}),
+}
+
+/**
+ * Config for registering the `comment` record type in a tldraw schema. Pass via
+ * `commentSchemaRecords`; see `TLComment`.
+ *
+ * @public
+ */
+export const commentRecordConfig: CustomRecordInfo = {
+	scope: 'document',
+	migrations: createCommentGuardMigrations('comment'),
+	validator: T.object({
+		id: idValidator<TLCommentId>('comment'),
+		typeName: T.literal('comment'),
+		threadId: idValidator<TLCommentThreadId>('comment-thread'),
+		pageId: idValidator<TLPageId>('page'),
+		authorId: T.string,
+		createdAt: T.number,
+		editedAt: T.number.nullable(),
+		body: richTextValidator,
+		isDeleted: T.boolean,
+		meta: T.jsonValue,
+	}),
+}
+
+/**
+ * Config for registering the `comment-reaction` record type in a tldraw schema. Pass via
+ * `commentSchemaRecords`; see `TLCommentReaction`.
+ *
+ * @public
+ */
+export const commentReactionRecordConfig: CustomRecordInfo = {
+	scope: 'document',
+	migrations: createCommentGuardMigrations('comment-reaction'),
+	validator: T.object({
+		id: idValidator<TLCommentReactionId>('comment-reaction'),
+		typeName: T.literal('comment-reaction'),
+		commentId: idValidator<TLCommentId>('comment'),
+		threadId: idValidator<TLCommentThreadId>('comment-thread'),
+		pageId: idValidator<TLPageId>('page'),
+		userId: T.string,
+		emoji: emojiValidator,
+		createdAt: T.number,
+		meta: T.jsonValue,
+	}),
+}
+
+/**
+ * The `records` map to pass to `createTLSchema` / the client `records` option so comment
+ * threads, comments, and reactions sync. Register the types together — one without the others
+ * will fail schema validation on one side of the connection.
+ *
+ * @public
+ */
+export const commentSchemaRecords = {
+	'comment-thread': commentThreadRecordConfig,
+	comment: commentRecordConfig,
+	'comment-reaction': commentReactionRecordConfig,
+}
+
+/** @public */
+export function createCommentThreadId(id?: string): TLCommentThreadId {
+	return createCustomRecordId('comment-thread', id) as TLCommentThreadId
+}
+
+/** @public */
+export function createCommentId(id?: string): TLCommentId {
+	return createCustomRecordId('comment', id) as TLCommentId
+}
+
+/**
+ * The id of one user's reaction to one comment, derived from the (comment, user, emoji) triple
+ * rather than random, so the same triple always addresses the same record and two tabs converge
+ * instead of racing to create duplicates. The sync authorizer leans on this, so it must be
+ * injective: all three parts are URI-encoded before joining, so a `:` in any of them can't shift
+ * the boundary and collapse two triples onto one id.
+ *
+ * @public
+ */
+export function createCommentReactionId(
+	commentId: TLCommentId,
+	userId: string,
+	emoji: string
+): TLCommentReactionId {
+	return createCustomRecordId(
+		'comment-reaction',
+		`${encodeURIComponent(commentId)}:${encodeURIComponent(userId)}:${encodeURIComponent(emoji)}`
+	) as TLCommentReactionId
+}
+
+/**
+ * Type guard for `TLCommentThreadId`. `isCommentId` rejects these — `comment-thread:` and
+ * `comment:` differ in the character after `comment`, so the prefixes never overlap.
+ *
+ * @public
+ */
+export function isCommentThreadId(id: string): id is TLCommentThreadId {
+	return isCustomRecordId('comment-thread', id)
+}
+
+/**
+ * Type guard for `TLCommentId`. See `isCommentThreadId`.
+ *
+ * @public
+ */
+export function isCommentId(id: string): id is TLCommentId {
+	return isCustomRecordId('comment', id)
+}
+
+/**
+ * Type guard for `TLCommentReactionId`. See `isCommentThreadId`.
+ *
+ * @public
+ */
+export function isCommentReactionId(id: string): id is TLCommentReactionId {
+	return isCustomRecordId('comment-reaction', id)
+}
+
+/**
+ * Create a new comment thread record. Pair with `createComment` for the thread's first message.
+ *
+ * @public
+ */
+export function createCommentThread(props: {
+	pageId: TLPageId
+	anchor: TLCommentAnchor
+	createdBy: string
+	now?: number
+	meta?: JsonObject
+}): TLCommentThread {
+	return {
+		id: createCommentThreadId(),
+		typeName: 'comment-thread',
+		pageId: props.pageId,
+		anchor: props.anchor,
+		createdBy: props.createdBy,
+		createdAt: props.now ?? Date.now(),
+		resolved: null,
+		isDeleted: false,
+		meta: props.meta ?? {},
+	}
+}
+
+/**
+ * Create a new comment record within a thread.
+ *
+ * @public
+ */
+export function createComment(props: {
+	threadId: TLCommentThreadId
+	pageId: TLPageId
+	authorId: string
+	body: TLRichText
+	now?: number
+	meta?: JsonObject
+}): TLComment {
+	return {
+		id: createCommentId(),
+		typeName: 'comment',
+		threadId: props.threadId,
+		pageId: props.pageId,
+		authorId: props.authorId,
+		createdAt: props.now ?? Date.now(),
+		editedAt: null,
+		body: props.body,
+		isDeleted: false,
+		meta: props.meta ?? {},
+	}
+}
+
+/**
+ * Create a reaction record for one user's reaction to one comment. The id is derived from the
+ * comment and user (see `createCommentReactionId`), so re-reacting overwrites rather than adding.
+ *
+ * @public
+ */
+export function createCommentReaction(props: {
+	commentId: TLCommentId
+	threadId: TLCommentThreadId
+	pageId: TLPageId
+	userId: string
+	emoji: string
+	now?: number
+	meta?: JsonObject
+}): TLCommentReaction {
+	return {
+		id: createCommentReactionId(props.commentId, props.userId, props.emoji),
+		typeName: 'comment-reaction',
+		commentId: props.commentId,
+		threadId: props.threadId,
+		pageId: props.pageId,
+		userId: props.userId,
+		emoji: props.emoji,
+		createdAt: props.now ?? Date.now(),
+		meta: props.meta ?? {},
+	}
+}