@tldraw/commenting 5.6.0-canary.ff4411b6d84d → 5.6.0-next.01b6e97e0728

package/src/canvas/cluster-badge.tsx

@@ -1,5 +1,6 @@
 import { memo, useMemo, useRef } from 'react'
 import {
+	defineMessages,
 	Editor,
 	TLCommentThread,
 	useContainer,
@@ -14,6 +15,13 @@ import { type CommentingContext } from './context'
 import { sortThreadsForPreview, ThreadPreview, useMarkerPreview } from './thread-preview'
 import { impreciseShapePinInset, isInInflatedViewport } from './thread-state'
 
+const messages = defineMessages({
+	commentsClusterLabel: {
+		id: 'comments.cluster-label',
+		defaultMessage: '{count, plural, one {# comment here} other {# comments here}}',
+	},
+})
+
 /**
  * The count badge standing in for several threads folded together at the current zoom. Hovering it
  * previews its threads as a list; clicking zooms to the zoom level at which the cluster splits.
@@ -99,7 +107,7 @@ export const ClusterBadge = memo(function ClusterBadge({
 				type="button"
 				className="tlui-cmt-button tlui-cmt-canvas-cluster"
 				style={{ left: point.x, top: point.y }}
-				aria-label={msg('comments.cluster-label').replace('{count}', String(node.count))}
+				aria-label={msg(messages.commentsClusterLabel, { count: node.count })}
 				onPointerDown={(e) => {
 					if (isCanvasPanGesture(editor, e)) {
 						forwardPointerEventToCanvas(container, e)

package/src/canvas/comment-reactions.tsx

@@ -1,11 +1,13 @@
 import { useMemo } from 'react'
 import {
+	createCommentReaction,
+	createCommentReactionId,
+	defineMessages,
 	Editor,
 	TLComment,
 	TLCommentReaction,
-	createCommentReaction,
-	createCommentReactionId,
 	useEditor,
+	useTranslation,
 	useValue,
 } from 'tldraw'
 import { RenderReaction } from '../ui/reaction'
@@ -16,6 +18,10 @@ import { UNKNOWN_AUTHOR } from './comment-render'
 import { getCommentReactions } from './comment-store'
 import { getCommentingOptions, useCommentingOptions } from './options'
 
+const messages = defineMessages({
+	commentsUnknownAuthor: { id: 'comments.unknown-author', defaultMessage: 'Someone' },
+})
+
 /**
  * One comment's reactions, oldest first, reactively.
  *
@@ -52,15 +58,18 @@ export interface ReactionSummaryInput {
  * 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.
+ * name falls back to `unknownAuthorName`, never the raw user id. Pass a translated name for that:
+ * this is a plain function, so it can't reach the translations itself.
  *
  * @public
  */
 export function summarizeReactions(
 	reactions: readonly ReactionSummaryInput[],
 	currentUserId?: string | null,
-	resolveName?: (userId: string) => string | undefined
+	resolveName?: (userId: string) => string | undefined,
+	opts?: { unknownAuthorName?: string }
 ): ReactionSummary[] {
+	const unknownAuthorName = opts?.unknownAuthorName ?? UNKNOWN_AUTHOR
 	const groups = new Map<
 		string,
 		{ count: number; active: boolean; firstAt: number; reactors: ReactionSummary['reactors'] }
@@ -68,7 +77,7 @@ export function summarizeReactions(
 	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 reactor = { name: resolveName?.(reaction.userId) ?? unknownAuthorName, you: mine }
 		const group = groups.get(reaction.emoji)
 		if (group) {
 			group.count++
@@ -177,9 +186,11 @@ export function CommentReactions({ comment, currentUserId, resolveName }: Commen
 	const renderReaction = useReactionRenderer()
 	const { components } = useCommentingOptions()
 	const reactions = useCommentReactions(editor, comment.id)
+	const msg = useTranslation()
+	const unknownAuthorName = msg(messages.commentsUnknownAuthor)
 	const summaries = useMemo(
-		() => summarizeReactions(reactions, currentUserId, resolveName),
-		[reactions, currentUserId, resolveName]
+		() => summarizeReactions(reactions, currentUserId, resolveName, { unknownAuthorName }),
+		[reactions, currentUserId, resolveName, unknownAuthorName]
 	)
 	// 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

package/src/canvas/comment-render.ts

@@ -4,10 +4,12 @@ import { renderHtmlFromRichTextWithExtensions, TLRichText } from 'tldraw'
 import { commentTipTapExtensions, isCommentEmpty } from '../ui/comment-extensions'
 
 /**
- * The author name shown in a byline when no source can name an id (e.g. a deleted account, or a
- * member with no comment and no live presence). The toolkit's one generic default, applied where a
- * byline needs a name; hosts pre-empt it by resolving the id from `resolveAuthor`. Not a
- * translation key — a single English literal.
+ * The author name used when no source can name an id (e.g. a deleted account, or a member with no
+ * comment and no live presence). Hosts pre-empt it by resolving the id from `resolveAuthor`.
+ *
+ * The English fallback, for the places that can't translate: it's a module constant, so the UI
+ * reads `comments.unknown-author` instead and only lands here when there are no translations at
+ * all. Pass a translated name to {@link summarizeReactions} for the same reason.
  */
 export const UNKNOWN_AUTHOR = 'Someone'
 

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

@@ -10,9 +10,11 @@ import {
 	Editor,
 	TLShapeId,
 	TLStateNodeConstructor,
+	TLUiOverrideHelpers,
+	TLUiToolsContextType,
 } from 'tldraw'
 import { afterEach, beforeEach, describe, expect, it } from 'vitest'
-import { CommentTool, startCommentAt } from './comment-tool'
+import { CommentTool, commentToolOverrides, startCommentAt } from './comment-tool'
 import { commentsSidebarOpen, pendingComment, regionDraft } from './state'
 
 /**
@@ -197,6 +199,37 @@ describe('startCommentAt', () => {
 	})
 })
 
+describe('commentToolOverrides', () => {
+	let driver: Driver
+
+	function getCommentTool() {
+		const tools = commentToolOverrides.tools!(
+			editor,
+			{} as TLUiToolsContextType,
+			{} as TLUiOverrideHelpers
+		)
+		return tools.comment
+	}
+
+	beforeEach(() => {
+		driver = makeEditor()
+	})
+
+	it('opens the composer where the context menu was opened, not at the live pointer', () => {
+		driver.pointerDown(400, 300).pointerUp(400, 300)
+		driver.pointerMove(600, 500)
+		getCommentTool().onSelect('context-menu')
+		expect(editor.isIn('comment.idle')).toBe(true)
+		expect(pendingComment.get(editor)?.point).toEqual({ x: 400, y: 300 })
+	})
+
+	it('only enters the tool from other sources', () => {
+		getCommentTool().onSelect('quick-actions')
+		expect(editor.isIn('comment.idle')).toBe(true)
+		expect(pendingComment.get(editor)).toBeNull()
+	})
+})
+
 describe('comment tool placement hints with regions enabled', () => {
 	it('clears the hint when a drag becomes a region', () => {
 		const driver = makeEditor(CommentTool.configure({ enableRegions: true }))
@@ -297,3 +330,14 @@ describe('comment tool anchoring to frames', () => {
 		expect(editor.getHintingShapeIds()).toEqual([])
 	})
 })
+
+describe('commentToolOverrides', () => {
+	// The label is data the toolbar puts through `msg()`, so free text here renders as itself in
+	// every locale and the extractor never sees it — which is how this one shipped as 'Comment'
+	// and stayed English everywhere. It has to be a declared id.
+	it('labels the tool with a translatable id', () => {
+		makeEditor()
+		const tools = commentToolOverrides.tools!(editor, {}, {} as never)
+		expect(tools.comment.label).toBe('tool.comment')
+	})
+})

package/src/canvas/comment-tool.tsx

@@ -6,6 +6,7 @@ import {
 	TLStateNodeConstructor,
 	TLUiOverrides,
 	VecLike,
+	defineMessages,
 } from 'tldraw'
 import { type CommentingOptions, defaultCommentingOptions, getCommentingOptions } from './options'
 import { commentsSidebarOpen, pendingComment, regionDraft } from './state'
@@ -308,17 +309,27 @@ class CommentDragging extends StateNode {
 /** @public */
 export const commentTools = [CommentTool]
 
+const messages = defineMessages({
+	toolComment: { id: 'tool.comment', defaultMessage: 'Comment' },
+})
+
 /** Registers the comment tool in the UI (icon, label, shortcut). Compose into your overrides.
- *  Once registered, tldraw's `DefaultQuickActionsContent` shows the comment button.
+ *  Once registered, tldraw's `DefaultQuickActionsContent` shows the comment button, and its
+ *  `DefaultContextMenuContent` shows a comment item that opens the composer where the menu was
+ *  opened.
  * @public */
 export const commentToolOverrides: TLUiOverrides = {
 	tools(editor, tools) {
 		tools.comment = {
 			id: 'comment',
 			icon: 'comment',
-			label: 'Comment',
+			label: messages.toolComment.id,
 			kbd: 'c',
-			onSelect: () => editor.setCurrentTool('comment'),
+			onSelect: (source) => {
+				// The menu was opened by the last pointer down; the live pointer is over the menu now.
+				if (source === 'context-menu') startCommentAt(editor, editor.inputs.getOriginPagePoint())
+				else editor.setCurrentTool('comment')
+			},
 		}
 		return tools
 	},

package/src/canvas/comments-filter-menu.tsx

@@ -1,4 +1,5 @@
 import {
+	defineMessages,
 	TldrawUiButton,
 	TldrawUiDropdownMenuContent,
 	TldrawUiDropdownMenuRoot,
@@ -14,6 +15,14 @@ import { MoreMenuIcon } from '../ui/icons'
 import { SidebarFilters } from './sidebar-filters'
 import { sidebarFilters } from './state'
 
+const messages = defineMessages({
+	commentsFilter: { id: 'comments.filter', defaultMessage: 'Filter comments' },
+	commentsOnlyMyComments: { id: 'comments.only-my-comments', defaultMessage: 'Only my comments' },
+	commentsOnlyUnread: { id: 'comments.only-unread', defaultMessage: 'Only unread' },
+	commentsShowAllPages: { id: 'comments.show-all-pages', defaultMessage: 'Show all pages' },
+	commentsShowResolved: { id: 'comments.show-resolved', defaultMessage: 'Show resolved comments' },
+})
+
 /** @public */
 export interface CommentsFilterMenuProps {
 	/** Whether to offer the "only your threads" toggle (needs a known current user). */
@@ -40,8 +49,8 @@ export function CommentsFilterMenu({
 			<TldrawUiDropdownMenuTrigger>
 				<TldrawUiButton
 					type="icon"
-					tooltip={msg('comments.filter')}
-					title={msg('comments.filter')}
+					tooltip={msg(messages.commentsFilter)}
+					title={msg(messages.commentsFilter)}
 					className="tlui-cmt-header-btn"
 				>
 					<MoreMenuIcon />
@@ -54,14 +63,14 @@ export function CommentsFilterMenu({
 					<TldrawUiMenuGroup id="comments-filter">
 						<TldrawUiMenuCheckboxItem
 							id="show-all-pages"
-							label="comments.show-all-pages"
+							label={messages.commentsShowAllPages.id}
 							checked={!filters.onlyCurrentPage}
 							onSelect={() => toggle('onlyCurrentPage')}
 						/>
 						{canFilterByAuthor && (
 							<TldrawUiMenuCheckboxItem
 								id="only-my-comments"
-								label="comments.only-my-comments"
+								label={messages.commentsOnlyMyComments.id}
 								checked={filters.onlyMine}
 								onSelect={() => toggle('onlyMine')}
 							/>
@@ -69,14 +78,14 @@ export function CommentsFilterMenu({
 						{canFilterByUnread && (
 							<TldrawUiMenuCheckboxItem
 								id="only-unread"
-								label="comments.only-unread"
+								label={messages.commentsOnlyUnread.id}
 								checked={filters.onlyUnread}
 								onSelect={() => toggle('onlyUnread')}
 							/>
 						)}
 						<TldrawUiMenuCheckboxItem
 							id="show-resolved"
-							label="comments.show-resolved"
+							label={messages.commentsShowResolved.id}
 							checked={filters.showResolved}
 							onSelect={() => toggle('showResolved')}
 						/>

package/src/canvas/comments-menu-item.tsx

@@ -1,6 +1,10 @@
-import { TldrawUiMenuCheckboxItem, useEditor, useValue } from 'tldraw'
+import { defineMessages, TldrawUiMenuCheckboxItem, useEditor, useValue } from 'tldraw'
 import { commentsHidden, toggleCommentsHidden } from './state'
 
+const messages = defineMessages({
+	commentsTitle: { id: 'comments.title', defaultMessage: 'Comments' },
+})
+
 /**
  * A checkbox menu item for a "View" menu that shows/hides comment pins on the canvas — checked
  * when comments are visible, like tldraw's own grid/snap toggles. Reads and toggles the shared
@@ -14,7 +18,7 @@ export function CommentsMenuItem() {
 	return (
 		<TldrawUiMenuCheckboxItem
 			id="comments-visible"
-			label="comments.title"
+			label={messages.commentsTitle.id}
 			kbd="!c"
 			readonlyOk
 			checked={!hidden}

package/src/canvas/comments-overflow-menu.tsx

@@ -1,4 +1,5 @@
 import {
+	defineMessages,
 	TldrawUiButton,
 	TldrawUiDropdownMenuContent,
 	TldrawUiDropdownMenuGroup,
@@ -12,6 +13,12 @@ import {
 } from 'tldraw'
 import { commentsHidden, toggleCommentsHidden } from './state'
 
+const messages = defineMessages({
+	commentsMoreOptions: { id: 'comments.more-options', defaultMessage: 'More options' },
+	commentsHide: { id: 'comments.hide', defaultMessage: 'Hide comments' },
+	commentsShow: { id: 'comments.show', defaultMessage: 'Show comments' },
+})
+
 // A keyboard-shortcut glyph, not translatable copy — kept out of JSX as a constant.
 const HIDE_SHORTCUT = '⇧C'
 
@@ -28,11 +35,11 @@ export function CommentsOverflowMenu() {
 			<TldrawUiDropdownMenuTrigger>
 				<TldrawUiButton
 					type="icon"
-					tooltip={msg('comments.more-options')}
-					title={msg('comments.more-options')}
+					tooltip={msg(messages.commentsMoreOptions)}
+					title={msg(messages.commentsMoreOptions)}
 					className="tlui-cmt-header-btn"
 				>
-					<TldrawUiIcon icon="dots-vertical" label={msg('comments.more-options')} small />
+					<TldrawUiIcon icon="dots-vertical" label={msg(messages.commentsMoreOptions)} small />
 				</TldrawUiButton>
 			</TldrawUiDropdownMenuTrigger>
 			<TldrawUiDropdownMenuContent
@@ -49,7 +56,7 @@ export function CommentsOverflowMenu() {
 							className="tlui-cmt-menu-item"
 							onClick={() => toggleCommentsHidden(editor)}
 						>
-							<span>{hidden ? msg('comments.show') : msg('comments.hide')}</span>
+							<span>{hidden ? msg(messages.commentsShow) : msg(messages.commentsHide)}</span>
 							<span className="tlui-cmt-menu-item__shortcut">{HIDE_SHORTCUT}</span>
 						</button>
 					</TldrawUiDropdownMenuItem>

package/src/canvas/comments-sidebar.tsx

@@ -1,5 +1,12 @@
 import { ReactNode, useCallback } from 'react'
-import { EditorPortal, TLCommentThread, useEditor, useTranslation, useValue } from 'tldraw'
+import {
+	defineMessages,
+	EditorPortal,
+	TLCommentThread,
+	useEditor,
+	useTranslation,
+	useValue,
+} from 'tldraw'
 import { CommentListItemProps, CommentListItemRenderProps, CommentsList } from '../ui/comments-list'
 import { UNKNOWN_COMMENT_AUTHOR } from './comment-render'
 import { CommentsFilterMenu } from './comments-filter-menu'
@@ -12,6 +19,16 @@ import { richTextToPlaintext } from './rich-text'
 import { commentsSidebarOpen, openThreadId, sidebarFilters } from './state'
 import { focusThread } from './thread-state'
 
+const messages = defineMessages({
+	commentsEmpty: { id: 'comments.empty', defaultMessage: 'No comments on this page yet.' },
+	commentsEmptyFiltered: {
+		id: 'comments.empty-filtered',
+		defaultMessage: 'No comments match your filters.',
+	},
+	commentsResolved: { id: 'comments.resolved', defaultMessage: 'Resolved' },
+	commentsTitle: { id: 'comments.title', defaultMessage: 'Comments' },
+})
+
 /**
  * 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
@@ -146,22 +163,22 @@ export function CanvasCommentsSidebar(props: CanvasCommentsSidebarProps) {
 		<SidebarPanel>
 			<CommentsList
 				items={items}
-				header={header ?? msg('comments.title')}
+				header={header ?? msg(messages.commentsTitle)}
 				headerAction={
 					<div className="tlui-cmt-list__header-actions">
+						<CommentsVisibilityToggle />
 						<CommentsFilterMenu
 							canFilterByAuthor={currentUserId !== null}
 							canFilterByUnread={isCommentUnread !== undefined}
 						/>
-						<CommentsVisibilityToggle />
 					</div>
 				}
 				empty={
 					items.length === 0 && pageThreads.length > 0
-						? msg('comments.empty-filtered')
-						: (empty ?? msg('comments.empty'))
+						? msg(messages.commentsEmptyFiltered)
+						: (empty ?? msg(messages.commentsEmpty))
 				}
-				resolvedLabel={msg('comments.resolved')}
+				resolvedLabel={msg(messages.commentsResolved)}
 				onSelect={focus}
 				renderItem={renderItem}
 			/>

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

@@ -1,7 +1,12 @@
-import { TldrawUiButton, useEditor, useTranslation, useValue } from 'tldraw'
+import { defineMessages, TldrawUiButton, useEditor, useTranslation, useValue } from 'tldraw'
 import { EyeClosedIcon, EyeOpenIcon } from '../ui/icons'
 import { commentsHidden, toggleCommentsHidden } from './state'
 
+const messages = defineMessages({
+	commentsHide: { id: 'comments.hide', defaultMessage: 'Hide comments' },
+	commentsShow: { id: 'comments.show', defaultMessage: 'Show comments' },
+})
+
 /** 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 */
@@ -9,7 +14,7 @@ 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')
+	const label = hidden ? msg(messages.commentsShow) : msg(messages.commentsHide)
 
 	return (
 		<TldrawUiButton

package/src/canvas/options.ts

@@ -91,7 +91,7 @@ export interface CommentingComponents {
 	/**
 	 * The hover affordance naming who reacted with an emoji. Receives the reactors and the pill (as
 	 * `children`) and owns the whole thing — box, size, shape, position. For a wording change,
-	 * translate the `comments.reacted-*` strings instead.
+	 * translate the `comments.reacted` string instead.
 	 */
 	ReactionTooltip?: ComponentType<ReactionTooltipProps>
 	/**

package/src/canvas/pending-composer.tsx

@@ -3,6 +3,7 @@ import { useEffect, useRef, useState } from 'react'
 import {
 	createComment,
 	createCommentThread,
+	defineMessages,
 	Editor,
 	EditorPortal,
 	TLRichText,
@@ -27,6 +28,11 @@ import { useIsMobileCommenting, useMobilePlacement } from './mobile-placement'
 import { useCanComment, useCommentingOptions } from './options'
 import { pendingComment } from './state'
 
+const messages = defineMessages({
+	commentsSend: { id: 'comments.send', defaultMessage: 'Send' },
+	commentsAddPlaceholder: { id: 'comments.add-placeholder', defaultMessage: 'Add a comment…' },
+})
+
 const stop = (e: { stopPropagation(): void }) => e.stopPropagation()
 
 /**
@@ -140,8 +146,8 @@ export function PendingComposer({
 				{canComment ? (
 					<CommentComposer
 						author={me ?? UNKNOWN_COMMENT_AUTHOR}
-						placeholder={msg('comments.add-placeholder')}
-						sendLabel={msg('comments.send')}
+						placeholder={msg(messages.commentsAddPlaceholder)}
+						sendLabel={msg(messages.commentsSend)}
 						value={text}
 						onChange={(value) => {
 							setText(value)

package/src/canvas/thread-pin.tsx

@@ -8,9 +8,10 @@ import {
 	useState,
 } from 'react'
 import {
-	type BoxModel,
+	defineMessages,
 	Editor,
 	TLCommentThread,
+	type BoxModel,
 	useContainer,
 	usePassThroughWheelEvents,
 	useTranslation,
@@ -19,7 +20,7 @@ import {
 import { CommentPin } from '../ui/comment-pin'
 import { forwardPointerEventToCanvas, isCanvasPanGesture } from './canvas-events'
 import { commitCommentMutation } from './comment-mutations'
-import { UNKNOWN_AUTHOR, UNKNOWN_COMMENT_AUTHOR } from './comment-render'
+import { UNKNOWN_COMMENT_AUTHOR } from './comment-render'
 import { type CommentingContext } from './context'
 import { useThreadComments } from './hooks'
 import { getCommentingOptions, useCanComment, useCommentingOptions } from './options'
@@ -46,6 +47,15 @@ import {
 } from './thread-state'
 import { POPOVER_OFFSET, ThreadPopover, ThreadView } from './thread-view'
 
+const messages = defineMessages({
+	commentsUnknownAuthor: { id: 'comments.unknown-author', defaultMessage: 'Someone' },
+	commentsPinLabel: { id: 'comments.pin-label', defaultMessage: 'Comment by {name}' },
+	commentsPinLabelResolved: {
+		id: 'comments.pin-label-resolved',
+		defaultMessage: 'Resolved comment by {name}',
+	},
+})
+
 /** The opened popover has a header row the hover preview lacks, so it opens this much higher — the
  *  first comment then lands where the preview's sat. Re-measure if the header height or the preview
  *  panel padding changes. */
@@ -195,8 +205,11 @@ export const ThreadPin = memo(function ThreadPin({
 		<Avatar author={threadAuthor ?? UNKNOWN_COMMENT_AUTHOR} />
 	)
 	const pinLabel = msg(
-		thread.resolved ? 'comments.pin-label-resolved' : 'comments.pin-label'
-	).replace('{name}', threadAuthor?.name ?? UNKNOWN_AUTHOR)
+		thread.resolved ? messages.commentsPinLabelResolved : messages.commentsPinLabel,
+		{
+			name: threadAuthor?.name ?? msg(messages.commentsUnknownAuthor),
+		}
+	)
 
 	// Drag the marker to move the thread: position is overridden locally while dragging, then re-anchored
 	// on drop. A region translates keeping its size; a barely-moved pointer is a click.

package/src/canvas/thread-preview.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useMemo, useRef, type CSSProperties } from 'react'
 import {
+	defineMessages,
 	Editor,
 	EditorAtom,
 	EditorPortal,
@@ -17,6 +18,10 @@ import { useCommentingOptions } from './options'
 import { openStackId, openThreadId } from './state'
 import { POPOVER_OFFSET, toCardProps, useResolveName } from './thread-view'
 
+const messages = defineMessages({
+	commentsPreviewMore: { id: 'comments.preview-more', defaultMessage: '{count} more' },
+})
+
 /**
  * Hover previews for every canvas marker — a single pin, a coincident stack, or a cluster badge.
  * Hovering shows the thread(s) behind the marker as cards; the marker's own click is unchanged.
@@ -277,7 +282,7 @@ export function ThreadPreview({
 					})}
 					{overflow > 0 && (
 						<div className="tlui-cmt-preview-more">
-							{msg('comments.preview-more').replace('{count}', String(overflow))}
+							{msg(messages.commentsPreviewMore, { count: overflow })}
 						</div>
 					)}
 				</div>

package/src/canvas/thread-stack.tsx

@@ -1,5 +1,6 @@
 import { type MouseEvent as ReactMouseEvent, memo, useEffect, useRef } from 'react'
 import {
+	defineMessages,
 	Editor,
 	TLCommentThread,
 	usePassThroughWheelEvents,
@@ -8,7 +9,6 @@ import {
 } from 'tldraw'
 import { CommentCard } from '../ui/comment-card'
 import { CountBadge } from '../ui/count-badge'
-import { UNKNOWN_AUTHOR } from './comment-render'
 import { type CommentingContext } from './context'
 import { useThreadComments } from './hooks'
 import { useCommentingOptions } from './options'
@@ -24,6 +24,19 @@ import {
 	useResolveName,
 } from './thread-view'
 
+const messages = defineMessages({
+	commentsUnknownAuthor: { id: 'comments.unknown-author', defaultMessage: 'Someone' },
+	commentsPinLabel: { id: 'comments.pin-label', defaultMessage: 'Comment by {name}' },
+	commentsPinLabelResolved: {
+		id: 'comments.pin-label-resolved',
+		defaultMessage: 'Resolved comment by {name}',
+	},
+	commentsStackLabel: {
+		id: 'comments.stack-label',
+		defaultMessage: '{count, plural, one {# comment at this spot} other {# comments at this spot}}',
+	},
+})
+
 /**
  * The pin for threads whose anchors resolve to the same page point — pins zooming can never
  * separate, so they share one count badge. Clicking it lists each thread as a card; clicking a card
@@ -137,7 +150,7 @@ export const ThreadStackPin = memo(function ThreadStackPin({
 					ref={badgeRef}
 					type="button"
 					className="tlui-cmt-button tlui-cmt-canvas-stack-badge"
-					aria-label={msg('comments.stack-label').replace('{count}', String(threads.length))}
+					aria-label={msg(messages.commentsStackLabel, { count: threads.length })}
 					aria-expanded={open}
 					onPointerDown={(e) => e.stopPropagation()}
 					onClick={(e) => {
@@ -228,8 +241,12 @@ function StackThreadCard({
 				type="button"
 				className="tlui-cmt-button tlui-cmt-stack-list__card-action"
 				aria-label={msg(
-					thread.resolved ? 'comments.pin-label-resolved' : 'comments.pin-label'
-				).replace('{name}', props.resolveAuthor(thread.createdBy)?.name ?? UNKNOWN_AUTHOR)}
+					thread.resolved ? messages.commentsPinLabelResolved : messages.commentsPinLabel,
+					{
+						name:
+							props.resolveAuthor(thread.createdBy)?.name ?? msg(messages.commentsUnknownAuthor),
+					}
+				)}
 				onClick={open}
 			/>
 			<CommentCard {...toCardProps(first, props, options.components, resolveName)} />