mentionize 0.0.1

package/dist/esm/index.js

@@ -0,0 +1,844 @@
+// src/MentionInput.tsx
+import {
+  forwardRef,
+  useCallback as useCallback4,
+  useEffect as useEffect4,
+  useImperativeHandle,
+  useLayoutEffect as useLayoutEffect2,
+  useRef as useRef5,
+  useState as useState2
+} from "react";
+
+// src/MentionDropdown.tsx
+import { useCallback, useEffect, useRef } from "react";
+import { jsxDEV } from "react/jsx-dev-runtime";
+var MentionDropdown = ({
+  items,
+  trigger,
+  highlightedIndex,
+  onHighlight,
+  onSelect,
+  onLoadMore,
+  loading,
+  position,
+  width,
+  className
+}) => {
+  const listRef = useRef(null);
+  const sentinelRef = useRef(null);
+  useEffect(() => {
+    if (!onLoadMore || !sentinelRef.current)
+      return;
+    const sentinel = sentinelRef.current;
+    const observer = new IntersectionObserver((entries) => {
+      if (entries[0]?.isIntersecting) {
+        onLoadMore();
+      }
+    }, { root: listRef.current, threshold: 0.1 });
+    observer.observe(sentinel);
+    return () => observer.disconnect();
+  }, [onLoadMore]);
+  useEffect(() => {
+    const container = listRef.current;
+    if (!container)
+      return;
+    const highlighted = container.querySelector(`[data-mentionize-option-index="${highlightedIndex}"]`);
+    if (highlighted) {
+      highlighted.scrollIntoView({ block: "nearest" });
+    }
+  }, [highlightedIndex]);
+  const maxHeight = 240;
+  const gap = 4;
+  const spaceBelow = window.innerHeight - position.top - gap;
+  const flipAbove = spaceBelow < maxHeight && position.top > maxHeight;
+  const style = {
+    position: "fixed",
+    width,
+    maxHeight,
+    overflowY: "auto",
+    zIndex: 50,
+    ...flipAbove ? { bottom: window.innerHeight - position.top + gap, left: position.left } : { top: position.top + gap, left: position.left }
+  };
+  const handleMouseDown = useCallback((e) => {
+    e.preventDefault();
+  }, []);
+  if (!items.length && !loading)
+    return null;
+  return /* @__PURE__ */ jsxDEV("div", {
+    ref: listRef,
+    role: "listbox",
+    className,
+    style,
+    "data-mentionize-dropdown": "",
+    onMouseDown: handleMouseDown,
+    children: [
+      items.map((item, i) => {
+        const isHighlighted = i === highlightedIndex;
+        if (trigger.renderOption) {
+          return /* @__PURE__ */ jsxDEV("div", {
+            role: "option",
+            "aria-selected": isHighlighted,
+            "data-mentionize-option-index": i,
+            "data-mentionize-option-highlighted": isHighlighted || undefined,
+            onMouseEnter: () => onHighlight(i),
+            onClick: () => onSelect(item),
+            children: trigger.renderOption(item, isHighlighted)
+          }, i, false, undefined, this);
+        }
+        return /* @__PURE__ */ jsxDEV("div", {
+          role: "option",
+          "aria-selected": isHighlighted,
+          "data-mentionize-option-index": i,
+          "data-mentionize-option": "",
+          "data-mentionize-option-highlighted": isHighlighted || undefined,
+          onMouseEnter: () => onHighlight(i),
+          onClick: () => onSelect(item),
+          children: trigger.displayText(item)
+        }, i, false, undefined, this);
+      }),
+      loading && /* @__PURE__ */ jsxDEV("div", {
+        "data-mentionize-loading": "",
+        children: "Loading..."
+      }, undefined, false, undefined, this),
+      onLoadMore && !loading && /* @__PURE__ */ jsxDEV("div", {
+        ref: sentinelRef,
+        style: { height: 1 },
+        "aria-hidden": true
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+};
+
+// src/MentionHighlighter.tsx
+import React2, { useEffect as useEffect2, useLayoutEffect, useMemo, useRef as useRef2 } from "react";
+function textToNodes(text) {
+  const parts = text.split(`
+`);
+  const nodes = [];
+  for (let i = 0;i < parts.length; i++) {
+    if (i > 0)
+      nodes.push(React2.createElement("br", { key: `br-${i}` }));
+    if (parts[i])
+      nodes.push(parts[i]);
+  }
+  return nodes;
+}
+var MentionHighlighter = ({
+  visible,
+  mentions,
+  triggers,
+  textareaRef,
+  className,
+  style
+}) => {
+  const ref = useRef2(null);
+  useEffect2(() => {
+    const textarea = textareaRef.current;
+    const highlighter = ref.current;
+    if (!textarea || !highlighter)
+      return;
+    const onScroll = () => {
+      highlighter.scrollTop = textarea.scrollTop;
+      highlighter.scrollLeft = textarea.scrollLeft;
+    };
+    textarea.addEventListener("scroll", onScroll);
+    return () => textarea.removeEventListener("scroll", onScroll);
+  }, [textareaRef]);
+  const children = useMemo(() => {
+    const sorted = mentions.slice().sort((a, b) => a.start - b.start);
+    if (!sorted.length)
+      return textToNodes(visible);
+    const classMap = new Map;
+    for (const t of triggers) {
+      classMap.set(t.trigger, t.mentionClassName ?? "mentionize-mention");
+    }
+    const nodes = [];
+    let last = 0;
+    for (let i = 0;i < sorted.length; i++) {
+      const m = sorted[i];
+      if (last < m.start) {
+        nodes.push(...textToNodes(visible.slice(last, m.start)));
+      }
+      const mentionText = visible.slice(m.start, m.end);
+      const cls = classMap.get(m.trigger) ?? "mentionize-mention";
+      nodes.push(React2.createElement("span", {
+        key: `mention-${i}`,
+        className: cls,
+        "data-mentionize-trigger": m.trigger,
+        "data-mentionize-key": m.key
+      }, mentionText));
+      last = m.end;
+    }
+    if (last < visible.length) {
+      nodes.push(...textToNodes(visible.slice(last)));
+    }
+    return nodes;
+  }, [visible, mentions, triggers]);
+  useLayoutEffect(() => {
+    const el = ref.current;
+    if (!el)
+      return;
+    const spans = el.querySelectorAll("[data-mentionize-trigger]");
+    for (let i = 0;i < spans.length; i++) {
+      const span = spans[i];
+      span.style.marginLeft = "";
+      span.style.marginRight = "";
+      const cs = getComputedStyle(span);
+      const extraLeft = parseFloat(cs.paddingLeft) + parseFloat(cs.borderLeftWidth) + parseFloat(cs.marginLeft);
+      const extraRight = parseFloat(cs.paddingRight) + parseFloat(cs.borderRightWidth) + parseFloat(cs.marginRight);
+      if (extraLeft)
+        span.style.marginLeft = `${-extraLeft}px`;
+      if (extraRight)
+        span.style.marginRight = `${-extraRight}px`;
+    }
+  });
+  return React2.createElement("div", {
+    ref,
+    className,
+    style: {
+      position: "absolute",
+      inset: 0,
+      pointerEvents: "none",
+      overflow: "auto",
+      ...style
+    },
+    "aria-hidden": true,
+    "data-mentionize-highlighter": ""
+  }, ...children);
+};
+
+// src/useCaretPosition.ts
+import { useCallback as useCallback2, useRef as useRef3 } from "react";
+var SHARED_STYLE_PROPS = [
+  "whiteSpace",
+  "overflowWrap",
+  "wordBreak",
+  "padding",
+  "paddingTop",
+  "paddingRight",
+  "paddingBottom",
+  "paddingLeft",
+  "fontFamily",
+  "fontSize",
+  "fontWeight",
+  "lineHeight",
+  "letterSpacing",
+  "tabSize",
+  "boxSizing",
+  "borderWidth",
+  "borderStyle"
+];
+function useCaretPosition(dropdownWidth) {
+  const mirrorRef = useRef3(null);
+  const getCaretPosition = useCallback2((textarea, caretIndex, textOverride) => {
+    const mirror = mirrorRef.current;
+    if (!mirror)
+      return null;
+    const caret = caretIndex ?? textarea.selectionStart;
+    const source = textOverride ?? textarea.value;
+    const before = source.slice(0, caret);
+    const computed = getComputedStyle(textarea);
+    for (const prop of SHARED_STYLE_PROPS) {
+      mirror.style[prop] = computed[prop];
+    }
+    mirror.style.width = `${textarea.offsetWidth}px`;
+    mirror.textContent = before;
+    const span = document.createElement("span");
+    span.textContent = "​";
+    mirror.appendChild(span);
+    mirror.scrollTop = textarea.scrollTop;
+    const spanRect = span.getBoundingClientRect();
+    const mirrorRect = mirror.getBoundingClientRect();
+    const textareaRect = textarea.getBoundingClientRect();
+    const top = textareaRect.top + (spanRect.top - mirrorRect.top) - textarea.scrollTop + span.offsetHeight;
+    let left = textareaRect.left + (spanRect.left - mirrorRect.left);
+    if (left + dropdownWidth > window.innerWidth - 8) {
+      left = window.innerWidth - dropdownWidth - 8;
+    }
+    if (left < 8)
+      left = 8;
+    mirror.innerHTML = "";
+    return {
+      top: Math.min(Math.max(top, 8), window.innerHeight - 8),
+      left
+    };
+  }, [dropdownWidth]);
+  return { mirrorRef, getCaretPosition };
+}
+
+// src/useMentionEngine.ts
+import { useCallback as useCallback3, useEffect as useEffect3, useMemo as useMemo2, useRef as useRef4, useState } from "react";
+
+// src/utils.ts
+function escapeRegex(s) {
+  return s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+
+// src/useMentionEngine.ts
+function detectMentionsInText(visibleText, triggers, getCache) {
+  const all = [];
+  for (const t of triggers) {
+    const triggerChar = t.trigger;
+    if (!visibleText.includes(triggerChar))
+      continue;
+    const cache = getCache(triggerChar);
+    const knownItems = [];
+    if (t.options) {
+      for (const item of t.options) {
+        knownItems.push({
+          displayText: t.displayText(item),
+          key: getItemKey(t, item),
+          item
+        });
+      }
+    }
+    for (const [key, item] of cache.entries()) {
+      if (item !== null) {
+        const dt = t.displayText(item);
+        if (!knownItems.some((k) => k.key === key)) {
+          knownItems.push({ displayText: dt, key, item });
+        }
+      }
+    }
+    if (!knownItems.length)
+      continue;
+    const compiled = knownItems.map((ki) => {
+      const pat = "^" + escapeRegex(ki.displayText).replace(/\s+/g, "\\s+");
+      return { ...ki, re: new RegExp(pat, "i") };
+    });
+    const positions = [];
+    let idx = visibleText.indexOf(triggerChar);
+    while (idx !== -1) {
+      positions.push(idx);
+      idx = visibleText.indexOf(triggerChar, idx + 1);
+    }
+    const candidates = [];
+    for (const pos of positions) {
+      const after = visibleText.slice(pos + triggerChar.length);
+      for (const c of compiled) {
+        const match = c.re.exec(after);
+        if (!match)
+          continue;
+        const matched = match[0];
+        const end = pos + triggerChar.length + matched.length;
+        const next = visibleText[end];
+        if (next && !/[\s,.:;!?)}\]]/.test(next))
+          continue;
+        candidates.push({
+          trigger: triggerChar,
+          displayText: matched,
+          key: c.key,
+          start: pos,
+          end
+        });
+      }
+    }
+    candidates.sort((a, b) => a.start !== b.start ? a.start - b.start : b.end - b.start - (a.end - a.start));
+    for (const c of candidates) {
+      const overlaps = all.some((f) => Math.max(f.start, c.start) < Math.min(f.end, c.end));
+      if (!overlaps)
+        all.push(c);
+    }
+  }
+  return all;
+}
+function mentionsEqual(a, b) {
+  if (a.length !== b.length)
+    return false;
+  for (let i = 0;i < a.length; i++) {
+    const ai = a[i];
+    const bi = b[i];
+    if (ai.start !== bi.start || ai.end !== bi.end || ai.key !== bi.key)
+      return false;
+  }
+  return true;
+}
+function useMentionEngine(options) {
+  const {
+    triggers,
+    value: controlledValue,
+    defaultValue,
+    onChange,
+    onMentionsChange
+  } = options;
+  const lastRawRef = useRef4(controlledValue ?? defaultValue ?? "");
+  const suppressEmitRef = useRef4(false);
+  const caretPosRef = useRef4(null);
+  const prevMentionsRef = useRef4([]);
+  const cacheRef = useRef4(new Map);
+  function getCache(triggerChar) {
+    let map = cacheRef.current.get(triggerChar);
+    if (!map) {
+      map = new Map;
+      cacheRef.current.set(triggerChar, map);
+    }
+    return map;
+  }
+  useEffect3(() => {
+    for (const t of triggers) {
+      if (t.options) {
+        const cache = getCache(t.trigger);
+        for (const item of t.options) {
+          const serialized = t.serialize(item);
+          const re = new RegExp(t.pattern.source, t.pattern.flags.replace("g", ""));
+          const m = re.exec(serialized);
+          if (m) {
+            const { key } = t.parseMatch(m);
+            cache.set(key, item);
+          }
+        }
+      }
+    }
+  }, [triggers]);
+  const rawToVisible = useCallback3((raw) => {
+    let result = raw;
+    for (const t of triggers) {
+      const globalRe = new RegExp(t.pattern.source, t.pattern.flags.includes("g") ? t.pattern.flags : t.pattern.flags + "g");
+      const parts = [];
+      let lastIndex = 0;
+      let m;
+      globalRe.lastIndex = 0;
+      while ((m = globalRe.exec(result)) !== null) {
+        parts.push(result.slice(lastIndex, m.index));
+        const parsed = t.parseMatch(m);
+        const cache = getCache(t.trigger);
+        if (!cache.has(parsed.key)) {
+          cache.set(parsed.key, null);
+        }
+        parts.push(t.trigger + parsed.displayText);
+        lastIndex = m.index + m[0].length;
+        if (!t.pattern.flags.includes("g"))
+          break;
+      }
+      parts.push(result.slice(lastIndex));
+      result = parts.join("");
+    }
+    return result;
+  }, [triggers]);
+  const [visible, setVisible] = useState(() => rawToVisible(controlledValue ?? defaultValue ?? ""));
+  const mentions = useMemo2(() => {
+    const newMentions = detectMentionsInText(visible, triggers, getCache);
+    if (mentionsEqual(prevMentionsRef.current, newMentions)) {
+      return prevMentionsRef.current;
+    }
+    prevMentionsRef.current = newMentions;
+    return newMentions;
+  }, [visible, triggers]);
+  const visibleToRaw = useCallback3((vis, mentionsList) => {
+    if (!mentionsList.length)
+      return vis;
+    const ordered = mentionsList.slice().sort((a, b) => a.start - b.start);
+    let raw = "";
+    let last = 0;
+    for (const m of ordered) {
+      raw += vis.slice(last, m.start);
+      const t = triggers.find((tr) => tr.trigger === m.trigger);
+      if (t) {
+        const cache = getCache(t.trigger);
+        const item = cache.get(m.key);
+        if (item !== null && item !== undefined) {
+          raw += t.serialize(item);
+        } else {
+          raw += vis.slice(m.start, m.end);
+        }
+      } else {
+        raw += vis.slice(m.start, m.end);
+      }
+      last = m.end;
+    }
+    raw += vis.slice(last);
+    return raw;
+  }, [triggers]);
+  const emitSync = useCallback3((newVisible) => {
+    const newMentions = detectMentionsInText(newVisible, triggers, getCache);
+    if (!mentionsEqual(prevMentionsRef.current, newMentions)) {
+      prevMentionsRef.current = newMentions;
+    }
+    const raw = visibleToRaw(newVisible, prevMentionsRef.current);
+    if (raw !== lastRawRef.current) {
+      lastRawRef.current = raw;
+      onChange?.(raw);
+    }
+    onMentionsChange?.(prevMentionsRef.current);
+  }, [triggers, visibleToRaw, onChange, onMentionsChange]);
+  useEffect3(() => {
+    if (controlledValue === undefined)
+      return;
+    if (controlledValue === lastRawRef.current)
+      return;
+    lastRawRef.current = controlledValue;
+    suppressEmitRef.current = true;
+    setVisible(rawToVisible(controlledValue));
+  }, [controlledValue, rawToVisible]);
+  const [activeTrigger, setActiveTrigger] = useState(null);
+  const [searchState, setSearchState] = useState({
+    items: [],
+    page: 0,
+    hasMore: false,
+    loading: false
+  });
+  const [highlightIndex, setHighlightIndex] = useState(0);
+  const searchAbortRef = useRef4(null);
+  const detectActiveTrigger = useCallback3((text, caretPos) => {
+    const prefix = text.slice(0, caretPos);
+    for (const t of triggers) {
+      const triggerChar = t.trigger;
+      const re = new RegExp(escapeRegex(triggerChar) + "([^\\n" + escapeRegex(triggerChar) + "]*)$");
+      const match = re.exec(prefix);
+      if (match && match[1] !== undefined) {
+        const query = match[1];
+        if (/\s/.test(query))
+          continue;
+        return {
+          trigger: t,
+          query,
+          startPos: match.index
+        };
+      }
+    }
+    return null;
+  }, [triggers]);
+  const filteredOptions = useMemo2(() => {
+    if (!activeTrigger)
+      return [];
+    const t = activeTrigger.trigger;
+    const q = activeTrigger.query.toLowerCase();
+    if (t.onSearch) {
+      return searchState.items;
+    }
+    if (t.options) {
+      if (!q)
+        return t.options;
+      return t.options.filter((item) => t.displayText(item).toLowerCase().includes(q));
+    }
+    return [];
+  }, [activeTrigger, searchState.items]);
+  useEffect3(() => {
+    if (!activeTrigger?.trigger.onSearch)
+      return;
+    const t = activeTrigger.trigger;
+    const query = activeTrigger.query;
+    searchAbortRef.current?.abort();
+    const controller = new AbortController;
+    searchAbortRef.current = controller;
+    setSearchState((s) => ({ ...s, loading: true, page: 0 }));
+    const timer = setTimeout(async () => {
+      try {
+        const result = await t.onSearch(query, 0);
+        if (controller.signal.aborted)
+          return;
+        setSearchState({
+          items: result.items,
+          page: 0,
+          hasMore: result.hasMore,
+          loading: false
+        });
+      } catch {
+        if (controller.signal.aborted)
+          return;
+        setSearchState((s) => ({ ...s, loading: false }));
+      }
+    }, 150);
+    return () => {
+      clearTimeout(timer);
+      controller.abort();
+    };
+  }, [activeTrigger?.trigger, activeTrigger?.query]);
+  const loadMore = useCallback3(async () => {
+    if (!activeTrigger?.trigger.onSearch || searchState.loading || !searchState.hasMore)
+      return;
+    const t = activeTrigger.trigger;
+    const nextPage = searchState.page + 1;
+    setSearchState((s) => ({ ...s, loading: true }));
+    try {
+      const result = await t.onSearch(activeTrigger.query, nextPage);
+      setSearchState((s) => ({
+        items: [...s.items, ...result.items],
+        page: nextPage,
+        hasMore: result.hasMore,
+        loading: false
+      }));
+    } catch {
+      setSearchState((s) => ({ ...s, loading: false }));
+    }
+  }, [activeTrigger, searchState]);
+  const handleTextChange = useCallback3((newText, caretPos) => {
+    caretPosRef.current = caretPos;
+    setVisible(newText);
+    emitSync(newText);
+    const detected = detectActiveTrigger(newText, caretPos);
+    if (detected) {
+      setActiveTrigger(detected);
+      setHighlightIndex(0);
+    } else {
+      setActiveTrigger(null);
+    }
+  }, [detectActiveTrigger, emitSync]);
+  const selectOption = useCallback3((item, textarea) => {
+    if (!activeTrigger)
+      return;
+    const t = activeTrigger.trigger;
+    const cache = getCache(t.trigger);
+    const key = getItemKey(t, item);
+    cache.set(key, item);
+    const displayText = t.displayText(item);
+    const mentionText = t.trigger + displayText;
+    const before = visible.slice(0, activeTrigger.startPos);
+    const after = visible.slice(textarea.selectionStart);
+    const newVis = before + mentionText + " " + after;
+    const pos = before.length + mentionText.length + 1;
+    caretPosRef.current = pos;
+    setVisible(newVis);
+    emitSync(newVis);
+    setActiveTrigger(null);
+  }, [activeTrigger, visible, emitSync]);
+  const closeSuggestions = useCallback3(() => {
+    setActiveTrigger(null);
+    setSearchState({ items: [], page: 0, hasMore: false, loading: false });
+  }, []);
+  const handleKeyDown = useCallback3((e, textarea) => {
+    if (!activeTrigger)
+      return false;
+    const len = filteredOptions.length;
+    if (!len && !searchState.loading)
+      return false;
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      const next = (highlightIndex + 1) % Math.max(len, 1);
+      setHighlightIndex(next);
+      if (len - 1 - next <= 3 && searchState.hasMore && !searchState.loading) {
+        loadMore();
+      }
+      return true;
+    }
+    if (e.key === "ArrowUp") {
+      e.preventDefault();
+      setHighlightIndex((highlightIndex - 1 + Math.max(len, 1)) % Math.max(len, 1));
+      return true;
+    }
+    if (e.key === "Enter") {
+      e.preventDefault();
+      const item = filteredOptions[highlightIndex];
+      if (item)
+        selectOption(item, textarea);
+      return true;
+    }
+    if (e.key === "Escape") {
+      e.preventDefault();
+      closeSuggestions();
+      return true;
+    }
+    return false;
+  }, [
+    activeTrigger,
+    filteredOptions,
+    highlightIndex,
+    searchState,
+    selectOption,
+    closeSuggestions,
+    loadMore
+  ]);
+  return {
+    visible,
+    setVisible,
+    mentions,
+    activeTrigger,
+    filteredOptions,
+    highlightIndex,
+    setHighlightIndex,
+    searchLoading: searchState.loading,
+    searchHasMore: searchState.hasMore,
+    handleTextChange,
+    handleKeyDown,
+    selectOption,
+    closeSuggestions,
+    loadMore,
+    rawToVisible,
+    visibleToRaw,
+    caretPosRef
+  };
+}
+function getItemKey(trigger, item) {
+  const serialized = trigger.serialize(item);
+  const re = new RegExp(trigger.pattern.source, trigger.pattern.flags.replace("g", ""));
+  const m = re.exec(serialized);
+  if (m) {
+    return trigger.parseMatch(m).key;
+  }
+  return serialized;
+}
+
+// src/MentionInput.tsx
+import { jsxDEV as jsxDEV2 } from "react/jsx-dev-runtime";
+var SHARED_STYLE = {
+  whiteSpace: "pre-wrap",
+  overflowWrap: "anywhere",
+  wordBreak: "break-word",
+  padding: "0.5rem 0.75rem",
+  fontFamily: "inherit",
+  fontSize: "inherit",
+  lineHeight: "inherit",
+  letterSpacing: "normal",
+  boxSizing: "border-box"
+};
+var MentionInput = forwardRef(({
+  triggers,
+  value,
+  defaultValue,
+  onChange,
+  onMentionsChange,
+  placeholder,
+  disabled,
+  rows = 4,
+  className,
+  inputClassName,
+  highlighterClassName,
+  dropdownClassName,
+  dropdownWidth = 250,
+  renderDropdown,
+  "aria-label": ariaLabel,
+  "aria-describedby": ariaDescribedBy
+}, ref) => {
+  const textareaRef = useRef5(null);
+  useImperativeHandle(ref, () => textareaRef.current);
+  const engine = useMentionEngine({
+    triggers,
+    value,
+    defaultValue,
+    onChange,
+    onMentionsChange
+  });
+  useLayoutEffect2(() => {
+    const pos = engine.caretPosRef.current;
+    const ta = textareaRef.current;
+    if (pos !== null && ta && document.activeElement === ta) {
+      ta.setSelectionRange(pos, pos);
+      engine.caretPosRef.current = null;
+    }
+  });
+  const { mirrorRef, getCaretPosition } = useCaretPosition(dropdownWidth);
+  const [dropdownPos, setDropdownPos] = useState2(null);
+  useEffect4(() => {
+    if (engine.activeTrigger && textareaRef.current) {
+      requestAnimationFrame(() => {
+        const pos = getCaretPosition(textareaRef.current);
+        if (pos)
+          setDropdownPos(pos);
+      });
+    } else {
+      setDropdownPos(null);
+    }
+  }, [engine.activeTrigger, engine.visible, getCaretPosition]);
+  const handleChange = useCallback4((e) => {
+    engine.handleTextChange(e.target.value, e.target.selectionStart);
+  }, [engine.handleTextChange]);
+  const handleKeyDown = useCallback4((e) => {
+    if (textareaRef.current) {
+      engine.handleKeyDown(e, textareaRef.current);
+    }
+  }, [engine.handleKeyDown]);
+  const handlePaste = useCallback4((e) => {
+    const ta = textareaRef.current;
+    if (!ta)
+      return;
+    const txt = e.clipboardData.getData("text");
+    const start = ta.selectionStart;
+    const end = ta.selectionEnd;
+    const newText = engine.visible.slice(0, start) + txt + engine.visible.slice(end);
+    e.preventDefault();
+    engine.handleTextChange(newText, start + txt.length);
+  }, [engine.visible, engine.handleTextChange]);
+  const handleBlur = useCallback4(() => {
+    setTimeout(() => engine.closeSuggestions(), 150);
+  }, [engine.closeSuggestions]);
+  const handleSelect = useCallback4((item) => {
+    if (textareaRef.current) {
+      engine.selectOption(item, textareaRef.current);
+    }
+  }, [engine.selectOption]);
+  const showDropdown = engine.activeTrigger !== null && dropdownPos !== null;
+  return /* @__PURE__ */ jsxDEV2("div", {
+    className,
+    style: { position: "relative" },
+    "data-mentionize-container": "",
+    children: [
+      /* @__PURE__ */ jsxDEV2(MentionHighlighter, {
+        visible: engine.visible,
+        mentions: engine.mentions,
+        triggers,
+        textareaRef,
+        className: highlighterClassName,
+        style: SHARED_STYLE
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV2("textarea", {
+        ref: textareaRef,
+        value: engine.visible,
+        onChange: handleChange,
+        onKeyDown: handleKeyDown,
+        onPaste: handlePaste,
+        onBlur: handleBlur,
+        rows,
+        placeholder,
+        disabled,
+        "aria-label": ariaLabel,
+        "aria-describedby": ariaDescribedBy,
+        "aria-autocomplete": "list",
+        "aria-expanded": showDropdown,
+        className: inputClassName,
+        style: {
+          ...SHARED_STYLE,
+          position: "relative",
+          width: "100%",
+          resize: "vertical",
+          background: "transparent",
+          color: "transparent",
+          caretColor: "CanvasText",
+          zIndex: 10
+        },
+        "data-mentionize-input": ""
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV2("div", {
+        ref: mirrorRef,
+        "aria-hidden": true,
+        style: {
+          position: "absolute",
+          top: 0,
+          left: -9999,
+          visibility: "hidden",
+          ...SHARED_STYLE
+        },
+        "data-mentionize-mirror": ""
+      }, undefined, false, undefined, this),
+      showDropdown && engine.activeTrigger && (renderDropdown ? renderDropdown({
+        items: engine.filteredOptions,
+        highlightedIndex: engine.highlightIndex,
+        onSelect: handleSelect,
+        onHighlight: engine.setHighlightIndex,
+        loading: engine.searchLoading,
+        onLoadMore: engine.searchHasMore ? engine.loadMore : undefined
+      }) : /* @__PURE__ */ jsxDEV2(MentionDropdown, {
+        items: engine.filteredOptions,
+        trigger: engine.activeTrigger.trigger,
+        highlightedIndex: engine.highlightIndex,
+        onHighlight: engine.setHighlightIndex,
+        onSelect: handleSelect,
+        onLoadMore: engine.searchHasMore ? engine.loadMore : undefined,
+        loading: engine.searchLoading,
+        position: dropdownPos,
+        width: dropdownWidth,
+        className: dropdownClassName
+      }, undefined, false, undefined, this))
+    ]
+  }, undefined, true, undefined, this);
+});
+MentionInput.displayName = "MentionInput";
+export {
+  useMentionEngine,
+  useCaretPosition,
+  MentionInput,
+  MentionHighlighter,
+  MentionDropdown
+};
+
+//# debugId=436A2E507826B04564756E2164756E21
+//# sourceMappingURL=index.js.map