@tldraw/commenting 5.3.0-next.2fa9c61a8de6 → 5.3.0-next.7654e7ac2a02

package/src/canvas/comment-tool.tsx

@@ -49,11 +49,10 @@ 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.
  * @public
  */
 export class CommentTool extends StateNode {
@@ -126,7 +125,6 @@ class CommentIdle extends StateNode {
 		updateAnchorHint(this.editor)
 	}
 
-	// Hint the shape a click would attach to.
 	override onPointerMove() {
 		updateAnchorHint(this.editor)
 	}
@@ -187,7 +185,6 @@ 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')
 	}
 
@@ -210,10 +207,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 })
@@ -266,7 +262,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 { FilterIcon } 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">
+				<TldrawUiButton
+					type="icon"
+					tooltip={msg('comments.filter')}
+					title={msg('comments.filter')}
+					className="tlui-cmt-header-btn"
+				>
 					<FilterIcon />
-				</TooltipButton>
+				</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"