admin-ui-starter-kit 0.1.3 → 0.4.2

package/dist/_shared/rich-text-editor-B6WKHUKC.js

@@ -0,0 +1,620 @@
+import { useStrings as e } from "../lib/strings.js";
+import { cn as t } from "../lib/utils.js";
+import { n } from "./heading-HeP06nXG.js";
+import { t as r } from "./button-SuocMQFT.js";
+import { forwardRef as i, useCallback as a, useEffect as o, useImperativeHandle as s, useMemo as c, useRef as l, useState as u } from "react";
+import { Fragment as d, jsx as f, jsxs as p } from "react/jsx-runtime";
+import { Bold as ee, Code2 as m, Italic as h, List as g, ListOrdered as te, Quote as ne, Redo2 as re, Strikethrough as ie, Undo2 as ae } from "lucide-react";
+import * as _ from "@tiptap/react";
+import * as v from "@tiptap/starter-kit";
+//#region src/components/features/rich-text-editor/partials/rich-text-editor-toolbar.tsx
+function y({ buttons: e, extraToolbarItems: t, hideSourceToggle: n = !1, sourceMode: i, toggleSourceMode: a, disabled: o = !1, hasEditor: s = !0, toolbarTrailing: c, strings: l }) {
+	let u = (t?.length ?? 0) > 0;
+	return /* @__PURE__ */ p("div", {
+		className: "border-border flex flex-wrap items-center gap-1 border-b p-1.5",
+		children: [
+			e.map((e) => {
+				let t = e.icon, n = e.isActive();
+				return /* @__PURE__ */ f(r, {
+					type: "button",
+					variant: n ? "primary" : "secondary",
+					buttonStyle: n ? "solid" : "ghost",
+					size: "icon-xs",
+					onClick: e.run,
+					disabled: o || !s || i || e.disabled,
+					"aria-label": e.label,
+					title: e.label,
+					children: /* @__PURE__ */ f(t, { className: "h-3.5 w-3.5" })
+				}, e.id);
+			}),
+			!n && /* @__PURE__ */ p(d, { children: [/* @__PURE__ */ f("div", { className: "bg-border mx-1 h-4 w-px" }), /* @__PURE__ */ f(r, {
+				type: "button",
+				variant: i ? "primary" : "secondary",
+				buttonStyle: i ? "solid" : "ghost",
+				size: "icon-xs",
+				onClick: a,
+				disabled: o || !s,
+				"aria-label": l.toolbar.sourceCode,
+				title: l.toolbar.sourceCode,
+				children: /* @__PURE__ */ f(m, { className: "h-3.5 w-3.5" })
+			})] }),
+			u && /* @__PURE__ */ p(d, { children: [/* @__PURE__ */ f("div", { className: "bg-border mx-1 h-4 w-px" }), t?.map((e) => {
+				let t = e.icon, n = e.isActive?.() ?? !1;
+				return /* @__PURE__ */ f(r, {
+					type: "button",
+					variant: n ? "primary" : "secondary",
+					buttonStyle: n ? "solid" : "ghost",
+					size: "icon-xs",
+					onClick: e.onClick,
+					disabled: o || !s || i || e.disabled,
+					"aria-label": e.label,
+					title: e.label,
+					children: /* @__PURE__ */ f(t, { className: "h-3.5 w-3.5" })
+				}, e.id);
+			})] }),
+			!!c && /* @__PURE__ */ f("div", {
+				className: "ml-auto flex items-center gap-1",
+				children: c
+			})
+		]
+	});
+}
+y.displayName = "RichTextEditorToolbar";
+//#endregion
+//#region src/components/features/rich-text-editor/rich-text-editor.strings.ts
+var b = {
+	editorLabel: "Rich text editor",
+	sourceLabel: "HTML source",
+	toolbar: {
+		bold: "Bold",
+		italic: "Italic",
+		strike: "Strike",
+		bulletList: "Bullet list",
+		orderedList: "Ordered list",
+		blockquote: "Quote",
+		undo: "Undo",
+		redo: "Redo",
+		sourceCode: "Source code"
+	},
+	counts: {
+		characters: "characters",
+		words: "words",
+		max: "max"
+	}
+};
+//#endregion
+//#region src/components/features/rich-text-editor/partials/caret-helpers.ts
+function x() {
+	if (typeof window > "u") return null;
+	let e = window.getSelection();
+	if (!e || e.rangeCount === 0) return null;
+	let t = e.getRangeAt(0);
+	if (!t.collapsed) return null;
+	let n = t.startContainer, r = t.startOffset, i = n;
+	for (; i && i.nodeType !== Node.ELEMENT_NODE;) i = i.parentNode;
+	if (!i) return null;
+	let a = i.closest("[contenteditable=\"true\"]") ?? i.closest(".ProseMirror");
+	if (!a) return null;
+	let o = "";
+	n.nodeType === Node.TEXT_NODE && (o = (n.textContent ?? "").slice(0, r));
+	let s = n;
+	for (; s && s !== a && s !== i;) {
+		let e = s.previousSibling;
+		for (; e;) o = (e.textContent ?? "") + o, e = e.previousSibling;
+		if (s = s.parentNode, s && s.matches?.("p, li, h1, h2, h3, h4, h5, h6, blockquote")) break;
+	}
+	let c, l = t.getBoundingClientRect();
+	return l && (l.top || l.left || l.right || l.bottom) && (c = {
+		top: l.top,
+		left: l.left,
+		bottom: l.bottom,
+		right: l.right
+	}), {
+		textBefore: o,
+		rect: c
+	};
+}
+function S(e, t, n, r) {
+	if (typeof window > "u") return;
+	let i = window.getSelection();
+	if (!i || i.rangeCount === 0) return;
+	let a = i.getRangeAt(0);
+	if (!a.collapsed) return;
+	let o = t, s = a.startContainer, c = a.startOffset;
+	for (; o > 0;) {
+		if (s.nodeType === Node.TEXT_NODE) {
+			let e = Math.min(c, o);
+			if (c -= e, o -= e, o === 0) break;
+		}
+		let e = w(s);
+		if (!e) break;
+		s = e, c = e.textContent?.length ?? 0;
+	}
+	let l = document.createRange();
+	if (l.setStart(s, c), l.setEnd(a.endContainer, a.endOffset), i.removeAllRanges(), i.addRange(l), e) {
+		e.chain().focus().insertContent(n).run(), r(e.getHTML());
+		return;
+	}
+	l.deleteContents();
+	let u = document.createRange().createContextualFragment(n);
+	l.insertNode(u), i.collapseToEnd();
+	let d = s?.parentElement?.closest?.("[contenteditable=\"true\"]") ?? null;
+	d && r(d.innerHTML);
+}
+function C(e, t) {
+	if (typeof window > "u" || !e) return;
+	e.focus();
+	let n = window.getSelection();
+	if (!n || n.rangeCount === 0) {
+		e.insertAdjacentHTML("beforeend", t);
+		return;
+	}
+	let r = n.getRangeAt(0);
+	if (!e.contains(r.commonAncestorContainer)) {
+		e.insertAdjacentHTML("beforeend", t);
+		return;
+	}
+	r.deleteContents();
+	let i = document.createRange().createContextualFragment(t);
+	r.insertNode(i), r.collapse(!1), n.removeAllRanges(), n.addRange(r);
+}
+function w(e) {
+	let t = e;
+	for (; t;) {
+		if (t.previousSibling) {
+			for (t = t.previousSibling; t && t.lastChild;) t = t.lastChild;
+			if (t && t.nodeType === Node.TEXT_NODE) return t;
+			continue;
+		}
+		if (t = t.parentNode, !t || t.matches?.("p, li, h1, h2, h3, h4, h5, h6, blockquote, [contenteditable=\"true\"]")) return null;
+	}
+	return null;
+}
+//#endregion
+//#region src/components/features/rich-text-editor/partials/counts-footer.tsx
+function T({ text: e, maxLength: r, strings: i }) {
+	let a = e.length, o = e.trim().length > 0 ? e.trim().split(/\s+/).length : 0, s = typeof r == "number" && a > r;
+	return /* @__PURE__ */ p("div", {
+		className: "border-border flex items-center justify-end gap-3 border-t px-3 py-1.5",
+		children: [/* @__PURE__ */ p(n, {
+			tag: "span",
+			size: "xs",
+			type: s ? "error" : "secondary",
+			weight: s ? "medium" : "regular",
+			className: t("tabular-nums"),
+			children: [
+				a,
+				typeof r == "number" ? ` / ${r}` : "",
+				" ",
+				i.counts.characters
+			]
+		}), /* @__PURE__ */ p(n, {
+			tag: "span",
+			size: "xs",
+			type: "secondary",
+			className: "tabular-nums",
+			children: [
+				o,
+				" ",
+				i.counts.words
+			]
+		})]
+	});
+}
+T.displayName = "CountsFooterText";
+function E({ editor: e, sourceMode: t, sourceValue: n, maxLength: r, strings: i }) {
+	return /* @__PURE__ */ f(T, {
+		text: t ? n.replace(/<[^>]*>/g, "") : e?.getText() ?? "",
+		maxLength: r,
+		strings: i
+	});
+}
+E.displayName = "CountsFooter";
+//#endregion
+//#region src/components/features/rich-text-editor/partials/html-helpers.ts
+function D(e) {
+	let t = e.trim();
+	return t === "" || t === "<p></p>" || t === "<p><br></p>" ? "" : t;
+}
+function O(e) {
+	let t = D(e);
+	return t === "" ? "<p></p>" : t;
+}
+//#endregion
+//#region src/components/features/rich-text-editor/partials/rich-text-editor-tiptap.tsx
+var k = _.EditorContent, A = _.useEditor, j = "default" in v ? v.default : v, M = i(function({ value: n, onChange: r, placeholder: i, compact: d = !1, minHeight: m, maxHeight: _, disabled: v = !1, showCounts: C = !1, maxLength: w, extraToolbarItems: T, toolbarTrailing: M, footerSlot: N, hideSourceToggle: P = !1, autoFocus: F = !1, className: I, onCaretChange: L, strings: R }, z) {
+	let B = e(b, R), [V, H] = u(!1), [U, W] = u(!1), [G, K] = u(""), q = l(!1), J = l(D(n)), Y = l(L);
+	Y.current = L;
+	let X = A({
+		extensions: [j],
+		content: O(n),
+		editable: !v,
+		immediatelyRender: !1,
+		autofocus: F ? "end" : !1,
+		onFocus: () => {
+			q.current = !0, H(!0);
+		},
+		onBlur: () => {
+			q.current = !1, H(!1);
+		},
+		onUpdate: ({ editor: e }) => {
+			let t = D(e.getHTML());
+			q.current && (t !== J.current && (J.current = t, r(t)), Y.current?.());
+		},
+		editorProps: { attributes: {
+			role: "textbox",
+			"aria-label": B.editorLabel,
+			"aria-multiline": "true",
+			class: "prose prose-sm prose-p:my-0.5 prose-p:leading-relaxed prose-headings:my-1 prose-ul:my-1 prose-ol:my-1 prose-li:my-0.5 max-w-none px-3 py-2 text-sm focus-visible:outline-none dark:prose-invert"
+		} }
+	});
+	o(() => {
+		if (!X) return;
+		let e = D(X.getHTML()), t = D(n);
+		J.current = t, e !== t && X.commands.setContent(O(t), { emitUpdate: !1 });
+	}, [X, n]), o(() => {
+		X && X.setEditable(!v);
+	}, [v, X]), o(() => {
+		if (typeof document > "u") return;
+		let e = () => {
+			q.current && Y.current?.();
+		};
+		return document.addEventListener("selectionchange", e), () => document.removeEventListener("selectionchange", e);
+	}, []), s(z, () => ({
+		focus: () => {
+			X?.chain().focus().run();
+		},
+		getHTML: () => D(X?.getHTML() ?? ""),
+		setHTML: (e) => {
+			let t = D(e);
+			J.current = t, X?.commands.setContent(O(t), { emitUpdate: !1 }), r(t);
+		},
+		insertHTML: (e) => {
+			X && X.chain().focus().insertContent(e).run();
+		},
+		isEmpty: () => D(X?.getHTML() ?? "") === "",
+		clear: () => {
+			J.current = "", X?.commands.setContent("<p></p>", { emitUpdate: !1 }), r("");
+		},
+		getCaretContext: () => x(),
+		replaceBeforeCaret: (e, t) => {
+			S(X, e, t, (e) => {
+				J.current = D(e), r(J.current);
+			});
+		}
+	}), [X, r]);
+	let Z = c(() => ({
+		minHeight: m ?? (d ? "2rem" : "12rem"),
+		..._ ? {
+			maxHeight: _,
+			overflowY: "auto"
+		} : {}
+	}), [
+		d,
+		_,
+		m
+	]), Q = a(() => {
+		if (X) if (U) {
+			let e = O(G);
+			X.commands.setContent(e, { emitUpdate: !1 });
+			let t = D(G);
+			J.current = t, r(t), W(!1);
+		} else K(X.getHTML()), W(!0);
+	}, [
+		X,
+		r,
+		U,
+		G
+	]), oe = a((e) => {
+		let t = e.target.value;
+		K(t);
+		let n = D(t);
+		J.current = n, r(n);
+	}, [r]), se = c(() => [
+		{
+			id: "bold",
+			icon: ee,
+			label: B.toolbar.bold,
+			isActive: () => !!X?.isActive("bold"),
+			run: () => X?.chain().focus().toggleBold().run()
+		},
+		{
+			id: "italic",
+			icon: h,
+			label: B.toolbar.italic,
+			isActive: () => !!X?.isActive("italic"),
+			run: () => X?.chain().focus().toggleItalic().run()
+		},
+		{
+			id: "strike",
+			icon: ie,
+			label: B.toolbar.strike,
+			isActive: () => !!X?.isActive("strike"),
+			run: () => X?.chain().focus().toggleStrike().run()
+		},
+		{
+			id: "bullet-list",
+			icon: g,
+			label: B.toolbar.bulletList,
+			isActive: () => !!X?.isActive("bulletList"),
+			run: () => X?.chain().focus().toggleBulletList().run()
+		},
+		{
+			id: "ordered-list",
+			icon: te,
+			label: B.toolbar.orderedList,
+			isActive: () => !!X?.isActive("orderedList"),
+			run: () => X?.chain().focus().toggleOrderedList().run()
+		},
+		{
+			id: "blockquote",
+			icon: ne,
+			label: B.toolbar.blockquote,
+			isActive: () => !!X?.isActive("blockquote"),
+			run: () => X?.chain().focus().toggleBlockquote().run()
+		},
+		{
+			id: "undo",
+			icon: ae,
+			label: B.toolbar.undo,
+			isActive: () => !1,
+			run: () => X?.chain().focus().undo().run(),
+			disabled: !X?.can().chain().focus().undo().run()
+		},
+		{
+			id: "redo",
+			icon: re,
+			label: B.toolbar.redo,
+			isActive: () => !1,
+			run: () => X?.chain().focus().redo().run(),
+			disabled: !X?.can().chain().focus().redo().run()
+		}
+	], [X, B]), ce = C && X ? /* @__PURE__ */ f(E, {
+		editor: X,
+		sourceMode: U,
+		sourceValue: G,
+		maxLength: w,
+		strings: B
+	}) : null, $ = typeof i == "string" ? i : "", le = $.length > 0 && !V && X?.isEmpty ? /* @__PURE__ */ f("span", {
+		className: "text-muted-foreground pointer-events-none absolute left-3 top-2 text-sm",
+		children: $
+	}) : null;
+	return /* @__PURE__ */ p("div", {
+		className: t("border-input bg-background rounded-md border", v && "opacity-70", I),
+		children: [
+			/* @__PURE__ */ f(y, {
+				buttons: se,
+				extraToolbarItems: T,
+				hideSourceToggle: P,
+				sourceMode: U,
+				toggleSourceMode: Q,
+				disabled: v,
+				hasEditor: !!X,
+				toolbarTrailing: M,
+				strings: B
+			}),
+			U ? /* @__PURE__ */ f("textarea", {
+				"aria-label": B.sourceLabel,
+				value: G,
+				onChange: oe,
+				disabled: v,
+				spellCheck: !1,
+				className: t("bg-muted/50 w-full resize-y px-3 py-2 font-mono text-xs leading-relaxed focus-visible:outline-none", v && "cursor-not-allowed"),
+				style: Z
+			}) : /* @__PURE__ */ p("div", {
+				className: "relative",
+				style: Z,
+				children: [le, /* @__PURE__ */ f(k, {
+					editor: X,
+					className: t("h-full", "[&_.ProseMirror]:h-full", "[&_.ProseMirror]:min-h-full", "[&_.ProseMirror]:outline-none")
+				})]
+			}),
+			!!N && /* @__PURE__ */ f("div", {
+				className: "px-3 pb-2 pt-1",
+				children: N
+			}),
+			ce
+		]
+	});
+});
+M.displayName = "TiptapRichTextEditor";
+var N = typeof k == "function" && typeof A == "function" && typeof j == "object" && !!j, P = i(function({ value: n, onChange: r, placeholder: i, compact: d = !1, minHeight: m, maxHeight: _, disabled: v = !1, showCounts: w = !1, maxLength: E, extraToolbarItems: k, toolbarTrailing: A, footerSlot: j, hideSourceToggle: M = !1, autoFocus: N = !1, className: P, onCaretChange: F, strings: I }, L) {
+	let R = e(b, I), z = l(null), [B, V] = u(!1), [H, U] = u(!1), [W, G] = u(""), K = l(D(n)), q = l(F);
+	q.current = F, o(() => {
+		let e = z.current;
+		if (!e || B) return;
+		let t = O(n);
+		D(e.innerHTML) !== D(t) && (e.innerHTML = t), K.current = D(n);
+	}, [B, n]), o(() => {
+		N && z.current?.focus();
+	}, [N]);
+	let J = a(() => {
+		let e = z.current, t = D(e?.innerHTML ?? "");
+		K.current = t, r(t), q.current?.();
+	}, [r]);
+	s(L, () => ({
+		focus: () => z.current?.focus(),
+		getHTML: () => D(z.current?.innerHTML ?? ""),
+		setHTML: (e) => {
+			let t = D(e);
+			K.current = t, z.current && (z.current.innerHTML = O(t)), r(t);
+		},
+		insertHTML: (e) => {
+			C(z.current, e), J();
+		},
+		isEmpty: () => D(z.current?.innerHTML ?? "") === "",
+		clear: () => {
+			K.current = "", z.current && (z.current.innerHTML = "<p></p>"), r("");
+		},
+		getCaretContext: () => x(),
+		replaceBeforeCaret: (e, t) => {
+			S(null, e, t, () => J());
+		}
+	}), [J, r]);
+	let Y = c(() => ({
+		minHeight: m ?? (d ? "2rem" : "12rem"),
+		..._ ? {
+			maxHeight: _,
+			overflowY: "auto"
+		} : {}
+	}), [
+		d,
+		_,
+		m
+	]), X = a(() => {
+		if (H) {
+			let e = D(W);
+			K.current = e, z.current && (z.current.innerHTML = O(e)), r(e), U(!1);
+			return;
+		}
+		G(z.current?.innerHTML ?? O(n)), U(!0);
+	}, [
+		r,
+		H,
+		W,
+		n
+	]), Z = a((e) => {
+		let t = e.target.value;
+		G(t);
+		let n = D(t);
+		K.current = n, r(n);
+	}, [r]), Q = typeof i == "string" ? i : "", oe = D(K.current) === "", se = Q.length > 0 && !B && oe ? /* @__PURE__ */ f("span", {
+		className: "text-muted-foreground pointer-events-none absolute left-3 top-2 text-sm",
+		children: Q
+	}) : null, ce = c(() => [
+		{
+			id: "bold",
+			icon: ee,
+			label: R.toolbar.bold,
+			isActive: () => !1,
+			run: () => void 0,
+			disabled: !0
+		},
+		{
+			id: "italic",
+			icon: h,
+			label: R.toolbar.italic,
+			isActive: () => !1,
+			run: () => void 0,
+			disabled: !0
+		},
+		{
+			id: "strike",
+			icon: ie,
+			label: R.toolbar.strike,
+			isActive: () => !1,
+			run: () => void 0,
+			disabled: !0
+		},
+		{
+			id: "bullet-list",
+			icon: g,
+			label: R.toolbar.bulletList,
+			isActive: () => !1,
+			run: () => void 0,
+			disabled: !0
+		},
+		{
+			id: "ordered-list",
+			icon: te,
+			label: R.toolbar.orderedList,
+			isActive: () => !1,
+			run: () => void 0,
+			disabled: !0
+		},
+		{
+			id: "blockquote",
+			icon: ne,
+			label: R.toolbar.blockquote,
+			isActive: () => !1,
+			run: () => void 0,
+			disabled: !0
+		},
+		{
+			id: "undo",
+			icon: ae,
+			label: R.toolbar.undo,
+			isActive: () => !1,
+			run: () => void 0,
+			disabled: !0
+		},
+		{
+			id: "redo",
+			icon: re,
+			label: R.toolbar.redo,
+			isActive: () => !1,
+			run: () => void 0,
+			disabled: !0
+		}
+	], [R]), $ = H ? W.replace(/<[^>]*>/g, "") : z.current?.innerText ?? D(n).replace(/<[^>]*>/g, ""), le = w ? /* @__PURE__ */ f(T, {
+		text: $,
+		maxLength: E,
+		strings: R
+	}) : null;
+	return /* @__PURE__ */ p("div", {
+		className: t("border-input bg-background rounded-md border", v && "opacity-70", P),
+		children: [
+			/* @__PURE__ */ f(y, {
+				buttons: ce,
+				extraToolbarItems: k,
+				hideSourceToggle: M,
+				sourceMode: H,
+				toggleSourceMode: X,
+				disabled: v,
+				hasEditor: !0,
+				toolbarTrailing: A,
+				strings: R
+			}),
+			H ? /* @__PURE__ */ f("textarea", {
+				"aria-label": R.sourceLabel,
+				value: W,
+				onChange: Z,
+				disabled: v,
+				spellCheck: !1,
+				className: t("bg-muted/50 w-full resize-y px-3 py-2 font-mono text-xs leading-relaxed focus-visible:outline-none", v && "cursor-not-allowed"),
+				style: Y
+			}) : /* @__PURE__ */ p("div", {
+				className: "relative",
+				style: Y,
+				children: [se, /* @__PURE__ */ f("div", {
+					ref: z,
+					role: "textbox",
+					"aria-label": R.editorLabel,
+					"aria-multiline": "true",
+					contentEditable: !v,
+					suppressContentEditableWarning: !0,
+					onInput: J,
+					onKeyUp: () => q.current?.(),
+					onMouseUp: () => q.current?.(),
+					onFocus: () => V(!0),
+					onBlur: () => V(!1),
+					className: t("prose prose-sm prose-p:my-0.5 prose-p:leading-relaxed prose-headings:my-1 prose-ul:my-1 prose-ol:my-1 prose-li:my-0.5 max-w-none px-3 py-2 text-sm focus-visible:outline-none dark:prose-invert", "h-full min-h-full", v && "cursor-not-allowed"),
+					dangerouslySetInnerHTML: { __html: O(n) }
+				})]
+			}),
+			!!j && /* @__PURE__ */ f("div", {
+				className: "px-3 pb-2 pt-1",
+				children: j
+			}),
+			le
+		]
+	});
+});
+P.displayName = "FallbackRichTextEditor";
+//#endregion
+//#region src/components/features/rich-text-editor/rich-text-editor.tsx
+var F = i(function(e, t) {
+	return N ? /* @__PURE__ */ f(M, {
+		...e,
+		ref: t
+	}) : /* @__PURE__ */ f(P, {
+		className: "rich-text-editor--component",
+		...e,
+		ref: t
+	});
+});
+F.displayName = "RichTextEditor";
+//#endregion
+export { y as i, T as n, b as r, F as t };
+
+//# sourceMappingURL=rich-text-editor-B6WKHUKC.js.map