@devalok/shilp-sutra 0.6.1 → 0.7.0

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

@@ -1,225 +1,384 @@
 "use client";
-import { jsxs as m, jsx as e } from "react/jsx-runtime";
-import * as n from "react";
-import { useEditor as x, EditorContent as h } from "@tiptap/react";
-import u from "@tiptap/starter-kit";
-import f from "@tiptap/extension-placeholder";
-import { cn as d } from "../ui/lib/utils.js";
-import { IconBold as _, IconItalic as g, IconStrikethrough as v, IconH2 as y, IconH3 as k, IconList as w, IconListNumbers as N, IconCode as A, IconArrowBackUp as I, IconArrowForwardUp as C } from "@tabler/icons-react";
+import { jsxs as k, jsx as e } from "react/jsx-runtime";
+import * as c from "react";
+import { useEditor as E, EditorContent as H } from "@tiptap/react";
+import B from "@tiptap/starter-kit";
+import G from "@tiptap/extension-placeholder";
+import P from "@tiptap/extension-underline";
+import M from "@tiptap/extension-highlight";
+import j from "@tiptap/extension-task-list";
+import z from "@tiptap/extension-task-item";
+import D from "@tiptap/extension-text-align";
+import q from "@tiptap/extension-link";
+import U from "@tiptap/extension-image";
+import O from "@tiptap/extension-mention";
+import { FileAttachment as K } from "./extensions/file-attachment.js";
+import { createSuggestionRenderer as J } from "./extensions/mention-suggestion.js";
+import { EmojiSuggestion as Q } from "./extensions/emoji-suggestion.js";
+import { useColorMode as X } from "../hooks/use-color-mode.js";
+import { cn as w } from "../ui/lib/utils.js";
+import { IconBold as Y, IconItalic as Z, IconUnderline as $, IconStrikethrough as F, IconHighlight as ee, IconH2 as te, IconH3 as ie, IconBlockquote as se, IconList as re, IconListNumbers as ne, IconListCheck as oe, IconCode as ce, IconPhoto as le, IconPaperclip as ae, IconLineDashed as ue, IconAlignLeft as de, IconAlignCenter as me, IconAlignRight as fe, IconMoodSmile as he, IconArrowBackUp as ge, IconArrowForwardUp as pe, IconLink as ke } from "@tabler/icons-react";
+const V = [
+  "prose prose-sm max-w-none",
+  "font-body text-ds-md leading-relaxed text-text-primary",
+  "[&_h2]:text-ds-xl [&_h2]:mb-ds-03 [&_h2]:mt-ds-05 [&_h2]:text-text-primary",
+  "[&_h3]:text-ds-base [&_h3]:font-semibold [&_h3]:mb-ds-02b [&_h3]:mt-ds-04 [&_h3]:text-text-primary",
+  "[&_p]:mb-ds-02b [&_p]:text-text-secondary",
+  "[&_ul]:ml-ds-05 [&_ul]:list-disc [&_ol]:ml-ds-05 [&_ol]:list-decimal",
+  "[&_li]:text-text-secondary",
+  "[&_code]:rounded [&_code]:bg-layer-02 [&_code]:px-ds-02b [&_code]:py-ds-01 [&_code]:text-ds-md [&_code]:text-interactive",
+  "[&_pre]:rounded-ds-lg [&_pre]:bg-layer-02 [&_pre]:p-ds-04",
+  "[&_strong]:font-semibold [&_strong]:text-text-primary",
+  "[&_blockquote]:border-l-[3px] [&_blockquote]:border-interactive/30 [&_blockquote]:pl-ds-04 [&_blockquote]:italic [&_blockquote]:text-text-placeholder",
+  "[&_mark]:rounded-sm [&_mark]:bg-warning/20 [&_mark]:px-[2px]",
+  '[&_ul[data-type="taskList"]]:ml-0 [&_ul[data-type="taskList"]]:list-none [&_li[data-type="taskItem"]]:flex [&_li[data-type="taskItem"]]:items-start [&_li[data-type="taskItem"]]:gap-ds-02',
+  "[&_hr]:my-ds-04 [&_hr]:border-border",
+  "[&_a]:text-interactive [&_a]:underline [&_a]:decoration-interactive/40 hover:[&_a]:decoration-interactive",
+  "[&_img]:max-w-full [&_img]:rounded-ds-md [&_img]:my-ds-03",
+  "[&_.mention]:rounded-ds-sm [&_.mention]:bg-interactive/10 [&_.mention]:px-ds-02 [&_.mention]:py-[1px] [&_.mention]:font-medium [&_.mention]:text-interactive"
+];
 function s({
   onClick: t,
   isActive: o = !1,
-  disabled: l = !1,
-  title: i,
-  children: c
+  disabled: a = !1,
+  title: l,
+  children: u
 }) {
   return /* @__PURE__ */ e(
     "button",
     {
       type: "button",
       onClick: t,
-      disabled: l,
-      title: i,
-      className: d(
+      disabled: a,
+      title: l,
+      "aria-pressed": o,
+      className: w(
         "inline-flex h-ds-xs-plus w-ds-xs-plus items-center justify-center rounded-ds-md transition-colors",
         "hover:bg-field",
         "disabled:pointer-events-none disabled:opacity-[0.38]",
         o ? "bg-field text-interactive" : "text-text-placeholder"
       ),
-      children: c
+      children: u
     }
   );
 }
-function R({ editor: t }) {
-  return /* @__PURE__ */ m("div", { className: "flex flex-wrap items-center gap-ds-01 border-b border-border px-ds-04 py-ds-02b", children: [
-    /* @__PURE__ */ e(
-      s,
-      {
-        onClick: () => t.chain().focus().toggleBold().run(),
-        isActive: t.isActive("bold"),
-        title: "Bold",
-        children: /* @__PURE__ */ e(_, { className: "h-ico-sm w-ico-sm", stroke: 2.5 })
-      }
-    ),
-    /* @__PURE__ */ e(
-      s,
-      {
-        onClick: () => t.chain().focus().toggleItalic().run(),
-        isActive: t.isActive("italic"),
-        title: "Italic",
-        children: /* @__PURE__ */ e(g, { className: "h-ico-sm w-ico-sm", stroke: 2.5 })
-      }
-    ),
-    /* @__PURE__ */ e(
-      s,
-      {
-        onClick: () => t.chain().focus().toggleStrike().run(),
-        isActive: t.isActive("strike"),
-        title: "Strikethrough",
-        children: /* @__PURE__ */ e(v, { className: "h-ico-sm w-ico-sm", stroke: 2.5 })
-      }
-    ),
-    /* @__PURE__ */ e("div", { className: "mx-ds-02 h-[16px] w-px bg-border" }),
-    /* @__PURE__ */ e(
-      s,
-      {
-        onClick: () => t.chain().focus().toggleHeading({ level: 2 }).run(),
-        isActive: t.isActive("heading", { level: 2 }),
-        title: "Heading 2",
-        children: /* @__PURE__ */ e(y, { className: "h-ico-sm w-ico-sm", stroke: 2.5 })
-      }
-    ),
-    /* @__PURE__ */ e(
-      s,
-      {
-        onClick: () => t.chain().focus().toggleHeading({ level: 3 }).run(),
-        isActive: t.isActive("heading", { level: 3 }),
-        title: "Heading 3",
-        children: /* @__PURE__ */ e(k, { className: "h-ico-sm w-ico-sm", stroke: 2.5 })
-      }
-    ),
-    /* @__PURE__ */ e("div", { className: "mx-ds-02 h-[16px] w-px bg-border" }),
-    /* @__PURE__ */ e(
-      s,
-      {
-        onClick: () => t.chain().focus().toggleBulletList().run(),
-        isActive: t.isActive("bulletList"),
-        title: "Bullet list",
-        children: /* @__PURE__ */ e(w, { className: "h-ico-sm w-ico-sm", stroke: 2.5 })
-      }
-    ),
-    /* @__PURE__ */ e(
-      s,
-      {
-        onClick: () => t.chain().focus().toggleOrderedList().run(),
-        isActive: t.isActive("orderedList"),
-        title: "Ordered list",
-        children: /* @__PURE__ */ e(N, { className: "h-ico-sm w-ico-sm", stroke: 2.5 })
-      }
-    ),
-    /* @__PURE__ */ e(
-      s,
-      {
-        onClick: () => t.chain().focus().toggleCodeBlock().run(),
-        isActive: t.isActive("codeBlock"),
-        title: "Code block",
-        children: /* @__PURE__ */ e(A, { className: "h-ico-sm w-ico-sm", stroke: 2.5 })
-      }
-    ),
-    /* @__PURE__ */ e("div", { className: "mx-ds-02 h-[16px] w-px bg-border" }),
-    /* @__PURE__ */ e(
-      s,
-      {
-        onClick: () => t.chain().focus().undo().run(),
-        disabled: !t.can().undo(),
-        title: "Undo",
-        children: /* @__PURE__ */ e(I, { className: "h-ico-sm w-ico-sm", stroke: 2 })
-      }
-    ),
-    /* @__PURE__ */ e(
-      s,
+function be({ editor: t }) {
+  const [o, a] = c.useState(!1), [l, u] = c.useState(""), f = c.useRef(null), b = () => {
+    if (t.isActive("link")) {
+      t.chain().focus().unsetLink().run();
+      return;
+    }
+    const d = t.getAttributes("link").href || "";
+    u(d), a(!0), setTimeout(() => {
+      var _;
+      return (_ = f.current) == null ? void 0 : _.focus();
+    }, 0);
+  }, h = (d) => {
+    d.preventDefault(), l.trim() && t.chain().focus().setLink({ href: l.trim() }).run(), a(!1), u("");
+  }, g = (d) => {
+    d.key === "Escape" && (a(!1), u(""), t.commands.focus());
+  };
+  return /* @__PURE__ */ k("div", { className: "relative", children: [
+    /* @__PURE__ */ e(s, { onClick: b, isActive: t.isActive("link"), title: "Link", children: /* @__PURE__ */ e(ke, { className: "h-ico-sm w-ico-sm", stroke: 2 }) }),
+    o && /* @__PURE__ */ k(
+      "form",
       {
-        onClick: () => t.chain().focus().redo().run(),
-        disabled: !t.can().redo(),
-        title: "Redo",
-        children: /* @__PURE__ */ e(C, { className: "h-ico-sm w-ico-sm", stroke: 2 })
+        onSubmit: h,
+        "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-border bg-layer-01 p-ds-02 shadow-02",
+        children: [
+          /* @__PURE__ */ e(
+            "input",
+            {
+              ref: f,
+              type: "url",
+              value: l,
+              onChange: (d) => u(d.target.value),
+              onKeyDown: g,
+              placeholder: "https://...",
+              className: "h-ds-sm w-[240px] rounded-ds-sm border border-border bg-layer-01 px-ds-03 text-ds-sm text-text-primary focus:border-interactive focus:outline-none"
+            }
+          ),
+          /* @__PURE__ */ e("button", { type: "submit", className: "h-ds-sm rounded-ds-sm bg-interactive px-ds-03 text-ds-sm text-text-on-color hover:bg-interactive/90", children: "Apply" })
+        ]
       }
     )
   ] });
 }
-const T = n.forwardRef(
+function p() {
+  return /* @__PURE__ */ e("div", { className: "mx-ds-02 h-[16px] w-px bg-border" });
+}
+function xe({ editor: t, onImageClick: o, onFileClick: a, onEmojiClick: l }) {
+  return /* @__PURE__ */ k("div", { className: "flex flex-wrap items-center gap-ds-01 border-b border-border px-ds-04 py-ds-02b", children: [
+    /* @__PURE__ */ e(s, { onClick: () => t.chain().focus().toggleBold().run(), isActive: t.isActive("bold"), title: "Bold", children: /* @__PURE__ */ e(Y, { className: "h-ico-sm w-ico-sm", stroke: 2.5 }) }),
+    /* @__PURE__ */ e(s, { onClick: () => t.chain().focus().toggleItalic().run(), isActive: t.isActive("italic"), title: "Italic", children: /* @__PURE__ */ e(Z, { className: "h-ico-sm w-ico-sm", stroke: 2.5 }) }),
+    /* @__PURE__ */ e(s, { onClick: () => t.chain().focus().toggleUnderline().run(), isActive: t.isActive("underline"), title: "Underline", children: /* @__PURE__ */ e($, { className: "h-ico-sm w-ico-sm", stroke: 2.5 }) }),
+    /* @__PURE__ */ e(s, { onClick: () => t.chain().focus().toggleStrike().run(), isActive: t.isActive("strike"), title: "Strikethrough", children: /* @__PURE__ */ e(F, { className: "h-ico-sm w-ico-sm", stroke: 2.5 }) }),
+    /* @__PURE__ */ e(s, { onClick: () => t.chain().focus().toggleHighlight().run(), isActive: t.isActive("highlight"), title: "Highlight", children: /* @__PURE__ */ e(ee, { className: "h-ico-sm w-ico-sm", stroke: 2.5 }) }),
+    /* @__PURE__ */ e(p, {}),
+    /* @__PURE__ */ e(s, { onClick: () => t.chain().focus().toggleHeading({ level: 2 }).run(), isActive: t.isActive("heading", { level: 2 }), title: "Heading 2", children: /* @__PURE__ */ e(te, { className: "h-ico-sm w-ico-sm", stroke: 2.5 }) }),
+    /* @__PURE__ */ e(s, { onClick: () => t.chain().focus().toggleHeading({ level: 3 }).run(), isActive: t.isActive("heading", { level: 3 }), title: "Heading 3", children: /* @__PURE__ */ e(ie, { className: "h-ico-sm w-ico-sm", stroke: 2.5 }) }),
+    /* @__PURE__ */ e(s, { onClick: () => t.chain().focus().toggleBlockquote().run(), isActive: t.isActive("blockquote"), title: "Blockquote", children: /* @__PURE__ */ e(se, { className: "h-ico-sm w-ico-sm", stroke: 2.5 }) }),
+    /* @__PURE__ */ e(p, {}),
+    /* @__PURE__ */ e(s, { onClick: () => t.chain().focus().toggleBulletList().run(), isActive: t.isActive("bulletList"), title: "Bullet list", children: /* @__PURE__ */ e(re, { className: "h-ico-sm w-ico-sm", stroke: 2.5 }) }),
+    /* @__PURE__ */ e(s, { onClick: () => t.chain().focus().toggleOrderedList().run(), isActive: t.isActive("orderedList"), title: "Ordered list", children: /* @__PURE__ */ e(ne, { className: "h-ico-sm w-ico-sm", stroke: 2.5 }) }),
+    /* @__PURE__ */ e(s, { onClick: () => t.chain().focus().toggleTaskList().run(), isActive: t.isActive("taskList"), title: "Task list", children: /* @__PURE__ */ e(oe, { className: "h-ico-sm w-ico-sm", stroke: 2.5 }) }),
+    /* @__PURE__ */ e(s, { onClick: () => t.chain().focus().toggleCodeBlock().run(), isActive: t.isActive("codeBlock"), title: "Code block", children: /* @__PURE__ */ e(ce, { className: "h-ico-sm w-ico-sm", stroke: 2.5 }) }),
+    /* @__PURE__ */ e(p, {}),
+    /* @__PURE__ */ e(be, { editor: t }),
+    o && /* @__PURE__ */ e(s, { onClick: o, title: "Insert image", children: /* @__PURE__ */ e(le, { className: "h-ico-sm w-ico-sm", stroke: 2 }) }),
+    a && /* @__PURE__ */ e(s, { onClick: a, title: "Attach file", children: /* @__PURE__ */ e(ae, { className: "h-ico-sm w-ico-sm", stroke: 2 }) }),
+    /* @__PURE__ */ e(s, { onClick: () => t.chain().focus().setHorizontalRule().run(), title: "Horizontal rule", children: /* @__PURE__ */ e(ue, { className: "h-ico-sm w-ico-sm", stroke: 2 }) }),
+    /* @__PURE__ */ e(p, {}),
+    /* @__PURE__ */ e(s, { onClick: () => t.chain().focus().setTextAlign("left").run(), isActive: t.isActive({ textAlign: "left" }), title: "Align left", children: /* @__PURE__ */ e(de, { className: "h-ico-sm w-ico-sm", stroke: 2 }) }),
+    /* @__PURE__ */ e(s, { onClick: () => t.chain().focus().setTextAlign("center").run(), isActive: t.isActive({ textAlign: "center" }), title: "Align center", children: /* @__PURE__ */ e(me, { className: "h-ico-sm w-ico-sm", stroke: 2 }) }),
+    /* @__PURE__ */ e(s, { onClick: () => t.chain().focus().setTextAlign("right").run(), isActive: t.isActive({ textAlign: "right" }), title: "Align right", children: /* @__PURE__ */ e(fe, { className: "h-ico-sm w-ico-sm", stroke: 2 }) }),
+    /* @__PURE__ */ e(p, {}),
+    l && /* @__PURE__ */ e(s, { onClick: l, title: "Emoji", children: /* @__PURE__ */ e(he, { className: "h-ico-sm w-ico-sm", stroke: 2 }) }),
+    /* @__PURE__ */ e(s, { onClick: () => t.chain().focus().undo().run(), disabled: !t.can().undo(), title: "Undo", children: /* @__PURE__ */ e(ge, { className: "h-ico-sm w-ico-sm", stroke: 2 }) }),
+    /* @__PURE__ */ e(s, { onClick: () => t.chain().focus().redo().run(), disabled: !t.can().redo(), title: "Redo", children: /* @__PURE__ */ e(pe, { className: "h-ico-sm w-ico-sm", stroke: 2 }) })
+  ] });
+}
+const ve = c.lazy(() => import("../_virtual/shilp-sutra.js"));
+function we({ onSelect: t }) {
+  const [o, a] = c.useState(null), { colorMode: l } = X();
+  c.useEffect(() => {
+    import("../_virtual/shilp-sutra2.js").then((f) => a(f.default));
+  }, []);
+  const u = /* @__PURE__ */ e("div", { className: "flex h-[350px] w-[352px] items-center justify-center rounded-ds-lg border border-border bg-layer-01 shadow-02", children: /* @__PURE__ */ e("span", { className: "text-ds-sm text-text-placeholder", children: "Loading..." }) });
+  return o ? /* @__PURE__ */ e(c.Suspense, { fallback: u, children: /* @__PURE__ */ e(
+    ve,
+    {
+      data: o,
+      onEmojiSelect: (f) => t(f.native),
+      theme: l === "dark" ? "dark" : "light",
+      previewPosition: "none",
+      skinTonePosition: "none"
+    }
+  ) }) : u;
+}
+const _e = c.forwardRef(
   function({
     content: o = "",
-    placeholder: l = "Start writing...",
-    onChange: i,
-    className: c,
-    editable: a = !0
-  }, p) {
-    const r = x({
+    placeholder: a = "Start writing...",
+    onChange: l,
+    className: u,
+    editable: f = !0,
+    onImageUpload: b,
+    onFileUpload: h,
+    mentions: g,
+    onMentionSearch: d,
+    onMentionSelect: _
+  }, W) {
+    const A = c.useRef(null), [y, I] = c.useState(!1), N = c.useRef(null), T = c.useRef(null), R = c.useRef(null), C = async (i) => {
+      const r = A.current;
+      if (r)
+        if (b) {
+          const n = await b(i);
+          r.chain().focus().setImage({ src: n }).run();
+        } else {
+          const n = new FileReader();
+          n.onload = () => {
+            r.chain().focus().setImage({ src: n.result }).run();
+          }, n.readAsDataURL(i);
+        }
+    }, L = async (i) => {
+      const r = A.current;
+      if (!r || !h) return;
+      const n = await h(i);
+      r.chain().focus().insertContent({
+        type: "fileAttachment",
+        attrs: { url: n.url, name: n.name, size: n.size }
+      }).run();
+    }, m = E({
       extensions: [
-        u.configure({
+        B.configure({
           heading: { levels: [2, 3] }
         }),
-        f.configure({
-          placeholder: l,
+        G.configure({
+          placeholder: a,
           emptyEditorClass: "before:content-[attr(data-placeholder)] before:text-text-placeholder before:float-left before:h-0 before:pointer-events-none"
-        })
+        }),
+        P,
+        M.configure({ multicolor: !1 }),
+        j,
+        z.configure({ nested: !0 }),
+        D.configure({ types: ["heading", "paragraph"] }),
+        q.configure({
+          openOnClick: !1,
+          HTMLAttributes: {
+            rel: "noopener noreferrer",
+            target: "_blank"
+          }
+        }),
+        U.configure({
+          allowBase64: !0,
+          HTMLAttributes: {
+            class: "max-w-full rounded-ds-md"
+          }
+        }),
+        K,
+        ...g || d ? [
+          O.configure({
+            HTMLAttributes: { class: "mention" },
+            suggestion: {
+              items: async ({ query: i }) => d ? await d(i) : g ? g.filter((r) => r.label.toLowerCase().includes(i.toLowerCase())).slice(0, 8) : [],
+              render: J()
+            }
+          })
+        ] : [],
+        Q
       ],
       content: o,
-      editable: a,
+      editable: f,
       editorProps: {
+        handleDrop: (i, r, n, x) => {
+          var S;
+          if (x || !((S = r.dataTransfer) != null && S.files.length)) return !1;
+          const v = r.dataTransfer.files[0];
+          return v ? v.type.startsWith("image/") ? (C(v), !0) : h ? (L(v), !0) : !1 : !1;
+        },
+        handlePaste: (i, r) => {
+          var x;
+          const n = (x = r.clipboardData) == null ? void 0 : x.files[0];
+          return n ? n.type.startsWith("image/") ? (C(n), !0) : h ? (L(n), !0) : !1 : !1;
+        },
         attributes: {
-          class: d(
-            "prose prose-sm max-w-none focus:outline-none",
-            "min-h-[120px] px-ds-04 py-ds-04",
-            "font-body text-ds-md leading-relaxed text-text-primary",
-            "[&_h2]:text-ds-xl [&_h2]:mb-ds-03 [&_h2]:mt-ds-05 [&_h2]:text-text-primary",
-            "[&_h3]:text-ds-base [&_h3]:font-semibold [&_h3]:mb-ds-02b [&_h3]:mt-ds-04 [&_h3]:text-text-primary",
-            "[&_p]:mb-ds-02b [&_p]:text-text-secondary",
-            "[&_ul]:ml-ds-05 [&_ul]:list-disc [&_ol]:ml-ds-05 [&_ol]:list-decimal",
-            "[&_li]:text-text-secondary",
-            "[&_code]:rounded [&_code]:bg-layer-02 [&_code]:px-ds-02b [&_code]:py-ds-01 [&_code]:text-ds-md [&_code]:text-interactive",
-            "[&_pre]:rounded-ds-lg [&_pre]:bg-layer-02 [&_pre]:p-ds-04",
-            "[&_strong]:font-semibold [&_strong]:text-text-primary"
+          class: w(
+            ...V,
+            "focus:outline-none",
+            "min-h-[120px] px-ds-04 py-ds-04"
           )
         }
       },
-      onUpdate: ({ editor: b }) => {
-        i == null || i(b.getHTML());
+      onUpdate: ({ editor: i }) => {
+        l == null || l(i.getHTML());
       }
     });
-    return n.useEffect(() => {
-      r && o !== r.getHTML() && r.commands.setContent(o, !1);
-    }, [r, o]), r ? /* @__PURE__ */ m(
+    return c.useEffect(() => {
+      A.current = m;
+    }, [m]), c.useEffect(() => {
+      if (!y) return;
+      const i = (r) => {
+        N.current && !N.current.contains(r.target) && I(!1);
+      };
+      return document.addEventListener("mousedown", i), () => document.removeEventListener("mousedown", i);
+    }, [y]), c.useEffect(() => {
+      m && o !== m.getHTML() && m.commands.setContent(o, !1);
+    }, [m, o]), m ? /* @__PURE__ */ k(
       "div",
       {
-        ref: p,
-        className: d(
+        ref: W,
+        className: w(
           "overflow-hidden rounded-ds-lg border border-border bg-layer-01",
           "transition-colors focus-within:border-border-strong",
-          c
+          u
         ),
         children: [
-          a && /* @__PURE__ */ e(R, { editor: r }),
-          /* @__PURE__ */ e(h, { editor: r })
+          /* @__PURE__ */ e(
+            "input",
+            {
+              ref: T,
+              type: "file",
+              accept: "image/*",
+              "aria-label": "Upload image",
+              className: "hidden",
+              onChange: (i) => {
+                var n;
+                const r = (n = i.target.files) == null ? void 0 : n[0];
+                r && C(r), i.target.value = "";
+              }
+            }
+          ),
+          h && /* @__PURE__ */ e(
+            "input",
+            {
+              ref: R,
+              type: "file",
+              "aria-label": "Upload file",
+              className: "hidden",
+              onChange: (i) => {
+                var n;
+                const r = (n = i.target.files) == null ? void 0 : n[0];
+                r && L(r), i.target.value = "";
+              }
+            }
+          ),
+          f && /* @__PURE__ */ k("div", { className: "relative", children: [
+            /* @__PURE__ */ e(
+              xe,
+              {
+                editor: m,
+                onImageClick: () => {
+                  var i;
+                  return (i = T.current) == null ? void 0 : i.click();
+                },
+                onFileClick: h ? () => {
+                  var i;
+                  return (i = R.current) == null ? void 0 : i.click();
+                } : void 0,
+                onEmojiClick: () => I((i) => !i)
+              }
+            ),
+            y && /* @__PURE__ */ e("div", { ref: N, className: "absolute right-0 top-full z-popover", children: /* @__PURE__ */ e(
+              we,
+              {
+                onSelect: (i) => {
+                  m.chain().focus().insertContent(i).run(), I(!1);
+                }
+              }
+            ) })
+          ] }),
+          /* @__PURE__ */ e(H, { editor: m })
         ]
       }
     ) : null;
   }
 );
-T.displayName = "RichTextEditor";
-const B = n.forwardRef(
-  function({ content: o, className: l }, i) {
-    const c = x({
+_e.displayName = "RichTextEditor";
+const Ae = c.forwardRef(
+  function({ content: o, className: a }, l) {
+    const u = E({
       extensions: [
-        u.configure({
+        B.configure({
           heading: { levels: [2, 3] }
+        }),
+        P,
+        M.configure({ multicolor: !1 }),
+        j,
+        z.configure({ nested: !0 }),
+        D.configure({ types: ["heading", "paragraph"] }),
+        q.configure({
+          openOnClick: !0,
+          HTMLAttributes: {
+            rel: "noopener noreferrer",
+            target: "_blank"
+          }
+        }),
+        U.configure({
+          allowBase64: !0,
+          HTMLAttributes: {
+            class: "max-w-full rounded-ds-md"
+          }
+        }),
+        K,
+        O.configure({
+          HTMLAttributes: { class: "mention" }
         })
       ],
       content: o,
       editable: !1,
       editorProps: {
         attributes: {
-          class: d(
-            "prose prose-sm max-w-none",
-            "font-body text-ds-md leading-relaxed text-text-primary",
-            "[&_h2]:text-ds-xl [&_h2]:mb-ds-03 [&_h2]:mt-ds-05 [&_h2]:text-text-primary",
-            "[&_h3]:text-ds-base [&_h3]:font-semibold [&_h3]:mb-ds-02b [&_h3]:mt-ds-04 [&_h3]:text-text-primary",
-            "[&_p]:mb-ds-02b [&_p]:text-text-secondary",
-            "[&_ul]:ml-ds-05 [&_ul]:list-disc [&_ol]:ml-ds-05 [&_ol]:list-decimal",
-            "[&_li]:text-text-secondary",
-            "[&_code]:rounded [&_code]:bg-layer-02 [&_code]:px-ds-02b [&_code]:py-ds-01 [&_code]:text-ds-md [&_code]:text-interactive",
-            "[&_pre]:rounded-ds-lg [&_pre]:bg-layer-02 [&_pre]:p-ds-04",
-            "[&_strong]:font-semibold [&_strong]:text-text-primary"
-          )
+          class: w(...V)
         }
       }
     });
-    return c ? /* @__PURE__ */ e("div", { ref: i, className: l, children: /* @__PURE__ */ e(h, { editor: c }) }) : null;
+    return u ? /* @__PURE__ */ e("div", { ref: l, className: a, children: /* @__PURE__ */ e(H, { editor: u }) }) : null;
   }
 );
-B.displayName = "RichTextViewer";
+Ae.displayName = "RichTextViewer";
 export {
-  T as RichTextEditor,
-  B as RichTextViewer
+  _e as RichTextEditor,
+  Ae as RichTextViewer
 };