@tldraw/commenting 5.3.0-internal.41291fb579ed → 5.3.0-internal.5f14a24c179e

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

@@ -9,7 +9,6 @@ import {
 	useTranslation,
 	useValue,
 } from 'tldraw'
-import { TooltipButton } from '../ui/tooltip-button'
 import { SidebarFilters } from './sidebar-filters'
 import { sidebarFilters } from './state'
 
@@ -37,9 +36,14 @@ export function CommentsFilterMenu({
 	return (
 		<TldrawUiDropdownMenuRoot id="comments-filter">
 			<TldrawUiDropdownMenuTrigger>
-				<TooltipButton tooltip={msg('comments.filter')} className="tlui-cmt-header-btn">
+				<button
+					type="button"
+					className="tlui-cmt-header-btn"
+					title={msg('comments.filter')}
+					aria-label={msg('comments.filter')}
+				>
 					<FilterIcon />
-				</TooltipButton>
+				</button>
 			</TldrawUiDropdownMenuTrigger>
 			<TldrawUiDropdownMenuContent
 				className="tlui-cmt-menu"
@@ -50,16 +54,16 @@ export function CommentsFilterMenu({
 				<TldrawUiMenuContextProvider type="menu" sourceId="menu">
 					<TldrawUiMenuGroup id="comments-filter">
 						<TldrawUiMenuCheckboxItem
-							id="show-all-pages"
-							label="comments.show-all-pages"
-							checked={!filters.onlyCurrentPage}
-							onSelect={() => toggle('onlyCurrentPage')}
+							id="show-resolved"
+							label="comments.show-resolved"
+							checked={filters.showResolved}
+							onSelect={() => toggle('showResolved')}
 						/>
 						{canFilterByAuthor && (
 							<TldrawUiMenuCheckboxItem
-								id="show-all-threads"
-								label="comments.show-all-threads"
-								checked={!filters.onlyMine}
+								id="only-mine"
+								label="comments.only-mine"
+								checked={filters.onlyMine}
 								onSelect={() => toggle('onlyMine')}
 							/>
 						)}
@@ -72,10 +76,10 @@ export function CommentsFilterMenu({
 							/>
 						)}
 						<TldrawUiMenuCheckboxItem
-							id="show-resolved"
-							label="comments.show-resolved"
-							checked={filters.showResolved}
-							onSelect={() => toggle('showResolved')}
+							id="only-current-page"
+							label="comments.only-current-page"
+							checked={filters.onlyCurrentPage}
+							onSelect={() => toggle('onlyCurrentPage')}
 						/>
 					</TldrawUiMenuGroup>
 				</TldrawUiMenuContextProvider>

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

@@ -9,7 +9,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 +25,14 @@ export function CommentsOverflowMenu() {
 	return (
 		<TldrawUiDropdownMenuRoot id="comments-overflow">
 			<TldrawUiDropdownMenuTrigger>
-				<TooltipButton tooltip={msg('comments.more-options')} className="tlui-cmt-header-btn">
+				<button
+					type="button"
+					className="tlui-cmt-header-btn"
+					title={msg('comments.more-options')}
+					aria-label={msg('comments.more-options')}
+				>
 					<TldrawUiIcon icon="dots-vertical" label={msg('comments.more-options')} small />
-				</TooltipButton>
+				</button>
 			</TldrawUiDropdownMenuTrigger>
 			<TldrawUiDropdownMenuContent
 				className="tlui-cmt-menu"

package/src/canvas/comments-overlay.tsx

@@ -47,7 +47,6 @@ import { CommentThread } from '../ui/comment-thread'
 import { CountBadge } from '../ui/count-badge'
 import { MentionMember } from '../ui/mention-list'
 import { isMentionPickerOpen } from '../ui/mention-suggestion'
-import { TooltipButton } from '../ui/tooltip-button'
 import { collectClusterLeaves } from './cluster-input'
 import { CommentBody } from './comment-body'
 import {
@@ -1162,15 +1161,6 @@ const ThreadPin = memo(function ThreadPin({
 	// see the note on the layer.
 	usePassThroughWheelEvents(markerRef)
 
-	// The drop-target hint is editor-global state with no automatic reset. If the pin unmounts
-	// mid-drag (e.g. Shift+C hides comments), no pointer event will ever reach the drag handlers —
-	// clear the hint here or it stays on the shape indefinitely.
-	useEffect(() => {
-		return () => {
-			if (dragRef.current) editor.setHintingShapes([])
-		}
-	}, [editor])
-
 	// Clicking outside the open popover (and off its own pin) closes the thread — mirrors the
 	// pending composer's dismiss. Capture phase + a class check rather than stopPropagation, since the
 	// popover portals elsewhere in the DOM. The pin marker is excluded so its own click-to-toggle
@@ -1324,12 +1314,13 @@ const ThreadPin = memo(function ThreadPin({
 					comment.authorId === currentUserId ? (
 						<TldrawUiDropdownMenuRoot id={`comment-actions-${comment.id}`}>
 							<TldrawUiDropdownMenuTrigger>
-								<TooltipButton
-									tooltip={msg('comments.more-options')}
+								<button
+									type="button"
 									className="tlui-cmt-thread__action"
+									title={msg('comments.more-options')}
 								>
 									<TldrawUiIcon icon="dots-vertical" label={msg('comments.more-options')} small />
-								</TooltipButton>
+								</button>
 							</TldrawUiDropdownMenuTrigger>
 							<TldrawUiDropdownMenuContent
 								className="tlui-cmt-menu"
@@ -1368,9 +1359,9 @@ const ThreadPin = memo(function ThreadPin({
 	const headerActions = (
 		<>
 			{currentUserId && (
-				<TooltipButton
-					tooltip={msg(thread.resolved ? 'comments.reopen' : 'comments.resolve')}
+				<button
 					className="tlui-cmt-thread__action"
+					title={msg(thread.resolved ? 'comments.reopen' : 'comments.resolve')}
 					onClick={toggleResolve}
 				>
 					<TldrawUiIcon
@@ -1378,17 +1369,18 @@ const ThreadPin = memo(function ThreadPin({
 						label={msg(thread.resolved ? 'comments.reopen' : 'comments.resolve')}
 						small
 					/>
-				</TooltipButton>
+				</button>
 			)}
 			{currentUserId && (
 				<TldrawUiDropdownMenuRoot id={`comment-thread-actions-${thread.id}`}>
 					<TldrawUiDropdownMenuTrigger>
-						<TooltipButton
-							tooltip={msg('comments.more-options')}
+						<button
+							type="button"
 							className="tlui-cmt-thread__action"
+							title={msg('comments.more-options')}
 						>
 							<TldrawUiIcon icon="dots-vertical" label={msg('comments.more-options')} small />
-						</TooltipButton>
+						</button>
 					</TldrawUiDropdownMenuTrigger>
 					<TldrawUiDropdownMenuContent
 						className="tlui-cmt-menu"
@@ -1465,26 +1457,7 @@ const ThreadPin = memo(function ThreadPin({
 		if (!drag.moved && Math.hypot(e.clientX - drag.startX, e.clientY - drag.startY) < 4) return
 		drag.moved = true
 		const cursorPage = editor.screenToPage({ x: e.clientX, y: e.clientY })
-		const pagePoint = { x: cursorPage.x + drag.offsetX, y: cursorPage.y + drag.offsetY }
-		setDragPagePoint(pagePoint)
-		// Hint the shape the pin would re-anchor to on drop — the same hit-test endDrag resolves
-		// with. Regions translate rather than re-anchor, so they never hint.
-		if (!isRegion) {
-			const hit = editor.getShapeAtPoint(pagePoint, { hitInside: true })
-			editor.setHintingShapes(hit ? [hit.id] : [])
-		}
-	}
-	// A cancelled pointer (touch gesture takeover, browser interruption) aborts the drag outright:
-	// no re-anchor commit, no click-toggle — the pin snaps back and the hint clears.
-	const cancelDrag = (e: ReactPointerEvent<HTMLDivElement>) => {
-		const drag = dragRef.current
-		dragRef.current = null
-		if (e.currentTarget.hasPointerCapture(e.pointerId)) {
-			e.currentTarget.releasePointerCapture(e.pointerId)
-		}
-		if (!drag) return
-		setDragPagePoint(null)
-		editor.setHintingShapes([])
+		setDragPagePoint({ x: cursorPage.x + drag.offsetX, y: cursorPage.y + drag.offsetY })
 	}
 	const endDrag = (e: ReactPointerEvent<HTMLDivElement>) => {
 		const drag = dragRef.current
@@ -1493,7 +1466,6 @@ const ThreadPin = memo(function ThreadPin({
 			e.currentTarget.releasePointerCapture(e.pointerId)
 		}
 		if (!drag) return
-		editor.setHintingShapes([])
 		if (!drag.moved) {
 			openThreadId.set(editor, openThreadId.get(editor) === thread.id ? null : thread.id)
 			return
@@ -1587,7 +1559,6 @@ const ThreadPin = memo(function ThreadPin({
 					onPointerDown={startDrag}
 					onPointerMove={onDrag}
 					onPointerUp={endDrag}
-					onPointerCancel={cancelDrag}
 					onPointerEnter={() => setPinHovered(true)}
 					onPointerLeave={() => setPinHovered(false)}
 				>

package/src/canvas/comments-visibility-toggle.tsx

@@ -1,5 +1,4 @@
 import { useEditor, useTranslation, useValue } from 'tldraw'
-import { TooltipButton } from '../ui/tooltip-button'
 import { commentsHidden, toggleCommentsHidden } from './state'
 
 /** The sidebar header's show/hide toggle for comment pins — an eye that closes while comments
@@ -12,14 +11,16 @@ export function CommentsVisibilityToggle() {
 	const label = hidden ? msg('comments.show') : msg('comments.hide')
 
 	return (
-		<TooltipButton
-			tooltip={label}
+		<button
+			type="button"
 			className="tlui-cmt-header-btn"
+			title={label}
+			aria-label={label}
 			aria-pressed={hidden}
 			onClick={() => toggleCommentsHidden(editor)}
 		>
 			{hidden ? <EyeClosedIcon /> : <EyeOpenIcon />}
-		</TooltipButton>
+		</button>
 	)
 }
 

package/src/ui/comments.css

@@ -32,7 +32,7 @@
 
 .tlui-cmt-head {
 	display: flex;
-	align-items: center;
+	align-items: baseline;
 	gap: 6px;
 }
 
@@ -43,7 +43,7 @@
 }
 
 .tlui-cmt-time {
-	font-size: 10px;
+	font-size: 11px;
 	color: var(--tl-color-text-3);
 }
 
@@ -566,9 +566,7 @@
 	margin-top: 2px;
 }
 
-.tlui-cmt-thread .tlui-cmt-composer {
-	padding: 4px 0 0;
-}
+/* The reply composer carries no avatar at all — the field spans the thread's full width. */
 .tlui-cmt-thread .tlui-cmt-composer .tlui-cmt-avatar {
 	display: none;
 }

package/dist-cjs/ui/tooltip-button.js

@@ -1,32 +0,0 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var tooltip_button_exports = {};
-__export(tooltip_button_exports, {
-  TooltipButton: () => TooltipButton
-});
-module.exports = __toCommonJS(tooltip_button_exports);
-var import_jsx_runtime = require("react/jsx-runtime");
-var import_react = require("react");
-var import_tldraw = require("tldraw");
-const TooltipButton = (0, import_react.forwardRef)(
-  function TooltipButton2({ tooltip, children, ...props }, ref) {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tldraw.TldrawUiTooltip, { content: tooltip, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { ref, type: "button", "aria-label": tooltip, ...props, children }) });
-  }
-);
-//# sourceMappingURL=tooltip-button.js.map

package/dist-cjs/ui/tooltip-button.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/ui/tooltip-button.tsx"],
-  "sourcesContent": ["import { type ButtonHTMLAttributes, forwardRef } from 'react'\nimport { TldrawUiTooltip } from 'tldraw'\n\ninterface TooltipButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n\ttooltip: string\n}\n\n/** An icon button labelled by a styled tooltip. Forwards ref and props to the underlying button\n *  so `asChild` triggers (dropdown, tooltip) both compose onto the real element. */\nexport const TooltipButton = forwardRef<HTMLButtonElement, TooltipButtonProps>(\n\tfunction TooltipButton({ tooltip, children, ...props }, ref) {\n\t\treturn (\n\t\t\t<TldrawUiTooltip content={tooltip}>\n\t\t\t\t<button ref={ref} type=\"button\" aria-label={tooltip} {...props}>\n\t\t\t\t\t{children}\n\t\t\t\t</button>\n\t\t\t</TldrawUiTooltip>\n\t\t)\n\t}\n)\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAaI;AAbJ,mBAAsD;AACtD,oBAAgC;AAQzB,MAAM,oBAAgB;AAAA,EAC5B,SAASA,eAAc,EAAE,SAAS,UAAU,GAAG,MAAM,GAAG,KAAK;AAC5D,WACC,4CAAC,iCAAgB,SAAS,SACzB,sDAAC,YAAO,KAAU,MAAK,UAAS,cAAY,SAAU,GAAG,OACvD,UACF,GACD;AAAA,EAEF;AACD;",
-  "names": ["TooltipButton"]
-}

package/dist-esm/ui/tooltip-button.mjs

@@ -1,12 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
-import { TldrawUiTooltip } from "tldraw";
-const TooltipButton = forwardRef(
-  function TooltipButton2({ tooltip, children, ...props }, ref) {
-    return /* @__PURE__ */ jsx(TldrawUiTooltip, { content: tooltip, children: /* @__PURE__ */ jsx("button", { ref, type: "button", "aria-label": tooltip, ...props, children }) });
-  }
-);
-export {
-  TooltipButton
-};
-//# sourceMappingURL=tooltip-button.mjs.map

package/dist-esm/ui/tooltip-button.mjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/ui/tooltip-button.tsx"],
-  "sourcesContent": ["import { type ButtonHTMLAttributes, forwardRef } from 'react'\nimport { TldrawUiTooltip } from 'tldraw'\n\ninterface TooltipButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n\ttooltip: string\n}\n\n/** An icon button labelled by a styled tooltip. Forwards ref and props to the underlying button\n *  so `asChild` triggers (dropdown, tooltip) both compose onto the real element. */\nexport const TooltipButton = forwardRef<HTMLButtonElement, TooltipButtonProps>(\n\tfunction TooltipButton({ tooltip, children, ...props }, ref) {\n\t\treturn (\n\t\t\t<TldrawUiTooltip content={tooltip}>\n\t\t\t\t<button ref={ref} type=\"button\" aria-label={tooltip} {...props}>\n\t\t\t\t\t{children}\n\t\t\t\t</button>\n\t\t\t</TldrawUiTooltip>\n\t\t)\n\t}\n)\n"],
-  "mappings": "AAaI;AAbJ,SAAoC,kBAAkB;AACtD,SAAS,uBAAuB;AAQzB,MAAM,gBAAgB;AAAA,EAC5B,SAASA,eAAc,EAAE,SAAS,UAAU,GAAG,MAAM,GAAG,KAAK;AAC5D,WACC,oBAAC,mBAAgB,SAAS,SACzB,8BAAC,YAAO,KAAU,MAAK,UAAS,cAAY,SAAU,GAAG,OACvD,UACF,GACD;AAAA,EAEF;AACD;",
-  "names": ["TooltipButton"]
-}

package/src/ui/tooltip-button.tsx

@@ -1,20 +0,0 @@
-import { type ButtonHTMLAttributes, forwardRef } from 'react'
-import { TldrawUiTooltip } from 'tldraw'
-
-interface TooltipButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-	tooltip: string
-}
-
-/** An icon button labelled by a styled tooltip. Forwards ref and props to the underlying button
- *  so `asChild` triggers (dropdown, tooltip) both compose onto the real element. */
-export const TooltipButton = forwardRef<HTMLButtonElement, TooltipButtonProps>(
-	function TooltipButton({ tooltip, children, ...props }, ref) {
-		return (
-			<TldrawUiTooltip content={tooltip}>
-				<button ref={ref} type="button" aria-label={tooltip} {...props}>
-					{children}
-				</button>
-			</TldrawUiTooltip>
-		)
-	}
-)