@relevaince/mentions 0.2.2 → 0.3.1

package/dist/index.mjs

@@ -8,6 +8,7 @@ import { useEditor } from "@tiptap/react";
 import StarterKit from "@tiptap/starter-kit";
 import Placeholder from "@tiptap/extension-placeholder";
 import { Extension as Extension2 } from "@tiptap/core";
+import { Plugin as Plugin2, PluginKey as PluginKey2 } from "@tiptap/pm/state";
 
 // src/core/mentionExtension.ts
 import { mergeAttributes, Node } from "@tiptap/core";
@@ -114,6 +115,7 @@ var suggestionPluginKey = new PluginKey("mentionSuggestion");
 function createSuggestionExtension(triggers, callbacksRef) {
   return Extension.create({
     name: "mentionSuggestion",
+    priority: 200,
     addProseMirrorPlugins() {
       const editor = this.editor;
       let active = false;
@@ -297,10 +299,10 @@ function extractParagraphText(node) {
 var MENTION_RE = /@(?:([^\[]+)\[)?\[([^\]]+)\]\((?:([^:)]+):)?([^)]+)\)/g;
 function parseFromMarkdown(markdown) {
   const lines = markdown.split("\n");
-  const content = lines.map((line) => ({
-    type: "paragraph",
-    content: parseLine(line)
-  }));
+  const content = lines.map((line) => {
+    const children = parseLine(line);
+    return children.length > 0 ? { type: "paragraph", content: children } : { type: "paragraph" };
+  });
   return { type: "doc", content };
 }
 function parseLine(line) {
@@ -337,11 +339,15 @@ function parseLine(line) {
       text: line.slice(lastIndex)
     });
   }
-  if (nodes.length === 0) {
-    nodes.push({ type: "text", text: "" });
-  }
   return nodes;
 }
+function extractFromMarkdown(markdown) {
+  const doc = parseFromMarkdown(markdown);
+  return {
+    tokens: extractTokens(doc),
+    plainText: extractPlainText(doc)
+  };
+}
 
 // src/hooks/useMentionsEditor.ts
 function buildOutput(editor) {
@@ -355,6 +361,7 @@ function buildOutput(editor) {
 function createSubmitExtension(onSubmitRef, clearOnSubmitRef) {
   return Extension2.create({
     name: "submitShortcut",
+    priority: 150,
     addKeyboardShortcuts() {
       return {
         "Mod-Enter": () => {
@@ -370,22 +377,35 @@ function createSubmitExtension(onSubmitRef, clearOnSubmitRef) {
     }
   });
 }
+var enterSubmitPluginKey = new PluginKey2("enterSubmit");
 function createEnterExtension(onSubmitRef, clearOnSubmitRef) {
   return Extension2.create({
     name: "enterSubmit",
-    priority: 50,
-    addKeyboardShortcuts() {
-      return {
-        Enter: () => {
-          if (onSubmitRef.current) {
-            onSubmitRef.current(buildOutput(this.editor));
-            if (clearOnSubmitRef.current) {
-              this.editor.commands.clearContent(true);
+    priority: 150,
+    addProseMirrorPlugins() {
+      const editor = this.editor;
+      return [
+        new Plugin2({
+          key: enterSubmitPluginKey,
+          props: {
+            handleKeyDown(_view, event) {
+              if (event.key !== "Enter") return false;
+              if (event.shiftKey) {
+                editor.commands.splitBlock();
+                return true;
+              }
+              if (event.metaKey || event.ctrlKey) return false;
+              if (onSubmitRef.current) {
+                onSubmitRef.current(buildOutput(editor));
+                if (clearOnSubmitRef.current) {
+                  editor.commands.clearContent(true);
+                }
+              }
+              return true;
             }
           }
-          return true;
-        }
-      };
+        })
+      ];
     }
   });
 }
@@ -438,10 +458,12 @@ function useMentionsEditor({
         bulletList: false,
         orderedList: false,
         listItem: false,
-        horizontalRule: false
+        horizontalRule: false,
+        hardBreak: false
       }),
       Placeholder.configure({
-        placeholder: placeholder ?? "Type a message..."
+        placeholder: placeholder ?? "Type a message...",
+        showOnlyCurrent: false
       }),
       MentionNode,
       suggestionExtension,
@@ -509,10 +531,17 @@ function useSuggestion(providers) {
   );
   const providerRef = useRef2(null);
   const fetchItems = useCallback2(
-    async (provider, query, parent) => {
+    async (provider, query, parent, useSearchAll) => {
       setUIState((prev) => ({ ...prev, loading: true, state: "loading" }));
       try {
-        const items = parent && provider.getChildren ? await provider.getChildren(parent, query) : await provider.getRootItems(query);
+        let items;
+        if (useSearchAll && provider.searchAll) {
+          items = await provider.searchAll(query);
+        } else if (parent && provider.getChildren) {
+          items = await provider.getChildren(parent, query);
+        } else {
+          items = await provider.getRootItems(query);
+        }
         setUIState((prev) => ({
           ...prev,
           items,
@@ -549,7 +578,11 @@ function useSuggestion(providers) {
         trigger: props.trigger,
         query: props.query
       });
-      fetchItems(provider, props.query);
+      if (props.query.trim() && provider.searchAll) {
+        fetchItems(provider, props.query, void 0, true);
+      } else {
+        fetchItems(provider, props.query);
+      }
     },
     [fetchItems]
   );
@@ -558,12 +591,25 @@ function useSuggestion(providers) {
       const provider = providerRef.current;
       if (!provider) return;
       commandRef.current = props.command;
-      setUIState((prev) => ({
-        ...prev,
-        clientRect: props.clientRect,
-        query: props.query
-      }));
-      if (stateRef.current.breadcrumbs.length === 0) {
+      const current = stateRef.current;
+      if (current.breadcrumbs.length > 0) {
+        setUIState((prev) => ({
+          ...prev,
+          breadcrumbs: [],
+          clientRect: props.clientRect,
+          query: props.query,
+          activeIndex: 0
+        }));
+      } else {
+        setUIState((prev) => ({
+          ...prev,
+          clientRect: props.clientRect,
+          query: props.query
+        }));
+      }
+      if (props.query.trim() && provider.searchAll) {
+        fetchItems(provider, props.query, void 0, true);
+      } else {
         fetchItems(provider, props.query);
       }
     },
@@ -605,7 +651,7 @@ function useSuggestion(providers) {
         return;
       }
       if (commandRef.current) {
-        const rootLabel = current.breadcrumbs.length > 0 ? current.breadcrumbs[0].label : null;
+        const rootLabel = current.breadcrumbs.length > 0 ? current.breadcrumbs[0].label : selected.rootLabel ?? null;
         commandRef.current({
           id: selected.id,
           label: selected.label,
@@ -639,6 +685,18 @@ function useSuggestion(providers) {
   const close = useCallback2(() => {
     setUIState(IDLE_STATE);
   }, []);
+  const searchNested = useCallback2(
+    (query) => {
+      const provider = providerRef.current;
+      if (!provider) return;
+      const current = stateRef.current;
+      const parent = current.breadcrumbs[current.breadcrumbs.length - 1];
+      if (parent) {
+        fetchItems(provider, query, parent);
+      }
+    },
+    [fetchItems]
+  );
   const onKeyDown = useCallback2(
     ({ event }) => {
       const current = stateRef.current;
@@ -698,13 +756,14 @@ function useSuggestion(providers) {
     navigateDown,
     select,
     goBack,
-    close
+    close,
+    searchNested
   };
   return { uiState, actions, callbacksRef };
 }
 
 // src/components/SuggestionList.tsx
-import { useEffect as useEffect2, useRef as useRef3 } from "react";
+import { useEffect as useEffect2, useRef as useRef3, useState as useState2 } from "react";
 
 // src/utils/ariaHelpers.ts
 function comboboxAttrs(expanded, listboxId) {
@@ -744,10 +803,29 @@ function SuggestionList({
   onSelect,
   onHover,
   onGoBack,
+  onSearchNested,
+  onNavigateUp,
+  onNavigateDown,
+  onClose,
   renderItem
 }) {
   const listRef = useRef3(null);
+  const searchInputRef = useRef3(null);
   const depth = breadcrumbs.length;
+  const [nestedQuery, setNestedQuery] = useState2("");
+  const breadcrumbKey = breadcrumbs.map((b) => b.id).join("/");
+  const prevBreadcrumbKey = useRef3(breadcrumbKey);
+  useEffect2(() => {
+    if (prevBreadcrumbKey.current !== breadcrumbKey) {
+      setNestedQuery("");
+      prevBreadcrumbKey.current = breadcrumbKey;
+    }
+  }, [breadcrumbKey]);
+  useEffect2(() => {
+    if (breadcrumbs.length > 0 && searchInputRef.current) {
+      requestAnimationFrame(() => searchInputRef.current?.focus());
+    }
+  }, [breadcrumbKey, breadcrumbs.length]);
   useEffect2(() => {
     if (!listRef.current) return;
     const active = listRef.current.querySelector('[aria-selected="true"]');
@@ -755,6 +833,35 @@ function SuggestionList({
   }, [activeIndex]);
   const style = usePopoverPosition(clientRect);
   if (items.length === 0 && !loading) return null;
+  const handleSearchKeyDown = (e) => {
+    switch (e.key) {
+      case "ArrowDown":
+        e.preventDefault();
+        onNavigateDown?.();
+        break;
+      case "ArrowUp":
+        e.preventDefault();
+        onNavigateUp?.();
+        break;
+      case "Enter": {
+        e.preventDefault();
+        e.stopPropagation();
+        const selectedItem = items[activeIndex];
+        if (selectedItem) onSelect(selectedItem);
+        break;
+      }
+      case "Escape":
+        e.preventDefault();
+        onClose?.();
+        break;
+      case "Backspace":
+        if (nestedQuery === "") {
+          e.preventDefault();
+          onGoBack();
+        }
+        break;
+    }
+  };
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -779,6 +886,24 @@ function SuggestionList({
             crumb.label
           ] }, crumb.id))
         ] }),
+        breadcrumbs.length > 0 && /* @__PURE__ */ jsx("div", { "data-suggestion-search": "", children: /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref: searchInputRef,
+            type: "text",
+            "data-suggestion-search-input": "",
+            placeholder: "Search...",
+            value: nestedQuery,
+            onChange: (e) => {
+              const q = e.target.value;
+              setNestedQuery(q);
+              onSearchNested?.(q);
+            },
+            onKeyDown: handleSearchKeyDown,
+            autoComplete: "off",
+            spellCheck: false
+          }
+        ) }),
         loading && /* @__PURE__ */ jsx("div", { "data-suggestion-loading": "", children: "Loading..." }),
         !loading && /* @__PURE__ */ jsx("div", { ...listboxAttrs(LISTBOX_ID, `${trigger ?? ""} suggestions`), children: items.map((item, index) => {
           const isActive = index === activeIndex;
@@ -861,7 +986,8 @@ var MentionsInput = forwardRef(
       [clear, setContent, focus]
     );
     const isExpanded = uiState.state !== "idle";
-    const handleHover = useCallback3((_index) => {
+    const handleHover = useCallback3((index) => {
+      void index;
     }, []);
     return /* @__PURE__ */ jsxs2(
       "div",
@@ -885,6 +1011,10 @@ var MentionsInput = forwardRef(
               onSelect: (item) => actions.select(item),
               onHover: handleHover,
               onGoBack: actions.goBack,
+              onSearchNested: actions.searchNested,
+              onNavigateUp: actions.navigateUp,
+              onNavigateDown: actions.navigateDown,
+              onClose: actions.close,
               renderItem
             }
           )
@@ -895,6 +1025,7 @@ var MentionsInput = forwardRef(
 );
 export {
   MentionsInput,
+  extractFromMarkdown,
   parseFromMarkdown,
   serializeToMarkdown
 };