@devalok/shilp-sutra 0.31.0 → 0.33.0

package/dist/composed/rich-text-editor.js

@@ -1,235 +1,13 @@
 "use client";
-import { jsx as n, jsxs as p } from "react/jsx-runtime";
-import * as c from "react";
-import { N as Z, R as ee, m as te, a as ne, E as re, S as se, u as M, U as P, T as U, b as K, P as ie, H as $, c as q, d as O, L as V, I as F, M as W, e as G } from "../_chunks/tiptap.js";
-import { IconFile as oe, IconDownload as le, IconBold as ae, IconItalic as ce, IconUnderline as ue, IconStrikethrough as de, IconHighlight as fe, IconH2 as me, IconH3 as he, IconBlockquote as ge, IconList as be, IconListNumbers as pe, IconListCheck as ke, IconCode as xe, IconPhoto as ve, IconPaperclip as ye, IconLineDashed as we, IconAlignLeft as Ae, IconAlignCenter as _e, IconAlignRight as Le, IconMoodSmile as Ie, IconArrowBackUp as Ce, IconArrowForwardUp as Re, IconLink as Ee } from "@tabler/icons-react";
-import { Icon as u } from "../ui/icon.js";
-import { createRoot as J } from "react-dom/client";
-import { cn as x } from "../ui/lib/utils.js";
-import { useColorMode as ze } from "../hooks/use-color-mode.js";
-function Ne(e) {
-  return e < 1024 ? `${e} B` : e < 1024 * 1024 ? `${(e / 1024).toFixed(1)} KB` : `${(e / (1024 * 1024)).toFixed(1)} MB`;
-}
-function Te({ node: e }) {
-  const r = /^https?:\/\//.test(e.attrs.url) ? e.attrs.url : "#";
-  return /* @__PURE__ */ n(ne, { className: "my-ds-02", children: /* @__PURE__ */ p(
-    "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__ */ n(u, { icon: oe, size: "sm", className: "shrink-0 text-surface-fg-subtle" }),
-        /* @__PURE__ */ n("span", { className: "truncate", children: e.attrs.name }),
-        /* @__PURE__ */ p("span", { className: "shrink-0 text-surface-fg-subtle", children: [
-          "(",
-          Ne(e.attrs.size),
-          ")"
-        ] }),
-        /* @__PURE__ */ n(u, { icon: le, size: "sm", className: "shrink-0 text-surface-fg-subtle" })
-      ]
-    }
-  ) });
-}
-const Q = Z.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", te({ "data-file-attachment": "" }, e)];
-  },
-  addNodeView() {
-    return ee(Te);
-  }
-}), H = c.forwardRef(
-  ({ items: e, command: r }, s) => {
-    const [o, i] = c.useState(0);
-    return c.useEffect(() => i(0), [e]), c.useImperativeHandle(s, () => ({
-      onKeyDown: ({ event: t }) => t.key === "ArrowUp" ? (i((l) => (l + e.length - 1) % e.length), !0) : t.key === "ArrowDown" ? (i((l) => (l + 1) % e.length), !0) : t.key === "Enter" ? (e[o] && r(e[o]), !0) : !1
-    })), e.length ? /* @__PURE__ */ n("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((t, l) => /* @__PURE__ */ p(
-      "button",
-      {
-        type: "button",
-        role: "option",
-        "aria-selected": l === o,
-        onClick: () => r(t),
-        className: x(
-          "flex w-full items-center gap-ds-03 px-ds-04 py-ds-02b text-left text-ds-sm",
-          l === o ? "bg-surface-raised text-surface-fg" : "text-surface-fg-muted hover:bg-surface-raised"
-        ),
-        children: [
-          t.avatar ? /* @__PURE__ */ n("img", { src: t.avatar, alt: "", className: "h-ico-md w-ico-md rounded-ds-full object-cover" }) : /* @__PURE__ */ n("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: t.label.charAt(0).toUpperCase() }),
-          /* @__PURE__ */ n("span", { children: t.label })
-        ]
-      },
-      t.id
-    )) }) : null;
-  }
-);
-H.displayName = "MentionList";
-function Se(e) {
-  return () => {
-    let r = null, s = null, o = null;
-    return {
-      onStart: (i) => {
-        s = document.createElement("div"), s.style.position = "absolute", s.style.zIndex = "1400";
-        const t = i.clientRect?.();
-        t && (s.style.left = `${t.left}px`, s.style.top = `${t.bottom + 4}px`), document.body.appendChild(s), r = J(s), r.render(
-          /* @__PURE__ */ n(
-            H,
-            {
-              ref: (l) => {
-                o = l;
-              },
-              items: i.items,
-              command: (l) => {
-                i.command({ id: l.id, label: l.label }), e?.(l);
-              }
-            }
-          )
-        );
-      },
-      onUpdate: (i) => {
-        if (!r || !s) return;
-        const t = i.clientRect?.();
-        t && (s.style.left = `${t.left}px`, s.style.top = `${t.bottom + 4}px`), r.render(
-          /* @__PURE__ */ n(
-            H,
-            {
-              ref: (l) => {
-                o = l;
-              },
-              items: i.items,
-              command: (l) => {
-                i.command({ id: l.id, label: l.label }), e?.(l);
-              }
-            }
-          )
-        );
-      },
-      onKeyDown: (i) => i.event.key === "Escape" ? (s && (r?.unmount(), s.remove(), s = null, r = null), !0) : o?.onKeyDown(i) ?? !1,
-      onExit: () => {
-        s && (r?.unmount(), s.remove(), s = null, r = null);
-      }
-    };
-  };
-}
-let _ = null;
-async function He() {
-  if (_) return _;
-  const e = await import("@emoji-mart/data"), r = e.default ?? e;
-  return _ = Object.values(r.emojis).map((s) => ({
-    id: s.id,
-    name: s.name,
-    native: s.skins[0]?.native ?? ""
-  })), _;
-}
-const j = c.forwardRef(
-  ({ items: e, command: r }, s) => {
-    const [o, i] = c.useState(0);
-    return c.useEffect(() => i(0), [e]), c.useImperativeHandle(s, () => ({
-      onKeyDown: ({ event: t }) => t.key === "ArrowUp" ? (i((l) => (l + e.length - 1) % e.length), !0) : t.key === "ArrowDown" ? (i((l) => (l + 1) % e.length), !0) : t.key === "Enter" ? (e[o] && r(e[o]), !0) : !1
-    })), e.length ? /* @__PURE__ */ n("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((t, l) => /* @__PURE__ */ p(
-      "button",
-      {
-        type: "button",
-        role: "option",
-        "aria-selected": l === o,
-        onClick: () => r(t),
-        className: x(
-          "flex w-full items-center gap-ds-03 px-ds-04 py-ds-02b text-left text-ds-sm",
-          l === o ? "bg-surface-raised text-surface-fg" : "text-surface-fg-muted hover:bg-surface-raised"
-        ),
-        children: [
-          /* @__PURE__ */ n("span", { className: "text-ds-base", children: t.native }),
-          /* @__PURE__ */ p("span", { className: "truncate", children: [
-            ":",
-            t.id,
-            ":"
-          ] })
-        ]
-      },
-      t.id
-    )) }) : null;
-  }
-);
-j.displayName = "EmojiList";
-function je() {
-  return () => {
-    let e = null, r = null, s = null;
-    return {
-      onStart: (o) => {
-        r = document.createElement("div"), r.style.position = "absolute", r.style.zIndex = "1400";
-        const i = o.clientRect?.();
-        i && (r.style.left = `${i.left}px`, r.style.top = `${i.bottom + 4}px`), document.body.appendChild(r), e = J(r), e.render(
-          /* @__PURE__ */ n(
-            j,
-            {
-              ref: (t) => {
-                s = t;
-              },
-              items: o.items,
-              command: (t) => o.command(t)
-            }
-          )
-        );
-      },
-      onUpdate: (o) => {
-        if (!e || !r) return;
-        const i = o.clientRect?.();
-        i && (r.style.left = `${i.left}px`, r.style.top = `${i.bottom + 4}px`), e.render(
-          /* @__PURE__ */ n(
-            j,
-            {
-              ref: (t) => {
-                s = t;
-              },
-              items: o.items,
-              command: (t) => o.command(t)
-            }
-          )
-        );
-      },
-      onKeyDown: (o) => o.event.key === "Escape" ? (r && (e?.unmount(), r.remove(), r = null, e = null), !0) : s?.onKeyDown(o) ?? !1,
-      onExit: () => {
-        r && (e?.unmount(), r.remove(), r = null, e = null);
-      }
-    };
-  };
-}
-const Be = re.create({
-  name: "emojiSuggestion",
-  addProseMirrorPlugins() {
-    return [
-      se({
-        editor: this.editor,
-        char: ":",
-        items: async ({ query: e }) => {
-          const r = await He();
-          return e ? r.filter(
-            (s) => s.id.includes(e.toLowerCase()) || s.name.toLowerCase().includes(e.toLowerCase())
-          ).slice(0, 8) : r.slice(0, 8);
-        },
-        command: ({ editor: e, range: r, props: s }) => {
-          e.chain().focus().deleteRange(r).insertContent(s.native).run();
-        },
-        render: je()
-      })
-    ];
-  }
-}), X = [
+import { jsxs as y, jsx as e } from "react/jsx-runtime";
+import * as d from "react";
+import { u as j, i as q, P as Q, a as D, L as U, b as M, c as O, d as K, E as $, e as V } from "../_chunks/tiptap.js";
+import { F as W, E as X, a as Y, c as Z, l as G, b as F } from "../_chunks/mention-suggestion.js";
+import { useColorMode as ee } from "../hooks/use-color-mode.js";
+import { cn as L } from "../ui/lib/utils.js";
+import { IconBold as te, IconItalic as ie, IconUnderline as se, IconStrikethrough as ne, IconHighlight as re, IconH2 as oe, IconH3 as le, IconBlockquote as ce, IconList as ae, IconListNumbers as de, IconListCheck as ue, IconCode as fe, IconPhoto as he, IconPaperclip as ge, IconLineDashed as me, IconAlignLeft as be, IconAlignCenter as pe, IconAlignRight as ke, IconMoodSmile as ve, IconArrowBackUp as xe, IconArrowForwardUp as Ae, IconLink as _e } from "@tabler/icons-react";
+import { Icon as l } from "../ui/icon.js";
+const J = [
   "prose prose-sm max-w-none",
   "font-body text-ds-md leading-relaxed text-surface-fg",
   "[&_h2]:text-ds-xl [&_h2]:mb-ds-03 [&_h2]:mt-ds-05 [&_h2]:text-surface-fg",
@@ -248,353 +26,406 @@ const Be = re.create({
   "[&_img]:max-w-full [&_img]:rounded-ds-md [&_img]:my-ds-03",
   "[&_.mention]:rounded-ds-sm [&_.mention]:bg-accent-2 [&_.mention]:px-ds-02 [&_.mention]:py-[1px] [&_.mention]:font-medium [&_.mention]:text-accent-11"
 ];
-function d({
-  onClick: e,
-  isActive: r = !1,
-  disabled: s = !1,
-  title: o,
-  children: i
+function c({
+  onClick: i,
+  isActive: u = !1,
+  disabled: f = !1,
+  title: h,
+  children: g
 }) {
-  return /* @__PURE__ */ n(
+  return /* @__PURE__ */ e(
     "button",
     {
       type: "button",
-      onClick: e,
-      disabled: s,
-      title: o,
-      "aria-pressed": r,
-      className: x(
+      onClick: i,
+      disabled: f,
+      title: h,
+      "aria-label": h,
+      "aria-pressed": u,
+      className: L(
         "inline-flex h-ds-xs-plus w-ds-xs-plus items-center justify-center rounded-ds-md transition-colors duration-fast-01 ease-productive-standard",
         "hover:bg-surface-raised-hover",
         "disabled:pointer-events-none disabled:opacity-action-disabled",
-        r ? "bg-surface-raised-hover text-accent-11" : "text-surface-fg-subtle"
+        u ? "bg-surface-raised-hover text-accent-11" : "text-surface-fg-subtle"
       ),
-      children: i
+      children: g
     }
   );
 }
-function De({ editor: e }) {
-  const [r, s] = c.useState(!1), [o, i] = c.useState(""), t = c.useRef(null), l = () => {
-    if (e.isActive("link")) {
-      e.chain().focus().unsetLink().run();
-      return;
-    }
-    const h = e.getAttributes("link").href || "";
-    i(h), s(!0), setTimeout(() => t.current?.focus(), 0);
-  }, k = (h) => {
-    h.preventDefault(), o.trim() && e.chain().focus().setLink({ href: o.trim() }).run(), s(!1), i("");
-  }, g = (h) => {
-    h.key === "Escape" && (s(!1), i(""), e.commands.focus());
-  };
-  return /* @__PURE__ */ p("div", { className: "relative", children: [
-    /* @__PURE__ */ n(d, { onClick: l, isActive: e.isActive("link"), title: "Link", children: /* @__PURE__ */ n(u, { icon: Ee, size: "sm" }) }),
-    r && /* @__PURE__ */ p(
+function Le({ editor: i }) {
+  const [u, f] = d.useState(!1), [h, g] = d.useState(""), n = d.useRef(null), { isLink: t } = V({
+    editor: i,
+    selector: ({ editor: m }) => ({ isLink: m.isActive("link") })
+  });
+  return /* @__PURE__ */ y("div", { className: "relative", children: [
+    /* @__PURE__ */ e(c, { onClick: () => {
+      if (t) {
+        i.chain().focus().unsetLink().run();
+        return;
+      }
+      const m = i.getAttributes("link").href || "";
+      g(m), f(!0), setTimeout(() => n.current?.focus(), 0);
+    }, isActive: t, title: "Link", children: /* @__PURE__ */ e(l, { icon: _e, size: "sm" }) }),
+    u && /* @__PURE__ */ y(
       "form",
       {
-        onSubmit: k,
+        onSubmit: (m) => {
+          m.preventDefault(), h.trim() && i.chain().focus().setLink({ href: h.trim() }).run(), f(!1), g("");
+        },
         "aria-label": "Edit link URL",
         className: "absolute left-0 top-full z-popover mt-ds-01 flex items-center gap-ds-02 rounded-ds-md border border-surface-border-strong bg-surface-overlay p-ds-02 shadow-raised-hover",
         children: [
-          /* @__PURE__ */ n(
+          /* @__PURE__ */ e(
             "input",
             {
-              ref: t,
+              ref: n,
               type: "url",
-              value: o,
-              onChange: (h) => i(h.target.value),
-              onKeyDown: g,
+              value: h,
+              onChange: (m) => g(m.target.value),
+              onKeyDown: (m) => {
+                m.key === "Escape" && (f(!1), g(""), i.commands.focus());
+              },
               placeholder: "https://...",
               className: "h-ds-sm w-[240px] rounded-ds-sm border border-surface-border-strong bg-surface-overlay px-ds-03 text-ds-sm text-surface-fg focus:border-accent-7 focus:outline-none"
             }
           ),
-          /* @__PURE__ */ n("button", { type: "submit", className: "h-ds-sm rounded-ds-sm bg-accent-9 px-ds-03 text-ds-sm text-accent-fg hover:bg-accent-10", children: "Apply" })
+          /* @__PURE__ */ e("button", { type: "submit", className: "h-ds-sm rounded-ds-sm bg-accent-9 px-ds-03 text-ds-sm text-accent-fg hover:bg-accent-10", children: "Apply" })
         ]
       }
     )
   ] });
 }
-function y() {
-  return /* @__PURE__ */ n("div", { className: "mx-ds-02 h-[16px] w-px bg-surface-border" });
+function _() {
+  return /* @__PURE__ */ e("div", { className: "mx-ds-02 h-[16px] w-px bg-surface-border" });
 }
-function Me({ editor: e, toolbar: r, onImageClick: s, onFileClick: o, onEmojiClick: i }) {
-  const t = (C) => !r || r.includes(C), l = t("bold") || t("italic") || t("underline") || t("strike") || t("highlight"), k = t("h2") || t("h3") || t("blockquote"), g = t("bulletList") || t("orderedList") || t("taskList") || t("codeBlock"), h = t("link") || !!s && t("image") || !!o && t("file") || t("hr"), v = t("alignLeft") || t("alignCenter") || t("alignRight"), L = !!i && t("emoji"), I = t("undo") || t("redo");
-  return /* @__PURE__ */ p("div", { className: "flex flex-wrap items-center gap-ds-01 border-b border-surface-border-strong px-ds-04 py-ds-02b", children: [
-    t("bold") && /* @__PURE__ */ n(d, { onClick: () => e.chain().focus().toggleBold().run(), isActive: e.isActive("bold"), title: "Bold", children: /* @__PURE__ */ n(u, { icon: ae, size: "sm", stroke: "bold" }) }),
-    t("italic") && /* @__PURE__ */ n(d, { onClick: () => e.chain().focus().toggleItalic().run(), isActive: e.isActive("italic"), title: "Italic", children: /* @__PURE__ */ n(u, { icon: ce, size: "sm", stroke: "bold" }) }),
-    t("underline") && /* @__PURE__ */ n(d, { onClick: () => e.chain().focus().toggleUnderline().run(), isActive: e.isActive("underline"), title: "Underline", children: /* @__PURE__ */ n(u, { icon: ue, size: "sm", stroke: "bold" }) }),
-    t("strike") && /* @__PURE__ */ n(d, { onClick: () => e.chain().focus().toggleStrike().run(), isActive: e.isActive("strike"), title: "Strikethrough", children: /* @__PURE__ */ n(u, { icon: de, size: "sm", stroke: "bold" }) }),
-    t("highlight") && /* @__PURE__ */ n(d, { onClick: () => e.chain().focus().toggleHighlight().run(), isActive: e.isActive("highlight"), title: "Highlight", children: /* @__PURE__ */ n(u, { icon: fe, size: "sm", stroke: "bold" }) }),
-    l && k && /* @__PURE__ */ n(y, {}),
-    t("h2") && /* @__PURE__ */ n(d, { onClick: () => e.chain().focus().toggleHeading({ level: 2 }).run(), isActive: e.isActive("heading", { level: 2 }), title: "Heading 2", children: /* @__PURE__ */ n(u, { icon: me, size: "sm", stroke: "bold" }) }),
-    t("h3") && /* @__PURE__ */ n(d, { onClick: () => e.chain().focus().toggleHeading({ level: 3 }).run(), isActive: e.isActive("heading", { level: 3 }), title: "Heading 3", children: /* @__PURE__ */ n(u, { icon: he, size: "sm", stroke: "bold" }) }),
-    t("blockquote") && /* @__PURE__ */ n(d, { onClick: () => e.chain().focus().toggleBlockquote().run(), isActive: e.isActive("blockquote"), title: "Blockquote", children: /* @__PURE__ */ n(u, { icon: ge, size: "sm", stroke: "bold" }) }),
-    k && g && /* @__PURE__ */ n(y, {}),
-    t("bulletList") && /* @__PURE__ */ n(d, { onClick: () => e.chain().focus().toggleBulletList().run(), isActive: e.isActive("bulletList"), title: "Bullet list", children: /* @__PURE__ */ n(u, { icon: be, size: "sm", stroke: "bold" }) }),
-    t("orderedList") && /* @__PURE__ */ n(d, { onClick: () => e.chain().focus().toggleOrderedList().run(), isActive: e.isActive("orderedList"), title: "Ordered list", children: /* @__PURE__ */ n(u, { icon: pe, size: "sm", stroke: "bold" }) }),
-    t("taskList") && /* @__PURE__ */ n(d, { onClick: () => e.chain().focus().toggleTaskList().run(), isActive: e.isActive("taskList"), title: "Task list", children: /* @__PURE__ */ n(u, { icon: ke, size: "sm", stroke: "bold" }) }),
-    t("codeBlock") && /* @__PURE__ */ n(d, { onClick: () => e.chain().focus().toggleCodeBlock().run(), isActive: e.isActive("codeBlock"), title: "Code block", children: /* @__PURE__ */ n(u, { icon: xe, size: "sm", stroke: "bold" }) }),
-    g && h && /* @__PURE__ */ n(y, {}),
-    t("link") && /* @__PURE__ */ n(De, { editor: e }),
-    s && t("image") && /* @__PURE__ */ n(d, { onClick: s, title: "Insert image", children: /* @__PURE__ */ n(u, { icon: ve, size: "sm" }) }),
-    o && t("file") && /* @__PURE__ */ n(d, { onClick: o, title: "Attach file", children: /* @__PURE__ */ n(u, { icon: ye, size: "sm" }) }),
-    t("hr") && /* @__PURE__ */ n(d, { onClick: () => e.chain().focus().setHorizontalRule().run(), title: "Horizontal rule", children: /* @__PURE__ */ n(u, { icon: we, size: "sm" }) }),
-    h && v && /* @__PURE__ */ n(y, {}),
-    t("alignLeft") && /* @__PURE__ */ n(d, { onClick: () => e.chain().focus().setTextAlign("left").run(), isActive: e.isActive({ textAlign: "left" }), title: "Align left", children: /* @__PURE__ */ n(u, { icon: Ae, size: "sm" }) }),
-    t("alignCenter") && /* @__PURE__ */ n(d, { onClick: () => e.chain().focus().setTextAlign("center").run(), isActive: e.isActive({ textAlign: "center" }), title: "Align center", children: /* @__PURE__ */ n(u, { icon: _e, size: "sm" }) }),
-    t("alignRight") && /* @__PURE__ */ n(d, { onClick: () => e.chain().focus().setTextAlign("right").run(), isActive: e.isActive({ textAlign: "right" }), title: "Align right", children: /* @__PURE__ */ n(u, { icon: Le, size: "sm" }) }),
-    v && (L || I) && /* @__PURE__ */ n(y, {}),
-    i && t("emoji") && /* @__PURE__ */ n(d, { onClick: i, title: "Emoji", children: /* @__PURE__ */ n(u, { icon: Ie, size: "sm" }) }),
-    t("undo") && /* @__PURE__ */ n(d, { onClick: () => e.chain().focus().undo().run(), disabled: !e.can().undo(), title: "Undo", children: /* @__PURE__ */ n(u, { icon: Ce, size: "sm" }) }),
-    t("redo") && /* @__PURE__ */ n(d, { onClick: () => e.chain().focus().redo().run(), disabled: !e.can().redo(), title: "Redo", children: /* @__PURE__ */ n(u, { icon: Re, size: "sm" }) })
+function ye({ editor: i, toolbar: u, onImageClick: f, onFileClick: h, onEmojiClick: g }) {
+  const n = V({
+    editor: i,
+    selector: ({ editor: o }) => ({
+      isBold: o.isActive("bold"),
+      isItalic: o.isActive("italic"),
+      isUnderline: o.isActive("underline"),
+      isStrike: o.isActive("strike"),
+      isHighlight: o.isActive("highlight"),
+      isH2: o.isActive("heading", { level: 2 }),
+      isH3: o.isActive("heading", { level: 3 }),
+      isBlockquote: o.isActive("blockquote"),
+      isBulletList: o.isActive("bulletList"),
+      isOrderedList: o.isActive("orderedList"),
+      isTaskList: o.isActive("taskList"),
+      isCodeBlock: o.isActive("codeBlock"),
+      isLink: o.isActive("link"),
+      isAlignLeft: o.isActive({ textAlign: "left" }),
+      isAlignCenter: o.isActive({ textAlign: "center" }),
+      isAlignRight: o.isActive({ textAlign: "right" }),
+      canUndo: o.can().undo(),
+      canRedo: o.can().redo()
+    })
+  }), t = (o) => !u || u.includes(o), A = t("bold") || t("italic") || t("underline") || t("strike") || t("highlight"), p = t("h2") || t("h3") || t("blockquote"), k = t("bulletList") || t("orderedList") || t("taskList") || t("codeBlock"), m = t("link") || !!f && t("image") || !!h && t("file") || t("hr"), C = t("alignLeft") || t("alignCenter") || t("alignRight"), v = !!g && t("emoji"), R = t("undo") || t("redo");
+  return /* @__PURE__ */ y("div", { role: "toolbar", "aria-label": "Text formatting", className: "flex flex-wrap items-center gap-ds-01 border-b border-surface-border-strong px-ds-04 py-ds-02b", children: [
+    t("bold") && /* @__PURE__ */ e(c, { onClick: () => i.chain().focus().toggleBold().run(), isActive: n.isBold, title: "Bold", children: /* @__PURE__ */ e(l, { icon: te, size: "sm", stroke: "bold" }) }),
+    t("italic") && /* @__PURE__ */ e(c, { onClick: () => i.chain().focus().toggleItalic().run(), isActive: n.isItalic, title: "Italic", children: /* @__PURE__ */ e(l, { icon: ie, size: "sm", stroke: "bold" }) }),
+    t("underline") && /* @__PURE__ */ e(c, { onClick: () => i.chain().focus().toggleUnderline().run(), isActive: n.isUnderline, title: "Underline", children: /* @__PURE__ */ e(l, { icon: se, size: "sm", stroke: "bold" }) }),
+    t("strike") && /* @__PURE__ */ e(c, { onClick: () => i.chain().focus().toggleStrike().run(), isActive: n.isStrike, title: "Strikethrough", children: /* @__PURE__ */ e(l, { icon: ne, size: "sm", stroke: "bold" }) }),
+    t("highlight") && /* @__PURE__ */ e(c, { onClick: () => i.chain().focus().toggleHighlight().run(), isActive: n.isHighlight, title: "Highlight", children: /* @__PURE__ */ e(l, { icon: re, size: "sm", stroke: "bold" }) }),
+    A && p && /* @__PURE__ */ e(_, {}),
+    t("h2") && /* @__PURE__ */ e(c, { onClick: () => i.chain().focus().toggleHeading({ level: 2 }).run(), isActive: n.isH2, title: "Heading 2", children: /* @__PURE__ */ e(l, { icon: oe, size: "sm", stroke: "bold" }) }),
+    t("h3") && /* @__PURE__ */ e(c, { onClick: () => i.chain().focus().toggleHeading({ level: 3 }).run(), isActive: n.isH3, title: "Heading 3", children: /* @__PURE__ */ e(l, { icon: le, size: "sm", stroke: "bold" }) }),
+    t("blockquote") && /* @__PURE__ */ e(c, { onClick: () => i.chain().focus().toggleBlockquote().run(), isActive: n.isBlockquote, title: "Blockquote", children: /* @__PURE__ */ e(l, { icon: ce, size: "sm", stroke: "bold" }) }),
+    p && k && /* @__PURE__ */ e(_, {}),
+    t("bulletList") && /* @__PURE__ */ e(c, { onClick: () => i.chain().focus().toggleBulletList().run(), isActive: n.isBulletList, title: "Bullet list", children: /* @__PURE__ */ e(l, { icon: ae, size: "sm", stroke: "bold" }) }),
+    t("orderedList") && /* @__PURE__ */ e(c, { onClick: () => i.chain().focus().toggleOrderedList().run(), isActive: n.isOrderedList, title: "Ordered list", children: /* @__PURE__ */ e(l, { icon: de, size: "sm", stroke: "bold" }) }),
+    t("taskList") && /* @__PURE__ */ e(c, { onClick: () => i.chain().focus().toggleTaskList().run(), isActive: n.isTaskList, title: "Task list", children: /* @__PURE__ */ e(l, { icon: ue, size: "sm", stroke: "bold" }) }),
+    t("codeBlock") && /* @__PURE__ */ e(c, { onClick: () => i.chain().focus().toggleCodeBlock().run(), isActive: n.isCodeBlock, title: "Code block", children: /* @__PURE__ */ e(l, { icon: fe, size: "sm", stroke: "bold" }) }),
+    k && m && /* @__PURE__ */ e(_, {}),
+    t("link") && /* @__PURE__ */ e(Le, { editor: i }),
+    f && t("image") && /* @__PURE__ */ e(c, { onClick: f, title: "Insert image", children: /* @__PURE__ */ e(l, { icon: he, size: "sm" }) }),
+    h && t("file") && /* @__PURE__ */ e(c, { onClick: h, title: "Attach file", children: /* @__PURE__ */ e(l, { icon: ge, size: "sm" }) }),
+    t("hr") && /* @__PURE__ */ e(c, { onClick: () => i.chain().focus().setHorizontalRule().run(), title: "Horizontal rule", children: /* @__PURE__ */ e(l, { icon: me, size: "sm" }) }),
+    m && C && /* @__PURE__ */ e(_, {}),
+    t("alignLeft") && /* @__PURE__ */ e(c, { onClick: () => i.chain().focus().setTextAlign("left").run(), isActive: n.isAlignLeft, title: "Align left", children: /* @__PURE__ */ e(l, { icon: be, size: "sm" }) }),
+    t("alignCenter") && /* @__PURE__ */ e(c, { onClick: () => i.chain().focus().setTextAlign("center").run(), isActive: n.isAlignCenter, title: "Align center", children: /* @__PURE__ */ e(l, { icon: pe, size: "sm" }) }),
+    t("alignRight") && /* @__PURE__ */ e(c, { onClick: () => i.chain().focus().setTextAlign("right").run(), isActive: n.isAlignRight, title: "Align right", children: /* @__PURE__ */ e(l, { icon: ke, size: "sm" }) }),
+    C && (v || R) && /* @__PURE__ */ e(_, {}),
+    g && t("emoji") && /* @__PURE__ */ e(c, { onClick: g, title: "Emoji", children: /* @__PURE__ */ e(l, { icon: ve, size: "sm" }) }),
+    t("undo") && /* @__PURE__ */ e(c, { onClick: () => i.chain().focus().undo().run(), disabled: !n.canUndo, title: "Undo", children: /* @__PURE__ */ e(l, { icon: xe, size: "sm" }) }),
+    t("redo") && /* @__PURE__ */ e(c, { onClick: () => i.chain().focus().redo().run(), disabled: !n.canRedo, title: "Redo", children: /* @__PURE__ */ e(l, { icon: Ae, size: "sm" }) })
   ] });
 }
-const Pe = c.lazy(() => import("@emoji-mart/react"));
-function Ue({ onSelect: e }) {
-  const [r, s] = c.useState(null), { colorMode: o } = ze();
-  c.useEffect(() => {
-    import("@emoji-mart/data").then((t) => s(t.default));
-  }, []);
-  const i = /* @__PURE__ */ n("div", { className: "flex h-[350px] w-[352px] items-center justify-center rounded-ds-lg border border-surface-border-strong bg-surface-overlay shadow-raised-hover", children: /* @__PURE__ */ n("span", { className: "text-ds-sm text-surface-fg-subtle", children: "Loading..." }) });
-  return r ? /* @__PURE__ */ n(c.Suspense, { fallback: i, children: /* @__PURE__ */ n(
-    Pe,
+const Ce = d.lazy(() => import("@emoji-mart/react"));
+function we({ set: i = "native", onSelect: u }) {
+  const [f, h] = d.useState(null), { colorMode: g } = ee();
+  d.useEffect(() => {
+    G(i).then((t) => h(t));
+  }, [i]);
+  const n = /* @__PURE__ */ e("div", { className: "flex h-[350px] w-[352px] items-center justify-center rounded-ds-lg border border-surface-border-strong bg-surface-overlay shadow-raised-hover", children: /* @__PURE__ */ e("span", { className: "text-ds-sm text-surface-fg-subtle", children: "Loading..." }) });
+  return f ? /* @__PURE__ */ e(d.Suspense, { fallback: n, children: /* @__PURE__ */ e(
+    Ce,
     {
-      data: r,
-      onEmojiSelect: (t) => e(t.native),
-      theme: o === "dark" ? "dark" : "light",
+      data: f,
+      set: i,
+      onEmojiSelect: (t) => u({ id: t.id, native: t.native }),
+      theme: g === "dark" ? "dark" : "light",
       previewPosition: "none",
       skinTonePosition: "none"
     }
-  ) }) : i;
+  ) }) : n;
 }
-const Ke = c.forwardRef(
+const Ie = d.forwardRef(
   function({
-    content: r = "",
-    placeholder: s = "Start writing...",
-    onChange: o,
-    className: i,
-    editable: t = !0,
-    toolbar: l,
-    onImageUpload: k,
-    onFileUpload: g,
-    mentions: h,
-    onMentionSearch: v,
-    onMentionSelect: L,
-    ...I
-  }, C) {
-    const R = c.useRef(null), E = c.useRef(!1), [z, w] = c.useState(!1), N = c.useRef(null), B = c.useRef(null), D = c.useRef(null), T = async (a) => {
-      const f = R.current;
-      if (f)
-        if (k) {
-          const m = await k(a);
-          m && /^https?:\/\//i.test(m) && f.chain().focus().setImage({ src: m }).run();
+    content: u = "",
+    placeholder: f = "Start writing...",
+    onChange: h,
+    className: g,
+    editable: n = !0,
+    toolbar: t,
+    onImageUpload: A,
+    onFileUpload: p,
+    mentions: k,
+    onMentionSearch: m,
+    onMentionSelect: C,
+    emojiSet: v = "native",
+    ...R
+  }, o) {
+    const z = d.useRef(null), T = d.useRef(!1), [E, w] = d.useState(!1), B = d.useRef(null), N = d.useRef(null), P = d.useRef(null), H = async (s) => {
+      const r = z.current;
+      if (r)
+        if (A) {
+          const a = await A(s);
+          a && /^https?:\/\//i.test(a) && r.chain().focus().setImage({ src: a }).run();
         } else {
-          const m = new FileReader();
-          m.onload = () => {
-            f.chain().focus().setImage({ src: m.result }).run();
-          }, m.readAsDataURL(a);
+          const a = new FileReader();
+          a.onload = () => {
+            r.chain().focus().setImage({ src: a.result }).run();
+          }, a.readAsDataURL(s);
         }
-    }, S = async (a) => {
-      const f = R.current;
-      if (!f || !g) return;
-      const m = await g(a);
-      f.chain().focus().insertContent({
+    }, S = async (s) => {
+      const r = z.current;
+      if (!r || !p) return;
+      const a = await p(s);
+      r.chain().focus().insertContent({
         type: "fileAttachment",
-        attrs: { url: m.url, name: m.name, size: m.size }
+        attrs: { url: a.url, name: a.name, size: a.size }
       }).run();
-    }, b = M({
+    }, b = j({
+      immediatelyRender: !1,
+      // SSR-safe — prevents hydration mismatch in Next.js
       extensions: [
-        K.configure({
-          heading: { levels: [2, 3] }
+        q.configure({
+          heading: { levels: [2, 3] },
+          // v3: Underline + Link are now included in StarterKit
+          link: {
+            openOnClick: !1,
+            protocols: ["http", "https", "mailto"],
+            validate: (s) => /^(https?:\/\/|mailto:)/i.test(s),
+            HTMLAttributes: {
+              rel: "noopener noreferrer",
+              target: "_blank"
+            }
+          }
         }),
-        ie.configure({
-          placeholder: s,
+        Q.configure({
+          placeholder: f,
           emptyEditorClass: "before:content-[attr(data-placeholder)] before:text-surface-fg-subtle before:float-left before:h-0 before:pointer-events-none"
         }),
-        P,
-        $.configure({ multicolor: !1 }),
-        U,
-        q.configure({ nested: !0 }),
-        O.configure({ types: ["heading", "paragraph"] }),
-        V.configure({
-          openOnClick: !1,
-          protocols: ["http", "https", "mailto"],
-          validate: (a) => /^(https?:\/\/|mailto:)/i.test(a),
-          HTMLAttributes: {
-            rel: "noopener noreferrer",
-            target: "_blank"
-          }
+        D.configure({ multicolor: !1 }),
+        U.configure({
+          bulletList: !1,
+          // Already in StarterKit
+          orderedList: !1,
+          // Already in StarterKit
+          listItem: !1,
+          // Already in StarterKit
+          listKeymap: !1,
+          // Already in StarterKit
+          taskList: {},
+          taskItem: { nested: !0 }
         }),
-        F.configure({
+        M.configure({ types: ["heading", "paragraph"] }),
+        O.configure({
           allowBase64: !0,
           HTMLAttributes: {
             class: "max-w-full rounded-ds-md"
           }
         }),
-        Q,
-        ...h || v ? [
-          W.configure({
+        W,
+        ...k || m ? [
+          K.configure({
             HTMLAttributes: { class: "mention" },
             suggestion: {
-              items: async ({ query: a }) => v ? await v(a) : h ? h.filter((f) => f.label.toLowerCase().includes(a.toLowerCase())).slice(0, 8) : [],
-              render: Se(L)
+              items: async ({ query: s }) => m ? await m(s) : k ? k.filter((r) => r.label.toLowerCase().includes(s.toLowerCase())).slice(0, 8) : [],
+              render: Y(C)
             }
           })
         ] : [],
-        Be
+        X,
+        Z(v)
       ],
-      content: r,
-      editable: t,
+      content: u,
+      editable: n,
       editorProps: {
-        handleDrop: (a, f, m, Y) => {
-          if (Y || !f.dataTransfer?.files.length) return !1;
-          const A = f.dataTransfer.files[0];
-          return A ? A.type.startsWith("image/") ? (T(A), !0) : g ? (S(A), !0) : !1 : !1;
+        handleDrop: (s, r, a, x) => {
+          if (x || !r.dataTransfer?.files.length) return !1;
+          const I = r.dataTransfer.files[0];
+          return I ? I.type.startsWith("image/") ? (H(I), !0) : p ? (S(I), !0) : !1 : !1;
         },
-        handlePaste: (a, f) => {
-          const m = f.clipboardData?.files[0];
-          return m ? m.type.startsWith("image/") ? (T(m), !0) : g ? (S(m), !0) : !1 : !1;
+        handlePaste: (s, r) => {
+          const a = r.clipboardData?.files[0];
+          return a ? a.type.startsWith("image/") ? (H(a), !0) : p ? (S(a), !0) : !1 : !1;
         },
         attributes: {
-          class: x(
-            ...X,
+          class: L(
+            ...J,
             "focus:outline-none",
             "min-h-[120px] px-ds-04 py-ds-04"
           )
         }
       },
-      onUpdate: ({ editor: a }) => {
-        E.current = !0, o?.(a.getHTML()), queueMicrotask(() => {
-          E.current = !1;
+      onUpdate: ({ editor: s }) => {
+        T.current = !0, h?.(s.getHTML()), queueMicrotask(() => {
+          T.current = !1;
         });
       }
     });
-    return c.useEffect(() => {
-      R.current = b;
-    }, [b]), c.useEffect(() => {
-      if (!z) return;
-      const a = (f) => {
-        N.current && !N.current.contains(f.target) && w(!1);
+    return d.useEffect(() => {
+      z.current = b;
+    }, [b]), d.useEffect(() => {
+      if (!E) return;
+      const s = (r) => {
+        B.current && !B.current.contains(r.target) && w(!1);
       };
-      return document.addEventListener("mousedown", a), () => document.removeEventListener("mousedown", a);
-    }, [z]), c.useEffect(() => {
-      E.current || b && r !== b.getHTML() && b.commands.setContent(r, !1);
-    }, [b, r]), b ? /* @__PURE__ */ p("div", { ref: C, ...I, className: x("relative", i), children: [
-      z && /* @__PURE__ */ n(
+      return document.addEventListener("mousedown", s), () => document.removeEventListener("mousedown", s);
+    }, [E]), d.useEffect(() => {
+      T.current || b && u !== b.getHTML() && b.commands.setContent(u, { emitUpdate: !1 });
+    }, [b, u]), b ? /* @__PURE__ */ y("div", { ref: o, ...R, className: L("relative", g), children: [
+      E && /* @__PURE__ */ e(
         "div",
         {
-          ref: N,
+          ref: B,
           className: "absolute bottom-full right-0 z-popover mb-ds-02",
-          onKeyDown: (a) => {
-            a.key === "Escape" && (a.stopPropagation(), w(!1));
+          onKeyDown: (s) => {
+            s.key === "Escape" && (s.stopPropagation(), w(!1));
           },
-          children: /* @__PURE__ */ n(
-            Ue,
+          children: /* @__PURE__ */ e(
+            we,
             {
-              onSelect: (a) => {
-                b.chain().focus().insertContent(a).run(), w(!1);
+              set: v,
+              onSelect: async ({ id: s, native: r }) => {
+                const a = await G(v), x = F(a, s);
+                x ? b.chain().focus().insertContent({
+                  type: "emojiNode",
+                  attrs: { id: s, native: x.native, set: v, x: x.x, y: x.y }
+                }).run() : b.chain().focus().insertContent(r).run(), w(!1);
               }
             }
           )
         }
       ),
-      /* @__PURE__ */ p(
+      /* @__PURE__ */ y(
         "div",
         {
-          className: x(
+          className: L(
             "overflow-hidden rounded-ds-lg border border-surface-border-strong bg-surface-raised",
             "transition-colors ease-productive-standard focus-within:border-surface-border-strong"
           ),
           children: [
-            /* @__PURE__ */ n(
+            /* @__PURE__ */ e(
               "input",
               {
-                ref: B,
+                ref: N,
                 type: "file",
                 accept: "image/*",
                 "aria-label": "Upload image",
                 className: "hidden",
-                onChange: (a) => {
-                  const f = a.target.files?.[0];
-                  f && T(f), a.target.value = "";
+                onChange: (s) => {
+                  const r = s.target.files?.[0];
+                  r && H(r), s.target.value = "";
                 }
               }
             ),
-            g && /* @__PURE__ */ n(
+            p && /* @__PURE__ */ e(
               "input",
               {
-                ref: D,
+                ref: P,
                 type: "file",
                 "aria-label": "Upload file",
                 className: "hidden",
-                onChange: (a) => {
-                  const f = a.target.files?.[0];
-                  f && S(f), a.target.value = "";
+                onChange: (s) => {
+                  const r = s.target.files?.[0];
+                  r && S(r), s.target.value = "";
                 }
               }
             ),
-            t && /* @__PURE__ */ n(
-              Me,
+            n && /* @__PURE__ */ e(
+              ye,
               {
                 editor: b,
-                toolbar: l,
-                onImageClick: () => B.current?.click(),
-                onFileClick: g ? () => D.current?.click() : void 0,
-                onEmojiClick: () => w((a) => !a)
+                toolbar: t,
+                onImageClick: () => N.current?.click(),
+                onFileClick: p ? () => P.current?.click() : void 0,
+                onEmojiClick: () => w((s) => !s)
               }
             ),
-            /* @__PURE__ */ n(G, { editor: b })
+            /* @__PURE__ */ e($, { editor: b })
           ]
         }
       )
     ] }) : null;
   }
 );
-Ke.displayName = "RichTextEditor";
-const $e = c.forwardRef(
-  function({ content: r, className: s, ...o }, i) {
-    const t = M({
+Ie.displayName = "RichTextEditor";
+const Re = d.forwardRef(
+  function({ content: u, className: f, ...h }, g) {
+    const n = j({
+      immediatelyRender: !1,
+      // SSR-safe — prevents hydration mismatch in Next.js
       extensions: [
-        K.configure({
-          heading: { levels: [2, 3] }
-        }),
-        P,
-        $.configure({ multicolor: !1 }),
-        U,
-        q.configure({ nested: !0 }),
-        O.configure({ types: ["heading", "paragraph"] }),
-        V.configure({
-          openOnClick: !0,
-          protocols: ["http", "https", "mailto"],
-          validate: (l) => /^(https?:\/\/|mailto:)/i.test(l),
-          HTMLAttributes: {
-            rel: "noopener noreferrer",
-            target: "_blank"
+        q.configure({
+          heading: { levels: [2, 3] },
+          link: {
+            openOnClick: !0,
+            protocols: ["http", "https", "mailto"],
+            validate: (t) => /^(https?:\/\/|mailto:)/i.test(t),
+            HTMLAttributes: {
+              rel: "noopener noreferrer",
+              target: "_blank"
+            }
           }
         }),
-        F.configure({
+        D.configure({ multicolor: !1 }),
+        U.configure({
+          bulletList: !1,
+          orderedList: !1,
+          listItem: !1,
+          listKeymap: !1,
+          taskList: {},
+          taskItem: { nested: !0 }
+        }),
+        M.configure({ types: ["heading", "paragraph"] }),
+        O.configure({
           allowBase64: !0,
           HTMLAttributes: {
             class: "max-w-full rounded-ds-md"
           }
         }),
-        Q,
-        W.configure({
+        W,
+        K.configure({
           HTMLAttributes: { class: "mention" }
         })
       ],
-      content: r,
+      content: u,
       editable: !1,
       editorProps: {
         attributes: {
-          class: x(...X)
+          class: L(...J)
         }
       }
     });
-    return t ? /* @__PURE__ */ n("div", { ref: i, ...o, className: s, children: /* @__PURE__ */ n(G, { editor: t }) }) : null;
+    return n ? /* @__PURE__ */ e("div", { ref: g, ...h, className: f, children: /* @__PURE__ */ e($, { editor: n }) }) : null;
   }
 );
-$e.displayName = "RichTextViewer";
+Re.displayName = "RichTextViewer";
 export {
-  Ke as RichTextEditor,
-  $e as RichTextViewer
+  Ie as RichTextEditor,
+  Re as RichTextViewer
 };