@tldraw/commenting 0.0.0-bootstrap → 5.3.0-canary.31036673d3f8

package/src/canvas/comment-mutations.ts

@@ -0,0 +1,288 @@
+import {
+	Editor,
+	TLComment,
+	TLCommentId,
+	TLCommentReactionId,
+	TLCommentThread,
+	TLCommentThreadId,
+	TLHistoryBatchOptions,
+	TLRecord,
+	TLRichText,
+} from 'tldraw'
+import { getCommentRecord, getLiveComments, type TLCommentRecord } from './comment-store'
+import { getCommentingOptions, type CommentingOptions } from './options'
+import { openThreadId } from './state'
+
+/**
+ * Every write to a comment record, and the undo/redo policy governing them.
+ *
+ * This file layers bottom-up: {@link commitCommentMutation} resolves the history mode,
+ * {@link putCommentRecords} and {@link removeCommentRecords} are the typed writes that run under
+ * it, and the verbs below are those writes plus the one rule each carries — a timestamp to stamp, a
+ * shape to put the `resolved` field in, or the soft-delete protocol. The built-in thread view calls
+ * exactly these verbs, so a UI of your own behaves the same as the one in the box.
+ *
+ * Every verb takes the record it acts on, but treats it as the identity of what to change rather
+ * than as the value to write back — see {@link readLatest}.
+ *
+ * Posting carries no such rule, so it isn't a verb here: build the records with
+ * `createCommentThread`/`createComment` and write them with {@link putCommentRecords}.
+ */
+
+/**
+ * Which history policy a comment write follows:
+ *
+ * - `mutation` — {@link CommentingOptions.history}: posts, replies, edits, resolves.
+ * - `drag` — {@link CommentingOptions.dragHistory}, falling back to `history`: pin and region
+ *   re-anchors, which are spatial edits a host may reasonably want undoable alongside a shape move.
+ * - `delete` — always `'ignore'`, whatever the options say. A soft-delete flag is write-once
+ *   server-side, so an undo clearing it would be vetoed and rebased rather than restore anything.
+ *
+ * @internal
+ */
+export type CommentMutationKind = 'delete' | 'drag' | 'mutation'
+
+/** The undo/redo mode a write of the given kind runs under. See {@link CommentMutationKind}. */
+function historyModeFor(
+	options: CommentingOptions,
+	kind: CommentMutationKind
+): TLHistoryBatchOptions['history'] {
+	switch (kind) {
+		case 'delete':
+			return 'ignore'
+		case 'drag':
+			return options.dragHistory ?? options.history
+		case 'mutation':
+			return options.history
+	}
+}
+
+/**
+ * Commit a comment mutation with the configured undo/redo behavior, so the
+ * {@link CommentingOptions.history} option governs whether it lands on the undo stack. Defaults to
+ * `'ignore'`. See {@link CommentMutationKind} for what each kind resolves to.
+ * @internal
+ */
+export function commitCommentMutation<T>(
+	editor: Editor,
+	fn: () => T,
+	kind: CommentMutationKind = 'mutation'
+): T {
+	const history = historyModeFor(getCommentingOptions(editor), kind)
+	let result: T
+	editor.run(
+		() => {
+			result = fn()
+		},
+		{ history }
+	)
+	return result!
+}
+
+/**
+ * Write records without opening a commit, for call sites that already sit inside one.
+ *
+ * `editor.run`'s history option isn't additive — a nested run overwrites the enclosing mode for its
+ * own scope — so a {@link putCommentRecords} call inside a commit would discard the mode its caller
+ * chose. A pin drag committed as `drag` under `dragHistory: 'record'` would land back on
+ * `history: 'ignore'` and quietly stop being undoable. Inside a commit, write with this.
+ *
+ * @internal
+ */
+export function putRecordsInCommit(editor: Editor, records: TLCommentRecord[]): void {
+	editor.store.put(records as unknown as TLRecord[])
+}
+
+/** {@link putRecordsInCommit}'s counterpart for removals. @internal */
+export function removeRecordsInCommit(
+	editor: Editor,
+	ids: (TLCommentId | TLCommentReactionId | TLCommentThreadId)[]
+): void {
+	editor.store.remove(ids as unknown as TLRecord['id'][])
+}
+
+/**
+ * Write comment records to the store, under the configured
+ * {@link CommentingOptions.history} behavior — so a record you write lands on the undo stack (or
+ * doesn't) exactly like one the built-in UI writes. Defaults to `'ignore'`.
+ *
+ * Use it to seed or import threads, and to save an edit. To delete, prefer
+ * {@link deleteComment} and {@link deleteThread} over {@link removeCommentRecords}: comments are
+ * soft-deleted, and a synced server rejects the hard delete.
+ *
+ * @public
+ */
+export function putCommentRecords(editor: Editor, records: TLCommentRecord[]): void {
+	commitCommentMutation(editor, () => putRecordsInCommit(editor, records))
+}
+
+/**
+ * Remove comment records from the store by id, under the configured
+ * {@link CommentingOptions.history} behavior.
+ *
+ * This is a hard delete, which is rarely what you want for a comment or a thread: the built-in UI
+ * soft-deletes them ({@link deleteComment}, {@link deleteThread}) so the server can prune the
+ * records — including reactions, which belong to whoever left them rather than to the deleter. A
+ * server that enforces per-record permissions will veto a hard delete outright. Reach for this on
+ * a local, unsynced comment store, or to drop a reaction (which is a hard delete — see
+ * {@link toggleCommentReaction}).
+ *
+ * @public
+ */
+export function removeCommentRecords(
+	editor: Editor,
+	ids: (TLCommentId | TLCommentReactionId | TLCommentThreadId)[]
+): void {
+	commitCommentMutation(editor, () => removeRecordsInCommit(editor, ids))
+}
+
+/**
+ * The record as the store currently holds it, or `undefined` if it isn't there any more.
+ *
+ * A verb is handed a record, but that record is a snapshot of whenever its caller got hold of one,
+ * and a comment record moves underneath it. A thread's `anchor` and `pageId` are rewritten without
+ * anyone touching the thread: deleting a pinned shape converts the anchor to a point, reparenting
+ * one rehomes the thread to another page, a pin drag re-anchors it. Writing the caller's snapshot
+ * back would put those fields as they were and sync the revert out to everyone.
+ *
+ * `put` is also an upsert, so a record a remote delete has already removed would come back — with
+ * `isDeleted: false` on an edit or a resolve. That's the multiplayer surprise the schema warns
+ * about (see `TLComment`), reached by a route the history option doesn't cover.
+ *
+ * So a verb reads what it's changing rather than trusting what it was given, and a record that's
+ * gone is a no-op: whatever the change was, there's nothing left for it to apply to.
+ */
+function readLatest<T extends TLComment | TLCommentThread>(
+	editor: Editor,
+	record: T
+): T | undefined {
+	const current = getCommentRecord(editor, record.id)
+	// Record ids carry their type, so a matching `typeName` means a record of exactly T.
+	return current?.typeName === record.typeName ? (current as T) : undefined
+}
+
+/**
+ * Replace a comment's body and stamp it as edited, which is what renders the "(edited)" marker on
+ * its byline.
+ *
+ * Editing is the author's to do. The built-in UI only offers it on your own comments, and a server
+ * that enforces per-record permissions rejects anyone else's edit.
+ *
+ * The `comment` you pass says which comment to edit; the body lands on the version the store
+ * currently holds, so a copy you've held on to can't revert a change made since it, and can't
+ * re-create a comment that's already been removed — editing one of those does nothing.
+ *
+ * @example
+ * ```ts
+ * editComment(editor, comment, toRichText('Actually, make it dashed'))
+ * ```
+ *
+ * @public
+ */
+export function editComment(editor: Editor, comment: TLComment, body: TLRichText): void {
+	commitCommentMutation(editor, () => {
+		const current = readLatest(editor, comment)
+		if (!current) return
+		putRecordsInCommit(editor, [{ ...current, body, editedAt: Date.now() }])
+	})
+}
+
+/**
+ * Mark a thread resolved, stamping who resolved it and when. Resolved threads keep their pin (a
+ * checked one) and are hidden from the sidebar until its "show resolved" filter is on.
+ *
+ * Only the resolution is written: the rest of the thread is read fresh, so resolving with a stale
+ * copy in hand won't drag a pin back to where it used to be. A no-op on a thread that's gone.
+ *
+ * @public
+ */
+export function resolveThread(editor: Editor, thread: TLCommentThread, userId: string): void {
+	commitCommentMutation(editor, () => {
+		const current = readLatest(editor, thread)
+		if (!current) return
+		putRecordsInCommit(editor, [{ ...current, resolved: { at: Date.now(), by: userId } }])
+	})
+}
+
+/**
+ * Reopen a resolved thread, clearing the resolution. A no-op on a thread that isn't resolved, and
+ * on one that's gone. Like {@link resolveThread}, it touches only the resolution.
+ *
+ * @public
+ */
+export function reopenThread(editor: Editor, thread: TLCommentThread): void {
+	commitCommentMutation(editor, () => {
+		const current = readLatest(editor, thread)
+		if (!current) return
+		putRecordsInCommit(editor, [{ ...current, resolved: null }])
+	})
+}
+
+/**
+ * Delete a comment.
+ *
+ * This is a soft delete: it sets the record's `isDeleted` flag rather than removing it, and the
+ * server prunes the comment and its reactions once the flag is persisted. That way no client ever
+ * removes records it doesn't own — a reaction belongs to whoever left it — and a server enforcing
+ * per-record permissions has a write it can check rather than a deletion it can only refuse.
+ * Deleting is the author's to do; the built-in UI only offers it on your own comments.
+ *
+ * The write is never undoable, whatever {@link CommentingOptions.history} says: the flag is
+ * write-once server-side, so an undo clearing it would be vetoed and rebased rather than bring the
+ * comment back.
+ *
+ * Deleting a thread's last comment leaves the thread with no surface — an empty thread renders
+ * nothing — and closes it if it's open. The thread record is left for the server to prune, since
+ * the deleter may not be its creator.
+ *
+ * A comment that's already deleted, or already pruned, is a no-op.
+ *
+ * @public
+ */
+export function deleteComment(editor: Editor, comment: TLComment): void {
+	commitCommentMutation(
+		editor,
+		() => {
+			const current = readLatest(editor, comment)
+			// Deleting twice — a double activation, a handler firing on a copy taken before the first
+			// delete — is nothing to do rather than something to redo. The check below counts the
+			// comment being deleted among the live ones, so it only reads as "the last one" while
+			// this delete is the one taking it away.
+			if (!current || current.isDeleted) return
+			const isLastInThread =
+				getLiveComments(editor).filter((c) => c.threadId === current.threadId).length <= 1
+			if (isLastInThread && openThreadId.get(editor) === current.threadId) {
+				openThreadId.set(editor, null)
+			}
+			putRecordsInCommit(editor, [{ ...current, isDeleted: true }])
+		},
+		'delete'
+	)
+}
+
+/**
+ * Delete a thread and, with it, the whole conversation.
+ *
+ * A soft delete on the same model as {@link deleteComment}: the flag goes on the thread record and
+ * the server prunes the thread, its comments, and their reactions once it's persisted. Deleting a
+ * thread is its creator's to do — a server enforcing per-record permissions vetoes anyone else —
+ * and the write is never undoable.
+ *
+ * Closes the thread if it's the open one. A thread that's already pruned is a no-op.
+ *
+ * @public
+ */
+export function deleteThread(editor: Editor, thread: TLCommentThread): void {
+	commitCommentMutation(
+		editor,
+		() => {
+			const current = readLatest(editor, thread)
+			if (!current) return
+			if (openThreadId.get(editor) === current.id) {
+				openThreadId.set(editor, null)
+			}
+			putRecordsInCommit(editor, [{ ...current, isDeleted: true }])
+		},
+		'delete'
+	)
+}

package/src/canvas/comment-reactions.test.ts

@@ -0,0 +1,132 @@
+import { TLComment, TLCommentId, TLCommentReaction, createCommentReactionId } from 'tldraw'
+import { describe, expect, it } from 'vitest'
+import { summarizeReactions } from './comment-reactions'
+
+const COMMENT_A = 'comment:a' as TLCommentId
+const COMMENT_B = 'comment:b' as TLCommentId
+
+function reaction(userId: string, emoji: string, createdAt: number): TLCommentReaction {
+	return {
+		id: createCommentReactionId(COMMENT_A, userId, emoji),
+		typeName: 'comment-reaction',
+		commentId: COMMENT_A,
+		threadId: 'comment-thread:t' as TLCommentReaction['threadId'],
+		pageId: 'page:page' as TLCommentReaction['pageId'],
+		userId,
+		emoji,
+		createdAt,
+		meta: {},
+	}
+}
+
+describe('summarizeReactions', () => {
+	it('returns nothing when there are no reactions', () => {
+		expect(summarizeReactions([], 'user1')).toEqual([])
+	})
+
+	it('counts each emoji, marks the current user’s active, and lists reactors', () => {
+		expect(
+			summarizeReactions(
+				[reaction('user1', '👍', 100), reaction('user2', '👍', 200), reaction('user3', '🎉', 300)],
+				'user1'
+			)
+		).toEqual([
+			{
+				emoji: '👍',
+				count: 2,
+				active: true,
+				// no resolveName here, so names fall back to the generic 'Someone'
+				reactors: [
+					{ name: 'Someone', you: true },
+					{ name: 'Someone', you: false },
+				],
+			},
+			{ emoji: '🎉', count: 1, active: false, reactors: [{ name: 'Someone', you: false }] },
+		])
+	})
+
+	// the row shouldn't reshuffle as later reactions land, so groups sort by first use
+	it('orders emoji by when each was first used', () => {
+		expect(
+			summarizeReactions(
+				[reaction('user1', '🎉', 300), reaction('user2', '👍', 100), reaction('user3', '👍', 200)],
+				undefined
+			).map((r) => r.emoji)
+		).toEqual(['👍', '🎉'])
+	})
+
+	it('marks nothing active when there is no current user', () => {
+		expect(summarizeReactions([reaction('user1', '👍', 100)], undefined)[0].active).toBe(false)
+	})
+
+	it('names reactors via resolveName, falling back to a generic name', () => {
+		const resolveName = (id: string) => (id === 'user1' ? 'Ada' : undefined)
+		expect(
+			summarizeReactions(
+				[reaction('user1', '👍', 100), reaction('user2', '👍', 200)],
+				'user1',
+				resolveName
+			)[0].reactors
+		).toEqual([
+			{ name: 'Ada', you: true },
+			// user2 can't be resolved — a generic name, never the raw id
+			{ name: 'Someone', you: false },
+		])
+	})
+
+	// reactors keep the order they're passed in (the caller sorts by reaction time), so the hover
+	// list is stable
+	it('lists reactors in input order', () => {
+		expect(
+			summarizeReactions(
+				[reaction('user2', '👍', 100), reaction('user1', '👍', 200)],
+				undefined,
+				(id) => id.toUpperCase()
+			)[0].reactors.map((r) => r.name)
+		).toEqual(['USER2', 'USER1'])
+	})
+})
+
+describe('createCommentReactionId', () => {
+	// the id is what makes reaction identity structural: re-picking the same emoji addresses the
+	// same record (toggle off), while a different emoji is its own record (independent)
+	it('is stable for the same comment, user, and emoji', () => {
+		expect(createCommentReactionId(COMMENT_A, 'user1', '👍')).toBe(
+			createCommentReactionId(COMMENT_A, 'user1', '👍')
+		)
+	})
+
+	it('differs per user, per comment, and per emoji', () => {
+		expect(createCommentReactionId(COMMENT_A, 'user1', '👍')).not.toBe(
+			createCommentReactionId(COMMENT_A, 'user2', '👍')
+		)
+		expect(createCommentReactionId(COMMENT_A, 'user1', '👍')).not.toBe(
+			createCommentReactionId(COMMENT_B, 'user1', '👍')
+		)
+		// same user + comment, different emoji → a distinct record (this is what enables multi-react)
+		expect(createCommentReactionId(COMMENT_A, 'user1', '👍')).not.toBe(
+			createCommentReactionId(COMMENT_A, 'user1', '🎉')
+		)
+	})
+
+	it('is a comment-reaction id, not a comment id', () => {
+		const id: string = createCommentReactionId(COMMENT_A, 'user1', '👍')
+		expect(id.startsWith('comment-reaction:')).toBe(true)
+	})
+})
+
+describe('reaction records', () => {
+	// a comment's reactions are found by commentId, so a reaction to another comment must not
+	// leak into this one's tally
+	it('are scoped to one comment by commentId', () => {
+		const forOtherComment: TLCommentReaction = {
+			...reaction('user9', '💩', 400),
+			commentId: COMMENT_B,
+		}
+		const all = [reaction('user1', '👍', 100), forOtherComment]
+		const mine = all.filter((r) => r.commentId === (COMMENT_A as TLComment['id']))
+		expect(summarizeReactions(mine, 'user1')).toEqual([
+			{ emoji: '👍', count: 1, active: true, reactors: [{ name: 'Someone', you: true }] },
+		])
+	})
+})

package/src/canvas/comment-reactions.tsx

@@ -0,0 +1,245 @@
+import { useMemo } from 'react'
+import {
+	Editor,
+	TLComment,
+	TLCommentReaction,
+	createCommentReaction,
+	createCommentReactionId,
+	useEditor,
+	useValue,
+} from 'tldraw'
+import { RenderReaction } from '../ui/reaction'
+import { ReactionPicker } from '../ui/reaction-picker'
+import { Reactions, ReactionSummary } from '../ui/reactions'
+import {
+	commitCommentMutation,
+	putRecordsInCommit,
+	removeRecordsInCommit,
+} from './comment-mutations'
+import { UNKNOWN_AUTHOR } from './comment-render'
+import { getCommentReactions } from './comment-store'
+import { getCommentingOptions, useCommentingOptions } from './options'
+
+/**
+ * One comment's reactions, oldest first, reactively.
+ *
+ * @public
+ */
+export function useCommentReactions(
+	editor: Editor,
+	commentId: TLComment['id']
+): TLCommentReaction[] {
+	return useValue(
+		'comment reactions',
+		() =>
+			getCommentReactions(editor)
+				.filter((reaction) => reaction.commentId === commentId)
+				.sort((a, b) => a.createdAt - b.createdAt),
+		[editor, commentId]
+	)
+}
+
+/**
+ * Tally a comment's reactions into an entry per emoji, ordered by when that emoji was first used
+ * so the row stays stable as later reactions arrive. `active` marks the emoji the current user
+ * reacted with (the pills render those highlighted), and `reactors` lists who reacted with it, in
+ * reaction order, for the hover list. `resolveName` names each reactor; an id it can't name falls
+ * back to the id itself.
+ *
+ * @public
+ */
+export function summarizeReactions(
+	reactions: TLCommentReaction[],
+	currentUserId?: string | null,
+	resolveName?: (userId: string) => string | undefined
+): ReactionSummary[] {
+	const groups = new Map<
+		string,
+		{ count: number; active: boolean; firstAt: number; reactors: ReactionSummary['reactors'] }
+	>()
+	for (const reaction of reactions) {
+		const mine = currentUserId != null && reaction.userId === currentUserId
+		// Fall back to a generic name, never the raw user id, when the id can't be resolved.
+		const reactor = { name: resolveName?.(reaction.userId) ?? UNKNOWN_AUTHOR, you: mine }
+		const group = groups.get(reaction.emoji)
+		if (group) {
+			group.count++
+			group.active ||= mine
+			group.firstAt = Math.min(group.firstAt, reaction.createdAt)
+			group.reactors.push(reactor)
+		} else {
+			groups.set(reaction.emoji, {
+				count: 1,
+				active: mine,
+				firstAt: reaction.createdAt,
+				reactors: [reactor],
+			})
+		}
+	}
+	return [...groups]
+		.sort(([, a], [, b]) => a.firstAt - b.firstAt)
+		.map(([emoji, group]) => ({
+			emoji,
+			count: group.count,
+			active: group.active,
+			reactors: group.reactors,
+		}))
+}
+
+/**
+ * Toggle one user's reaction with a given emoji on a comment.
+ *
+ * Each reaction is its own record keyed by (comment, user, emoji), so this only ever touches that
+ * one user's own records — two people reacting at once never conflict. Behaviour depends on the
+ * `allowMultipleReactions` option:
+ *
+ * - **multiple** (default): the emoji toggles independently — add it if absent, remove it if
+ *   present, leaving the user's other reactions alone.
+ * - **single**: picking a new emoji first removes the user's existing reaction(s) on the comment,
+ *   then adds this one (a replace); picking the one they already have removes it.
+ *
+ * @public
+ */
+export function toggleCommentReaction(
+	editor: Editor,
+	comment: TLComment,
+	userId: string,
+	emoji: string,
+	now = Date.now()
+): void {
+	const { allowMultipleReactions, isAllowedReaction } = getCommentingOptions(editor)
+	const targetId = createCommentReactionId(comment.id, userId, emoji)
+	const mine = getCommentReactions(editor).filter(
+		(reaction) => reaction.commentId === comment.id && reaction.userId === userId
+	)
+	const removing = mine.some((reaction) => reaction.id === targetId)
+	// Only a token the configured palette allows may be added. Removals always go through — if a
+	// reaction somehow carries an off-palette token, the user must still be able to clear it.
+	if (!removing && !isAllowedReaction(emoji)) return
+	commitCommentMutation(editor, () => {
+		if (removing) {
+			removeRecordsInCommit(editor, [targetId])
+			return
+		}
+		// Single-select: a new emoji replaces the user's existing reaction(s) on this comment.
+		if (!allowMultipleReactions && mine.length > 0) {
+			removeRecordsInCommit(
+				editor,
+				mine.map((reaction) => reaction.id)
+			)
+		}
+		putRecordsInCommit(editor, [
+			createCommentReaction({
+				commentId: comment.id,
+				threadId: comment.threadId,
+				pageId: comment.pageId,
+				userId,
+				emoji,
+				now,
+			}),
+		])
+	})
+}
+
+/** @public */
+export interface CommentReactionsProps {
+	comment: TLComment
+	/** The reacting user. Null/omitted gives a read-only row (signed out): counts show, but the
+	 *  pills don't toggle. */
+	currentUserId?: string | null
+	/** Names a reactor id for the hover list. Ids it can't name fall back to the id. */
+	resolveName?(userId: string): string | undefined
+}
+
+/**
+ * Adapts the `ReactionContent` component override (if any) into a `renderReaction` function for the
+ * presentational reaction components. Returns undefined when no override is set, so they fall back
+ * to the default (the token string, drawn by the OS emoji font).
+ */
+function useReactionRenderer(): RenderReaction | undefined {
+	const { components } = useCommentingOptions()
+	const ReactionContent = components.ReactionContent
+	return useMemo(
+		() => (ReactionContent ? (token: string) => <ReactionContent token={token} /> : undefined),
+		[ReactionContent]
+	)
+}
+
+/**
+ * The tallied reaction row under one comment. Pair with `CommentReactionPicker`, which is what
+ * adds a reaction.
+ * @public @react
+ */
+export function CommentReactions({ comment, currentUserId, resolveName }: CommentReactionsProps) {
+	const editor = useEditor()
+	const renderReaction = useReactionRenderer()
+	const { components } = useCommentingOptions()
+	const reactions = useCommentReactions(editor, comment.id)
+	const summaries = useMemo(
+		() => summarizeReactions(reactions, currentUserId, resolveName),
+		[reactions, currentUserId, resolveName]
+	)
+	// Suppress the hover list while any menu is open (the reaction picker, an overflow menu…) so it
+	// doesn't compete with the menu the user is actually working in. Edit mode already hides the
+	// pills entirely (the card becomes a composer), so it needs no special case here.
+	const anyMenuOpen = useValue('any menu open', () => editor.menus.getOpenMenus().length > 0, [
+		editor,
+	])
+	return (
+		<Reactions
+			reactions={summaries}
+			canReact={currentUserId != null}
+			enableHoverList={!anyMenuOpen}
+			renderReaction={renderReaction}
+			ReactionTooltip={components.ReactionTooltip}
+			onToggle={(value) => {
+				if (currentUserId == null) return
+				toggleCommentReaction(editor, comment, currentUserId, value)
+			}}
+		/>
+	)
+}
+
+/** @public */
+export interface CommentReactionPickerProps {
+	comment: TLComment
+	/** The reacting user. Null/omitted renders nothing — there's nobody to react as. */
+	currentUserId?: string | null
+	/** The emoji the picker offers. Defaults to `DEFAULT_REACTION_EMOJI`. */
+	emoji?: string[]
+}
+
+/**
+ * The add-reaction button for one comment. Belongs with the comment card's hover actions (under
+ * the ⋯ button) rather than in the reaction row, so opening it doesn't chase the row as reactions
+ * are added.
+ * @public @react
+ */
+export function CommentReactionPicker({
+	comment,
+	currentUserId,
+	emoji,
+}: CommentReactionPickerProps) {
+	const editor = useEditor()
+	const { components } = useCommentingOptions()
+	const renderReaction = useReactionRenderer()
+	const reactions = useCommentReactions(editor, comment.id)
+	const selected = useMemo(
+		() =>
+			reactions
+				.filter((reaction) => currentUserId != null && reaction.userId === currentUserId)
+				.map((reaction) => reaction.emoji),
+		[reactions, currentUserId]
+	)
+	if (currentUserId == null) return null
+	return (
+		<ReactionPicker
+			emoji={emoji}
+			selected={selected}
+			renderReaction={renderReaction}
+			palette={components.ReactionPalette}
+			menuId={`comment-reactions-${comment.id}`}
+			onSelect={(value) => toggleCommentReaction(editor, comment, currentUserId, value)}
+		/>
+	)
+}

package/src/canvas/comment-render.test.ts

@@ -38,7 +38,7 @@ describe('renderCommentHtml', () => {
 	it('renders a mention as a pill and resolves its id to the current name', () => {
 		const body = doc(para(text('hey '), mention('u1', 'Ada')))
 		const html = renderCommentHtml(body, (id) => (id === 'u1' ? 'Ada Lovelace' : '?'))
-		expect(html).toContain('cmt-mention')
+		expect(html).toContain('tlui-cmt-mention')
 		// the live name from the resolver, not the label stored at insert time
 		expect(html).toContain('@Ada Lovelace')
 		expect(html).not.toContain('@Ada<')