@edux-design/comments 0.1.3 → 0.1.4

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @edux-design/comments
 
+## 0.1.4
+
+### Patch Changes
+
+- Added hooks and callbacks for consumer support
+
 ## 0.1.3
 
 ### Patch Changes

package/README.md

@@ -13,17 +13,19 @@ npm i @edux-design/comments @edux-design/avatars
 ```jsx
 import { Comment } from "@edux-design/comments";
 import { CommentComposer } from "@edux-design/comments";
+import { CommentMention } from "@edux-design/comments";
 
 export function Example() {
+  const [resolved, setResolved] = React.useState(false);
+
   return (
     <Comment
       author="Alex Johnson"
       timestamp="2h ago"
       body="Left a few notes on the introduction. Let me know if you want me to draft the edits."
       avatarProps={{ name: "Alex Johnson" }}
-      onResolve={() => {
-        // mark resolved in your app state
-      }}
+      resolved={resolved}
+      onResolve={() => setResolved((prev) => !prev)}
       replies={
         <Comment
           author="Taylor"
@@ -47,6 +49,7 @@ export function Example() {
 ```jsx
 export function ComposerExample() {
   const [value, setValue] = React.useState("");
+  const [query, setQuery] = React.useState("");
 
   return (
     <CommentComposer
@@ -55,7 +58,46 @@ export function ComposerExample() {
       onSubmit={() => setValue("")}
       onCancel={() => setValue("")}
       avatarProps={{ name: "Alex Johnson" }}
-    />
+    >
+      <CommentMention
+        peopleList={[
+          { id: "alex", name: "Alex Johnson", handle: "alex" },
+          { id: "priya", name: "Priya Singh", handle: "priya" },
+        ]}
+        onQueryChange={setQuery}
+      />
+      <div className="mt-8 text-xs text-fg-subtle">
+        Mention query: <span className="font-semibold">{query || "—"}</span>
+      </div>
+    </CommentComposer>
   );
 }
 ```
+
+## Mentions
+
+`CommentMention` handles the in-editor mention menu and emits the active query via
+`onQueryChange` when the user types `@query` at the cursor. Debounce behavior is
+left to the consumer.
+
+```jsx
+import { CommentComposer, CommentMention } from "@edux-design/comments";
+
+<CommentComposer value={value} onChange={(event) => setValue(event.target.value)}>
+  <CommentMention peopleList={people} onQueryChange={setQuery} />
+</CommentComposer>;
+```
+
+## Resolve / Re-open
+
+`Comment.Resolve` swaps label and styling based on the resolved state. You can
+override the label if needed.
+
+```jsx
+<Comment resolved={isResolved} onResolve={toggleResolved}>
+  <Comment.Actions>
+    <Comment.Resolve />
+    <Comment.Resolve label="Re-open thread" />
+  </Comment.Actions>
+</Comment>
+```

package/dist/index.d.mts

@@ -45,8 +45,9 @@ declare const Comment: react.ForwardRefExoticComponent<react.RefAttributes<any>>
  */
 declare const CommentComposer: react.ForwardRefExoticComponent<react.RefAttributes<any>>;
 
-declare function CommentMention({ peopleList, }: {
+declare function CommentMention({ peopleList, onQueryChange, }: {
     peopleList?: any[];
+    onQueryChange: any;
 }): react_jsx_runtime.JSX.Element;
 
 export { Comment, CommentComposer, CommentMention };

package/dist/index.d.ts

@@ -45,8 +45,9 @@ declare const Comment: react.ForwardRefExoticComponent<react.RefAttributes<any>>
  */
 declare const CommentComposer: react.ForwardRefExoticComponent<react.RefAttributes<any>>;
 
-declare function CommentMention({ peopleList, }: {
+declare function CommentMention({ peopleList, onQueryChange, }: {
     peopleList?: any[];
+    onQueryChange: any;
 }): react_jsx_runtime.JSX.Element;
 
 export { Comment, CommentComposer, CommentMention };

package/dist/index.js

@@ -46,7 +46,8 @@ var VARIANT_STYLES = {
 };
 var CommentContext = (0, import_react.createContext)({
   editable: true,
-  onResolve: void 0
+  onResolve: void 0,
+  resolved: false
 });
 var useCommentContext = () => (0, import_react.useContext)(CommentContext);
 var Comment = (0, import_react.forwardRef)(function Comment2({
@@ -92,7 +93,7 @@ var Comment = (0, import_react.forwardRef)(function Comment2({
     setShowAllReplies(!shouldCollapseReplies);
   }, [shouldCollapseReplies]);
   const visibleReplies = shouldCollapseReplies && !showAllReplies ? [replyItems[replyCount - 1]] : replyItems;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CommentContext.Provider, { value: { editable, onResolve }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CommentContext.Provider, { value: { editable, onResolve, resolved: isResolved }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     "div",
     {
       ref,
@@ -168,24 +169,29 @@ var CommentResolve = ({
   className,
   disabled,
   onClick,
+  label,
   ...props
 }) => {
-  const { editable, onResolve } = useCommentContext();
+  const { editable, onResolve, resolved } = useCommentContext();
   const isDisabled = disabled || !editable;
   const handleClick = onClick ?? onResolve;
+  const isResolved = Boolean(resolved);
+  const actionLabel = label ?? (isResolved ? "Re-open" : "Resolve");
+  const toneClass = isResolved ? "text-fg-info-base" : "text-fg-success-base";
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "button",
     {
       type: "button",
       className: (0, import_utils.cx)(
-        "text-xs font-semibold text-fg-success-base cursor-pointer",
+        "text-xs font-semibold cursor-pointer",
+        toneClass,
         className
       ),
       onClick: handleClick,
       disabled: isDisabled,
       "aria-disabled": isDisabled,
       ...props,
-      children: "Resolve"
+      children: actionLabel
     }
   );
 };
@@ -391,7 +397,8 @@ var import_menus = require("@edux-design/menus");
 var import_avatars3 = require("@edux-design/avatars");
 var import_jsx_runtime4 = require("react/jsx-runtime");
 var CommentMention = ({
-  peopleList = []
+  peopleList = [],
+  onQueryChange
 }) => {
   const { editor, editorContainerRef } = useCommentComposer();
   const [menuOpen, setMenuOpen] = (0, import_react6.useState)(false);
@@ -400,6 +407,7 @@ var CommentMention = ({
   const [anchorStyle, setAnchorStyle] = (0, import_react6.useState)({ left: 0, top: 0 });
   const menuListRef = (0, import_react6.useRef)(null);
   const rangeRef = (0, import_react6.useRef)(null);
+  const lastQueryRef = (0, import_react6.useRef)("");
   const peopleByHandle = (0, import_react6.useMemo)(
     () => new Map(peopleList.map((person) => [person.handle.toLowerCase(), person])),
     [peopleList]
@@ -426,6 +434,10 @@ var CommentMention = ({
     const match = textBefore.match(/@([\w-]*)$/);
     if (match) {
       const handleQuery = match[1] ?? "";
+      if (onQueryChange && handleQuery !== lastQueryRef.current) {
+        lastQueryRef.current = handleQuery;
+        onQueryChange(handleQuery);
+      }
       setQuery(handleQuery);
       setMenuOpen(true);
       const fromPos = pos - match[0].length;
@@ -446,7 +458,11 @@ var CommentMention = ({
     setQuery("");
     setRange(null);
     rangeRef.current = null;
-  }, [editor]);
+    if (onQueryChange && lastQueryRef.current !== "") {
+      lastQueryRef.current = "";
+      onQueryChange("");
+    }
+  }, [editor, editorContainerRef, onQueryChange]);
   const handleSelectPerson = (0, import_react6.useCallback)(
     (person) => {
       if (!editor || !rangeRef.current) return;
@@ -478,8 +494,12 @@ var CommentMention = ({
       setQuery("");
       setRange(null);
       rangeRef.current = null;
+      if (onQueryChange && lastQueryRef.current !== "") {
+        lastQueryRef.current = "";
+        onQueryChange("");
+      }
     },
-    [editor]
+    [editor, onQueryChange]
   );
   (0, import_react6.useEffect)(() => {
     if (!editor) return;

package/dist/index.mjs

@@ -17,7 +17,8 @@ var VARIANT_STYLES = {
 };
 var CommentContext = createContext({
   editable: true,
-  onResolve: void 0
+  onResolve: void 0,
+  resolved: false
 });
 var useCommentContext = () => useContext(CommentContext);
 var Comment = forwardRef(function Comment2({
@@ -63,7 +64,7 @@ var Comment = forwardRef(function Comment2({
     setShowAllReplies(!shouldCollapseReplies);
   }, [shouldCollapseReplies]);
   const visibleReplies = shouldCollapseReplies && !showAllReplies ? [replyItems[replyCount - 1]] : replyItems;
-  return /* @__PURE__ */ jsx(CommentContext.Provider, { value: { editable, onResolve }, children: /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(CommentContext.Provider, { value: { editable, onResolve, resolved: isResolved }, children: /* @__PURE__ */ jsxs(
     "div",
     {
       ref,
@@ -139,24 +140,29 @@ var CommentResolve = ({
   className,
   disabled,
   onClick,
+  label,
   ...props
 }) => {
-  const { editable, onResolve } = useCommentContext();
+  const { editable, onResolve, resolved } = useCommentContext();
   const isDisabled = disabled || !editable;
   const handleClick = onClick ?? onResolve;
+  const isResolved = Boolean(resolved);
+  const actionLabel = label ?? (isResolved ? "Re-open" : "Resolve");
+  const toneClass = isResolved ? "text-fg-info-base" : "text-fg-success-base";
   return /* @__PURE__ */ jsx(
     "button",
     {
       type: "button",
       className: cx(
-        "text-xs font-semibold text-fg-success-base cursor-pointer",
+        "text-xs font-semibold cursor-pointer",
+        toneClass,
         className
       ),
       onClick: handleClick,
       disabled: isDisabled,
       "aria-disabled": isDisabled,
       ...props,
-      children: "Resolve"
+      children: actionLabel
     }
   );
 };
@@ -369,7 +375,8 @@ import { Menu, MenuList, MenuItem } from "@edux-design/menus";
 import { Avatar as Avatar3 } from "@edux-design/avatars";
 import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
 var CommentMention = ({
-  peopleList = []
+  peopleList = [],
+  onQueryChange
 }) => {
   const { editor, editorContainerRef } = useCommentComposer();
   const [menuOpen, setMenuOpen] = useState2(false);
@@ -378,6 +385,7 @@ var CommentMention = ({
   const [anchorStyle, setAnchorStyle] = useState2({ left: 0, top: 0 });
   const menuListRef = useRef2(null);
   const rangeRef = useRef2(null);
+  const lastQueryRef = useRef2("");
   const peopleByHandle = useMemo3(
     () => new Map(peopleList.map((person) => [person.handle.toLowerCase(), person])),
     [peopleList]
@@ -404,6 +412,10 @@ var CommentMention = ({
     const match = textBefore.match(/@([\w-]*)$/);
     if (match) {
       const handleQuery = match[1] ?? "";
+      if (onQueryChange && handleQuery !== lastQueryRef.current) {
+        lastQueryRef.current = handleQuery;
+        onQueryChange(handleQuery);
+      }
       setQuery(handleQuery);
       setMenuOpen(true);
       const fromPos = pos - match[0].length;
@@ -424,7 +436,11 @@ var CommentMention = ({
     setQuery("");
     setRange(null);
     rangeRef.current = null;
-  }, [editor]);
+    if (onQueryChange && lastQueryRef.current !== "") {
+      lastQueryRef.current = "";
+      onQueryChange("");
+    }
+  }, [editor, editorContainerRef, onQueryChange]);
   const handleSelectPerson = useCallback(
     (person) => {
       if (!editor || !rangeRef.current) return;
@@ -456,8 +472,12 @@ var CommentMention = ({
       setQuery("");
       setRange(null);
       rangeRef.current = null;
+      if (onQueryChange && lastQueryRef.current !== "") {
+        lastQueryRef.current = "";
+        onQueryChange("");
+      }
     },
-    [editor]
+    [editor, onQueryChange]
   );
   useEffect3(() => {
     if (!editor) return;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@edux-design/comments",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "private": false,
   "sideEffects": [
     "**/*.css"

package/src/demos/Comment.stories.jsx

@@ -56,9 +56,23 @@ export const Basic = (args) => (
       }
     >
       <Comment.Actions>
+        <Comment.Resolve />
         <Comment.Edit />
       </Comment.Actions>
     </Comment>
+
+    <Comment
+      author="Jordan Lee"
+      timestamp="Yesterday"
+      body="Resolved and ready to re-open if needed."
+      avatarProps={{ name: "Jordan Lee" }}
+      resolved
+    >
+      <Comment.Actions>
+        <Comment.Resolve />
+        <Comment.Resolve label="Re-open thread" />
+      </Comment.Actions>
+    </Comment>
   </div>
 );
 
@@ -86,6 +100,8 @@ export const Thread = () => {
     },
   ]);
   const [activeReplyId, setActiveReplyId] = React.useState(null);
+  const [recentlyResolvedId, setRecentlyResolvedId] = React.useState(null);
+  const [recentlyReopenedId, setRecentlyReopenedId] = React.useState(null);
 
   const handleAddComment = (event) => {
     event.preventDefault();
@@ -132,8 +148,19 @@ export const Thread = () => {
   };
 
   const handleResolve = (commentId) => {
-    setResolvedIds((prev) => new Set(prev).add(commentId));
+    setResolvedIds((prev) => {
+      const next = new Set(prev);
+      if (next.has(commentId)) {
+        next.delete(commentId);
+        setRecentlyReopenedId(commentId);
+      } else {
+        next.add(commentId);
+        setRecentlyResolvedId(commentId);
+      }
+      return next;
+    });
     setActiveReplyId((prev) => (prev === commentId ? null : prev));
+    setLastAddedId(commentId);
   };
 
   React.useEffect(() => {
@@ -152,6 +179,22 @@ export const Thread = () => {
     };
   }, [lastAddedId]);
 
+  React.useEffect(() => {
+    if (!recentlyResolvedId) return;
+    const timeout = setTimeout(() => {
+      setRecentlyResolvedId(null);
+    }, 320);
+    return () => clearTimeout(timeout);
+  }, [recentlyResolvedId]);
+
+  React.useEffect(() => {
+    if (!recentlyReopenedId) return;
+    const timeout = setTimeout(() => {
+      setRecentlyReopenedId(null);
+    }, 320);
+    return () => clearTimeout(timeout);
+  }, [recentlyReopenedId]);
+
   const getAnimationProps = (id) => {
     if (id !== lastAddedId) return {};
     return {
@@ -159,6 +202,8 @@ export const Thread = () => {
         "transition-all duration-300 ease-out",
         animationPhase === "enter" && "opacity-0 translate-y-2",
         animationPhase === "entered" && "opacity-100 translate-y-0",
+        id === recentlyResolvedId && "ring-1 ring-border-success-base",
+        id === recentlyReopenedId && "ring-1 ring-border-info-base",
       ]
         .filter(Boolean)
         .join(" "),
@@ -220,7 +265,7 @@ export const Thread = () => {
                   }
                 />
               ) : null}
-              {!resolvedIds.has(comment.id) ? <Comment.Resolve /> : null}
+              <Comment.Resolve />
             </Comment.Actions>
           </Comment>
         ))}
@@ -272,6 +317,10 @@ export const ThreadInteractive = () => {
     },
   ]);
   const [activeReplyId, setActiveReplyId] = React.useState(null);
+  const [editingId, setEditingId] = React.useState(null);
+  const [editingValue, setEditingValue] = React.useState("");
+  const [recentlyResolvedId, setRecentlyResolvedId] = React.useState(null);
+  const [recentlyReopenedId, setRecentlyReopenedId] = React.useState(null);
 
   const handleAddComment = (event) => {
     event.preventDefault();
@@ -318,8 +367,42 @@ export const ThreadInteractive = () => {
   };
 
   const handleResolve = (commentId) => {
-    setResolvedIds((prev) => new Set(prev).add(commentId));
+    setResolvedIds((prev) => {
+      const next = new Set(prev);
+      if (next.has(commentId)) {
+        next.delete(commentId);
+        setRecentlyReopenedId(commentId);
+      } else {
+        next.add(commentId);
+        setRecentlyResolvedId(commentId);
+      }
+      return next;
+    });
     setActiveReplyId((prev) => (prev === commentId ? null : prev));
+    setLastAddedId(commentId);
+  };
+
+  const handleStartEdit = (comment) => {
+    setEditingId(comment.id);
+    setEditingValue(comment.body);
+    setActiveReplyId((prev) => (prev === comment.id ? null : prev));
+  };
+
+  const handleSaveEdit = (commentId) => {
+    const trimmed = editingValue.trim();
+    if (!trimmed) return;
+    setComments((prev) =>
+      prev.map((comment) =>
+        comment.id === commentId ? { ...comment, body: trimmed } : comment
+      )
+    );
+    setEditingId(null);
+    setEditingValue("");
+  };
+
+  const handleCancelEdit = () => {
+    setEditingId(null);
+    setEditingValue("");
   };
 
   React.useEffect(() => {
@@ -338,6 +421,22 @@ export const ThreadInteractive = () => {
     };
   }, [lastAddedId]);
 
+  React.useEffect(() => {
+    if (!recentlyResolvedId) return;
+    const timeout = setTimeout(() => {
+      setRecentlyResolvedId(null);
+    }, 320);
+    return () => clearTimeout(timeout);
+  }, [recentlyResolvedId]);
+
+  React.useEffect(() => {
+    if (!recentlyReopenedId) return;
+    const timeout = setTimeout(() => {
+      setRecentlyReopenedId(null);
+    }, 320);
+    return () => clearTimeout(timeout);
+  }, [recentlyReopenedId]);
+
   const getAnimationProps = (id) => {
     if (id !== lastAddedId) return {};
     return {
@@ -345,6 +444,8 @@ export const ThreadInteractive = () => {
         "transition-all duration-300 ease-out",
         animationPhase === "enter" && "opacity-0 translate-y-2",
         animationPhase === "entered" && "opacity-100 translate-y-0",
+        id === recentlyResolvedId && "ring-1 ring-border-success-base",
+        id === recentlyReopenedId && "ring-1 ring-border-info-base",
       ]
         .filter(Boolean)
         .join(" "),
@@ -371,7 +472,24 @@ export const ThreadInteractive = () => {
             key={comment.id}
             author={comment.author}
             timestamp={comment.timestamp}
-            body={comment.body}
+            body={
+              editingId === comment.id ? (
+                <CommentComposer
+                  value={editingValue}
+                  onChange={(event) => setEditingValue(event.target.value)}
+                  onSubmit={(event) => {
+                    event.preventDefault();
+                    handleSaveEdit(comment.id);
+                  }}
+                  onCancel={handleCancelEdit}
+                  submitLabel="Save"
+                  cancelLabel="Cancel"
+                  rows={3}
+                />
+              ) : (
+                comment.body
+              )
+            }
             avatarProps={{ name: comment.author }}
             resolved={resolvedIds.has(comment.id)}
             {...getAnimationProps(comment.id)}
@@ -410,7 +528,10 @@ export const ThreadInteractive = () => {
                   }
                 />
               ) : null}
-              {!resolvedIds.has(comment.id) ? <Comment.Resolve /> : null}
+              {!resolvedIds.has(comment.id) ? (
+                <Comment.Edit onClick={() => handleStartEdit(comment)} />
+              ) : null}
+              <Comment.Resolve />
             </Comment.Actions>
           </Comment>
         ))}

package/src/demos/CommentComposer.stories.jsx

@@ -46,6 +46,7 @@ const PEOPLE = [
 
 export const WithMentions = () => {
   const [value, setValue] = useState("");
+  const [query, setQuery] = useState("");
 
   return (
     <div className="max-w-xl relative">
@@ -55,8 +56,11 @@ export const WithMentions = () => {
         placeholder="Write a comment..."
         avatarProps={{ name: "Alex Johnson" }}
       >
-        <CommentMention peopleList={PEOPLE} />
+        <CommentMention peopleList={PEOPLE} onQueryChange={setQuery} />
       </CommentComposer>
+      <div className="mt-8 text-xs text-fg-subtle">
+        Mention query: <span className="font-semibold">{query || "—"}</span>
+      </div>
     </div>
   );
 };

package/src/elements/Comment.jsx

@@ -18,6 +18,7 @@ const VARIANT_STYLES = {
 const CommentContext = createContext({
   editable: true,
   onResolve: undefined,
+  resolved: false,
 });
 
 const useCommentContext = () => useContext(CommentContext);
@@ -98,7 +99,7 @@ export const Comment = forwardRef(function Comment(
       : replyItems;
 
   return (
-    <CommentContext.Provider value={{ editable, onResolve }}>
+    <CommentContext.Provider value={{ editable, onResolve, resolved: isResolved }}>
       <div
         ref={ref}
         className={cx(
@@ -200,17 +201,22 @@ export const CommentResolve = ({
   className,
   disabled,
   onClick,
+  label,
   ...props
 }) => {
-  const { editable, onResolve } = useCommentContext();
+  const { editable, onResolve, resolved } = useCommentContext();
   const isDisabled = disabled || !editable;
   const handleClick = onClick ?? onResolve;
+  const isResolved = Boolean(resolved);
+  const actionLabel = label ?? (isResolved ? "Re-open" : "Resolve");
+  const toneClass = isResolved ? "text-fg-info-base" : "text-fg-success-base";
 
   return (
     <button
       type="button"
       className={cx(
-        "text-xs font-semibold text-fg-success-base cursor-pointer",
+        "text-xs font-semibold cursor-pointer",
+        toneClass,
         className
       )}
       onClick={handleClick}
@@ -218,7 +224,7 @@ export const CommentResolve = ({
       aria-disabled={isDisabled}
       {...props}
     >
-      Resolve
+      {actionLabel}
     </button>
   );
 };

package/src/elements/Comment.test.jsx

@@ -114,6 +114,20 @@ describe("Comment", () => {
     expect(screen.queryByText("Hidden body")).not.toBeInTheDocument();
   });
 
+  it("renders a re-open resolve action when resolved", () => {
+    render(
+      <Comment author="Alex" body="Body" resolved>
+        <Comment.Actions>
+          <Comment.Resolve />
+        </Comment.Actions>
+      </Comment>
+    );
+
+    const resolveButton = screen.getByRole("button", { name: "Re-open" });
+    expect(resolveButton).toBeInTheDocument();
+    expect(resolveButton).toHaveClass("text-fg-info-base");
+  });
+
   it("fires onResolve when resolve button is clicked", () => {
     const handleResolve = vi.fn();
     render(

package/src/elements/CommentMention.jsx

@@ -15,12 +15,14 @@ import { useCommentComposer } from "./CommentComposer";
 /**
  * @typedef {{
  *  peopleList: CommentMentionPerson[],
+ *  onQueryChange?: (query: string) => void,
  *  placeholder?: string,
  * }} CommentMentionProps
  */
 
 export const CommentMention = ({
   peopleList = [],
+  onQueryChange,
 }) => {
   const { editor, editorContainerRef } = useCommentComposer();
 
@@ -30,6 +32,7 @@ export const CommentMention = ({
   const [anchorStyle, setAnchorStyle] = useState({ left: 0, top: 0 });
   const menuListRef = useRef(null);
   const rangeRef = useRef(null);
+  const lastQueryRef = useRef("");
 
   const peopleByHandle = useMemo(
     () => new Map(peopleList.map((person) => [person.handle.toLowerCase(), person])),
@@ -61,6 +64,10 @@ export const CommentMention = ({
 
     if (match) {
       const handleQuery = match[1] ?? "";
+      if (onQueryChange && handleQuery !== lastQueryRef.current) {
+        lastQueryRef.current = handleQuery;
+        onQueryChange(handleQuery);
+      }
       setQuery(handleQuery);
       setMenuOpen(true);
       const fromPos = pos - match[0].length;
@@ -82,7 +89,11 @@ export const CommentMention = ({
     setQuery("");
     setRange(null);
     rangeRef.current = null;
-  }, [editor]);
+    if (onQueryChange && lastQueryRef.current !== "") {
+      lastQueryRef.current = "";
+      onQueryChange("");
+    }
+  }, [editor, editorContainerRef, onQueryChange]);
 
   const handleSelectPerson = useCallback(
     (person) => {
@@ -116,8 +127,12 @@ export const CommentMention = ({
       setQuery("");
       setRange(null);
       rangeRef.current = null;
+      if (onQueryChange && lastQueryRef.current !== "") {
+        lastQueryRef.current = "";
+        onQueryChange("");
+      }
     },
-    [editor]
+    [editor, onQueryChange]
   );
 
   useEffect(() => {

package/src/elements/CommentMention.test.jsx

@@ -135,4 +135,16 @@ describe("CommentMention", () => {
 
     expect(focusSpy).toHaveBeenCalled();
   });
+
+  it("emits mention queries when typing", () => {
+    const handleQueryChange = vi.fn();
+    render(
+      <CommentMention
+        peopleList={[{ id: "1", name: "Alex Johnson", handle: "alex" }]}
+        onQueryChange={handleQueryChange}
+      />
+    );
+
+    expect(handleQueryChange).toHaveBeenCalledWith("al");
+  });
 });