@relevaince/mentions 0.1.0

package/dist/index.js

@@ -0,0 +1,897 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  MentionsInput: () => MentionsInput,
+  parseFromMarkdown: () => parseFromMarkdown,
+  serializeToMarkdown: () => serializeToMarkdown
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/components/MentionsInput.tsx
+var import_react5 = require("react");
+var import_react6 = require("@tiptap/react");
+
+// src/hooks/useMentionsEditor.ts
+var import_react = require("react");
+var import_react2 = require("@tiptap/react");
+var import_starter_kit = __toESM(require("@tiptap/starter-kit"));
+var import_core3 = require("@tiptap/core");
+
+// src/core/mentionExtension.ts
+var import_core = require("@tiptap/core");
+var DEFAULT_PREFIXES = {
+  workspace: "@",
+  contract: "@",
+  file: "#",
+  web: ":"
+};
+var MentionNode = import_core.Node.create({
+  name: "mention",
+  group: "inline",
+  inline: true,
+  atom: true,
+  selectable: true,
+  draggable: false,
+  addAttributes() {
+    return {
+      id: {
+        default: null,
+        parseHTML: (element) => element.getAttribute("data-id"),
+        renderHTML: (attributes) => ({ "data-id": attributes.id })
+      },
+      label: {
+        default: null,
+        parseHTML: (element) => element.getAttribute("data-label"),
+        renderHTML: (attributes) => ({ "data-label": attributes.label })
+      },
+      entityType: {
+        default: null,
+        parseHTML: (element) => element.getAttribute("data-type"),
+        renderHTML: (attributes) => ({ "data-type": attributes.entityType })
+      }
+    };
+  },
+  parseHTML() {
+    return [{ tag: "span[data-mention]" }];
+  },
+  renderHTML({ node, HTMLAttributes }) {
+    const entityType = node.attrs.entityType;
+    const label = node.attrs.label;
+    const prefix = DEFAULT_PREFIXES[entityType] ?? "@";
+    return [
+      "span",
+      (0, import_core.mergeAttributes)(HTMLAttributes, {
+        "data-mention": "",
+        class: "mention-chip"
+      }),
+      `${prefix}${label}`
+    ];
+  },
+  renderText({ node }) {
+    const entityType = node.attrs.entityType;
+    const label = node.attrs.label;
+    const prefix = DEFAULT_PREFIXES[entityType] ?? "@";
+    return `${prefix}${label}`;
+  },
+  addKeyboardShortcuts() {
+    return {
+      Backspace: () => this.editor.commands.command(({ tr, state }) => {
+        let isMention = false;
+        const { selection } = state;
+        const { empty, anchor } = selection;
+        if (!empty) return false;
+        state.doc.nodesBetween(anchor - 1, anchor, (node, pos) => {
+          if (node.type.name === this.name) {
+            isMention = true;
+            tr.insertText("", pos, pos + node.nodeSize);
+          }
+        });
+        return isMention;
+      })
+    };
+  }
+});
+
+// src/core/suggestionPlugin.ts
+var import_core2 = require("@tiptap/core");
+var import_state = require("@tiptap/pm/state");
+function detectTrigger(text, cursorPos, docStartPos, triggers) {
+  const relCursor = cursorPos - docStartPos;
+  const before = text.slice(0, relCursor);
+  for (let i = before.length - 1; i >= 0; i--) {
+    const ch = before[i];
+    if (ch === "\n") return null;
+    for (const trigger of triggers) {
+      if (before.substring(i, i + trigger.length) === trigger) {
+        if (i === 0 || /\s/.test(before[i - 1])) {
+          const query = before.slice(i + trigger.length);
+          return { trigger, query, from: docStartPos + i, to: cursorPos };
+        }
+      }
+    }
+  }
+  return null;
+}
+var suggestionPluginKey = new import_state.PluginKey("mentionSuggestion");
+function createSuggestionExtension(triggers, callbacksRef) {
+  return import_core2.Extension.create({
+    name: "mentionSuggestion",
+    addProseMirrorPlugins() {
+      const editor = this.editor;
+      let active = false;
+      let lastQuery = null;
+      let lastTrigger = null;
+      const getClientRect = (view, from) => {
+        return () => {
+          try {
+            const coords = view.coordsAtPos(from);
+            return new DOMRect(
+              coords.left,
+              coords.top,
+              0,
+              coords.bottom - coords.top
+            );
+          } catch {
+            return null;
+          }
+        };
+      };
+      const makeCommand = (range) => {
+        return (attrs) => {
+          editor.chain().focus().insertContentAt(range, [
+            {
+              type: "mention",
+              attrs: {
+                id: attrs.id,
+                label: attrs.label,
+                entityType: attrs.entityType
+              }
+            },
+            { type: "text", text: " " }
+          ]).run();
+        };
+      };
+      const plugin = new import_state.Plugin({
+        key: suggestionPluginKey,
+        props: {
+          handleKeyDown(_view, event) {
+            if (!active) return false;
+            return callbacksRef.current.onKeyDown({ event });
+          }
+        },
+        view() {
+          return {
+            update(view, _prevState) {
+              const { state } = view;
+              const { selection } = state;
+              if (!selection.empty) {
+                if (active) {
+                  active = false;
+                  lastQuery = null;
+                  lastTrigger = null;
+                  callbacksRef.current.onExit();
+                }
+                return;
+              }
+              const $pos = selection.$from;
+              const textBlock = $pos.parent;
+              if (!textBlock.isTextblock) {
+                if (active) {
+                  active = false;
+                  lastQuery = null;
+                  lastTrigger = null;
+                  callbacksRef.current.onExit();
+                }
+                return;
+              }
+              const blockStart = $pos.start();
+              const blockText = textBlock.textContent;
+              const cursorPos = $pos.pos;
+              const match = detectTrigger(blockText, cursorPos, blockStart, triggers);
+              if (match) {
+                const range = { from: match.from, to: match.to };
+                const props = {
+                  query: match.query,
+                  trigger: match.trigger,
+                  clientRect: getClientRect(view, match.from),
+                  range,
+                  command: makeCommand(range)
+                };
+                if (!active) {
+                  active = true;
+                  lastQuery = match.query;
+                  lastTrigger = match.trigger;
+                  callbacksRef.current.onStart(props);
+                } else if (match.query !== lastQuery || match.trigger !== lastTrigger) {
+                  lastQuery = match.query;
+                  lastTrigger = match.trigger;
+                  callbacksRef.current.onUpdate(props);
+                }
+              } else {
+                if (active) {
+                  active = false;
+                  lastQuery = null;
+                  lastTrigger = null;
+                  callbacksRef.current.onExit();
+                }
+              }
+            },
+            destroy() {
+              if (active) {
+                callbacksRef.current.onExit();
+              }
+            }
+          };
+        }
+      });
+      return [plugin];
+    }
+  });
+}
+
+// src/core/markdownSerializer.ts
+function serializeToMarkdown(doc) {
+  if (!doc.content) return "";
+  const parts = [];
+  for (const block of doc.content) {
+    if (block.type === "paragraph") {
+      parts.push(serializeParagraph(block));
+    } else if (block.type === "text") {
+      parts.push(block.text ?? "");
+    }
+  }
+  return parts.join("\n");
+}
+function serializeParagraph(node) {
+  if (!node.content) return "";
+  return node.content.map((child) => {
+    if (child.type === "mention") {
+      const { id, label } = child.attrs ?? {};
+      return `@[${label}](${id})`;
+    }
+    return child.text ?? "";
+  }).join("");
+}
+function extractTokens(doc) {
+  const tokens = [];
+  function walk(node) {
+    if (node.type === "mention" && node.attrs) {
+      tokens.push({
+        id: node.attrs.id,
+        type: node.attrs.entityType,
+        label: node.attrs.label
+      });
+    }
+    if (node.content) {
+      for (const child of node.content) {
+        walk(child);
+      }
+    }
+  }
+  walk(doc);
+  return tokens;
+}
+function extractPlainText(doc) {
+  if (!doc.content) return "";
+  const parts = [];
+  for (const block of doc.content) {
+    if (block.type === "paragraph") {
+      parts.push(extractParagraphText(block));
+    }
+  }
+  return parts.join("\n");
+}
+function extractParagraphText(node) {
+  if (!node.content) return "";
+  return node.content.map((child) => {
+    if (child.type === "mention") {
+      return child.attrs?.label ?? "";
+    }
+    return child.text ?? "";
+  }).join("");
+}
+
+// src/core/markdownParser.ts
+var MENTION_RE = /@\[([^\]]+)\]\((?:([^:)]+):)?([^)]+)\)/g;
+function parseFromMarkdown(markdown) {
+  const lines = markdown.split("\n");
+  const content = lines.map((line) => ({
+    type: "paragraph",
+    content: parseLine(line)
+  }));
+  return { type: "doc", content };
+}
+function parseLine(line) {
+  const nodes = [];
+  let lastIndex = 0;
+  MENTION_RE.lastIndex = 0;
+  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];
+    if (match.index > lastIndex) {
+      nodes.push({
+        type: "text",
+        text: line.slice(lastIndex, match.index)
+      });
+    }
+    nodes.push({
+      type: "mention",
+      attrs: {
+        id,
+        label,
+        entityType
+      }
+    });
+    lastIndex = match.index + fullMatch.length;
+  }
+  if (lastIndex < line.length) {
+    nodes.push({
+      type: "text",
+      text: line.slice(lastIndex)
+    });
+  }
+  if (nodes.length === 0) {
+    nodes.push({ type: "text", text: "" });
+  }
+  return nodes;
+}
+
+// src/hooks/useMentionsEditor.ts
+function createSubmitExtension(onSubmitRef) {
+  return import_core3.Extension.create({
+    name: "submitShortcut",
+    addKeyboardShortcuts() {
+      return {
+        "Mod-Enter": () => {
+          if (onSubmitRef.current) {
+            const json = this.editor.getJSON();
+            onSubmitRef.current({
+              markdown: serializeToMarkdown(json),
+              tokens: extractTokens(json),
+              plainText: extractPlainText(json)
+            });
+          }
+          return true;
+        }
+      };
+    }
+  });
+}
+function createEnterExtension(onSubmitRef) {
+  return import_core3.Extension.create({
+    name: "enterSubmit",
+    priority: 50,
+    addKeyboardShortcuts() {
+      return {
+        Enter: () => {
+          if (onSubmitRef.current) {
+            const json = this.editor.getJSON();
+            onSubmitRef.current({
+              markdown: serializeToMarkdown(json),
+              tokens: extractTokens(json),
+              plainText: extractPlainText(json)
+            });
+          }
+          return true;
+        }
+      };
+    }
+  });
+}
+function useMentionsEditor({
+  providers,
+  value,
+  onChange,
+  onSubmit,
+  placeholder,
+  autoFocus = false,
+  editable = true,
+  callbacksRef
+}) {
+  const onChangeRef = (0, import_react.useRef)(onChange);
+  onChangeRef.current = onChange;
+  const onSubmitRef = (0, import_react.useRef)(onSubmit);
+  onSubmitRef.current = onSubmit;
+  const initialContent = (0, import_react.useMemo)(() => {
+    if (!value) return void 0;
+    return parseFromMarkdown(value);
+  }, []);
+  const triggersKey = providers.map((p) => p.trigger).join(",");
+  const triggers = (0, import_react.useMemo)(
+    () => providers.map((p) => p.trigger),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [triggersKey]
+  );
+  const suggestionExtension = (0, import_react.useMemo)(
+    () => createSuggestionExtension(triggers, callbacksRef),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [triggersKey]
+  );
+  const submitExt = (0, import_react.useMemo)(() => createSubmitExtension(onSubmitRef), []);
+  const enterExt = (0, import_react.useMemo)(() => createEnterExtension(onSubmitRef), []);
+  const editor = (0, import_react2.useEditor)({
+    extensions: [
+      import_starter_kit.default.configure({
+        heading: false,
+        blockquote: false,
+        codeBlock: false,
+        bulletList: false,
+        orderedList: false,
+        listItem: false,
+        horizontalRule: false
+      }),
+      MentionNode,
+      suggestionExtension,
+      submitExt,
+      enterExt
+    ],
+    content: initialContent,
+    autofocus: autoFocus ? "end" : false,
+    editable,
+    editorProps: {
+      attributes: {
+        "data-placeholder": placeholder ?? "",
+        class: "mentions-editor"
+      }
+    },
+    onUpdate: ({ editor: editor2 }) => {
+      const json = editor2.getJSON();
+      onChangeRef.current?.({
+        markdown: serializeToMarkdown(json),
+        tokens: extractTokens(json),
+        plainText: extractPlainText(json)
+      });
+    }
+  });
+  (0, import_react.useEffect)(() => {
+    if (editor && editor.isEditable !== editable) {
+      editor.setEditable(editable);
+    }
+  }, [editor, editable]);
+  const getOutput = (0, import_react.useCallback)(() => {
+    if (!editor) return null;
+    const json = editor.getJSON();
+    return {
+      markdown: serializeToMarkdown(json),
+      tokens: extractTokens(json),
+      plainText: extractPlainText(json)
+    };
+  }, [editor]);
+  return { editor, getOutput };
+}
+
+// src/hooks/useSuggestion.ts
+var import_react3 = require("react");
+var IDLE_STATE = {
+  state: "idle",
+  items: [],
+  breadcrumbs: [],
+  activeIndex: 0,
+  loading: false,
+  clientRect: null,
+  trigger: null,
+  query: ""
+};
+function useSuggestion(providers) {
+  const [uiState, setUIState] = (0, import_react3.useState)(IDLE_STATE);
+  const stateRef = (0, import_react3.useRef)(uiState);
+  stateRef.current = uiState;
+  const providersRef = (0, import_react3.useRef)(providers);
+  providersRef.current = providers;
+  const commandRef = (0, import_react3.useRef)(
+    null
+  );
+  const providerRef = (0, import_react3.useRef)(null);
+  const fetchItems = (0, import_react3.useCallback)(
+    async (provider, query, parent) => {
+      setUIState((prev) => ({ ...prev, loading: true, state: "loading" }));
+      try {
+        const items = parent && provider.getChildren ? await provider.getChildren(parent, query) : await provider.getRootItems(query);
+        setUIState((prev) => ({
+          ...prev,
+          items,
+          loading: false,
+          state: "showing",
+          activeIndex: 0
+        }));
+      } catch {
+        setUIState((prev) => ({
+          ...prev,
+          items: [],
+          loading: false,
+          state: "showing"
+        }));
+      }
+    },
+    []
+  );
+  const onStart = (0, import_react3.useCallback)(
+    (props) => {
+      const provider = providersRef.current.find(
+        (p) => p.trigger === props.trigger
+      );
+      if (!provider) return;
+      providerRef.current = provider;
+      commandRef.current = props.command;
+      setUIState({
+        state: "loading",
+        items: [],
+        breadcrumbs: [],
+        activeIndex: 0,
+        loading: true,
+        clientRect: props.clientRect,
+        trigger: props.trigger,
+        query: props.query
+      });
+      fetchItems(provider, props.query);
+    },
+    [fetchItems]
+  );
+  const onUpdate = (0, import_react3.useCallback)(
+    (props) => {
+      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) {
+        fetchItems(provider, props.query);
+      }
+    },
+    [fetchItems]
+  );
+  const onExit = (0, import_react3.useCallback)(() => {
+    providerRef.current = null;
+    commandRef.current = null;
+    setUIState(IDLE_STATE);
+  }, []);
+  const navigateUp = (0, import_react3.useCallback)(() => {
+    setUIState((prev) => ({
+      ...prev,
+      activeIndex: Math.max(0, prev.activeIndex - 1)
+    }));
+  }, []);
+  const navigateDown = (0, import_react3.useCallback)(() => {
+    setUIState((prev) => ({
+      ...prev,
+      activeIndex: Math.min(prev.items.length - 1, prev.activeIndex + 1)
+    }));
+  }, []);
+  const select = (0, import_react3.useCallback)(
+    (item) => {
+      const current = stateRef.current;
+      const selected = item ?? current.items[current.activeIndex];
+      if (!selected) return;
+      const provider = providerRef.current;
+      if (selected.hasChildren && provider?.getChildren) {
+        setUIState((prev) => ({
+          ...prev,
+          state: "drilling",
+          breadcrumbs: [...prev.breadcrumbs, selected],
+          items: [],
+          activeIndex: 0,
+          query: ""
+        }));
+        fetchItems(provider, "", selected);
+        return;
+      }
+      if (commandRef.current) {
+        commandRef.current({
+          id: selected.id,
+          label: selected.label,
+          entityType: selected.type
+        });
+      }
+    },
+    [fetchItems]
+  );
+  const goBack = (0, import_react3.useCallback)(() => {
+    const provider = providerRef.current;
+    if (!provider) return;
+    setUIState((prev) => {
+      const newBreadcrumbs = prev.breadcrumbs.slice(0, -1);
+      const parent = newBreadcrumbs[newBreadcrumbs.length - 1];
+      if (parent) {
+        fetchItems(provider, "", parent);
+      } else {
+        fetchItems(provider, prev.query);
+      }
+      return {
+        ...prev,
+        breadcrumbs: newBreadcrumbs,
+        items: [],
+        activeIndex: 0,
+        state: "loading"
+      };
+    });
+  }, [fetchItems]);
+  const close = (0, import_react3.useCallback)(() => {
+    setUIState(IDLE_STATE);
+  }, []);
+  const onKeyDown = (0, import_react3.useCallback)(
+    ({ event }) => {
+      const current = stateRef.current;
+      if (current.state === "idle") return false;
+      switch (event.key) {
+        case "ArrowUp":
+          event.preventDefault();
+          navigateUp();
+          return true;
+        case "ArrowDown":
+          event.preventDefault();
+          navigateDown();
+          return true;
+        case "Enter": {
+          event.preventDefault();
+          const selectedItem = current.items[current.activeIndex];
+          if (selectedItem) {
+            select(selectedItem);
+          }
+          return true;
+        }
+        case "ArrowRight": {
+          const activeItem = current.items[current.activeIndex];
+          if (activeItem?.hasChildren) {
+            event.preventDefault();
+            select(activeItem);
+            return true;
+          }
+          return false;
+        }
+        case "ArrowLeft":
+          if (current.breadcrumbs.length > 0) {
+            event.preventDefault();
+            goBack();
+            return true;
+          }
+          return false;
+        case "Escape":
+          event.preventDefault();
+          close();
+          return true;
+        default:
+          return false;
+      }
+    },
+    [navigateUp, navigateDown, select, goBack, close]
+  );
+  const callbacksRef = (0, import_react3.useRef)({
+    onStart,
+    onUpdate,
+    onExit,
+    onKeyDown
+  });
+  callbacksRef.current = { onStart, onUpdate, onExit, onKeyDown };
+  const actions = {
+    navigateUp,
+    navigateDown,
+    select,
+    goBack,
+    close
+  };
+  return { uiState, actions, callbacksRef };
+}
+
+// src/components/SuggestionList.tsx
+var import_react4 = require("react");
+
+// src/utils/ariaHelpers.ts
+function comboboxAttrs(expanded, listboxId) {
+  return {
+    role: "combobox",
+    "aria-haspopup": "listbox",
+    "aria-expanded": expanded,
+    "aria-owns": expanded ? listboxId : void 0
+  };
+}
+function listboxAttrs(id, label) {
+  return {
+    id,
+    role: "listbox",
+    "aria-label": label
+  };
+}
+function optionAttrs(id, selected, index) {
+  return {
+    id,
+    role: "option",
+    "aria-selected": selected,
+    "aria-posinset": index + 1
+  };
+}
+
+// src/components/SuggestionList.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var LISTBOX_ID = "mentions-suggestion-listbox";
+function SuggestionList({
+  items,
+  activeIndex,
+  breadcrumbs,
+  loading,
+  trigger,
+  clientRect,
+  onSelect,
+  onHover,
+  onGoBack,
+  renderItem
+}) {
+  const listRef = (0, import_react4.useRef)(null);
+  const depth = breadcrumbs.length;
+  (0, import_react4.useEffect)(() => {
+    if (!listRef.current) return;
+    const active = listRef.current.querySelector('[aria-selected="true"]');
+    active?.scrollIntoView({ block: "nearest" });
+  }, [activeIndex]);
+  const style = usePopoverPosition(clientRect);
+  if (items.length === 0 && !loading) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      "data-suggestions": "",
+      "data-trigger": trigger,
+      style,
+      ref: listRef,
+      children: [
+        breadcrumbs.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { "data-suggestion-breadcrumb": "", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "button",
+            {
+              type: "button",
+              "data-suggestion-back": "",
+              onClick: onGoBack,
+              "aria-label": "Go back",
+              children: "\u2190"
+            }
+          ),
+          breadcrumbs.map((crumb, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { "data-suggestion-breadcrumb-item": "", children: [
+            i > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { "data-suggestion-breadcrumb-sep": "", children: "/" }),
+            crumb.label
+          ] }, crumb.id))
+        ] }),
+        loading && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { "data-suggestion-loading": "", children: "Loading..." }),
+        !loading && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ...listboxAttrs(LISTBOX_ID, `${trigger ?? ""} suggestions`), children: items.map((item, index) => {
+          const isActive = index === activeIndex;
+          const itemId = `mention-option-${item.id}`;
+          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "div",
+            {
+              ...optionAttrs(itemId, isActive, index),
+              "data-suggestion-item": "",
+              "data-suggestion-item-active": isActive ? "" : void 0,
+              "data-has-children": item.hasChildren ? "" : void 0,
+              onMouseEnter: () => onHover(index),
+              onClick: () => onSelect(item),
+              children: renderItem ? renderItem(item, depth) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DefaultSuggestionItem, { item })
+            },
+            item.id
+          );
+        }) })
+      ]
+    }
+  );
+}
+function DefaultSuggestionItem({ item }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    item.icon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { "data-suggestion-item-icon": "", children: item.icon }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { "data-suggestion-item-label": "", children: item.label }),
+    item.description && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { "data-suggestion-item-description": "", children: item.description }),
+    item.hasChildren && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { "data-suggestion-item-chevron": "", "aria-hidden": "true", children: "\u203A" })
+  ] });
+}
+function usePopoverPosition(clientRect) {
+  if (!clientRect) {
+    return { display: "none" };
+  }
+  const rect = clientRect();
+  if (!rect) {
+    return { display: "none" };
+  }
+  return {
+    position: "fixed",
+    left: `${rect.left}px`,
+    top: `${rect.bottom + 4}px`,
+    zIndex: 50
+  };
+}
+
+// src/components/MentionsInput.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var LISTBOX_ID2 = "mentions-suggestion-listbox";
+function MentionsInput({
+  value,
+  providers,
+  onChange,
+  placeholder = "Type a message...",
+  autoFocus = false,
+  disabled = false,
+  className,
+  onSubmit,
+  maxLength,
+  renderItem,
+  renderChip
+}) {
+  const { uiState, actions, callbacksRef } = useSuggestion(providers);
+  const { editor } = useMentionsEditor({
+    providers,
+    value,
+    onChange,
+    onSubmit,
+    placeholder,
+    autoFocus,
+    editable: !disabled,
+    callbacksRef
+  });
+  const isExpanded = uiState.state !== "idle";
+  const handleHover = (0, import_react5.useCallback)((index) => {
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    "div",
+    {
+      className,
+      "data-mentions-input": "",
+      "data-disabled": disabled ? "" : void 0,
+      ...comboboxAttrs(isExpanded, LISTBOX_ID2),
+      "aria-activedescendant": isExpanded && uiState.items[uiState.activeIndex] ? `mention-option-${uiState.items[uiState.activeIndex].id}` : void 0,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react6.EditorContent, { editor }),
+        isExpanded && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          SuggestionList,
+          {
+            items: uiState.items,
+            activeIndex: uiState.activeIndex,
+            breadcrumbs: uiState.breadcrumbs,
+            loading: uiState.loading,
+            trigger: uiState.trigger,
+            clientRect: uiState.clientRect,
+            onSelect: (item) => actions.select(item),
+            onHover: handleHover,
+            onGoBack: actions.goBack,
+            renderItem
+          }
+        )
+      ]
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  MentionsInput,
+  parseFromMarkdown,
+  serializeToMarkdown
+});
+//# sourceMappingURL=index.js.map