themelia-ui 3.0.0 → 3.2.0

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

@@ -1,595 +0,0 @@
-import { t as e } from "./cx--CBrhWH0.js";
-import { o as t } from "./typography-BkxEiwQ1.js";
-import { w as n } from "./primitives-D0bdDozz.js";
-import { c as r } from "./text-inputs-DF_lD7pA.js";
-import { n as i, o as a, r as o, t as s } from "./toolbar-DWRywF0R.js";
-import { t as c } from "./tiptap-engine-IJO4CSsk.js";
-import { BoldIcon as l, Code2Icon as u, ItalicIcon as d, ListIcon as f, ListOrderedIcon as p, QuoteIcon as m, Redo2Icon as h, StrikethroughIcon as g, Undo2Icon as ee } from "lucide-react";
-import { useCallback as _, useEffect as v, useImperativeHandle as y, useMemo as te, useRef as b, useState as x, useSyncExternalStore as S } from "react";
-import { Fragment as ne, jsx as C, jsxs as w } from "react/jsx-runtime";
-//#region src/components/features/rich-text-editor/editor-dom.ts
-var T = "p, li, h1, h2, h3, h4, h5, h6, blockquote", E = /* @__PURE__ */ new Set([
-	"",
-	"<p></p>",
-	"<p><br></p>",
-	"<br>",
-	"<div><br></div>"
-]);
-function D(e) {
-	let t = e.trim();
-	return E.has(t) ? "" : t;
-}
-function O(e) {
-	let t = D(e);
-	return t === "" ? "<p></p>" : t;
-}
-function k(e) {
-	return e.replace(/<\/(?:p|div|li|h[1-6]|blockquote|pre)>/gi, " ").replace(/<br\s*\/?>/gi, " ").replace(/<[^>]*>/g, "").replace(/&nbsp;/g, " ");
-}
-function A() {
-	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;
-	for (; n && n.nodeType !== Node.ELEMENT_NODE;) n = n.parentNode;
-	if (!n || !n.closest("[contenteditable=\"true\"]")) return null;
-	let r = t.startContainer.nodeType === Node.TEXT_NODE ? (t.startContainer.textContent ?? "").slice(0, t.startOffset) : "", i = t.startContainer;
-	for (; i && i !== n;) {
-		for (let e = i.previousSibling; e; e = e.previousSibling) r = (e.textContent ?? "") + r;
-		if (i = i.parentNode, i && i.matches?.(T)) break;
-	}
-	let a = t.getBoundingClientRect();
-	return {
-		textBefore: r,
-		rect: a && (a.top || a.left || a.right || a.bottom) ? {
-			top: a.top,
-			left: a.left,
-			bottom: a.bottom,
-			right: a.right
-		} : void 0
-	};
-}
-function re(e) {
-	let t = e;
-	for (; t;) {
-		if (t.previousSibling) {
-			for (t = t.previousSibling; t?.lastChild;) t = t.lastChild;
-			if (t?.nodeType === Node.TEXT_NODE) return t;
-			continue;
-		}
-		if (t = t.parentNode, !t || t.matches?.(`${T}, [contenteditable="true"]`)) return null;
-	}
-	return null;
-}
-function j(e, t, n) {
-	if (typeof window > "u") return;
-	let r = window.getSelection();
-	if (!r || r.rangeCount === 0) return;
-	let i = r.getRangeAt(0);
-	if (!i.collapsed) return;
-	let a = e, o = i.startContainer, s = i.startOffset;
-	for (; a > 0;) {
-		if (o.nodeType === Node.TEXT_NODE) {
-			let e = Math.min(s, a);
-			if (s -= e, a -= e, a === 0) break;
-		}
-		let e = re(o);
-		if (!e) break;
-		o = e, s = e.textContent?.length ?? 0;
-	}
-	let c = document.createRange();
-	c.setStart(o, s), c.setEnd(i.endContainer, i.endOffset);
-	let l = (o.parentElement ?? null)?.closest("[contenteditable=\"true\"]");
-	c.deleteContents(), c.insertNode(document.createRange().createContextualFragment(t)), r.removeAllRanges(), c.collapse(!1), r.addRange(c), l && n();
-}
-function M(e, t) {
-	if (typeof window > "u" || !e) return;
-	e.focus();
-	let n = window.getSelection(), r = n && n.rangeCount > 0 ? n.getRangeAt(0) : null;
-	if (!r || !e.contains(r.commonAncestorContainer)) {
-		e.insertAdjacentHTML("beforeend", t);
-		return;
-	}
-	r.deleteContents(), r.insertNode(document.createRange().createContextualFragment(t)), r.collapse(!1), n.removeAllRanges(), n.addRange(r);
-}
-//#endregion
-//#region src/components/features/rich-text-editor/rich-text-editor.strings.ts
-var N = {
-	editorLabel: "Rich text editor",
-	sourceLabel: "HTML source",
-	toolbarLabel: "Formatting",
-	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"
-	}
-}, P = {
-	root: "rich-text-editor__root___MRWcD",
-	toolbar: "rich-text-editor__toolbar___Yd4rD",
-	toolbarButton: "rich-text-editor__toolbarButton___FCSxs",
-	toolbarRule: "rich-text-editor__toolbarRule___aZWen",
-	toolbarTrailing: "rich-text-editor__toolbarTrailing___eJpyL",
-	bodyWrap: "rich-text-editor__bodyWrap___5cELi",
-	mount: "rich-text-editor__mount___iRz9J",
-	body: "rich-text-editor__body___9gEV_",
-	placeholder: "rich-text-editor__placeholder___eRucn",
-	source: "rich-text-editor__source___tH6UD",
-	footerSlot: "rich-text-editor__footerSlot___E1Vt-",
-	counts: "rich-text-editor__counts___d4bAu"
-};
-//#endregion
-//#region src/components/features/rich-text-editor/rich-text-editor-toolbar.tsx
-function F({ config: e, disabled: t, separatorBefore: n = !1 }) {
-	let r = e.icon, s = e.isActive(), c = /* @__PURE__ */ C(i, {
-		type: "button",
-		tone: s ? "primary" : "neutral",
-		buttonStyle: s ? "solid" : "ghost",
-		iconOnly: !0,
-		onMouseDown: (e) => e.preventDefault(),
-		onClick: e.run,
-		disabled: t || e.disabled,
-		"aria-pressed": s,
-		"aria-label": e.label,
-		title: e.label,
-		className: P.toolbarButton,
-		children: /* @__PURE__ */ C(r, {})
-	});
-	return n ? /* @__PURE__ */ w(o, { children: [/* @__PURE__ */ C(a, {
-		orientation: "vertical",
-		className: P.toolbarRule
-	}), c] }) : c;
-}
-function I({ buttons: t, extraToolbarItems: n, hideSourceToggle: r = !1, sourceMode: i, toggleSourceMode: a, disabled: o = !1, toolbarTrailing: c, strings: l, className: d }) {
-	let f = o || i;
-	return /* @__PURE__ */ w(s, {
-		"aria-label": l.toolbarLabel ?? "Formatting",
-		className: e("rich-text-editor-toolbar--component", P.toolbar, d),
-		children: [
-			t.map((e) => /* @__PURE__ */ C(F, {
-				config: e,
-				disabled: f
-			}, e.id)),
-			!r && /* @__PURE__ */ C(F, {
-				separatorBefore: !0,
-				config: {
-					id: "source",
-					icon: u,
-					label: l.toolbar.sourceCode,
-					isActive: () => i,
-					run: a
-				},
-				disabled: o
-			}),
-			n?.map((e, t) => /* @__PURE__ */ C(F, {
-				separatorBefore: t === 0,
-				config: {
-					id: e.id,
-					icon: e.icon,
-					label: e.label,
-					isActive: e.isActive ?? (() => !1),
-					run: e.onClick,
-					disabled: e.disabled
-				},
-				disabled: f
-			}, e.id)),
-			!!c && /* @__PURE__ */ C("div", {
-				className: P.toolbarTrailing,
-				children: c
-			})
-		]
-	});
-}
-function L({ text: r, maxLength: i, strings: a, className: o }) {
-	let s = r.length, c = r.trim().length > 0 ? r.trim().split(/\s+/).length : 0, l = typeof i == "number" && s > i;
-	return /* @__PURE__ */ w("div", {
-		className: e("editor-counts--component", P.counts, o),
-		children: [/* @__PURE__ */ w(t, {
-			tag: "span",
-			size: "xs",
-			type: l ? "error" : "secondary",
-			weight: l ? "medium" : "regular",
-			children: [
-				/* @__PURE__ */ C(n, {
-					value: s,
-					size: "xs",
-					type: "inherit"
-				}),
-				typeof i == "number" && /* @__PURE__ */ w(ne, { children: [" / ", /* @__PURE__ */ C(n, {
-					value: i,
-					size: "xs",
-					type: "inherit"
-				})] }),
-				" ",
-				a.counts.characters
-			]
-		}), /* @__PURE__ */ w(t, {
-			tag: "span",
-			size: "xs",
-			type: "secondary",
-			children: [
-				/* @__PURE__ */ C(n, {
-					value: c,
-					size: "xs",
-					type: "inherit"
-				}),
-				" ",
-				a.counts.words
-			]
-		})]
-	});
-}
-//#endregion
-//#region src/components/features/rich-text-editor/use-editor-document.ts
-function ie({ engine: e, value: t, onValueChange: n, onCaretChange: r, disabled: i, autoFocus: a, label: o }) {
-	let s = b(null), l = b(null), u = b(null), d = b({
-		onValueChange: n,
-		onCaretChange: r
-	}), f = b(t), p = b(t), m = b(D(t)), h = b(!1), [g, ee] = x(null);
-	v(() => {
-		d.current = {
-			onValueChange: n,
-			onCaretChange: r
-		}, f.current = t;
-	});
-	let y = _(() => {
-		if (h.current) return;
-		let e = D(u.current?.getState().html ?? l.current?.innerHTML ?? "");
-		e !== m.current && (m.current = e, d.current.onValueChange(e)), d.current.onCaretChange?.();
-	}, []);
-	return v(() => {
-		let t = s.current;
-		if (!t) return;
-		let n = e ?? c({
-			element: t,
-			content: f.current
-		}), r = n.mount?.(t) ?? t;
-		n.mount ? e && n.setHtml(f.current) : (r.innerHTML = O(f.current), n.setHtml(f.current)), u.current = n, l.current = r, m.current = D(n.getState().html), p.current = f.current;
-		let i = n.subscribe(y);
-		return ee(n), () => {
-			i(), u.current = null, l.current = null, e ? n.unmount?.() : n.destroy();
-		};
-	}, [e, y]), v(() => {
-		let e = l.current;
-		e && (e.classList.add(P.body), e.setAttribute("role", "textbox"), e.setAttribute("aria-label", o), e.setAttribute("aria-multiline", "true"), e.setAttribute("aria-disabled", String(i)), g?.setEditable ? g.setEditable(!i) : e.contentEditable = String(!i));
-	}, [
-		g,
-		i,
-		o
-	]), v(() => {
-		a && !i && g?.focus();
-	}, [
-		g,
-		a,
-		i
-	]), v(() => {
-		if (!(!g || t === p.current) && (p.current = t, D(t) !== m.current)) {
-			h.current = !0;
-			try {
-				g.setHtml(t), m.current = D(g.getState().html);
-			} finally {
-				h.current = !1;
-			}
-		}
-	}, [g, t]), {
-		host: s,
-		editable: l,
-		current: u,
-		activeEngine: g,
-		state: S(_((e) => g?.subscribe(e) ?? (() => {}), [g]), () => g?.getState() ?? null, () => null),
-		emit: y,
-		read: _(() => D(u.current?.getState().html ?? f.current), []),
-		write: _((e) => {
-			u.current?.setHtml(e), y();
-		}, [y]),
-		noteCaret: _(() => d.current.onCaretChange?.(), [])
-	};
-}
-//#endregion
-//#region src/components/features/rich-text-editor/rich-text-editor.tsx
-function R({ engine: n, value: i, onValueChange: a, placeholder: o, compact: s = !1, minHeight: c, maxHeight: u, disabled: v = !1, showCounts: b = !1, maxLength: S, extraToolbarItems: ne, toolbarTrailing: T, footerSlot: E, hideSourceToggle: O = !1, autoFocus: re = !1, className: F, onCaretChange: R, strings: z, ref: ae }) {
-	let B = {
-		...N,
-		...z,
-		toolbar: {
-			...N.toolbar,
-			...z?.toolbar
-		},
-		counts: {
-			...N.counts,
-			...z?.counts
-		}
-	}, [oe, V] = x(!1), [H, U] = x(!1), [W, G] = x({
-		raw: "",
-		html: ""
-	}), { host: se, editable: K, current: q, activeEngine: ce, state: J, emit: Y, read: X, write: Z, noteCaret: le } = ie({
-		engine: n,
-		value: i,
-		onValueChange: a,
-		onCaretChange: R,
-		disabled: v,
-		autoFocus: re,
-		label: B.editorLabel
-	}), ue = D(J?.html ?? i), de = W.html === ue ? W.raw : ue;
-	y(ae, () => ({
-		focus: () => q.current?.focus(),
-		getHTML: X,
-		setHTML: Z,
-		insertHTML: (e) => {
-			q.current?.insertHtml ? q.current.insertHtml(e) : M(K.current, e), Y();
-		},
-		isEmpty: () => X() === "",
-		clear: () => Z(""),
-		getCaretContext: () => H ? null : q.current?.getCaretContext ? q.current.getCaretContext() : K.current?.contains(window.getSelection()?.anchorNode ?? null) ? A() : null,
-		replaceBeforeCaret: (e, t) => {
-			q.current?.replaceBeforeCaret ? q.current.replaceBeforeCaret(e, t) : j(e, t, Y), Y();
-		}
-	}), [
-		q,
-		K,
-		Y,
-		X,
-		H,
-		Z
-	]);
-	let Q = _((e) => {
-		ce?.execute(e), Y();
-	}, [ce, Y]), $ = _((e) => J?.active.has(e) ?? !1, [J]), fe = te(() => [
-		{
-			id: "bold",
-			icon: l,
-			label: B.toolbar.bold,
-			isActive: () => $("bold"),
-			run: () => Q("bold")
-		},
-		{
-			id: "italic",
-			icon: d,
-			label: B.toolbar.italic,
-			isActive: () => $("italic"),
-			run: () => Q("italic")
-		},
-		{
-			id: "strike",
-			icon: g,
-			label: B.toolbar.strike,
-			isActive: () => $("strike"),
-			run: () => Q("strike")
-		},
-		{
-			id: "bullet-list",
-			icon: f,
-			label: B.toolbar.bulletList,
-			isActive: () => $("bulletList"),
-			run: () => Q("bulletList")
-		},
-		{
-			id: "ordered-list",
-			icon: p,
-			label: B.toolbar.orderedList,
-			isActive: () => $("orderedList"),
-			run: () => Q("orderedList")
-		},
-		{
-			id: "blockquote",
-			icon: m,
-			label: B.toolbar.blockquote,
-			isActive: () => $("blockquote"),
-			run: () => Q("blockquote")
-		},
-		{
-			id: "undo",
-			icon: ee,
-			label: B.toolbar.undo,
-			isActive: () => !1,
-			run: () => Q("undo"),
-			disabled: J ? !J.canUndo : void 0
-		},
-		{
-			id: "redo",
-			icon: h,
-			label: B.toolbar.redo,
-			isActive: () => !1,
-			run: () => Q("redo"),
-			disabled: J ? !J.canRedo : void 0
-		}
-	], [
-		B.toolbar,
-		Q,
-		$,
-		J
-	]), pe = _(() => {
-		if (!H) {
-			let e = X();
-			G({
-				raw: e,
-				html: e
-			});
-		}
-		U((e) => !e);
-	}, [X, H]), me = _((e) => {
-		let t = e.target.value;
-		Z(t), G({
-			raw: t,
-			html: X()
-		});
-	}, [X, Z]), he = te(() => ({
-		minHeight: c ?? (s ? "var(--editor-min-h-compact)" : "var(--editor-min-h)"),
-		...u ? {
-			maxHeight: u,
-			overflowY: "auto"
-		} : {}
-	}), [
-		s,
-		u,
-		c
-	]), ge = D(i) === "", _e = k(H ? de : D(i));
-	return /* @__PURE__ */ w("div", {
-		"data-slot": "rich-text-editor",
-		"data-compact": s || void 0,
-		"data-disabled": v || void 0,
-		className: e("rich-text-editor--component", P.root, F),
-		children: [
-			/* @__PURE__ */ C(I, {
-				buttons: fe,
-				extraToolbarItems: ne,
-				hideSourceToggle: O,
-				sourceMode: H,
-				toggleSourceMode: pe,
-				disabled: v,
-				toolbarTrailing: T,
-				strings: B
-			}),
-			H && /* @__PURE__ */ C(r, {
-				"aria-label": B.sourceLabel,
-				value: de,
-				onChange: me,
-				disabled: v,
-				spellCheck: !1,
-				className: P.source,
-				style: he
-			}),
-			/* @__PURE__ */ w("div", {
-				className: P.bodyWrap,
-				style: he,
-				hidden: H,
-				children: [!!o && ge && !oe && /* @__PURE__ */ C(t, {
-					type: "secondary",
-					className: P.placeholder,
-					children: o
-				}), /* @__PURE__ */ C("div", {
-					ref: se,
-					className: P.mount,
-					onInput: Y,
-					onKeyUp: le,
-					onMouseUp: le,
-					onFocus: () => V(!0),
-					onBlur: () => V(!1)
-				})]
-			}),
-			!!E && /* @__PURE__ */ C("div", {
-				className: P.footerSlot,
-				children: E
-			}),
-			b && /* @__PURE__ */ C(L, {
-				text: _e,
-				maxLength: S,
-				strings: B
-			})
-		]
-	});
-}
-//#endregion
-//#region src/components/features/rich-text-editor/exec-command-engine.ts
-var z = {
-	bold: "bold",
-	italic: "italic",
-	underline: "underline",
-	strike: "strikeThrough",
-	bulletList: "insertUnorderedList",
-	orderedList: "insertOrderedList",
-	blockquote: "formatBlock",
-	undo: "undo",
-	redo: "redo"
-}, ae = [
-	"bold",
-	"italic",
-	"underline",
-	"strike",
-	"bulletList",
-	"orderedList"
-], B = () => typeof document < "u", oe = () => B() && typeof document.execCommand == "function", V = () => B() && typeof document.queryCommandState == "function";
-function H(e) {
-	if (!V()) return !1;
-	try {
-		return document.queryCommandState(z[e]);
-	} catch {
-		return !1;
-	}
-}
-function U(e) {
-	if (!B()) return !1;
-	let t = document.getSelection()?.anchorNode ?? null;
-	for (; t && t !== e;) {
-		if (t instanceof HTMLElement && t.tagName === "BLOCKQUOTE") return !0;
-		t = t.parentNode;
-	}
-	return !1;
-}
-function W(e) {
-	let t = /* @__PURE__ */ new Set(), n = !1, r = null, i = {
-		html: "",
-		canUndo: !1,
-		canRedo: !1,
-		active: /* @__PURE__ */ new Set()
-	}, a = null, o = () => {
-		if (!n) {
-			a = null;
-			for (let e of [...t]) e();
-		}
-	}, s = () => B() && e.contains(document.getSelection()?.anchorNode ?? null), c = () => {
-		r && r !== e && e.parentNode === r && e.remove(), r = null;
-	}, l = () => o(), u = () => {
-		s() && o();
-	};
-	return e.addEventListener("input", l), B() && document.addEventListener("selectionchange", u), {
-		mount(t) {
-			return n ? e : (t !== e && e.parentNode !== t && t.append(e), r = t, e);
-		},
-		unmount: c,
-		setEditable(t) {
-			n || e.setAttribute("contenteditable", String(t));
-		},
-		getState() {
-			if (n) return i;
-			if (a) return a;
-			let t = /* @__PURE__ */ new Set();
-			for (let e of ae) H(e) && t.add(e);
-			return U(e) && t.add("blockquote"), a = {
-				html: e.innerHTML,
-				canUndo: !0,
-				canRedo: !0,
-				active: t
-			}, a;
-		},
-		setHtml(t) {
-			n || e.innerHTML !== t && (e.innerHTML = t, o());
-		},
-		insertHtml(t) {
-			if (n) return;
-			let r = document.getSelection(), i = r?.rangeCount ? r.getRangeAt(0) : null, a = i && e.contains(i.commonAncestorContainer) ? i.cloneRange() : null;
-			e.focus(), r?.removeAllRanges(), a && r?.addRange(a), M(e, t), o();
-		},
-		getCaretContext() {
-			return n || !s() ? null : A();
-		},
-		replaceBeforeCaret(e, t) {
-			n || !s() || !Number.isFinite(e) || (j(Math.max(0, Math.floor(e)), t, () => {}), o());
-		},
-		focus() {
-			n || e.focus();
-		},
-		execute(t) {
-			n || !oe() || (e.focus(), t === "blockquote" ? document.execCommand("formatBlock", !1, U(e) ? "<p>" : "<blockquote>") : document.execCommand(z[t], !1, void 0), o());
-		},
-		subscribe(e) {
-			return n ? () => {} : (t.add(e), () => t.delete(e));
-		},
-		destroy() {
-			n || (c(), n = !0, a = null, e.removeEventListener("input", l), B() && document.removeEventListener("selectionchange", u), t.clear());
-		}
-	};
-}
-//#endregion
-export { N as a, D as c, O as d, I as i, A as l, R as n, k as o, L as r, M as s, W as t, j as u };