@tldraw/commenting 5.6.0-next.d6710de420bf → 5.6.0-next.fb83f87b7388

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'
@@ -53,8 +54,8 @@ export function regionBetween(a: VecLike, b: VecLike): BoxModel {
  * release — like placing a sticky note — settling on a point, or on a shape when released over one.
  * With region comments enabled, dragging past the threshold draws a region rectangle instead.
  * Placement only opens a composer; the records are created when the comment is posted. The tool
- * stays active while the composer is open — posting returns to select, and clicking elsewhere
- * re-places the composer.
+ * stays active while the composer is open — posting returns to select, and so does clicking the
+ * canvas elsewhere, which cancels the placement.
  * @public
  */
 export class CommentTool extends StateNode {
@@ -113,6 +114,44 @@ export class CommentTool extends StateNode {
 	}
 }
 
+function pendingCommentAt(editor: Editor, point: VecLike): PendingComment {
+	const hit = commentTargetShapeAt(editor, point)
+	const anchor: TLCommentAnchor = hit
+		? shapeAnchorAt(
+				editor,
+				hit.id,
+				point,
+				getCommentingOptions(editor).shouldBePrecise(editor, {
+					shapeId: hit.id,
+					point,
+					altKey: editor.inputs.getAltKey(),
+				})
+			)
+		: { type: 'point', x: point.x, y: point.y }
+	return { anchor, point: { x: point.x, y: point.y } }
+}
+
+/**
+ * Open the comment composer at a page point, anchored as a comment tool click there would be. Use
+ * it to start a comment from outside the tool, such as a context menu item. Enters the comment tool
+ * (which must be registered), since the draft composer closes when the tool exits. It doesn't check
+ * `canComment`: a viewer who can't comment sees the `ComposerFallback` slot instead.
+ *
+ * @example
+ * ```tsx
+ * <TldrawUiMenuItem id="comment" label="Comment" onSelect={() => startCommentAt(editor, point)} />
+ * ```
+ * @public
+ */
+export function startCommentAt(editor: Editor, point: VecLike) {
+	editor.setCurrentTool('comment')
+	const pending = pendingCommentAt(editor, point)
+	pendingComment.set(editor, pending)
+	// Entering the tool hints the shape under the live pointer, which is wherever the caller's UI
+	// was (a menu item), not `point`.
+	editor.setHintingShapes(pending.anchor.type === 'shape' ? [pending.anchor.shapeId] : [])
+}
+
 /** Hint the shape a comment placed at the pointer would anchor to, using the same hit-test as the
  *  anchor resolution on release. Hinting shapes render an indicator ungated by the active tool, so
  *  this shows the select-style outline while the comment tool — not select — is active. */
@@ -142,6 +181,12 @@ class CommentIdle extends StateNode {
 	}
 
 	override onPointerDown() {
+		// A press away from an open composer cancels the placement rather than moving it. The
+		// tool's onExit drops the draft composer; its text survives in the draft store.
+		if (pendingComment.get(this.editor)) {
+			this.editor.setCurrentTool('select')
+			return
+		}
 		this.parent.transition('pointing')
 	}
 }
@@ -183,20 +228,7 @@ class CommentPointing extends StateNode {
 	override onPointerUp() {
 		const { editor } = this
 		const point = editor.inputs.getCurrentPagePoint()
-		const hit = commentTargetShapeAt(editor, point)
-		const anchor: TLCommentAnchor = hit
-			? shapeAnchorAt(
-					editor,
-					hit.id,
-					point,
-					getCommentingOptions(editor).shouldBePrecise(editor, {
-						shapeId: hit.id,
-						point,
-						altKey: editor.inputs.getAltKey(),
-					})
-				)
-			: { type: 'point', x: point.x, y: point.y }
-		pendingComment.set(editor, { anchor, point: { x: point.x, y: point.y } })
+		pendingComment.set(editor, pendingCommentAt(editor, point))
 		// Stay in the tool while the composer is open — the interaction isn't over until the
 		// comment is posted or dismissed, and staying keeps the surrounding UI (style panel,
 		// sidebar) from churning mid-placement.
@@ -277,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()
 
 /**
@@ -80,6 +86,9 @@ export function PendingComposer({
 			// A click in the composer, or in the mention picker it spawns (portaled elsewhere), is
 			// not "outside" — keep the draft open so the pick can insert.
 			if (el.contains(target) || target.closest('.tlui-cmt-mention-popup')) return
+			// A press on the canvas is the comment tool's to handle: it ends the placement and returns
+			// to select. Clearing here first would let that press re-place the composer instead.
+			if (editor.getContainer().querySelector('.tl-canvas')?.contains(target)) return
 			pendingComment.set(editor, null)
 		}
 		document.addEventListener('pointerdown', onPointerDown, true)
@@ -137,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)} />