@tldraw/commenting 0.0.0-bootstrap → 5.3.0-canary.31036673d3f8

package/dist-cjs/ui/reactions.js

@@ -23,12 +23,25 @@ __export(reactions_exports, {
 module.exports = __toCommonJS(reactions_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_reaction = require("./reaction");
-function Reactions() {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "cmt-reactions", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_reaction.Reaction, { emoji: "\u{1F44D}", count: 3, active: true }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_reaction.Reaction, { emoji: "\u{1F389}", count: 1, active: false }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_reaction.Reaction, { emoji: "\u{1F440}", count: 2, active: false }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { className: "cmt-reaction cmt-reaction--add", type: "button", "aria-label": "Add reaction", children: "\uFF0B" })
-  ] });
+function Reactions({
+  reactions,
+  onToggle,
+  canReact = true,
+  enableHoverList = true,
+  renderReaction,
+  ReactionTooltip
+}) {
+  if (reactions.length === 0) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "tlui-cmt-reactions", children: reactions.map((reaction) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_reaction.Reaction,
+    {
+      ...reaction,
+      enableHoverList,
+      renderReaction,
+      ReactionTooltip,
+      onClick: canReact ? () => onToggle?.(reaction.emoji) : void 0
+    },
+    reaction.emoji
+  )) });
 }
 //# sourceMappingURL=reactions.js.map

package/dist-cjs/ui/reactions.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/ui/reactions.tsx"],
-  "sourcesContent": ["import { Reaction } from './reaction'\n\n/** The row of reactions under a comment, plus an add-reaction button. @public @react */\nexport function Reactions() {\n\treturn (\n\t\t<div className=\"cmt-reactions\">\n\t\t\t<Reaction emoji=\"\uD83D\uDC4D\" count={3} active={true} />\n\t\t\t<Reaction emoji=\"\uD83C\uDF89\" count={1} active={false} />\n\t\t\t<Reaction emoji=\"\uD83D\uDC40\" count={2} active={false} />\n\t\t\t<button className=\"cmt-reaction cmt-reaction--add\" type=\"button\" aria-label=\"Add reaction\">\n\t\t\t\t\uFF0B\n\t\t\t</button>\n\t\t</div>\n\t)\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAKE;AALF,sBAAyB;AAGlB,SAAS,YAAY;AAC3B,SACC,6CAAC,SAAI,WAAU,iBACd;AAAA,gDAAC,4BAAS,OAAM,aAAK,OAAO,GAAG,QAAQ,MAAM;AAAA,IAC7C,4CAAC,4BAAS,OAAM,aAAK,OAAO,GAAG,QAAQ,OAAO;AAAA,IAC9C,4CAAC,4BAAS,OAAM,aAAK,OAAO,GAAG,QAAQ,OAAO;AAAA,IAC9C,4CAAC,YAAO,WAAU,kCAAiC,MAAK,UAAS,cAAW,gBAAe,oBAE3F;AAAA,KACD;AAEF;",
+  "sourcesContent": ["import { ComponentType } from 'react'\nimport { Reaction, ReactionTooltipProps, RenderReaction } from './reaction'\n\n/** One person who reacted with a given emoji, for the hover list. @public */\nexport interface ReactionReactor {\n\t/** Display name of the person who reacted. */\n\tname: string\n\t/** True for the current user. */\n\tyou: boolean\n}\n\n/** One emoji's reactions on a comment, already tallied. @public */\nexport interface ReactionSummary {\n\temoji: string\n\t/** How many people reacted with this emoji. */\n\tcount: number\n\t/** True when the current user is one of them \u2014 renders the pill highlighted. */\n\tactive: boolean\n\t/** Who reacted with this emoji, in reaction order \u2014 shown in the hover list. */\n\treactors: ReactionReactor[]\n}\n\n/** @public */\nexport interface ReactionsProps {\n\t/** The comment's reactions, grouped by emoji. Empty renders nothing. */\n\treactions: ReactionSummary[]\n\t/** Toggles the current user's reaction for an emoji. */\n\tonToggle?(emoji: string): void\n\t/** Whether the current user may react. False makes the pills inert (e.g. a signed-out\n\t *  viewer, or a read-only thread) while still showing counts. */\n\tcanReact?: boolean\n\t/** Whether hovering a pill shows its reactor list. Pass false to suppress it \u2014 e.g. while\n\t *  another popup menu on the comment is open. Defaults to true. */\n\tenableHoverList?: boolean\n\t/** How to draw each emoji token. Defaults to the token string (OS emoji font). */\n\trenderReaction?: RenderReaction\n\t/** The tooltip naming who reacted, shown when a pill is hovered. Defaults to an inline sentence\n\t *  (`DefaultReactionTooltip`). Swap it to render the reactor list however you like. */\n\tReactionTooltip?: ComponentType<ReactionTooltipProps>\n}\n\n/**\n * The row of tallied reactions under a comment. Presentational \u2014 the host supplies the summaries\n * and owns what toggling does. Hovering a pill lists who reacted (see `Reaction`).\n *\n * The add-reaction affordance is a separate component (`ReactionPicker`) so it can live outside\n * this row \u2014 on a comment card it sits with the card's hover actions, which keeps its position\n * fixed as reactions are added here.\n * @public @react\n */\nexport function Reactions({\n\treactions,\n\tonToggle,\n\tcanReact = true,\n\tenableHoverList = true,\n\trenderReaction,\n\tReactionTooltip,\n}: ReactionsProps) {\n\tif (reactions.length === 0) return null\n\treturn (\n\t\t<div className=\"tlui-cmt-reactions\">\n\t\t\t{reactions.map((reaction) => (\n\t\t\t\t<Reaction\n\t\t\t\t\tkey={reaction.emoji}\n\t\t\t\t\t{...reaction}\n\t\t\t\t\tenableHoverList={enableHoverList}\n\t\t\t\t\trenderReaction={renderReaction}\n\t\t\t\t\tReactionTooltip={ReactionTooltip}\n\t\t\t\t\tonClick={canReact ? () => onToggle?.(reaction.emoji) : undefined}\n\t\t\t\t/>\n\t\t\t))}\n\t\t</div>\n\t)\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA8DI;AA7DJ,sBAA+D;AAiDxD,SAAS,UAAU;AAAA,EACzB;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,kBAAkB;AAAA,EAClB;AAAA,EACA;AACD,GAAmB;AAClB,MAAI,UAAU,WAAW,EAAG,QAAO;AACnC,SACC,4CAAC,SAAI,WAAU,sBACb,oBAAU,IAAI,CAAC,aACf;AAAA,IAAC;AAAA;AAAA,MAEC,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA,SAAS,WAAW,MAAM,WAAW,SAAS,KAAK,IAAI;AAAA;AAAA,IALlD,SAAS;AAAA,EAMf,CACA,GACF;AAEF;",
   "names": []
 }

package/dist-cjs/ui/{mention.js → reply-count.js}

@@ -16,16 +16,14 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var mention_exports = {};
-__export(mention_exports, {
-  Mention: () => Mention
+var reply_count_exports = {};
+__export(reply_count_exports, {
+  replyCountLabel: () => replyCountLabel
 });
-module.exports = __toCommonJS(mention_exports);
-var import_jsx_runtime = require("react/jsx-runtime");
-function Mention({ name }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "cmt-mention", children: [
-    "@",
-    name
-  ] });
+module.exports = __toCommonJS(reply_count_exports);
+function replyCountLabel(msg, replyCount) {
+  if (replyCount <= 0) return null;
+  const key = replyCount === 1 ? "comments.replies-one" : "comments.replies";
+  return msg(key).replace("{count}", String(replyCount));
 }
-//# sourceMappingURL=mention.js.map
+//# sourceMappingURL=reply-count.js.map

package/dist-cjs/ui/reply-count.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/ui/reply-count.ts"],
+  "sourcesContent": ["import { useTranslation } from 'tldraw'\n\n/**\n * The localized \"N replies\" label (e.g. \"1 reply\", \"3 replies\") for a thread with `replyCount`\n * replies \u2014 the comments after the opening one. Returns null when there are none, so callers render\n * nothing rather than \"0 replies\". Shared by the sidebar row and the hover preview so both read the\n * same, with each site owning where it puts the text.\n */\nexport function replyCountLabel(\n\tmsg: ReturnType<typeof useTranslation>,\n\treplyCount: number\n): string | null {\n\tif (replyCount <= 0) return null\n\tconst key = replyCount === 1 ? 'comments.replies-one' : 'comments.replies'\n\treturn msg(key).replace('{count}', String(replyCount))\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAQO,SAAS,gBACf,KACA,YACgB;AAChB,MAAI,cAAc,EAAG,QAAO;AAC5B,QAAM,MAAM,eAAe,IAAI,yBAAyB;AACxD,SAAO,IAAI,GAAG,EAAE,QAAQ,WAAW,OAAO,UAAU,CAAC;AACtD;",
+  "names": []
+}

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

@@ -23,6 +23,25 @@ __export(send_button_exports, {
 module.exports = __toCommonJS(send_button_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 function SendButton({ label, disabled, onClick }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { className: "cmt-send", type: "button", disabled, onClick, children: label });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "button",
+    {
+      className: "tlui-cmt-send",
+      type: "button",
+      disabled,
+      onClick,
+      "aria-label": label,
+      title: label,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { width: "15", height: "15", viewBox: "0 0 15 15", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "path",
+        {
+          d: "M7.14645 2.14645C7.34171 1.95118 7.65829 1.95118 7.85355 2.14645L11.8536 6.14645C12.0488 6.34171 12.0488 6.65829 11.8536 6.85355C11.6583 7.04882 11.3417 7.04882 11.1464 6.85355L8 3.70711L8 12.5C8 12.7761 7.77614 13 7.5 13C7.22386 13 7 12.7761 7 12.5L7 3.70711L3.85355 6.85355C3.65829 7.04882 3.34171 7.04882 3.14645 6.85355C2.95118 6.65829 2.95118 6.34171 3.14645 6.14645L7.14645 2.14645Z",
+          fill: "currentColor",
+          fillRule: "evenodd",
+          clipRule: "evenodd"
+        }
+      ) })
+    }
+  );
 }
 //# sourceMappingURL=send-button.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/ui/send-button.tsx"],
-  "sourcesContent": ["/** @public */\nexport interface SendButtonProps {\n\tlabel: string\n\tdisabled?: boolean\n\tonClick?(): void\n}\n\n/** The button that posts a comment. @public @react */\nexport function SendButton({ label, disabled, onClick }: SendButtonProps) {\n\treturn (\n\t\t<button className=\"cmt-send\" type=\"button\" disabled={disabled} onClick={onClick}>\n\t\t\t{label}\n\t\t</button>\n\t)\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAUE;AAFK,SAAS,WAAW,EAAE,OAAO,UAAU,QAAQ,GAAoB;AACzE,SACC,4CAAC,YAAO,WAAU,YAAW,MAAK,UAAS,UAAoB,SAC7D,iBACF;AAEF;",
+  "sourcesContent": ["/** @public */\nexport interface SendButtonProps {\n\t/** The button's accessible name (e.g. \"Send\"). Shown as an up-arrow icon, so this is its label. */\n\tlabel: string\n\tdisabled?: boolean\n\tonClick?(): void\n}\n\n/** The button that posts a comment \u2014 an up arrow. @public @react */\nexport function SendButton({ label, disabled, onClick }: SendButtonProps) {\n\treturn (\n\t\t<button\n\t\t\tclassName=\"tlui-cmt-send\"\n\t\t\ttype=\"button\"\n\t\t\tdisabled={disabled}\n\t\t\tonClick={onClick}\n\t\t\taria-label={label}\n\t\t\ttitle={label}\n\t\t>\n\t\t\t<svg width=\"15\" height=\"15\" viewBox=\"0 0 15 15\" fill=\"none\" aria-hidden=\"true\">\n\t\t\t\t<path\n\t\t\t\t\td=\"M7.14645 2.14645C7.34171 1.95118 7.65829 1.95118 7.85355 2.14645L11.8536 6.14645C12.0488 6.34171 12.0488 6.65829 11.8536 6.85355C11.6583 7.04882 11.3417 7.04882 11.1464 6.85355L8 3.70711L8 12.5C8 12.7761 7.77614 13 7.5 13C7.22386 13 7 12.7761 7 12.5L7 3.70711L3.85355 6.85355C3.65829 7.04882 3.34171 7.04882 3.14645 6.85355C2.95118 6.65829 2.95118 6.34171 3.14645 6.14645L7.14645 2.14645Z\"\n\t\t\t\t\tfill=\"currentColor\"\n\t\t\t\t\tfillRule=\"evenodd\"\n\t\t\t\t\tclipRule=\"evenodd\"\n\t\t\t\t/>\n\t\t\t</svg>\n\t\t</button>\n\t)\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAoBI;AAXG,SAAS,WAAW,EAAE,OAAO,UAAU,QAAQ,GAAoB;AACzE,SACC;AAAA,IAAC;AAAA;AAAA,MACA,WAAU;AAAA,MACV,MAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA,cAAY;AAAA,MACZ,OAAO;AAAA,MAEP,sDAAC,SAAI,OAAM,MAAK,QAAO,MAAK,SAAQ,aAAY,MAAK,QAAO,eAAY,QACvE;AAAA,QAAC;AAAA;AAAA,UACA,GAAE;AAAA,UACF,MAAK;AAAA,UACL,UAAS;AAAA,UACT,UAAS;AAAA;AAAA,MACV,GACD;AAAA;AAAA,EACD;AAEF;",
   "names": []
 }

package/dist-cjs/ui/{comment-text.js → tooltip-button.js}

@@ -16,14 +16,17 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var comment_text_exports = {};
-__export(comment_text_exports, {
-  CommentText: () => CommentText
+var tooltip_button_exports = {};
+__export(tooltip_button_exports, {
+  TooltipButton: () => TooltipButton
 });
-module.exports = __toCommonJS(comment_text_exports);
+module.exports = __toCommonJS(tooltip_button_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
-var import_render_markdown = require("./render-markdown");
-function CommentText({ text }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "cmt-text", children: (0, import_render_markdown.renderMarkdown)(text) });
-}
-//# sourceMappingURL=comment-text.js.map
+var import_react = require("react");
+var import_tldraw = require("tldraw");
+const TooltipButton = (0, import_react.forwardRef)(
+  function TooltipButton2({ tooltip, children, ...props }, ref) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tldraw.TldrawUiTooltip, { content: tooltip, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { ref, type: "button", "aria-label": tooltip, ...props, children }) });
+  }
+);
+//# sourceMappingURL=tooltip-button.js.map

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

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

package/dist-esm/canvas/anchor-lifecycle.mjs

@@ -0,0 +1,128 @@
+import { WeakCache } from "@tldraw/utils";
+import { commitCommentMutation, putRecordsInCommit } from "./comment-mutations.mjs";
+import { getCommentRecord, getComments, getCommentThreads } from "./comment-store.mjs";
+import { anchorPagePoint, impreciseShapePinInset } from "./thread-state.mjs";
+const convertedByShapeCache = new WeakCache();
+function isAnchoredToShape(thread, shapeId) {
+  const anchor = thread.anchor;
+  return anchor.type === "shape" && anchor.shapeId === shapeId;
+}
+function registerCommentAnchorLifecycle(editor) {
+  const pendingByShape = /* @__PURE__ */ new Map();
+  const convertedByShape = convertedByShapeCache.get(editor, () => /* @__PURE__ */ new Map());
+  function rehomeThread(thread, pageId, updates) {
+    updates.push({ ...thread, pageId });
+    for (const comment of getComments(editor)) {
+      if (comment.threadId === thread.id) updates.push({ ...comment, pageId });
+    }
+  }
+  const disposeBeforeDelete = editor.sideEffects.registerBeforeDeleteHandler(
+    "shape",
+    (shape, source) => {
+      if (source === "remote") return;
+      for (const thread of getCommentThreads(editor)) {
+        if (!isAnchoredToShape(thread, shape.id)) continue;
+        let snapshot = pendingByShape.get(shape.id);
+        if (!snapshot) {
+          snapshot = /* @__PURE__ */ new Map();
+          pendingByShape.set(shape.id, snapshot);
+        }
+        let point = anchorPagePoint(editor, thread.anchor);
+        const inset = impreciseShapePinInset(editor, thread.anchor);
+        if (point && inset) {
+          const zoom = editor.getZoomLevel();
+          point = { x: point.x + inset.x / zoom, y: point.y + inset.y / zoom };
+        }
+        snapshot.set(thread.id, point);
+      }
+    }
+  );
+  const returnedShapeIds = /* @__PURE__ */ new Set();
+  const disposeOperationComplete = editor.sideEffects.registerOperationCompleteHandler((source) => {
+    if (source === "remote") return;
+    if (pendingByShape.size === 0 && returnedShapeIds.size === 0) return;
+    const settled = [...pendingByShape.entries()];
+    pendingByShape.clear();
+    const returned = [...returnedShapeIds];
+    returnedShapeIds.clear();
+    const updates = [];
+    for (const [shapeId, threadPoints] of settled) {
+      if (editor.getShape(shapeId)) continue;
+      for (const [threadId, point] of threadPoints) {
+        if (!point) continue;
+        const thread = getCommentRecord(editor, threadId);
+        if (!thread || thread.typeName !== "comment-thread") continue;
+        if (!isAnchoredToShape(thread, shapeId)) continue;
+        let converted = convertedByShape.get(shapeId);
+        if (!converted) {
+          converted = [];
+          convertedByShape.set(shapeId, converted);
+        }
+        converted.push({ threadId, anchor: thread.anchor, point });
+        updates.push({ ...thread, anchor: { type: "point", x: point.x, y: point.y } });
+      }
+    }
+    for (const shapeId of returned) {
+      const shape = editor.getShape(shapeId);
+      if (!shape) continue;
+      const converted = convertedByShape.get(shapeId);
+      if (!converted) continue;
+      convertedByShape.delete(shapeId);
+      const pageId = editor.getAncestorPageId(shape);
+      for (const { threadId, anchor, point } of converted) {
+        const thread = getCommentRecord(editor, threadId);
+        if (!thread || thread.typeName !== "comment-thread") continue;
+        const current = thread.anchor;
+        if (current.type !== "point" || current.x !== point.x || current.y !== point.y) {
+          continue;
+        }
+        if (!pageId || thread.pageId === pageId) {
+          updates.push({ ...thread, anchor });
+        } else {
+          rehomeThread({ ...thread, anchor }, pageId, updates);
+        }
+      }
+    }
+    if (updates.length > 0) {
+      commitCommentMutation(editor, () => putRecordsInCommit(editor, updates));
+    }
+  });
+  const disposeAfterCreate = editor.sideEffects.registerAfterCreateHandler(
+    "shape",
+    (shape, source) => {
+      if (source === "remote") return;
+      if (convertedByShape.has(shape.id)) returnedShapeIds.add(shape.id);
+    }
+  );
+  const disposeAfterChange = editor.sideEffects.registerAfterChangeHandler(
+    "shape",
+    (prev, next, source) => {
+      if (source === "remote") return;
+      if (prev.parentId === next.parentId) return;
+      const pageId = editor.getAncestorPageId(next);
+      if (!pageId) return;
+      const movedIds = editor.getShapeAndDescendantIds([next.id]);
+      const updates = [];
+      for (const thread of getCommentThreads(editor)) {
+        const anchor = thread.anchor;
+        if (anchor.type !== "shape") continue;
+        if (!movedIds.has(anchor.shapeId)) continue;
+        if (thread.pageId === pageId) continue;
+        rehomeThread(thread, pageId, updates);
+      }
+      if (updates.length > 0) {
+        commitCommentMutation(editor, () => putRecordsInCommit(editor, updates));
+      }
+    }
+  );
+  return () => {
+    disposeBeforeDelete();
+    disposeOperationComplete();
+    disposeAfterCreate();
+    disposeAfterChange();
+  };
+}
+export {
+  registerCommentAnchorLifecycle
+};
+//# sourceMappingURL=anchor-lifecycle.mjs.map

package/dist-esm/canvas/anchor-lifecycle.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/canvas/anchor-lifecycle.ts"],
+  "sourcesContent": ["import { WeakCache } from '@tldraw/utils'\nimport { Editor, TLCommentAnchor, TLCommentThread, TLPageId, TLShapeId, VecLike } from 'tldraw'\nimport { commitCommentMutation, putRecordsInCommit } from './comment-mutations'\nimport { getCommentRecord, getComments, getCommentThreads, TLCommentRecord } from './comment-store'\nimport { anchorPagePoint, impreciseShapePinInset } from './thread-state'\n\ntype ShapeAnchor = Extract<TLCommentAnchor, { type: 'shape' }>\n\n/**\n * Threads converted to point anchors because their shape was deleted, kept so the anchor can be\n * restored if the shape comes back (page move re-create, undo of the delete). Owned by the\n * editor, not the registration closure: the registering effect can re-run (a prop identity\n * change, a remount), and an undo can arrive arbitrarily long after the delete \u2014 the memory has\n * to outlive any one registration.\n */\nconst convertedByShapeCache = new WeakCache<\n\tEditor,\n\tMap<TLShapeId, { threadId: string; anchor: ShapeAnchor; point: VecLike }[]>\n>()\n\nfunction isAnchoredToShape(\n\tthread: TLCommentThread,\n\tshapeId: TLShapeId\n): thread is TLCommentThread & { anchor: ShapeAnchor } {\n\tconst anchor = thread.anchor\n\treturn anchor.type === 'shape' && anchor.shapeId === shapeId\n}\n\n/**\n * Keep shape-anchored threads alive across their shape's lifecycle:\n *\n * - When the shape is deleted, the thread converts to a `point` anchor at the spot its pin last\n *   occupied, so the conversation outlives the shape instead of becoming invisible (a missing\n *   shape has no bounds, which hides the pin).\n * - When the shape moves to another page, the thread follows: its `pageId` and each comment's\n *   denormalized `pageId` update to the shape's new page, and the anchor keeps riding the shape.\n * - When a deleted shape comes back (a page move re-creates it with its id preserved; undoing a\n *   delete restores it), the thread re-attaches \u2014 unless its pin was manually moved in the\n *   meantime, in which case the manual placement wins.\n *\n * A page move is `deleteShapes` + re-create with preserved ids inside one `editor.run`, but each\n * store write is its own operation \u2014 so at no single moment does \"this shape is being moved\"\n * exist as an observable event. The handlers therefore cooperate across operations:\n * `beforeDelete` snapshots where each affected pin sits (every record is still in the store at\n * that point, so page bounds resolve even for children of a deleted frame); the\n * operation-complete pass converts threads whose shape is really gone, remembering the original\n * anchor; `afterCreate` notes a reappeared shape id, and the operation-complete pass restores\n * the anchor once the store has settled (creation order within an operation is arbitrary, so a\n * fresh shape may not resolve an ancestor page mid-operation). Undo/redo of a move\n * replays as a `parentId` update (remove + add of one id squash to an update in the history\n * diff), so an `afterChange` handler re-homes threads on cross-page reparents \u2014 including\n * threads anchored to descendants, which move with their parent without change events of their\n * own.\n *\n * Remote changes are ignored: the client that performed the operation runs this same\n * maintenance and syncs the resulting thread updates. Writes honour the\n * {@link CommentingOptions.history} option, so the consumer decides whether they're undoable.\n *\n * Registered by `CanvasComments` on mount; parts-built consumers can call this directly.\n * Returns a cleanup function that unregisters all handlers.\n *\n * @public\n */\nexport function registerCommentAnchorLifecycle(editor: Editor): () => void {\n\t// Pin positions snapshotted during the current operation: shape id -> (thread id -> pin page\n\t// point).\n\tconst pendingByShape = new Map<TLShapeId, Map<string, VecLike | null>>()\n\tconst convertedByShape = convertedByShapeCache.get(editor, () => new Map())\n\n\tfunction rehomeThread(thread: TLCommentThread, pageId: TLPageId, updates: TLCommentRecord[]) {\n\t\tupdates.push({ ...thread, pageId })\n\t\tfor (const comment of getComments(editor)) {\n\t\t\tif (comment.threadId === thread.id) updates.push({ ...comment, pageId })\n\t\t}\n\t}\n\n\tconst disposeBeforeDelete = editor.sideEffects.registerBeforeDeleteHandler(\n\t\t'shape',\n\t\t(shape, source) => {\n\t\t\tif (source === 'remote') return\n\t\t\tfor (const thread of getCommentThreads(editor)) {\n\t\t\t\tif (!isAnchoredToShape(thread, shape.id)) continue\n\t\t\t\tlet snapshot = pendingByShape.get(shape.id)\n\t\t\t\tif (!snapshot) {\n\t\t\t\t\tsnapshot = new Map()\n\t\t\t\t\tpendingByShape.set(shape.id, snapshot)\n\t\t\t\t}\n\t\t\t\t// Snapshot where the pin is drawn, not just the anchor point: imprecise shape pins\n\t\t\t\t// render inset toward the shape's centre, and the converted point pin renders at\n\t\t\t\t// its point exactly \u2014 without the inset the pin would jump on deletion. The inset\n\t\t\t\t// is screen-fixed, so bake it in at the current zoom.\n\t\t\t\tlet point = anchorPagePoint(editor, thread.anchor)\n\t\t\t\tconst inset = impreciseShapePinInset(editor, thread.anchor)\n\t\t\t\tif (point && inset) {\n\t\t\t\t\tconst zoom = editor.getZoomLevel()\n\t\t\t\t\tpoint = { x: point.x + inset.x / zoom, y: point.y + inset.y / zoom }\n\t\t\t\t}\n\t\t\t\tsnapshot.set(thread.id, point)\n\t\t\t}\n\t\t}\n\t)\n\n\t// Shape ids from `convertedByShape` re-created during the current operation. Restores are\n\t// settled at operation complete rather than in `afterCreate` itself: creation order within an\n\t// operation is arbitrary, so a shape can appear before its parent and not resolve an ancestor\n\t// page yet \u2014 and the conversion memory must outlive any such partial state.\n\tconst returnedShapeIds = new Set<TLShapeId>()\n\n\tconst disposeOperationComplete = editor.sideEffects.registerOperationCompleteHandler((source) => {\n\t\t// Only user-sourced handlers populate the maps and only local operations should settle\n\t\t// them; a remote operation completing leaves any (impossible-in-practice) leftovers for\n\t\t// the next local settle rather than judging them against remote state.\n\t\tif (source === 'remote') return\n\t\tif (pendingByShape.size === 0 && returnedShapeIds.size === 0) return\n\t\tconst settled = [...pendingByShape.entries()]\n\t\tpendingByShape.clear()\n\t\tconst returned = [...returnedShapeIds]\n\t\treturnedShapeIds.clear()\n\n\t\tconst updates: TLCommentRecord[] = []\n\t\tfor (const [shapeId, threadPoints] of settled) {\n\t\t\tif (editor.getShape(shapeId)) continue\n\t\t\tfor (const [threadId, point] of threadPoints) {\n\t\t\t\tif (!point) continue\n\t\t\t\tconst thread = getCommentRecord(editor, threadId)\n\t\t\t\tif (!thread || thread.typeName !== 'comment-thread') continue\n\t\t\t\tif (!isAnchoredToShape(thread, shapeId)) continue\n\t\t\t\tlet converted = convertedByShape.get(shapeId)\n\t\t\t\tif (!converted) {\n\t\t\t\t\tconverted = []\n\t\t\t\t\tconvertedByShape.set(shapeId, converted)\n\t\t\t\t}\n\t\t\t\tconverted.push({ threadId, anchor: thread.anchor, point })\n\t\t\t\tupdates.push({ ...thread, anchor: { type: 'point', x: point.x, y: point.y } })\n\t\t\t}\n\t\t}\n\n\t\tfor (const shapeId of returned) {\n\t\t\tconst shape = editor.getShape(shapeId)\n\t\t\tif (!shape) continue\n\t\t\tconst converted = convertedByShape.get(shapeId)\n\t\t\tif (!converted) continue\n\t\t\tconvertedByShape.delete(shapeId)\n\n\t\t\tconst pageId = editor.getAncestorPageId(shape)\n\t\t\tfor (const { threadId, anchor, point } of converted) {\n\t\t\t\tconst thread = getCommentRecord(editor, threadId)\n\t\t\t\tif (!thread || thread.typeName !== 'comment-thread') continue\n\t\t\t\t// Re-attach only threads still sitting exactly where the conversion left them \u2014 a\n\t\t\t\t// pin moved since then was placed deliberately, and that placement wins.\n\t\t\t\tconst current = thread.anchor\n\t\t\t\tif (current.type !== 'point' || current.x !== point.x || current.y !== point.y) {\n\t\t\t\t\tcontinue\n\t\t\t\t}\n\t\t\t\tif (!pageId || thread.pageId === pageId) {\n\t\t\t\t\tupdates.push({ ...thread, anchor })\n\t\t\t\t} else {\n\t\t\t\t\trehomeThread({ ...thread, anchor }, pageId, updates)\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\tif (updates.length > 0) {\n\t\t\tcommitCommentMutation(editor, () => putRecordsInCommit(editor, updates))\n\t\t}\n\t})\n\n\tconst disposeAfterCreate = editor.sideEffects.registerAfterCreateHandler(\n\t\t'shape',\n\t\t(shape, source) => {\n\t\t\tif (source === 'remote') return\n\t\t\tif (convertedByShape.has(shape.id)) returnedShapeIds.add(shape.id)\n\t\t}\n\t)\n\n\tconst disposeAfterChange = editor.sideEffects.registerAfterChangeHandler(\n\t\t'shape',\n\t\t(prev, next, source) => {\n\t\t\tif (source === 'remote') return\n\t\t\tif (prev.parentId === next.parentId) return\n\t\t\tconst pageId = editor.getAncestorPageId(next)\n\t\t\tif (!pageId) return\n\t\t\t// Descendants move with their parent without change events of their own.\n\t\t\tconst movedIds = editor.getShapeAndDescendantIds([next.id])\n\t\t\tconst updates: TLCommentRecord[] = []\n\t\t\tfor (const thread of getCommentThreads(editor)) {\n\t\t\t\tconst anchor = thread.anchor\n\t\t\t\tif (anchor.type !== 'shape') continue\n\t\t\t\tif (!movedIds.has(anchor.shapeId)) continue\n\t\t\t\tif (thread.pageId === pageId) continue\n\t\t\t\trehomeThread(thread, pageId, updates)\n\t\t\t}\n\t\t\tif (updates.length > 0) {\n\t\t\t\tcommitCommentMutation(editor, () => putRecordsInCommit(editor, updates))\n\t\t\t}\n\t\t}\n\t)\n\n\treturn () => {\n\t\tdisposeBeforeDelete()\n\t\tdisposeOperationComplete()\n\t\tdisposeAfterCreate()\n\t\tdisposeAfterChange()\n\t}\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist-esm/canvas/cluster-input.mjs

@@ -1,11 +1,11 @@
 import { anchorPagePoint } from "./thread-state.mjs";
-function collectClusterLeaves(editor, threads, openThreadId, impreciseShapeAnchor) {
+function collectClusterLeaves(editor, threads, openThreadId) {
   const pageId = editor.getCurrentPageId();
   const leaves = [];
   for (const thread of threads) {
     if (thread.id === openThreadId) continue;
     if (thread.pageId !== pageId) continue;
-    const point = anchorPagePoint(editor, thread.anchor, impreciseShapeAnchor);
+    const point = anchorPagePoint(editor, thread.anchor);
     if (!point) continue;
     leaves.push({
       id: thread.id,

package/dist-esm/canvas/cluster-input.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/canvas/cluster-input.ts"],
-  "sourcesContent": ["import type { Editor, TLCommentThread } from 'tldraw'\nimport type { LeafInput } from '../clustering/types'\nimport { anchorPagePoint } from './thread-state'\n\n/** @public */\nexport function collectClusterLeaves(\n\teditor: Editor,\n\tthreads: readonly TLCommentThread[],\n\topenThreadId: string | null,\n\timpreciseShapeAnchor?: { x: number; y: number }\n): LeafInput[] {\n\tconst pageId = editor.getCurrentPageId()\n\tconst leaves: LeafInput[] = []\n\n\tfor (const thread of threads) {\n\t\tif (thread.id === openThreadId) continue\n\t\tif (thread.pageId !== pageId) continue\n\n\t\tconst point = anchorPagePoint(editor, thread.anchor, impreciseShapeAnchor)\n\t\tif (!point) continue\n\n\t\tleaves.push({\n\t\t\tid: thread.id,\n\t\t\tpoint: { x: point.x, y: point.y },\n\t\t})\n\t}\n\n\treturn leaves\n}\n"],
-  "mappings": "AAEA,SAAS,uBAAuB;AAGzB,SAAS,qBACf,QACA,SACA,cACA,sBACc;AACd,QAAM,SAAS,OAAO,iBAAiB;AACvC,QAAM,SAAsB,CAAC;AAE7B,aAAW,UAAU,SAAS;AAC7B,QAAI,OAAO,OAAO,aAAc;AAChC,QAAI,OAAO,WAAW,OAAQ;AAE9B,UAAM,QAAQ,gBAAgB,QAAQ,OAAO,QAAQ,oBAAoB;AACzE,QAAI,CAAC,MAAO;AAEZ,WAAO,KAAK;AAAA,MACX,IAAI,OAAO;AAAA,MACX,OAAO,EAAE,GAAG,MAAM,GAAG,GAAG,MAAM,EAAE;AAAA,IACjC,CAAC;AAAA,EACF;AAEA,SAAO;AACR;",
+  "sourcesContent": ["import type { Editor, TLCommentThread } from 'tldraw'\nimport type { LeafInput } from '../clustering/types'\nimport { anchorPagePoint } from './thread-state'\n\n/** The cluster leaves for the threads pinned on the current page. @internal */\nexport function collectClusterLeaves(\n\teditor: Editor,\n\tthreads: readonly TLCommentThread[],\n\topenThreadId: string | null\n): LeafInput[] {\n\tconst pageId = editor.getCurrentPageId()\n\tconst leaves: LeafInput[] = []\n\n\tfor (const thread of threads) {\n\t\tif (thread.id === openThreadId) continue\n\t\tif (thread.pageId !== pageId) continue\n\n\t\tconst point = anchorPagePoint(editor, thread.anchor)\n\t\tif (!point) continue\n\n\t\tleaves.push({\n\t\t\tid: thread.id,\n\t\t\tpoint: { x: point.x, y: point.y },\n\t\t})\n\t}\n\n\treturn leaves\n}\n"],
+  "mappings": "AAEA,SAAS,uBAAuB;AAGzB,SAAS,qBACf,QACA,SACA,cACc;AACd,QAAM,SAAS,OAAO,iBAAiB;AACvC,QAAM,SAAsB,CAAC;AAE7B,aAAW,UAAU,SAAS;AAC7B,QAAI,OAAO,OAAO,aAAc;AAChC,QAAI,OAAO,WAAW,OAAQ;AAE9B,UAAM,QAAQ,gBAAgB,QAAQ,OAAO,MAAM;AACnD,QAAI,CAAC,MAAO;AAEZ,WAAO,KAAK;AAAA,MACX,IAAI,OAAO;AAAA,MACX,OAAO,EAAE,GAAG,MAAM,GAAG,GAAG,MAAM,EAAE;AAAA,IACjC,CAAC;AAAA,EACF;AAEA,SAAO;AACR;",
   "names": []
 }

package/dist-esm/canvas/comment-body.mjs

@@ -3,7 +3,7 @@ import { useMemo } from "react";
 import { renderCommentHtml } from "./comment-render.mjs";
 function CommentBody({ richText, resolveName }) {
   const html = useMemo(() => renderCommentHtml(richText, resolveName), [richText, resolveName]);
-  return /* @__PURE__ */ jsx("div", { className: "cmt-text", dangerouslySetInnerHTML: { __html: html } });
+  return /* @__PURE__ */ jsx("div", { className: "tlui-cmt-text", dangerouslySetInnerHTML: { __html: html } });
 }
 export {
   CommentBody

package/dist-esm/canvas/comment-body.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/canvas/comment-body.tsx"],
-  "sourcesContent": ["import { useMemo } from 'react'\nimport { TLRichText } from 'tldraw'\nimport { renderCommentHtml } from './comment-render'\n\n/** @public */\nexport interface CommentBodyProps {\n\trichText: TLRichText\n\t/** Maps a member id to its current display name, so \\@mentions show the live name. */\n\tresolveName?(id: string): string | undefined\n}\n\n/**\n * Renders a comment's rich-text body read-only through the limited comment extension set (no\n * headings), so formatting (bold, links, lists, highlight) is preserved rather than flattened, and\n * headings can never render. Use this as the `body` of a `CommentCard` on a canvas.\n * @public @react\n */\nexport function CommentBody({ richText, resolveName }: CommentBodyProps) {\n\tconst html = useMemo(() => renderCommentHtml(richText, resolveName), [richText, resolveName])\n\treturn <div className=\"cmt-text\" dangerouslySetInnerHTML={{ __html: html }} />\n}\n"],
-  "mappings": "AAmBQ;AAnBR,SAAS,eAAe;AAExB,SAAS,yBAAyB;AAe3B,SAAS,YAAY,EAAE,UAAU,YAAY,GAAqB;AACxE,QAAM,OAAO,QAAQ,MAAM,kBAAkB,UAAU,WAAW,GAAG,CAAC,UAAU,WAAW,CAAC;AAC5F,SAAO,oBAAC,SAAI,WAAU,YAAW,yBAAyB,EAAE,QAAQ,KAAK,GAAG;AAC7E;",
+  "sourcesContent": ["import { useMemo } from 'react'\nimport { TLRichText } from 'tldraw'\nimport { renderCommentHtml } from './comment-render'\n\n/** @public */\nexport interface CommentBodyProps {\n\trichText: TLRichText\n\t/** Maps a member id to its current display name, so \\@mentions show the live name. */\n\tresolveName?(id: string): string | undefined\n}\n\n/**\n * Renders a comment's rich-text body read-only through the limited comment extension set (no\n * headings), so formatting (bold, links, lists, highlight) is preserved rather than flattened, and\n * headings can never render. Use this as the `body` of a `CommentCard` on a canvas.\n * @public @react\n */\nexport function CommentBody({ richText, resolveName }: CommentBodyProps) {\n\tconst html = useMemo(() => renderCommentHtml(richText, resolveName), [richText, resolveName])\n\treturn <div className=\"tlui-cmt-text\" dangerouslySetInnerHTML={{ __html: html }} />\n}\n"],
+  "mappings": "AAmBQ;AAnBR,SAAS,eAAe;AAExB,SAAS,yBAAyB;AAe3B,SAAS,YAAY,EAAE,UAAU,YAAY,GAAqB;AACxE,QAAM,OAAO,QAAQ,MAAM,kBAAkB,UAAU,WAAW,GAAG,CAAC,UAAU,WAAW,CAAC;AAC5F,SAAO,oBAAC,SAAI,WAAU,iBAAgB,yBAAyB,EAAE,QAAQ,KAAK,GAAG;AAClF;",
   "names": []
 }

package/dist-esm/canvas/comment-drafts.mjs

@@ -0,0 +1,34 @@
+import { deleteFromLocalStorage, getFromLocalStorage, setInLocalStorage } from "@tldraw/utils";
+import { isCommentEmpty } from "../ui/comment-extensions.mjs";
+const DRAFT_KEY_PREFIX = "tldraw-comment-draft";
+const NEW_COMMENT_DRAFT = "new";
+function replyDraftSlot(threadId) {
+  return `reply:${threadId}`;
+}
+function getCommentDraft(slot) {
+  const raw = getFromLocalStorage(`${DRAFT_KEY_PREFIX}:${slot}`);
+  if (!raw) return void 0;
+  try {
+    return JSON.parse(raw);
+  } catch {
+    return void 0;
+  }
+}
+function saveCommentDraft(slot, value) {
+  if (isCommentEmpty(value)) {
+    clearCommentDraft(slot);
+    return;
+  }
+  setInLocalStorage(`${DRAFT_KEY_PREFIX}:${slot}`, JSON.stringify(value));
+}
+function clearCommentDraft(slot) {
+  deleteFromLocalStorage(`${DRAFT_KEY_PREFIX}:${slot}`);
+}
+export {
+  NEW_COMMENT_DRAFT,
+  clearCommentDraft,
+  getCommentDraft,
+  replyDraftSlot,
+  saveCommentDraft
+};
+//# sourceMappingURL=comment-drafts.mjs.map

package/dist-esm/canvas/comment-drafts.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/canvas/comment-drafts.ts"],
+  "sourcesContent": ["import { deleteFromLocalStorage, getFromLocalStorage, setInLocalStorage } from '@tldraw/utils'\nimport type { TLRichText } from 'tldraw'\nimport { isCommentEmpty } from '../ui/comment-extensions'\n\nconst DRAFT_KEY_PREFIX = 'tldraw-comment-draft'\n\n/** The single slot for an unsent new-comment (placement composer) draft. The anchor is re-picked\n *  by clicking when the composer reopens, so only the text is worth keeping \u2014 and without a\n *  universal document id in the SDK, one slot is the honest scope. */\nexport const NEW_COMMENT_DRAFT = 'new'\n\n/** The draft slot for an unsent reply on a thread. Thread record ids are globally unique and\n *  stable across reloads, so replies never need a document key. @public */\nexport function replyDraftSlot(threadId: string): string {\n\treturn `reply:${threadId}`\n}\n\n/** Read a saved unsent draft, or undefined when there is none (or it fails to parse). @public */\nexport function getCommentDraft(slot: string): TLRichText | undefined {\n\tconst raw = getFromLocalStorage(`${DRAFT_KEY_PREFIX}:${slot}`)\n\tif (!raw) return undefined\n\ttry {\n\t\treturn JSON.parse(raw) as TLRichText\n\t} catch {\n\t\treturn undefined\n\t}\n}\n\n/**\n * Save an unsent draft so click-away and reload don't lose it \u2014 the flip side of not warning\n * before discard. Saving empty content clears the slot instead, so deleting your text and\n * closing doesn't resurrect an empty draft later.\n * @public\n */\nexport function saveCommentDraft(slot: string, value: TLRichText) {\n\tif (isCommentEmpty(value)) {\n\t\tclearCommentDraft(slot)\n\t\treturn\n\t}\n\tsetInLocalStorage(`${DRAFT_KEY_PREFIX}:${slot}`, JSON.stringify(value))\n}\n\n/** Remove a saved draft (after posting, or when its content was emptied). @public */\nexport function clearCommentDraft(slot: string) {\n\tdeleteFromLocalStorage(`${DRAFT_KEY_PREFIX}:${slot}`)\n}\n"],
+  "mappings": "AAAA,SAAS,wBAAwB,qBAAqB,yBAAyB;AAE/E,SAAS,sBAAsB;AAE/B,MAAM,mBAAmB;AAKlB,MAAM,oBAAoB;AAI1B,SAAS,eAAe,UAA0B;AACxD,SAAO,SAAS,QAAQ;AACzB;AAGO,SAAS,gBAAgB,MAAsC;AACrE,QAAM,MAAM,oBAAoB,GAAG,gBAAgB,IAAI,IAAI,EAAE;AAC7D,MAAI,CAAC,IAAK,QAAO;AACjB,MAAI;AACH,WAAO,KAAK,MAAM,GAAG;AAAA,EACtB,QAAQ;AACP,WAAO;AAAA,EACR;AACD;AAQO,SAAS,iBAAiB,MAAc,OAAmB;AACjE,MAAI,eAAe,KAAK,GAAG;AAC1B,sBAAkB,IAAI;AACtB;AAAA,EACD;AACA,oBAAkB,GAAG,gBAAgB,IAAI,IAAI,IAAI,KAAK,UAAU,KAAK,CAAC;AACvE;AAGO,SAAS,kBAAkB,MAAc;AAC/C,yBAAuB,GAAG,gBAAgB,IAAI,IAAI,EAAE;AACrD;",
+  "names": []
+}

package/dist-esm/canvas/comment-mutations.mjs

@@ -0,0 +1,103 @@
+import { getCommentRecord, getLiveComments } from "./comment-store.mjs";
+import { getCommentingOptions } from "./options.mjs";
+import { openThreadId } from "./state.mjs";
+function historyModeFor(options, kind) {
+  switch (kind) {
+    case "delete":
+      return "ignore";
+    case "drag":
+      return options.dragHistory ?? options.history;
+    case "mutation":
+      return options.history;
+  }
+}
+function commitCommentMutation(editor, fn, kind = "mutation") {
+  const history = historyModeFor(getCommentingOptions(editor), kind);
+  let result;
+  editor.run(
+    () => {
+      result = fn();
+    },
+    { history }
+  );
+  return result;
+}
+function putRecordsInCommit(editor, records) {
+  editor.store.put(records);
+}
+function removeRecordsInCommit(editor, ids) {
+  editor.store.remove(ids);
+}
+function putCommentRecords(editor, records) {
+  commitCommentMutation(editor, () => putRecordsInCommit(editor, records));
+}
+function removeCommentRecords(editor, ids) {
+  commitCommentMutation(editor, () => removeRecordsInCommit(editor, ids));
+}
+function readLatest(editor, record) {
+  const current = getCommentRecord(editor, record.id);
+  return current?.typeName === record.typeName ? current : void 0;
+}
+function editComment(editor, comment, body) {
+  commitCommentMutation(editor, () => {
+    const current = readLatest(editor, comment);
+    if (!current) return;
+    putRecordsInCommit(editor, [{ ...current, body, editedAt: Date.now() }]);
+  });
+}
+function resolveThread(editor, thread, userId) {
+  commitCommentMutation(editor, () => {
+    const current = readLatest(editor, thread);
+    if (!current) return;
+    putRecordsInCommit(editor, [{ ...current, resolved: { at: Date.now(), by: userId } }]);
+  });
+}
+function reopenThread(editor, thread) {
+  commitCommentMutation(editor, () => {
+    const current = readLatest(editor, thread);
+    if (!current) return;
+    putRecordsInCommit(editor, [{ ...current, resolved: null }]);
+  });
+}
+function deleteComment(editor, comment) {
+  commitCommentMutation(
+    editor,
+    () => {
+      const current = readLatest(editor, comment);
+      if (!current || current.isDeleted) return;
+      const isLastInThread = getLiveComments(editor).filter((c) => c.threadId === current.threadId).length <= 1;
+      if (isLastInThread && openThreadId.get(editor) === current.threadId) {
+        openThreadId.set(editor, null);
+      }
+      putRecordsInCommit(editor, [{ ...current, isDeleted: true }]);
+    },
+    "delete"
+  );
+}
+function deleteThread(editor, thread) {
+  commitCommentMutation(
+    editor,
+    () => {
+      const current = readLatest(editor, thread);
+      if (!current) return;
+      if (openThreadId.get(editor) === current.id) {
+        openThreadId.set(editor, null);
+      }
+      putRecordsInCommit(editor, [{ ...current, isDeleted: true }]);
+    },
+    "delete"
+  );
+}
+export {
+  commitCommentMutation,
+  deleteComment,
+  deleteThread,
+  editComment,
+  putCommentRecords,
+  putRecordsInCommit,
+  removeCommentRecords,
+  removeRecordsInCommit,
+  reopenThread,
+  resolveThread
+};
+//# sourceMappingURL=comment-mutations.mjs.map

package/dist-esm/canvas/comment-mutations.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/canvas/comment-mutations.ts"],
+  "sourcesContent": ["import {\n\tEditor,\n\tTLComment,\n\tTLCommentId,\n\tTLCommentReactionId,\n\tTLCommentThread,\n\tTLCommentThreadId,\n\tTLHistoryBatchOptions,\n\tTLRecord,\n\tTLRichText,\n} from 'tldraw'\nimport { getCommentRecord, getLiveComments, type TLCommentRecord } from './comment-store'\nimport { getCommentingOptions, type CommentingOptions } from './options'\nimport { openThreadId } from './state'\n\n/**\n * Every write to a comment record, and the undo/redo policy governing them.\n *\n * This file layers bottom-up: {@link commitCommentMutation} resolves the history mode,\n * {@link putCommentRecords} and {@link removeCommentRecords} are the typed writes that run under\n * it, and the verbs below are those writes plus the one rule each carries \u2014 a timestamp to stamp, a\n * shape to put the `resolved` field in, or the soft-delete protocol. The built-in thread view calls\n * exactly these verbs, so a UI of your own behaves the same as the one in the box.\n *\n * Every verb takes the record it acts on, but treats it as the identity of what to change rather\n * than as the value to write back \u2014 see {@link readLatest}.\n *\n * Posting carries no such rule, so it isn't a verb here: build the records with\n * `createCommentThread`/`createComment` and write them with {@link putCommentRecords}.\n */\n\n/**\n * Which history policy a comment write follows:\n *\n * - `mutation` \u2014 {@link CommentingOptions.history}: posts, replies, edits, resolves.\n * - `drag` \u2014 {@link CommentingOptions.dragHistory}, falling back to `history`: pin and region\n *   re-anchors, which are spatial edits a host may reasonably want undoable alongside a shape move.\n * - `delete` \u2014 always `'ignore'`, whatever the options say. A soft-delete flag is write-once\n *   server-side, so an undo clearing it would be vetoed and rebased rather than restore anything.\n *\n * @internal\n */\nexport type CommentMutationKind = 'delete' | 'drag' | 'mutation'\n\n/** The undo/redo mode a write of the given kind runs under. See {@link CommentMutationKind}. */\nfunction historyModeFor(\n\toptions: CommentingOptions,\n\tkind: CommentMutationKind\n): TLHistoryBatchOptions['history'] {\n\tswitch (kind) {\n\t\tcase 'delete':\n\t\t\treturn 'ignore'\n\t\tcase 'drag':\n\t\t\treturn options.dragHistory ?? options.history\n\t\tcase 'mutation':\n\t\t\treturn options.history\n\t}\n}\n\n/**\n * Commit a comment mutation with the configured undo/redo behavior, so the\n * {@link CommentingOptions.history} option governs whether it lands on the undo stack. Defaults to\n * `'ignore'`. See {@link CommentMutationKind} for what each kind resolves to.\n * @internal\n */\nexport function commitCommentMutation<T>(\n\teditor: Editor,\n\tfn: () => T,\n\tkind: CommentMutationKind = 'mutation'\n): T {\n\tconst history = historyModeFor(getCommentingOptions(editor), kind)\n\tlet result: T\n\teditor.run(\n\t\t() => {\n\t\t\tresult = fn()\n\t\t},\n\t\t{ history }\n\t)\n\treturn result!\n}\n\n/**\n * Write records without opening a commit, for call sites that already sit inside one.\n *\n * `editor.run`'s history option isn't additive \u2014 a nested run overwrites the enclosing mode for its\n * own scope \u2014 so a {@link putCommentRecords} call inside a commit would discard the mode its caller\n * chose. A pin drag committed as `drag` under `dragHistory: 'record'` would land back on\n * `history: 'ignore'` and quietly stop being undoable. Inside a commit, write with this.\n *\n * @internal\n */\nexport function putRecordsInCommit(editor: Editor, records: TLCommentRecord[]): void {\n\teditor.store.put(records as unknown as TLRecord[])\n}\n\n/** {@link putRecordsInCommit}'s counterpart for removals. @internal */\nexport function removeRecordsInCommit(\n\teditor: Editor,\n\tids: (TLCommentId | TLCommentReactionId | TLCommentThreadId)[]\n): void {\n\teditor.store.remove(ids as unknown as TLRecord['id'][])\n}\n\n/**\n * Write comment records to the store, under the configured\n * {@link CommentingOptions.history} behavior \u2014 so a record you write lands on the undo stack (or\n * doesn't) exactly like one the built-in UI writes. Defaults to `'ignore'`.\n *\n * Use it to seed or import threads, and to save an edit. To delete, prefer\n * {@link deleteComment} and {@link deleteThread} over {@link removeCommentRecords}: comments are\n * soft-deleted, and a synced server rejects the hard delete.\n *\n * @public\n */\nexport function putCommentRecords(editor: Editor, records: TLCommentRecord[]): void {\n\tcommitCommentMutation(editor, () => putRecordsInCommit(editor, records))\n}\n\n/**\n * Remove comment records from the store by id, under the configured\n * {@link CommentingOptions.history} behavior.\n *\n * This is a hard delete, which is rarely what you want for a comment or a thread: the built-in UI\n * soft-deletes them ({@link deleteComment}, {@link deleteThread}) so the server can prune the\n * records \u2014 including reactions, which belong to whoever left them rather than to the deleter. A\n * server that enforces per-record permissions will veto a hard delete outright. Reach for this on\n * a local, unsynced comment store, or to drop a reaction (which is a hard delete \u2014 see\n * {@link toggleCommentReaction}).\n *\n * @public\n */\nexport function removeCommentRecords(\n\teditor: Editor,\n\tids: (TLCommentId | TLCommentReactionId | TLCommentThreadId)[]\n): void {\n\tcommitCommentMutation(editor, () => removeRecordsInCommit(editor, ids))\n}\n\n/**\n * The record as the store currently holds it, or `undefined` if it isn't there any more.\n *\n * A verb is handed a record, but that record is a snapshot of whenever its caller got hold of one,\n * and a comment record moves underneath it. A thread's `anchor` and `pageId` are rewritten without\n * anyone touching the thread: deleting a pinned shape converts the anchor to a point, reparenting\n * one rehomes the thread to another page, a pin drag re-anchors it. Writing the caller's snapshot\n * back would put those fields as they were and sync the revert out to everyone.\n *\n * `put` is also an upsert, so a record a remote delete has already removed would come back \u2014 with\n * `isDeleted: false` on an edit or a resolve. That's the multiplayer surprise the schema warns\n * about (see `TLComment`), reached by a route the history option doesn't cover.\n *\n * So a verb reads what it's changing rather than trusting what it was given, and a record that's\n * gone is a no-op: whatever the change was, there's nothing left for it to apply to.\n */\nfunction readLatest<T extends TLComment | TLCommentThread>(\n\teditor: Editor,\n\trecord: T\n): T | undefined {\n\tconst current = getCommentRecord(editor, record.id)\n\t// Record ids carry their type, so a matching `typeName` means a record of exactly T.\n\treturn current?.typeName === record.typeName ? (current as T) : undefined\n}\n\n/**\n * Replace a comment's body and stamp it as edited, which is what renders the \"(edited)\" marker on\n * its byline.\n *\n * Editing is the author's to do. The built-in UI only offers it on your own comments, and a server\n * that enforces per-record permissions rejects anyone else's edit.\n *\n * The `comment` you pass says which comment to edit; the body lands on the version the store\n * currently holds, so a copy you've held on to can't revert a change made since it, and can't\n * re-create a comment that's already been removed \u2014 editing one of those does nothing.\n *\n * @example\n * ```ts\n * editComment(editor, comment, toRichText('Actually, make it dashed'))\n * ```\n *\n * @public\n */\nexport function editComment(editor: Editor, comment: TLComment, body: TLRichText): void {\n\tcommitCommentMutation(editor, () => {\n\t\tconst current = readLatest(editor, comment)\n\t\tif (!current) return\n\t\tputRecordsInCommit(editor, [{ ...current, body, editedAt: Date.now() }])\n\t})\n}\n\n/**\n * Mark a thread resolved, stamping who resolved it and when. Resolved threads keep their pin (a\n * checked one) and are hidden from the sidebar until its \"show resolved\" filter is on.\n *\n * Only the resolution is written: the rest of the thread is read fresh, so resolving with a stale\n * copy in hand won't drag a pin back to where it used to be. A no-op on a thread that's gone.\n *\n * @public\n */\nexport function resolveThread(editor: Editor, thread: TLCommentThread, userId: string): void {\n\tcommitCommentMutation(editor, () => {\n\t\tconst current = readLatest(editor, thread)\n\t\tif (!current) return\n\t\tputRecordsInCommit(editor, [{ ...current, resolved: { at: Date.now(), by: userId } }])\n\t})\n}\n\n/**\n * Reopen a resolved thread, clearing the resolution. A no-op on a thread that isn't resolved, and\n * on one that's gone. Like {@link resolveThread}, it touches only the resolution.\n *\n * @public\n */\nexport function reopenThread(editor: Editor, thread: TLCommentThread): void {\n\tcommitCommentMutation(editor, () => {\n\t\tconst current = readLatest(editor, thread)\n\t\tif (!current) return\n\t\tputRecordsInCommit(editor, [{ ...current, resolved: null }])\n\t})\n}\n\n/**\n * Delete a comment.\n *\n * This is a soft delete: it sets the record's `isDeleted` flag rather than removing it, and the\n * server prunes the comment and its reactions once the flag is persisted. That way no client ever\n * removes records it doesn't own \u2014 a reaction belongs to whoever left it \u2014 and a server enforcing\n * per-record permissions has a write it can check rather than a deletion it can only refuse.\n * Deleting is the author's to do; the built-in UI only offers it on your own comments.\n *\n * The write is never undoable, whatever {@link CommentingOptions.history} says: the flag is\n * write-once server-side, so an undo clearing it would be vetoed and rebased rather than bring the\n * comment back.\n *\n * Deleting a thread's last comment leaves the thread with no surface \u2014 an empty thread renders\n * nothing \u2014 and closes it if it's open. The thread record is left for the server to prune, since\n * the deleter may not be its creator.\n *\n * A comment that's already deleted, or already pruned, is a no-op.\n *\n * @public\n */\nexport function deleteComment(editor: Editor, comment: TLComment): void {\n\tcommitCommentMutation(\n\t\teditor,\n\t\t() => {\n\t\t\tconst current = readLatest(editor, comment)\n\t\t\t// Deleting twice \u2014 a double activation, a handler firing on a copy taken before the first\n\t\t\t// delete \u2014 is nothing to do rather than something to redo. The check below counts the\n\t\t\t// comment being deleted among the live ones, so it only reads as \"the last one\" while\n\t\t\t// this delete is the one taking it away.\n\t\t\tif (!current || current.isDeleted) return\n\t\t\tconst isLastInThread =\n\t\t\t\tgetLiveComments(editor).filter((c) => c.threadId === current.threadId).length <= 1\n\t\t\tif (isLastInThread && openThreadId.get(editor) === current.threadId) {\n\t\t\t\topenThreadId.set(editor, null)\n\t\t\t}\n\t\t\tputRecordsInCommit(editor, [{ ...current, isDeleted: true }])\n\t\t},\n\t\t'delete'\n\t)\n}\n\n/**\n * Delete a thread and, with it, the whole conversation.\n *\n * A soft delete on the same model as {@link deleteComment}: the flag goes on the thread record and\n * the server prunes the thread, its comments, and their reactions once it's persisted. Deleting a\n * thread is its creator's to do \u2014 a server enforcing per-record permissions vetoes anyone else \u2014\n * and the write is never undoable.\n *\n * Closes the thread if it's the open one. A thread that's already pruned is a no-op.\n *\n * @public\n */\nexport function deleteThread(editor: Editor, thread: TLCommentThread): void {\n\tcommitCommentMutation(\n\t\teditor,\n\t\t() => {\n\t\t\tconst current = readLatest(editor, thread)\n\t\t\tif (!current) return\n\t\t\tif (openThreadId.get(editor) === current.id) {\n\t\t\t\topenThreadId.set(editor, null)\n\t\t\t}\n\t\t\tputRecordsInCommit(editor, [{ ...current, isDeleted: true }])\n\t\t},\n\t\t'delete'\n\t)\n}\n"],
+  "mappings": "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",
+  "names": []
+}