mentionize 0.0.5 → 0.0.6

package/dist/esm/index.js

@@ -1,895 +1,3 @@
-// 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,
-  loadingContent,
-  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;
-        const optCls = typeof trigger.optionClassName === "function" ? trigger.optionClassName(item) : trigger.optionClassName;
-        if (trigger.renderOption) {
-          return /* @__PURE__ */ jsxDEV("div", {
-            role: "option",
-            "aria-selected": isHighlighted,
-            className: optCls,
-            "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,
-          className: optCls,
-          "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: loadingContent ?? "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,
-  getItemForMention,
-  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 triggerMap = new Map;
-    for (const t of triggers) {
-      triggerMap.set(t.trigger, t);
-    }
-    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 t = triggerMap.get(m.trigger);
-      let cls = "mentionize-mention";
-      if (t) {
-        if (typeof t.mentionClassName === "function") {
-          const item = getItemForMention?.(m.trigger, m.key) ?? null;
-          cls = t.mentionClassName({
-            key: m.key,
-            displayText: m.displayText,
-            trigger: m.trigger,
-            item
-          });
-        } else if (t.mentionClassName) {
-          cls = t.mentionClassName;
-        }
-      }
-      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, getItemForMention]);
-  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 (parsed.item !== undefined) {
-          if (!cache.has(parsed.key) || cache.get(parsed.key) === null) {
-            cache.set(parsed.key, parsed.item);
-          }
-        } else 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 getItemForMention = useCallback3((triggerChar, key) => {
-    const cache = getCache(triggerChar);
-    return cache.get(key) ?? null;
-  }, []);
-  const selectOption = useCallback3((item, textarea) => {
-    if (!activeTrigger)
-      return;
-    const t = activeTrigger.trigger;
-    if (t.onSelect) {
-      const before2 = visible.slice(0, activeTrigger.startPos);
-      const after2 = visible.slice(textarea.selectionStart);
-      const savedStartPos = activeTrigger.startPos;
-      setActiveTrigger(null);
-      const result = t.onSelect(item);
-      const applyResult = (value) => {
-        if (value !== null) {
-          const newVis2 = before2 + value + after2;
-          const pos2 = savedStartPos + value.length;
-          caretPosRef.current = pos2;
-          setVisible(newVis2);
-          emitSync(newVis2);
-        } else {
-          const newVis2 = before2 + after2;
-          caretPosRef.current = savedStartPos;
-          setVisible(newVis2);
-          emitSync(newVis2);
-        }
-      };
-      if (result instanceof Promise) {
-        result.then(applyResult);
-      } else {
-        applyResult(result);
-      }
-      return;
-    }
-    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,
-    getItemForMention
-  };
-}
-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,
-  loadingContent,
-  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,
-        getItemForMention: engine.getItemForMention,
-        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,
-        loadingContent,
-        position: dropdownPos,
-        width: dropdownWidth,
-        className: dropdownClassName
-      }, undefined, false, undefined, this))
-    ]
-  }, undefined, true, undefined, this);
-});
-MentionInput.displayName = "MentionInput";
 export {
   useMentionEngine,
   useCaretPosition,
@@ -898,5 +6,5 @@ export {
   MentionDropdown
 };
 
-//# debugId=A096570B392F408364756E2164756E21
+//# debugId=82EBD10CCBB1553564756E2164756E21
 //# sourceMappingURL=index.js.map