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

package/src/canvas/comments-sidebar.test.ts

@@ -0,0 +1,45 @@
+import { describe, expect, it } from 'vitest'
+import type { CommentListItemProps } from '../ui/comments-list'
+import { sortSidebarRows } from './comments-sidebar'
+
+function row(id: string, lastActivity: number, resolved = false) {
+	return {
+		item: {
+			id,
+			resolved,
+			author: { id: 'user:1', name: 'A' },
+			preview: '',
+			date: '',
+		} as unknown as CommentListItemProps,
+		lastActivity,
+	}
+}
+
+describe('sortSidebarRows', () => {
+	it('orders threads by their most recent comment, not their first', () => {
+		// t1 was started first but was just replied to; t2 has been quiet since it was created.
+		const sorted = sortSidebarRows([row('t1', 300), row('t2', 200)])
+		expect(sorted.map((r) => r.item.id)).toEqual(['t1', 't2'])
+	})
+
+	it('sinks resolved threads below unresolved ones however recent they are', () => {
+		const sorted = sortSidebarRows([row('t1', 100), row('t2', 999, true), row('t3', 200)])
+		expect(sorted.map((r) => r.item.id)).toEqual(['t3', 't1', 't2'])
+	})
+
+	it('orders resolved threads among themselves by recency too', () => {
+		const sorted = sortSidebarRows([row('t1', 100, true), row('t2', 300, true)])
+		expect(sorted.map((r) => r.item.id)).toEqual(['t2', 't1'])
+	})
+
+	it('breaks activity ties by id so the list does not reshuffle', () => {
+		const sorted = sortSidebarRows([row('t3', 5), row('t1', 5), row('t2', 5)])
+		expect(sorted.map((r) => r.item.id)).toEqual(['t1', 't2', 't3'])
+	})
+
+	it('does not mutate the input', () => {
+		const input = [row('t1', 100), row('t2', 200)]
+		sortSidebarRows(input)
+		expect(input.map((r) => r.item.id)).toEqual(['t1', 't2'])
+	})
+})

package/src/canvas/comments-sidebar.tsx

@@ -1,8 +1,7 @@
-import { ReactNode, useRef } from 'react'
+import { ReactNode, useCallback, useRef } from 'react'
 import { createPortal } from 'react-dom'
 import {
 	TLComment,
-	TLCommentId,
 	useContainer,
 	useEditor,
 	usePassThroughMouseOverEvents,
@@ -10,63 +9,55 @@ import {
 	useValue,
 } from 'tldraw'
 import { CommentListItemProps, CommentsList } from '../ui/comments-list'
-import { UNKNOWN_AUTHOR } from './comment-render'
+import { UNKNOWN_COMMENT_AUTHOR } from './comment-render'
 import { CommentsFilterMenu } from './comments-filter-menu'
-import { CommentsOverflowMenu } from './comments-overflow-menu'
+import { CommentsVisibilityToggle } from './comments-visibility-toggle'
+import { type CommentingContext } from './context'
 import { useComments, useCommentThreads } from './hooks'
 import { useCommentingEnabled } from './license'
 import { useCommentingOptions } from './options'
 import { richTextToPlaintext } from './rich-text'
-import { openThreadId, sidebarFilters } from './state'
+import { commentsSidebarOpen, openThreadId, sidebarFilters } from './state'
 import { focusThread } from './thread-state'
 
-/** @public */
-export interface CanvasCommentsSidebarProps {
-	/** Map an author id to a display name, or `undefined` when the id can't be named. */
-	resolveName(id: string): string | undefined
-	/** The signed-in user's id. Enables the "only your threads" filter when present. */
-	currentUserId?: string
-	/**
-	 * Whether a comment is unread for the current user (return true for unread). Enables the
-	 * "only unread" filter when present.
-	 */
-	isCommentUnread?(commentId: TLCommentId): boolean
-	/** Tool ids that show the sidebar. Defaults to the comment tool. */
-	tools?: string[]
+/**
+ * The host wiring for {@link CanvasCommentsSidebar}: the {@link CommentingContext} fields it reads,
+ * plus the panel's own slots. A non-null `currentUserId` enables the "only your threads" filter, and
+ * an `isCommentUnread` the "only unread" one. `CanvasComments` takes the same fields, so a host
+ * mounting both can spread one object into each.
+ *
+ * @public
+ */
+export interface CanvasCommentsSidebarProps extends Pick<
+	CommentingContext,
+	'currentUserId' | 'resolveAuthor' | 'isCommentUnread' | 'getThreadHref'
+> {
 	/** Header above the list. */
 	header?: ReactNode
 	/** Shown when the page has no threads. */
 	empty?: ReactNode
-	/** Where imprecise shape pins sit, so navigation centres on the same spot. Default top-right. */
-	impreciseShapeAnchor?: { x: number; y: number }
 }
 
 /**
- * A comments list panel for the current page, shown while the comment tool is active. Clicking a
- * thread brings its pin into view and opens it. Batteries-included over the store (a sibling to
- * `CanvasComments`); `CommentsList` is exported for a differently-placed or always-on list.
+ * A comments list panel for the current page, shown while {@link commentsSidebarOpen} is set (e.g.
+ * toggled by a button). Clicking a thread brings its pin into view and opens it. Batteries-included
+ * over the store (a sibling to `CanvasComments`); `CommentsList` is exported for a differently-placed
+ * or always-on list.
  * @public @react
  */
 export function CanvasCommentsSidebar(props: CanvasCommentsSidebarProps) {
-	const {
-		resolveName,
-		currentUserId,
-		isCommentUnread,
-		tools,
-		header,
-		empty,
-		impreciseShapeAnchor,
-	} = props
+	const { resolveAuthor, currentUserId, isCommentUnread, header, empty, getThreadHref } = props
+	// Name-only view of the resolver, for the plaintext previews (which resolve @-mentions).
+	const resolveName = useCallback((id: string) => resolveAuthor(id)?.name, [resolveAuthor])
 	const editor = useEditor()
 	const options = useCommentingOptions()
-	const sidebarTools = tools ?? ['comment']
 	const container = useContainer()
 	const commentingEnabled = useCommentingEnabled()
 	const msg = useTranslation()
 	const threads = useCommentThreads(editor)
 	const comments = useComments(editor)
 	const currentPageId = useValue('page id', () => editor.getCurrentPageId(), [editor])
-	const activeTool = useValue('tool id', () => editor.getCurrentToolId(), [editor])
+	const open = useValue('sidebar open', () => commentsSidebarOpen.get(editor), [editor])
 	const openId = useValue('open thread', () => openThreadId.get(editor), [editor])
 	const filters = useValue('sidebar filters', () => sidebarFilters.get(editor), [editor])
 	const pageNames = useValue(
@@ -75,7 +66,7 @@ export function CanvasCommentsSidebar(props: CanvasCommentsSidebarProps) {
 		[editor]
 	)
 
-	if (!commentingEnabled || !sidebarTools.includes(activeTool)) return null
+	if (!commentingEnabled || !open) return null
 
 	// Group comments by thread (they arrive oldest-first, so [0] is each thread's first comment).
 	const byThread = new Map<string, TLComment[]>()
@@ -91,13 +82,12 @@ export function CanvasCommentsSidebar(props: CanvasCommentsSidebarProps) {
 		(thread) => !filters.onlyCurrentPage || thread.pageId === currentPageId
 	)
 
-	const items: CommentListItemProps[] = pageThreads
+	const rows: SidebarRow[] = pageThreads
 		.filter((thread) => filters.showResolved || thread.resolved == null)
 		// "Only mine" is ignored without a known user — otherwise a persisted onlyMine=true would
 		// empty the list for a signed-out viewer, with the (hidden) toggle giving no way to clear it.
 		.filter(
-			(thread) =>
-				!filters.onlyMine || currentUserId === undefined || thread.createdBy === currentUserId
+			(thread) => !filters.onlyMine || currentUserId === null || thread.createdBy === currentUserId
 		)
 		// "Only unread" is likewise ignored without a read-status source.
 		.filter(
@@ -109,6 +99,8 @@ export function CanvasCommentsSidebar(props: CanvasCommentsSidebarProps) {
 		.map((thread) => {
 			const threadComments = byThread.get(thread.id) ?? []
 			const first = threadComments[0]
+			// Comments arrive oldest-first, so the last one is the thread's most recent activity.
+			const last = threadComments[threadComments.length - 1]
 			let preview: ReactNode = ''
 			// The `ThreadPreview` component slot overrides the built-in plaintext default.
 			const ThreadPreview = options.components.ThreadPreview
@@ -120,27 +112,31 @@ export function CanvasCommentsSidebar(props: CanvasCommentsSidebarProps) {
 				)
 			}
 			return {
-				id: thread.id,
-				author: resolveName(thread.createdBy) ?? UNKNOWN_AUTHOR,
-				preview,
-				date: new Date((first ?? thread).createdAt).toISOString(),
-				resolved: thread.resolved != null,
-				page: pageNames.get(thread.pageId),
-				count: threadComments.length,
-				selected: openId === thread.id,
+				item: {
+					id: thread.id,
+					author: resolveAuthor(thread.createdBy) ?? UNKNOWN_COMMENT_AUTHOR,
+					preview,
+					date: new Date((first ?? thread).createdAt).toISOString(),
+					resolved: thread.resolved != null,
+					// The page label only earns its place when it adds information: multiple pages
+					// exist, and the thread is somewhere other than where you already are.
+					page:
+						pageNames.size > 1 && thread.pageId !== currentPageId
+							? pageNames.get(thread.pageId)
+							: undefined,
+					count: threadComments.length,
+					selected: openId === thread.id,
+					href: getThreadHref?.(thread.id),
+				},
+				lastActivity: (last ?? thread).createdAt,
 			}
 		})
-		// unresolved first, then most-recent first
-		.sort((a, b) => {
-			if (!!a.resolved !== !!b.resolved) return a.resolved ? 1 : -1
-			return b.date.localeCompare(a.date)
-		})
+
+	const items = sortSidebarRows(rows).map((row) => row.item)
 
 	const focus = (id: string) => {
 		const thread = threads.find((t) => t.id === id)
-		// Resolve prop-or-option like the overlay pins do, so sidebar navigation centers on the same
-		// spot the pin renders at when the anchor is configured via `CommentTool.configure`.
-		if (thread) focusThread(editor, thread, impreciseShapeAnchor ?? options.impreciseShapeAnchor)
+		if (thread) focusThread(editor, thread)
 	}
 
 	return (
@@ -149,12 +145,12 @@ export function CanvasCommentsSidebar(props: CanvasCommentsSidebarProps) {
 				items={items}
 				header={header ?? msg('comments.title')}
 				headerAction={
-					<div className="cmt-list__header-actions">
+					<div className="tlui-cmt-list__header-actions">
 						<CommentsFilterMenu
-							canFilterByAuthor={currentUserId !== undefined}
+							canFilterByAuthor={currentUserId !== null}
 							canFilterByUnread={isCommentUnread !== undefined}
 						/>
-						<CommentsOverflowMenu />
+						<CommentsVisibilityToggle />
 					</div>
 				}
 				empty={
@@ -169,6 +165,28 @@ export function CanvasCommentsSidebar(props: CanvasCommentsSidebarProps) {
 	)
 }
 
+/** A list row paired with the sort key that isn't part of what the row displays. */
+interface SidebarRow {
+	item: CommentListItemProps
+	/** When the thread's most recent comment was posted — what the list orders by. */
+	lastActivity: number
+}
+
+/**
+ * Order the list: unresolved threads first, then by most recent activity, id as a stable tiebreak.
+ * Recency is the thread's *latest* comment, not its first, so a thread someone just replied to rises
+ * to the top instead of staying wherever it was started. (The row still shows the thread's opening
+ * comment and its date — that's what identifies the thread; only the ordering follows the replies.)
+ */
+export function sortSidebarRows(rows: readonly SidebarRow[]): readonly SidebarRow[] {
+	return [...rows].sort(
+		(a, b) =>
+			Number(!!a.item.resolved) - Number(!!b.item.resolved) ||
+			b.lastActivity - a.lastActivity ||
+			(a.item.id < b.item.id ? -1 : 1)
+	)
+}
+
 /** The sidebar surface, portaled into the container. It scrolls its own list, so — unlike tldraw's
  *  wheel-transparent panels — a wheel over it doesn't pan the canvas. Hover still passes through so
  *  shapes beneath it stay interactive. */
@@ -176,7 +194,7 @@ function SidebarPanel({ container, children }: { container: HTMLElement; childre
 	const ref = useRef<HTMLDivElement>(null)
 	usePassThroughMouseOverEvents(ref)
 	return createPortal(
-		<div ref={ref} className="cmt-canvas-sidebar">
+		<div ref={ref} className="tlui-cmt-canvas-sidebar" onContextMenu={(e) => e.stopPropagation()}>
 			{children}
 		</div>,
 		container

package/src/canvas/comments-visibility-toggle.tsx

@@ -0,0 +1,49 @@
+import { useEditor, useTranslation, useValue } from 'tldraw'
+import { TooltipButton } from '../ui/tooltip-button'
+import { commentsHidden, toggleCommentsHidden } from './state'
+
+/** The sidebar header's show/hide toggle for comment pins — an eye that closes while comments
+ *  are hidden. The same state as the Shift+C shortcut.
+ * @public @react */
+export function CommentsVisibilityToggle() {
+	const editor = useEditor()
+	const msg = useTranslation()
+	const hidden = useValue('comments hidden', () => commentsHidden.get(editor), [editor])
+	const label = hidden ? msg('comments.show') : msg('comments.hide')
+
+	return (
+		<TooltipButton
+			tooltip={label}
+			className="tlui-cmt-header-btn"
+			onClick={() => toggleCommentsHidden(editor)}
+		>
+			{hidden ? <EyeClosedIcon /> : <EyeOpenIcon />}
+		</TooltipButton>
+	)
+}
+
+function EyeOpenIcon() {
+	return (
+		<svg width="15" height="15" viewBox="0 0 15 15" fill="none" aria-hidden="true">
+			<path
+				d="M7.5 11C4.80285 11 2.52952 9.62184 1.09622 7.50001C2.52952 5.37816 4.80285 4 7.5 4C10.1971 4 12.4705 5.37816 13.9038 7.5C12.4705 9.62183 10.1971 11 7.5 11ZM7.5 3C4.30786 3 1.65639 4.70638 0.0760002 7.23501C-0.0253338 7.39715 -0.0253334 7.60288 0.0760014 7.76501C1.65639 10.2936 4.30786 12 7.5 12C10.6921 12 13.3436 10.2936 14.924 7.76501C15.0253 7.60288 15.0253 7.39715 14.924 7.23501C13.3436 4.70638 10.6921 3 7.5 3ZM7.5 9.5C8.60457 9.5 9.5 8.60457 9.5 7.5C9.5 6.39543 8.60457 5.5 7.5 5.5C6.39543 5.5 5.5 6.39543 5.5 7.5C5.5 8.60457 6.39543 9.5 7.5 9.5Z"
+				fill="currentColor"
+				fillRule="evenodd"
+				clipRule="evenodd"
+			/>
+		</svg>
+	)
+}
+
+function EyeClosedIcon() {
+	return (
+		<svg width="15" height="15" viewBox="0 0 15 15" fill="none" aria-hidden="true">
+			<path
+				d="M14.7649 6.07596C14.9991 6.22231 15.0703 6.53079 14.9239 6.76495C14.4849 7.46743 13.9632 8.10645 13.3702 8.66305L14.5712 9.86406C14.7664 10.0593 14.7664 10.3759 14.5712 10.5712C14.3759 10.7664 14.0593 10.7664 13.8641 10.5712L12.6011 9.30817C11.805 9.90283 10.9089 10.3621 9.93375 10.651L10.383 12.3277C10.4544 12.5944 10.2961 12.8685 10.0294 12.94C9.76267 13.0115 9.4885 12.8532 9.41704 12.5865L8.95917 10.8775C8.48743 10.958 8.00036 11 7.50001 11C6.99965 11 6.51257 10.958 6.04082 10.8775L5.58299 12.5864C5.51153 12.8532 5.23737 13.0115 4.97064 12.94C4.7039 12.8686 4.5456 12.5944 4.61706 12.3277L5.06625 10.651C4.09111 10.3621 3.19503 9.90282 2.39889 9.30815L1.1359 10.5712C0.940638 10.7664 0.624058 10.7664 0.428798 10.5712C0.233537 10.3759 0.233537 10.0593 0.428798 9.86405L1.62982 8.66303C1.03682 8.10643 0.515113 7.46742 0.0760677 6.76495C-0.0702867 6.53079 0.000898544 6.22231 0.235065 6.07596C0.469231 5.9296 0.777703 6.00079 0.924058 6.23496C1.40354 7.00213 1.989 7.68057 2.66233 8.2427C2.67315 8.25096 2.6837 8.25972 2.69397 8.26898C4.00897 9.35527 5.65537 10 7.50001 10C10.3078 10 12.6564 8.5063 14.076 6.23495C14.2223 6.00079 14.5308 5.9296 14.7649 6.07596Z"
+				fill="currentColor"
+				fillRule="evenodd"
+				clipRule="evenodd"
+			/>
+		</svg>
+	)
+}

package/src/canvas/context.ts

@@ -0,0 +1,47 @@
+import { type CommentAuthor, type MentionMember } from '@tldraw/mentions'
+import { type ReactNode } from 'react'
+import { type TLComment, type TLCommentId, type TLCommentThreadId } from 'tldraw'
+
+/**
+ * The live, host-supplied half of commenting: who the viewer is, how author ids become names, read
+ * status, and the mention roster. (The static half is {@link CommentingOptions}, configured once on
+ * the tool.)
+ *
+ * Every commenting surface reads the same set, so a host mounting more than one — `CanvasComments`
+ * and `CanvasCommentsSidebar`, say — can build it once and spread it into each rather than
+ * repeating the props:
+ *
+ * ```tsx
+ * const commenting: CommentingContext = { currentUserId, resolveAuthor, isCommentUnread }
+ *
+ * <CanvasComments {...commenting} />
+ * <CanvasCommentsSidebar {...commenting} />
+ * ```
+ *
+ * @public
+ */
+export interface CommentingContext {
+	/** The signed-in user's id, or null for a read-only viewer. Only a signed-in user composes. */
+	currentUserId: string | null
+	/** Map an author id to their display info, or `undefined` when the id can't be resolved. */
+	resolveAuthor(id: string): CommentAuthor | undefined
+	/** Called after any comment (a new thread's first comment, or a reply) is posted. */
+	onPostComment?(comment: TLComment): void
+	/** Whether a comment is unread for the current user (return true for unread). */
+	isCommentUnread?(commentId: TLCommentId): boolean
+	/**
+	 * Called for each unread comment shown to the user in an open thread popover, so hosts can
+	 * record a read receipt. Needs `isCommentUnread` to know what's unread.
+	 */
+	onCommentRead?(commentId: TLCommentId): void
+	/** Resolve the members matching an `@`-query in the composers (sync or async). */
+	getMentionSuggestions?(query: string): MentionMember[] | Promise<MentionMember[]>
+	/** Override a mention-picker row's content. */
+	renderMentionSuggestion?(member: MentionMember): ReactNode
+	/**
+	 * The host's URL for a thread, so surfaces can link to it — e.g. the sidebar's rows render as
+	 * anchors when this is present, letting ctrl/cmd-click and middle-click open the thread in a
+	 * new tab (a plain click still selects the thread in place; the href isn't followed).
+	 */
+	getThreadHref?(threadId: TLCommentThreadId): string | undefined
+}

package/src/canvas/hooks.ts

@@ -1,28 +1,69 @@
-import { Editor, TLComment, TLCommentThread, TLCommentThreadId, useValue } from 'tldraw'
-import { getComments, getCommentThreads } from './comment-store'
+import {
+	computed,
+	Computed,
+	Editor,
+	TLComment,
+	TLCommentThread,
+	TLCommentThreadId,
+	useValue,
+	WeakCache,
+} from 'tldraw'
+import { getLiveComments, getLiveCommentThreads } from './comment-store'
 
-/** All comment threads in the store, reactively. @public */
+/**
+ * The comment threads that should render (pins, sidebar), reactively — the live set described by
+ * {@link getLiveCommentThreads}. Use `getCommentThreads` for the unfiltered set, including
+ * soft-deleted threads awaiting the server's prune.
+ *
+ * @public
+ */
 export function useCommentThreads(editor: Editor): TLCommentThread[] {
-	return useValue('comment threads', () => getCommentThreads(editor), [editor])
+	return useValue('comment threads', () => getLiveCommentThreads(editor), [editor])
 }
 
-/** A thread's comments, oldest first, reactively. @public */
+/**
+ * Every live comment grouped by thread, oldest first within each thread. One computed shared by
+ * every mounted thread: each `useThreadComments` would otherwise scan and sort the whole comment
+ * set, so N open threads did N full passes on every comment mutation. Cached per editor so the
+ * grouping survives re-renders and is rebuilt only when the comment set actually changes.
+ */
+const commentsByThread = new WeakCache<Editor, Computed<Map<TLCommentThreadId, TLComment[]>>>()
+
+function getCommentsByThread(editor: Editor) {
+	return commentsByThread.get(editor, () =>
+		computed('comments by thread', () => {
+			const byThread = new Map<TLCommentThreadId, TLComment[]>()
+			for (const comment of getLiveComments(editor)) {
+				const existing = byThread.get(comment.threadId)
+				if (existing) existing.push(comment)
+				else byThread.set(comment.threadId, [comment])
+			}
+			for (const comments of byThread.values()) {
+				comments.sort((a, b) => a.createdAt - b.createdAt)
+			}
+			return byThread
+		})
+	)
+}
+
+/** A thread's live comments, oldest first, reactively. @public */
 export function useThreadComments(editor: Editor, threadId: TLCommentThreadId): TLComment[] {
 	return useValue(
 		'thread comments',
-		() =>
-			getComments(editor)
-				.filter((c) => c.threadId === threadId)
-				.sort((a, b) => a.createdAt - b.createdAt),
+		() => getCommentsByThread(editor).get().get(threadId) ?? EMPTY_COMMENTS,
 		[editor, threadId]
 	)
 }
 
-/** Every comment in the store, oldest first, reactively. Group by `threadId` for per-thread lists. @public */
+/** Shared empty result so a thread with no comments doesn't churn referential equality. */
+const EMPTY_COMMENTS: TLComment[] = []
+
+/** Every live comment in the store ({@link getLiveComments}), oldest first, reactively. Group by
+ *  `threadId` for per-thread lists. @public */
 export function useComments(editor: Editor): TLComment[] {
 	return useValue(
 		'all comments',
-		() => getComments(editor).sort((a, b) => a.createdAt - b.createdAt),
+		() => getLiveComments(editor).sort((a, b) => a.createdAt - b.createdAt),
 		[editor]
 	)
 }

package/src/canvas/options.test.ts

@@ -1,8 +1,14 @@
 import type { Editor } from 'tldraw'
 import { describe, expect, it } from 'vitest'
+import { commitCommentMutation } from './comment-mutations'
 import { CommentTool } from './comment-tool'
-import { defaultCommentingOptions, getCommentingOptions, type CommentingOptions } from './options'
-import { commitCommentMutation, openThreadId, pendingComment } from './state'
+import {
+	defaultCommentingOptions,
+	getCanComment,
+	getCommentingOptions,
+	type CommentingOptions,
+} from './options'
+import { openThreadId, pendingComment } from './state'
 
 // The StateNode constructor doesn't call any editor methods, so a bare stub is enough to
 // instantiate a configured tool and read its merged options.
@@ -78,6 +84,50 @@ describe('getCommentingOptions', () => {
 	})
 })
 
+describe('getCanComment', () => {
+	it('defaults to requiring a current user', () => {
+		const { editor } = stubEditor(defaultCommentingOptions)
+		expect(getCanComment(editor, 'alice')).toBe(true)
+		expect(getCanComment(editor, null)).toBe(false)
+		expect(getCanComment(editor, undefined)).toBe(false)
+	})
+
+	it('normalizes an undefined viewer to null for the callback', () => {
+		const calls: Array<string | null> = []
+		const { editor } = stubEditor({
+			...defaultCommentingOptions,
+			canComment: (ctx) => {
+				calls.push(ctx.currentUserId)
+				return false
+			},
+		})
+		getCanComment(editor, undefined)
+		expect(calls).toEqual([null])
+	})
+
+	it('delegates to the canComment callback, passing the editor and viewer', () => {
+		const calls: Array<{ editor: Editor; currentUserId: string | null }> = []
+		const { editor } = stubEditor({
+			...defaultCommentingOptions,
+			canComment: (ctx) => {
+				calls.push(ctx)
+				return ctx.currentUserId === 'alice'
+			},
+		})
+		expect(getCanComment(editor, 'alice')).toBe(true)
+		expect(getCanComment(editor, 'bob')).toBe(false)
+		expect(calls).toEqual([
+			{ editor, currentUserId: 'alice' },
+			{ editor, currentUserId: 'bob' },
+		])
+	})
+
+	it('lets the callback fully replace the signed-in default', () => {
+		const { editor } = stubEditor({ ...defaultCommentingOptions, canComment: () => true })
+		expect(getCanComment(editor, null)).toBe(true)
+	})
+})
+
 describe('commitCommentMutation', () => {
 	it('uses options.history for a mutation and returns the callback result', () => {
 		const { editor, runCalls } = stubEditor({