@tldraw/commenting 5.3.0-next.d7d8ced023d5 → 5.3.0-next.dec36c5c2930

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

@@ -13,6 +13,7 @@ import {
 } from 'tldraw'
 import { afterEach, beforeEach, describe, expect, it } from 'vitest'
 import { CommentTool } from './comment-tool'
+import { commentsSidebarOpen, pendingComment, regionDraft } from './state'
 
 /**
  * Pointer-driven tests for the comment tool's placement affordances. These need a real editor
@@ -90,14 +91,80 @@ describe('comment tool placement hints', () => {
 		driver.pointerMove(150, 125)
 		expect(editor.getHintingShapeIds()).toEqual([id])
 
-		// Releasing places the comment and hands back to select, which owns its own hover state.
-		driver.pointerDown(150, 125)
-		driver.pointerUp(150, 125)
-		expect(editor.isIn('select')).toBe(true)
+		// Select owns its own hover state, so the comment hint leaves with the tool.
+		editor.setCurrentTool('select')
 		expect(editor.getHintingShapeIds()).toEqual([])
 	})
 })
 
+describe('comment tool placement lifecycle', () => {
+	let driver: Driver
+
+	beforeEach(() => {
+		driver = makeEditor()
+	})
+
+	it('stays in the tool with the composer open after placing', () => {
+		editor.setCurrentTool('comment')
+		driver.pointerDown(400, 300)
+		driver.pointerUp(400, 300)
+		// Placement opens the composer but the interaction isn't over — the tool holds on until
+		// the comment is posted or dismissed, so the surrounding UI stays stable.
+		expect(editor.isIn('comment.idle')).toBe(true)
+		expect(pendingComment.get(editor)).toEqual({
+			anchor: { type: 'point', x: 400, y: 300 },
+			point: { x: 400, y: 300 },
+		})
+	})
+
+	it('re-places the composer on a second click', () => {
+		editor.setCurrentTool('comment')
+		driver.pointerDown(400, 300)
+		driver.pointerUp(400, 300)
+		driver.pointerDown(200, 200)
+		driver.pointerUp(200, 200)
+		expect(editor.isIn('comment.idle')).toBe(true)
+		expect(pendingComment.get(editor)).toEqual({
+			anchor: { type: 'point', x: 200, y: 200 },
+			point: { x: 200, y: 200 },
+		})
+	})
+
+	it('drops the pending composer when the tool exits', () => {
+		editor.setCurrentTool('comment')
+		driver.pointerDown(400, 300)
+		driver.pointerUp(400, 300)
+		expect(pendingComment.get(editor)).not.toBeNull()
+
+		// A direct tool switch (toolbar, shortcut) abandons the draft composer — it belongs to
+		// the tool. The text itself survives in the comment draft store.
+		editor.setCurrentTool('select')
+		expect(pendingComment.get(editor)).toBeNull()
+	})
+
+	it('closes the comments sidebar for the whole interaction', () => {
+		commentsSidebarOpen.set(editor, true)
+		editor.setCurrentTool('comment')
+		expect(commentsSidebarOpen.get(editor)).toBe(false)
+
+		// ...and placing doesn't reopen it: the tool (and the closed sidebar) hold through the
+		// composer. Reopening is the host's button, never a side effect of leaving the tool.
+		driver.pointerDown(400, 300)
+		driver.pointerUp(400, 300)
+		expect(editor.isIn('comment.idle')).toBe(true)
+		expect(commentsSidebarOpen.get(editor)).toBe(false)
+	})
+
+	it('escape leaves the tool for select and drops the draft', () => {
+		editor.setCurrentTool('comment')
+		driver.pointerDown(400, 300)
+		driver.pointerUp(400, 300)
+		editor.cancel()
+		expect(editor.isIn('select')).toBe(true)
+		expect(pendingComment.get(editor)).toBeNull()
+	})
+})
+
 describe('comment tool placement hints with regions enabled', () => {
 	it('clears the hint when a drag becomes a region', () => {
 		const driver = makeEditor(CommentTool.configure({ enableRegions: true }))
@@ -113,6 +180,44 @@ describe('comment tool placement hints with regions enabled', () => {
 		expect(editor.isIn('comment.dragging')).toBe(true)
 		expect(editor.getHintingShapeIds()).toEqual([])
 	})
+
+	it('stays in the tool with the composer open after a region drag', () => {
+		const driver = makeEditor(CommentTool.configure({ enableRegions: true }))
+		editor.setCurrentTool('comment')
+		driver.pointerDown(100, 100)
+		driver.pointerMove(200, 180)
+		driver.pointerUp(200, 180)
+		expect(editor.isIn('comment.idle')).toBe(true)
+		expect(pendingComment.get(editor)).toEqual({
+			anchor: { type: 'region', x: 100, y: 100, w: 100, h: 80, pinX: 1, pinY: 1 },
+			point: { x: 200, y: 180 },
+		})
+	})
+
+	it('does not hint a shape under the pin corner of a placed region', () => {
+		const driver = makeEditor(CommentTool.configure({ enableRegions: true }))
+		makeShape(100, 100)
+		editor.setCurrentTool('comment')
+		// Release on top of the shape: a region anchors to its rectangle, so the outline that
+		// normally previews a shape anchor would be a lie here.
+		driver.pointerDown(50, 50)
+		driver.pointerMove(150, 125)
+		driver.pointerUp(150, 125)
+		expect(editor.isIn('comment.idle')).toBe(true)
+		expect(editor.getHintingShapeIds()).toEqual([])
+	})
+
+	it('drops the region draft when the tool exits mid-drag', () => {
+		const driver = makeEditor(CommentTool.configure({ enableRegions: true }))
+		editor.setCurrentTool('comment')
+		driver.pointerDown(100, 100)
+		driver.pointerMove(200, 180)
+		expect(regionDraft.get(editor)).not.toBeNull()
+
+		// A direct tool switch (shortcut, toolbar) mid-drag must not strand the drawn rectangle.
+		editor.setCurrentTool('select')
+		expect(regionDraft.get(editor)).toBeNull()
+	})
 })
 
 describe('comment tool anchoring to frames', () => {

package/src/canvas/comment-tool.tsx

@@ -49,11 +49,12 @@ export function regionBetween(a: VecLike, b: VecLike): BoxModel {
 }
 
 /**
- * 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.
+ * The comment tool. Pressing down opens the comment composer at the pointer and it follows 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 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.
  * @public
  */
 export class CommentTool extends StateNode {
@@ -99,8 +100,11 @@ export class CommentTool extends StateNode {
 
 	override onExit() {
 		// Drop the hover hint painted while pointing at shapes (see CommentIdle). The cursor resets
-		// when the next tool takes over.
+		// when the next tool takes over. The draft composer and region draft belong to the tool, so
+		// they leave with it; the draft's text survives in the comment draft store.
 		this.editor.setHintingShapes([])
+		pendingComment.set(this.editor, null)
+		regionDraft.set(this.editor, null)
 	}
 
 	// Escape leaves the tool, like the built-in tools (the editor dispatches `cancel` on Escape).
@@ -123,10 +127,16 @@ class CommentIdle extends StateNode {
 	override onEnter() {
 		// Back to hovering: restore the pin cursor (a prior placing state may have hidden it).
 		this.editor.setCursor({ type: 'comment', rotation: 0 })
-		updateAnchorHint(this.editor)
+		// With a region composer open, a shape outline under its pin corner would imply a shape
+		// anchor the region will never use — and it would stick, since moves over the composer
+		// never reach the canvas. Point placements keep the hint: it previews the next click.
+		if (pendingComment.get(this.editor)?.anchor.type === 'region') {
+			this.editor.setHintingShapes([])
+		} else {
+			updateAnchorHint(this.editor)
+		}
 	}
 
-	// Hint the shape a click would attach to.
 	override onPointerMove() {
 		updateAnchorHint(this.editor)
 	}
@@ -187,8 +197,10 @@ class CommentPointing extends StateNode {
 				)
 			: { 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')
+		// 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.
+		this.parent.transition('idle')
 	}
 
 	override onCancel() {
@@ -199,9 +211,9 @@ class CommentPointing extends StateNode {
 		this.cancel()
 	}
 
-	// Abandon the follow composer if placement is interrupted (Escape, focus loss, etc.).
+	// Abandon the follow composer if placement is interrupted (Escape, focus loss, etc.). The
+	// tool's onExit drops the draft.
 	private cancel() {
-		pendingComment.set(this.editor, null)
 		this.editor.setCurrentTool('select')
 	}
 }
@@ -210,10 +222,9 @@ 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. Drop the placement hint too: a region anchors to its
-		// rectangle, so a single-shape outline under the dashed box would be stale.
+		// A region drag supersedes the point-follow composer opened in `pointing`. Show a crosshair again,
+		// since the composer no longer stands in for the pointer, and drop the placement hint — a region
+		// anchors to its rectangle, so a single-shape outline would be stale.
 		pendingComment.set(this.editor, null)
 		this.editor.setHintingShapes([])
 		this.editor.setCursor({ type: 'cross', rotation: 0 })
@@ -237,7 +248,8 @@ class CommentDragging extends StateNode {
 			anchor: { type: 'region', ...region, pinX: pin.x, pinY: pin.y },
 			point: regionPinPoint(region, pin),
 		})
-		editor.setCurrentTool('select')
+		// Same as the point placement: the tool stays active while the composer is open.
+		this.parent.transition('idle')
 	}
 
 	override onCancel() {
@@ -256,8 +268,8 @@ class CommentDragging extends StateNode {
 		)
 	}
 
+	// The tool's onExit drops the region draft.
 	private cancel() {
-		regionDraft.set(this.editor, null)
 		this.editor.setCurrentTool('select')
 	}
 }
@@ -266,7 +278,7 @@ class CommentDragging extends StateNode {
 export const commentTools = [CommentTool]
 
 /** Registers the comment tool in the UI (icon, label, shortcut). Compose into your overrides.
- *  Once registered, tldraw's `DefaultToolbarContent` shows the comment button next to the eraser.
+ *  Once registered, tldraw's `DefaultQuickActionsContent` shows the comment button.
  * @public */
 export const commentToolOverrides: TLUiOverrides = {
 	tools(editor, tools) {

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

@@ -1,4 +1,5 @@
 import {
+	TldrawUiButton,
 	TldrawUiDropdownMenuContent,
 	TldrawUiDropdownMenuRoot,
 	TldrawUiDropdownMenuTrigger,
@@ -9,7 +10,7 @@ import {
 	useTranslation,
 	useValue,
 } from 'tldraw'
-import { TooltipButton } from '../ui/tooltip-button'
+import { MoreMenuIcon } from '../ui/icons'
 import { SidebarFilters } from './sidebar-filters'
 import { sidebarFilters } from './state'
 
@@ -37,9 +38,14 @@ export function CommentsFilterMenu({
 	return (
 		<TldrawUiDropdownMenuRoot id="comments-filter">
 			<TldrawUiDropdownMenuTrigger>
-				<TooltipButton tooltip={msg('comments.filter')} className="tlui-cmt-header-btn">
-					<FilterIcon />
-				</TooltipButton>
+				<TldrawUiButton
+					type="icon"
+					tooltip={msg('comments.filter')}
+					title={msg('comments.filter')}
+					className="tlui-cmt-header-btn"
+				>
+					<MoreMenuIcon />
+				</TldrawUiButton>
 			</TldrawUiDropdownMenuTrigger>
 			{/* No tlui-cmt-menu here: the rows are tldraw menu items, which carry their own insets —
 			    the extra padding would set this menu apart from the canvas menus it should match. */}
@@ -80,16 +86,3 @@ export function CommentsFilterMenu({
 		</TldrawUiDropdownMenuRoot>
 	)
 }
-
-function FilterIcon() {
-	return (
-		<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

@@ -1,4 +1,5 @@
 import {
+	TldrawUiButton,
 	TldrawUiDropdownMenuContent,
 	TldrawUiDropdownMenuGroup,
 	TldrawUiDropdownMenuItem,
@@ -9,7 +10,6 @@ import {
 	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.
@@ -26,9 +26,14 @@ export function CommentsOverflowMenu() {
 	return (
 		<TldrawUiDropdownMenuRoot id="comments-overflow">
 			<TldrawUiDropdownMenuTrigger>
-				<TooltipButton tooltip={msg('comments.more-options')} className="tlui-cmt-header-btn">
+				<TldrawUiButton
+					type="icon"
+					tooltip={msg('comments.more-options')}
+					title={msg('comments.more-options')}
+					className="tlui-cmt-header-btn"
+				>
 					<TldrawUiIcon icon="dots-vertical" label={msg('comments.more-options')} small />
-				</TooltipButton>
+				</TldrawUiButton>
 			</TldrawUiDropdownMenuTrigger>
 			<TldrawUiDropdownMenuContent
 				className="tlui-cmt-menu"