laif-ds 0.2.83 → 0.2.85

package/dist/components/editor/plugins/mention-plugin.js

@@ -0,0 +1,224 @@
+"use client";
+import { jsx as d, jsxs as C } from "react/jsx-runtime";
+import { useLexicalComposerContext as I } from "../../../node_modules/@lexical/react/LexicalComposerContext.prod.js";
+import { useBasicTypeaheadTriggerMatch as P, LexicalTypeaheadMenuPlugin as U, MenuOption as q } from "../../../node_modules/@lexical/react/LexicalTypeaheadMenuPlugin.prod.js";
+import { $createTextNode as F } from "../../../node_modules/lexical/Lexical.prod.js";
+import { useState as N, useRef as L, useEffect as x, useMemo as Q, useCallback as _ } from "react";
+import { createPortal as j } from "react-dom";
+import { MentionNode as z, $createMentionNode as T, $isMentionNode as B } from "../nodes/mention-node.js";
+import { cn as $ } from "../../../lib/utils.js";
+const w = "app-editor-mention-menu", E = (e) => `${w}-option-${e}`;
+class H extends q {
+  item;
+  constructor(t) {
+    super(String(t.id)), this.item = t;
+  }
+}
+function V(e, t) {
+  const o = t.trim().toLowerCase();
+  return o ? e.filter(
+    (n) => n.label.toLowerCase().split(/\s+/).some((i) => i.startsWith(o))
+  ) : e;
+}
+const v = (e) => {
+  try {
+    return decodeURIComponent(e);
+  } catch {
+    return e;
+  }
+}, ne = {
+  dependencies: [z],
+  export: (e) => {
+    if (!B(e)) return null;
+    const { id: t, label: o, value: n } = e.getMentionData(), i = encodeURIComponent(o), a = encodeURIComponent(String(t)), m = n ? `?v=${encodeURIComponent(n)}` : "";
+    return `@[${i}](mention:${a}${m})`;
+  },
+  importRegExp: /@\[([^\]]*)\]\(mention:([^?)]+)(?:\?v=([^)]*))?\)/,
+  regExp: /@\[([^\]]*)\]\(mention:([^?)]+)(?:\?v=([^)]*))?\)$/,
+  replace: (e, t) => {
+    const [, o, n, i] = t, a = T({
+      id: v(n),
+      label: v(o),
+      value: i ? v(i) : void 0
+    });
+    e.replace(a);
+  },
+  trigger: ")",
+  type: "text-match"
+};
+function oe({ source: e, trigger: t }) {
+  const [o] = I(), [n, i] = N(null), a = typeof e == "function", [m, f] = N([]), [l, r] = N("idle"), c = L(e);
+  c.current = e;
+  const y = L(!0);
+  x(
+    () => () => {
+      y.current = !1;
+    },
+    []
+  ), x(() => {
+    if (n === null || l !== "idle") return;
+    const s = c.current;
+    typeof s == "function" && (r("loading"), Promise.resolve(s()).then(
+      (u) => {
+        y.current && (f(u), r("ready"));
+      },
+      () => {
+        y.current && r("error");
+      }
+    ));
+  }, [n, l]), x(() => {
+    n === null && l === "error" && r("idle");
+  }, [n, l]);
+  const R = a ? m : e, p = a ? l : "ready", O = t.length === 1 ? t : "@", k = P(O, {
+    minLength: 0
+  }), g = Q(
+    () => V(R, n ?? "").map(
+      (s) => new H(s)
+    ),
+    [R, n]
+  ), A = _(
+    (s, u, M) => {
+      o.update(() => {
+        const h = T({
+          id: s.item.id,
+          label: s.item.label,
+          value: s.item.value
+        });
+        u && u.replace(h);
+        const b = F(" ");
+        h.insertAfter(b), b.select(), M();
+      });
+    },
+    [o]
+  );
+  return /* @__PURE__ */ d(
+    U,
+    {
+      onQueryChange: i,
+      onSelectOption: A,
+      triggerFn: k,
+      options: g,
+      menuRenderFn: (s, { selectedIndex: u, selectOptionAndCleanUp: M, setHighlightedIndex: h }) => {
+        if (s.current === null)
+          return null;
+        const b = p === "loading" || p === "error", D = (n ?? "").length > 0, S = p === "ready" && D && g.length === 0;
+        return !b && g.length === 0 && !S ? null : j(
+          /* @__PURE__ */ d(
+            W,
+            {
+              options: g,
+              selectedIndex: u,
+              status: p,
+              showEmptyState: S,
+              query: n ?? "",
+              onHighlight: h,
+              onSelect: M
+            }
+          ),
+          s.current
+        );
+      }
+    }
+  );
+}
+function W({
+  options: e,
+  selectedIndex: t,
+  status: o,
+  showEmptyState: n,
+  query: i,
+  onHighlight: a,
+  onSelect: m
+}) {
+  const [f] = I(), l = o === "ready" && !n && e.length > 0;
+  return x(() => {
+    const r = f.getRootElement();
+    if (r)
+      return l && t !== null ? r.setAttribute(
+        "aria-activedescendant",
+        E(t)
+      ) : r.removeAttribute("aria-activedescendant"), () => {
+        r.removeAttribute("aria-activedescendant");
+      };
+  }, [f, t, l]), /* @__PURE__ */ d(
+    "ul",
+    {
+      id: w,
+      role: "listbox",
+      "aria-label": "People you can mention",
+      "aria-busy": o === "loading",
+      "data-slot": "mention-menu",
+      className: $(
+        // The menu is portaled to <body>. Inside a laif-ds Dialog two things
+        // break there, both fixed on this element:
+        //   - `relative z-[60]`: z-index is INERT on a statically-positioned
+        //     element, so the menu must be positioned (`relative`) for `z-[60]`
+        //     to take effect and paint ABOVE the Dialog (z-50). Same z convention
+        //     as popover.tsx.
+        //   - `pointer-events-auto`: Radix sets `pointer-events:none` on <body>
+        //     while a modal is open; the portaled menu inherits it and its options
+        //     stop receiving clicks. Re-enable pointer events on the menu itself.
+        "border-d-border bg-d-background pointer-events-auto relative z-[60] max-h-60 min-w-52 overflow-auto rounded-md border p-1 shadow-md"
+      ),
+      children: o === "loading" ? /* @__PURE__ */ d(
+        "li",
+        {
+          role: "presentation",
+          className: "text-d-muted-foreground px-2 py-1.5 text-sm",
+          children: "Loading…"
+        }
+      ) : o === "error" ? /* @__PURE__ */ d(
+        "li",
+        {
+          role: "presentation",
+          className: "text-d-muted-foreground px-2 py-1.5 text-sm",
+          children: "Couldn't load mentions"
+        }
+      ) : n ? /* @__PURE__ */ C(
+        "li",
+        {
+          role: "presentation",
+          className: "text-d-muted-foreground px-2 py-1.5 text-sm",
+          children: [
+            'No matches for "',
+            i,
+            '"'
+          ]
+        }
+      ) : e.map((r, c) => /* @__PURE__ */ C(
+        "li",
+        {
+          id: E(c),
+          role: "option",
+          "aria-selected": t === c,
+          ref: r.setRefElement,
+          tabIndex: -1,
+          className: $(
+            "flex cursor-pointer flex-col rounded-sm px-2 py-1.5 text-sm",
+            t === c ? "bg-d-accent text-d-accent-foreground" : "text-d-foreground"
+          ),
+          onMouseEnter: () => a(c),
+          onClick: () => m(r),
+          children: [
+            /* @__PURE__ */ d("span", { className: "font-medium", children: r.item.label }),
+            r.item.sublabel && /* @__PURE__ */ d("span", { className: "text-d-muted-foreground text-xs", children: r.item.sublabel })
+          ]
+        },
+        r.key
+      ))
+    }
+  );
+}
+function re(e) {
+  const t = /* @__PURE__ */ new Set(), o = [];
+  for (const n of e) {
+    const i = n.getMentionData(), a = String(i.id);
+    t.has(a) || (t.add(a), o.push(i));
+  }
+  return o;
+}
+export {
+  ne as MENTION_TRANSFORMER,
+  oe as MentionPlugin,
+  re as collectMentions
+};

package/dist/components/editor/plugins/toolbar/mention-insert-toolbar-plugin.js

@@ -0,0 +1,41 @@
+"use client";
+import { jsx as r } from "react/jsx-runtime";
+import { $getSelection as i, $isRangeSelection as c, $getRoot as a } from "../../../../node_modules/lexical/Lexical.prod.js";
+import { useToolbarContext as f } from "../../context/toolbar-context.js";
+import { Toggle as m } from "../../../ui/toggle.js";
+import p from "../../../../node_modules/lucide-react/dist/esm/icons/at-sign.js";
+function l(n, t) {
+  const { anchor: o } = n;
+  let e = "";
+  return o.type === "text" && (e = o.getNode().getTextContent().slice(0, o.offset).slice(-1)), e !== "" && !/[\s(]/.test(e) ? ` ${t}` : t;
+}
+function T({ trigger: n }) {
+  const { activeEditor: t } = f();
+  return /* @__PURE__ */ r(
+    m,
+    {
+      "aria-label": "Insert mention",
+      variant: "outline",
+      size: "sm",
+      pressed: !1,
+      onClick: () => {
+        t.focus(), t.update(() => {
+          const e = i();
+          if (c(e)) {
+            e.insertText(l(e, n));
+            return;
+          }
+          a().selectEnd();
+          const s = i();
+          c(s) && s.insertText(
+            l(s, n)
+          );
+        });
+      },
+      children: /* @__PURE__ */ r(p, { className: "h-4 w-4" })
+    }
+  );
+}
+export {
+  T as MentionInsertToolbarPlugin
+};

package/dist/components/ui/app-editor.js

@@ -1,169 +1,207 @@
 "use client";
-import { jsx as r, jsxs as e, Fragment as s } from "react/jsx-runtime";
-import { ListNode as S, ListItemNode as T } from "../../node_modules/@lexical/list/LexicalList.prod.js";
-import { $convertToMarkdownString as L, $convertFromMarkdownString as k, TRANSFORMERS as A } from "../../node_modules/@lexical/markdown/LexicalMarkdown.prod.js";
-import { CheckListPlugin as j } from "../../node_modules/@lexical/react/LexicalCheckListPlugin.prod.js";
-import { ClearEditorPlugin as O } from "../../node_modules/@lexical/react/LexicalClearEditorPlugin.prod.js";
-import { LexicalComposer as $ } from "../../node_modules/@lexical/react/LexicalComposer.prod.js";
-import { useLexicalComposerContext as B } from "../../node_modules/@lexical/react/LexicalComposerContext.prod.js";
-import { LexicalErrorBoundary as D } from "../../node_modules/@lexical/react/LexicalErrorBoundary.prod.js";
-import { HistoryPlugin as H } from "../../node_modules/@lexical/react/LexicalHistoryPlugin.prod.js";
-import { ListPlugin as I } from "../../node_modules/@lexical/react/LexicalListPlugin.prod.js";
-import { OnChangePlugin as M } from "../../node_modules/@lexical/react/LexicalOnChangePlugin.prod.js";
-import { RichTextPlugin as U } from "../../node_modules/@lexical/react/LexicalRichTextPlugin.prod.js";
-import { HeadingNode as z, QuoteNode as Q } from "../../node_modules/@lexical/rich-text/LexicalRichText.prod.js";
-import { ParagraphNode as d, TextNode as f, $getRoot as p } from "../../node_modules/lexical/Lexical.prod.js";
-import { useState as _, useEffect as J } from "react";
-import { ContentEditable as q } from "../editor/editor-ui/content-editable.js";
-import { ActionsPlugin as G } from "../editor/plugins/actions/actions-plugin.js";
-import { ClearEditorActionPlugin as K } from "../editor/plugins/actions/clear-editor-plugin.js";
-import { CounterCharacterPlugin as W } from "../editor/plugins/actions/counter-character-plugin.js";
-import { FormatBulletedList as X } from "../editor/plugins/toolbar/block-format/format-bulleted-list.js";
-import { FormatCheckList as Y } from "../editor/plugins/toolbar/block-format/format-check-list.js";
-import { FormatHeading as Z } from "../editor/plugins/toolbar/block-format/format-heading.js";
-import { FormatNumberedList as V } from "../editor/plugins/toolbar/block-format/format-numbered-list.js";
-import { FormatParagraph as rr } from "../editor/plugins/toolbar/block-format/format-paragraph.js";
-import { FormatQuote as or } from "../editor/plugins/toolbar/block-format/format-quote.js";
-import { BlockFormatDropDown as er } from "../editor/plugins/toolbar/block-format-toolbar-plugin.js";
-import { FontFormatToolbarPlugin as l } from "../editor/plugins/toolbar/font-format-toolbar-plugin.js";
-import { ToolbarPlugin as c } from "../editor/plugins/toolbar/toolbar-plugin.js";
-import { editorTheme as tr } from "../editor/themes/editor-theme.js";
-import { TooltipProvider as ir } from "./tooltip.js";
-import { HistoryToolbarPlugin as nr } from "../editor/plugins/toolbar/history-toolbar-plugin.js";
-import { cn as ar } from "../../lib/utils.js";
-const lr = "Start typing...", mr = {
+import { jsx as r, jsxs as t, Fragment as p } from "react/jsx-runtime";
+import { ListNode as D, ListItemNode as H } from "../../node_modules/@lexical/list/LexicalList.prod.js";
+import { TRANSFORMERS as z, $convertToMarkdownString as U, $convertFromMarkdownString as _ } from "../../node_modules/@lexical/markdown/LexicalMarkdown.prod.js";
+import { CheckListPlugin as Q } from "../../node_modules/@lexical/react/LexicalCheckListPlugin.prod.js";
+import { ClearEditorPlugin as J } from "../../node_modules/@lexical/react/LexicalClearEditorPlugin.prod.js";
+import { LexicalComposer as q } from "../../node_modules/@lexical/react/LexicalComposer.prod.js";
+import { useLexicalComposerContext as G } from "../../node_modules/@lexical/react/LexicalComposerContext.prod.js";
+import { LexicalErrorBoundary as K } from "../../node_modules/@lexical/react/LexicalErrorBoundary.prod.js";
+import { HistoryPlugin as W } from "../../node_modules/@lexical/react/LexicalHistoryPlugin.prod.js";
+import { ListPlugin as X } from "../../node_modules/@lexical/react/LexicalListPlugin.prod.js";
+import { OnChangePlugin as Y } from "../../node_modules/@lexical/react/LexicalOnChangePlugin.prod.js";
+import { RichTextPlugin as Z } from "../../node_modules/@lexical/react/LexicalRichTextPlugin.prod.js";
+import { HeadingNode as V, QuoteNode as rr } from "../../node_modules/@lexical/rich-text/LexicalRichText.prod.js";
+import { ParagraphNode as g, TextNode as h, $nodesOfType as or, $getRoot as b } from "../../node_modules/lexical/Lexical.prod.js";
+import { useState as er, useMemo as tr, useEffect as ir } from "react";
+import { ContentEditable as nr } from "../editor/editor-ui/content-editable.js";
+import { MentionNode as S } from "../editor/nodes/mention-node.js";
+import { ActionsPlugin as lr } from "../editor/plugins/actions/actions-plugin.js";
+import { ClearEditorActionPlugin as ar } from "../editor/plugins/actions/clear-editor-plugin.js";
+import { CounterCharacterPlugin as sr } from "../editor/plugins/actions/counter-character-plugin.js";
+import { MENTION_TRANSFORMER as mr, MentionPlugin as cr, collectMentions as dr } from "../editor/plugins/mention-plugin.js";
+import { FormatBulletedList as fr } from "../editor/plugins/toolbar/block-format/format-bulleted-list.js";
+import { FormatCheckList as pr } from "../editor/plugins/toolbar/block-format/format-check-list.js";
+import { FormatHeading as ur } from "../editor/plugins/toolbar/block-format/format-heading.js";
+import { FormatNumberedList as gr } from "../editor/plugins/toolbar/block-format/format-numbered-list.js";
+import { FormatParagraph as hr } from "../editor/plugins/toolbar/block-format/format-paragraph.js";
+import { FormatQuote as br } from "../editor/plugins/toolbar/block-format/format-quote.js";
+import { BlockFormatDropDown as xr } from "../editor/plugins/toolbar/block-format-toolbar-plugin.js";
+import { FontFormatToolbarPlugin as d } from "../editor/plugins/toolbar/font-format-toolbar-plugin.js";
+import { MentionInsertToolbarPlugin as Nr } from "../editor/plugins/toolbar/mention-insert-toolbar-plugin.js";
+import { ToolbarPlugin as u } from "../editor/plugins/toolbar/toolbar-plugin.js";
+import { editorTheme as vr } from "../editor/themes/editor-theme.js";
+import { TooltipProvider as Er } from "./tooltip.js";
+import { HistoryToolbarPlugin as Fr } from "../editor/plugins/toolbar/history-toolbar-plugin.js";
+import { cn as Pr } from "../../lib/utils.js";
+const yr = "Start typing...", Cr = {
   format: ["underline"],
   tag: "++",
   type: "text-format"
-}, v = [
-  ...A,
-  mr
-], sr = (o) => o.replace(/<u>(.*?)<\/u>/g, "++$1++"), cr = (o) => o.replace(/\+\+(.+?)\+\+/g, "<u>$1</u>");
-function dr({
+}, w = [
+  ...z,
+  Cr
+], Rr = (o) => o.replace(/<u>(.*?)<\/u>/g, "++$1++"), Tr = (o) => o.replace(/\+\+(.+?)\+\+/g, "<u>$1</u>");
+function Sr({
   defaultValue: o,
-  onlyMarkdown: i
+  onlyMarkdown: a,
+  transformers: n
 }) {
-  const [n] = B();
-  return J(() => {
-    o && n.update(() => {
-      i ? k(
-        sr(o),
-        v
-      ) : p().append(
-        new d().append(new f(o))
+  const [s] = G();
+  return ir(() => {
+    o && s.update(() => {
+      a ? _(
+        Rr(o),
+        n
+      ) : b().append(
+        new g().append(new h(o))
       );
-      const a = p();
-      (a.getFirstChild() ?? a).selectStart();
+      const m = b();
+      (m.getFirstChild() ?? m).selectStart();
     });
-  }, [n, o, i]), null;
+  }, [s, o, a, n]), null;
 }
-function _r({
+function co({
   defaultValue: o,
-  onMarkdownEdit: i,
-  plugins: n = [],
-  toolbars: a = [],
-  placeholder: F = lr,
-  onlyMarkdown: h = !0,
-  className: C = "rounded-lg border border-d-border",
-  wrpClassName: E = ""
+  onMarkdownEdit: a,
+  onValueChange: n,
+  plugins: s = [],
+  toolbars: m = [],
+  placeholder: M = yr,
+  onlyMarkdown: x = !0,
+  className: L = "rounded-lg border border-d-border",
+  wrpClassName: A = "",
+  mentions: c,
+  mentionTrigger: N = "@"
 }) {
-  const [, P] = _(null), w = {
+  const [, k] = er(null), l = c !== void 0, v = tr(
+    () => l ? [mr, ...w] : w,
+    [l]
+  ), O = {
     namespace: "AppEditor",
-    theme: tr,
+    theme: vr,
     nodes: [
-      z,
-      d,
-      f,
-      Q,
-      S,
-      T
+      V,
+      g,
+      h,
+      rr,
+      D,
+      H,
+      ...l ? [S] : []
     ],
-    onError: (t) => {
-      console.error(t);
+    onError: (e) => {
+      console.error(e);
     },
-    ...o && !h ? {
+    ...o && !x ? {
       editorState: () => {
-        p().append(
-          new d().append(new f(o))
+        b().append(
+          new g().append(new h(o))
         );
       }
     } : {}
-  }, u = (t) => n.includes(t), m = (t) => a.includes(t), g = u("clear"), x = u("counter"), b = m("block-format"), y = m("font-format"), N = m("history");
-  return /* @__PURE__ */ r("div", { className: ar("bg-d-background flex h-96 flex-col", E), children: /* @__PURE__ */ r($, { initialConfig: w, children: /* @__PURE__ */ e(ir, { children: [
+  }, E = (e) => s.includes(e), f = (e) => m.includes(e), F = E("clear"), P = E("counter"), y = f("block-format"), I = f("font-format"), C = f("history");
+  return /* @__PURE__ */ r("div", { className: Pr("bg-d-background flex h-96 flex-col", A), children: /* @__PURE__ */ r(q, { initialConfig: O, children: /* @__PURE__ */ t(Er, { children: [
     o && /* @__PURE__ */ r(
-      dr,
+      Sr,
       {
         defaultValue: o,
-        onlyMarkdown: h
+        onlyMarkdown: x,
+        transformers: v
       }
     ),
-    /* @__PURE__ */ e("div", { className: "border-d-border flex items-center border-b", children: [
-      N && /* @__PURE__ */ r(c, { children: () => /* @__PURE__ */ r("div", { className: "vertical-align-middle sticky top-0 z-10 flex gap-2 overflow-auto p-1", children: /* @__PURE__ */ r(nr, {}) }) }),
-      b && /* @__PURE__ */ r(c, { children: () => /* @__PURE__ */ r(s, { children: /* @__PURE__ */ r("div", { className: "vertical-align-middle sticky top-0 z-10 flex gap-2 overflow-auto p-1", children: /* @__PURE__ */ e(er, { children: [
-        /* @__PURE__ */ r(rr, {}),
-        /* @__PURE__ */ r(Z, { levels: ["h1", "h2", "h3"] }),
-        /* @__PURE__ */ r(V, {}),
-        /* @__PURE__ */ r(X, {}),
-        /* @__PURE__ */ r(Y, {}),
-        /* @__PURE__ */ r(or, {})
+    l && /* @__PURE__ */ r(cr, { source: c, trigger: N }),
+    /* @__PURE__ */ t("div", { className: "border-d-border flex items-center border-b", children: [
+      C && /* @__PURE__ */ r(u, { children: () => /* @__PURE__ */ r("div", { className: "vertical-align-middle sticky top-0 z-10 flex gap-2 overflow-auto p-1", children: /* @__PURE__ */ r(Fr, {}) }) }),
+      y && /* @__PURE__ */ r(u, { children: () => /* @__PURE__ */ r(p, { children: /* @__PURE__ */ r("div", { className: "vertical-align-middle sticky top-0 z-10 flex gap-2 overflow-auto p-1", children: /* @__PURE__ */ t(xr, { children: [
+        /* @__PURE__ */ r(hr, {}),
+        /* @__PURE__ */ r(ur, { levels: ["h1", "h2", "h3"] }),
+        /* @__PURE__ */ r(gr, {}),
+        /* @__PURE__ */ r(fr, {}),
+        /* @__PURE__ */ r(pr, {}),
+        /* @__PURE__ */ r(br, {})
       ] }) }) }) }),
-      y && /* @__PURE__ */ r(c, { children: () => /* @__PURE__ */ e("div", { className: "vertical-align-middle sticky top-0 z-10 flex gap-2 overflow-auto p-1", children: [
-        /* @__PURE__ */ r(l, { format: "bold" }),
-        /* @__PURE__ */ r(l, { format: "italic" }),
-        /* @__PURE__ */ r(l, { format: "underline" }),
-        /* @__PURE__ */ r(l, { format: "strikethrough" })
+      I && /* @__PURE__ */ r(u, { children: () => /* @__PURE__ */ t("div", { className: "vertical-align-middle sticky top-0 z-10 flex gap-2 overflow-auto p-1", children: [
+        /* @__PURE__ */ r(d, { format: "bold" }),
+        /* @__PURE__ */ r(d, { format: "italic" }),
+        /* @__PURE__ */ r(d, { format: "underline" }),
+        /* @__PURE__ */ r(d, { format: "strikethrough" }),
+        l && /* @__PURE__ */ r(
+          Nr,
+          {
+            trigger: N ?? "@"
+          }
+        )
       ] }) })
     ] }),
-    /* @__PURE__ */ e("div", { className: "relative flex min-h-0 w-full flex-1 flex-col", children: [
-      N && /* @__PURE__ */ r(H, {}),
+    /* @__PURE__ */ t("div", { className: "relative flex min-h-0 w-full flex-1 flex-col", children: [
+      C && /* @__PURE__ */ r(W, {}),
       /* @__PURE__ */ r(
-        U,
+        Z,
         {
-          ErrorBoundary: D,
+          ErrorBoundary: K,
           contentEditable: /* @__PURE__ */ r(
             "div",
             {
-              ref: P,
+              ref: k,
               className: "flex min-h-0 w-full flex-1 overflow-auto",
               children: /* @__PURE__ */ r(
-                q,
+                nr,
                 {
-                  placeholder: F,
-                  className: `border-d-border w-full rounded-none border-b ${C}`
+                  placeholder: M,
+                  className: `border-d-border w-full rounded-none border-b ${L}`
                 }
               )
             }
           )
         }
       ),
-      b && /* @__PURE__ */ e(s, { children: [
-        /* @__PURE__ */ r(I, {}),
-        /* @__PURE__ */ r(j, {})
+      y && /* @__PURE__ */ t(p, { children: [
+        /* @__PURE__ */ r(X, {}),
+        /* @__PURE__ */ r(Q, {})
       ] }),
-      (g || x) && /* @__PURE__ */ r(G, { children: /* @__PURE__ */ e("div", { className: "clear-both flex items-center justify-between gap-2 p-1", children: [
+      (F || P) && /* @__PURE__ */ r(lr, { children: /* @__PURE__ */ t("div", { className: "clear-both flex items-center justify-between gap-2 p-1", children: [
         /* @__PURE__ */ r("div", { className: "flex flex-1 justify-start" }),
-        /* @__PURE__ */ r("div", { children: x && /* @__PURE__ */ r(W, { charset: "UTF-16" }) }),
-        /* @__PURE__ */ r("div", { className: "flex flex-1 justify-end gap-2", children: g && /* @__PURE__ */ e(s, { children: [
-          /* @__PURE__ */ r(K, {}),
-          /* @__PURE__ */ r(O, {})
+        /* @__PURE__ */ r("div", { children: P && /* @__PURE__ */ r(sr, { charset: "UTF-16" }) }),
+        /* @__PURE__ */ r("div", { className: "flex flex-1 justify-end gap-2", children: F && /* @__PURE__ */ t(p, { children: [
+          /* @__PURE__ */ r(ar, {}),
+          /* @__PURE__ */ r(J, {})
         ] }) })
       ] }) })
     ] }),
     /* @__PURE__ */ r(
-      M,
+      Y,
       {
         ignoreSelectionChange: !0,
-        onChange: (t) => {
-          if (!i) return;
-          const R = t.read(
-            () => L(v)
+        onChange: (e) => {
+          if (!n && !a) return;
+          const R = Tr(
+            e.read(() => U(v))
           );
-          i(cr(R));
+          if (!n) {
+            a?.(R);
+            return;
+          }
+          let T = [];
+          if (l) {
+            const $ = e.read(
+              () => dr(or(S))
+            ), j = Array.isArray(c) ? c : [], B = new Map(
+              j.map((i) => [String(i.id), i])
+            );
+            T = $.map(
+              (i) => B.get(String(i.id)) ?? {
+                id: i.id,
+                label: i.label,
+                value: i.value
+              }
+            );
+          }
+          n(R, { mentions: T });
         }
       }
     )
   ] }) }) });
 }
 export {
-  _r as AppEditor
+  co as AppEditor
 };