@devalok/shilp-sutra 0.27.2 → 0.29.0

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

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