haze-ui 1.32.0 → 1.34.0

package/dist/components/RichTextEditor/RichTextEditor.js

@@ -0,0 +1,257 @@
+
+"use client";
+import { classnames as e } from "../../utils/classnames.js";
+import { NativeHiddenFields as t } from "../../utils/native-form.js";
+import n from "../Toolbar/Toolbar.js";
+import r from "../Toolbar/ToolbarButton.js";
+import i from "../Toolbar/ToolbarSeparator.js";
+/* empty css                         */
+import { c as ee } from "react/compiler-runtime";
+import { Fragment as a, useEffect as o, useImperativeHandle as te, useRef as ne } from "react";
+import { jsx as s, jsxs as re } from "react/jsx-runtime";
+import { useControl as c } from "react-use-control";
+import ie from "@tiptap/extension-placeholder";
+import { EditorContent as ae, useEditor as oe, useEditorState as se } from "@tiptap/react";
+import ce from "@tiptap/starter-kit";
+//#region src/lib/components/RichTextEditor/RichTextEditor.tsx
+var le = "haze-RichTextEditor__root", l = "haze-RichTextEditor__toolbarArea", ue = "haze-RichTextEditor__contentArea";
+function de(e, t, n) {
+	let r = () => e?.chain().focus(), i = !e || !t || !n;
+	return [
+		[
+			{
+				key: "bold",
+				label: "Bold",
+				glyph: "B",
+				pressed: t?.bold ?? !1,
+				disabled: i || !t.canBold,
+				run: () => r()?.toggleBold().run()
+			},
+			{
+				key: "italic",
+				label: "Italic",
+				glyph: "I",
+				pressed: t?.italic ?? !1,
+				disabled: i || !t.canItalic,
+				run: () => r()?.toggleItalic().run()
+			},
+			{
+				key: "strike",
+				label: "Strikethrough",
+				glyph: "S",
+				pressed: t?.strike ?? !1,
+				disabled: i || !t.canStrike,
+				run: () => r()?.toggleStrike().run()
+			}
+		],
+		[{
+			key: "heading-2",
+			label: "Heading 2",
+			glyph: "H2",
+			pressed: t?.heading2 ?? !1,
+			disabled: i || !t.canHeading2,
+			run: () => r()?.toggleHeading({ level: 2 }).run()
+		}, {
+			key: "heading-3",
+			label: "Heading 3",
+			glyph: "H3",
+			pressed: t?.heading3 ?? !1,
+			disabled: i || !t.canHeading3,
+			run: () => r()?.toggleHeading({ level: 3 }).run()
+		}],
+		[{
+			key: "bullet-list",
+			label: "Bullet list",
+			glyph: "• List",
+			pressed: t?.bulletList ?? !1,
+			disabled: i || !t.canBulletList,
+			run: () => r()?.toggleBulletList().run()
+		}, {
+			key: "ordered-list",
+			label: "Ordered list",
+			glyph: "1. List",
+			pressed: t?.orderedList ?? !1,
+			disabled: i || !t.canOrderedList,
+			run: () => r()?.toggleOrderedList().run()
+		}],
+		[{
+			key: "blockquote",
+			label: "Blockquote",
+			glyph: "Quote",
+			pressed: t?.blockquote ?? !1,
+			disabled: i || !t.canBlockquote,
+			run: () => r()?.toggleBlockquote().run()
+		}, {
+			key: "code-block",
+			label: "Code block",
+			glyph: "Code",
+			pressed: t?.codeBlock ?? !1,
+			disabled: i || !t.canCodeBlock,
+			run: () => r()?.toggleCodeBlock().run()
+		}],
+		[{
+			key: "link",
+			label: "Link",
+			glyph: "Link",
+			pressed: t?.link ?? !1,
+			disabled: i || !t.canLink,
+			run: () => {
+				let t = e?.isActive("link");
+				if (!e) return;
+				if (t) {
+					e.chain().focus().unsetLink().run();
+					return;
+				}
+				let n = e.getAttributes("link").href, r = typeof n == "string" && n ? n : "https://";
+				e.chain().focus().extendMarkRange("link").setLink({ href: r }).run();
+			}
+		}]
+	];
+}
+function u(r) {
+	let i = ee(77), a, u, d, f, p, m, h, g, _, v, y, b;
+	i[0] === r ? (a = i[1], u = i[2], d = i[3], f = i[4], p = i[5], m = i[6], h = i[7], g = i[8], _ = i[9], v = i[10], y = i[11], b = i[12]) : ({value: b, placeholder: g, editable: f, toolbar: y, extensions: m, editorKey: p, name: h, className: d, "aria-label": a, "aria-labelledby": u, ref: _, ...v} = r, i[0] = r, i[1] = a, i[2] = u, i[3] = d, i[4] = f, i[5] = p, i[6] = m, i[7] = h, i[8] = g, i[9] = _, i[10] = v, i[11] = y, i[12] = b);
+	let [x, S] = c(b, ""), [C] = c(f, !0), w;
+	i[13] === Symbol.for("react.memo_cache_sentinel") ? (w = [], i[13] = w) : w = i[13];
+	let T = ne(w), E;
+	i[14] === Symbol.for("react.memo_cache_sentinel") ? (E = ce.configure({ link: {
+		openOnClick: !1,
+		autolink: !0
+	} }), i[14] = E) : E = i[14];
+	let D;
+	i[15] === g ? D = i[16] : (D = ie.configure({ placeholder: g ?? "" }), i[15] = g, i[16] = D);
+	let O;
+	i[17] === m ? O = i[18] : (O = m ?? [], i[17] = m, i[18] = O);
+	let k;
+	i[19] !== D || i[20] !== O ? (k = [
+		E,
+		D,
+		...O
+	], i[19] = D, i[20] = O, i[21] = k) : k = i[21];
+	let A = a ?? "Rich text editor", j;
+	i[22] === u ? j = i[23] : (j = u ? { "aria-labelledby": u } : {}, i[22] = u, i[23] = j);
+	let M;
+	i[24] !== A || i[25] !== j ? (M = { attributes: {
+		"aria-label": A,
+		...j
+	} }, i[24] = A, i[25] = j, i[26] = M) : M = i[26];
+	let N;
+	i[27] === S ? N = i[28] : (N = (e) => {
+		let { editor: t } = e, n = t.getHTML();
+		T.current = [...T.current, n], S(n);
+	}, i[27] = S, i[28] = N);
+	let P;
+	i[29] !== C || i[30] !== k || i[31] !== M || i[32] !== N || i[33] !== x ? (P = {
+		immediatelyRender: !1,
+		content: x,
+		editable: C,
+		extensions: k,
+		editorProps: M,
+		onUpdate: N
+	}, i[29] = C, i[30] = k, i[31] = M, i[32] = N, i[33] = x, i[34] = P) : P = i[34];
+	let F;
+	i[35] === p ? F = i[36] : (F = [p], i[35] = p, i[36] = F);
+	let I = oe(P, F), L, R;
+	i[37] !== I || i[38] !== x ? (L = () => {
+		if (!I || I.isDestroyed) return;
+		let e = T.current, t = e.indexOf(x);
+		if (t !== -1) {
+			T.current = e.slice(t + 1);
+			return;
+		}
+		x !== I.getHTML() && (T.current = [], !(x === "" && I.isEmpty) && I.commands.setContent(x, { emitUpdate: !1 }));
+	}, R = [I, x], i[37] = I, i[38] = x, i[39] = L, i[40] = R) : (L = i[39], R = i[40]), o(L, R);
+	let z, B;
+	i[41] !== C || i[42] !== I ? (z = () => {
+		I && !I.isDestroyed && I.setEditable(C);
+	}, B = [I, C], i[41] = C, i[42] = I, i[43] = z, i[44] = B) : (z = i[43], B = i[44]), o(z, B);
+	let V, H;
+	i[45] === I ? (V = i[46], H = i[47]) : (V = () => ({ getEditor: () => I }), H = [I], i[45] = I, i[46] = V, i[47] = H), te(_, V, H);
+	let U;
+	i[48] === I ? U = i[49] : (U = {
+		editor: I,
+		selector: pe
+	}, i[48] = I, i[49] = U);
+	let W = se(U), G, K, q, J;
+	if (i[50] !== d || i[51] !== C || i[52] !== I || i[53] !== v || i[54] !== y || i[55] !== W) {
+		let t = de(I, W, C);
+		G = "rich-text-editor", i[60] === d ? K = i[61] : (K = [le, d], i[60] = d, i[61] = K), q = v, J = y !== !1 && (y === void 0 ? /* @__PURE__ */ s(n, {
+			"aria-label": "Text formatting",
+			"data-slot": "rich-text-toolbar",
+			className: l,
+			children: t.map(fe)
+		}) : /* @__PURE__ */ s("div", {
+			"data-slot": "rich-text-toolbar",
+			className: e([l]),
+			children: y
+		})), i[50] = d, i[51] = C, i[52] = I, i[53] = v, i[54] = y, i[55] = W, i[56] = G, i[57] = K, i[58] = q, i[59] = J;
+	} else G = i[56], K = i[57], q = i[58], J = i[59];
+	let Y;
+	i[62] === Symbol.for("react.memo_cache_sentinel") ? (Y = [ue], i[62] = Y) : Y = i[62];
+	let X;
+	i[63] === I ? X = i[64] : (X = /* @__PURE__ */ s(ae, {
+		editor: I,
+		"data-slot": "rich-text-content",
+		className: e(Y)
+	}), i[63] = I, i[64] = X);
+	let Z;
+	i[65] === x ? Z = i[66] : (Z = [x], i[65] = x, i[66] = Z);
+	let Q;
+	i[67] !== h || i[68] !== Z ? (Q = /* @__PURE__ */ s(t, {
+		name: h,
+		values: Z
+	}), i[67] = h, i[68] = Z, i[69] = Q) : Q = i[69];
+	let $;
+	return i[70] !== G || i[71] !== K || i[72] !== q || i[73] !== J || i[74] !== X || i[75] !== Q ? ($ = /* @__PURE__ */ re("div", {
+		"data-slot": G,
+		...q,
+		className: e(K),
+		children: [
+			J,
+			X,
+			Q
+		]
+	}), i[70] = G, i[71] = K, i[72] = q, i[73] = J, i[74] = X, i[75] = Q, i[76] = $) : $ = i[76], $;
+}
+function fe(e, t) {
+	return /* @__PURE__ */ re(a, { children: [t > 0 && /* @__PURE__ */ s(i, {}), e.map(d)] }, e[0]?.key ?? `group-${t}`);
+}
+function d(e) {
+	return /* @__PURE__ */ s(r, {
+		size: "sm",
+		square: !0,
+		"aria-label": e.label,
+		"aria-pressed": e.pressed,
+		disabled: e.disabled,
+		"data-slot": "rich-text-toolbar-button",
+		onClick: e.run,
+		children: e.glyph
+	}, e.key);
+}
+function pe(e) {
+	let { editor: t } = e;
+	return t ? {
+		bold: t.isActive("bold"),
+		italic: t.isActive("italic"),
+		strike: t.isActive("strike"),
+		heading2: t.isActive("heading", { level: 2 }),
+		heading3: t.isActive("heading", { level: 3 }),
+		bulletList: t.isActive("bulletList"),
+		orderedList: t.isActive("orderedList"),
+		blockquote: t.isActive("blockquote"),
+		codeBlock: t.isActive("codeBlock"),
+		link: t.isActive("link"),
+		canBold: t.can().chain().focus().toggleBold().run(),
+		canItalic: t.can().chain().focus().toggleItalic().run(),
+		canStrike: t.can().chain().focus().toggleStrike().run(),
+		canHeading2: t.can().chain().focus().toggleHeading({ level: 2 }).run(),
+		canHeading3: t.can().chain().focus().toggleHeading({ level: 3 }).run(),
+		canBulletList: t.can().chain().focus().toggleBulletList().run(),
+		canOrderedList: t.can().chain().focus().toggleOrderedList().run(),
+		canBlockquote: t.can().chain().focus().toggleBlockquote().run(),
+		canCodeBlock: t.can().chain().focus().toggleCodeBlock().run(),
+		canLink: t.can().chain().focus().extendMarkRange("link").setLink({ href: "https://" }).run()
+	} : null;
+}
+//#endregion
+export { u as default };

package/dist/components/RichTextEditor/index.js

@@ -0,0 +1,3 @@
+"use client";
+import e from "./RichTextEditor.js";
+export { e as RichTextEditor };