@tldraw/commenting 5.6.0-canary.ce8fde24c9aa → 5.6.0-canary.cecf90ca110b

package/dist-cjs/canvas/cluster-badge.js

@@ -28,6 +28,12 @@ var import_count_badge = require("../ui/count-badge");
 var import_canvas_events = require("./canvas-events");
 var import_thread_preview = require("./thread-preview");
 var import_thread_state = require("./thread-state");
+const messages = (0, import_tldraw.defineMessages)({
+  commentsClusterLabel: {
+    id: "comments.cluster-label",
+    defaultMessage: "{count, plural, one {# comment here} other {# comments here}}"
+  }
+});
 const ClusterBadge = (0, import_react.memo)(function ClusterBadge2({
   editor,
   node,
@@ -86,7 +92,7 @@ const ClusterBadge = (0, import_react.memo)(function ClusterBadge2({
         type: "button",
         className: "tlui-cmt-button tlui-cmt-canvas-cluster",
         style: { left: point.x, top: point.y },
-        "aria-label": msg("comments.cluster-label").replace("{count}", String(node.count)),
+        "aria-label": msg(messages.commentsClusterLabel, { count: node.count }),
         onPointerDown: (e) => {
           if ((0, import_canvas_events.isCanvasPanGesture)(editor, e)) {
             (0, import_canvas_events.forwardPointerEventToCanvas)(container, e);

package/dist-cjs/canvas/cluster-badge.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/canvas/cluster-badge.tsx"],
-  "sourcesContent": ["import { memo, useMemo, useRef } from 'react'\nimport {\n\tEditor,\n\tTLCommentThread,\n\tuseContainer,\n\tusePassThroughWheelEvents,\n\tuseTranslation,\n\tuseValue,\n} from 'tldraw'\nimport type { ClusterNode } from '../clustering/types'\nimport { CountBadge } from '../ui/count-badge'\nimport { forwardPointerEventToCanvas, isCanvasPanGesture } from './canvas-events'\nimport { type CommentingContext } from './context'\nimport { sortThreadsForPreview, ThreadPreview, useMarkerPreview } from './thread-preview'\nimport { impreciseShapePinInset, isInInflatedViewport } from './thread-state'\n\n/**\n * The count badge standing in for several threads folded together at the current zoom. Hovering it\n * previews its threads as a list; clicking zooms to the zoom level at which the cluster splits.\n *\n * Memoized: cluster nodes and thread records are identity-stable while unchanged, so pins and\n * badges skip re-rendering when the parent re-renders for reasons that don't concern them\n * (leaf recomputes during shape drags, partition changes elsewhere). Camera tracking still\n * works \u2014 each component subscribes to its own viewport position via signals, not via props.\n */\nexport const ClusterBadge = memo(function ClusterBadge({\n\teditor,\n\tnode,\n\tonExpand,\n\tonSelectThread,\n\tthreadsById,\n\t...props\n}: Pick<CommentingContext, 'currentUserId' | 'resolveAuthor'> & {\n\teditor: Editor\n\tnode: ClusterNode\n\tonExpand(node: ClusterNode): void\n\tonSelectThread(thread: TLCommentThread): void\n\tthreadsById: ReadonlyMap<string, TLCommentThread>\n}) {\n\tconst container = useContainer()\n\tconst msg = useTranslation()\n\tconst badgeRef = useRef<HTMLButtonElement>(null)\n\tconst { previewShown, previewHandlers } = useMarkerPreview(editor, `cluster:${node.id}`)\n\t// Wheel pass-through sits on the badge (never scrollable), not the layer root \u2014 see the\n\t// note on the layer.\n\tusePassThroughWheelEvents(badgeRef)\n\t// The mean of the members' render offsets, in screen px. Imprecise members' pins draw tucked\n\t// into their shape (see impreciseShapePinInset), and the merge thresholds are priced at those\n\t// visual positions \u2014 so the badge draws at the centroid of the pins as drawn, which (screen\n\t// mapping being affine) is the anchor centroid plus this mean. Camera-independent: its own\n\t// computed so the per-frame point below only adds two numbers, and a cluster of precise\n\t// members tracks nothing and adds zero.\n\tconst meanInset = useValue(\n\t\t'cluster badge inset',\n\t\t() => {\n\t\t\tlet x = 0\n\t\t\tlet y = 0\n\t\t\tfor (const id of node.members) {\n\t\t\t\tconst thread = threadsById.get(id)\n\t\t\t\tif (!thread) continue\n\t\t\t\tconst inset = impreciseShapePinInset(editor, thread.anchor)\n\t\t\t\tif (inset) {\n\t\t\t\t\tx += inset.x\n\t\t\t\t\ty += inset.y\n\t\t\t\t}\n\t\t\t}\n\t\t\treturn { x: x / node.count, y: y / node.count }\n\t\t},\n\t\t[editor, node, threadsById]\n\t)\n\tconst point = useValue(\n\t\t'cluster badge point',\n\t\t() => {\n\t\t\tconst pagePoint = editor.pageToViewport(node.centroid)\n\t\t\tif (!isInInflatedViewport(editor, pagePoint)) return null\n\t\t\treturn { x: pagePoint.x + meanInset.x, y: pagePoint.y + meanInset.y }\n\t\t},\n\t\t[editor, node, meanInset]\n\t)\n\n\t// `node.members` is sorted by id (the clustering table's ordering); the preview wants them in\n\t// the order a reader would expect. Only computed while the preview is up.\n\tconst previewThreads = useMemo(() => {\n\t\tif (!previewShown) return []\n\t\tconst threads: TLCommentThread[] = []\n\t\tfor (const id of node.members) {\n\t\t\tconst thread = threadsById.get(id)\n\t\t\tif (thread) threads.push(thread)\n\t\t}\n\t\treturn sortThreadsForPreview(threads)\n\t}, [previewShown, node.members, threadsById])\n\n\tif (!point) return null\n\n\treturn (\n\t\t<>\n\t\t\t<button\n\t\t\t\tref={badgeRef}\n\t\t\t\ttype=\"button\"\n\t\t\t\tclassName=\"tlui-cmt-button tlui-cmt-canvas-cluster\"\n\t\t\t\tstyle={{ left: point.x, top: point.y }}\n\t\t\t\taria-label={msg('comments.cluster-label').replace('{count}', String(node.count))}\n\t\t\t\tonPointerDown={(e) => {\n\t\t\t\t\tif (isCanvasPanGesture(editor, e)) {\n\t\t\t\t\t\tforwardPointerEventToCanvas(container, e)\n\t\t\t\t\t\treturn\n\t\t\t\t\t}\n\t\t\t\t\te.stopPropagation()\n\t\t\t\t}}\n\t\t\t\tonClick={(e) => {\n\t\t\t\t\te.stopPropagation()\n\t\t\t\t\tonExpand(node)\n\t\t\t\t}}\n\t\t\t\t{...previewHandlers}\n\t\t\t\tonFocus={previewHandlers.onPointerEnter}\n\t\t\t\tonBlur={previewHandlers.onPointerLeave}\n\t\t\t>\n\t\t\t\t<CountBadge count={node.count} />\n\t\t\t</button>\n\t\t\t{previewShown && previewThreads.length > 0 && (\n\t\t\t\t<ThreadPreview\n\t\t\t\t\teditor={editor}\n\t\t\t\t\tthreads={previewThreads}\n\t\t\t\t\tvariant=\"list\"\n\t\t\t\t\tpoint={point}\n\t\t\t\t\tonSelectThread={onSelectThread}\n\t\t\t\t\t{...previewHandlers}\n\t\t\t\t\t{...props}\n\t\t\t\t/>\n\t\t\t)}\n\t\t</>\n\t)\n})\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA+FE;AA/FF,mBAAsC;AACtC,oBAOO;AAEP,yBAA2B;AAC3B,2BAAgE;AAEhE,4BAAuE;AACvE,0BAA6D;AAWtD,MAAM,mBAAe,mBAAK,SAASA,cAAa;AAAA,EACtD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACJ,GAMG;AACF,QAAM,gBAAY,4BAAa;AAC/B,QAAM,UAAM,8BAAe;AAC3B,QAAM,eAAW,qBAA0B,IAAI;AAC/C,QAAM,EAAE,cAAc,gBAAgB,QAAI,wCAAiB,QAAQ,WAAW,KAAK,EAAE,EAAE;AAGvF,+CAA0B,QAAQ;AAOlC,QAAM,gBAAY;AAAA,IACjB;AAAA,IACA,MAAM;AACL,UAAI,IAAI;AACR,UAAI,IAAI;AACR,iBAAW,MAAM,KAAK,SAAS;AAC9B,cAAM,SAAS,YAAY,IAAI,EAAE;AACjC,YAAI,CAAC,OAAQ;AACb,cAAM,YAAQ,4CAAuB,QAAQ,OAAO,MAAM;AAC1D,YAAI,OAAO;AACV,eAAK,MAAM;AACX,eAAK,MAAM;AAAA,QACZ;AAAA,MACD;AACA,aAAO,EAAE,GAAG,IAAI,KAAK,OAAO,GAAG,IAAI,KAAK,MAAM;AAAA,IAC/C;AAAA,IACA,CAAC,QAAQ,MAAM,WAAW;AAAA,EAC3B;AACA,QAAM,YAAQ;AAAA,IACb;AAAA,IACA,MAAM;AACL,YAAM,YAAY,OAAO,eAAe,KAAK,QAAQ;AACrD,UAAI,KAAC,0CAAqB,QAAQ,SAAS,EAAG,QAAO;AACrD,aAAO,EAAE,GAAG,UAAU,IAAI,UAAU,GAAG,GAAG,UAAU,IAAI,UAAU,EAAE;AAAA,IACrE;AAAA,IACA,CAAC,QAAQ,MAAM,SAAS;AAAA,EACzB;AAIA,QAAM,qBAAiB,sBAAQ,MAAM;AACpC,QAAI,CAAC,aAAc,QAAO,CAAC;AAC3B,UAAM,UAA6B,CAAC;AACpC,eAAW,MAAM,KAAK,SAAS;AAC9B,YAAM,SAAS,YAAY,IAAI,EAAE;AACjC,UAAI,OAAQ,SAAQ,KAAK,MAAM;AAAA,IAChC;AACA,eAAO,6CAAsB,OAAO;AAAA,EACrC,GAAG,CAAC,cAAc,KAAK,SAAS,WAAW,CAAC;AAE5C,MAAI,CAAC,MAAO,QAAO;AAEnB,SACC,4EACC;AAAA;AAAA,MAAC;AAAA;AAAA,QACA,KAAK;AAAA,QACL,MAAK;AAAA,QACL,WAAU;AAAA,QACV,OAAO,EAAE,MAAM,MAAM,GAAG,KAAK,MAAM,EAAE;AAAA,QACrC,cAAY,IAAI,wBAAwB,EAAE,QAAQ,WAAW,OAAO,KAAK,KAAK,CAAC;AAAA,QAC/E,eAAe,CAAC,MAAM;AACrB,kBAAI,yCAAmB,QAAQ,CAAC,GAAG;AAClC,kEAA4B,WAAW,CAAC;AACxC;AAAA,UACD;AACA,YAAE,gBAAgB;AAAA,QACnB;AAAA,QACA,SAAS,CAAC,MAAM;AACf,YAAE,gBAAgB;AAClB,mBAAS,IAAI;AAAA,QACd;AAAA,QACC,GAAG;AAAA,QACJ,SAAS,gBAAgB;AAAA,QACzB,QAAQ,gBAAgB;AAAA,QAExB,sDAAC,iCAAW,OAAO,KAAK,OAAO;AAAA;AAAA,IAChC;AAAA,IACC,gBAAgB,eAAe,SAAS,KACxC;AAAA,MAAC;AAAA;AAAA,QACA;AAAA,QACA,SAAS;AAAA,QACT,SAAQ;AAAA,QACR;AAAA,QACA;AAAA,QACC,GAAG;AAAA,QACH,GAAG;AAAA;AAAA,IACL;AAAA,KAEF;AAEF,CAAC;",
+  "sourcesContent": ["import { memo, useMemo, useRef } from 'react'\nimport {\n\tdefineMessages,\n\tEditor,\n\tTLCommentThread,\n\tuseContainer,\n\tusePassThroughWheelEvents,\n\tuseTranslation,\n\tuseValue,\n} from 'tldraw'\nimport type { ClusterNode } from '../clustering/types'\nimport { CountBadge } from '../ui/count-badge'\nimport { forwardPointerEventToCanvas, isCanvasPanGesture } from './canvas-events'\nimport { type CommentingContext } from './context'\nimport { sortThreadsForPreview, ThreadPreview, useMarkerPreview } from './thread-preview'\nimport { impreciseShapePinInset, isInInflatedViewport } from './thread-state'\n\nconst messages = defineMessages({\n\tcommentsClusterLabel: {\n\t\tid: 'comments.cluster-label',\n\t\tdefaultMessage: '{count, plural, one {# comment here} other {# comments here}}',\n\t},\n})\n\n/**\n * The count badge standing in for several threads folded together at the current zoom. Hovering it\n * previews its threads as a list; clicking zooms to the zoom level at which the cluster splits.\n *\n * Memoized: cluster nodes and thread records are identity-stable while unchanged, so pins and\n * badges skip re-rendering when the parent re-renders for reasons that don't concern them\n * (leaf recomputes during shape drags, partition changes elsewhere). Camera tracking still\n * works \u2014 each component subscribes to its own viewport position via signals, not via props.\n */\nexport const ClusterBadge = memo(function ClusterBadge({\n\teditor,\n\tnode,\n\tonExpand,\n\tonSelectThread,\n\tthreadsById,\n\t...props\n}: Pick<CommentingContext, 'currentUserId' | 'resolveAuthor'> & {\n\teditor: Editor\n\tnode: ClusterNode\n\tonExpand(node: ClusterNode): void\n\tonSelectThread(thread: TLCommentThread): void\n\tthreadsById: ReadonlyMap<string, TLCommentThread>\n}) {\n\tconst container = useContainer()\n\tconst msg = useTranslation()\n\tconst badgeRef = useRef<HTMLButtonElement>(null)\n\tconst { previewShown, previewHandlers } = useMarkerPreview(editor, `cluster:${node.id}`)\n\t// Wheel pass-through sits on the badge (never scrollable), not the layer root \u2014 see the\n\t// note on the layer.\n\tusePassThroughWheelEvents(badgeRef)\n\t// The mean of the members' render offsets, in screen px. Imprecise members' pins draw tucked\n\t// into their shape (see impreciseShapePinInset), and the merge thresholds are priced at those\n\t// visual positions \u2014 so the badge draws at the centroid of the pins as drawn, which (screen\n\t// mapping being affine) is the anchor centroid plus this mean. Camera-independent: its own\n\t// computed so the per-frame point below only adds two numbers, and a cluster of precise\n\t// members tracks nothing and adds zero.\n\tconst meanInset = useValue(\n\t\t'cluster badge inset',\n\t\t() => {\n\t\t\tlet x = 0\n\t\t\tlet y = 0\n\t\t\tfor (const id of node.members) {\n\t\t\t\tconst thread = threadsById.get(id)\n\t\t\t\tif (!thread) continue\n\t\t\t\tconst inset = impreciseShapePinInset(editor, thread.anchor)\n\t\t\t\tif (inset) {\n\t\t\t\t\tx += inset.x\n\t\t\t\t\ty += inset.y\n\t\t\t\t}\n\t\t\t}\n\t\t\treturn { x: x / node.count, y: y / node.count }\n\t\t},\n\t\t[editor, node, threadsById]\n\t)\n\tconst point = useValue(\n\t\t'cluster badge point',\n\t\t() => {\n\t\t\tconst pagePoint = editor.pageToViewport(node.centroid)\n\t\t\tif (!isInInflatedViewport(editor, pagePoint)) return null\n\t\t\treturn { x: pagePoint.x + meanInset.x, y: pagePoint.y + meanInset.y }\n\t\t},\n\t\t[editor, node, meanInset]\n\t)\n\n\t// `node.members` is sorted by id (the clustering table's ordering); the preview wants them in\n\t// the order a reader would expect. Only computed while the preview is up.\n\tconst previewThreads = useMemo(() => {\n\t\tif (!previewShown) return []\n\t\tconst threads: TLCommentThread[] = []\n\t\tfor (const id of node.members) {\n\t\t\tconst thread = threadsById.get(id)\n\t\t\tif (thread) threads.push(thread)\n\t\t}\n\t\treturn sortThreadsForPreview(threads)\n\t}, [previewShown, node.members, threadsById])\n\n\tif (!point) return null\n\n\treturn (\n\t\t<>\n\t\t\t<button\n\t\t\t\tref={badgeRef}\n\t\t\t\ttype=\"button\"\n\t\t\t\tclassName=\"tlui-cmt-button tlui-cmt-canvas-cluster\"\n\t\t\t\tstyle={{ left: point.x, top: point.y }}\n\t\t\t\taria-label={msg(messages.commentsClusterLabel, { count: node.count })}\n\t\t\t\tonPointerDown={(e) => {\n\t\t\t\t\tif (isCanvasPanGesture(editor, e)) {\n\t\t\t\t\t\tforwardPointerEventToCanvas(container, e)\n\t\t\t\t\t\treturn\n\t\t\t\t\t}\n\t\t\t\t\te.stopPropagation()\n\t\t\t\t}}\n\t\t\t\tonClick={(e) => {\n\t\t\t\t\te.stopPropagation()\n\t\t\t\t\tonExpand(node)\n\t\t\t\t}}\n\t\t\t\t{...previewHandlers}\n\t\t\t\tonFocus={previewHandlers.onPointerEnter}\n\t\t\t\tonBlur={previewHandlers.onPointerLeave}\n\t\t\t>\n\t\t\t\t<CountBadge count={node.count} />\n\t\t\t</button>\n\t\t\t{previewShown && previewThreads.length > 0 && (\n\t\t\t\t<ThreadPreview\n\t\t\t\t\teditor={editor}\n\t\t\t\t\tthreads={previewThreads}\n\t\t\t\t\tvariant=\"list\"\n\t\t\t\t\tpoint={point}\n\t\t\t\t\tonSelectThread={onSelectThread}\n\t\t\t\t\t{...previewHandlers}\n\t\t\t\t\t{...props}\n\t\t\t\t/>\n\t\t\t)}\n\t\t</>\n\t)\n})\n"],
+  "mappings": "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",
   "names": ["ClusterBadge"]
 }

package/dist-cjs/canvas/comment-reactions.js

@@ -34,6 +34,9 @@ var import_comment_mutations = require("./comment-mutations");
 var import_comment_render = require("./comment-render");
 var import_comment_store = require("./comment-store");
 var import_options = require("./options");
+const messages = (0, import_tldraw.defineMessages)({
+  commentsUnknownAuthor: { id: "comments.unknown-author", defaultMessage: "Someone" }
+});
 function useCommentReactions(editor, commentId) {
   return (0, import_tldraw.useValue)(
     "comment reactions",
@@ -41,11 +44,12 @@ function useCommentReactions(editor, commentId) {
     [editor, commentId]
   );
 }
-function summarizeReactions(reactions, currentUserId, resolveName) {
+function summarizeReactions(reactions, currentUserId, resolveName, opts) {
+  const unknownAuthorName = opts?.unknownAuthorName ?? import_comment_render.UNKNOWN_AUTHOR;
   const groups = /* @__PURE__ */ new Map();
   for (const reaction of reactions) {
     const mine = currentUserId != null && reaction.userId === currentUserId;
-    const reactor = { name: resolveName?.(reaction.userId) ?? import_comment_render.UNKNOWN_AUTHOR, you: mine };
+    const reactor = { name: resolveName?.(reaction.userId) ?? unknownAuthorName, you: mine };
     const group = groups.get(reaction.emoji);
     if (group) {
       group.count++;
@@ -109,9 +113,11 @@ function CommentReactions({ comment, currentUserId, resolveName }) {
   const renderReaction = useReactionRenderer();
   const { components } = (0, import_options.useCommentingOptions)();
   const reactions = useCommentReactions(editor, comment.id);
+  const msg = (0, import_tldraw.useTranslation)();
+  const unknownAuthorName = msg(messages.commentsUnknownAuthor);
   const summaries = (0, import_react.useMemo)(
-    () => summarizeReactions(reactions, currentUserId, resolveName),
-    [reactions, currentUserId, resolveName]
+    () => summarizeReactions(reactions, currentUserId, resolveName, { unknownAuthorName }),
+    [reactions, currentUserId, resolveName, unknownAuthorName]
   );
   const anyMenuOpen = (0, import_tldraw.useValue)("any menu open", () => editor.menus.getOpenMenus().length > 0, [
     editor

package/dist-cjs/canvas/comment-reactions.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/canvas/comment-reactions.tsx"],
-  "sourcesContent": ["import { useMemo } from 'react'\nimport {\n\tEditor,\n\tTLComment,\n\tTLCommentReaction,\n\tcreateCommentReaction,\n\tcreateCommentReactionId,\n\tuseEditor,\n\tuseValue,\n} from 'tldraw'\nimport { RenderReaction } from '../ui/reaction'\nimport { ReactionPicker } from '../ui/reaction-picker'\nimport { Reactions, ReactionSummary } from '../ui/reactions'\nimport { commitCommentMutation } from './comment-mutations'\nimport { UNKNOWN_AUTHOR } from './comment-render'\nimport { getCommentReactions } from './comment-store'\nimport { getCommentingOptions, useCommentingOptions } from './options'\n\n/**\n * One comment's reactions, oldest first, reactively.\n *\n * @public\n */\nexport function useCommentReactions(\n\teditor: Editor,\n\tcommentId: TLComment['id']\n): TLCommentReaction[] {\n\treturn useValue(\n\t\t'comment reactions',\n\t\t() =>\n\t\t\tgetCommentReactions(editor)\n\t\t\t\t.filter((reaction) => reaction.commentId === commentId)\n\t\t\t\t.sort((a, b) => a.createdAt - b.createdAt),\n\t\t[editor, commentId]\n\t)\n}\n\n/**\n * The reaction fields {@link summarizeReactions} needs \u2014 a structural subset of\n * {@link tldraw#TLCommentReaction}, so tallies can also be built from rows synced outside the\n * editor store.\n *\n * @public\n */\nexport interface ReactionSummaryInput {\n\tuserId: string\n\temoji: string\n\tcreatedAt: number\n}\n\n/**\n * Tally a comment's reactions into an entry per emoji, ordered by when that emoji was first used so\n * the row stays stable as later reactions arrive. `active` marks the current user's emoji and\n * `reactors` lists who reacted, in reaction order. `resolveName` names each reactor; an id it can't\n * name falls back to a generic \"Someone\", never the raw user id.\n *\n * @public\n */\nexport function summarizeReactions(\n\treactions: readonly ReactionSummaryInput[],\n\tcurrentUserId?: string | null,\n\tresolveName?: (userId: string) => string | undefined\n): ReactionSummary[] {\n\tconst groups = new Map<\n\t\tstring,\n\t\t{ count: number; active: boolean; firstAt: number; reactors: ReactionSummary['reactors'] }\n\t>()\n\tfor (const reaction of reactions) {\n\t\tconst mine = currentUserId != null && reaction.userId === currentUserId\n\t\t// Fall back to a generic name, never the raw user id, when the id can't be resolved.\n\t\tconst reactor = { name: resolveName?.(reaction.userId) ?? UNKNOWN_AUTHOR, you: mine }\n\t\tconst group = groups.get(reaction.emoji)\n\t\tif (group) {\n\t\t\tgroup.count++\n\t\t\tgroup.active ||= mine\n\t\t\tgroup.firstAt = Math.min(group.firstAt, reaction.createdAt)\n\t\t\tgroup.reactors.push(reactor)\n\t\t} else {\n\t\t\tgroups.set(reaction.emoji, {\n\t\t\t\tcount: 1,\n\t\t\t\tactive: mine,\n\t\t\t\tfirstAt: reaction.createdAt,\n\t\t\t\treactors: [reactor],\n\t\t\t})\n\t\t}\n\t}\n\treturn [...groups]\n\t\t.sort(([, a], [, b]) => a.firstAt - b.firstAt)\n\t\t.map(([emoji, group]) => ({\n\t\t\temoji,\n\t\t\tcount: group.count,\n\t\t\tactive: group.active,\n\t\t\treactors: group.reactors,\n\t\t}))\n}\n\n/**\n * Toggle one user's reaction with a given emoji on a comment.\n *\n * Each reaction is its own record keyed by (comment, user, emoji), so this only touches that user's\n * own records and two people reacting at once never conflict. Behaviour depends on\n * `allowMultipleReactions`:\n *\n * - **multiple** (default): the emoji toggles independently, leaving other reactions alone.\n * - **single**: a new emoji replaces the user's existing reaction; the same one removes it.\n *\n * @public\n */\nexport function toggleCommentReaction(\n\teditor: Editor,\n\tcomment: TLComment,\n\tuserId: string,\n\temoji: string,\n\tnow = Date.now()\n): void {\n\tconst { allowMultipleReactions, isAllowedReaction } = getCommentingOptions(editor)\n\tconst targetId = createCommentReactionId(comment.id, userId, emoji)\n\tconst mine = getCommentReactions(editor).filter(\n\t\t(reaction) => reaction.commentId === comment.id && reaction.userId === userId\n\t)\n\tconst removing = mine.some((reaction) => reaction.id === targetId)\n\t// Only a token the configured palette allows may be added. Removals always go through \u2014 if a\n\t// reaction somehow carries an off-palette token, the user must still be able to clear it.\n\tif (!removing && !isAllowedReaction(emoji)) return\n\tcommitCommentMutation(editor, ({ put, remove }) => {\n\t\tif (removing) {\n\t\t\tremove([targetId])\n\t\t\treturn\n\t\t}\n\t\t// Single-select: a new emoji replaces the user's existing reaction(s) on this comment.\n\t\tif (!allowMultipleReactions && mine.length > 0) {\n\t\t\tremove(mine.map((reaction) => reaction.id))\n\t\t}\n\t\tput([\n\t\t\tcreateCommentReaction({\n\t\t\t\tcommentId: comment.id,\n\t\t\t\tthreadId: comment.threadId,\n\t\t\t\tpageId: comment.pageId,\n\t\t\t\tuserId,\n\t\t\t\temoji,\n\t\t\t\tnow,\n\t\t\t}),\n\t\t])\n\t})\n}\n\n/** @public */\nexport interface CommentReactionsProps {\n\tcomment: TLComment\n\t/** The reacting user. Null/omitted gives a read-only row (signed out): counts show, but the\n\t *  pills don't toggle. */\n\tcurrentUserId?: string | null\n\t/** Names a reactor id for the hover list. Ids it can't name fall back to a generic \"Someone\". */\n\tresolveName?(userId: string): string | undefined\n}\n\n/**\n * Adapts the `ReactionContent` override into a `renderReaction` function for the presentational\n * components. Undefined when no override is set, so they fall back to drawing the token string.\n */\nfunction useReactionRenderer(): RenderReaction | undefined {\n\tconst { components } = useCommentingOptions()\n\tconst ReactionContent = components.ReactionContent\n\treturn useMemo(\n\t\t() => (ReactionContent ? (token: string) => <ReactionContent token={token} /> : undefined),\n\t\t[ReactionContent]\n\t)\n}\n\n/**\n * The tallied reaction row under one comment. Pair with `CommentReactionPicker`, which is what\n * adds a reaction.\n * @public @react\n */\nexport function CommentReactions({ comment, currentUserId, resolveName }: CommentReactionsProps) {\n\tconst editor = useEditor()\n\tconst renderReaction = useReactionRenderer()\n\tconst { components } = useCommentingOptions()\n\tconst reactions = useCommentReactions(editor, comment.id)\n\tconst summaries = useMemo(\n\t\t() => summarizeReactions(reactions, currentUserId, resolveName),\n\t\t[reactions, currentUserId, resolveName]\n\t)\n\t// Suppress the hover list while any menu is open (the reaction picker, an overflow menu\u2026) so it\n\t// doesn't compete with the menu the user is actually working in. Edit mode already hides the\n\t// pills entirely (the card becomes a composer), so it needs no special case here.\n\tconst anyMenuOpen = useValue('any menu open', () => editor.menus.getOpenMenus().length > 0, [\n\t\teditor,\n\t])\n\treturn (\n\t\t<Reactions\n\t\t\treactions={summaries}\n\t\t\tcanReact={currentUserId != null}\n\t\t\tenableHoverList={!anyMenuOpen}\n\t\t\trenderReaction={renderReaction}\n\t\t\tReactionTooltip={components.ReactionTooltip}\n\t\t\tonToggle={(value) => {\n\t\t\t\tif (currentUserId == null) return\n\t\t\t\ttoggleCommentReaction(editor, comment, currentUserId, value)\n\t\t\t}}\n\t\t/>\n\t)\n}\n\n/** @public */\nexport interface CommentReactionPickerProps {\n\tcomment: TLComment\n\t/** The reacting user. Null/omitted renders nothing \u2014 there's nobody to react as. */\n\tcurrentUserId?: string | null\n\t/** The emoji the picker offers. Defaults to `DEFAULT_REACTION_EMOJI`. */\n\temoji?: string[]\n}\n\n/**\n * The add-reaction button for one comment. Belongs with the comment card's hover actions rather\n * than in the reaction row, so opening it doesn't chase the row as reactions are added.\n * @public @react\n */\nexport function CommentReactionPicker({\n\tcomment,\n\tcurrentUserId,\n\temoji,\n}: CommentReactionPickerProps) {\n\tconst editor = useEditor()\n\tconst { components } = useCommentingOptions()\n\tconst renderReaction = useReactionRenderer()\n\tconst reactions = useCommentReactions(editor, comment.id)\n\tconst selected = useMemo(\n\t\t() =>\n\t\t\treactions\n\t\t\t\t.filter((reaction) => currentUserId != null && reaction.userId === currentUserId)\n\t\t\t\t.map((reaction) => reaction.emoji),\n\t\t[reactions, currentUserId]\n\t)\n\tif (currentUserId == null) return null\n\treturn (\n\t\t<ReactionPicker\n\t\t\temoji={emoji}\n\t\t\tselected={selected}\n\t\t\trenderReaction={renderReaction}\n\t\t\tpalette={components.ReactionPalette}\n\t\t\tmenuId={`comment-reactions-${comment.id}`}\n\t\t\tonSelect={(value) => toggleCommentReaction(editor, comment, currentUserId, value)}\n\t\t/>\n\t)\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { useMemo } from 'react'\nimport {\n\tcreateCommentReaction,\n\tcreateCommentReactionId,\n\tdefineMessages,\n\tEditor,\n\tTLComment,\n\tTLCommentReaction,\n\tuseEditor,\n\tuseTranslation,\n\tuseValue,\n} from 'tldraw'\nimport { RenderReaction } from '../ui/reaction'\nimport { ReactionPicker } from '../ui/reaction-picker'\nimport { Reactions, ReactionSummary } from '../ui/reactions'\nimport { commitCommentMutation } from './comment-mutations'\nimport { UNKNOWN_AUTHOR } from './comment-render'\nimport { getCommentReactions } from './comment-store'\nimport { getCommentingOptions, useCommentingOptions } from './options'\n\nconst messages = defineMessages({\n\tcommentsUnknownAuthor: { id: 'comments.unknown-author', defaultMessage: 'Someone' },\n})\n\n/**\n * One comment's reactions, oldest first, reactively.\n *\n * @public\n */\nexport function useCommentReactions(\n\teditor: Editor,\n\tcommentId: TLComment['id']\n): TLCommentReaction[] {\n\treturn useValue(\n\t\t'comment reactions',\n\t\t() =>\n\t\t\tgetCommentReactions(editor)\n\t\t\t\t.filter((reaction) => reaction.commentId === commentId)\n\t\t\t\t.sort((a, b) => a.createdAt - b.createdAt),\n\t\t[editor, commentId]\n\t)\n}\n\n/**\n * The reaction fields {@link summarizeReactions} needs \u2014 a structural subset of\n * {@link tldraw#TLCommentReaction}, so tallies can also be built from rows synced outside the\n * editor store.\n *\n * @public\n */\nexport interface ReactionSummaryInput {\n\tuserId: string\n\temoji: string\n\tcreatedAt: number\n}\n\n/**\n * Tally a comment's reactions into an entry per emoji, ordered by when that emoji was first used so\n * the row stays stable as later reactions arrive. `active` marks the current user's emoji and\n * `reactors` lists who reacted, in reaction order. `resolveName` names each reactor; an id it can't\n * name falls back to `unknownAuthorName`, never the raw user id. Pass a translated name for that:\n * this is a plain function, so it can't reach the translations itself.\n *\n * @public\n */\nexport function summarizeReactions(\n\treactions: readonly ReactionSummaryInput[],\n\tcurrentUserId?: string | null,\n\tresolveName?: (userId: string) => string | undefined,\n\topts?: { unknownAuthorName?: string }\n): ReactionSummary[] {\n\tconst unknownAuthorName = opts?.unknownAuthorName ?? UNKNOWN_AUTHOR\n\tconst groups = new Map<\n\t\tstring,\n\t\t{ count: number; active: boolean; firstAt: number; reactors: ReactionSummary['reactors'] }\n\t>()\n\tfor (const reaction of reactions) {\n\t\tconst mine = currentUserId != null && reaction.userId === currentUserId\n\t\t// Fall back to a generic name, never the raw user id, when the id can't be resolved.\n\t\tconst reactor = { name: resolveName?.(reaction.userId) ?? unknownAuthorName, you: mine }\n\t\tconst group = groups.get(reaction.emoji)\n\t\tif (group) {\n\t\t\tgroup.count++\n\t\t\tgroup.active ||= mine\n\t\t\tgroup.firstAt = Math.min(group.firstAt, reaction.createdAt)\n\t\t\tgroup.reactors.push(reactor)\n\t\t} else {\n\t\t\tgroups.set(reaction.emoji, {\n\t\t\t\tcount: 1,\n\t\t\t\tactive: mine,\n\t\t\t\tfirstAt: reaction.createdAt,\n\t\t\t\treactors: [reactor],\n\t\t\t})\n\t\t}\n\t}\n\treturn [...groups]\n\t\t.sort(([, a], [, b]) => a.firstAt - b.firstAt)\n\t\t.map(([emoji, group]) => ({\n\t\t\temoji,\n\t\t\tcount: group.count,\n\t\t\tactive: group.active,\n\t\t\treactors: group.reactors,\n\t\t}))\n}\n\n/**\n * Toggle one user's reaction with a given emoji on a comment.\n *\n * Each reaction is its own record keyed by (comment, user, emoji), so this only touches that user's\n * own records and two people reacting at once never conflict. Behaviour depends on\n * `allowMultipleReactions`:\n *\n * - **multiple** (default): the emoji toggles independently, leaving other reactions alone.\n * - **single**: a new emoji replaces the user's existing reaction; the same one removes it.\n *\n * @public\n */\nexport function toggleCommentReaction(\n\teditor: Editor,\n\tcomment: TLComment,\n\tuserId: string,\n\temoji: string,\n\tnow = Date.now()\n): void {\n\tconst { allowMultipleReactions, isAllowedReaction } = getCommentingOptions(editor)\n\tconst targetId = createCommentReactionId(comment.id, userId, emoji)\n\tconst mine = getCommentReactions(editor).filter(\n\t\t(reaction) => reaction.commentId === comment.id && reaction.userId === userId\n\t)\n\tconst removing = mine.some((reaction) => reaction.id === targetId)\n\t// Only a token the configured palette allows may be added. Removals always go through \u2014 if a\n\t// reaction somehow carries an off-palette token, the user must still be able to clear it.\n\tif (!removing && !isAllowedReaction(emoji)) return\n\tcommitCommentMutation(editor, ({ put, remove }) => {\n\t\tif (removing) {\n\t\t\tremove([targetId])\n\t\t\treturn\n\t\t}\n\t\t// Single-select: a new emoji replaces the user's existing reaction(s) on this comment.\n\t\tif (!allowMultipleReactions && mine.length > 0) {\n\t\t\tremove(mine.map((reaction) => reaction.id))\n\t\t}\n\t\tput([\n\t\t\tcreateCommentReaction({\n\t\t\t\tcommentId: comment.id,\n\t\t\t\tthreadId: comment.threadId,\n\t\t\t\tpageId: comment.pageId,\n\t\t\t\tuserId,\n\t\t\t\temoji,\n\t\t\t\tnow,\n\t\t\t}),\n\t\t])\n\t})\n}\n\n/** @public */\nexport interface CommentReactionsProps {\n\tcomment: TLComment\n\t/** The reacting user. Null/omitted gives a read-only row (signed out): counts show, but the\n\t *  pills don't toggle. */\n\tcurrentUserId?: string | null\n\t/** Names a reactor id for the hover list. Ids it can't name fall back to a generic \"Someone\". */\n\tresolveName?(userId: string): string | undefined\n}\n\n/**\n * Adapts the `ReactionContent` override into a `renderReaction` function for the presentational\n * components. Undefined when no override is set, so they fall back to drawing the token string.\n */\nfunction useReactionRenderer(): RenderReaction | undefined {\n\tconst { components } = useCommentingOptions()\n\tconst ReactionContent = components.ReactionContent\n\treturn useMemo(\n\t\t() => (ReactionContent ? (token: string) => <ReactionContent token={token} /> : undefined),\n\t\t[ReactionContent]\n\t)\n}\n\n/**\n * The tallied reaction row under one comment. Pair with `CommentReactionPicker`, which is what\n * adds a reaction.\n * @public @react\n */\nexport function CommentReactions({ comment, currentUserId, resolveName }: CommentReactionsProps) {\n\tconst editor = useEditor()\n\tconst renderReaction = useReactionRenderer()\n\tconst { components } = useCommentingOptions()\n\tconst reactions = useCommentReactions(editor, comment.id)\n\tconst msg = useTranslation()\n\tconst unknownAuthorName = msg(messages.commentsUnknownAuthor)\n\tconst summaries = useMemo(\n\t\t() => summarizeReactions(reactions, currentUserId, resolveName, { unknownAuthorName }),\n\t\t[reactions, currentUserId, resolveName, unknownAuthorName]\n\t)\n\t// Suppress the hover list while any menu is open (the reaction picker, an overflow menu\u2026) so it\n\t// doesn't compete with the menu the user is actually working in. Edit mode already hides the\n\t// pills entirely (the card becomes a composer), so it needs no special case here.\n\tconst anyMenuOpen = useValue('any menu open', () => editor.menus.getOpenMenus().length > 0, [\n\t\teditor,\n\t])\n\treturn (\n\t\t<Reactions\n\t\t\treactions={summaries}\n\t\t\tcanReact={currentUserId != null}\n\t\t\tenableHoverList={!anyMenuOpen}\n\t\t\trenderReaction={renderReaction}\n\t\t\tReactionTooltip={components.ReactionTooltip}\n\t\t\tonToggle={(value) => {\n\t\t\t\tif (currentUserId == null) return\n\t\t\t\ttoggleCommentReaction(editor, comment, currentUserId, value)\n\t\t\t}}\n\t\t/>\n\t)\n}\n\n/** @public */\nexport interface CommentReactionPickerProps {\n\tcomment: TLComment\n\t/** The reacting user. Null/omitted renders nothing \u2014 there's nobody to react as. */\n\tcurrentUserId?: string | null\n\t/** The emoji the picker offers. Defaults to `DEFAULT_REACTION_EMOJI`. */\n\temoji?: string[]\n}\n\n/**\n * The add-reaction button for one comment. Belongs with the comment card's hover actions rather\n * than in the reaction row, so opening it doesn't chase the row as reactions are added.\n * @public @react\n */\nexport function CommentReactionPicker({\n\tcomment,\n\tcurrentUserId,\n\temoji,\n}: CommentReactionPickerProps) {\n\tconst editor = useEditor()\n\tconst { components } = useCommentingOptions()\n\tconst renderReaction = useReactionRenderer()\n\tconst reactions = useCommentReactions(editor, comment.id)\n\tconst selected = useMemo(\n\t\t() =>\n\t\t\treactions\n\t\t\t\t.filter((reaction) => currentUserId != null && reaction.userId === currentUserId)\n\t\t\t\t.map((reaction) => reaction.emoji),\n\t\t[reactions, currentUserId]\n\t)\n\tif (currentUserId == null) return null\n\treturn (\n\t\t<ReactionPicker\n\t\t\temoji={emoji}\n\t\t\tselected={selected}\n\t\t\trenderReaction={renderReaction}\n\t\t\tpalette={components.ReactionPalette}\n\t\t\tmenuId={`comment-reactions-${comment.id}`}\n\t\t\tonSelect={(value) => toggleCommentReaction(editor, comment, currentUserId, value)}\n\t\t/>\n\t)\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/dist-cjs/canvas/comment-render.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/canvas/comment-render.ts"],
-  "sourcesContent": ["import { type Extensions, generateText, JSONContent } from '@tiptap/core'\nimport { type CommentAuthor, createMentionExtension } from '@tldraw/mentions'\nimport { renderHtmlFromRichTextWithExtensions, TLRichText } from 'tldraw'\nimport { commentTipTapExtensions, isCommentEmpty } from '../ui/comment-extensions'\n\n/**\n * The author name shown in a byline when no source can name an id (e.g. a deleted account, or a\n * member with no comment and no live presence). The toolkit's one generic default, applied where a\n * byline needs a name; hosts pre-empt it by resolving the id from `resolveAuthor`. Not a\n * translation key \u2014 a single English literal.\n */\nexport const UNKNOWN_AUTHOR = 'Someone'\n\n/** The `CommentAuthor` fallback for an unresolvable id \u2014 just the name, no color or image.\n *  Frozen: the one shared instance is handed to host render slots. */\nexport const UNKNOWN_COMMENT_AUTHOR: CommentAuthor = Object.freeze({ name: UNKNOWN_AUTHOR })\n\n/**\n * The comment extension set has no heading node, so a body that nonetheless contains one (e.g. a\n * record created programmatically or synced from a client with a fuller set) would make TipTap\n * throw on an unknown node type. Demote any heading to a paragraph first, so headings can never\n * render as headings and rendering never crashes.\n */\nfunction demoteHeadings(node: JSONContent): JSONContent {\n\tconst content = Array.isArray(node.content) ? node.content.map(demoteHeadings) : node.content\n\tif (node.type === 'heading') {\n\t\tconst { attrs: _attrs, ...rest } = node\n\t\treturn { ...rest, type: 'paragraph', content }\n\t}\n\treturn content === node.content ? node : { ...node, content }\n}\n\n/**\n * Whether a body contains a mention node. Mention text is resolved from a member id at render time,\n * so a body with one can't be cached by identity alone (the same body renders differently as names\n * change) \u2014 those bodies skip the cache and re-render each call.\n */\nfunction hasMention(node: JSONContent): boolean {\n\tif (node.type === 'mention') return true\n\treturn Array.isArray(node.content) ? node.content.some(hasMention) : false\n}\n\nconst htmlCache = new WeakMap<TLRichText, string>()\nconst textCache = new WeakMap<TLRichText, string>()\n\n/**\n * Render a body through the comment extension set, memoized by body identity in `cache` unless the\n * body carries a mention (see {@link hasMention}), in which case the mention extension resolving\n * `resolveName` is added and nothing is cached.\n */\nfunction renderWithCommentExtensions(\n\tcache: WeakMap<TLRichText, string>,\n\trichText: TLRichText,\n\tresolveName: ((id: string) => string | undefined) | undefined,\n\trender: (doc: JSONContent, extensions: Extensions) => string\n): string {\n\tconst mentions = hasMention(richText as JSONContent)\n\tif (!mentions) {\n\t\tconst cached = cache.get(richText)\n\t\tif (cached !== undefined) return cached\n\t}\n\tconst extensions = mentions\n\t\t? [...commentTipTapExtensions, createMentionExtension({ resolveName })]\n\t\t: commentTipTapExtensions\n\tconst result = render(demoteHeadings(richText as JSONContent), extensions)\n\tif (!mentions) cache.set(richText, result)\n\treturn result\n}\n\n/**\n * Render a comment body to HTML through the limited comment extension set (no headings), so a body\n * always renders with comment formatting regardless of the host editor's rich-text config. Renders\n * through tldraw's shared helper, so it gets the same empty-paragraph fix that keeps blank lines\n * from collapsing. `resolveName` maps a member id to its current name for any @mentions.\n */\nexport function renderCommentHtml(\n\trichText: TLRichText,\n\tresolveName?: (id: string) => string | undefined\n): string {\n\treturn renderWithCommentExtensions(htmlCache, richText, resolveName, (doc, extensions) =>\n\t\trenderHtmlFromRichTextWithExtensions(doc as TLRichText, extensions)\n\t)\n}\n\n/**\n * Flatten a comment body to plaintext through the limited comment extension set \u2014 paragraphs and\n * list items separated by newlines. Used for previews (e.g. the sidebar) where formatting is dropped.\n * `resolveName` maps a member id to its current name for any @mentions.\n */\nexport function renderCommentPlaintext(\n\trichText: TLRichText,\n\tresolveName?: (id: string) => string | undefined\n): string {\n\tif (isCommentEmpty(richText)) return ''\n\treturn renderWithCommentExtensions(textCache, richText, resolveName, (doc, extensions) =>\n\t\tgenerateText(doc, extensions, { blockSeparator: '\\n' })\n\t)\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAA2D;AAC3D,sBAA2D;AAC3D,oBAAiE;AACjE,gCAAwD;AAQjD,MAAM,iBAAiB;AAIvB,MAAM,yBAAwC,OAAO,OAAO,EAAE,MAAM,eAAe,CAAC;AAQ3F,SAAS,eAAe,MAAgC;AACvD,QAAM,UAAU,MAAM,QAAQ,KAAK,OAAO,IAAI,KAAK,QAAQ,IAAI,cAAc,IAAI,KAAK;AACtF,MAAI,KAAK,SAAS,WAAW;AAC5B,UAAM,EAAE,OAAO,QAAQ,GAAG,KAAK,IAAI;AACnC,WAAO,EAAE,GAAG,MAAM,MAAM,aAAa,QAAQ;AAAA,EAC9C;AACA,SAAO,YAAY,KAAK,UAAU,OAAO,EAAE,GAAG,MAAM,QAAQ;AAC7D;AAOA,SAAS,WAAW,MAA4B;AAC/C,MAAI,KAAK,SAAS,UAAW,QAAO;AACpC,SAAO,MAAM,QAAQ,KAAK,OAAO,IAAI,KAAK,QAAQ,KAAK,UAAU,IAAI;AACtE;AAEA,MAAM,YAAY,oBAAI,QAA4B;AAClD,MAAM,YAAY,oBAAI,QAA4B;AAOlD,SAAS,4BACR,OACA,UACA,aACA,QACS;AACT,QAAM,WAAW,WAAW,QAAuB;AACnD,MAAI,CAAC,UAAU;AACd,UAAM,SAAS,MAAM,IAAI,QAAQ;AACjC,QAAI,WAAW,OAAW,QAAO;AAAA,EAClC;AACA,QAAM,aAAa,WAChB,CAAC,GAAG,uDAAyB,wCAAuB,EAAE,YAAY,CAAC,CAAC,IACpE;AACH,QAAM,SAAS,OAAO,eAAe,QAAuB,GAAG,UAAU;AACzE,MAAI,CAAC,SAAU,OAAM,IAAI,UAAU,MAAM;AACzC,SAAO;AACR;AAQO,SAAS,kBACf,UACA,aACS;AACT,SAAO;AAAA,IAA4B;AAAA,IAAW;AAAA,IAAU;AAAA,IAAa,CAAC,KAAK,mBAC1E,oDAAqC,KAAmB,UAAU;AAAA,EACnE;AACD;AAOO,SAAS,uBACf,UACA,aACS;AACT,UAAI,0CAAe,QAAQ,EAAG,QAAO;AACrC,SAAO;AAAA,IAA4B;AAAA,IAAW;AAAA,IAAU;AAAA,IAAa,CAAC,KAAK,mBAC1E,0BAAa,KAAK,YAAY,EAAE,gBAAgB,KAAK,CAAC;AAAA,EACvD;AACD;",
+  "sourcesContent": ["import { type Extensions, generateText, JSONContent } from '@tiptap/core'\nimport { type CommentAuthor, createMentionExtension } from '@tldraw/mentions'\nimport { renderHtmlFromRichTextWithExtensions, TLRichText } from 'tldraw'\nimport { commentTipTapExtensions, isCommentEmpty } from '../ui/comment-extensions'\n\n/**\n * The author name used when no source can name an id (e.g. a deleted account, or a member with no\n * comment and no live presence). Hosts pre-empt it by resolving the id from `resolveAuthor`.\n *\n * The English fallback, for the places that can't translate: it's a module constant, so the UI\n * reads `comments.unknown-author` instead and only lands here when there are no translations at\n * all. Pass a translated name to {@link summarizeReactions} for the same reason.\n */\nexport const UNKNOWN_AUTHOR = 'Someone'\n\n/** The `CommentAuthor` fallback for an unresolvable id \u2014 just the name, no color or image.\n *  Frozen: the one shared instance is handed to host render slots. */\nexport const UNKNOWN_COMMENT_AUTHOR: CommentAuthor = Object.freeze({ name: UNKNOWN_AUTHOR })\n\n/**\n * The comment extension set has no heading node, so a body that nonetheless contains one (e.g. a\n * record created programmatically or synced from a client with a fuller set) would make TipTap\n * throw on an unknown node type. Demote any heading to a paragraph first, so headings can never\n * render as headings and rendering never crashes.\n */\nfunction demoteHeadings(node: JSONContent): JSONContent {\n\tconst content = Array.isArray(node.content) ? node.content.map(demoteHeadings) : node.content\n\tif (node.type === 'heading') {\n\t\tconst { attrs: _attrs, ...rest } = node\n\t\treturn { ...rest, type: 'paragraph', content }\n\t}\n\treturn content === node.content ? node : { ...node, content }\n}\n\n/**\n * Whether a body contains a mention node. Mention text is resolved from a member id at render time,\n * so a body with one can't be cached by identity alone (the same body renders differently as names\n * change) \u2014 those bodies skip the cache and re-render each call.\n */\nfunction hasMention(node: JSONContent): boolean {\n\tif (node.type === 'mention') return true\n\treturn Array.isArray(node.content) ? node.content.some(hasMention) : false\n}\n\nconst htmlCache = new WeakMap<TLRichText, string>()\nconst textCache = new WeakMap<TLRichText, string>()\n\n/**\n * Render a body through the comment extension set, memoized by body identity in `cache` unless the\n * body carries a mention (see {@link hasMention}), in which case the mention extension resolving\n * `resolveName` is added and nothing is cached.\n */\nfunction renderWithCommentExtensions(\n\tcache: WeakMap<TLRichText, string>,\n\trichText: TLRichText,\n\tresolveName: ((id: string) => string | undefined) | undefined,\n\trender: (doc: JSONContent, extensions: Extensions) => string\n): string {\n\tconst mentions = hasMention(richText as JSONContent)\n\tif (!mentions) {\n\t\tconst cached = cache.get(richText)\n\t\tif (cached !== undefined) return cached\n\t}\n\tconst extensions = mentions\n\t\t? [...commentTipTapExtensions, createMentionExtension({ resolveName })]\n\t\t: commentTipTapExtensions\n\tconst result = render(demoteHeadings(richText as JSONContent), extensions)\n\tif (!mentions) cache.set(richText, result)\n\treturn result\n}\n\n/**\n * Render a comment body to HTML through the limited comment extension set (no headings), so a body\n * always renders with comment formatting regardless of the host editor's rich-text config. Renders\n * through tldraw's shared helper, so it gets the same empty-paragraph fix that keeps blank lines\n * from collapsing. `resolveName` maps a member id to its current name for any @mentions.\n */\nexport function renderCommentHtml(\n\trichText: TLRichText,\n\tresolveName?: (id: string) => string | undefined\n): string {\n\treturn renderWithCommentExtensions(htmlCache, richText, resolveName, (doc, extensions) =>\n\t\trenderHtmlFromRichTextWithExtensions(doc as TLRichText, extensions)\n\t)\n}\n\n/**\n * Flatten a comment body to plaintext through the limited comment extension set \u2014 paragraphs and\n * list items separated by newlines. Used for previews (e.g. the sidebar) where formatting is dropped.\n * `resolveName` maps a member id to its current name for any @mentions.\n */\nexport function renderCommentPlaintext(\n\trichText: TLRichText,\n\tresolveName?: (id: string) => string | undefined\n): string {\n\tif (isCommentEmpty(richText)) return ''\n\treturn renderWithCommentExtensions(textCache, richText, resolveName, (doc, extensions) =>\n\t\tgenerateText(doc, extensions, { blockSeparator: '\\n' })\n\t)\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAA2D;AAC3D,sBAA2D;AAC3D,oBAAiE;AACjE,gCAAwD;AAUjD,MAAM,iBAAiB;AAIvB,MAAM,yBAAwC,OAAO,OAAO,EAAE,MAAM,eAAe,CAAC;AAQ3F,SAAS,eAAe,MAAgC;AACvD,QAAM,UAAU,MAAM,QAAQ,KAAK,OAAO,IAAI,KAAK,QAAQ,IAAI,cAAc,IAAI,KAAK;AACtF,MAAI,KAAK,SAAS,WAAW;AAC5B,UAAM,EAAE,OAAO,QAAQ,GAAG,KAAK,IAAI;AACnC,WAAO,EAAE,GAAG,MAAM,MAAM,aAAa,QAAQ;AAAA,EAC9C;AACA,SAAO,YAAY,KAAK,UAAU,OAAO,EAAE,GAAG,MAAM,QAAQ;AAC7D;AAOA,SAAS,WAAW,MAA4B;AAC/C,MAAI,KAAK,SAAS,UAAW,QAAO;AACpC,SAAO,MAAM,QAAQ,KAAK,OAAO,IAAI,KAAK,QAAQ,KAAK,UAAU,IAAI;AACtE;AAEA,MAAM,YAAY,oBAAI,QAA4B;AAClD,MAAM,YAAY,oBAAI,QAA4B;AAOlD,SAAS,4BACR,OACA,UACA,aACA,QACS;AACT,QAAM,WAAW,WAAW,QAAuB;AACnD,MAAI,CAAC,UAAU;AACd,UAAM,SAAS,MAAM,IAAI,QAAQ;AACjC,QAAI,WAAW,OAAW,QAAO;AAAA,EAClC;AACA,QAAM,aAAa,WAChB,CAAC,GAAG,uDAAyB,wCAAuB,EAAE,YAAY,CAAC,CAAC,IACpE;AACH,QAAM,SAAS,OAAO,eAAe,QAAuB,GAAG,UAAU;AACzE,MAAI,CAAC,SAAU,OAAM,IAAI,UAAU,MAAM;AACzC,SAAO;AACR;AAQO,SAAS,kBACf,UACA,aACS;AACT,SAAO;AAAA,IAA4B;AAAA,IAAW;AAAA,IAAU;AAAA,IAAa,CAAC,KAAK,mBAC1E,oDAAqC,KAAmB,UAAU;AAAA,EACnE;AACD;AAOO,SAAS,uBACf,UACA,aACS;AACT,UAAI,0CAAe,QAAQ,EAAG,QAAO;AACrC,SAAO;AAAA,IAA4B;AAAA,IAAW;AAAA,IAAU;AAAA,IAAa,CAAC,KAAK,mBAC1E,0BAAa,KAAK,YAAY,EAAE,gBAAgB,KAAK,CAAC;AAAA,EACvD;AACD;",
   "names": []
 }

package/dist-cjs/canvas/comment-tool.js

@@ -214,14 +214,20 @@ class CommentDragging extends import_tldraw.StateNode {
   }
 }
 const commentTools = [CommentTool];
+const messages = (0, import_tldraw.defineMessages)({
+  toolComment: { id: "tool.comment", defaultMessage: "Comment" }
+});
 const commentToolOverrides = {
   tools(editor, tools) {
     tools.comment = {
       id: "comment",
       icon: "comment",
-      label: "Comment",
+      label: messages.toolComment.id,
       kbd: "c",
-      onSelect: () => editor.setCurrentTool("comment")
+      onSelect: (source) => {
+        if (source === "context-menu") startCommentAt(editor, editor.inputs.getOriginPagePoint());
+        else editor.setCurrentTool("comment");
+      }
     };
     return tools;
   }

package/dist-cjs/canvas/comment-tool.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/canvas/comment-tool.tsx"],
-  "sourcesContent": ["import {\n\tBoxModel,\n\tEditor,\n\tStateNode,\n\tTLCommentAnchor,\n\tTLStateNodeConstructor,\n\tTLUiOverrides,\n\tVecLike,\n} from 'tldraw'\nimport { type CommentingOptions, defaultCommentingOptions, getCommentingOptions } from './options'\nimport { commentsSidebarOpen, pendingComment, regionDraft } from './state'\nimport { commentTargetShapeAt, regionPinPoint, shapeAnchorAt } from './thread-state'\n\n/** A comment being placed but not yet posted: where its composer sits and what it will anchor\n *  to. Shared between the tool (which sets it on click) and the overlay (which renders the\n *  composer) through the internal `pendingComment` atom.\n * @internal */\nexport interface PendingComment {\n\tanchor: TLCommentAnchor\n\t/** Page point where the composer opens (the click location, or a region's pin corner). */\n\tpoint: VecLike\n}\n\n/**\n * Merge configure options over a base. Shallow for scalars; `components` is merged rather than\n * replaced so chained `configure` calls layer their slots \u2014 a later `{ components: { PinContent } }`\n * doesn't drop an earlier `{ components: { CommentBody } }`.\n */\nfunction mergeCommentingOptions(\n\tbase: CommentingOptions,\n\toverrides: Partial<CommentingOptions>\n): CommentingOptions {\n\treturn {\n\t\t...base,\n\t\t...overrides,\n\t\tcomponents: { ...base.components, ...overrides.components },\n\t}\n}\n\n/** The page-space rectangle spanned by two points, normalized so w/h are non-negative. Shared by\n *  region creation (pointer-down \u2192 cursor) and corner resize (fixed corner \u2192 cursor). */\nexport function regionBetween(a: VecLike, b: VecLike): BoxModel {\n\treturn {\n\t\tx: Math.min(a.x, b.x),\n\t\ty: Math.min(a.y, b.y),\n\t\tw: Math.abs(a.x - b.x),\n\t\th: Math.abs(a.y - b.y),\n\t}\n}\n\n/**\n * The comment tool. Pressing down opens the comment composer at the pointer and it follows until\n * release \u2014 like placing a sticky note \u2014 settling on a point, or on a shape when released over one.\n * With region comments enabled, dragging past the threshold draws a region rectangle instead.\n * Placement only opens a composer; the records are created when the comment is posted. The tool\n * stays active while the composer is open \u2014 posting returns to select, and so does clicking the\n * canvas elsewhere, which cancels the placement.\n * @public\n */\nexport class CommentTool extends StateNode {\n\tstatic override id = 'comment'\n\tstatic override initial = 'idle'\n\tstatic override children(): TLStateNodeConstructor[] {\n\t\treturn [CommentIdle, CommentPointing, CommentDragging]\n\t}\n\n\t/**\n\t * Configure this tool's {@link CommentTool.options | `options`}, returning a configured subclass\n\t * to register via `tools`. Mirrors `ShapeUtil.configure`. Layers over any prior `configure`, so\n\t * calls can be chained.\n\t *\n\t * @example\n\t * ```tsx\n\t * <Tldraw tools={[CommentTool.configure({ history: 'ignore', enableClustering: false })]} />\n\t * ```\n\t */\n\tstatic configure<T extends TLStateNodeConstructor>(\n\t\tthis: T,\n\t\toptions: T extends new (...args: any[]) => { options: infer Options } ? Partial<Options> : never\n\t): T {\n\t\t// @ts-expect-error -- mirrors ShapeUtil.configure; extending `this` is sound at runtime.\n\t\treturn class extends this {\n\t\t\t// @ts-expect-error\n\t\t\toptions = mergeCommentingOptions(this.options, options)\n\t\t}\n\t}\n\n\t/**\n\t * The merged commenting options for this editor. Read from anywhere via\n\t * {@link getCommentingOptions}. Override with {@link CommentTool.configure}.\n\t */\n\toptions: CommentingOptions = defaultCommentingOptions\n\n\toverride onEnter() {\n\t\tthis.editor.setCursor({ type: 'comment', rotation: 0 })\n\t\t// Placing comments is canvas-focused \u2014 the thread list gets out of the way while the tool is\n\t\t// active. Reopened via its own control (a button), never by leaving the tool.\n\t\tcommentsSidebarOpen.set(this.editor, false)\n\t}\n\n\toverride onExit() {\n\t\t// Drop the hover hint painted while pointing at shapes (see CommentIdle). The cursor resets\n\t\t// when the next tool takes over. The draft composer and region draft belong to the tool, so\n\t\t// they leave with it; the draft's text survives in the comment draft store.\n\t\tthis.editor.setHintingShapes([])\n\t\tpendingComment.set(this.editor, null)\n\t\tregionDraft.set(this.editor, null)\n\t}\n\n\t// Escape leaves the tool, like the built-in tools (the editor dispatches `cancel` on Escape).\n\toverride onCancel() {\n\t\tthis.editor.setCurrentTool('select')\n\t}\n}\n\nfunction pendingCommentAt(editor: Editor, point: VecLike): PendingComment {\n\tconst hit = commentTargetShapeAt(editor, point)\n\tconst anchor: TLCommentAnchor = hit\n\t\t? shapeAnchorAt(\n\t\t\t\teditor,\n\t\t\t\thit.id,\n\t\t\t\tpoint,\n\t\t\t\tgetCommentingOptions(editor).shouldBePrecise(editor, {\n\t\t\t\t\tshapeId: hit.id,\n\t\t\t\t\tpoint,\n\t\t\t\t\taltKey: editor.inputs.getAltKey(),\n\t\t\t\t})\n\t\t\t)\n\t\t: { type: 'point', x: point.x, y: point.y }\n\treturn { anchor, point: { x: point.x, y: point.y } }\n}\n\n/**\n * Open the comment composer at a page point, anchored as a comment tool click there would be. Use\n * it to start a comment from outside the tool, such as a context menu item. Enters the comment tool\n * (which must be registered), since the draft composer closes when the tool exits. It doesn't check\n * `canComment`: a viewer who can't comment sees the `ComposerFallback` slot instead.\n *\n * @example\n * ```tsx\n * <TldrawUiMenuItem id=\"comment\" label=\"Comment\" onSelect={() => startCommentAt(editor, point)} />\n * ```\n * @public\n */\nexport function startCommentAt(editor: Editor, point: VecLike) {\n\teditor.setCurrentTool('comment')\n\tconst pending = pendingCommentAt(editor, point)\n\tpendingComment.set(editor, pending)\n\t// Entering the tool hints the shape under the live pointer, which is wherever the caller's UI\n\t// was (a menu item), not `point`.\n\teditor.setHintingShapes(pending.anchor.type === 'shape' ? [pending.anchor.shapeId] : [])\n}\n\n/** Hint the shape a comment placed at the pointer would anchor to, using the same hit-test as the\n *  anchor resolution on release. Hinting shapes render an indicator ungated by the active tool, so\n *  this shows the select-style outline while the comment tool \u2014 not select \u2014 is active. */\nfunction updateAnchorHint(editor: Editor) {\n\tconst hit = commentTargetShapeAt(editor, editor.inputs.getCurrentPagePoint())\n\teditor.setHintingShapes(hit ? [hit.id] : [])\n}\n\nclass CommentIdle extends StateNode {\n\tstatic override id = 'idle'\n\n\toverride onEnter() {\n\t\t// Back to hovering: restore the pin cursor (a prior placing state may have hidden it).\n\t\tthis.editor.setCursor({ type: 'comment', rotation: 0 })\n\t\t// With a region composer open, a shape outline under its pin corner would imply a shape\n\t\t// anchor the region will never use \u2014 and it would stick, since moves over the composer\n\t\t// never reach the canvas. Point placements keep the hint: it previews the next click.\n\t\tif (pendingComment.get(this.editor)?.anchor.type === 'region') {\n\t\t\tthis.editor.setHintingShapes([])\n\t\t} else {\n\t\t\tupdateAnchorHint(this.editor)\n\t\t}\n\t}\n\n\toverride onPointerMove() {\n\t\tupdateAnchorHint(this.editor)\n\t}\n\n\toverride onPointerDown() {\n\t\t// A press away from an open composer cancels the placement rather than moving it. The\n\t\t// tool's onExit drops the draft composer; its text survives in the draft store.\n\t\tif (pendingComment.get(this.editor)) {\n\t\t\tthis.editor.setCurrentTool('select')\n\t\t\treturn\n\t\t}\n\t\tthis.parent.transition('pointing')\n\t}\n}\n\nclass CommentPointing extends StateNode {\n\tstatic override id = 'pointing'\n\n\toverride onEnter() {\n\t\t// Open the composer immediately at the press point so it's visible from pointer-down (not just\n\t\t// on release), and let it trail the pointer while dragging \u2014 like placing a sticky note. The\n\t\t// anchor is a bare point for now; it's resolved (shape or point) on pointer up.\n\t\tconst { editor } = this\n\t\t// Hide the cursor while placing: the draft composer is the pointer's stand-in now, so the pin\n\t\t// cursor sitting over it just reads as clutter.\n\t\teditor.setCursor({ type: 'none', rotation: 0 })\n\t\tconst point = editor.inputs.getCurrentPagePoint()\n\t\tpendingComment.set(editor, {\n\t\t\tanchor: { type: 'point', x: point.x, y: point.y },\n\t\t\tpoint: { x: point.x, y: point.y },\n\t\t})\n\t}\n\n\toverride onPointerMove() {\n\t\tconst { editor } = this\n\t\t// Once the pointer passes the drag threshold with region comments enabled, this is a region,\n\t\t// not a follow \u2014 hand off to the region drag (which clears this composer and draws the box).\n\t\tif (getCommentingOptions(editor).enableRegions && editor.inputs.getIsDragging()) {\n\t\t\tthis.parent.transition('dragging')\n\t\t\treturn\n\t\t}\n\t\t// Otherwise the composer trails the pointer \u2014 keep hinting the shape a release here would\n\t\t// anchor to, like the idle hover does.\n\t\tupdateAnchorHint(editor)\n\t\tconst point = editor.inputs.getCurrentPagePoint()\n\t\tpendingComment.update(editor, (p) => (p ? { ...p, point: { x: point.x, y: point.y } } : p))\n\t}\n\n\t// Settle where the pointer is released: anchor to the shape under it, or drop a point.\n\toverride onPointerUp() {\n\t\tconst { editor } = this\n\t\tconst point = editor.inputs.getCurrentPagePoint()\n\t\tpendingComment.set(editor, pendingCommentAt(editor, point))\n\t\t// Stay in the tool while the composer is open \u2014 the interaction isn't over until the\n\t\t// comment is posted or dismissed, and staying keeps the surrounding UI (style panel,\n\t\t// sidebar) from churning mid-placement.\n\t\tthis.parent.transition('idle')\n\t}\n\n\toverride onCancel() {\n\t\tthis.cancel()\n\t}\n\n\toverride onInterrupt() {\n\t\tthis.cancel()\n\t}\n\n\t// Abandon the follow composer if placement is interrupted (Escape, focus loss, etc.). The\n\t// tool's onExit drops the draft.\n\tprivate cancel() {\n\t\tthis.editor.setCurrentTool('select')\n\t}\n}\n\nclass CommentDragging extends StateNode {\n\tstatic override id = 'dragging'\n\n\toverride onEnter() {\n\t\t// A region drag supersedes the point-follow composer opened in `pointing`. Show a crosshair again,\n\t\t// since the composer no longer stands in for the pointer, and drop the placement hint \u2014 a region\n\t\t// anchors to its rectangle, so a single-shape outline would be stale.\n\t\tpendingComment.set(this.editor, null)\n\t\tthis.editor.setHintingShapes([])\n\t\tthis.editor.setCursor({ type: 'cross', rotation: 0 })\n\t\tthis.updateDraft()\n\t}\n\n\toverride onPointerMove() {\n\t\tthis.updateDraft()\n\t}\n\n\t// Commit the dragged rectangle as a region anchor; the composer opens at its pin corner.\n\toverride onPointerUp() {\n\t\tconst { editor } = this\n\t\tconst origin = editor.inputs.getOriginPagePoint()\n\t\tconst current = editor.inputs.getCurrentPagePoint()\n\t\tconst region = regionBetween(origin, current)\n\t\t// The pin lives on the corner the drag released on \u2014 drag up-left, pin top-left.\n\t\tconst pin = { x: current.x >= origin.x ? 1 : 0, y: current.y >= origin.y ? 1 : 0 }\n\t\tregionDraft.set(editor, null)\n\t\tpendingComment.set(editor, {\n\t\t\tanchor: { type: 'region', ...region, pinX: pin.x, pinY: pin.y },\n\t\t\tpoint: regionPinPoint(region, pin),\n\t\t})\n\t\t// Same as the point placement: the tool stays active while the composer is open.\n\t\tthis.parent.transition('idle')\n\t}\n\n\toverride onCancel() {\n\t\tthis.cancel()\n\t}\n\n\toverride onInterrupt() {\n\t\tthis.cancel()\n\t}\n\n\tprivate updateDraft() {\n\t\tconst { editor } = this\n\t\tregionDraft.set(\n\t\t\teditor,\n\t\t\tregionBetween(editor.inputs.getOriginPagePoint(), editor.inputs.getCurrentPagePoint())\n\t\t)\n\t}\n\n\t// The tool's onExit drops the region draft.\n\tprivate cancel() {\n\t\tthis.editor.setCurrentTool('select')\n\t}\n}\n\n/** @public */\nexport const commentTools = [CommentTool]\n\n/** Registers the comment tool in the UI (icon, label, shortcut). Compose into your overrides.\n *  Once registered, tldraw's `DefaultQuickActionsContent` shows the comment button.\n * @public */\nexport const commentToolOverrides: TLUiOverrides = {\n\ttools(editor, tools) {\n\t\ttools.comment = {\n\t\t\tid: 'comment',\n\t\t\ticon: 'comment',\n\t\t\tlabel: 'Comment',\n\t\t\tkbd: 'c',\n\t\t\tonSelect: () => editor.setCurrentTool('comment'),\n\t\t}\n\t\treturn tools\n\t},\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import {\n\tBoxModel,\n\tEditor,\n\tStateNode,\n\tTLCommentAnchor,\n\tTLStateNodeConstructor,\n\tTLUiOverrides,\n\tVecLike,\n\tdefineMessages,\n} from 'tldraw'\nimport { type CommentingOptions, defaultCommentingOptions, getCommentingOptions } from './options'\nimport { commentsSidebarOpen, pendingComment, regionDraft } from './state'\nimport { commentTargetShapeAt, regionPinPoint, shapeAnchorAt } from './thread-state'\n\n/** A comment being placed but not yet posted: where its composer sits and what it will anchor\n *  to. Shared between the tool (which sets it on click) and the overlay (which renders the\n *  composer) through the internal `pendingComment` atom.\n * @internal */\nexport interface PendingComment {\n\tanchor: TLCommentAnchor\n\t/** Page point where the composer opens (the click location, or a region's pin corner). */\n\tpoint: VecLike\n}\n\n/**\n * Merge configure options over a base. Shallow for scalars; `components` is merged rather than\n * replaced so chained `configure` calls layer their slots \u2014 a later `{ components: { PinContent } }`\n * doesn't drop an earlier `{ components: { CommentBody } }`.\n */\nfunction mergeCommentingOptions(\n\tbase: CommentingOptions,\n\toverrides: Partial<CommentingOptions>\n): CommentingOptions {\n\treturn {\n\t\t...base,\n\t\t...overrides,\n\t\tcomponents: { ...base.components, ...overrides.components },\n\t}\n}\n\n/** The page-space rectangle spanned by two points, normalized so w/h are non-negative. Shared by\n *  region creation (pointer-down \u2192 cursor) and corner resize (fixed corner \u2192 cursor). */\nexport function regionBetween(a: VecLike, b: VecLike): BoxModel {\n\treturn {\n\t\tx: Math.min(a.x, b.x),\n\t\ty: Math.min(a.y, b.y),\n\t\tw: Math.abs(a.x - b.x),\n\t\th: Math.abs(a.y - b.y),\n\t}\n}\n\n/**\n * The comment tool. Pressing down opens the comment composer at the pointer and it follows until\n * release \u2014 like placing a sticky note \u2014 settling on a point, or on a shape when released over one.\n * With region comments enabled, dragging past the threshold draws a region rectangle instead.\n * Placement only opens a composer; the records are created when the comment is posted. The tool\n * stays active while the composer is open \u2014 posting returns to select, and so does clicking the\n * canvas elsewhere, which cancels the placement.\n * @public\n */\nexport class CommentTool extends StateNode {\n\tstatic override id = 'comment'\n\tstatic override initial = 'idle'\n\tstatic override children(): TLStateNodeConstructor[] {\n\t\treturn [CommentIdle, CommentPointing, CommentDragging]\n\t}\n\n\t/**\n\t * Configure this tool's {@link CommentTool.options | `options`}, returning a configured subclass\n\t * to register via `tools`. Mirrors `ShapeUtil.configure`. Layers over any prior `configure`, so\n\t * calls can be chained.\n\t *\n\t * @example\n\t * ```tsx\n\t * <Tldraw tools={[CommentTool.configure({ history: 'ignore', enableClustering: false })]} />\n\t * ```\n\t */\n\tstatic configure<T extends TLStateNodeConstructor>(\n\t\tthis: T,\n\t\toptions: T extends new (...args: any[]) => { options: infer Options } ? Partial<Options> : never\n\t): T {\n\t\t// @ts-expect-error -- mirrors ShapeUtil.configure; extending `this` is sound at runtime.\n\t\treturn class extends this {\n\t\t\t// @ts-expect-error\n\t\t\toptions = mergeCommentingOptions(this.options, options)\n\t\t}\n\t}\n\n\t/**\n\t * The merged commenting options for this editor. Read from anywhere via\n\t * {@link getCommentingOptions}. Override with {@link CommentTool.configure}.\n\t */\n\toptions: CommentingOptions = defaultCommentingOptions\n\n\toverride onEnter() {\n\t\tthis.editor.setCursor({ type: 'comment', rotation: 0 })\n\t\t// Placing comments is canvas-focused \u2014 the thread list gets out of the way while the tool is\n\t\t// active. Reopened via its own control (a button), never by leaving the tool.\n\t\tcommentsSidebarOpen.set(this.editor, false)\n\t}\n\n\toverride onExit() {\n\t\t// Drop the hover hint painted while pointing at shapes (see CommentIdle). The cursor resets\n\t\t// when the next tool takes over. The draft composer and region draft belong to the tool, so\n\t\t// they leave with it; the draft's text survives in the comment draft store.\n\t\tthis.editor.setHintingShapes([])\n\t\tpendingComment.set(this.editor, null)\n\t\tregionDraft.set(this.editor, null)\n\t}\n\n\t// Escape leaves the tool, like the built-in tools (the editor dispatches `cancel` on Escape).\n\toverride onCancel() {\n\t\tthis.editor.setCurrentTool('select')\n\t}\n}\n\nfunction pendingCommentAt(editor: Editor, point: VecLike): PendingComment {\n\tconst hit = commentTargetShapeAt(editor, point)\n\tconst anchor: TLCommentAnchor = hit\n\t\t? shapeAnchorAt(\n\t\t\t\teditor,\n\t\t\t\thit.id,\n\t\t\t\tpoint,\n\t\t\t\tgetCommentingOptions(editor).shouldBePrecise(editor, {\n\t\t\t\t\tshapeId: hit.id,\n\t\t\t\t\tpoint,\n\t\t\t\t\taltKey: editor.inputs.getAltKey(),\n\t\t\t\t})\n\t\t\t)\n\t\t: { type: 'point', x: point.x, y: point.y }\n\treturn { anchor, point: { x: point.x, y: point.y } }\n}\n\n/**\n * Open the comment composer at a page point, anchored as a comment tool click there would be. Use\n * it to start a comment from outside the tool, such as a context menu item. Enters the comment tool\n * (which must be registered), since the draft composer closes when the tool exits. It doesn't check\n * `canComment`: a viewer who can't comment sees the `ComposerFallback` slot instead.\n *\n * @example\n * ```tsx\n * <TldrawUiMenuItem id=\"comment\" label=\"Comment\" onSelect={() => startCommentAt(editor, point)} />\n * ```\n * @public\n */\nexport function startCommentAt(editor: Editor, point: VecLike) {\n\teditor.setCurrentTool('comment')\n\tconst pending = pendingCommentAt(editor, point)\n\tpendingComment.set(editor, pending)\n\t// Entering the tool hints the shape under the live pointer, which is wherever the caller's UI\n\t// was (a menu item), not `point`.\n\teditor.setHintingShapes(pending.anchor.type === 'shape' ? [pending.anchor.shapeId] : [])\n}\n\n/** Hint the shape a comment placed at the pointer would anchor to, using the same hit-test as the\n *  anchor resolution on release. Hinting shapes render an indicator ungated by the active tool, so\n *  this shows the select-style outline while the comment tool \u2014 not select \u2014 is active. */\nfunction updateAnchorHint(editor: Editor) {\n\tconst hit = commentTargetShapeAt(editor, editor.inputs.getCurrentPagePoint())\n\teditor.setHintingShapes(hit ? [hit.id] : [])\n}\n\nclass CommentIdle extends StateNode {\n\tstatic override id = 'idle'\n\n\toverride onEnter() {\n\t\t// Back to hovering: restore the pin cursor (a prior placing state may have hidden it).\n\t\tthis.editor.setCursor({ type: 'comment', rotation: 0 })\n\t\t// With a region composer open, a shape outline under its pin corner would imply a shape\n\t\t// anchor the region will never use \u2014 and it would stick, since moves over the composer\n\t\t// never reach the canvas. Point placements keep the hint: it previews the next click.\n\t\tif (pendingComment.get(this.editor)?.anchor.type === 'region') {\n\t\t\tthis.editor.setHintingShapes([])\n\t\t} else {\n\t\t\tupdateAnchorHint(this.editor)\n\t\t}\n\t}\n\n\toverride onPointerMove() {\n\t\tupdateAnchorHint(this.editor)\n\t}\n\n\toverride onPointerDown() {\n\t\t// A press away from an open composer cancels the placement rather than moving it. The\n\t\t// tool's onExit drops the draft composer; its text survives in the draft store.\n\t\tif (pendingComment.get(this.editor)) {\n\t\t\tthis.editor.setCurrentTool('select')\n\t\t\treturn\n\t\t}\n\t\tthis.parent.transition('pointing')\n\t}\n}\n\nclass CommentPointing extends StateNode {\n\tstatic override id = 'pointing'\n\n\toverride onEnter() {\n\t\t// Open the composer immediately at the press point so it's visible from pointer-down (not just\n\t\t// on release), and let it trail the pointer while dragging \u2014 like placing a sticky note. The\n\t\t// anchor is a bare point for now; it's resolved (shape or point) on pointer up.\n\t\tconst { editor } = this\n\t\t// Hide the cursor while placing: the draft composer is the pointer's stand-in now, so the pin\n\t\t// cursor sitting over it just reads as clutter.\n\t\teditor.setCursor({ type: 'none', rotation: 0 })\n\t\tconst point = editor.inputs.getCurrentPagePoint()\n\t\tpendingComment.set(editor, {\n\t\t\tanchor: { type: 'point', x: point.x, y: point.y },\n\t\t\tpoint: { x: point.x, y: point.y },\n\t\t})\n\t}\n\n\toverride onPointerMove() {\n\t\tconst { editor } = this\n\t\t// Once the pointer passes the drag threshold with region comments enabled, this is a region,\n\t\t// not a follow \u2014 hand off to the region drag (which clears this composer and draws the box).\n\t\tif (getCommentingOptions(editor).enableRegions && editor.inputs.getIsDragging()) {\n\t\t\tthis.parent.transition('dragging')\n\t\t\treturn\n\t\t}\n\t\t// Otherwise the composer trails the pointer \u2014 keep hinting the shape a release here would\n\t\t// anchor to, like the idle hover does.\n\t\tupdateAnchorHint(editor)\n\t\tconst point = editor.inputs.getCurrentPagePoint()\n\t\tpendingComment.update(editor, (p) => (p ? { ...p, point: { x: point.x, y: point.y } } : p))\n\t}\n\n\t// Settle where the pointer is released: anchor to the shape under it, or drop a point.\n\toverride onPointerUp() {\n\t\tconst { editor } = this\n\t\tconst point = editor.inputs.getCurrentPagePoint()\n\t\tpendingComment.set(editor, pendingCommentAt(editor, point))\n\t\t// Stay in the tool while the composer is open \u2014 the interaction isn't over until the\n\t\t// comment is posted or dismissed, and staying keeps the surrounding UI (style panel,\n\t\t// sidebar) from churning mid-placement.\n\t\tthis.parent.transition('idle')\n\t}\n\n\toverride onCancel() {\n\t\tthis.cancel()\n\t}\n\n\toverride onInterrupt() {\n\t\tthis.cancel()\n\t}\n\n\t// Abandon the follow composer if placement is interrupted (Escape, focus loss, etc.). The\n\t// tool's onExit drops the draft.\n\tprivate cancel() {\n\t\tthis.editor.setCurrentTool('select')\n\t}\n}\n\nclass CommentDragging extends StateNode {\n\tstatic override id = 'dragging'\n\n\toverride onEnter() {\n\t\t// A region drag supersedes the point-follow composer opened in `pointing`. Show a crosshair again,\n\t\t// since the composer no longer stands in for the pointer, and drop the placement hint \u2014 a region\n\t\t// anchors to its rectangle, so a single-shape outline would be stale.\n\t\tpendingComment.set(this.editor, null)\n\t\tthis.editor.setHintingShapes([])\n\t\tthis.editor.setCursor({ type: 'cross', rotation: 0 })\n\t\tthis.updateDraft()\n\t}\n\n\toverride onPointerMove() {\n\t\tthis.updateDraft()\n\t}\n\n\t// Commit the dragged rectangle as a region anchor; the composer opens at its pin corner.\n\toverride onPointerUp() {\n\t\tconst { editor } = this\n\t\tconst origin = editor.inputs.getOriginPagePoint()\n\t\tconst current = editor.inputs.getCurrentPagePoint()\n\t\tconst region = regionBetween(origin, current)\n\t\t// The pin lives on the corner the drag released on \u2014 drag up-left, pin top-left.\n\t\tconst pin = { x: current.x >= origin.x ? 1 : 0, y: current.y >= origin.y ? 1 : 0 }\n\t\tregionDraft.set(editor, null)\n\t\tpendingComment.set(editor, {\n\t\t\tanchor: { type: 'region', ...region, pinX: pin.x, pinY: pin.y },\n\t\t\tpoint: regionPinPoint(region, pin),\n\t\t})\n\t\t// Same as the point placement: the tool stays active while the composer is open.\n\t\tthis.parent.transition('idle')\n\t}\n\n\toverride onCancel() {\n\t\tthis.cancel()\n\t}\n\n\toverride onInterrupt() {\n\t\tthis.cancel()\n\t}\n\n\tprivate updateDraft() {\n\t\tconst { editor } = this\n\t\tregionDraft.set(\n\t\t\teditor,\n\t\t\tregionBetween(editor.inputs.getOriginPagePoint(), editor.inputs.getCurrentPagePoint())\n\t\t)\n\t}\n\n\t// The tool's onExit drops the region draft.\n\tprivate cancel() {\n\t\tthis.editor.setCurrentTool('select')\n\t}\n}\n\n/** @public */\nexport const commentTools = [CommentTool]\n\nconst messages = defineMessages({\n\ttoolComment: { id: 'tool.comment', defaultMessage: 'Comment' },\n})\n\n/** Registers the comment tool in the UI (icon, label, shortcut). Compose into your overrides.\n *  Once registered, tldraw's `DefaultQuickActionsContent` shows the comment button, and its\n *  `DefaultContextMenuContent` shows a comment item that opens the composer where the menu was\n *  opened.\n * @public */\nexport const commentToolOverrides: TLUiOverrides = {\n\ttools(editor, tools) {\n\t\ttools.comment = {\n\t\t\tid: 'comment',\n\t\t\ticon: 'comment',\n\t\t\tlabel: messages.toolComment.id,\n\t\t\tkbd: 'c',\n\t\t\tonSelect: (source) => {\n\t\t\t\t// The menu was opened by the last pointer down; the live pointer is over the menu now.\n\t\t\t\tif (source === 'context-menu') startCommentAt(editor, editor.inputs.getOriginPagePoint())\n\t\t\t\telse editor.setCurrentTool('comment')\n\t\t\t},\n\t\t}\n\t\treturn tools\n\t},\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/dist-cjs/canvas/comments-filter-menu.js

@@ -25,6 +25,13 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_tldraw = require("tldraw");
 var import_icons = require("../ui/icons");
 var import_state = require("./state");
+const messages = (0, import_tldraw.defineMessages)({
+  commentsFilter: { id: "comments.filter", defaultMessage: "Filter comments" },
+  commentsOnlyMyComments: { id: "comments.only-my-comments", defaultMessage: "Only my comments" },
+  commentsOnlyUnread: { id: "comments.only-unread", defaultMessage: "Only unread" },
+  commentsShowAllPages: { id: "comments.show-all-pages", defaultMessage: "Show all pages" },
+  commentsShowResolved: { id: "comments.show-resolved", defaultMessage: "Show resolved comments" }
+});
 function CommentsFilterMenu({
   canFilterByAuthor,
   canFilterByUnread
@@ -40,8 +47,8 @@ function CommentsFilterMenu({
       import_tldraw.TldrawUiButton,
       {
         type: "icon",
-        tooltip: msg("comments.filter"),
-        title: msg("comments.filter"),
+        tooltip: msg(messages.commentsFilter),
+        title: msg(messages.commentsFilter),
         className: "tlui-cmt-header-btn",
         children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.MoreMenuIcon, {})
       }
@@ -51,7 +58,7 @@ function CommentsFilterMenu({
         import_tldraw.TldrawUiMenuCheckboxItem,
         {
           id: "show-all-pages",
-          label: "comments.show-all-pages",
+          label: messages.commentsShowAllPages.id,
           checked: !filters.onlyCurrentPage,
           onSelect: () => toggle("onlyCurrentPage")
         }
@@ -60,7 +67,7 @@ function CommentsFilterMenu({
         import_tldraw.TldrawUiMenuCheckboxItem,
         {
           id: "only-my-comments",
-          label: "comments.only-my-comments",
+          label: messages.commentsOnlyMyComments.id,
           checked: filters.onlyMine,
           onSelect: () => toggle("onlyMine")
         }
@@ -69,7 +76,7 @@ function CommentsFilterMenu({
         import_tldraw.TldrawUiMenuCheckboxItem,
         {
           id: "only-unread",
-          label: "comments.only-unread",
+          label: messages.commentsOnlyUnread.id,
           checked: filters.onlyUnread,
           onSelect: () => toggle("onlyUnread")
         }
@@ -78,7 +85,7 @@ function CommentsFilterMenu({
         import_tldraw.TldrawUiMenuCheckboxItem,
         {
           id: "show-resolved",
-          label: "comments.show-resolved",
+          label: messages.commentsShowResolved.id,
           checked: filters.showResolved,
           onSelect: () => toggle("showResolved")
         }

package/dist-cjs/canvas/comments-filter-menu.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/canvas/comments-filter-menu.tsx"],
-  "sourcesContent": ["import {\n\tTldrawUiButton,\n\tTldrawUiDropdownMenuContent,\n\tTldrawUiDropdownMenuRoot,\n\tTldrawUiDropdownMenuTrigger,\n\tTldrawUiMenuCheckboxItem,\n\tTldrawUiMenuContextProvider,\n\tTldrawUiMenuGroup,\n\tuseEditor,\n\tuseTranslation,\n\tuseValue,\n} from 'tldraw'\nimport { MoreMenuIcon } from '../ui/icons'\nimport { SidebarFilters } from './sidebar-filters'\nimport { sidebarFilters } from './state'\n\n/** @public */\nexport interface CommentsFilterMenuProps {\n\t/** Whether to offer the \"only your threads\" toggle (needs a known current user). */\n\tcanFilterByAuthor?: boolean\n\t/** Whether to offer the \"only unread\" toggle (needs a read-status source). */\n\tcanFilterByUnread?: boolean\n}\n\n/** The funnel dropdown in the sidebar header: toggles for which threads the list shows.\n * @public @react */\nexport function CommentsFilterMenu({\n\tcanFilterByAuthor,\n\tcanFilterByUnread,\n}: CommentsFilterMenuProps) {\n\tconst editor = useEditor()\n\tconst msg = useTranslation()\n\tconst filters = useValue('sidebar filters', () => sidebarFilters.get(editor), [editor])\n\tconst toggle = (key: keyof SidebarFilters) => {\n\t\tsidebarFilters.update(editor, (f) => ({ ...f, [key]: !f[key] }))\n\t}\n\n\treturn (\n\t\t<TldrawUiDropdownMenuRoot id=\"comments-filter\">\n\t\t\t<TldrawUiDropdownMenuTrigger>\n\t\t\t\t<TldrawUiButton\n\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\ttooltip={msg('comments.filter')}\n\t\t\t\t\ttitle={msg('comments.filter')}\n\t\t\t\t\tclassName=\"tlui-cmt-header-btn\"\n\t\t\t\t>\n\t\t\t\t\t<MoreMenuIcon />\n\t\t\t\t</TldrawUiButton>\n\t\t\t</TldrawUiDropdownMenuTrigger>\n\t\t\t{/* No tlui-cmt-menu here: the rows are tldraw menu items, which carry their own insets \u2014\n\t\t\t    the extra padding would set this menu apart from the canvas menus it should match. */}\n\t\t\t<TldrawUiDropdownMenuContent side=\"bottom\" align=\"end\" alignOffset={0}>\n\t\t\t\t<TldrawUiMenuContextProvider type=\"menu\" sourceId=\"menu\">\n\t\t\t\t\t<TldrawUiMenuGroup id=\"comments-filter\">\n\t\t\t\t\t\t<TldrawUiMenuCheckboxItem\n\t\t\t\t\t\t\tid=\"show-all-pages\"\n\t\t\t\t\t\t\tlabel=\"comments.show-all-pages\"\n\t\t\t\t\t\t\tchecked={!filters.onlyCurrentPage}\n\t\t\t\t\t\t\tonSelect={() => toggle('onlyCurrentPage')}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t{canFilterByAuthor && (\n\t\t\t\t\t\t\t<TldrawUiMenuCheckboxItem\n\t\t\t\t\t\t\t\tid=\"only-my-comments\"\n\t\t\t\t\t\t\t\tlabel=\"comments.only-my-comments\"\n\t\t\t\t\t\t\t\tchecked={filters.onlyMine}\n\t\t\t\t\t\t\t\tonSelect={() => toggle('onlyMine')}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{canFilterByUnread && (\n\t\t\t\t\t\t\t<TldrawUiMenuCheckboxItem\n\t\t\t\t\t\t\t\tid=\"only-unread\"\n\t\t\t\t\t\t\t\tlabel=\"comments.only-unread\"\n\t\t\t\t\t\t\t\tchecked={filters.onlyUnread}\n\t\t\t\t\t\t\t\tonSelect={() => toggle('onlyUnread')}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t<TldrawUiMenuCheckboxItem\n\t\t\t\t\t\t\tid=\"show-resolved\"\n\t\t\t\t\t\t\tlabel=\"comments.show-resolved\"\n\t\t\t\t\t\t\tchecked={filters.showResolved}\n\t\t\t\t\t\t\tonSelect={() => toggle('showResolved')}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</TldrawUiMenuGroup>\n\t\t\t\t</TldrawUiMenuContextProvider>\n\t\t\t</TldrawUiDropdownMenuContent>\n\t\t</TldrawUiDropdownMenuRoot>\n\t)\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA8CK;AA9CL,oBAWO;AACP,mBAA6B;AAE7B,mBAA+B;AAYxB,SAAS,mBAAmB;AAAA,EAClC;AAAA,EACA;AACD,GAA4B;AAC3B,QAAM,aAAS,yBAAU;AACzB,QAAM,UAAM,8BAAe;AAC3B,QAAM,cAAU,wBAAS,mBAAmB,MAAM,4BAAe,IAAI,MAAM,GAAG,CAAC,MAAM,CAAC;AACtF,QAAM,SAAS,CAAC,QAA8B;AAC7C,gCAAe,OAAO,QAAQ,CAAC,OAAO,EAAE,GAAG,GAAG,CAAC,GAAG,GAAG,CAAC,EAAE,GAAG,EAAE,EAAE;AAAA,EAChE;AAEA,SACC,6CAAC,0CAAyB,IAAG,mBAC5B;AAAA,gDAAC,6CACA;AAAA,MAAC;AAAA;AAAA,QACA,MAAK;AAAA,QACL,SAAS,IAAI,iBAAiB;AAAA,QAC9B,OAAO,IAAI,iBAAiB;AAAA,QAC5B,WAAU;AAAA,QAEV,sDAAC,6BAAa;AAAA;AAAA,IACf,GACD;AAAA,IAGA,4CAAC,6CAA4B,MAAK,UAAS,OAAM,OAAM,aAAa,GACnE,sDAAC,6CAA4B,MAAK,QAAO,UAAS,QACjD,uDAAC,mCAAkB,IAAG,mBACrB;AAAA;AAAA,QAAC;AAAA;AAAA,UACA,IAAG;AAAA,UACH,OAAM;AAAA,UACN,SAAS,CAAC,QAAQ;AAAA,UAClB,UAAU,MAAM,OAAO,iBAAiB;AAAA;AAAA,MACzC;AAAA,MACC,qBACA;AAAA,QAAC;AAAA;AAAA,UACA,IAAG;AAAA,UACH,OAAM;AAAA,UACN,SAAS,QAAQ;AAAA,UACjB,UAAU,MAAM,OAAO,UAAU;AAAA;AAAA,MAClC;AAAA,MAEA,qBACA;AAAA,QAAC;AAAA;AAAA,UACA,IAAG;AAAA,UACH,OAAM;AAAA,UACN,SAAS,QAAQ;AAAA,UACjB,UAAU,MAAM,OAAO,YAAY;AAAA;AAAA,MACpC;AAAA,MAED;AAAA,QAAC;AAAA;AAAA,UACA,IAAG;AAAA,UACH,OAAM;AAAA,UACN,SAAS,QAAQ;AAAA,UACjB,UAAU,MAAM,OAAO,cAAc;AAAA;AAAA,MACtC;AAAA,OACD,GACD,GACD;AAAA,KACD;AAEF;",
+  "sourcesContent": ["import {\n\tdefineMessages,\n\tTldrawUiButton,\n\tTldrawUiDropdownMenuContent,\n\tTldrawUiDropdownMenuRoot,\n\tTldrawUiDropdownMenuTrigger,\n\tTldrawUiMenuCheckboxItem,\n\tTldrawUiMenuContextProvider,\n\tTldrawUiMenuGroup,\n\tuseEditor,\n\tuseTranslation,\n\tuseValue,\n} from 'tldraw'\nimport { MoreMenuIcon } from '../ui/icons'\nimport { SidebarFilters } from './sidebar-filters'\nimport { sidebarFilters } from './state'\n\nconst messages = defineMessages({\n\tcommentsFilter: { id: 'comments.filter', defaultMessage: 'Filter comments' },\n\tcommentsOnlyMyComments: { id: 'comments.only-my-comments', defaultMessage: 'Only my comments' },\n\tcommentsOnlyUnread: { id: 'comments.only-unread', defaultMessage: 'Only unread' },\n\tcommentsShowAllPages: { id: 'comments.show-all-pages', defaultMessage: 'Show all pages' },\n\tcommentsShowResolved: { id: 'comments.show-resolved', defaultMessage: 'Show resolved comments' },\n})\n\n/** @public */\nexport interface CommentsFilterMenuProps {\n\t/** Whether to offer the \"only your threads\" toggle (needs a known current user). */\n\tcanFilterByAuthor?: boolean\n\t/** Whether to offer the \"only unread\" toggle (needs a read-status source). */\n\tcanFilterByUnread?: boolean\n}\n\n/** The funnel dropdown in the sidebar header: toggles for which threads the list shows.\n * @public @react */\nexport function CommentsFilterMenu({\n\tcanFilterByAuthor,\n\tcanFilterByUnread,\n}: CommentsFilterMenuProps) {\n\tconst editor = useEditor()\n\tconst msg = useTranslation()\n\tconst filters = useValue('sidebar filters', () => sidebarFilters.get(editor), [editor])\n\tconst toggle = (key: keyof SidebarFilters) => {\n\t\tsidebarFilters.update(editor, (f) => ({ ...f, [key]: !f[key] }))\n\t}\n\n\treturn (\n\t\t<TldrawUiDropdownMenuRoot id=\"comments-filter\">\n\t\t\t<TldrawUiDropdownMenuTrigger>\n\t\t\t\t<TldrawUiButton\n\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\ttooltip={msg(messages.commentsFilter)}\n\t\t\t\t\ttitle={msg(messages.commentsFilter)}\n\t\t\t\t\tclassName=\"tlui-cmt-header-btn\"\n\t\t\t\t>\n\t\t\t\t\t<MoreMenuIcon />\n\t\t\t\t</TldrawUiButton>\n\t\t\t</TldrawUiDropdownMenuTrigger>\n\t\t\t{/* No tlui-cmt-menu here: the rows are tldraw menu items, which carry their own insets \u2014\n\t\t\t    the extra padding would set this menu apart from the canvas menus it should match. */}\n\t\t\t<TldrawUiDropdownMenuContent side=\"bottom\" align=\"end\" alignOffset={0}>\n\t\t\t\t<TldrawUiMenuContextProvider type=\"menu\" sourceId=\"menu\">\n\t\t\t\t\t<TldrawUiMenuGroup id=\"comments-filter\">\n\t\t\t\t\t\t<TldrawUiMenuCheckboxItem\n\t\t\t\t\t\t\tid=\"show-all-pages\"\n\t\t\t\t\t\t\tlabel={messages.commentsShowAllPages.id}\n\t\t\t\t\t\t\tchecked={!filters.onlyCurrentPage}\n\t\t\t\t\t\t\tonSelect={() => toggle('onlyCurrentPage')}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t{canFilterByAuthor && (\n\t\t\t\t\t\t\t<TldrawUiMenuCheckboxItem\n\t\t\t\t\t\t\t\tid=\"only-my-comments\"\n\t\t\t\t\t\t\t\tlabel={messages.commentsOnlyMyComments.id}\n\t\t\t\t\t\t\t\tchecked={filters.onlyMine}\n\t\t\t\t\t\t\t\tonSelect={() => toggle('onlyMine')}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{canFilterByUnread && (\n\t\t\t\t\t\t\t<TldrawUiMenuCheckboxItem\n\t\t\t\t\t\t\t\tid=\"only-unread\"\n\t\t\t\t\t\t\t\tlabel={messages.commentsOnlyUnread.id}\n\t\t\t\t\t\t\t\tchecked={filters.onlyUnread}\n\t\t\t\t\t\t\t\tonSelect={() => toggle('onlyUnread')}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t<TldrawUiMenuCheckboxItem\n\t\t\t\t\t\t\tid=\"show-resolved\"\n\t\t\t\t\t\t\tlabel={messages.commentsShowResolved.id}\n\t\t\t\t\t\t\tchecked={filters.showResolved}\n\t\t\t\t\t\t\tonSelect={() => toggle('showResolved')}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</TldrawUiMenuGroup>\n\t\t\t\t</TldrawUiMenuContextProvider>\n\t\t\t</TldrawUiDropdownMenuContent>\n\t\t</TldrawUiDropdownMenuRoot>\n\t)\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAuDK;AAvDL,oBAYO;AACP,mBAA6B;AAE7B,mBAA+B;AAE/B,MAAM,eAAW,8BAAe;AAAA,EAC/B,gBAAgB,EAAE,IAAI,mBAAmB,gBAAgB,kBAAkB;AAAA,EAC3E,wBAAwB,EAAE,IAAI,6BAA6B,gBAAgB,mBAAmB;AAAA,EAC9F,oBAAoB,EAAE,IAAI,wBAAwB,gBAAgB,cAAc;AAAA,EAChF,sBAAsB,EAAE,IAAI,2BAA2B,gBAAgB,iBAAiB;AAAA,EACxF,sBAAsB,EAAE,IAAI,0BAA0B,gBAAgB,yBAAyB;AAChG,CAAC;AAYM,SAAS,mBAAmB;AAAA,EAClC;AAAA,EACA;AACD,GAA4B;AAC3B,QAAM,aAAS,yBAAU;AACzB,QAAM,UAAM,8BAAe;AAC3B,QAAM,cAAU,wBAAS,mBAAmB,MAAM,4BAAe,IAAI,MAAM,GAAG,CAAC,MAAM,CAAC;AACtF,QAAM,SAAS,CAAC,QAA8B;AAC7C,gCAAe,OAAO,QAAQ,CAAC,OAAO,EAAE,GAAG,GAAG,CAAC,GAAG,GAAG,CAAC,EAAE,GAAG,EAAE,EAAE;AAAA,EAChE;AAEA,SACC,6CAAC,0CAAyB,IAAG,mBAC5B;AAAA,gDAAC,6CACA;AAAA,MAAC;AAAA;AAAA,QACA,MAAK;AAAA,QACL,SAAS,IAAI,SAAS,cAAc;AAAA,QACpC,OAAO,IAAI,SAAS,cAAc;AAAA,QAClC,WAAU;AAAA,QAEV,sDAAC,6BAAa;AAAA;AAAA,IACf,GACD;AAAA,IAGA,4CAAC,6CAA4B,MAAK,UAAS,OAAM,OAAM,aAAa,GACnE,sDAAC,6CAA4B,MAAK,QAAO,UAAS,QACjD,uDAAC,mCAAkB,IAAG,mBACrB;AAAA;AAAA,QAAC;AAAA;AAAA,UACA,IAAG;AAAA,UACH,OAAO,SAAS,qBAAqB;AAAA,UACrC,SAAS,CAAC,QAAQ;AAAA,UAClB,UAAU,MAAM,OAAO,iBAAiB;AAAA;AAAA,MACzC;AAAA,MACC,qBACA;AAAA,QAAC;AAAA;AAAA,UACA,IAAG;AAAA,UACH,OAAO,SAAS,uBAAuB;AAAA,UACvC,SAAS,QAAQ;AAAA,UACjB,UAAU,MAAM,OAAO,UAAU;AAAA;AAAA,MAClC;AAAA,MAEA,qBACA;AAAA,QAAC;AAAA;AAAA,UACA,IAAG;AAAA,UACH,OAAO,SAAS,mBAAmB;AAAA,UACnC,SAAS,QAAQ;AAAA,UACjB,UAAU,MAAM,OAAO,YAAY;AAAA;AAAA,MACpC;AAAA,MAED;AAAA,QAAC;AAAA;AAAA,UACA,IAAG;AAAA,UACH,OAAO,SAAS,qBAAqB;AAAA,UACrC,SAAS,QAAQ;AAAA,UACjB,UAAU,MAAM,OAAO,cAAc;AAAA;AAAA,MACtC;AAAA,OACD,GACD,GACD;AAAA,KACD;AAEF;",
   "names": []
 }

package/dist-cjs/canvas/comments-menu-item.js

@@ -24,6 +24,9 @@ module.exports = __toCommonJS(comments_menu_item_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_tldraw = require("tldraw");
 var import_state = require("./state");
+const messages = (0, import_tldraw.defineMessages)({
+  commentsTitle: { id: "comments.title", defaultMessage: "Comments" }
+});
 function CommentsMenuItem() {
   const editor = (0, import_tldraw.useEditor)();
   const hidden = (0, import_tldraw.useValue)("comments hidden", () => import_state.commentsHidden.get(editor), [editor]);
@@ -31,7 +34,7 @@ function CommentsMenuItem() {
     import_tldraw.TldrawUiMenuCheckboxItem,
     {
       id: "comments-visible",
-      label: "comments.title",
+      label: messages.commentsTitle.id,
       kbd: "!c",
       readonlyOk: true,
       checked: !hidden,

package/dist-cjs/canvas/comments-menu-item.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/canvas/comments-menu-item.tsx"],
-  "sourcesContent": ["import { TldrawUiMenuCheckboxItem, useEditor, useValue } from 'tldraw'\nimport { commentsHidden, toggleCommentsHidden } from './state'\n\n/**\n * A checkbox menu item for a \"View\" menu that shows/hides comment pins on the canvas \u2014 checked\n * when comments are visible, like tldraw's own grid/snap toggles. Reads and toggles the shared\n * {@link commentsHidden} signal, so it stays in sync with the Shift+C shortcut and the sidebar\n * control. Drop it into whichever menu your app owns.\n * @public @react\n */\nexport function CommentsMenuItem() {\n\tconst editor = useEditor()\n\tconst hidden = useValue('comments hidden', () => commentsHidden.get(editor), [editor])\n\treturn (\n\t\t<TldrawUiMenuCheckboxItem\n\t\t\tid=\"comments-visible\"\n\t\t\tlabel=\"comments.title\"\n\t\t\tkbd=\"!c\"\n\t\t\treadonlyOk\n\t\t\tchecked={!hidden}\n\t\t\tonSelect={() => toggleCommentsHidden(editor)}\n\t\t/>\n\t)\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAcE;AAdF,oBAA8D;AAC9D,mBAAqD;AAS9C,SAAS,mBAAmB;AAClC,QAAM,aAAS,yBAAU;AACzB,QAAM,aAAS,wBAAS,mBAAmB,MAAM,4BAAe,IAAI,MAAM,GAAG,CAAC,MAAM,CAAC;AACrF,SACC;AAAA,IAAC;AAAA;AAAA,MACA,IAAG;AAAA,MACH,OAAM;AAAA,MACN,KAAI;AAAA,MACJ,YAAU;AAAA,MACV,SAAS,CAAC;AAAA,MACV,UAAU,UAAM,mCAAqB,MAAM;AAAA;AAAA,EAC5C;AAEF;",
+  "sourcesContent": ["import { defineMessages, TldrawUiMenuCheckboxItem, useEditor, useValue } from 'tldraw'\nimport { commentsHidden, toggleCommentsHidden } from './state'\n\nconst messages = defineMessages({\n\tcommentsTitle: { id: 'comments.title', defaultMessage: 'Comments' },\n})\n\n/**\n * A checkbox menu item for a \"View\" menu that shows/hides comment pins on the canvas \u2014 checked\n * when comments are visible, like tldraw's own grid/snap toggles. Reads and toggles the shared\n * {@link commentsHidden} signal, so it stays in sync with the Shift+C shortcut and the sidebar\n * control. Drop it into whichever menu your app owns.\n * @public @react\n */\nexport function CommentsMenuItem() {\n\tconst editor = useEditor()\n\tconst hidden = useValue('comments hidden', () => commentsHidden.get(editor), [editor])\n\treturn (\n\t\t<TldrawUiMenuCheckboxItem\n\t\t\tid=\"comments-visible\"\n\t\t\tlabel={messages.commentsTitle.id}\n\t\t\tkbd=\"!c\"\n\t\t\treadonlyOk\n\t\t\tchecked={!hidden}\n\t\t\tonSelect={() => toggleCommentsHidden(editor)}\n\t\t/>\n\t)\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAkBE;AAlBF,oBAA8E;AAC9E,mBAAqD;AAErD,MAAM,eAAW,8BAAe;AAAA,EAC/B,eAAe,EAAE,IAAI,kBAAkB,gBAAgB,WAAW;AACnE,CAAC;AASM,SAAS,mBAAmB;AAClC,QAAM,aAAS,yBAAU;AACzB,QAAM,aAAS,wBAAS,mBAAmB,MAAM,4BAAe,IAAI,MAAM,GAAG,CAAC,MAAM,CAAC;AACrF,SACC;AAAA,IAAC;AAAA;AAAA,MACA,IAAG;AAAA,MACH,OAAO,SAAS,cAAc;AAAA,MAC9B,KAAI;AAAA,MACJ,YAAU;AAAA,MACV,SAAS,CAAC;AAAA,MACV,UAAU,UAAM,mCAAqB,MAAM;AAAA;AAAA,EAC5C;AAEF;",
   "names": []
 }

package/dist-cjs/canvas/comments-overflow-menu.js

@@ -24,6 +24,11 @@ module.exports = __toCommonJS(comments_overflow_menu_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_tldraw = require("tldraw");
 var import_state = require("./state");
+const messages = (0, import_tldraw.defineMessages)({
+  commentsMoreOptions: { id: "comments.more-options", defaultMessage: "More options" },
+  commentsHide: { id: "comments.hide", defaultMessage: "Hide comments" },
+  commentsShow: { id: "comments.show", defaultMessage: "Show comments" }
+});
 const HIDE_SHORTCUT = "\u21E7C";
 function CommentsOverflowMenu() {
   const editor = (0, import_tldraw.useEditor)();
@@ -34,10 +39,10 @@ function CommentsOverflowMenu() {
       import_tldraw.TldrawUiButton,
       {
         type: "icon",
-        tooltip: msg("comments.more-options"),
-        title: msg("comments.more-options"),
+        tooltip: msg(messages.commentsMoreOptions),
+        title: msg(messages.commentsMoreOptions),
         className: "tlui-cmt-header-btn",
-        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tldraw.TldrawUiIcon, { icon: "dots-vertical", label: msg("comments.more-options"), small: true })
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tldraw.TldrawUiIcon, { icon: "dots-vertical", label: msg(messages.commentsMoreOptions), small: true })
       }
     ) }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -55,7 +60,7 @@ function CommentsOverflowMenu() {
             className: "tlui-cmt-menu-item",
             onClick: () => (0, import_state.toggleCommentsHidden)(editor),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: hidden ? msg("comments.show") : msg("comments.hide") }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: hidden ? msg(messages.commentsShow) : msg(messages.commentsHide) }),
               /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "tlui-cmt-menu-item__shortcut", children: HIDE_SHORTCUT })
             ]
           }

package/dist-cjs/canvas/comments-overflow-menu.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/canvas/comments-overflow-menu.tsx"],
-  "sourcesContent": ["import {\n\tTldrawUiButton,\n\tTldrawUiDropdownMenuContent,\n\tTldrawUiDropdownMenuGroup,\n\tTldrawUiDropdownMenuItem,\n\tTldrawUiDropdownMenuRoot,\n\tTldrawUiDropdownMenuTrigger,\n\tTldrawUiIcon,\n\tuseEditor,\n\tuseTranslation,\n\tuseValue,\n} from 'tldraw'\nimport { commentsHidden, toggleCommentsHidden } from './state'\n\n// A keyboard-shortcut glyph, not translatable copy \u2014 kept out of JSX as a constant.\nconst HIDE_SHORTCUT = '\u21E7C'\n\n/** The overflow (\u22EF) dropdown in the sidebar header. For now it holds the hide/show-comments\n *  toggle; it's the home for later comment-wide controls (notifications, mark all as read).\n * @public @react */\nexport function CommentsOverflowMenu() {\n\tconst editor = useEditor()\n\tconst msg = useTranslation()\n\tconst hidden = useValue('comments hidden', () => commentsHidden.get(editor), [editor])\n\n\treturn (\n\t\t<TldrawUiDropdownMenuRoot id=\"comments-overflow\">\n\t\t\t<TldrawUiDropdownMenuTrigger>\n\t\t\t\t<TldrawUiButton\n\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\ttooltip={msg('comments.more-options')}\n\t\t\t\t\ttitle={msg('comments.more-options')}\n\t\t\t\t\tclassName=\"tlui-cmt-header-btn\"\n\t\t\t\t>\n\t\t\t\t\t<TldrawUiIcon icon=\"dots-vertical\" label={msg('comments.more-options')} small />\n\t\t\t\t</TldrawUiButton>\n\t\t\t</TldrawUiDropdownMenuTrigger>\n\t\t\t<TldrawUiDropdownMenuContent\n\t\t\t\tclassName=\"tlui-cmt-menu\"\n\t\t\t\tside=\"bottom\"\n\t\t\t\talign=\"end\"\n\t\t\t\talignOffset={0}\n\t\t\t\tsideOffset={4}\n\t\t\t>\n\t\t\t\t<TldrawUiDropdownMenuGroup>\n\t\t\t\t\t<TldrawUiDropdownMenuItem>\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\tclassName=\"tlui-cmt-menu-item\"\n\t\t\t\t\t\t\tonClick={() => toggleCommentsHidden(editor)}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<span>{hidden ? msg('comments.show') : msg('comments.hide')}</span>\n\t\t\t\t\t\t\t<span className=\"tlui-cmt-menu-item__shortcut\">{HIDE_SHORTCUT}</span>\n\t\t\t\t\t\t</button>\n\t\t\t\t\t</TldrawUiDropdownMenuItem>\n\t\t\t\t</TldrawUiDropdownMenuGroup>\n\t\t\t</TldrawUiDropdownMenuContent>\n\t\t</TldrawUiDropdownMenuRoot>\n\t)\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAkCK;AAlCL,oBAWO;AACP,mBAAqD;AAGrD,MAAM,gBAAgB;AAKf,SAAS,uBAAuB;AACtC,QAAM,aAAS,yBAAU;AACzB,QAAM,UAAM,8BAAe;AAC3B,QAAM,aAAS,wBAAS,mBAAmB,MAAM,4BAAe,IAAI,MAAM,GAAG,CAAC,MAAM,CAAC;AAErF,SACC,6CAAC,0CAAyB,IAAG,qBAC5B;AAAA,gDAAC,6CACA;AAAA,MAAC;AAAA;AAAA,QACA,MAAK;AAAA,QACL,SAAS,IAAI,uBAAuB;AAAA,QACpC,OAAO,IAAI,uBAAuB;AAAA,QAClC,WAAU;AAAA,QAEV,sDAAC,8BAAa,MAAK,iBAAgB,OAAO,IAAI,uBAAuB,GAAG,OAAK,MAAC;AAAA;AAAA,IAC/E,GACD;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACA,WAAU;AAAA,QACV,MAAK;AAAA,QACL,OAAM;AAAA,QACN,aAAa;AAAA,QACb,YAAY;AAAA,QAEZ,sDAAC,2CACA,sDAAC,0CACA;AAAA,UAAC;AAAA;AAAA,YACA,MAAK;AAAA,YACL,WAAU;AAAA,YACV,SAAS,UAAM,mCAAqB,MAAM;AAAA,YAE1C;AAAA,0DAAC,UAAM,mBAAS,IAAI,eAAe,IAAI,IAAI,eAAe,GAAE;AAAA,cAC5D,4CAAC,UAAK,WAAU,gCAAgC,yBAAc;AAAA;AAAA;AAAA,QAC/D,GACD,GACD;AAAA;AAAA,IACD;AAAA,KACD;AAEF;",
+  "sourcesContent": ["import {\n\tdefineMessages,\n\tTldrawUiButton,\n\tTldrawUiDropdownMenuContent,\n\tTldrawUiDropdownMenuGroup,\n\tTldrawUiDropdownMenuItem,\n\tTldrawUiDropdownMenuRoot,\n\tTldrawUiDropdownMenuTrigger,\n\tTldrawUiIcon,\n\tuseEditor,\n\tuseTranslation,\n\tuseValue,\n} from 'tldraw'\nimport { commentsHidden, toggleCommentsHidden } from './state'\n\nconst messages = defineMessages({\n\tcommentsMoreOptions: { id: 'comments.more-options', defaultMessage: 'More options' },\n\tcommentsHide: { id: 'comments.hide', defaultMessage: 'Hide comments' },\n\tcommentsShow: { id: 'comments.show', defaultMessage: 'Show comments' },\n})\n\n// A keyboard-shortcut glyph, not translatable copy \u2014 kept out of JSX as a constant.\nconst HIDE_SHORTCUT = '\u21E7C'\n\n/** The overflow (\u22EF) dropdown in the sidebar header. For now it holds the hide/show-comments\n *  toggle; it's the home for later comment-wide controls (notifications, mark all as read).\n * @public @react */\nexport function CommentsOverflowMenu() {\n\tconst editor = useEditor()\n\tconst msg = useTranslation()\n\tconst hidden = useValue('comments hidden', () => commentsHidden.get(editor), [editor])\n\n\treturn (\n\t\t<TldrawUiDropdownMenuRoot id=\"comments-overflow\">\n\t\t\t<TldrawUiDropdownMenuTrigger>\n\t\t\t\t<TldrawUiButton\n\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\ttooltip={msg(messages.commentsMoreOptions)}\n\t\t\t\t\ttitle={msg(messages.commentsMoreOptions)}\n\t\t\t\t\tclassName=\"tlui-cmt-header-btn\"\n\t\t\t\t>\n\t\t\t\t\t<TldrawUiIcon icon=\"dots-vertical\" label={msg(messages.commentsMoreOptions)} small />\n\t\t\t\t</TldrawUiButton>\n\t\t\t</TldrawUiDropdownMenuTrigger>\n\t\t\t<TldrawUiDropdownMenuContent\n\t\t\t\tclassName=\"tlui-cmt-menu\"\n\t\t\t\tside=\"bottom\"\n\t\t\t\talign=\"end\"\n\t\t\t\talignOffset={0}\n\t\t\t\tsideOffset={4}\n\t\t\t>\n\t\t\t\t<TldrawUiDropdownMenuGroup>\n\t\t\t\t\t<TldrawUiDropdownMenuItem>\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\tclassName=\"tlui-cmt-menu-item\"\n\t\t\t\t\t\t\tonClick={() => toggleCommentsHidden(editor)}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<span>{hidden ? msg(messages.commentsShow) : msg(messages.commentsHide)}</span>\n\t\t\t\t\t\t\t<span className=\"tlui-cmt-menu-item__shortcut\">{HIDE_SHORTCUT}</span>\n\t\t\t\t\t\t</button>\n\t\t\t\t\t</TldrawUiDropdownMenuItem>\n\t\t\t\t</TldrawUiDropdownMenuGroup>\n\t\t\t</TldrawUiDropdownMenuContent>\n\t\t</TldrawUiDropdownMenuRoot>\n\t)\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAyCK;AAzCL,oBAYO;AACP,mBAAqD;AAErD,MAAM,eAAW,8BAAe;AAAA,EAC/B,qBAAqB,EAAE,IAAI,yBAAyB,gBAAgB,eAAe;AAAA,EACnF,cAAc,EAAE,IAAI,iBAAiB,gBAAgB,gBAAgB;AAAA,EACrE,cAAc,EAAE,IAAI,iBAAiB,gBAAgB,gBAAgB;AACtE,CAAC;AAGD,MAAM,gBAAgB;AAKf,SAAS,uBAAuB;AACtC,QAAM,aAAS,yBAAU;AACzB,QAAM,UAAM,8BAAe;AAC3B,QAAM,aAAS,wBAAS,mBAAmB,MAAM,4BAAe,IAAI,MAAM,GAAG,CAAC,MAAM,CAAC;AAErF,SACC,6CAAC,0CAAyB,IAAG,qBAC5B;AAAA,gDAAC,6CACA;AAAA,MAAC;AAAA;AAAA,QACA,MAAK;AAAA,QACL,SAAS,IAAI,SAAS,mBAAmB;AAAA,QACzC,OAAO,IAAI,SAAS,mBAAmB;AAAA,QACvC,WAAU;AAAA,QAEV,sDAAC,8BAAa,MAAK,iBAAgB,OAAO,IAAI,SAAS,mBAAmB,GAAG,OAAK,MAAC;AAAA;AAAA,IACpF,GACD;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACA,WAAU;AAAA,QACV,MAAK;AAAA,QACL,OAAM;AAAA,QACN,aAAa;AAAA,QACb,YAAY;AAAA,QAEZ,sDAAC,2CACA,sDAAC,0CACA;AAAA,UAAC;AAAA;AAAA,YACA,MAAK;AAAA,YACL,WAAU;AAAA,YACV,SAAS,UAAM,mCAAqB,MAAM;AAAA,YAE1C;AAAA,0DAAC,UAAM,mBAAS,IAAI,SAAS,YAAY,IAAI,IAAI,SAAS,YAAY,GAAE;AAAA,cACxE,4CAAC,UAAK,WAAU,gCAAgC,yBAAc;AAAA;AAAA;AAAA,QAC/D,GACD,GACD;AAAA;AAAA,IACD;AAAA,KACD;AAEF;",
   "names": []
 }

package/dist-cjs/canvas/comments-sidebar.js

@@ -35,6 +35,15 @@ var import_options = require("./options");
 var import_rich_text = require("./rich-text");
 var import_state = require("./state");
 var import_thread_state = require("./thread-state");
+const messages = (0, import_tldraw.defineMessages)({
+  commentsEmpty: { id: "comments.empty", defaultMessage: "No comments on this page yet." },
+  commentsEmptyFiltered: {
+    id: "comments.empty-filtered",
+    defaultMessage: "No comments match your filters."
+  },
+  commentsResolved: { id: "comments.resolved", defaultMessage: "Resolved" },
+  commentsTitle: { id: "comments.title", defaultMessage: "Comments" }
+});
 function CanvasCommentsSidebar(props) {
   const { resolveAuthor, currentUserId, isCommentUnread, header, empty, getThreadHref } = props;
   const resolveName = (0, import_react.useCallback)((id) => resolveAuthor(id)?.name, [resolveAuthor]);
@@ -107,19 +116,19 @@ function CanvasCommentsSidebar(props) {
     import_comments_list.CommentsList,
     {
       items,
-      header: header ?? msg("comments.title"),
+      header: header ?? msg(messages.commentsTitle),
       headerAction: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "tlui-cmt-list__header-actions", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_comments_visibility_toggle.CommentsVisibilityToggle, {}),
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           import_comments_filter_menu.CommentsFilterMenu,
           {
             canFilterByAuthor: currentUserId !== null,
             canFilterByUnread: isCommentUnread !== void 0
           }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_comments_visibility_toggle.CommentsVisibilityToggle, {})
+        )
       ] }),
-      empty: items.length === 0 && pageThreads.length > 0 ? msg("comments.empty-filtered") : empty ?? msg("comments.empty"),
-      resolvedLabel: msg("comments.resolved"),
+      empty: items.length === 0 && pageThreads.length > 0 ? msg(messages.commentsEmptyFiltered) : empty ?? msg(messages.commentsEmpty),
+      resolvedLabel: msg(messages.commentsResolved),
       onSelect: focus,
       renderItem
     }