@tldraw/commenting 5.6.0-next.c4e9c54a816e → 5.6.0-next.f151f7f3ebd6

package/src/canvas/thread-view.tsx

@@ -1,11 +1,11 @@
 import { memo, ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import {
 	createComment,
+	defineMessages,
 	Editor,
 	EditorPortal,
 	TLComment,
 	TLCommentThread,
-	TLRichText,
 	TldrawUiButton,
 	TldrawUiDropdownMenuContent,
 	TldrawUiDropdownMenuGroup,
@@ -13,6 +13,7 @@ import {
 	TldrawUiDropdownMenuRoot,
 	TldrawUiDropdownMenuTrigger,
 	TldrawUiIcon,
+	TLRichText,
 	useContainer,
 	usePassThroughWheelEvents,
 	useTranslation,
@@ -38,7 +39,7 @@ import {
 	resolveThread,
 } from './comment-mutations'
 import { CommentReactionPicker, CommentReactions } from './comment-reactions'
-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 { useIsMobileCommenting, useMobilePlacement } from './mobile-placement'
@@ -51,6 +52,28 @@ import {
 } from './options'
 import { openThreadId } from './state'
 
+const messages = defineMessages({
+	actionDelete: { id: 'action.delete', defaultMessage: 'Delete' },
+	commentsCopyLink: { id: 'comments.copy-link', defaultMessage: 'Copy link' },
+	commentsDelete: { id: 'comments.delete', defaultMessage: 'Delete thread' },
+	commentsDismiss: { id: 'comments.dismiss', defaultMessage: 'Dismiss' },
+	commentsEdit: { id: 'comments.edit', defaultMessage: 'Edit' },
+	commentsEditPlaceholder: {
+		id: 'comments.edit-placeholder',
+		defaultMessage: 'Edit comment…',
+	},
+	commentsLinkCopied: { id: 'comments.link-copied', defaultMessage: 'Link copied' },
+	commentsMoreOptions: { id: 'comments.more-options', defaultMessage: 'More options' },
+	commentsReopen: { id: 'comments.reopen', defaultMessage: 'Reopen' },
+	commentsReplyPlaceholder: { id: 'comments.reply-placeholder', defaultMessage: 'Reply…' },
+	commentsResolve: { id: 'comments.resolve', defaultMessage: 'Resolve' },
+	commentsResolvedBy: { id: 'comments.resolved-by', defaultMessage: 'Resolved by {name}' },
+	commentsSave: { id: 'comments.save', defaultMessage: 'Save' },
+	commentsSend: { id: 'comments.send', defaultMessage: 'Send' },
+	commentsThreadTitle: { id: 'comments.thread-title', defaultMessage: 'Comment' },
+	commentsUnknownAuthor: { id: 'comments.unknown-author', defaultMessage: 'Someone' },
+})
+
 const stop = (e: { stopPropagation(): void }) => e.stopPropagation()
 
 /** The "⋯" dropdown used for both a comment's and the thread's actions. */
@@ -70,12 +93,12 @@ function MoreOptionsMenu({
 			<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-thread__action"
 					data-cmt-more-for={moreFor}
 				>
-					<TldrawUiIcon icon="dots-vertical" label={msg('comments.more-options')} small />
+					<TldrawUiIcon icon="dots-vertical" label={msg(messages.commentsMoreOptions)} small />
 				</TldrawUiButton>
 			</TldrawUiDropdownMenuTrigger>
 			<TldrawUiDropdownMenuContent
@@ -459,11 +482,11 @@ export const ThreadView = memo(function ThreadView({
 				>
 					<CommentComposer
 						author={card.author}
-						placeholder={msg('comments.edit-placeholder')}
+						placeholder={msg(messages.commentsEditPlaceholder)}
 						value={editText}
 						onChange={setEditText}
 						onSubmit={saveEdit}
-						sendLabel={msg('comments.save')}
+						sendLabel={msg(messages.commentsSave)}
 						disabled={isCommentEmpty(editText)}
 						getMentionSuggestions={getMentionSuggestions}
 						renderMentionSuggestion={renderMentionSuggestion}
@@ -491,13 +514,13 @@ export const ThreadView = memo(function ThreadView({
 								<MoreOptionsMenu id={`comment-actions-${comment.id}`} moreFor={comment.id}>
 									{permissions?.edit && (
 										<MenuItem
-											label={msg('comments.edit')}
+											label={msg(messages.commentsEdit)}
 											onClick={() => startEdit(comment, { fromMoreMenu: true })}
 										/>
 									)}
 									{permissions?.delete && (
 										<MenuItem
-											label={msg('action.delete')}
+											label={msg(messages.actionDelete)}
 											danger
 											onClick={() => deleteComment(editor, comment)}
 										/>
@@ -515,7 +538,7 @@ export const ThreadView = memo(function ThreadView({
 
 	// Resolve and delete are commenting writes: behind `canComment`, plus the `currentUserId` a
 	// resolve stamps into `resolved.by`.
-	const resolveLabel = msg(thread.resolved ? 'comments.reopen' : 'comments.resolve')
+	const resolveLabel = msg(thread.resolved ? messages.commentsReopen : messages.commentsResolve)
 	const headerActions = (
 		<>
 			{/* Host verbs — assign, link a ticket — sit ahead of the built-in actions. */}
@@ -527,13 +550,13 @@ export const ThreadView = memo(function ThreadView({
 					    item can confirm the copy in place. */}
 					{threadHref !== undefined && (
 						<MenuItem
-							label={msg(linkCopied ? 'comments.link-copied' : 'comments.copy-link')}
+							label={msg(linkCopied ? messages.commentsLinkCopied : messages.commentsCopyLink)}
 							noClose
 							onClick={copyThreadLink}
 						/>
 					)}
 					{canDeleteThread && (
-						<MenuItem label={msg('comments.delete')} danger onClick={removeThread} />
+						<MenuItem label={msg(messages.commentsDelete)} danger onClick={removeThread} />
 					)}
 				</MoreOptionsMenu>
 			)}
@@ -550,36 +573,35 @@ export const ThreadView = memo(function ThreadView({
 			)}
 			<TldrawUiButton
 				type="icon"
-				tooltip={msg('comments.dismiss')}
-				title={msg('comments.dismiss')}
+				tooltip={msg(messages.commentsDismiss)}
+				title={msg(messages.commentsDismiss)}
 				className="tlui-cmt-thread__action"
 				onClick={() => openThreadId.set(editor, null)}
 			>
-				<TldrawUiIcon icon="cross-2" label={msg('comments.dismiss')} small />
+				<TldrawUiIcon icon="cross-2" label={msg(messages.commentsDismiss)} small />
 			</TldrawUiButton>
 		</>
 	)
 
 	return (
 		<CommentThread
-			header={msg('comments.thread-title')}
+			header={msg(messages.commentsThreadTitle)}
 			headerActions={headerActions}
 			renderComment={renderComment}
 			comments={cards}
 			resolvedBanner={
 				thread.resolved
-					? msg('comments.resolved-by').replace(
-							'{name}',
-							resolveAuthor(thread.resolved.by)?.name ?? UNKNOWN_AUTHOR
-						)
+					? msg(messages.commentsResolvedBy, {
+							name: resolveAuthor(thread.resolved.by)?.name ?? msg(messages.commentsUnknownAuthor),
+						})
 					: undefined
 			}
 			composer={
 				canReply
 					? {
 							author: me ?? UNKNOWN_COMMENT_AUTHOR,
-							placeholder: msg('comments.reply-placeholder'),
-							sendLabel: msg('comments.send'),
+							placeholder: msg(messages.commentsReplyPlaceholder),
+							sendLabel: msg(messages.commentsSend),
 							value: reply,
 							onChange: (value: TLRichText) => {
 								setReply(value)

package/src/index.ts

@@ -80,7 +80,12 @@ export {
 	toggleCommentReaction,
 	useCommentReactions,
 } from './canvas/comment-reactions'
-export { CommentTool, commentToolOverrides, commentTools } from './canvas/comment-tool'
+export {
+	CommentTool,
+	commentToolOverrides,
+	commentTools,
+	startCommentAt,
+} from './canvas/comment-tool'
 export {
 	getCommentReactions,
 	getCommentRecord,

package/src/ui/comment-composer.tsx

@@ -19,6 +19,7 @@ import {
 } from 'react'
 import { isEqual, TLRichText, useMaybeEditor } from 'tldraw'
 import { commentTipTapExtensions, EMPTY_COMMENT, isCommentEmpty } from './comment-extensions'
+import { focusOnGestureEnd } from './gesture-focus'
 import { SendButton } from './send-button'
 
 /** @public */
@@ -258,6 +259,14 @@ export function CommentComposer({
 		return () => cancelAnimationFrame(raf)
 	}, [autoFocus, editor])
 
+	// The frame-later focus above places the caret but can't raise iOS's software keyboard, leaving
+	// the composer looking ready while it swallows every keystroke. Focus once more from the release
+	// that ends the placing gesture, which can.
+	useEffect(() => {
+		if (!autoFocus || !editor) return
+		return focusOnGestureEnd(editor.view.dom.ownerDocument, () => editor.commands.focus('end'))
+	}, [autoFocus, editor])
+
 	// The whole field behaves like the text input: clicking its empty area (the padding, or the
 	// space beside/below a short line) focuses the editor rather than only the text glyphs being
 	// clickable. The input (caret placement) and the send button keep their own click handling.

package/src/ui/gesture-focus.test.ts

@@ -0,0 +1,45 @@
+import { describe, expect, it, vi } from 'vitest'
+import { focusOnGestureEnd } from './gesture-focus'
+
+const pointer = (type: 'pointerdown' | 'pointerup') =>
+	document.dispatchEvent(new Event(type, { bubbles: true }))
+
+describe('focusOnGestureEnd', () => {
+	it('focuses on the release that ends the gesture the field was mounted during', () => {
+		const focus = vi.fn()
+		focusOnGestureEnd(document, focus)
+		pointer('pointerup')
+		expect(focus).toHaveBeenCalledTimes(1)
+	})
+
+	it('only focuses once, so later gestures leave the caret alone', () => {
+		const focus = vi.fn()
+		focusOnGestureEnd(document, focus)
+		pointer('pointerup')
+		pointer('pointerdown')
+		pointer('pointerup')
+		expect(focus).toHaveBeenCalledTimes(1)
+	})
+
+	it('gives up when a press comes first — that release belongs to another gesture', () => {
+		const focus = vi.fn()
+		focusOnGestureEnd(document, focus)
+		pointer('pointerdown')
+		pointer('pointerup')
+		expect(focus).not.toHaveBeenCalled()
+	})
+
+	it('stops listening once detached', () => {
+		const focus = vi.fn()
+		const stop = focusOnGestureEnd(document, focus)
+		stop()
+		pointer('pointerup')
+		expect(focus).not.toHaveBeenCalled()
+	})
+
+	it('can be detached more than once', () => {
+		const stop = focusOnGestureEnd(document, vi.fn())
+		stop()
+		expect(() => stop()).not.toThrow()
+	})
+})

package/src/ui/gesture-focus.ts

@@ -0,0 +1,29 @@
+/**
+ * iOS opens the software keyboard only for a focus that runs inside a user gesture's own task. A
+ * focus scheduled for a later frame still moves the caret, so a field can look ready while
+ * swallowing every keystroke until the reader taps it a second time.
+ *
+ * This covers the case where a field is mounted *during* a press — the comment composer opens on
+ * pointer down and settles its anchor on pointer up — by running `focus` from the native pointerup
+ * that ends the same gesture. That is late enough to survive the canvas taking focus for itself on
+ * pointer down, and still inside the gesture, so iOS raises the keyboard.
+ *
+ * A pointerdown arriving first means the mounting gesture had already ended (a field opened from a
+ * button, say), so the next release belongs to an unrelated gesture: give up rather than pull the
+ * caret somewhere the reader didn't ask for.
+ *
+ * Returns a function that detaches the listeners; safe to call more than once.
+ */
+export function focusOnGestureEnd(doc: Document, focus: () => void): () => void {
+	const stop = () => {
+		doc.removeEventListener('pointerup', onPointerUp, true)
+		doc.removeEventListener('pointerdown', stop, true)
+	}
+	function onPointerUp() {
+		stop()
+		focus()
+	}
+	doc.addEventListener('pointerup', onPointerUp, true)
+	doc.addEventListener('pointerdown', stop, true)
+	return stop
+}

package/src/ui/reaction-picker.tsx

@@ -1,5 +1,6 @@
 import { useCallback, useId, type ComponentType, type KeyboardEvent, type MouseEvent } from 'react'
 import {
+	defineMessages,
 	TldrawUiButton,
 	TldrawUiDropdownMenuContent,
 	TldrawUiDropdownMenuRoot,
@@ -12,6 +13,10 @@ import { EmojiPicker, type EmojiPickerProps } from './emoji-picker'
 import { SmileyIcon } from './icons'
 import { RenderReaction } from './reaction'
 
+const messages = defineMessages({
+	commentsAddReaction: { id: 'comments.add-reaction', defaultMessage: 'Add reaction' },
+})
+
 /** @public */
 export interface ReactionPickerProps {
 	/** The emoji to offer. Defaults to `DEFAULT_REACTION_EMOJI`. */
@@ -92,8 +97,8 @@ export function ReactionPicker({
 			<TldrawUiDropdownMenuTrigger>
 				<TldrawUiButton
 					type="icon"
-					tooltip={msg('comments.add-reaction')}
-					title={msg('comments.add-reaction')}
+					tooltip={msg(messages.commentsAddReaction)}
+					title={msg(messages.commentsAddReaction)}
 					className={className}
 				>
 					<SmileyIcon />

package/src/ui/reaction.test.tsx

@@ -0,0 +1,22 @@
+import { renderToStaticMarkup } from 'react-dom/server'
+import { describe, expect, it } from 'vitest'
+import { DefaultReactionTooltipContent } from './reaction'
+
+function sentence(...names: string[]) {
+	return renderToStaticMarkup(
+		<DefaultReactionTooltipContent
+			reactors={names.map((name) => ({ name, you: name === 'You' }))}
+		/>
+	)
+}
+
+describe('DefaultReactionTooltipContent', () => {
+	// Rendered outside a translation provider, so this is the shipped English of `comments.reacted`.
+	it('picks the phrasing by number of reactors', () => {
+		expect(sentence('You')).toBe('You reacted')
+		expect(sentence('You', 'Bo')).toBe('You and Bo reacted')
+		expect(sentence('Ada', 'Bo', 'Cy')).toBe('Ada, Bo and Cy reacted')
+		expect(sentence('Ada', 'Bo', 'Cy', 'Di')).toBe('Ada, Bo, Cy and 1 other reacted')
+		expect(sentence('Ada', 'Bo', 'Cy', 'Di', 'Ed', 'Fi')).toBe('Ada, Bo, Cy and 3 others reacted')
+	})
+})

package/src/ui/reaction.tsx

@@ -1,7 +1,16 @@
 import { ComponentType, ReactNode } from 'react'
-import { TldrawUiTooltip, useTranslation } from 'tldraw'
+import { defineMessages, TldrawUiTooltip, useTranslation } from 'tldraw'
 import { ReactionReactor } from './reactions'
 
+const messages = defineMessages({
+	commentsMentionYou: { id: 'comments.mention-you', defaultMessage: 'You' },
+	commentsReacted: {
+		id: 'comments.reacted',
+		defaultMessage:
+			'{count, plural, =1 {{a} reacted} =2 {{a} and {b} reacted} =3 {{a}, {b} and {c} reacted} other {{a}, {b}, {c} and {others, plural, one {# other} other {# others}} reacted}}',
+	},
+})
+
 /** Render a reaction token to its visual — the emoji glyph by default. @public */
 export type RenderReaction = (token: string) => ReactNode
 
@@ -99,25 +108,27 @@ export function DefaultReactionTooltip({ reactors, children }: ReactionTooltipPr
 /**
  * The default reactor sentence naming who reacted — up to three names spelled out, then "and N
  * others" (e.g. "You reacted", "You and Bo reacted", "You, Bo and Ada reacted", "You, Bo, Ada and 2
- * others reacted"). The wording lives in the `comments.reacted-*` translation strings so each locale
- * controls the grammar. Exported so a custom `ReactionTooltip` can reuse it inside its own box.
+ * others reacted"). The wording lives in the `comments.reacted` translation string, whose ICU
+ * plural picks the phrasing, so each locale controls both the grammar and how it counts. Exported
+ * so a custom `ReactionTooltip` can reuse it inside its own box.
  * @public @react
  */
 export function DefaultReactionTooltipContent({ reactors }: { reactors: ReactionReactor[] }) {
 	const msg = useTranslation()
 	const names = reactors.map((reactor) =>
-		reactor.you ? msg('comments.mention-you') : reactor.name
+		reactor.you ? msg(messages.commentsMentionYou) : reactor.name
 	)
 	if (names.length === 0) return null
 	const [a, b, c] = names
-	const others = names.length - 3
-	const key =
-		names.length <= 3
-			? `comments.reacted-${names.length}`
-			: others === 1
-				? 'comments.reacted-more-one'
-				: 'comments.reacted-more'
-	// Single pass, so a substituted name containing a placeholder can't be re-substituted.
-	const vars: Record<string, string | undefined> = { a, b, c, count: String(others) }
-	return <>{msg(key).replace(/\{(a|b|c|count)\}/g, (_, k) => vars[k] ?? '')}</>
+	return (
+		<>
+			{msg(messages.commentsReacted, {
+				count: names.length,
+				others: names.length - 3,
+				a,
+				b,
+				c,
+			})}
+		</>
+	)
 }

package/src/ui/reply-count.ts

@@ -1,4 +1,11 @@
-import { useTranslation } from 'tldraw'
+import { defineMessages, useTranslation } from 'tldraw'
+
+const messages = defineMessages({
+	commentsReplies: {
+		id: 'comments.replies',
+		defaultMessage: '{count, plural, one {# reply} other {# replies}}',
+	},
+})
 
 /**
  * The localized "N replies" label (e.g. "1 reply", "3 replies") for a thread with `replyCount`
@@ -11,6 +18,5 @@ export function replyCountLabel(
 	replyCount: number
 ): string | null {
 	if (replyCount <= 0) return null
-	const key = replyCount === 1 ? 'comments.replies-one' : 'comments.replies'
-	return msg(key).replace('{count}', String(replyCount))
+	return msg(messages.commentsReplies, { count: replyCount })
 }