@pmate/chat-sdk 0.5.0 → 0.5.1

package/lib/hooks/useMentions.js

@@ -1,10 +1,11 @@
-import { useId, useRef, useState } from "react";
+import { useId, useLayoutEffect, useRef, useState } from "react";
 import { filterMentionCandidates, findMentionQuery, rebaseMentions } from "../mentions/model";
 /** Attach inputProps to a textarea, render MentionMenu with menuProps, and pass
  * getMentions() with the untrimmed value when sending. No business lookup is performed. */
 export function useMentions({ value, onChange, config, disabled = false }) {
     const id = useId();
     const inputRef = useRef(null);
+    const pendingSelection = useRef(null);
     const menuRef = useRef(null);
     const document = useRef({ text: value, mentions: [] });
     const [caret, setCaret] = useState(0);
@@ -17,6 +18,17 @@ export function useMentions({ value, onChange, config, disabled = false }) {
     const query = config && focused && !composing && !disabled && !dismissed ? findMentionQuery(value, caret) : null;
     const candidates = query ? filterMentionCandidates(config.candidates, query.query) : [];
     const index = Math.min(activeIndex, Math.max(0, candidates.length - 1));
+    // Set the caret as soon as the controlled value commits. A later animation
+    // frame can otherwise move it backwards after the user's next keystroke.
+    useLayoutEffect(() => {
+        const pending = pendingSelection.current;
+        if (!pending || pending.text !== value)
+            return;
+        pendingSelection.current = null;
+        inputRef.current?.focus();
+        inputRef.current?.setSelectionRange(pending.position, pending.position);
+        setCaret(pending.position);
+    }, [value]);
     function select(candidate) {
         if (!query)
             return;
@@ -27,13 +39,8 @@ export function useMentions({ value, onChange, config, disabled = false }) {
             mentions: [...rebaseMentions(value, next, mentions), { id: candidate.id, name: candidate.name, start: query.start, end: query.start + insertion.length }].sort((a, b) => a.start - b.start),
         };
         setDismissed(true);
+        pendingSelection.current = { text: next, position: query.start + insertion.length + 1 };
         onChange(next);
-        requestAnimationFrame(() => {
-            const position = query.start + insertion.length + 1;
-            inputRef.current?.focus();
-            inputRef.current?.setSelectionRange(position, position);
-            setCaret(position);
-        });
     }
     function updateSelection(event) {
         inputRef.current = event.currentTarget;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pmate/chat-sdk",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "description": "Cross-platform PMate chat input components, voice input primitives, and ASR helpers",
   "type": "module",
   "main": "./lib/index.js",