laif-ds 0.2.80 → 0.2.84

package/dist/components/editor/nodes/mention-node.js

@@ -0,0 +1,113 @@
+"use client";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { useLexicalComposerContext as m } from "../../../node_modules/@lexical/react/LexicalComposerContext.prod.js";
+import { DecoratorNode as u, $getNodeByKey as c } from "../../../node_modules/lexical/Lexical.prod.js";
+import { Icon as _ } from "../../ui/icon.js";
+const p = "bg-d-primary/10 text-d-primary inline-flex items-center gap-0.5 rounded-md py-0.5 pr-0.5 pl-1.5 text-sm font-medium align-baseline", d = "ml-0.5 inline-flex size-5 items-center justify-center rounded-sm hover:bg-d-primary/20 cursor-pointer";
+function b({ nodeKey: n, data: e }) {
+  const [i] = m(), a = () => {
+    i.update(() => {
+      const r = c(n);
+      f(r) && r.remove();
+    });
+  }, l = e.value ? `Mention: ${e.label}, ${e.value}` : `Mention: ${e.label}`;
+  return /* @__PURE__ */ s(
+    "span",
+    {
+      className: p,
+      "data-mention-id": e.id,
+      "aria-roledescription": "mention",
+      "aria-label": l,
+      children: [
+        "@",
+        e.label,
+        /* @__PURE__ */ o(
+          "button",
+          {
+            type: "button",
+            className: d,
+            "aria-label": `Remove mention ${e.label}`,
+            onClick: a,
+            children: /* @__PURE__ */ o(_, { name: "X", size: "xs", "aria-hidden": !0 })
+          }
+        )
+      ]
+    }
+  );
+}
+class t extends u {
+  __mentionId;
+  __mentionLabel;
+  __mentionValue;
+  static getType() {
+    return "mention";
+  }
+  static clone(e) {
+    return new t(
+      {
+        id: e.__mentionId,
+        label: e.__mentionLabel,
+        value: e.__mentionValue
+      },
+      e.__key
+    );
+  }
+  constructor(e, i) {
+    super(i), this.__mentionId = e.id, this.__mentionLabel = e.label, this.__mentionValue = e.value;
+  }
+  static importJSON(e) {
+    return h({
+      id: e.mentionId,
+      label: e.mentionLabel,
+      value: e.mentionValue
+    });
+  }
+  exportJSON() {
+    return {
+      ...super.exportJSON(),
+      type: "mention",
+      version: 1,
+      mentionId: this.__mentionId,
+      mentionLabel: this.__mentionLabel,
+      mentionValue: this.__mentionValue
+    };
+  }
+  static importDOM() {
+    return null;
+  }
+  getMentionData() {
+    return {
+      id: this.__mentionId,
+      label: this.__mentionLabel,
+      value: this.__mentionValue
+    };
+  }
+  // Plain-text representation (used by $rootTextContent, copy/paste, counters).
+  // Intentionally returns the human-readable `@label`, NOT the markdown token —
+  // the token is the markdown-serialization concern (see MENTION_TRANSFORMER),
+  // while plain-text consumers want readable text.
+  getTextContent() {
+    return `@${this.__mentionLabel}`;
+  }
+  createDOM() {
+    const e = document.createElement("span");
+    return e.setAttribute("data-slot", "mention-node"), e;
+  }
+  updateDOM() {
+    return !1;
+  }
+  decorate() {
+    return /* @__PURE__ */ o(b, { nodeKey: this.getKey(), data: this.getMentionData() });
+  }
+}
+function h(n) {
+  return new t(n);
+}
+function f(n) {
+  return n instanceof t;
+}
+export {
+  h as $createMentionNode,
+  f as $isMentionNode,
+  t as MentionNode
+};

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

@@ -0,0 +1,215 @@
+"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: $(
+        "border-d-border bg-d-background z-50 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
+};