@tldraw/commenting 5.5.0-next.f9308d324e1c → 5.6.0-canary.5bfc37740468

package/src/ui/comment-composer.tsx

@@ -114,8 +114,7 @@ export function CommentComposer({
 			if (!expandedRef.current) setExpanded(true)
 			return
 		}
-		const field = wrap.parentElement
-		const send = field ? field.querySelector<HTMLElement>('.tlui-cmt-send') : null
+		const send = wrap.parentElement?.querySelector<HTMLElement>('.tlui-cmt-send')
 		const input = wrap.querySelector('.tlui-cmt-input')
 		if (!send || !input) return
 		mirror.innerHTML = input.innerHTML
@@ -263,8 +262,7 @@ export function CommentComposer({
 	// 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.
 	const focusEditorFromField = (e: ReactMouseEvent<HTMLDivElement>) => {
-		const target = e.target as HTMLElement
-		if (target.closest('.tlui-cmt-input') || target.closest('.tlui-cmt-send')) return
+		if ((e.target as HTMLElement).closest('.tlui-cmt-input, .tlui-cmt-send')) return
 		e.preventDefault()
 		editor?.commands.focus('end')
 	}

package/src/ui/comments.css

@@ -136,8 +136,7 @@
 	text-decoration: underline;
 }
 
-/* Avatar and mention styles live in @tldraw/mentions (src/mention.css) and are bundled into
-   commenting.css by copy-css-files.mjs. */
+/* Avatar and mention styles live in @tldraw/mentions and are imported by commenting.css. */
 
 /* composer — an avatar beside a rounded-rect field holding the rich-text input and the send button.
    Formatting is applied via markdown and keyboard shortcuts (no toolbar). The avatar aligns to the
@@ -383,35 +382,6 @@
 	user-select: none;
 }
 
-/* thread */
-.tlui-cmt-thread {
-	display: flex;
-	flex-direction: column;
-	width: 300px;
-}
-
-.tlui-cmt-thread__head {
-	display: flex;
-	align-items: center;
-	gap: 8px;
-	font-size: 12px;
-	font-weight: 600;
-	color: var(--tl-color-text-3);
-	text-transform: uppercase;
-	letter-spacing: 0.04em;
-}
-
-.tlui-cmt-badge {
-	font-size: 10px;
-	font-weight: 600;
-	text-transform: none;
-	letter-spacing: 0;
-	color: #fff;
-	background: var(--tl-color-muted-1);
-	padding: 1px 6px;
-	border-radius: 999px;
-}
-
 /* reactions */
 .tlui-cmt-reactions {
 	display: flex;
@@ -648,9 +618,6 @@ button.tlui-cmt-reaction--active:hover {
 .tlui-button.tlui-cmt-thread__action:hover {
 	color: var(--tl-color-text-1);
 }
-.tlui-button.tlui-cmt-thread__action--danger:hover {
-	color: var(--tl-color-danger);
-}
 .tlui-cmt-thread__resolved {
 	margin: 4px 12px;
 	padding: 6px 10px;

package/src/ui/format-time.ts

@@ -8,6 +8,20 @@ const DIVISIONS = [
 	{ amount: Number.POSITIVE_INFINITY, unit: 'year' },
 ] as const
 
+// Both formatters are cached per locale — comment cards re-render on every reply keystroke, and
+// constructing an Intl formatter is far more expensive than formatting with one.
+const relativeTimeFormatters = new Map<string, Intl.RelativeTimeFormat>()
+const fullDateTimeFormatters = new Map<string, Intl.DateTimeFormat>()
+
+function getCached<T>(cache: Map<string, T>, locale: string, create: () => T): T {
+	let formatter = cache.get(locale)
+	if (!formatter) {
+		formatter = create()
+		cache.set(locale, formatter)
+	}
+	return formatter
+}
+
 /**
  * Format an ISO datetime as compact relative time ("2h ago", "yesterday", "last wk.").
  * Locale-aware via Intl.RelativeTimeFormat.
@@ -17,7 +31,11 @@ export function formatRelativeTime(iso: string, locale = 'en'): string {
 	const then = new Date(iso).getTime()
 	if (Number.isNaN(then)) return ''
 
-	const rtf = new Intl.RelativeTimeFormat(locale, { numeric: 'auto', style: 'narrow' })
+	const rtf = getCached(
+		relativeTimeFormatters,
+		locale,
+		() => new Intl.RelativeTimeFormat(locale, { numeric: 'auto', style: 'narrow' })
+	)
 	let duration = (then - Date.now()) / 1000
 	// Under a minute is just "now" — with second granularity the label visibly ticks while
 	// typing a reply (every keystroke re-renders the card).
@@ -33,10 +51,6 @@ export function formatRelativeTime(iso: string, locale = 'en'): string {
 	return ''
 }
 
-// Cached per locale — comment cards re-render on every reply keystroke, and constructing a
-// DateTimeFormat is far more expensive than formatting with one.
-const fullDateTimeFormatters = new Map<string, Intl.DateTimeFormat>()
-
 /**
  * Format an ISO datetime as a full date and time ("Tuesday, July 22, 2025 at 4:44 PM").
  * Locale-aware via Intl.DateTimeFormat.
@@ -45,10 +59,9 @@ const fullDateTimeFormatters = new Map<string, Intl.DateTimeFormat>()
 export function formatFullDateTime(iso: string, locale = 'en'): string {
 	const date = new Date(iso)
 	if (Number.isNaN(date.getTime())) return ''
-	let formatter = fullDateTimeFormatters.get(locale)
-	if (!formatter) {
-		formatter = new Intl.DateTimeFormat(locale, { dateStyle: 'full', timeStyle: 'short' })
-		fullDateTimeFormatters.set(locale, formatter)
-	}
-	return formatter.format(date)
+	return getCached(
+		fullDateTimeFormatters,
+		locale,
+		() => new Intl.DateTimeFormat(locale, { dateStyle: 'full', timeStyle: 'short' })
+	).format(date)
 }

package/src/ui/reaction.tsx

@@ -108,28 +108,16 @@ export function DefaultReactionTooltipContent({ reactors }: { reactors: Reaction
 	const names = reactors.map((reactor) =>
 		reactor.you ? msg('comments.mention-you') : reactor.name
 	)
+	if (names.length === 0) return null
 	const [a, b, c] = names
-	switch (names.length) {
-		case 0:
-			return null
-		case 1:
-			return <>{msg('comments.reacted-1').replace('{a}', a)}</>
-		case 2:
-			return <>{msg('comments.reacted-2').replace('{a}', a).replace('{b}', b)}</>
-		case 3:
-			return <>{msg('comments.reacted-3').replace('{a}', a).replace('{b}', b).replace('{c}', c)}</>
-		default: {
-			const others = names.length - 3
-			const template = others === 1 ? 'comments.reacted-more-one' : 'comments.reacted-more'
-			return (
-				<>
-					{msg(template)
-						.replace('{a}', a)
-						.replace('{b}', b)
-						.replace('{c}', c)
-						.replace('{count}', String(others))}
-				</>
-			)
-		}
-	}
+	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] ?? '')}</>
 }