@questpie/admin 1.1.1 → 3.0.0

package/dist/client/components/fields/rich-text-editor/toolbar.mjs

@@ -0,0 +1,541 @@
+import { useTranslation } from "../../../i18n/hooks.mjs";
+import { cn } from "../../../lib/utils.mjs";
+import { Button } from "../../ui/button.mjs";
+import { TableControls } from "./table-controls.mjs";
+import { c } from "react/compiler-runtime";
+import { Icon } from "@iconify/react";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/client/components/fields/rich-text-editor/toolbar.tsx
+/**
+* RichText Editor Toolbar Components
+*
+* Icon-based toolbar using Iconify icons (Phosphor set) for a clean, modern UI.
+*/
+/**
+* Icon mapping for all editor actions
+*/
+const EDITOR_ICONS = {
+	undo: "ph:arrow-counter-clockwise",
+	redo: "ph:arrow-clockwise",
+	bold: "ph:text-b",
+	italic: "ph:text-italic",
+	underline: "ph:text-underline",
+	strikethrough: "ph:text-strikethrough",
+	code: "ph:code",
+	heading: "ph:text-h",
+	bulletList: "ph:list-bullets",
+	orderedList: "ph:list-numbers",
+	blockquote: "ph:quotes",
+	codeBlock: "ph:code-block",
+	horizontalRule: "ph:minus-circle",
+	link: "ph:link",
+	image: "ph:image",
+	table: "ph:table",
+	alignLeft: "ph:text-align-left",
+	alignCenter: "ph:text-align-center",
+	alignRight: "ph:text-align-right",
+	alignJustify: "ph:text-align-justify"
+};
+/**
+* Icon-based toolbar button with tooltip showing keyboard shortcuts
+*/
+function ToolbarButton(t0) {
+	const $ = c(28);
+	let active;
+	let children;
+	let className;
+	let disabled;
+	let iconName;
+	let onClick;
+	let rest;
+	let shortcut;
+	let title;
+	if ($[0] !== t0) {
+		({active, disabled, title, onClick, icon: iconName, children, shortcut, className, ...rest} = t0);
+		$[0] = t0;
+		$[1] = active;
+		$[2] = children;
+		$[3] = className;
+		$[4] = disabled;
+		$[5] = iconName;
+		$[6] = onClick;
+		$[7] = rest;
+		$[8] = shortcut;
+		$[9] = title;
+	} else {
+		active = $[1];
+		children = $[2];
+		className = $[3];
+		disabled = $[4];
+		iconName = $[5];
+		onClick = $[6];
+		rest = $[7];
+		shortcut = $[8];
+		title = $[9];
+	}
+	let t1;
+	if ($[10] !== shortcut || $[11] !== title) {
+		t1 = !title && !shortcut ? void 0 : shortcut ? `${title || ""} (${shortcut})`.trim() : title;
+		$[10] = shortcut;
+		$[11] = title;
+		$[12] = t1;
+	} else t1 = $[12];
+	const tooltipText = t1;
+	const iconSuffix = active ? "-fill" : "";
+	const buttonSize = iconName ? "icon-xs" : "xs";
+	let t2;
+	if ($[13] !== className) {
+		t2 = cn("text-muted-foreground hover:text-foreground hover:bg-transparent", "data-[active=true]:text-foreground data-[active=true]:bg-transparent", "aria-expanded:bg-transparent", className);
+		$[13] = className;
+		$[14] = t2;
+	} else t2 = $[14];
+	let t3;
+	if ($[15] !== children || $[16] !== iconName || $[17] !== iconSuffix) {
+		t3 = iconName ? /* @__PURE__ */ jsx(Icon, {
+			icon: `${iconName}${iconSuffix}`,
+			width: 16,
+			height: 16
+		}) : children;
+		$[15] = children;
+		$[16] = iconName;
+		$[17] = iconSuffix;
+		$[18] = t3;
+	} else t3 = $[18];
+	let t4;
+	if ($[19] !== active || $[20] !== buttonSize || $[21] !== disabled || $[22] !== onClick || $[23] !== rest || $[24] !== t2 || $[25] !== t3 || $[26] !== tooltipText) {
+		t4 = /* @__PURE__ */ jsx(Button, {
+			type: "button",
+			variant: "ghost",
+			size: buttonSize,
+			"data-active": active,
+			title: tooltipText,
+			disabled,
+			onClick,
+			className: t2,
+			...rest,
+			children: t3
+		});
+		$[19] = active;
+		$[20] = buttonSize;
+		$[21] = disabled;
+		$[22] = onClick;
+		$[23] = rest;
+		$[24] = t2;
+		$[25] = t3;
+		$[26] = tooltipText;
+		$[27] = t4;
+	} else t4 = $[27];
+	return t4;
+}
+/**
+* Toolbar button group with divider
+*/
+function ToolbarGroup(t0) {
+	const $ = c(2);
+	const { children } = t0;
+	let t1;
+	if ($[0] !== children) {
+		t1 = /* @__PURE__ */ jsx("div", {
+			className: "flex items-center gap-1",
+			children
+		});
+		$[0] = children;
+		$[1] = t1;
+	} else t1 = $[1];
+	return t1;
+}
+/**
+* Main toolbar component with icon-based buttons
+*/
+function RichTextToolbar(t0) {
+	const $ = c(107);
+	const { editor, features, disabled, headingValue, onHeadingChange, onLinkClick, onImageClick, onTableClick, inTable } = t0;
+	const { t } = useTranslation();
+	const isEditable = !disabled;
+	let t1;
+	if ($[0] !== editor || $[1] !== features.history || $[2] !== isEditable || $[3] !== t) {
+		t1 = features.history && /* @__PURE__ */ jsxs(ToolbarGroup, { children: [/* @__PURE__ */ jsx(ToolbarButton, {
+			icon: EDITOR_ICONS.undo,
+			disabled: !isEditable || !editor.can().undo(),
+			title: t("editor.undo"),
+			shortcut: "⌘Z",
+			onClick: () => editor.chain().focus().undo().run()
+		}), /* @__PURE__ */ jsx(ToolbarButton, {
+			icon: EDITOR_ICONS.redo,
+			disabled: !isEditable || !editor.can().redo(),
+			title: t("editor.redo"),
+			shortcut: "⌘⇧Z",
+			onClick: () => editor.chain().focus().redo().run()
+		})] });
+		$[0] = editor;
+		$[1] = features.history;
+		$[2] = isEditable;
+		$[3] = t;
+		$[4] = t1;
+	} else t1 = $[4];
+	let t2;
+	if ($[5] !== features.heading || $[6] !== headingValue || $[7] !== isEditable || $[8] !== onHeadingChange) {
+		t2 = features.heading && /* @__PURE__ */ jsx(ToolbarGroup, { children: /* @__PURE__ */ jsxs("select", {
+			className: "border-input bg-transparent h-6 border px-2 text-xs",
+			value: headingValue,
+			onChange: (event) => onHeadingChange(event.target.value),
+			disabled: !isEditable,
+			children: [
+				/* @__PURE__ */ jsx("option", {
+					value: "paragraph",
+					children: "Paragraph"
+				}),
+				/* @__PURE__ */ jsx("option", {
+					value: "1",
+					children: "Heading 1"
+				}),
+				/* @__PURE__ */ jsx("option", {
+					value: "2",
+					children: "Heading 2"
+				}),
+				/* @__PURE__ */ jsx("option", {
+					value: "3",
+					children: "Heading 3"
+				}),
+				/* @__PURE__ */ jsx("option", {
+					value: "4",
+					children: "Heading 4"
+				}),
+				/* @__PURE__ */ jsx("option", {
+					value: "5",
+					children: "Heading 5"
+				}),
+				/* @__PURE__ */ jsx("option", {
+					value: "6",
+					children: "Heading 6"
+				})
+			]
+		}) });
+		$[5] = features.heading;
+		$[6] = headingValue;
+		$[7] = isEditable;
+		$[8] = onHeadingChange;
+		$[9] = t2;
+	} else t2 = $[9];
+	let t3;
+	if ($[10] !== editor || $[11] !== features.bold || $[12] !== isEditable || $[13] !== t) {
+		t3 = features.bold && /* @__PURE__ */ jsx(ToolbarButton, {
+			icon: EDITOR_ICONS.bold,
+			active: editor.isActive("bold"),
+			disabled: !isEditable,
+			title: t("editor.bold"),
+			shortcut: "⌘B",
+			onClick: () => editor.chain().focus().toggleBold().run()
+		});
+		$[10] = editor;
+		$[11] = features.bold;
+		$[12] = isEditable;
+		$[13] = t;
+		$[14] = t3;
+	} else t3 = $[14];
+	let t4;
+	if ($[15] !== editor || $[16] !== features.italic || $[17] !== isEditable || $[18] !== t) {
+		t4 = features.italic && /* @__PURE__ */ jsx(ToolbarButton, {
+			icon: EDITOR_ICONS.italic,
+			active: editor.isActive("italic"),
+			disabled: !isEditable,
+			title: t("editor.italic"),
+			shortcut: "⌘I",
+			onClick: () => editor.chain().focus().toggleItalic().run()
+		});
+		$[15] = editor;
+		$[16] = features.italic;
+		$[17] = isEditable;
+		$[18] = t;
+		$[19] = t4;
+	} else t4 = $[19];
+	let t5;
+	if ($[20] !== editor || $[21] !== features.underline || $[22] !== isEditable || $[23] !== t) {
+		t5 = features.underline && /* @__PURE__ */ jsx(ToolbarButton, {
+			icon: EDITOR_ICONS.underline,
+			active: editor.isActive("underline"),
+			disabled: !isEditable,
+			title: t("editor.underline"),
+			shortcut: "⌘U",
+			onClick: () => editor.chain().focus().toggleUnderline().run()
+		});
+		$[20] = editor;
+		$[21] = features.underline;
+		$[22] = isEditable;
+		$[23] = t;
+		$[24] = t5;
+	} else t5 = $[24];
+	let t6;
+	if ($[25] !== editor || $[26] !== features.strike || $[27] !== isEditable || $[28] !== t) {
+		t6 = features.strike && /* @__PURE__ */ jsx(ToolbarButton, {
+			icon: EDITOR_ICONS.strikethrough,
+			active: editor.isActive("strike"),
+			disabled: !isEditable,
+			title: t("editor.strikethrough"),
+			onClick: () => editor.chain().focus().toggleStrike().run()
+		});
+		$[25] = editor;
+		$[26] = features.strike;
+		$[27] = isEditable;
+		$[28] = t;
+		$[29] = t6;
+	} else t6 = $[29];
+	let t7;
+	if ($[30] !== editor || $[31] !== features.code || $[32] !== isEditable || $[33] !== t) {
+		t7 = features.code && /* @__PURE__ */ jsx(ToolbarButton, {
+			icon: EDITOR_ICONS.code,
+			active: editor.isActive("code"),
+			disabled: !isEditable,
+			title: t("editor.code"),
+			shortcut: "⌘E",
+			onClick: () => editor.chain().focus().toggleCode().run()
+		});
+		$[30] = editor;
+		$[31] = features.code;
+		$[32] = isEditable;
+		$[33] = t;
+		$[34] = t7;
+	} else t7 = $[34];
+	let t8;
+	if ($[35] !== editor || $[36] !== features.codeBlock || $[37] !== isEditable || $[38] !== t) {
+		t8 = features.codeBlock && /* @__PURE__ */ jsx(ToolbarButton, {
+			icon: EDITOR_ICONS.codeBlock,
+			active: editor.isActive("codeBlock"),
+			disabled: !isEditable,
+			title: t("editor.codeBlock"),
+			onClick: () => editor.chain().focus().toggleCodeBlock().run()
+		});
+		$[35] = editor;
+		$[36] = features.codeBlock;
+		$[37] = isEditable;
+		$[38] = t;
+		$[39] = t8;
+	} else t8 = $[39];
+	let t9;
+	if ($[40] !== t3 || $[41] !== t4 || $[42] !== t5 || $[43] !== t6 || $[44] !== t7 || $[45] !== t8) {
+		t9 = /* @__PURE__ */ jsxs(ToolbarGroup, { children: [
+			t3,
+			t4,
+			t5,
+			t6,
+			t7,
+			t8
+		] });
+		$[40] = t3;
+		$[41] = t4;
+		$[42] = t5;
+		$[43] = t6;
+		$[44] = t7;
+		$[45] = t8;
+		$[46] = t9;
+	} else t9 = $[46];
+	let t10;
+	if ($[47] !== editor || $[48] !== features.bulletList || $[49] !== isEditable || $[50] !== t) {
+		t10 = features.bulletList && /* @__PURE__ */ jsx(ToolbarButton, {
+			icon: EDITOR_ICONS.bulletList,
+			active: editor.isActive("bulletList"),
+			disabled: !isEditable,
+			title: t("editor.unorderedList"),
+			onClick: () => editor.chain().focus().toggleBulletList().run()
+		});
+		$[47] = editor;
+		$[48] = features.bulletList;
+		$[49] = isEditable;
+		$[50] = t;
+		$[51] = t10;
+	} else t10 = $[51];
+	let t11;
+	if ($[52] !== editor || $[53] !== features.orderedList || $[54] !== isEditable || $[55] !== t) {
+		t11 = features.orderedList && /* @__PURE__ */ jsx(ToolbarButton, {
+			icon: EDITOR_ICONS.orderedList,
+			active: editor.isActive("orderedList"),
+			disabled: !isEditable,
+			title: t("editor.orderedList"),
+			onClick: () => editor.chain().focus().toggleOrderedList().run()
+		});
+		$[52] = editor;
+		$[53] = features.orderedList;
+		$[54] = isEditable;
+		$[55] = t;
+		$[56] = t11;
+	} else t11 = $[56];
+	let t12;
+	if ($[57] !== editor || $[58] !== features.blockquote || $[59] !== isEditable || $[60] !== t) {
+		t12 = features.blockquote && /* @__PURE__ */ jsx(ToolbarButton, {
+			icon: EDITOR_ICONS.blockquote,
+			active: editor.isActive("blockquote"),
+			disabled: !isEditable,
+			title: t("editor.quote"),
+			onClick: () => editor.chain().focus().toggleBlockquote().run()
+		});
+		$[57] = editor;
+		$[58] = features.blockquote;
+		$[59] = isEditable;
+		$[60] = t;
+		$[61] = t12;
+	} else t12 = $[61];
+	let t13;
+	if ($[62] !== editor || $[63] !== features.horizontalRule || $[64] !== isEditable || $[65] !== t) {
+		t13 = features.horizontalRule && /* @__PURE__ */ jsx(ToolbarButton, {
+			icon: EDITOR_ICONS.horizontalRule,
+			disabled: !isEditable,
+			title: t("editor.horizontalRule"),
+			onClick: () => editor.chain().focus().setHorizontalRule().run()
+		});
+		$[62] = editor;
+		$[63] = features.horizontalRule;
+		$[64] = isEditable;
+		$[65] = t;
+		$[66] = t13;
+	} else t13 = $[66];
+	let t14;
+	if ($[67] !== t10 || $[68] !== t11 || $[69] !== t12 || $[70] !== t13) {
+		t14 = /* @__PURE__ */ jsxs(ToolbarGroup, { children: [
+			t10,
+			t11,
+			t12,
+			t13
+		] });
+		$[67] = t10;
+		$[68] = t11;
+		$[69] = t12;
+		$[70] = t13;
+		$[71] = t14;
+	} else t14 = $[71];
+	let t15;
+	if ($[72] !== editor || $[73] !== features.align || $[74] !== isEditable || $[75] !== t) {
+		t15 = features.align && /* @__PURE__ */ jsxs(ToolbarGroup, { children: [
+			/* @__PURE__ */ jsx(ToolbarButton, {
+				icon: EDITOR_ICONS.alignLeft,
+				active: editor.isActive({ textAlign: "left" }),
+				disabled: !isEditable,
+				title: t("editor.alignLeft"),
+				onClick: () => editor.chain().focus().setTextAlign("left").run()
+			}),
+			/* @__PURE__ */ jsx(ToolbarButton, {
+				icon: EDITOR_ICONS.alignCenter,
+				active: editor.isActive({ textAlign: "center" }),
+				disabled: !isEditable,
+				title: t("editor.alignCenter"),
+				onClick: () => editor.chain().focus().setTextAlign("center").run()
+			}),
+			/* @__PURE__ */ jsx(ToolbarButton, {
+				icon: EDITOR_ICONS.alignRight,
+				active: editor.isActive({ textAlign: "right" }),
+				disabled: !isEditable,
+				title: t("editor.alignRight"),
+				onClick: () => editor.chain().focus().setTextAlign("right").run()
+			}),
+			/* @__PURE__ */ jsx(ToolbarButton, {
+				icon: EDITOR_ICONS.alignJustify,
+				active: editor.isActive({ textAlign: "justify" }),
+				disabled: !isEditable,
+				title: t("editor.alignJustify"),
+				onClick: () => editor.chain().focus().setTextAlign("justify").run()
+			})
+		] });
+		$[72] = editor;
+		$[73] = features.align;
+		$[74] = isEditable;
+		$[75] = t;
+		$[76] = t15;
+	} else t15 = $[76];
+	let t16;
+	if ($[77] !== editor || $[78] !== features.link || $[79] !== isEditable || $[80] !== onLinkClick || $[81] !== t) {
+		t16 = features.link && /* @__PURE__ */ jsx(ToolbarButton, {
+			icon: EDITOR_ICONS.link,
+			active: editor.isActive("link"),
+			disabled: !isEditable,
+			title: t("editor.link"),
+			shortcut: "⌘K",
+			onClick: onLinkClick
+		});
+		$[77] = editor;
+		$[78] = features.link;
+		$[79] = isEditable;
+		$[80] = onLinkClick;
+		$[81] = t;
+		$[82] = t16;
+	} else t16 = $[82];
+	let t17;
+	if ($[83] !== features.image || $[84] !== isEditable || $[85] !== onImageClick || $[86] !== t) {
+		t17 = features.image && /* @__PURE__ */ jsx(ToolbarButton, {
+			icon: EDITOR_ICONS.image,
+			disabled: !isEditable,
+			title: t("editor.image"),
+			onClick: onImageClick
+		});
+		$[83] = features.image;
+		$[84] = isEditable;
+		$[85] = onImageClick;
+		$[86] = t;
+		$[87] = t17;
+	} else t17 = $[87];
+	let t18;
+	if ($[88] !== editor || $[89] !== features.table || $[90] !== features.tableControls || $[91] !== inTable || $[92] !== isEditable || $[93] !== onTableClick || $[94] !== t) {
+		t18 = features.table && (features.tableControls ? /* @__PURE__ */ jsx(TableControls, {
+			editor,
+			disabled: !isEditable,
+			inTable,
+			triggerButton: /* @__PURE__ */ jsx(ToolbarButton, {
+				icon: EDITOR_ICONS.table,
+				active: inTable,
+				disabled: !isEditable,
+				title: t("editor.table")
+			})
+		}) : /* @__PURE__ */ jsx(ToolbarButton, {
+			icon: EDITOR_ICONS.table,
+			active: inTable,
+			disabled: !isEditable,
+			title: t("editor.table"),
+			onClick: onTableClick
+		}));
+		$[88] = editor;
+		$[89] = features.table;
+		$[90] = features.tableControls;
+		$[91] = inTable;
+		$[92] = isEditable;
+		$[93] = onTableClick;
+		$[94] = t;
+		$[95] = t18;
+	} else t18 = $[95];
+	let t19;
+	if ($[96] !== t16 || $[97] !== t17 || $[98] !== t18) {
+		t19 = /* @__PURE__ */ jsxs(ToolbarGroup, { children: [
+			t16,
+			t17,
+			t18
+		] });
+		$[96] = t16;
+		$[97] = t17;
+		$[98] = t18;
+		$[99] = t19;
+	} else t19 = $[99];
+	let t20;
+	if ($[100] !== t1 || $[101] !== t14 || $[102] !== t15 || $[103] !== t19 || $[104] !== t2 || $[105] !== t9) {
+		t20 = /* @__PURE__ */ jsxs("div", {
+			className: "bg-muted flex flex-wrap items-center gap-1.5 border-b p-1.5",
+			children: [
+				t1,
+				t2,
+				t9,
+				t14,
+				t15,
+				t19
+			]
+		});
+		$[100] = t1;
+		$[101] = t14;
+		$[102] = t15;
+		$[103] = t19;
+		$[104] = t2;
+		$[105] = t9;
+		$[106] = t20;
+	} else t20 = $[106];
+	return t20;
+}
+
+//#endregion
+export { EDITOR_ICONS, RichTextToolbar, ToolbarButton };

package/dist/client/components/fields/rich-text-editor/types.mjs

@@ -0,0 +1,30 @@
+//#region src/client/components/fields/rich-text-editor/types.ts
+/**
+* Default feature configuration (all enabled)
+*/
+const defaultFeatures = {
+	toolbar: true,
+	bubbleMenu: true,
+	slashCommands: true,
+	history: true,
+	heading: true,
+	bold: true,
+	italic: true,
+	underline: true,
+	strike: true,
+	code: true,
+	codeBlock: true,
+	blockquote: true,
+	bulletList: true,
+	orderedList: true,
+	horizontalRule: true,
+	align: true,
+	link: true,
+	image: true,
+	table: true,
+	tableControls: true,
+	characterCount: true
+};
+
+//#endregion
+export { defaultFeatures };

package/dist/client/components/fields/rich-text-editor/utils.mjs

@@ -0,0 +1,50 @@
+//#region src/client/components/fields/rich-text-editor/utils.ts
+/**
+* Get the current heading level or "paragraph"
+*/
+function getHeadingLevel(editor) {
+	if (!editor) return "paragraph";
+	for (let level = 1; level <= 6; level += 1) if (editor.isActive("heading", { level })) return String(level);
+	return "paragraph";
+}
+/**
+* Get output as TipTap JSON.
+*/
+function getOutput(editor) {
+	return editor.getJSON();
+}
+/**
+* Compare two output values for equality
+*/
+function isSameValue(a, b) {
+	if (a === b) return true;
+	if (!a || !b) return false;
+	try {
+		return JSON.stringify(a) === JSON.stringify(b);
+	} catch {
+		return false;
+	}
+}
+/**
+* Get character and word count from editor
+*/
+function getCharacterCount(editor) {
+	if (!editor) return {
+		characters: 0,
+		words: 0
+	};
+	const storage = editor.storage;
+	if (storage?.characterCount) return {
+		characters: storage.characterCount.characters(),
+		words: storage.characterCount.words()
+	};
+	const text = editor.getText();
+	const words = text.trim().length ? text.trim().split(/\s+/).length : 0;
+	return {
+		characters: text.length,
+		words
+	};
+}
+
+//#endregion
+export { getCharacterCount, getHeadingLevel, getOutput, isSameValue };

package/dist/client/components/fields/rich-text-field.mjs

@@ -0,0 +1,64 @@
+import { useResolvedControl } from "./field-utils.mjs";
+import { RichTextEditor } from "./rich-text-editor/index.mjs";
+import { c } from "react/compiler-runtime";
+import { jsx } from "react/jsx-runtime";
+import { Controller } from "react-hook-form";
+
+//#region src/client/components/fields/rich-text-field.tsx
+function RichTextField(t0) {
+	const $ = c(13);
+	let control;
+	let name;
+	let onChange;
+	let props;
+	if ($[0] !== t0) {
+		({name, control, onChange, ...props} = t0);
+		$[0] = t0;
+		$[1] = control;
+		$[2] = name;
+		$[3] = onChange;
+		$[4] = props;
+	} else {
+		control = $[1];
+		name = $[2];
+		onChange = $[3];
+		props = $[4];
+	}
+	const resolvedControl = useResolvedControl(control);
+	let t1;
+	if ($[5] !== name || $[6] !== onChange || $[7] !== props) {
+		t1 = (t2$1) => {
+			const { field, fieldState } = t2$1;
+			return /* @__PURE__ */ jsx(RichTextEditor, {
+				...props,
+				name,
+				value: field.value,
+				onChange: (value) => {
+					field.onChange(value);
+					onChange?.(value);
+				},
+				error: fieldState.error?.message
+			});
+		};
+		$[5] = name;
+		$[6] = onChange;
+		$[7] = props;
+		$[8] = t1;
+	} else t1 = $[8];
+	let t2;
+	if ($[9] !== name || $[10] !== resolvedControl || $[11] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Controller, {
+			name,
+			control: resolvedControl,
+			render: t1
+		});
+		$[9] = name;
+		$[10] = resolvedControl;
+		$[11] = t1;
+		$[12] = t2;
+	} else t2 = $[12];
+	return t2;
+}
+
+//#endregion
+export { RichTextField };