@devalok/shilp-sutra 0.32.0 → 0.33.0

package/dist/_chunks/mention-suggestion.js

@@ -0,0 +1,362 @@
+"use client";
+import { jsx as i, jsxs as u } from "react/jsx-runtime";
+import { N as v, R as w, m as N, f as g, g as $, h as S, j as R } from "./tiptap.js";
+import { IconFile as I, IconDownload as A } from "@tabler/icons-react";
+import { Icon as x } from "../ui/icon.js";
+import * as d from "react";
+import { createRoot as j } from "react-dom/client";
+import { cn as k } from "../ui/lib/utils.js";
+import { emojiDataLoaders as h } from "../composed/emoji-picker.js";
+function L(e) {
+  return e < 1024 ? `${e} B` : e < 1024 * 1024 ? `${(e / 1024).toFixed(1)} KB` : `${(e / (1024 * 1024)).toFixed(1)} MB`;
+}
+function z({ node: e }) {
+  const r = /^https?:\/\//.test(e.attrs.url) ? e.attrs.url : "#";
+  return /* @__PURE__ */ i(g, { className: "my-ds-02", children: /* @__PURE__ */ u(
+    "a",
+    {
+      href: r,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      className: "inline-flex items-center gap-ds-03 rounded-ds-md border border-surface-border-strong bg-surface-raised px-ds-04 py-ds-03 text-ds-sm text-surface-fg transition-colors hover:border-surface-border-strong hover:bg-surface-raised-hover",
+      contentEditable: !1,
+      children: [
+        /* @__PURE__ */ i(x, { icon: I, size: "sm", className: "shrink-0 text-surface-fg-subtle" }),
+        /* @__PURE__ */ i("span", { className: "truncate", children: e.attrs.name }),
+        /* @__PURE__ */ u("span", { className: "shrink-0 text-surface-fg-subtle", children: [
+          "(",
+          L(e.attrs.size),
+          ")"
+        ] }),
+        /* @__PURE__ */ i(x, { icon: A, size: "sm", className: "shrink-0 text-surface-fg-subtle" })
+      ]
+    }
+  ) });
+}
+const O = v.create({
+  name: "fileAttachment",
+  group: "block",
+  atom: !0,
+  addAttributes() {
+    return {
+      url: { default: null },
+      name: { default: "Untitled" },
+      size: { default: 0 }
+    };
+  },
+  parseHTML() {
+    return [{ tag: "div[data-file-attachment]" }];
+  },
+  renderHTML({ HTMLAttributes: e }) {
+    return ["div", N({ "data-file-attachment": "" }, e)];
+  },
+  addNodeView() {
+    return w(z);
+  }
+}), E = (e) => `https://cdn.jsdelivr.net/npm/emoji-datasource-${e}@15.0.1/img/${e}/sheets-256/64.png`, f = 61, m = 61;
+let y = null, c = null;
+async function D(e) {
+  if (y === e && c) return c;
+  const t = await (h[e] ?? h.native)();
+  return c = t.default ?? t, y = e, c;
+}
+function W(e, r) {
+  const t = e.emojis[r];
+  if (!t) return null;
+  const s = t.skins[0];
+  return s ? {
+    id: t.id,
+    name: t.name,
+    native: s.native,
+    x: s.x ?? 0,
+    y: s.y ?? 0
+  } : null;
+}
+function C(e, r, t = 8) {
+  const s = Object.values(e.emojis);
+  if (!r)
+    return s.slice(0, t).map((n) => ({
+      id: n.id,
+      name: n.name,
+      native: n.skins[0]?.native ?? "",
+      x: n.skins[0]?.x ?? 0,
+      y: n.skins[0]?.y ?? 0
+    }));
+  const a = r.toLowerCase(), o = [];
+  for (const n of s) {
+    if (o.length >= t) break;
+    (n.id.includes(a) || n.name.toLowerCase().includes(a) || n.keywords?.some((l) => l.includes(a))) && o.push({
+      id: n.id,
+      name: n.name,
+      native: n.skins[0]?.native ?? "",
+      x: n.skins[0]?.x ?? 0,
+      y: n.skins[0]?.y ?? 0
+    });
+  }
+  return o;
+}
+function H({ node: e }) {
+  const { native: r, set: t, x: s, y: a } = e.attrs;
+  if (t === "native")
+    return /* @__PURE__ */ i(g, { as: "span", className: "inline", children: /* @__PURE__ */ i("span", { children: r }) });
+  const o = `${100 * f}% ${100 * m}%`, n = `${100 / (f - 1) * s}% ${100 / (m - 1) * a}%`;
+  return /* @__PURE__ */ i(g, { as: "span", className: "inline", children: /* @__PURE__ */ i(
+    "span",
+    {
+      role: "img",
+      "aria-label": r,
+      className: "inline-block h-[1.2em] w-[1.2em] align-text-bottom",
+      style: {
+        backgroundImage: `url(${E(t)})`,
+        backgroundSize: o,
+        backgroundPosition: n
+      }
+    }
+  ) });
+}
+const q = v.create({
+  name: "emojiNode",
+  group: "inline",
+  inline: !0,
+  atom: !0,
+  selectable: !1,
+  addAttributes() {
+    return {
+      id: { default: null },
+      native: { default: null },
+      set: { default: "native" },
+      x: { default: 0 },
+      y: { default: 0 }
+    };
+  },
+  renderText({ node: e }) {
+    return e.attrs.native ?? "";
+  },
+  parseHTML() {
+    return [{
+      tag: "span[data-emoji-id]",
+      getAttrs: (e) => {
+        const r = e;
+        return {
+          id: r.getAttribute("data-emoji-id"),
+          set: r.getAttribute("data-emoji-set") ?? "native",
+          x: parseInt(r.getAttribute("data-emoji-x") ?? "0", 10),
+          y: parseInt(r.getAttribute("data-emoji-y") ?? "0", 10),
+          native: r.textContent ?? ""
+        };
+      }
+    }];
+  },
+  renderHTML({ node: e }) {
+    return ["span", {
+      "data-emoji-id": e.attrs.id,
+      "data-emoji-set": e.attrs.set,
+      "data-emoji-x": e.attrs.x,
+      "data-emoji-y": e.attrs.y,
+      role: "img",
+      "aria-label": e.attrs.native
+    }, e.attrs.native ?? ""];
+  },
+  addNodeView() {
+    return w(H);
+  }
+});
+function K({ emoji: e, set: r, size: t = "1.2em" }) {
+  return r === "native" ? /* @__PURE__ */ i("span", { style: { fontSize: t }, children: e.native }) : /* @__PURE__ */ i(
+    "span",
+    {
+      role: "img",
+      "aria-label": e.native,
+      className: "inline-block",
+      style: {
+        width: t,
+        height: t,
+        backgroundImage: `url(${E(r)})`,
+        backgroundSize: `${100 * f}% ${100 * m}%`,
+        backgroundPosition: `${100 / (f - 1) * e.x}% ${100 / (m - 1) * e.y}%`
+      }
+    }
+  );
+}
+const p = d.forwardRef(
+  ({ items: e, set: r, command: t }, s) => {
+    const [a, o] = d.useState(0);
+    return d.useEffect(() => o(0), [e]), d.useImperativeHandle(s, () => ({
+      onKeyDown: ({ event: n }) => n.key === "ArrowUp" ? (o((l) => (l + e.length - 1) % e.length), !0) : n.key === "ArrowDown" ? (o((l) => (l + 1) % e.length), !0) : n.key === "Enter" ? (e[a] && t(e[a]), !0) : !1
+    })), e.length ? /* @__PURE__ */ i("div", { role: "listbox", "aria-label": "Emoji suggestions", className: "z-popover max-h-[200px] overflow-x-hidden overflow-y-auto rounded-ds-md border border-surface-border-strong bg-surface-overlay shadow-raised-hover", children: e.map((n, l) => /* @__PURE__ */ u(
+      "button",
+      {
+        type: "button",
+        role: "option",
+        "aria-selected": l === a,
+        onClick: () => t(n),
+        className: k(
+          "flex w-full items-center gap-ds-03 px-ds-04 py-ds-02b text-left text-ds-sm",
+          l === a ? "bg-surface-raised text-surface-fg" : "text-surface-fg-muted hover:bg-surface-raised"
+        ),
+        children: [
+          /* @__PURE__ */ i(K, { emoji: n, set: r, size: "1.25em" }),
+          /* @__PURE__ */ u("span", { className: "truncate", children: [
+            ":",
+            n.id,
+            ":"
+          ] })
+        ]
+      },
+      n.id
+    )) }) : null;
+  }
+);
+p.displayName = "EmojiList";
+function T(e) {
+  return () => {
+    let r = null, t = null, s = null;
+    return {
+      onStart: (a) => {
+        t = document.createElement("div"), t.style.position = "absolute", t.style.zIndex = "1400";
+        const o = a.clientRect?.();
+        o && (t.style.left = `${o.left}px`, t.style.top = `${o.bottom + 4}px`), document.body.appendChild(t), r = j(t), r.render(
+          /* @__PURE__ */ i(
+            p,
+            {
+              ref: (n) => {
+                s = n;
+              },
+              items: a.items,
+              set: e,
+              command: (n) => a.command(n)
+            }
+          )
+        );
+      },
+      onUpdate: (a) => {
+        if (!r || !t) return;
+        const o = a.clientRect?.();
+        o && (t.style.left = `${o.left}px`, t.style.top = `${o.bottom + 4}px`), r.render(
+          /* @__PURE__ */ i(
+            p,
+            {
+              ref: (n) => {
+                s = n;
+              },
+              items: a.items,
+              set: e,
+              command: (n) => a.command(n)
+            }
+          )
+        );
+      },
+      onKeyDown: (a) => a.event.key === "Escape" ? (t && (r?.unmount(), t.remove(), t = null, r = null), !0) : s?.onKeyDown(a) ?? !1,
+      onExit: () => {
+        t && (r?.unmount(), t.remove(), t = null, r = null);
+      }
+    };
+  };
+}
+function G(e = "native") {
+  return $.create({
+    name: "emojiSuggestion",
+    addProseMirrorPlugins() {
+      return [
+        S({
+          pluginKey: new R("emojiSuggestion"),
+          editor: this.editor,
+          char: ":",
+          items: async ({ query: r }) => {
+            const t = await D(e);
+            return C(t, r, 8);
+          },
+          command: ({ editor: r, range: t, props: s }) => {
+            const a = s;
+            r.chain().focus().deleteRange(t).insertContent({
+              type: "emojiNode",
+              attrs: { id: a.id, native: a.native, set: e, x: a.x, y: a.y }
+            }).run();
+          },
+          render: T(e)
+        })
+      ];
+    }
+  });
+}
+const b = d.forwardRef(
+  ({ items: e, command: r }, t) => {
+    const [s, a] = d.useState(0);
+    return d.useEffect(() => a(0), [e]), d.useImperativeHandle(t, () => ({
+      onKeyDown: ({ event: o }) => o.key === "ArrowUp" ? (a((n) => (n + e.length - 1) % e.length), !0) : o.key === "ArrowDown" ? (a((n) => (n + 1) % e.length), !0) : o.key === "Enter" ? (e[s] && r(e[s]), !0) : !1
+    })), e.length ? /* @__PURE__ */ i("div", { role: "listbox", "aria-label": "Mention suggestions", className: "z-popover overflow-hidden rounded-ds-md border border-surface-border-strong bg-surface-overlay shadow-raised-hover", children: e.map((o, n) => /* @__PURE__ */ u(
+      "button",
+      {
+        type: "button",
+        role: "option",
+        "aria-selected": n === s,
+        onClick: () => r(o),
+        className: k(
+          "flex w-full items-center gap-ds-03 px-ds-04 py-ds-02b text-left text-ds-sm",
+          n === s ? "bg-surface-raised text-surface-fg" : "text-surface-fg-muted hover:bg-surface-raised"
+        ),
+        children: [
+          o.avatar ? /* @__PURE__ */ i("img", { src: o.avatar, alt: "", className: "h-ico-md w-ico-md rounded-ds-full object-cover" }) : /* @__PURE__ */ i("span", { className: "flex h-ico-md w-ico-md items-center justify-center rounded-ds-full bg-accent-2 text-[10px] font-semibold text-accent-11", children: o.label.charAt(0).toUpperCase() }),
+          /* @__PURE__ */ i("span", { children: o.label })
+        ]
+      },
+      o.id
+    )) }) : null;
+  }
+);
+b.displayName = "MentionList";
+function J(e) {
+  return () => {
+    let r = null, t = null, s = null;
+    return {
+      onStart: (a) => {
+        t = document.createElement("div"), t.style.position = "absolute", t.style.zIndex = "1400";
+        const o = a.clientRect?.();
+        o && (t.style.left = `${o.left}px`, t.style.top = `${o.bottom + 4}px`), document.body.appendChild(t), r = j(t), r.render(
+          /* @__PURE__ */ i(
+            b,
+            {
+              ref: (n) => {
+                s = n;
+              },
+              items: a.items,
+              command: (n) => {
+                a.command({ id: n.id, label: n.label }), e?.(n);
+              }
+            }
+          )
+        );
+      },
+      onUpdate: (a) => {
+        if (!r || !t) return;
+        const o = a.clientRect?.();
+        o && (t.style.left = `${o.left}px`, t.style.top = `${o.bottom + 4}px`), r.render(
+          /* @__PURE__ */ i(
+            b,
+            {
+              ref: (n) => {
+                s = n;
+              },
+              items: a.items,
+              command: (n) => {
+                a.command({ id: n.id, label: n.label }), e?.(n);
+              }
+            }
+          )
+        );
+      },
+      onKeyDown: (a) => a.event.key === "Escape" ? (t && (r?.unmount(), t.remove(), t = null, r = null), !0) : s?.onKeyDown(a) ?? !1,
+      onExit: () => {
+        t && (r?.unmount(), t.remove(), t = null, r = null);
+      }
+    };
+  };
+}
+export {
+  q as E,
+  O as F,
+  J as a,
+  W as b,
+  G as c,
+  D as l
+};