@tldraw/commenting 0.0.0-bootstrap → 5.3.0-internal.1640468db8fd

package/src/canvas/comment-drafts.ts

@@ -0,0 +1,46 @@
+import { deleteFromLocalStorage, getFromLocalStorage, setInLocalStorage } from '@tldraw/utils'
+import type { TLRichText } from 'tldraw'
+import { isCommentEmpty } from '../ui/comment-extensions'
+
+const DRAFT_KEY_PREFIX = 'tldraw-comment-draft'
+
+/** The single slot for an unsent new-comment (placement composer) draft. The anchor is re-picked
+ *  by clicking when the composer reopens, so only the text is worth keeping — and without a
+ *  universal document id in the SDK, one slot is the honest scope. */
+export const NEW_COMMENT_DRAFT = 'new'
+
+/** The draft slot for an unsent reply on a thread. Thread record ids are globally unique and
+ *  stable across reloads, so replies never need a document key. @public */
+export function replyDraftSlot(threadId: string): string {
+	return `reply:${threadId}`
+}
+
+/** Read a saved unsent draft, or undefined when there is none (or it fails to parse). @public */
+export function getCommentDraft(slot: string): TLRichText | undefined {
+	const raw = getFromLocalStorage(`${DRAFT_KEY_PREFIX}:${slot}`)
+	if (!raw) return undefined
+	try {
+		return JSON.parse(raw) as TLRichText
+	} catch {
+		return undefined
+	}
+}
+
+/**
+ * Save an unsent draft so click-away and reload don't lose it — the flip side of not warning
+ * before discard. Saving empty content clears the slot instead, so deleting your text and
+ * closing doesn't resurrect an empty draft later.
+ * @public
+ */
+export function saveCommentDraft(slot: string, value: TLRichText) {
+	if (isCommentEmpty(value)) {
+		clearCommentDraft(slot)
+		return
+	}
+	setInLocalStorage(`${DRAFT_KEY_PREFIX}:${slot}`, JSON.stringify(value))
+}
+
+/** Remove a saved draft (after posting, or when its content was emptied). @public */
+export function clearCommentDraft(slot: string) {
+	deleteFromLocalStorage(`${DRAFT_KEY_PREFIX}:${slot}`)
+}

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

@@ -38,7 +38,7 @@ describe('renderCommentHtml', () => {
 	it('renders a mention as a pill and resolves its id to the current name', () => {
 		const body = doc(para(text('hey '), mention('u1', 'Ada')))
 		const html = renderCommentHtml(body, (id) => (id === 'u1' ? 'Ada Lovelace' : '?'))
-		expect(html).toContain('cmt-mention')
+		expect(html).toContain('tlui-cmt-mention')
 		// the live name from the resolver, not the label stored at insert time
 		expect(html).toContain('@Ada Lovelace')
 		expect(html).not.toContain('@Ada<')

package/src/canvas/comment-render.ts

@@ -1,16 +1,21 @@
 import { generateHTML, generateText, JSONContent } from '@tiptap/core'
 import { TLRichText } from 'tldraw'
+import { CommentAuthor } from '../ui/comment-author'
 import { commentTipTapExtensions, isCommentEmpty } from '../ui/comment-extensions'
 import { commentMention } from '../ui/comment-mention'
 
 /**
  * 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 returning a name from `resolveName`. Not a translation
- * key — a single English literal, matching the prior host-side default.
+ * byline needs a name; hosts pre-empt it by resolving the id from `resolveAuthor`. Not a
+ * translation key — a single English literal.
  */
 export const UNKNOWN_AUTHOR = 'Someone'
 
+/** The `CommentAuthor` fallback for an unresolvable id — just the name, no color or image.
+ *  Frozen: the one shared instance is handed to host render slots. */
+export const UNKNOWN_COMMENT_AUTHOR: CommentAuthor = Object.freeze({ name: UNKNOWN_AUTHOR })
+
 /**
  * The comment extension set has no heading node, so a body that nonetheless contains one (e.g. a
  * record created programmatically or synced from a client with a fuller set) would make TipTap

package/src/canvas/comment-tool.tsx

@@ -6,9 +6,9 @@ import {
 	TLUiOverrides,
 	VecLike,
 } from 'tldraw'
-import { type CommentingOptions, defaultCommentingOptions } from './options'
+import { type CommentingOptions, defaultCommentingOptions, getCommentingOptions } from './options'
 import { getRegionCommentOptions } from './region-options'
-import { pendingComment, regionDraft } from './state'
+import { commentsSidebarOpen, pendingComment, regionDraft } from './state'
 import { regionPinPoint, shapeAnchorAt } from './thread-state'
 
 /** A comment being placed but not yet posted: where its composer sits and what it will anchor
@@ -50,9 +50,11 @@ export function regionBetween(a: VecLike, b: VecLike): BoxModel {
 }
 
 /**
- * The comment tool. A click starts a point/shape thread (the pin tracks the shape it lands on);
- * dragging out a rectangle starts a region thread anchored to that area. Placement only opens a
- * composer (via `pendingComment`); the records are created when the comment is posted.
+ * The comment tool. Pressing down opens the comment composer immediately at the pointer, and it
+ * follows the pointer until 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 instead
+ * draws a region rectangle.) Placement only opens a composer (via `pendingComment`); the records
+ * are created when the comment is posted.
  * @public
  */
 export class CommentTool extends StateNode {
@@ -90,7 +92,16 @@ export class CommentTool extends StateNode {
 	options: CommentingOptions = defaultCommentingOptions
 
 	override onEnter() {
-		this.editor.setCursor({ type: 'cross', rotation: 0 })
+		this.editor.setCursor({ type: 'comment', rotation: 0 })
+		// Placing comments is canvas-focused — the thread list gets out of the way while the tool is
+		// active. Reopened via its own control (a button), never by leaving the tool.
+		commentsSidebarOpen.set(this.editor, false)
+	}
+
+	override onExit() {
+		// Drop the hover hint painted while pointing at shapes (see CommentIdle). The cursor resets
+		// when the next tool takes over.
+		this.editor.setHintingShapes([])
 	}
 
 	// Escape leaves the tool, like the built-in tools (the editor dispatches `cancel` on Escape).
@@ -102,40 +113,109 @@ export class CommentTool extends StateNode {
 class CommentIdle extends StateNode {
 	static override id = 'idle'
 
+	override onEnter() {
+		// Back to hovering: restore the pin cursor (a prior placing state may have hidden it).
+		this.editor.setCursor({ type: 'comment', rotation: 0 })
+		this.updateHint()
+	}
+
+	// Hint the shape a click would attach to, using the same hit-test as onPointerUp below. 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.
+	override onPointerMove() {
+		this.updateHint()
+	}
+
 	override onPointerDown() {
 		this.parent.transition('pointing')
 	}
+
+	private updateHint() {
+		const { editor } = this
+		const hit = editor.getShapeAtPoint(editor.inputs.getCurrentPagePoint(), { hitInside: true })
+		editor.setHintingShapes(hit ? [hit.id] : [])
+	}
 }
 
 class CommentPointing extends StateNode {
 	static override id = 'pointing'
 
-	// Once the pointer passes the editor's drag threshold this is a region, not a click — but only
-	// when region comments are enabled; otherwise a drag is treated as a click (point/shape).
+	override onEnter() {
+		// Open the composer immediately at the press point so it's visible from pointer-down (not just
+		// on release), and let it trail the pointer while dragging — like placing a sticky note. The
+		// anchor is a bare point for now; it's resolved (shape or point) on pointer up. Drop the idle
+		// hover hint so a region drag doesn't leave a stale single-shape outline under the dashed box.
+		const { editor } = this
+		editor.setHintingShapes([])
+		// Hide the cursor while placing: the draft composer is the pointer's stand-in now, so the pin
+		// cursor sitting over it just reads as clutter.
+		editor.setCursor({ type: 'none', rotation: 0 })
+		const point = editor.inputs.getCurrentPagePoint()
+		pendingComment.set(editor, {
+			anchor: { type: 'point', x: point.x, y: point.y },
+			point: { x: point.x, y: point.y },
+		})
+	}
+
 	override onPointerMove() {
-		if (getRegionCommentOptions(this.editor).enabled && this.editor.inputs.getIsDragging()) {
+		const { editor } = this
+		// Once the pointer passes the drag threshold with region comments enabled, this is a region,
+		// not a follow — hand off to the region drag (which clears this composer and draws the box).
+		if (getRegionCommentOptions(editor).enabled && editor.inputs.getIsDragging()) {
 			this.parent.transition('dragging')
+			return
 		}
+		// Otherwise the composer trails the pointer.
+		const point = editor.inputs.getCurrentPagePoint()
+		pendingComment.update(editor, (p) => (p ? { ...p, point: { x: point.x, y: point.y } } : p))
 	}
 
-	// A pointer up with no drag is a click: anchor to the shape under it, or drop a point.
+	// Settle where the pointer is released: anchor to the shape under it, or drop a point.
 	override onPointerUp() {
 		const { editor } = this
 		const point = editor.inputs.getCurrentPagePoint()
 		const hit = editor.getShapeAtPoint(point, { hitInside: true })
 		const anchor: TLCommentAnchor = hit
-			? shapeAnchorAt(editor, hit.id, point, editor.inputs.getAltKey())
+			? 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 } })
 		// Hand back to select; the open composer is now the focus.
 		editor.setCurrentTool('select')
 	}
+
+	override onCancel() {
+		this.cancel()
+	}
+
+	override onInterrupt() {
+		this.cancel()
+	}
+
+	// Abandon the follow composer if placement is interrupted (Escape, focus loss, etc.).
+	private cancel() {
+		pendingComment.set(this.editor, null)
+		this.editor.setCurrentTool('select')
+	}
 }
 
 class CommentDragging extends StateNode {
 	static override id = 'dragging'
 
 	override onEnter() {
+		// A region drag supersedes the point-follow composer opened in `pointing`. Show a crosshair
+		// again — the composer no longer stands in for the pointer, so a hidden cursor would leave
+		// the drag with no pointer at all.
+		pendingComment.set(this.editor, null)
+		this.editor.setCursor({ type: 'cross', rotation: 0 })
 		this.updateDraft()
 	}
 
@@ -146,14 +226,15 @@ class CommentDragging extends StateNode {
 	// Commit the dragged rectangle as a region anchor; the composer opens at its pin corner.
 	override onPointerUp() {
 		const { editor } = this
-		const region = regionBetween(
-			editor.inputs.getOriginPagePoint(),
-			editor.inputs.getCurrentPagePoint()
-		)
+		const origin = editor.inputs.getOriginPagePoint()
+		const current = editor.inputs.getCurrentPagePoint()
+		const region = regionBetween(origin, current)
+		// The pin lives on the corner the drag released on — drag up-left, pin top-left.
+		const pin = { x: current.x >= origin.x ? 1 : 0, y: current.y >= origin.y ? 1 : 0 }
 		regionDraft.set(editor, null)
 		pendingComment.set(editor, {
-			anchor: { type: 'region', ...region },
-			point: regionPinPoint(region, getRegionCommentOptions(editor).pinCorner),
+			anchor: { type: 'region', ...region, pinX: pin.x, pinY: pin.y },
+			point: regionPinPoint(region, pin),
 		})
 		editor.setCurrentTool('select')
 	}

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

@@ -9,6 +9,7 @@ import {
 	useTranslation,
 	useValue,
 } from 'tldraw'
+import { TooltipButton } from '../ui/tooltip-button'
 import { SidebarFilters } from './sidebar-filters'
 import { sidebarFilters } from './state'
 
@@ -36,29 +37,29 @@ export function CommentsFilterMenu({
 	return (
 		<TldrawUiDropdownMenuRoot id="comments-filter">
 			<TldrawUiDropdownMenuTrigger>
-				<button
-					type="button"
-					className="cmt-header-btn"
-					title={msg('comments.filter')}
-					aria-label={msg('comments.filter')}
-				>
+				<TooltipButton tooltip={msg('comments.filter')} className="tlui-cmt-header-btn">
 					<FilterIcon />
-				</button>
+				</TooltipButton>
 			</TldrawUiDropdownMenuTrigger>
-			<TldrawUiDropdownMenuContent side="bottom" align="start">
+			<TldrawUiDropdownMenuContent
+				className="tlui-cmt-menu"
+				side="bottom"
+				align="end"
+				alignOffset={0}
+			>
 				<TldrawUiMenuContextProvider type="menu" sourceId="menu">
 					<TldrawUiMenuGroup id="comments-filter">
 						<TldrawUiMenuCheckboxItem
-							id="show-resolved"
-							label="comments.show-resolved"
-							checked={filters.showResolved}
-							onSelect={() => toggle('showResolved')}
+							id="show-all-pages"
+							label="comments.show-all-pages"
+							checked={!filters.onlyCurrentPage}
+							onSelect={() => toggle('onlyCurrentPage')}
 						/>
 						{canFilterByAuthor && (
 							<TldrawUiMenuCheckboxItem
-								id="only-mine"
-								label="comments.only-mine"
-								checked={filters.onlyMine}
+								id="show-all-threads"
+								label="comments.show-all-threads"
+								checked={!filters.onlyMine}
 								onSelect={() => toggle('onlyMine')}
 							/>
 						)}
@@ -71,10 +72,10 @@ export function CommentsFilterMenu({
 							/>
 						)}
 						<TldrawUiMenuCheckboxItem
-							id="only-current-page"
-							label="comments.only-current-page"
-							checked={filters.onlyCurrentPage}
-							onSelect={() => toggle('onlyCurrentPage')}
+							id="show-resolved"
+							label="comments.show-resolved"
+							checked={filters.showResolved}
+							onSelect={() => toggle('showResolved')}
 						/>
 					</TldrawUiMenuGroup>
 				</TldrawUiMenuContextProvider>
@@ -85,20 +86,13 @@ export function CommentsFilterMenu({
 
 function FilterIcon() {
 	return (
-		<svg
-			width="16"
-			height="16"
-			viewBox="0 0 16 16"
-			fill="none"
-			stroke="currentColor"
-			strokeWidth="1.5"
-			strokeLinecap="round"
-			aria-hidden="true"
-		>
-			<line x1="2.5" y1="5" x2="13.5" y2="5" />
-			<line x1="2.5" y1="11" x2="13.5" y2="11" />
-			<circle cx="6" cy="5" r="1.9" fill="currentColor" stroke="none" />
-			<circle cx="10.5" cy="11" r="1.9" fill="currentColor" stroke="none" />
+		<svg width="15" height="15" viewBox="0 0 15 15" fill="none" aria-hidden="true">
+			<path
+				d="M5.5 3C4.67157 3 4 3.67157 4 4.5C4 5.32843 4.67157 6 5.5 6C6.32843 6 7 5.32843 7 4.5C7 3.67157 6.32843 3 5.5 3ZM3 5C3.01671 5 3.03323 4.99918 3.04952 4.99758C3.28022 6.1399 4.28967 7 5.5 7C6.71033 7 7.71978 6.1399 7.95048 4.99758C7.96677 4.99918 7.98329 5 8 5H13.5C13.7761 5 14 4.77614 14 4.5C14 4.22386 13.7761 4 13.5 4H8C7.98329 4 7.96677 4.00082 7.95048 4.00242C7.71978 2.86009 6.71033 2 5.5 2C4.28967 2 3.28022 2.86009 3.04952 4.00242C3.03323 4.00082 3.01671 4 3 4H1.5C1.22386 4 1 4.22386 1 4.5C1 4.77614 1.22386 5 1.5 5H3ZM11.9505 10.9976C11.7198 12.1399 10.7103 13 9.5 13C8.28967 13 7.28022 12.1399 7.04952 10.9976C7.03323 10.9992 7.01671 11 7 11H1.5C1.22386 11 1 10.7761 1 10.5C1 10.2239 1.22386 10 1.5 10H7C7.01671 10 7.03323 10.0008 7.04952 10.0024C7.28022 8.8601 8.28967 8 9.5 8C10.7103 8 11.7198 8.8601 11.9505 10.0024C11.9668 10.0008 11.9833 10 12 10H13.5C13.7761 10 14 10.2239 14 10.5C14 10.7761 13.7761 11 13.5 11H12C11.9833 11 11.9668 10.9992 11.9505 10.9976ZM8 10.5C8 9.67157 8.67157 9 9.5 9C10.3284 9 11 9.67157 11 10.5C11 11.3284 10.3284 12 9.5 12C8.67157 12 8 11.3284 8 10.5Z"
+				fill="currentColor"
+				fillRule="evenodd"
+				clipRule="evenodd"
+			/>
 		</svg>
 	)
 }

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

@@ -4,10 +4,12 @@ import {
 	TldrawUiDropdownMenuItem,
 	TldrawUiDropdownMenuRoot,
 	TldrawUiDropdownMenuTrigger,
+	TldrawUiIcon,
 	useEditor,
 	useTranslation,
 	useValue,
 } from 'tldraw'
+import { TooltipButton } from '../ui/tooltip-button'
 import { commentsHidden, toggleCommentsHidden } from './state'
 
 // A keyboard-shortcut glyph, not translatable copy — kept out of JSX as a constant.
@@ -24,25 +26,25 @@ export function CommentsOverflowMenu() {
 	return (
 		<TldrawUiDropdownMenuRoot id="comments-overflow">
 			<TldrawUiDropdownMenuTrigger>
-				<button
-					type="button"
-					className="cmt-header-btn"
-					title={msg('comments.more-options')}
-					aria-label={msg('comments.more-options')}
-				>
-					<MoreIcon />
-				</button>
+				<TooltipButton tooltip={msg('comments.more-options')} className="tlui-cmt-header-btn">
+					<TldrawUiIcon icon="dots-vertical" label={msg('comments.more-options')} small />
+				</TooltipButton>
 			</TldrawUiDropdownMenuTrigger>
-			<TldrawUiDropdownMenuContent side="bottom" align="end">
+			<TldrawUiDropdownMenuContent
+				className="tlui-cmt-menu"
+				side="bottom"
+				align="end"
+				alignOffset={0}
+			>
 				<TldrawUiDropdownMenuGroup>
 					<TldrawUiDropdownMenuItem>
 						<button
 							type="button"
-							className="cmt-menu-item"
+							className="tlui-cmt-menu-item"
 							onClick={() => toggleCommentsHidden(editor)}
 						>
 							<span>{hidden ? msg('comments.show') : msg('comments.hide')}</span>
-							<span className="cmt-menu-item__shortcut">{HIDE_SHORTCUT}</span>
+							<span className="tlui-cmt-menu-item__shortcut">{HIDE_SHORTCUT}</span>
 						</button>
 					</TldrawUiDropdownMenuItem>
 				</TldrawUiDropdownMenuGroup>
@@ -50,13 +52,3 @@ export function CommentsOverflowMenu() {
 		</TldrawUiDropdownMenuRoot>
 	)
 }
-
-function MoreIcon() {
-	return (
-		<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
-			<circle cx="3" cy="8" r="1.4" />
-			<circle cx="8" cy="8" r="1.4" />
-			<circle cx="13" cy="8" r="1.4" />
-		</svg>
-	)
-}