@tldraw/commenting 0.0.0-bootstrap → 5.3.0-canary.31036673d3f8

package/src/ui/comment-thread.tsx

@@ -14,6 +14,9 @@ export interface CommentThreadProps {
 	resolvedBanner?: ReactNode
 	/** Reply composer props. Omit for a read-only thread (no composer). */
 	composer?: CommentComposerProps
+	/** Shown at the bottom of the thread (e.g. a sign-in prompt when there's no composer). When
+	 *  both are set, the footer renders after the composer. */
+	footer?: ReactNode
 	/** Override how each comment renders. Defaults to `<CommentCard>`. */
 	renderComment?(comment: CommentCardProps, index: number): ReactNode
 }
@@ -30,20 +33,23 @@ export function CommentThread({
 	headerActions,
 	resolvedBanner,
 	composer,
+	footer,
 	renderComment,
 }: CommentThreadProps) {
 	return (
-		<div className="cmt-thread">
+		<div className="tlui-cmt-thread">
 			{(header !== undefined || headerActions !== undefined) && (
-				<div className="cmt-thread__header">
-					<span className="cmt-thread__title">{header}</span>
+				<div className="tlui-cmt-thread__header">
+					{header !== undefined && <span className="tlui-cmt-thread__title">{header}</span>}
 					{headerActions !== undefined && (
-						<div className="cmt-thread__actions">{headerActions}</div>
+						<div className="tlui-cmt-thread__actions">{headerActions}</div>
 					)}
 				</div>
 			)}
-			{resolvedBanner !== undefined && <div className="cmt-thread__resolved">{resolvedBanner}</div>}
-			<div className="cmt-thread__list">
+			{resolvedBanner !== undefined && (
+				<div className="tlui-cmt-thread__resolved">{resolvedBanner}</div>
+			)}
+			<div className="tlui-cmt-thread__list">
 				{comments.map((comment, i) => (
 					<div key={i}>
 						{renderComment ? renderComment(comment, i) : <CommentCard {...comment} />}
@@ -51,6 +57,7 @@ export function CommentThread({
 				))}
 			</div>
 			{composer !== undefined && <CommentComposer {...composer} />}
+			{footer !== undefined && <div className="tlui-cmt-thread__footer">{footer}</div>}
 		</div>
 	)
 }

package/src/ui/comments-list.test.ts

@@ -0,0 +1,31 @@
+import { MouseEvent } from 'react'
+import { describe, expect, it } from 'vitest'
+import { isOpenInNewTabClick } from './comments-list'
+
+function click(overrides: Partial<MouseEvent> = {}): MouseEvent {
+	return {
+		metaKey: false,
+		ctrlKey: false,
+		shiftKey: false,
+		altKey: false,
+		button: 0,
+		...overrides,
+	} as MouseEvent
+}
+
+describe('isOpenInNewTabClick', () => {
+	it('treats a plain left click as an in-place select', () => {
+		expect(isOpenInNewTabClick(click())).toBe(false)
+	})
+
+	it.each(['metaKey', 'ctrlKey', 'shiftKey', 'altKey'] as const)(
+		'leaves a %s click to the browser',
+		(modifier) => {
+			expect(isOpenInNewTabClick(click({ [modifier]: true }))).toBe(true)
+		}
+	)
+
+	it('leaves non-primary-button clicks to the browser', () => {
+		expect(isOpenInNewTabClick(click({ button: 1 }))).toBe(true)
+	})
+})

package/src/ui/comments-list.tsx

@@ -1,11 +1,13 @@
-import { ReactNode } from 'react'
-import { Avatar } from './avatar'
+import { Avatar, type CommentAuthor } from '@tldraw/mentions'
+import { MouseEvent, ReactNode } from 'react'
+import { useTranslation } from 'tldraw'
 import { Byline } from './byline'
+import { replyCountLabel } from './reply-count'
 
 /** @public */
 export interface CommentListItemProps {
 	id: string
-	author: string
+	author: CommentAuthor
 	/** A short preview of the thread — e.g. the first comment's body. */
 	preview: ReactNode
 	/** ISO datetime of the thread's first comment. */
@@ -17,6 +19,11 @@ export interface CommentListItemProps {
 	count?: number
 	/** Whether this thread is the open one. */
 	selected?: boolean
+	/**
+	 * Link target for the item. When set, the row renders as an anchor so browser affordances
+	 * (ctrl/cmd-click, middle-click) open it in a new tab; a plain click still calls `onSelect`.
+	 */
+	href?: string
 }
 
 /** @public */
@@ -52,17 +59,17 @@ export function CommentsList({
 	renderItem,
 }: CommentsListProps) {
 	return (
-		<div className="cmt-list">
+		<div className="tlui-cmt-list">
 			{(header !== undefined || headerAction) && (
-				<div className="cmt-list__header">
-					{header !== undefined && <span className="cmt-list__header-title">{header}</span>}
+				<div className="tlui-cmt-list__header">
+					{header !== undefined && <span className="tlui-cmt-list__header-title">{header}</span>}
 					{headerAction}
 				</div>
 			)}
 			{items.length === 0 ? (
-				<div className="cmt-list__empty">{empty}</div>
+				<div className="tlui-cmt-list__empty">{empty}</div>
 			) : (
-				<div className="cmt-list__items">
+				<div className="tlui-cmt-list__items">
 					{items.map((item) =>
 						renderItem ? (
 							renderItem(item)
@@ -90,40 +97,57 @@ function CommentListItem({
 	page,
 	count,
 	selected,
+	href,
 	resolvedLabel = 'Resolved',
 	onSelect,
 }: CommentListItemProps & { resolvedLabel?: string; onSelect?(id: string): void }) {
-	const handleClick = () => {
+	const msg = useTranslation()
+	const handleClick = (e: MouseEvent) => {
+		if (href && isOpenInNewTabClick(e)) return
+		e.preventDefault()
 		if (onSelect) onSelect(id)
 	}
+	const Tag = href ? 'a' : 'button'
+	// `count` is the thread's total comments; a reply is every comment after the opening one.
+	const replies = count !== undefined ? replyCountLabel(msg, count - 1) : null
 	return (
-		<button
-			type="button"
-			className={selected ? 'cmt-list__item cmt-list__item--selected' : 'cmt-list__item'}
+		<Tag
+			{...(href ? { href } : { type: 'button' })}
+			className={
+				selected ? 'tlui-cmt-list__item tlui-cmt-list__item--selected' : 'tlui-cmt-list__item'
+			}
 			data-resolved={resolved || undefined}
 			onClick={handleClick}
 		>
-			<Avatar name={author} />
-			<div className="cmt-list__item-body">
+			<Avatar author={author} />
+			<div className="tlui-cmt-list__item-body">
 				<Byline author={author} date={date} />
-				<div className="cmt-list__item-preview">{preview}</div>
-				{(resolved || page !== undefined) && (
-					<div className="cmt-list__item-meta">
+				<div className="tlui-cmt-list__item-preview">{preview}</div>
+				{(resolved || page !== undefined || replies) && (
+					<div className="tlui-cmt-list__item-meta">
 						{resolved && (
-							<span className="cmt-list__item-resolved">
+							<span className="tlui-cmt-list__item-resolved">
 								<CheckIcon />
 								{resolvedLabel}
 							</span>
 						)}
-						{page !== undefined && <span className="cmt-list__item-page">{page}</span>}
+						{page !== undefined && <span className="tlui-cmt-list__item-page">{page}</span>}
+						{replies && <span className="tlui-cmt-list__item-replies">{replies}</span>}
 					</div>
 				)}
 			</div>
-			{count !== undefined && count > 1 && <span className="cmt-list__item-count">{count}</span>}
-		</button>
+		</Tag>
 	)
 }
 
+/**
+ * Whether a click should be left to the browser's link handling (new tab, new window, or download).
+ * @public
+ */
+export function isOpenInNewTabClick(e: MouseEvent) {
+	return e.metaKey || e.ctrlKey || e.shiftKey || e.altKey || e.button !== 0
+}
+
 function CheckIcon() {
 	return (
 		<svg width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden="true">