@relevaince/mentions 0.2.1 → 0.3.0

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";
@@ -40,6 +41,11 @@ var MentionNode = Node.create({
         default: null,
         parseHTML: (element) => element.getAttribute("data-type"),
         renderHTML: (attributes) => ({ "data-type": attributes.entityType })
+      },
+      rootLabel: {
+        default: null,
+        parseHTML: (element) => element.getAttribute("data-root-label"),
+        renderHTML: (attributes) => attributes.rootLabel ? { "data-root-label": attributes.rootLabel } : {}
       }
     };
   },
@@ -50,13 +56,14 @@ var MentionNode = Node.create({
     const entityType = node.attrs.entityType;
     const label = node.attrs.label;
     const prefix = DEFAULT_PREFIXES[entityType] ?? "@";
+    const display = `${prefix}${label}`;
     return [
       "span",
       mergeAttributes(HTMLAttributes, {
         "data-mention": "",
         class: "mention-chip"
       }),
-      `${prefix}${label}`
+      display
     ];
   },
   renderText({ node }) {
@@ -108,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;
@@ -136,7 +144,8 @@ function createSuggestionExtension(triggers, callbacksRef) {
               attrs: {
                 id: attrs.id,
                 label: attrs.label,
-                entityType: attrs.entityType
+                entityType: attrs.entityType,
+                rootLabel: attrs.rootLabel ?? null
               }
             },
             { type: "text", text: " " }
@@ -238,7 +247,10 @@ function serializeParagraph(node) {
   if (!node.content) return "";
   return node.content.map((child) => {
     if (child.type === "mention") {
-      const { id, label } = child.attrs ?? {};
+      const { id, label, rootLabel } = child.attrs ?? {};
+      if (rootLabel != null && rootLabel !== "") {
+        return `@${rootLabel}[${label}](${id})`;
+      }
       return `@[${label}](${id})`;
     }
     return child.text ?? "";
@@ -284,7 +296,7 @@ function extractParagraphText(node) {
 }
 
 // src/core/markdownParser.ts
-var MENTION_RE = /@\[([^\]]+)\]\((?:([^:)]+):)?([^)]+)\)/g;
+var MENTION_RE = /@(?:([^\[]+)\[)?\[([^\]]+)\]\((?:([^:)]+):)?([^)]+)\)/g;
 function parseFromMarkdown(markdown) {
   const lines = markdown.split("\n");
   const content = lines.map((line) => ({
@@ -300,9 +312,10 @@ function parseLine(line) {
   let match;
   while ((match = MENTION_RE.exec(line)) !== null) {
     const fullMatch = match[0];
-    const label = match[1];
-    const entityType = match[2] ?? "unknown";
-    const id = match[3];
+    const rootLabel = match[1] ?? null;
+    const label = match[2];
+    const entityType = match[3] ?? "unknown";
+    const id = match[4];
     if (match.index > lastIndex) {
       nodes.push({
         type: "text",
@@ -314,7 +327,8 @@ function parseLine(line) {
       attrs: {
         id,
         label,
-        entityType
+        entityType,
+        rootLabel
       }
     });
     lastIndex = match.index + fullMatch.length;
@@ -330,6 +344,13 @@ function parseLine(line) {
   }
   return nodes;
 }
+function extractFromMarkdown(markdown) {
+  const doc = parseFromMarkdown(markdown);
+  return {
+    tokens: extractTokens(doc),
+    plainText: extractPlainText(doc)
+  };
+}
 
 // src/hooks/useMentionsEditor.ts
 function buildOutput(editor) {
@@ -343,6 +364,7 @@ function buildOutput(editor) {
 function createSubmitExtension(onSubmitRef, clearOnSubmitRef) {
   return Extension2.create({
     name: "submitShortcut",
+    priority: 150,
     addKeyboardShortcuts() {
       return {
         "Mod-Enter": () => {
@@ -358,22 +380,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;
-        }
-      };
+        })
+      ];
     }
   });
 }
@@ -426,10 +461,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,
@@ -497,10 +534,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,
@@ -537,7 +581,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]
   );
@@ -546,12 +594,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);
       }
     },
@@ -593,10 +654,12 @@ function useSuggestion(providers) {
         return;
       }
       if (commandRef.current) {
+        const rootLabel = current.breadcrumbs.length > 0 ? current.breadcrumbs[0].label : selected.rootLabel ?? null;
         commandRef.current({
           id: selected.id,
           label: selected.label,
-          entityType: selected.type
+          entityType: selected.type,
+          rootLabel
         });
       }
     },
@@ -625,6 +688,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;
@@ -684,13 +759,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) {
@@ -730,10 +806,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"]');
@@ -741,6 +836,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",
     {
@@ -765,6 +889,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;
@@ -847,7 +989,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",
@@ -871,6 +1014,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
             }
           )
@@ -881,6 +1028,7 @@ var MentionsInput = forwardRef(
 );
 export {
   MentionsInput,
+  extractFromMarkdown,
   parseFromMarkdown,
   serializeToMarkdown
 };