@devalok/shilp-sutra 0.49.4 → 0.50.0

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

@@ -3,23 +3,24 @@ import { cn as e } from "../ui/lib/utils.js";
 import { Icon as t } from "../ui/icon.js";
 import { Button as n } from "../ui/button.js";
 import { MENTION_TOKEN_CLASS as r } from "../_chunks/mention.js";
-import { EditorContent as i, ListKit as a, Placeholder as o, index_default as s, index_default$1 as c, index_default$2 as l, index_default$4 as u, index_default$5 as d, useEditor as f, useEditorState as p } from "../_chunks/tiptap.js";
-import { EmojiNode as m } from "./extensions/emoji-node.js";
-import { createEmojiSuggestion as h } from "../_chunks/emoji-suggestion.js";
-import { FileAttachment as g, createSuggestionRenderer as _ } from "../_chunks/mention-suggestion.js";
+import { EditorContent as i, ListKit as a, Markdown as o, Placeholder as s, index_default as c, index_default$1 as l, index_default$2 as u, index_default$4 as d, index_default$5 as f, useEditor as p, useEditorState as m } from "../_chunks/tiptap.js";
+import { EmojiNode as h } from "./extensions/emoji-node.js";
+import { createEmojiSuggestion as g } from "../_chunks/emoji-suggestion.js";
+import { FileAttachment as _, createSuggestionRenderer as ee } from "../_chunks/mention-suggestion.js";
 import * as v from "react";
-import { jsx as y, jsxs as b } from "react/jsx-runtime";
-import { IconAlignCenter as x, IconAlignLeft as S, IconAlignRight as C, IconArrowBackUp as w, IconArrowForwardUp as T, IconBlockquote as E, IconBold as D, IconCode as O, IconH2 as k, IconH3 as A, IconHighlight as j, IconItalic as M, IconLineDashed as N, IconLink as P, IconList as F, IconListCheck as I, IconListNumbers as L, IconMoodSmile as R, IconPaperclip as z, IconPhoto as B, IconStrikethrough as V, IconUnderline as H } from "@tabler/icons-react";
+import { Fragment as y, jsx as b, jsxs as x } from "react/jsx-runtime";
+import { IconAlignCenter as S, IconAlignLeft as C, IconAlignRight as w, IconArrowBackUp as T, IconArrowForwardUp as E, IconBlockquote as D, IconBold as O, IconCode as k, IconEye as A, IconH2 as te, IconH3 as ne, IconHighlight as re, IconItalic as j, IconLineDashed as M, IconLink as N, IconList as P, IconListCheck as F, IconListNumbers as I, IconMoodSmile as L, IconPaperclip as ie, IconPhoto as ae, IconStrikethrough as R, IconUnderline as z } from "@tabler/icons-react";
+import { AnimatePresence as oe, motion as B, useReducedMotion as V } from "framer-motion";
 //#region src/composed/rich-text-editor.tsx
-var U = [
+var H = [
 	"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",
-	"[&_h3]:text-ds-base [&_h3]:font-semibold [&_h3]:mb-ds-02b [&_h3]:mt-ds-04 [&_h3]:text-surface-fg",
+	"font-body text-body-md leading-relaxed text-surface-fg",
+	"[&_h2]:text-heading-sm [&_h2]:mb-ds-03 [&_h2]:mt-ds-05 [&_h2]:text-surface-fg",
+	"[&_h3]:text-body-lg [&_h3]:font-semibold [&_h3]:mb-ds-02b [&_h3]:mt-ds-04 [&_h3]:text-surface-fg",
 	"[&_p]:mb-ds-02b [&_p]:text-surface-fg-muted",
 	"[&_ul]:ml-ds-05 [&_ul]:list-disc [&_ol]:ml-ds-05 [&_ol]:list-decimal",
 	"[&_li]:text-surface-fg-muted",
-	"[&_code]:rounded [&_code]:bg-surface-raised [&_code]:px-ds-02b [&_code]:py-ds-01 [&_code]:text-ds-md [&_code]:text-accent-11",
+	"[&_code]:rounded [&_code]:bg-surface-raised [&_code]:px-ds-02b [&_code]:py-ds-01 [&_code]:text-body-md [&_code]:text-accent-11",
 	"[&_pre]:rounded-surface [&_pre]:bg-surface-raised [&_pre]:p-ds-04",
 	"[&_strong]:font-semibold [&_strong]:text-surface-fg",
 	"[&_blockquote]:border-l-[3px] [&_blockquote]:border-accent-6 [&_blockquote]:pl-ds-04 [&_blockquote]:italic [&_blockquote]:text-surface-fg-subtle",
@@ -30,8 +31,8 @@ var U = [
 	"[&_img]:max-w-full [&_img]:rounded-control [&_img]:my-ds-03",
 	r
 ];
-function W({ onClick: t, isActive: n = !1, disabled: r = !1, title: i, children: a }) {
-	return /* @__PURE__ */ y("button", {
+function U({ onClick: t, isActive: n = !1, disabled: r = !1, title: i, children: a }) {
+	return /* @__PURE__ */ b("button", {
 		type: "button",
 		onClick: t,
 		disabled: r,
@@ -42,14 +43,14 @@ function W({ onClick: t, isActive: n = !1, disabled: r = !1, title: i, children:
 		children: a
 	});
 }
-function G({ editor: e }) {
-	let [r, i] = v.useState(!1), [a, o] = v.useState(""), s = v.useRef(null), { isLink: c } = p({
+function W({ editor: e }) {
+	let [r, i] = v.useState(!1), [a, o] = v.useState(""), s = v.useRef(null), { isLink: c } = m({
 		editor: e,
 		selector: ({ editor: e }) => ({ isLink: e.isActive("link") })
 	});
-	return /* @__PURE__ */ b("div", {
+	return /* @__PURE__ */ x("div", {
 		className: "relative",
-		children: [/* @__PURE__ */ y(W, {
+		children: [/* @__PURE__ */ b(U, {
 			onClick: () => {
 				if (c) {
 					e.chain().focus().unsetLink().run();
@@ -60,17 +61,17 @@ function G({ editor: e }) {
 			},
 			isActive: c,
 			title: "Link",
-			children: /* @__PURE__ */ y(t, {
-				icon: P,
+			children: /* @__PURE__ */ b(t, {
+				icon: N,
 				size: "sm"
 			})
-		}), r && /* @__PURE__ */ b("form", {
+		}), r && /* @__PURE__ */ x("form", {
 			onSubmit: (t) => {
 				t.preventDefault(), a.trim() && e.chain().focus().setLink({ href: a.trim() }).run(), i(!1), o("");
 			},
 			"aria-label": "Edit link URL",
 			className: "absolute left-0 top-full z-popover mt-ds-01 flex items-center gap-ds-02 rounded-control bg-surface-overlay p-ds-02 shadow-raised-hover",
-			children: [/* @__PURE__ */ y("input", {
+			children: [/* @__PURE__ */ b("input", {
 				ref: s,
 				type: "url",
 				value: a,
@@ -79,8 +80,8 @@ function G({ editor: e }) {
 					t.key === "Escape" && (i(!1), o(""), e.commands.focus());
 				},
 				placeholder: "https://...",
-				className: "h-ds-sm w-[240px] rounded-control-inner border border-surface-border-strong bg-surface-overlay px-ds-03 text-ds-sm text-surface-fg focus:border-accent-7 focus:outline-hidden"
-			}), /* @__PURE__ */ y(n, {
+				className: "h-ds-sm w-[240px] rounded-control-inner border border-surface-border-strong bg-surface-overlay px-ds-03 text-body-sm text-surface-fg focus:border-accent-7 focus:outline-hidden"
+			}), /* @__PURE__ */ b(n, {
 				type: "submit",
 				variant: "solid",
 				size: "sm",
@@ -89,11 +90,11 @@ function G({ editor: e }) {
 		})]
 	});
 }
-function K() {
-	return /* @__PURE__ */ y("div", { className: "mx-ds-02 h-ds-05 w-px bg-surface-border" });
+function G() {
+	return /* @__PURE__ */ b("div", { className: "mx-ds-02 h-ds-05 w-px bg-surface-border" });
 }
-function q({ editor: e, toolbar: n, onImageClick: r, onFileClick: i, onEmojiClick: a }) {
-	let o = p({
+function K({ editor: e, toolbar: n, onImageClick: r, onFileClick: i, onEmojiClick: a, trailing: o, showControls: s = !0 }) {
+	let c = m({
 		editor: e,
 		selector: ({ editor: e }) => ({
 			isBold: e.isActive("bold"),
@@ -115,235 +116,246 @@ function q({ editor: e, toolbar: n, onImageClick: r, onFileClick: i, onEmojiClic
 			canUndo: e.can().undo(),
 			canRedo: e.can().redo()
 		})
-	}), s = (e) => !n || n.includes(e), c = s("bold") || s("italic") || s("underline") || s("strike") || s("highlight"), l = s("h2") || s("h3") || s("blockquote"), u = s("bulletList") || s("orderedList") || s("taskList") || s("codeBlock"), d = s("link") || !!r && s("image") || !!i && s("file") || s("hr"), f = s("alignLeft") || s("alignCenter") || s("alignRight"), m = !!a && s("emoji"), h = s("undo") || s("redo");
-	return /* @__PURE__ */ b("div", {
+	}), l = (e) => !n || n.includes(e), u = l("bold") || l("italic") || l("underline") || l("strike") || l("highlight"), d = l("h2") || l("h3") || l("blockquote"), f = l("bulletList") || l("orderedList") || l("taskList") || l("codeBlock"), p = l("link") || !!r && l("image") || !!i && l("file") || l("hr"), h = l("alignLeft") || l("alignCenter") || l("alignRight"), g = !!a && l("emoji"), _ = l("undo") || l("redo");
+	return /* @__PURE__ */ x("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: [
-			s("bold") && /* @__PURE__ */ y(W, {
+		className: "flex min-h-[2.75rem] flex-wrap items-center gap-ds-01 border-b border-surface-border-strong px-ds-04 py-ds-02b",
+		children: [s && /* @__PURE__ */ x(y, { children: [
+			l("bold") && /* @__PURE__ */ b(U, {
 				onClick: () => e.chain().focus().toggleBold().run(),
-				isActive: o.isBold,
+				isActive: c.isBold,
 				title: "Bold",
-				children: /* @__PURE__ */ y(t, {
-					icon: D,
+				children: /* @__PURE__ */ b(t, {
+					icon: O,
 					size: "sm",
 					stroke: "bold"
 				})
 			}),
-			s("italic") && /* @__PURE__ */ y(W, {
+			l("italic") && /* @__PURE__ */ b(U, {
 				onClick: () => e.chain().focus().toggleItalic().run(),
-				isActive: o.isItalic,
+				isActive: c.isItalic,
 				title: "Italic",
-				children: /* @__PURE__ */ y(t, {
-					icon: M,
+				children: /* @__PURE__ */ b(t, {
+					icon: j,
 					size: "sm",
 					stroke: "bold"
 				})
 			}),
-			s("underline") && /* @__PURE__ */ y(W, {
+			l("underline") && /* @__PURE__ */ b(U, {
 				onClick: () => e.chain().focus().toggleUnderline().run(),
-				isActive: o.isUnderline,
+				isActive: c.isUnderline,
 				title: "Underline",
-				children: /* @__PURE__ */ y(t, {
-					icon: H,
+				children: /* @__PURE__ */ b(t, {
+					icon: z,
 					size: "sm",
 					stroke: "bold"
 				})
 			}),
-			s("strike") && /* @__PURE__ */ y(W, {
+			l("strike") && /* @__PURE__ */ b(U, {
 				onClick: () => e.chain().focus().toggleStrike().run(),
-				isActive: o.isStrike,
+				isActive: c.isStrike,
 				title: "Strikethrough",
-				children: /* @__PURE__ */ y(t, {
-					icon: V,
+				children: /* @__PURE__ */ b(t, {
+					icon: R,
 					size: "sm",
 					stroke: "bold"
 				})
 			}),
-			s("highlight") && /* @__PURE__ */ y(W, {
+			l("highlight") && /* @__PURE__ */ b(U, {
 				onClick: () => e.chain().focus().toggleHighlight().run(),
-				isActive: o.isHighlight,
+				isActive: c.isHighlight,
 				title: "Highlight",
-				children: /* @__PURE__ */ y(t, {
-					icon: j,
+				children: /* @__PURE__ */ b(t, {
+					icon: re,
 					size: "sm",
 					stroke: "bold"
 				})
 			}),
-			c && l && /* @__PURE__ */ y(K, {}),
-			s("h2") && /* @__PURE__ */ y(W, {
+			u && d && /* @__PURE__ */ b(G, {}),
+			l("h2") && /* @__PURE__ */ b(U, {
 				onClick: () => e.chain().focus().toggleHeading({ level: 2 }).run(),
-				isActive: o.isH2,
+				isActive: c.isH2,
 				title: "Heading 2",
-				children: /* @__PURE__ */ y(t, {
-					icon: k,
+				children: /* @__PURE__ */ b(t, {
+					icon: te,
 					size: "sm",
 					stroke: "bold"
 				})
 			}),
-			s("h3") && /* @__PURE__ */ y(W, {
+			l("h3") && /* @__PURE__ */ b(U, {
 				onClick: () => e.chain().focus().toggleHeading({ level: 3 }).run(),
-				isActive: o.isH3,
+				isActive: c.isH3,
 				title: "Heading 3",
-				children: /* @__PURE__ */ y(t, {
-					icon: A,
+				children: /* @__PURE__ */ b(t, {
+					icon: ne,
 					size: "sm",
 					stroke: "bold"
 				})
 			}),
-			s("blockquote") && /* @__PURE__ */ y(W, {
+			l("blockquote") && /* @__PURE__ */ b(U, {
 				onClick: () => e.chain().focus().toggleBlockquote().run(),
-				isActive: o.isBlockquote,
+				isActive: c.isBlockquote,
 				title: "Blockquote",
-				children: /* @__PURE__ */ y(t, {
-					icon: E,
+				children: /* @__PURE__ */ b(t, {
+					icon: D,
 					size: "sm",
 					stroke: "bold"
 				})
 			}),
-			l && u && /* @__PURE__ */ y(K, {}),
-			s("bulletList") && /* @__PURE__ */ y(W, {
+			d && f && /* @__PURE__ */ b(G, {}),
+			l("bulletList") && /* @__PURE__ */ b(U, {
 				onClick: () => e.chain().focus().toggleBulletList().run(),
-				isActive: o.isBulletList,
+				isActive: c.isBulletList,
 				title: "Bullet list",
-				children: /* @__PURE__ */ y(t, {
-					icon: F,
+				children: /* @__PURE__ */ b(t, {
+					icon: P,
 					size: "sm",
 					stroke: "bold"
 				})
 			}),
-			s("orderedList") && /* @__PURE__ */ y(W, {
+			l("orderedList") && /* @__PURE__ */ b(U, {
 				onClick: () => e.chain().focus().toggleOrderedList().run(),
-				isActive: o.isOrderedList,
+				isActive: c.isOrderedList,
 				title: "Ordered list",
-				children: /* @__PURE__ */ y(t, {
-					icon: L,
+				children: /* @__PURE__ */ b(t, {
+					icon: I,
 					size: "sm",
 					stroke: "bold"
 				})
 			}),
-			s("taskList") && /* @__PURE__ */ y(W, {
+			l("taskList") && /* @__PURE__ */ b(U, {
 				onClick: () => e.chain().focus().toggleTaskList().run(),
-				isActive: o.isTaskList,
+				isActive: c.isTaskList,
 				title: "Task list",
-				children: /* @__PURE__ */ y(t, {
-					icon: I,
+				children: /* @__PURE__ */ b(t, {
+					icon: F,
 					size: "sm",
 					stroke: "bold"
 				})
 			}),
-			s("codeBlock") && /* @__PURE__ */ y(W, {
+			l("codeBlock") && /* @__PURE__ */ b(U, {
 				onClick: () => e.chain().focus().toggleCodeBlock().run(),
-				isActive: o.isCodeBlock,
+				isActive: c.isCodeBlock,
 				title: "Code block",
-				children: /* @__PURE__ */ y(t, {
-					icon: O,
+				children: /* @__PURE__ */ b(t, {
+					icon: k,
 					size: "sm",
 					stroke: "bold"
 				})
 			}),
-			u && d && /* @__PURE__ */ y(K, {}),
-			s("link") && /* @__PURE__ */ y(G, { editor: e }),
-			r && s("image") && /* @__PURE__ */ y(W, {
+			f && p && /* @__PURE__ */ b(G, {}),
+			l("link") && /* @__PURE__ */ b(W, { editor: e }),
+			r && l("image") && /* @__PURE__ */ b(U, {
 				onClick: r,
 				title: "Insert image",
-				children: /* @__PURE__ */ y(t, {
-					icon: B,
+				children: /* @__PURE__ */ b(t, {
+					icon: ae,
 					size: "sm"
 				})
 			}),
-			i && s("file") && /* @__PURE__ */ y(W, {
+			i && l("file") && /* @__PURE__ */ b(U, {
 				onClick: i,
 				title: "Attach file",
-				children: /* @__PURE__ */ y(t, {
-					icon: z,
+				children: /* @__PURE__ */ b(t, {
+					icon: ie,
 					size: "sm"
 				})
 			}),
-			s("hr") && /* @__PURE__ */ y(W, {
+			l("hr") && /* @__PURE__ */ b(U, {
 				onClick: () => e.chain().focus().setHorizontalRule().run(),
 				title: "Horizontal rule",
-				children: /* @__PURE__ */ y(t, {
-					icon: N,
+				children: /* @__PURE__ */ b(t, {
+					icon: M,
 					size: "sm"
 				})
 			}),
-			d && f && /* @__PURE__ */ y(K, {}),
-			s("alignLeft") && /* @__PURE__ */ y(W, {
+			p && h && /* @__PURE__ */ b(G, {}),
+			l("alignLeft") && /* @__PURE__ */ b(U, {
 				onClick: () => e.chain().focus().setTextAlign("left").run(),
-				isActive: o.isAlignLeft,
+				isActive: c.isAlignLeft,
 				title: "Align left",
-				children: /* @__PURE__ */ y(t, {
-					icon: S,
+				children: /* @__PURE__ */ b(t, {
+					icon: C,
 					size: "sm"
 				})
 			}),
-			s("alignCenter") && /* @__PURE__ */ y(W, {
+			l("alignCenter") && /* @__PURE__ */ b(U, {
 				onClick: () => e.chain().focus().setTextAlign("center").run(),
-				isActive: o.isAlignCenter,
+				isActive: c.isAlignCenter,
 				title: "Align center",
-				children: /* @__PURE__ */ y(t, {
-					icon: x,
+				children: /* @__PURE__ */ b(t, {
+					icon: S,
 					size: "sm"
 				})
 			}),
-			s("alignRight") && /* @__PURE__ */ y(W, {
+			l("alignRight") && /* @__PURE__ */ b(U, {
 				onClick: () => e.chain().focus().setTextAlign("right").run(),
-				isActive: o.isAlignRight,
+				isActive: c.isAlignRight,
 				title: "Align right",
-				children: /* @__PURE__ */ y(t, {
-					icon: C,
+				children: /* @__PURE__ */ b(t, {
+					icon: w,
 					size: "sm"
 				})
 			}),
-			f && (m || h) && /* @__PURE__ */ y(K, {}),
-			a && s("emoji") && /* @__PURE__ */ y(W, {
+			h && (g || _) && /* @__PURE__ */ b(G, {}),
+			a && l("emoji") && /* @__PURE__ */ b(U, {
 				onClick: a,
 				title: "Emoji",
-				children: /* @__PURE__ */ y(t, {
-					icon: R,
+				children: /* @__PURE__ */ b(t, {
+					icon: L,
 					size: "sm"
 				})
 			}),
-			s("undo") && /* @__PURE__ */ y(W, {
+			l("undo") && /* @__PURE__ */ b(U, {
 				onClick: () => e.chain().focus().undo().run(),
-				disabled: !o.canUndo,
+				disabled: !c.canUndo,
 				title: "Undo",
-				children: /* @__PURE__ */ y(t, {
-					icon: w,
+				children: /* @__PURE__ */ b(t, {
+					icon: T,
 					size: "sm"
 				})
 			}),
-			s("redo") && /* @__PURE__ */ y(W, {
+			l("redo") && /* @__PURE__ */ b(U, {
 				onClick: () => e.chain().focus().redo().run(),
-				disabled: !o.canRedo,
+				disabled: !c.canRedo,
 				title: "Redo",
-				children: /* @__PURE__ */ y(t, {
-					icon: T,
+				children: /* @__PURE__ */ b(t, {
+					icon: E,
 					size: "sm"
 				})
 			})
-		]
+		] }), o && /* @__PURE__ */ b("div", {
+			className: "ml-auto flex items-center pl-ds-02",
+			children: o
+		})]
 	});
 }
-var J = v.lazy(() => import("./emoji-picker.js").then((e) => ({ default: e.EmojiPicker })));
-function Y({ onSelect: e }) {
-	let t = /* @__PURE__ */ y("div", {
+var q = v.lazy(() => import("./emoji-picker.js").then((e) => ({ default: e.EmojiPicker })));
+function se({ onSelect: e }) {
+	let t = /* @__PURE__ */ b("div", {
 		className: "flex h-[435px] w-[352px] items-center justify-center rounded-surface bg-surface-overlay shadow-raised-hover",
-		children: /* @__PURE__ */ y("span", {
-			className: "text-ds-sm text-surface-fg-subtle",
+		children: /* @__PURE__ */ b("span", {
+			className: "text-body-sm text-surface-fg-subtle",
 			children: "Loading…"
 		})
 	});
-	return /* @__PURE__ */ y(v.Suspense, {
+	return /* @__PURE__ */ b(v.Suspense, {
 		fallback: t,
-		children: /* @__PURE__ */ y(J, { onSelect: e })
+		children: /* @__PURE__ */ b(q, { onSelect: e })
 	});
 }
-var X = v.forwardRef(function({ content: t = "", placeholder: n = "Start writing...", onChange: r, className: p, editable: x = !0, toolbar: S, onImageUpload: C, onFileUpload: w, mentions: T, onMentionSearch: E, onMentionSelect: D, emojiSet: O = "native", ...k }, A) {
-	let j = v.useRef(null), M = v.useRef(!1), [N, P] = v.useState(!1), F = v.useRef(null), I = v.useRef(null), L = v.useRef(null), R = async (e) => {
-		let t = j.current;
+var J = v.createContext(null);
+function Y() {
+	let e = v.useContext(J);
+	if (!e) throw Error("RichTextEditor.Toolbar / .Content must be used within <RichTextEditor.Provider>");
+	return e;
+}
+var X = v.forwardRef(function({ format: t = "html", content: n = "", placeholder: r = "Start writing...", onChange: i, className: m, editable: y = !0, toolbar: S, onImageUpload: C, onFileUpload: w, mentions: T, onMentionSearch: E, onMentionSelect: D, sourceMode: O, defaultSourceMode: k = !1, onSourceModeChange: A, emojiSet: te = "native", sourceToggle: ne, children: re, ...j }, M) {
+	let N = v.useRef(null), P = v.useRef(!1), F = V(), [I, L] = v.useState(!1), [ie, ae] = v.useState(k), R = O ?? ie, z = v.useCallback((e) => {
+		O === void 0 && ae(e), A?.(e);
+	}, [O, A]), [U, W] = v.useState(""), G = v.useRef(null), K = v.useRef(null), q = v.useRef(null), Y = async (e) => {
+		let t = N.current;
 		if (t) if (C) {
 			let n = await C(e);
 			n && /^https?:\/\//i.test(n) && t.chain().focus().setImage({ src: n }).run();
@@ -353,8 +365,8 @@ var X = v.forwardRef(function({ content: t = "", placeholder: n = "Start writing
 				t.chain().focus().setImage({ src: n.result }).run();
 			}, n.readAsDataURL(e);
 		}
-	}, z = async (e) => {
-		let t = j.current;
+	}, X = async (e) => {
+		let t = N.current;
 		if (!t || !w) return;
 		let n = await w(e);
 		t.chain().focus().insertContent({
@@ -365,10 +377,10 @@ var X = v.forwardRef(function({ content: t = "", placeholder: n = "Start writing
 				size: n.size
 			}
 		}).run();
-	}, B = f({
+	}, Z = p({
 		immediatelyRender: !1,
 		extensions: [
-			c.configure({
+			l.configure({
 				heading: { levels: [2, 3] },
 				link: {
 					openOnClick: !1,
@@ -384,11 +396,11 @@ var X = v.forwardRef(function({ content: t = "", placeholder: n = "Start writing
 					}
 				}
 			}),
-			o.configure({
-				placeholder: n,
+			s.configure({
+				placeholder: r,
 				emptyEditorClass: "before:content-[attr(data-placeholder)] before:text-surface-fg-subtle before:float-left before:h-0 before:pointer-events-none"
 			}),
-			d.configure({ multicolor: !1 }),
+			f.configure({ multicolor: !1 }),
 			a.configure({
 				bulletList: !1,
 				orderedList: !1,
@@ -397,113 +409,254 @@ var X = v.forwardRef(function({ content: t = "", placeholder: n = "Start writing
 				taskList: {},
 				taskItem: { nested: !0 }
 			}),
-			s.configure({ types: ["heading", "paragraph"] }),
-			u.configure({
+			c.configure({ types: ["heading", "paragraph"] }),
+			d.configure({
 				allowBase64: !0,
 				HTMLAttributes: { class: "max-w-full rounded-control" }
 			}),
-			g,
-			...T || E ? [l.configure({
+			_,
+			...T || E ? [u.configure({
 				HTMLAttributes: { class: "mention" },
 				suggestion: {
 					items: async ({ query: e }) => E ? await E(e) : T ? T.filter((t) => t.label.toLowerCase().includes(e.toLowerCase())).slice(0, 8) : [],
-					render: _(D)
+					render: ee(D)
 				}
 			})] : [],
-			m,
-			h()
+			h,
+			g(),
+			o
 		],
-		content: t,
-		editable: x,
+		content: n,
+		contentType: t === "markdown" ? "markdown" : void 0,
+		editable: y,
 		editorProps: {
 			handleDrop: (e, t, n, r) => {
 				if (r || !t.dataTransfer?.files.length) return !1;
 				let i = t.dataTransfer.files[0];
-				return i ? i.type.startsWith("image/") ? (R(i), !0) : w ? (z(i), !0) : !1 : !1;
+				return i ? i.type.startsWith("image/") ? (Y(i), !0) : w ? (X(i), !0) : !1 : !1;
 			},
 			handlePaste: (e, t) => {
 				let n = t.clipboardData?.files[0];
-				return n ? n.type.startsWith("image/") ? (R(n), !0) : w ? (z(n), !0) : !1 : !1;
+				return n ? n.type.startsWith("image/") ? (Y(n), !0) : w ? (X(n), !0) : !1 : !1;
 			},
-			attributes: { class: e(...U, "focus:outline-hidden", "min-h-[120px] px-ds-04 py-ds-04") }
+			attributes: { class: e(...H, "focus:outline-hidden", "min-h-[120px] px-ds-04 py-ds-04") }
 		},
 		onUpdate: ({ editor: e }) => {
-			M.current = !0, r?.(e.getHTML()), queueMicrotask(() => {
-				M.current = !1;
+			P.current = !0, i?.(t === "markdown" ? e.getMarkdown() : e.getHTML()), queueMicrotask(() => {
+				P.current = !1;
 			});
 		}
 	});
-	return v.useEffect(() => {
-		j.current = B;
-	}, [B]), v.useEffect(() => {
-		if (!N) return;
+	if (v.useEffect(() => {
+		N.current = Z;
+	}, [Z]), v.useEffect(() => {
+		if (!I) return;
 		let e = (e) => {
-			F.current && !F.current.contains(e.target) && P(!1);
+			G.current && !G.current.contains(e.target) && L(!1);
 		};
 		return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
-	}, [N]), v.useEffect(() => {
-		M.current || B && t !== B.getHTML() && B.commands.setContent(t, { emitUpdate: !1 });
-	}, [B, t]), B ? /* @__PURE__ */ b("div", {
-		ref: A,
-		...k,
-		className: e("relative", p),
-		children: [N && /* @__PURE__ */ y("div", {
-			ref: F,
-			className: "absolute bottom-full right-0 z-popover mb-ds-02",
-			onKeyDown: (e) => {
-				e.key === "Escape" && (e.stopPropagation(), P(!1));
-			},
-			children: /* @__PURE__ */ y(Y, { onSelect: ({ id: e, native: t }) => {
-				B.chain().focus().insertContent({
-					type: "emojiNode",
-					attrs: {
-						id: e,
-						native: t
-					}
-				}).run(), P(!1);
-			} })
-		}), /* @__PURE__ */ b("div", {
-			className: e("overflow-hidden rounded-surface border border-surface-border-strong bg-surface-raised", "transition-colors ease-productive-standard focus-within:border-surface-border-strong"),
+	}, [I]), v.useEffect(() => {
+		P.current || Z && n !== (t === "markdown" ? Z.getMarkdown() : Z.getHTML()) && Z.commands.setContent(n, {
+			emitUpdate: !1,
+			contentType: t === "markdown" ? "markdown" : void 0
+		});
+	}, [
+		Z,
+		n,
+		t
+	]), v.useEffect(() => {
+		R && Z && W(Z.getMarkdown());
+	}, [R]), !Z) return null;
+	let Q = {
+		editor: Z,
+		toolbar: S,
+		editable: y,
+		onImageClick: () => K.current?.click(),
+		onFileClick: w ? () => q.current?.click() : void 0,
+		onEmojiClick: () => L((e) => !e),
+		sourceMode: R,
+		setSourceMode: z,
+		toggleSource: () => z(!R),
+		sourceText: U,
+		onSourceChange: (e) => {
+			W(e), Z.commands.setContent(e, { contentType: "markdown" });
+		}
+	};
+	return /* @__PURE__ */ b(J.Provider, {
+		value: Q,
+		children: /* @__PURE__ */ x("div", {
+			ref: M,
+			...j,
+			className: e("relative", m),
 			children: [
-				/* @__PURE__ */ y("input", {
-					ref: I,
+				/* @__PURE__ */ b(oe, { children: I && /* @__PURE__ */ b(B.div, {
+					ref: G,
+					initial: !F && {
+						opacity: 0,
+						scale: .96,
+						y: 4
+					},
+					animate: {
+						opacity: 1,
+						scale: 1,
+						y: 0
+					},
+					exit: F ? { opacity: 0 } : {
+						opacity: 0,
+						scale: .96,
+						y: 4
+					},
+					transition: {
+						duration: .14,
+						ease: "easeOut"
+					},
+					className: "absolute bottom-full right-0 z-popover mb-ds-02 origin-bottom-right",
+					onKeyDown: (e) => {
+						e.key === "Escape" && (e.stopPropagation(), L(!1));
+					},
+					children: /* @__PURE__ */ b(se, { onSelect: ({ id: e, native: t }) => {
+						Z.chain().focus().insertContent({
+							type: "emojiNode",
+							attrs: {
+								id: e,
+								native: t
+							}
+						}).run(), L(!1);
+					} })
+				}, "emoji-picker") }),
+				/* @__PURE__ */ b("input", {
+					ref: K,
 					type: "file",
 					accept: "image/*",
 					"aria-label": "Upload image",
 					className: "hidden",
 					onChange: (e) => {
 						let t = e.target.files?.[0];
-						t && R(t), e.target.value = "";
+						t && Y(t), e.target.value = "";
 					}
 				}),
-				w && /* @__PURE__ */ y("input", {
-					ref: L,
+				w && /* @__PURE__ */ b("input", {
+					ref: q,
 					type: "file",
 					"aria-label": "Upload file",
 					className: "hidden",
 					onChange: (e) => {
 						let t = e.target.files?.[0];
-						t && z(t), e.target.value = "";
+						t && X(t), e.target.value = "";
 					}
 				}),
-				x && /* @__PURE__ */ y(q, {
-					editor: B,
-					toolbar: S,
-					onImageClick: () => I.current?.click(),
-					onFileClick: w ? () => L.current?.click() : void 0,
-					onEmojiClick: () => P((e) => !e)
-				}),
-				/* @__PURE__ */ y(i, { editor: B })
+				re
 			]
-		})]
-	}) : null;
+		})
+	});
+});
+X.displayName = "RichTextEditor.Provider";
+function Z({ trailing: e }) {
+	let { editor: t, toolbar: n, editable: r, sourceMode: i, onImageClick: a, onFileClick: o, onEmojiClick: s } = Y();
+	if (!r) return null;
+	let c = !i;
+	return !c && !e ? null : /* @__PURE__ */ b(K, {
+		editor: t,
+		toolbar: n,
+		showControls: c,
+		trailing: e,
+		onImageClick: a,
+		onFileClick: o,
+		onEmojiClick: s
+	});
+}
+Z.displayName = "RichTextEditor.Toolbar";
+function Q() {
+	let { editor: e, sourceMode: t, sourceText: n, onSourceChange: r } = Y(), a = V() ? { opacity: 0 } : {
+		opacity: 0,
+		y: 4
+	};
+	return /* @__PURE__ */ b(oe, {
+		mode: "wait",
+		initial: !1,
+		children: t ? /* @__PURE__ */ b(B.div, {
+			initial: a,
+			animate: {
+				opacity: 1,
+				y: 0
+			},
+			exit: a,
+			transition: {
+				duration: .14,
+				ease: "easeOut"
+			},
+			children: /* @__PURE__ */ b("textarea", {
+				value: n,
+				onChange: (e) => r(e.target.value),
+				spellCheck: !1,
+				"aria-label": "Markdown source",
+				className: "block min-h-[120px] w-full resize-y bg-surface-raised px-ds-04 py-ds-04 font-mono text-body-sm leading-ds-relaxed text-surface-fg focus:outline-hidden"
+			})
+		}, "source") : /* @__PURE__ */ b(B.div, {
+			initial: a,
+			animate: {
+				opacity: 1,
+				y: 0
+			},
+			exit: a,
+			transition: {
+				duration: .14,
+				ease: "easeOut"
+			},
+			children: /* @__PURE__ */ b(i, { editor: e })
+		}, "visual")
+	});
+}
+Q.displayName = "RichTextEditor.Content";
+function $({ className: e, iconOnly: r = !1 }) {
+	let { sourceMode: i, toggleSource: a } = Y(), o = i ? "Switch to visual editor" : "Switch to Markdown source", s = i ? A : k;
+	return r ? /* @__PURE__ */ b(n, {
+		type: "button",
+		variant: "ghost",
+		size: "icon-sm",
+		"aria-pressed": i,
+		"aria-label": o,
+		title: o,
+		className: e,
+		onClick: a,
+		children: /* @__PURE__ */ b(t, {
+			icon: s,
+			size: "sm"
+		})
+	}) : /* @__PURE__ */ b(n, {
+		type: "button",
+		variant: "ghost",
+		size: "sm",
+		"aria-pressed": i,
+		"aria-label": o,
+		startIcon: s,
+		className: e,
+		onClick: a,
+		children: i ? "Editor" : "Markdown"
+	});
+}
+$.displayName = "RichTextEditor.SourceToggle";
+var ce = v.forwardRef(function(t, n) {
+	return /* @__PURE__ */ b(X, {
+		ref: n,
+		...t,
+		children: /* @__PURE__ */ x("div", {
+			className: e("overflow-hidden rounded-surface border border-surface-border-strong bg-surface-raised", "transition-colors ease-productive-standard focus-within:border-surface-border-strong"),
+			children: [/* @__PURE__ */ b(Z, { trailing: t.sourceToggle ? /* @__PURE__ */ b($, {}) : void 0 }), /* @__PURE__ */ b(Q, {})]
+		})
+	});
 });
-X.displayName = "RichTextEditor";
-var Z = v.forwardRef(function({ content: t, className: n, ...r }, o) {
-	let p = f({
+ce.displayName = "RichTextEditor";
+var le = Object.assign(ce, {
+	Provider: X,
+	Toolbar: Z,
+	Content: Q,
+	SourceToggle: $
+}), ue = v.forwardRef(function({ content: t, format: n = "html", className: r, ...s }, m) {
+	let h = p({
 		immediatelyRender: !1,
 		extensions: [
-			c.configure({
+			l.configure({
 				heading: { levels: [2, 3] },
 				link: {
 					openOnClick: !0,
@@ -519,7 +672,7 @@ var Z = v.forwardRef(function({ content: t, className: n, ...r }, o) {
 					}
 				}
 			}),
-			d.configure({ multicolor: !1 }),
+			f.configure({ multicolor: !1 }),
 			a.configure({
 				bulletList: !1,
 				orderedList: !1,
@@ -528,25 +681,27 @@ var Z = v.forwardRef(function({ content: t, className: n, ...r }, o) {
 				taskList: {},
 				taskItem: { nested: !0 }
 			}),
-			s.configure({ types: ["heading", "paragraph"] }),
-			u.configure({
+			c.configure({ types: ["heading", "paragraph"] }),
+			d.configure({
 				allowBase64: !0,
 				HTMLAttributes: { class: "max-w-full rounded-control" }
 			}),
-			g,
-			l.configure({ HTMLAttributes: { class: "mention" } })
+			_,
+			u.configure({ HTMLAttributes: { class: "mention" } }),
+			o
 		],
 		content: t,
+		contentType: n === "markdown" ? "markdown" : void 0,
 		editable: !1,
-		editorProps: { attributes: { class: e(...U) } }
+		editorProps: { attributes: { class: e(...H) } }
 	});
-	return p ? /* @__PURE__ */ y("div", {
-		ref: o,
-		...r,
-		className: n,
-		children: /* @__PURE__ */ y(i, { editor: p })
+	return h ? /* @__PURE__ */ b("div", {
+		ref: m,
+		...s,
+		className: r,
+		children: /* @__PURE__ */ b(i, { editor: h })
 	}) : null;
 });
-Z.displayName = "RichTextViewer";
+ue.displayName = "RichTextViewer";
 //#endregion
-export { X as RichTextEditor, Z as RichTextViewer };
+export { le as RichTextEditor, Q as RichTextEditorContent, X as RichTextEditorProvider, $ as RichTextEditorSourceToggle, Z as RichTextEditorToolbar, ue as RichTextViewer, Y as useRichTextEditor };