@tldraw/commenting 0.0.0-bootstrap → 5.3.0-canary.04044ed9e96d

package/src/canvas/comment-mutations.ts

@@ -0,0 +1,299 @@
+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.
+ *
+ * The file layers bottom-up: {@link commitCommentMutation} resolves the history mode and hands its
+ * callback a writer, {@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.
+ * Every verb takes the record it acts on as the identity of what to change, not 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'
+
+interface CommentMutationWriter {
+	put(records: TLCommentRecord[]): void
+	remove(ids: (TLCommentId | TLCommentReactionId | TLCommentThreadId)[]): void
+}
+
+const activeCommentMutations = new WeakMap<Editor, { history: TLHistoryBatchOptions['history'] }>()
+
+/** 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.
+ *
+ * `editor.run`'s history option isn't additive — a nested run overwrites the enclosing mode — so
+ * constituent records go through the callback's writer instead of opening a commit of their own,
+ * which would quietly make a `drag` write non-undoable.
+ *
+ * Commits that nest are only a problem when they resolve to different modes, and then neither is
+ * the right one to keep, so it throws. Matching modes have to nest: a store side effect runs inside
+ * the write that triggered it, with no "after the commit" to defer to. (A `store.listen` handler
+ * normally flushes on a later frame, so its writes open a commit of their own, but a synchronous
+ * flush — as under test — lands it inside too.)
+ * @internal
+ */
+export function commitCommentMutation<T>(
+	editor: Editor,
+	fn: (writer: CommentMutationWriter) => T,
+	kind: CommentMutationKind = 'mutation'
+): T {
+	const history = historyModeFor(getCommentingOptions(editor), kind)
+	const enclosing = activeCommentMutations.get(editor)
+	if (enclosing && enclosing.history !== history) {
+		throw new Error(
+			`A comment mutation that records history as '${history}' can't run inside one recording it as '${enclosing.history}': one of the two modes would be silently discarded. Use the provided writer for constituent records, or run this operation after the enclosing one has committed.`
+		)
+	}
+
+	activeCommentMutations.set(editor, { history })
+	try {
+		let result: T
+		editor.run(
+			() => {
+				let isWriterActive = true
+				const assertWriterActive = () => {
+					if (!isWriterActive) {
+						throw new Error(
+							'A comment mutation writer cannot be used after its commit has finished.'
+						)
+					}
+				}
+				try {
+					result = fn({
+						put: (records) => {
+							assertWriterActive()
+							editor.store.put(records as unknown as TLRecord[])
+						},
+						remove: (ids) => {
+							assertWriterActive()
+							editor.store.remove(ids as unknown as TLRecord['id'][])
+						},
+					})
+				} finally {
+					isWriterActive = false
+				}
+			},
+			{ history }
+		)
+		return result!
+	} finally {
+		if (enclosing) {
+			activeCommentMutations.set(editor, enclosing)
+		} else {
+			activeCommentMutations.delete(editor)
+		}
+	}
+}
+
+/**
+ * Write comment records to the store, under the configured {@link CommentingOptions.history}
+ * behavior. Defaults to `'ignore'`.
+ *
+ * Use it to seed or import threads, and to save an edit. To delete, prefer {@link deleteComment}
+ * and {@link deleteThread}: comments are soft-deleted, and a synced server rejects the hard delete.
+ *
+ * @public
+ */
+export function putCommentRecords(editor: Editor, records: TLCommentRecord[]): void {
+	commitCommentMutation(editor, ({ put }) => put(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: the built-in UI soft-deletes
+ * ({@link deleteComment}, {@link deleteThread}) so the server can prune the records, and a server
+ * enforcing per-record permissions vetoes a hard delete outright. Reach for this on a local,
+ * unsynced store, or to drop a reaction (see {@link toggleCommentReaction}).
+ *
+ * @public
+ */
+export function removeCommentRecords(
+	editor: Editor,
+	ids: (TLCommentId | TLCommentReactionId | TLCommentThreadId)[]
+): void {
+	commitCommentMutation(editor, ({ remove }) => remove(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 and comment records move underneath it:
+ * deleting a pinned shape converts the anchor to a point, reparenting rehomes the thread, a drag
+ * re-anchors it. Writing the caller's snapshot back would revert those fields for everyone. `put`
+ * is also an upsert, so a record a remote delete already removed would come back.
+ *
+ * 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.
+ */
+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 renders the "(edited)" marker on its
+ * byline. Editing is the author's to do by default ({@link CommentingOptions.canModifyComment}),
+ * and a server enforcing per-record permissions rejects anyone else's. Widening one end without the
+ * other leaves an edit that's offered and then rejected, so widen both.
+ *
+ * The body lands on the version the store currently holds, so a stale copy can't revert a later
+ * change or re-create a removed comment — 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, ({ put }) => {
+		const current = readLatest(editor, comment)
+		if (!current) return
+		put([{ ...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 a stale copy can't drag
+ * a pin back. A no-op on a thread that's gone.
+ *
+ * @public
+ */
+export function resolveThread(editor: Editor, thread: TLCommentThread, userId: string): void {
+	commitCommentMutation(editor, ({ put }) => {
+		const current = readLatest(editor, thread)
+		if (!current) return
+		put([{ ...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, ({ put }) => {
+		const current = readLatest(editor, thread)
+		if (!current) return
+		put([{ ...current, resolved: null }])
+	})
+}
+
+/**
+ * Delete a comment.
+ *
+ * This is a soft delete: it sets `isDeleted` rather than removing the record, and the server prunes
+ * the comment and its reactions once the flag is persisted — so no client removes records it
+ * doesn't own, and a server enforcing per-record permissions has a write it can check.
+ *
+ * Deleting is the author's to do by default; {@link CommentingOptions.canModifyComment} widens
+ * that, as does its counterpart on the server.
+ *
+ * Never undoable, whatever {@link CommentingOptions.history} says: the flag is write-once
+ * server-side, so an undo clearing it would be vetoed rather than bring the comment back.
+ *
+ * Deleting a thread's last comment closes it and leaves the thread record for the server to prune,
+ * since the deleter may not be its creator. An already-deleted comment is a no-op.
+ *
+ * @public
+ */
+export function deleteComment(editor: Editor, comment: TLComment): void {
+	commitCommentMutation(
+		editor,
+		({ put }) => {
+			const current = readLatest(editor, comment)
+			// Deleting twice is nothing to do rather than something to redo. The check below counts this
+			// comment among the live ones, so it only reads as "the last one" while this delete takes 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)
+			}
+			put([{ ...current, isDeleted: true }])
+		},
+		'delete'
+	)
+}
+
+/**
+ * Delete a thread and, with it, the whole conversation.
+ *
+ * A soft delete on the same model as {@link deleteComment}: the server prunes the thread, its
+ * comments, and their reactions once the flag is persisted. Deleting a thread is its creator's to
+ * do by default ({@link CommentingOptions.canModifyComment}), and the write is never undoable.
+ * Closes the thread if it's the open one; a pruned thread is a no-op.
+ *
+ * @public
+ */
+export function deleteThread(editor: Editor, thread: TLCommentThread): void {
+	commitCommentMutation(
+		editor,
+		({ put }) => {
+			const current = readLatest(editor, thread)
+			if (!current) return
+			if (openThreadId.get(editor) === current.id) {
+				openThreadId.set(editor, null)
+			}
+			put([{ ...current, isDeleted: true }])
+		},
+		'delete'
+	)
+}

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

@@ -0,0 +1,154 @@
+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('summarizeReactions input', () => {
+	// the notifications panel tallies rows synced from the app database, which carry only the
+	// fields the tally needs — full TLCommentReaction records must not be required
+	it('accepts minimal rows with only userId, emoji, and createdAt', () => {
+		const rows = [
+			{ userId: 'user1', emoji: '👍', createdAt: 100 },
+			{ userId: 'user2', emoji: '👍', createdAt: 200 },
+		]
+		expect(summarizeReactions(rows, 'user1')).toEqual([
+			{
+				emoji: '👍',
+				count: 2,
+				active: true,
+				reactors: [
+					{ name: 'Someone', you: true },
+					{ name: 'Someone', you: false },
+				],
+			},
+		])
+	})
+})
+
+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,246 @@
+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 } 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]
+	)
+}
+
+/**
+ * The reaction fields {@link summarizeReactions} needs — a structural subset of
+ * {@link tldraw#TLCommentReaction}, so tallies can also be built from rows synced outside the
+ * editor store.
+ *
+ * @public
+ */
+export interface ReactionSummaryInput {
+	userId: string
+	emoji: string
+	createdAt: number
+}
+
+/**
+ * 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 current user's emoji and
+ * `reactors` lists who reacted, in reaction order. `resolveName` names each reactor; an id it can't
+ * name falls back to a generic "Someone", never the raw user id.
+ *
+ * @public
+ */
+export function summarizeReactions(
+	reactions: readonly ReactionSummaryInput[],
+	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 touches that user's
+ * own records and two people reacting at once never conflict. Behaviour depends on
+ * `allowMultipleReactions`:
+ *
+ * - **multiple** (default): the emoji toggles independently, leaving other reactions alone.
+ * - **single**: a new emoji replaces the user's existing reaction; the same one 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, ({ put, remove }) => {
+		if (removing) {
+			remove([targetId])
+			return
+		}
+		// Single-select: a new emoji replaces the user's existing reaction(s) on this comment.
+		if (!allowMultipleReactions && mine.length > 0) {
+			remove(mine.map((reaction) => reaction.id))
+		}
+		put([
+			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 a generic "Someone". */
+	resolveName?(userId: string): string | undefined
+}
+
+/**
+ * Adapts the `ReactionContent` override into a `renderReaction` function for the presentational
+ * components. Undefined when no override is set, so they fall back to drawing the token string.
+ */
+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 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)}
+		/>
+	)
+}