@choice-ui/react 1.4.2 → 1.4.5

package/dist/components/context-input/src/extensions/with-mentions.js

@@ -1,20 +1,21 @@
 import { Range, Transforms } from "slate";
 import { convertTextToSlate } from "../utils/slate-converters.js";
 const withMentions = (editor) => {
-  const { isInline, isVoid, insertData } = editor;
-  editor.isInline = (element) => {
+  const customEditor = editor;
+  const { isInline, isVoid, insertData } = customEditor;
+  customEditor.isInline = (element) => {
     return element.type === "mention" ? true : isInline(element);
   };
-  editor.isVoid = (element) => {
+  customEditor.isVoid = (element) => {
     return element.type === "mention" ? true : isVoid(element);
   };
-  editor.insertData = (data) => {
+  customEditor.insertData = (data) => {
     const text = data.getData("text/plain");
     const mentionRegex = /\{\{#([^}]+?)(?:\.text)?#\}\}/;
     if (text && mentionRegex.test(text)) {
       const nodes = convertTextToSlate(text);
-      if (editor.selection && Range.isExpanded(editor.selection)) {
-        Transforms.delete(editor);
+      if (customEditor.selection && Range.isExpanded(customEditor.selection)) {
+        Transforms.delete(customEditor);
       }
       if (nodes.length === 1) {
         const paragraph = nodes[0];
@@ -22,14 +23,14 @@ const withMentions = (editor) => {
           for (const child of paragraph.children) {
             const childNode = child;
             if (childNode.type === "mention") {
-              Transforms.insertNodes(editor, child);
+              Transforms.insertNodes(customEditor, child);
             } else if (typeof childNode.text === "string") {
-              Transforms.insertText(editor, childNode.text);
+              Transforms.insertText(customEditor, childNode.text);
             }
           }
         }
       } else {
-        Transforms.insertNodes(editor, nodes);
+        Transforms.insertNodes(customEditor, nodes);
       }
       return;
     }

package/dist/components/context-input/src/hooks/use-context-input.js

@@ -1,74 +1,115 @@
-import { debounce } from "lodash-es";
-import { useRef, useState, useEffect, useMemo, useCallback } from "react";
+import { useRef, useState, useEffect, useCallback } from "react";
 import { Editor, Transforms } from "slate";
 import { ReactEditor } from "slate-react";
 import { parseTextWithMentions, extractTextWithMentions } from "../utils/text-extraction.js";
 import { extractMentionContext } from "../utils/context-extraction.js";
 const useContextInput = ({ value, onChange, editor, autoFocus }) => {
   const isUpdatingRef = useRef(false);
+  const emptyParagraph = [
+    { type: "paragraph", children: [{ text: "" }] }
+  ];
   const [slateValue, setSlateValue] = useState(() => {
-    if (value == null ? void 0 : value.text) {
-      return parseTextWithMentions(value.text, value.mentions || []);
+    if ((value == null ? void 0 : value.text) != null && value.text !== "") {
+      try {
+        return parseTextWithMentions(value.text, value.mentions || []);
+      } catch {
+        return emptyParagraph;
+      }
     }
-    return [{ type: "paragraph", children: [{ text: "" }] }];
+    return emptyParagraph;
   });
+  const autoFocusTimeoutRef = useRef(null);
   useEffect(() => {
     if (!editor || !value || isUpdatingRef.current) {
       return;
     }
-    const newSlateValue = value.text ? parseTextWithMentions(value.text, value.mentions || []) : [{ type: "paragraph", children: [{ text: "" }] }];
+    let newSlateValue;
+    try {
+      newSlateValue = value.text != null && value.text !== "" ? parseTextWithMentions(value.text, value.mentions || []) : emptyParagraph;
+    } catch {
+      newSlateValue = emptyParagraph;
+    }
     const currentText = extractTextWithMentions(editor.children).text;
     if (currentText !== value.text) {
-      Editor.withoutNormalizing(editor, () => {
-        editor.children = newSlateValue;
-        const endPoint = Editor.end(editor, []);
-        Transforms.select(editor, endPoint);
-        editor.onChange();
-      });
-      if (autoFocus) {
-        setTimeout(() => {
-          ReactEditor.focus(editor);
-        }, 0);
+      try {
+        Editor.withoutNormalizing(editor, () => {
+          editor.children = newSlateValue;
+          let endPoint;
+          try {
+            endPoint = Editor.end(editor, []);
+          } catch {
+            endPoint = { path: [0, 0], offset: 0 };
+          }
+          Transforms.select(editor, endPoint);
+          editor.onChange();
+        });
+        if (autoFocus) {
+          if (autoFocusTimeoutRef.current) {
+            clearTimeout(autoFocusTimeoutRef.current);
+          }
+          autoFocusTimeoutRef.current = setTimeout(() => {
+            try {
+              ReactEditor.focus(editor);
+            } catch {
+            }
+          }, 0);
+        }
+        setSlateValue(newSlateValue);
+      } catch {
       }
-      setSlateValue(newSlateValue);
     }
   }, [value, editor, autoFocus]);
-  const debouncedOnChange = useMemo(
-    () => debounce((newValue) => {
-      onChange == null ? void 0 : onChange(newValue);
-    }, 100),
-    [onChange]
-  );
+  useEffect(() => {
+    return () => {
+      if (autoFocusTimeoutRef.current) {
+        clearTimeout(autoFocusTimeoutRef.current);
+      }
+      if (debounceTimerRef.current) {
+        clearTimeout(debounceTimerRef.current);
+      }
+    };
+  }, []);
+  const debounceTimerRef = useRef(null);
+  const pendingValueRef = useRef(null);
   const handleChange = useCallback(
     (newValue) => {
       isUpdatingRef.current = true;
       setSlateValue(newValue);
-      const { text, mentionsData } = extractTextWithMentions(newValue);
-      const mentions = [];
-      for (const { element, startIndex, endIndex } of mentionsData) {
-        const context = extractMentionContext(text, startIndex, endIndex);
-        mentions.push({
-          item: {
-            id: element.mentionId,
-            type: element.mentionType,
-            label: element.mentionLabel,
-            metadata: element.mentionData
-          },
-          startIndex,
-          endIndex,
-          text: element.mentionLabel,
-          context: {
-            fullContext: context.fullContext,
-            mentionText: context.mentionText
-          }
-        });
+      pendingValueRef.current = newValue;
+      if (debounceTimerRef.current) {
+        clearTimeout(debounceTimerRef.current);
       }
-      debouncedOnChange({ text, mentions });
-      setTimeout(() => {
+      debounceTimerRef.current = setTimeout(() => {
+        const valueToProcess = pendingValueRef.current;
+        if (!valueToProcess || !onChange) {
+          isUpdatingRef.current = false;
+          return;
+        }
+        const { text, mentionsData } = extractTextWithMentions(valueToProcess);
+        const mentions = [];
+        for (const { element, startIndex, endIndex } of mentionsData) {
+          const context = extractMentionContext(text, startIndex, endIndex);
+          mentions.push({
+            item: {
+              id: element.mentionId,
+              type: element.mentionType,
+              label: element.mentionLabel,
+              metadata: element.mentionData
+            },
+            startIndex,
+            endIndex,
+            text: element.mentionLabel,
+            context: {
+              fullContext: context.fullContext,
+              mentionText: context.mentionText
+            }
+          });
+        }
+        onChange({ text, mentions });
         isUpdatingRef.current = false;
-      }, 0);
+      }, 100);
     },
-    [debouncedOnChange]
+    [onChange]
   );
   return {
     slateValue,

package/dist/components/context-input/src/hooks/use-mentions.d.ts

@@ -1,12 +1,16 @@
 import { Range } from 'slate';
-import { MentionItem, MentionTrigger } from '../types';
+import { ContextMentionItemProps, ContextMentionTrigger } from '../types';
 import { ContextEditor } from '../types/editor';
 export interface MentionSearchState {
     index: number;
     isSearching: boolean;
     loading: boolean;
+    position: {
+        x: number;
+        y: number;
+    } | null;
     query: string;
-    suggestions: MentionItem[];
+    suggestions: ContextMentionItemProps[];
     target: Range | null;
     trigger: string;
 }
@@ -14,18 +18,15 @@ export interface UseMentionsProps {
     editor: ContextEditor;
     maxSuggestions?: number;
     mentionPrefix?: string;
-    onMentionSelect?: (mention: MentionItem, trigger: string) => void;
+    onMentionSelect?: (mention: ContextMentionItemProps, trigger: string) => void;
     onSearchClose?: () => void;
-    triggers: MentionTrigger[];
+    triggers: ContextMentionTrigger[];
 }
 export declare function useMentions({ editor, triggers, maxSuggestions, mentionPrefix, onMentionSelect, onSearchClose, }: UseMentionsProps): {
     searchState: MentionSearchState;
-    insertMention: (mention: MentionItem) => void;
-    handleKeyDown: (event: React.KeyboardEvent) => boolean;
-    getSuggestionPosition: () => {
-        x: number;
-        y: number;
-    } | null;
+    checkMentionSearch: () => void;
+    insertMention: (mention: ContextMentionItemProps) => void;
+    handleKeyDown: (event: import('react').KeyboardEvent<Element>) => boolean;
     closeMentionSearch: () => void;
     selectMention: (index: number) => void;
     selectNextMention: () => void;

package/dist/components/context-input/src/hooks/use-mentions.js

@@ -1,6 +1,7 @@
-import { useState, useMemo, useCallback, useEffect } from "react";
+import { useState, useMemo, useRef, useEffect } from "react";
 import { Range, Editor, Transforms } from "slate";
 import { ReactEditor } from "slate-react";
+import { useEventCallback } from "usehooks-ts";
 import { insertWithSmartSpacing } from "../utils/mention-spacing.js";
 function useMentions({
   editor,
@@ -17,7 +18,8 @@ function useMentions({
     target: null,
     index: 0,
     suggestions: [],
-    loading: false
+    loading: false,
+    position: null
   });
   const triggerMap = useMemo(() => {
     const map = /* @__PURE__ */ new Map();
@@ -26,29 +28,44 @@ function useMentions({
     });
     return map;
   }, [triggers]);
-  const searchMentions = useCallback(
-    async (query, trigger, triggerConfig) => {
-      setSearchState((prev) => ({ ...prev, loading: true }));
-      try {
-        const results = await triggerConfig.onSearch(query, trigger);
-        const limitedResults = results.slice(0, maxSuggestions);
-        setSearchState((prev) => ({
-          ...prev,
-          suggestions: limitedResults,
-          loading: false
-        }));
-      } catch (error) {
-        console.error("Failed to search mentions:", error);
-        setSearchState((prev) => ({
-          ...prev,
-          suggestions: [],
-          loading: false
-        }));
+  const searchTimeoutRef = useRef(null);
+  useEffect(() => {
+    return () => {
+      if (searchTimeoutRef.current) {
+        clearTimeout(searchTimeoutRef.current);
+      }
+    };
+  }, []);
+  const searchMentions = useEventCallback(
+    (query, trigger, triggerConfig) => {
+      if (searchTimeoutRef.current) {
+        clearTimeout(searchTimeoutRef.current);
       }
-    },
-    [maxSuggestions]
+      searchTimeoutRef.current = setTimeout(async () => {
+        setSearchState((prev) => ({ ...prev, loading: true }));
+        try {
+          const results = await triggerConfig.onSearch(query, trigger);
+          const limitedResults = results.slice(0, maxSuggestions);
+          setSearchState((prev) => ({
+            ...prev,
+            suggestions: limitedResults,
+            loading: false
+          }));
+        } catch (error) {
+          console.error("Failed to search mentions:", error);
+          setSearchState((prev) => ({
+            ...prev,
+            suggestions: [],
+            loading: false
+          }));
+        }
+      }, 150);
+    }
   );
-  const checkMentionSearch = useCallback(() => {
+  const checkMentionSearch = useEventCallback(() => {
+    if (triggers.length === 0) {
+      return;
+    }
     const { selection } = editor;
     if (!selection || !Range.isCollapsed(selection)) {
       setSearchState((prev) => {
@@ -112,12 +129,23 @@ function useMentions({
           }
         }
         const target = Editor.range(editor, triggerPoint, start);
+        let position = null;
+        try {
+          const domRange = ReactEditor.toDOMRange(editor, target);
+          const rect = domRange.getBoundingClientRect();
+          position = {
+            x: rect.left,
+            y: rect.bottom + 4
+          };
+        } catch {
+        }
         setSearchState((prev) => ({
           ...prev,
           isSearching: true,
           trigger: triggerChar,
           query: queryText,
           target,
+          position,
           index: 0
         }));
         searchMentions(queryText, triggerChar, triggerConfig);
@@ -130,95 +158,76 @@ function useMentions({
       }
       return prev;
     });
-  }, [editor, searchMentions, triggerMap]);
-  const insertMention = useCallback(
-    (mention) => {
-      const { target, trigger } = searchState;
-      if (!target) return;
-      Transforms.select(editor, target);
-      Transforms.delete(editor);
-      insertWithSmartSpacing(editor, () => {
-        const mentionElement = {
-          type: "mention",
-          mentionType: mention.type,
-          mentionId: mention.id,
-          mentionLabel: mention.label,
-          mentionPrefix,
-          mentionData: mention.metadata,
-          children: [{ text: "" }]
-        };
-        Transforms.insertNodes(editor, mentionElement);
-        Transforms.move(editor);
-      });
-      setSearchState((prev) => ({ ...prev, isSearching: false }));
-      onMentionSelect == null ? void 0 : onMentionSelect(mention, trigger);
-      onSearchClose == null ? void 0 : onSearchClose();
-      ReactEditor.focus(editor);
-    },
-    [editor, searchState, onMentionSelect, onSearchClose]
-  );
-  const handleKeyDown = useCallback(
-    (event) => {
-      if (!searchState.isSearching || searchState.suggestions.length === 0) {
-        return false;
-      }
-      const { suggestions, index } = searchState;
-      switch (event.key) {
-        case "ArrowDown":
-          event.preventDefault();
-          setSearchState((prev) => ({
-            ...prev,
-            index: (prev.index + 1) % suggestions.length
-          }));
-          return true;
-        case "ArrowUp":
-          event.preventDefault();
-          setSearchState((prev) => ({
-            ...prev,
-            index: prev.index === 0 ? suggestions.length - 1 : prev.index - 1
-          }));
-          return true;
-        case "Tab":
-        case "Enter": {
-          event.preventDefault();
-          const selectedMention = suggestions[index];
-          if (selectedMention) {
-            insertMention(selectedMention);
-          }
-          return true;
-        }
-        case "Escape":
-          event.preventDefault();
-          setSearchState((prev) => ({ ...prev, isSearching: false }));
-          return true;
+  });
+  const insertMention = useEventCallback((mention) => {
+    const { target, trigger } = searchState;
+    if (!target) return;
+    Transforms.select(editor, target);
+    Transforms.delete(editor);
+    insertWithSmartSpacing(editor, () => {
+      const mentionElement = {
+        type: "mention",
+        mentionType: mention.type,
+        mentionId: mention.id,
+        mentionLabel: mention.label,
+        mentionPrefix,
+        mentionData: mention.metadata,
+        children: [{ text: "" }]
+      };
+      Transforms.insertNodes(editor, mentionElement);
+      Transforms.move(editor);
+    });
+    const currentSelection = editor.selection;
+    setSearchState((prev) => ({ ...prev, isSearching: false }));
+    onMentionSelect == null ? void 0 : onMentionSelect(mention, trigger);
+    onSearchClose == null ? void 0 : onSearchClose();
+    requestAnimationFrame(() => {
+      if (currentSelection) {
+        Transforms.select(editor, currentSelection);
       }
+      ReactEditor.focus(editor);
+    });
+  });
+  const handleKeyDown = useEventCallback((event) => {
+    if (!searchState.isSearching || searchState.suggestions.length === 0) {
       return false;
-    },
-    [searchState, insertMention]
-  );
-  const getSuggestionPosition = useCallback(() => {
-    if (!searchState.isSearching || !searchState.target) {
-      return null;
     }
-    try {
-      const domRange = ReactEditor.toDOMRange(editor, searchState.target);
-      const rect = domRange.getBoundingClientRect();
-      return {
-        x: rect.left,
-        y: rect.bottom + window.scrollY + 4
-        // 添加4px间距
-      };
-    } catch {
-      return null;
+    const { suggestions, index } = searchState;
+    switch (event.key) {
+      case "ArrowDown":
+        event.preventDefault();
+        setSearchState((prev) => ({
+          ...prev,
+          index: (prev.index + 1) % suggestions.length
+        }));
+        return true;
+      case "ArrowUp":
+        event.preventDefault();
+        setSearchState((prev) => ({
+          ...prev,
+          index: prev.index === 0 ? suggestions.length - 1 : prev.index - 1
+        }));
+        return true;
+      case "Tab":
+      case "Enter": {
+        event.preventDefault();
+        const selectedMention = suggestions[index];
+        if (selectedMention) {
+          insertMention(selectedMention);
+        }
+        return true;
+      }
+      case "Escape":
+        event.preventDefault();
+        setSearchState((prev) => ({ ...prev, isSearching: false }));
+        return true;
     }
-  }, [editor, searchState.isSearching, searchState.target]);
-  useEffect(() => {
-    if (triggers.length === 0) {
-      return;
+    return false;
+  });
+  const closeMentionSearch = useEventCallback(() => {
+    if (searchTimeoutRef.current) {
+      clearTimeout(searchTimeoutRef.current);
     }
-    checkMentionSearch();
-  }, [checkMentionSearch, triggers.length]);
-  const closeMentionSearch = useCallback(() => {
     setSearchState({
       isSearching: false,
       trigger: "",
@@ -226,33 +235,43 @@ function useMentions({
       target: null,
       index: 0,
       suggestions: [],
-      loading: false
+      loading: false,
+      position: null
     });
-  }, []);
+  });
+  const selectMention = useEventCallback((index) => {
+    const mention = searchState.suggestions[index];
+    if (mention) {
+      insertMention(mention);
+    }
+  });
+  const selectNextMention = useEventCallback(() => {
+    setSearchState((prev) => {
+      if (prev.suggestions.length === 0) return prev;
+      return {
+        ...prev,
+        index: (prev.index + 1) % prev.suggestions.length
+      };
+    });
+  });
+  const selectPreviousMention = useEventCallback(() => {
+    setSearchState((prev) => {
+      if (prev.suggestions.length === 0) return prev;
+      return {
+        ...prev,
+        index: prev.index === 0 ? prev.suggestions.length - 1 : prev.index - 1
+      };
+    });
+  });
   return {
     searchState,
+    checkMentionSearch,
     insertMention,
     handleKeyDown,
-    getSuggestionPosition,
     closeMentionSearch,
-    selectMention: (index) => {
-      const mention = searchState.suggestions[index];
-      if (mention) {
-        insertMention(mention);
-      }
-    },
-    selectNextMention: () => {
-      setSearchState((prev) => ({
-        ...prev,
-        index: (prev.index + 1) % prev.suggestions.length
-      }));
-    },
-    selectPreviousMention: () => {
-      setSearchState((prev) => ({
-        ...prev,
-        index: prev.index === 0 ? prev.suggestions.length - 1 : prev.index - 1
-      }));
-    }
+    selectMention,
+    selectNextMention,
+    selectPreviousMention
   };
 }
 export {

package/dist/components/context-input/src/index.d.ts

@@ -1,6 +1,3 @@
 export { ContextInput } from './context-input';
-export * from './components';
-export * from './hooks';
-export * from './utils';
-export type * from './types';
-export { contextInputTv } from './tv';
+export { InsertMentionsButton, CopyButton } from './components';
+export type { ContextInputProps, ContextInputValue, ContextMentionElement, ContextInputRef, ContextMentionProps, ContextMentionItemProps, ContextMentionTrigger, } from './types';

package/dist/components/context-input/src/types.d.ts

@@ -1,11 +1,11 @@
 import { ComponentType } from 'react';
 import { RenderElementProps } from 'slate-react';
-export interface MentionProps extends RenderElementProps {
+export interface ContextMentionProps extends RenderElementProps {
     mentionPrefix?: string;
     renderMention?: (mention: MentionMatch) => React.ReactNode;
     variant?: "default" | "light" | "dark" | "reset";
 }
-export interface MentionItem {
+export interface ContextMentionItemProps {
     description?: string;
     id: string;
     label: string;
@@ -19,7 +19,7 @@ export interface MentionMatch {
         mentionText: string;
     };
     endIndex: number;
-    item: MentionItem;
+    item: ContextMentionItemProps;
     startIndex: number;
     text: string;
 }
@@ -27,12 +27,12 @@ export interface ContextInputValue {
     mentions: MentionMatch[];
     text: string;
 }
-export interface MentionTrigger {
+export interface ContextMentionTrigger {
     allowSpaceInQuery?: boolean;
     char: string;
     mentionRegex?: RegExp;
-    onSearch: (query: string, char: string) => Promise<MentionItem[]> | MentionItem[];
-    renderItem?: (item: MentionItem, isSelected: boolean) => React.ReactNode;
+    onSearch: (query: string, char: string) => Promise<ContextMentionItemProps[]> | ContextMentionItemProps[];
+    renderItem?: (item: ContextMentionItemProps, isSelected: boolean) => React.ReactNode;
 }
 export interface ContextInputProps {
     afterElement?: React.ReactNode;
@@ -40,7 +40,7 @@ export interface ContextInputProps {
     beforeElement?: React.ReactNode;
     children?: React.ReactNode;
     className?: string;
-    customMentionComponent?: ComponentType<MentionProps>;
+    customMentionComponent?: ComponentType<ContextMentionProps>;
     disabled?: boolean;
     maxLength?: number;
     maxSuggestions?: number;
@@ -53,15 +53,15 @@ export interface ContextInputProps {
     onCompositionStart?: (event: React.CompositionEvent) => void;
     onFocus?: () => void;
     onKeyDown?: (event: React.KeyboardEvent) => void;
-    onMentionSelect?: (mention: MentionItem, trigger: string) => void;
+    onMentionSelect?: (mention: ContextMentionItemProps, trigger: string) => void;
     placeholder?: string;
     readOnly?: boolean;
     renderMention?: (mention: MentionMatch) => React.ReactNode;
-    renderSuggestion?: (item: MentionItem, isSelected: boolean) => React.ReactNode;
+    renderSuggestion?: (item: ContextMentionItemProps, isSelected: boolean) => React.ReactNode;
     root?: HTMLElement | null;
     size?: "default" | "large";
     suggestionListClassName?: string;
-    triggers?: MentionTrigger[];
+    triggers?: ContextMentionTrigger[];
     value?: ContextInputValue;
     variant?: "default" | "light" | "dark" | "reset";
 }
@@ -69,11 +69,11 @@ export interface ContextMentionElement {
     children: [{
         text: "";
     }];
-    mentionData?: MentionItem["metadata"];
+    mentionData?: ContextMentionItemProps["metadata"];
     mentionId: string;
     mentionLabel: string;
     mentionPrefix?: string;
-    mentionType: MentionItem["type"];
+    mentionType: ContextMentionItemProps["type"];
     type: "mention";
 }
 export interface ContextParagraphElement {