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

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,72 +1,61 @@
-import { ReactNode, useRef } from 'react'
-import { createPortal } from 'react-dom'
+import { ReactNode, useCallback } from 'react'
 import {
+	EditorPortal,
 	TLComment,
-	TLCommentId,
-	useContainer,
+	TLCommentThread,
 	useEditor,
-	usePassThroughMouseOverEvents,
 	useTranslation,
 	useValue,
 } from 'tldraw'
-import { CommentListItemProps, CommentsList } from '../ui/comments-list'
-import { UNKNOWN_AUTHOR } from './comment-render'
+import { CommentListItemProps, CommentListItemRenderProps, CommentsList } from '../ui/comments-list'
+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 +64,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 +80,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 +97,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,41 +110,65 @@ 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)
 	}
 
+	// The `ThreadRow` component slot overrides the built-in row. It gets the thread record alongside
+	// the summarized row, so host state on `thread.meta` is in reach without a second lookup. Indexed
+	// once rather than scanned per row — this runs for every row on every render of the panel.
+	const ThreadRow = options.components.ThreadRow
+	const renderItem = ThreadRow
+		? (() => {
+				// Keyed by plain string: a row's id comes back as one, not as a branded thread id.
+				const threadsById = new Map<string, TLCommentThread>(
+					threads.map((thread) => [thread.id, thread])
+				)
+				return (rowProps: CommentListItemRenderProps) => {
+					const thread = threadsById.get(rowProps.id)
+					// Can't happen — the items are built from these threads — but a row with no thread has
+					// nothing to render, and the slot's contract says the record is there.
+					if (!thread) return null
+					return <ThreadRow {...rowProps} thread={thread} />
+				}
+			})()
+		: undefined
+
 	return (
-		<SidebarPanel container={container}>
+		<SidebarPanel>
 			<CommentsList
 				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={
@@ -164,21 +178,46 @@ export function CanvasCommentsSidebar(props: CanvasCommentsSidebarProps) {
 				}
 				resolvedLabel={msg('comments.resolved')}
 				onSelect={focus}
+				renderItem={renderItem}
 			/>
 		</SidebarPanel>
 	)
 }
 
+/** A list row paired with the sort key that isn't part of what the row displays. @public */
+export 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.)
+ *
+ * Exported so a hand-built list can match the sidebar's ordering instead of re-deriving it.
+ *
+ * @public
+ */
+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. */
-function SidebarPanel({ container, children }: { container: HTMLElement; children: ReactNode }) {
-	const ref = useRef<HTMLDivElement>(null)
-	usePassThroughMouseOverEvents(ref)
-	return createPortal(
-		<div ref={ref} className="cmt-canvas-sidebar">
-			{children}
-		</div>,
-		container
+ *  wheel-transparent panels — a wheel over it doesn't pan the canvas. */
+function SidebarPanel({ children }: { children: ReactNode }) {
+	return (
+		<EditorPortal>
+			<div className="tlui-cmt-canvas-sidebar" onContextMenu={(e) => e.stopPropagation()}>
+				{children}
+			</div>
+		</EditorPortal>
 	)
 }

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

@@ -0,0 +1,25 @@
+import { TldrawUiButton, useEditor, useTranslation, useValue } from 'tldraw'
+import { EyeClosedIcon, EyeOpenIcon } from '../ui/icons'
+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 (
+		<TldrawUiButton
+			type="icon"
+			tooltip={label}
+			title={label}
+			className="tlui-cmt-header-btn"
+			onClick={() => toggleCommentsHidden(editor)}
+		>
+			{hidden ? <EyeClosedIcon /> : <EyeOpenIcon />}
+		</TldrawUiButton>
+	)
+}

package/src/canvas/context.ts

@@ -0,0 +1,48 @@
+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 with every unread comment shown to the user in an open thread popover, batched per
+	 * report, so hosts can record read receipts without a write per comment. Needs
+	 * `isCommentUnread` to know what's unread.
+	 */
+	onCommentsRead?(commentIds: 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.test.ts

@@ -0,0 +1,94 @@
+import {
+	commentSchemaRecords,
+	createComment,
+	createCommentThread,
+	createTLSchema,
+	createTLStore,
+	defaultBindingUtils,
+	defaultShapeUtils,
+	defaultTools,
+	Editor,
+	toRichText,
+} from 'tldraw'
+import { afterEach, describe, expect, it } from 'vitest'
+import { putCommentRecords } from './comment-mutations'
+import { getCommentsByThread } from './hooks'
+
+let editors: Editor[] = []
+
+afterEach(() => {
+	for (const editor of editors) editor.dispose()
+	editors = []
+})
+
+function makeEditor(): Editor {
+	const editor = new Editor({
+		store: createTLStore({ schema: createTLSchema({ records: commentSchemaRecords }) }),
+		shapeUtils: defaultShapeUtils,
+		bindingUtils: defaultBindingUtils,
+		tools: defaultTools,
+		getContainer: () => document.body,
+	})
+	editors.push(editor)
+	return editor
+}
+
+function makeThreadWithComment(editor: Editor, text: string) {
+	const pageId = editor.getCurrentPageId()
+	const thread = createCommentThread({
+		pageId,
+		anchor: { type: 'point', x: 0, y: 0 },
+		createdBy: 'user1',
+	})
+	const comment = createComment({
+		threadId: thread.id,
+		pageId,
+		authorId: 'user1',
+		body: toRichText(text),
+	})
+	return { thread, comment }
+}
+
+describe('getCommentsByThread', () => {
+	it('groups live comments by thread, oldest first', () => {
+		const editor = makeEditor()
+		const { thread, comment } = makeThreadWithComment(editor, 'first')
+		const reply = createComment({
+			threadId: thread.id,
+			pageId: editor.getCurrentPageId(),
+			authorId: 'user2',
+			body: toRichText('second'),
+			now: comment.createdAt + 1,
+		})
+		// Inserted newest-first to prove the grouping sorts by createdAt rather than store order.
+		putCommentRecords(editor, [thread, reply, comment])
+		expect(getCommentsByThread(editor).get().get(thread.id)).toEqual([comment, reply])
+	})
+
+	it("reuses a thread's array when another thread's comments change", () => {
+		const editor = makeEditor()
+		const a = makeThreadWithComment(editor, 'thread a')
+		const b = makeThreadWithComment(editor, 'thread b')
+		putCommentRecords(editor, [a.thread, a.comment, b.thread, b.comment])
+
+		const byThread = getCommentsByThread(editor)
+		const before = byThread.get()
+
+		const replyToB = createComment({
+			threadId: b.thread.id,
+			pageId: editor.getCurrentPageId(),
+			authorId: 'user2',
+			body: toRichText('reply'),
+			now: b.comment.createdAt + 1,
+		})
+		putCommentRecords(editor, [replyToB])
+		const after = byThread.get()
+
+		expect(after).not.toBe(before)
+		// The unchanged thread keeps its exact array, so its subscribers don't re-render...
+		expect(after.get(a.thread.id)).toBe(before.get(a.thread.id))
+		// ...while the changed thread gets a fresh one with the reply in place.
+		expect(after.get(b.thread.id)).not.toBe(before.get(b.thread.id))
+		expect(after.get(b.thread.id)).toEqual([b.comment, replyToB])
+	})
+})

package/src/canvas/hooks.ts

@@ -1,28 +1,83 @@
-import { Editor, TLComment, TLCommentThread, TLCommentThreadId, useValue } from 'tldraw'
-import { getComments, getCommentThreads } from './comment-store'
+import {
+	computed,
+	Computed,
+	Editor,
+	isUninitialized,
+	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[]>>>()
+
+/** Exported for tests; use {@link useThreadComments} to consume. @internal */
+export function getCommentsByThread(editor: Editor) {
+	return commentsByThread.get(editor, () =>
+		computed('comments by thread', (prev) => {
+			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 [threadId, comments] of byThread) {
+				comments.sort((a, b) => a.createdAt - b.createdAt)
+				// Reuse the previous per-thread array when that thread's comment list is unchanged
+				// (record identities are stable while unchanged), so `useThreadComments` subscribers
+				// on other threads don't re-render when one thread gains a reply.
+				if (isUninitialized(prev)) continue
+				const prevComments = prev.get(threadId)
+				if (
+					prevComments &&
+					prevComments.length === comments.length &&
+					comments.every((comment, i) => prevComments[i] === comment)
+				) {
+					byThread.set(threadId, prevComments)
+				}
+			}
+			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/license.ts

@@ -7,7 +7,7 @@ import { useLicenseContext, useLicenseFeatureFlag } from 'tldraw'
  * pending, so gated UI stays hidden until the license is confirmed.
  *
  * The built-in commenting components (`CanvasComments`, `CanvasCommentsSidebar`, and the comment
- * tool's toolbar button) gate on this. Use it to gate any custom commenting UI the same way.
+ * tool's Quick Action) gate on this. Use it to gate any custom commenting UI the same way.
  * @public
  */
 export function useCommentingEnabled(): boolean {