@questpie/admin 1.1.1 → 3.0.0

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

@@ -0,0 +1,520 @@
+import { useResolveText, useTranslation } from "../../../i18n/hooks.mjs";
+import { cn } from "../../../lib/utils.mjs";
+import { LocaleBadge } from "../locale-badge.mjs";
+import { Label } from "../../ui/label.mjs";
+import { RichTextToolbar } from "./toolbar.mjs";
+import { RichTextBubbleMenu } from "./bubble-menu.mjs";
+import { buildExtensions } from "./extensions.mjs";
+import { ImagePopover } from "./image-popover.mjs";
+import { LinkPopover } from "./link-popover.mjs";
+import { mergePresetFeatures } from "./presets.mjs";
+import { defaultFeatures } from "./types.mjs";
+import { getCharacterCount, getHeadingLevel, getOutput, isSameValue } from "./utils.mjs";
+import { c } from "react/compiler-runtime";
+import * as React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { EditorContent, useEditor } from "@tiptap/react";
+
+//#region src/client/components/fields/rich-text-editor/index.tsx
+/**
+* Main RichText Editor Component.
+*
+* Loads Tiptap extensions asynchronously (lowlight etc.) and delegates to
+* `RichTextEditorCore` once they are ready. This avoids initializing
+* `useEditor` with an empty extension list which causes the ProseMirror
+* "Schema is missing its top node type" error.
+*/
+function RichTextEditor(t0) {
+	const $ = c(56);
+	const { name, value, onChange, disabled, readOnly, label, description, placeholder, required, error, localized, locale, extensions, preset, features, showCharacterCount, maxCharacters, enableImages, onImageUpload, imageCollection, enableMediaLibrary } = t0;
+	const { t } = useTranslation();
+	const resolveText = useResolveText();
+	let t1;
+	if ($[0] !== label || $[1] !== resolveText) {
+		t1 = label ? resolveText(label) : void 0;
+		$[0] = label;
+		$[1] = resolveText;
+		$[2] = t1;
+	} else t1 = $[2];
+	const resolvedLabel = t1;
+	let t2;
+	if ($[3] !== description || $[4] !== resolveText) {
+		t2 = description ? resolveText(description) : void 0;
+		$[3] = description;
+		$[4] = resolveText;
+		$[5] = t2;
+	} else t2 = $[5];
+	const resolvedDescription = t2;
+	let t3;
+	bb0: {
+		if (preset) {
+			let t4$2;
+			if ($[6] !== features || $[7] !== preset) {
+				t4$2 = mergePresetFeatures(preset, features);
+				$[6] = features;
+				$[7] = preset;
+				$[8] = t4$2;
+			} else t4$2 = $[8];
+			t3 = t4$2;
+			break bb0;
+		}
+		let t4$1;
+		if ($[9] !== features) {
+			t4$1 = {
+				...defaultFeatures,
+				...features
+			};
+			$[9] = features;
+			$[10] = t4$1;
+		} else t4$1 = $[10];
+		t3 = t4$1;
+	}
+	const resolvedFeatures = t3;
+	let t4;
+	if ($[11] !== extensions || $[12] !== maxCharacters || $[13] !== placeholder || $[14] !== resolvedFeatures || $[15] !== t) {
+		t4 = () => {
+			const result = buildExtensions({
+				features: resolvedFeatures,
+				placeholder: placeholder || t("editor.startWriting"),
+				maxCharacters,
+				customExtensions: extensions
+			});
+			return result instanceof Promise ? void 0 : result;
+		};
+		$[11] = extensions;
+		$[12] = maxCharacters;
+		$[13] = placeholder;
+		$[14] = resolvedFeatures;
+		$[15] = t;
+		$[16] = t4;
+	} else t4 = $[16];
+	const [resolvedExtensions, setResolvedExtensions] = React.useState(t4);
+	let t5;
+	let t6;
+	if ($[17] !== extensions || $[18] !== maxCharacters || $[19] !== placeholder || $[20] !== resolvedFeatures || $[21] !== t) {
+		t5 = () => {
+			let mounted = true;
+			const result_0 = buildExtensions({
+				features: resolvedFeatures,
+				placeholder: placeholder || t("editor.startWriting"),
+				maxCharacters,
+				customExtensions: extensions
+			});
+			if (result_0 instanceof Promise) result_0.then((exts) => {
+				if (mounted) setResolvedExtensions(exts);
+			});
+			else setResolvedExtensions(result_0);
+			return () => {
+				mounted = false;
+			};
+		};
+		t6 = [
+			resolvedFeatures,
+			placeholder,
+			maxCharacters,
+			extensions,
+			t
+		];
+		$[17] = extensions;
+		$[18] = maxCharacters;
+		$[19] = placeholder;
+		$[20] = resolvedFeatures;
+		$[21] = t;
+		$[22] = t5;
+		$[23] = t6;
+	} else {
+		t5 = $[22];
+		t6 = $[23];
+	}
+	React.useEffect(t5, t6);
+	const t7 = disabled || readOnly;
+	let t8;
+	if ($[24] !== locale || $[25] !== localized || $[26] !== name || $[27] !== required || $[28] !== resolvedLabel) {
+		t8 = resolvedLabel && /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-2",
+			children: [/* @__PURE__ */ jsxs(Label, {
+				htmlFor: name,
+				children: [resolvedLabel, required && /* @__PURE__ */ jsx("span", {
+					className: "text-destructive ml-1",
+					children: "*"
+				})]
+			}), localized && /* @__PURE__ */ jsx(LocaleBadge, { locale: locale || "i18n" })]
+		});
+		$[24] = locale;
+		$[25] = localized;
+		$[26] = name;
+		$[27] = required;
+		$[28] = resolvedLabel;
+		$[29] = t8;
+	} else t8 = $[29];
+	let t9;
+	if ($[30] !== disabled || $[31] !== enableImages || $[32] !== enableMediaLibrary || $[33] !== error || $[34] !== imageCollection || $[35] !== locale || $[36] !== maxCharacters || $[37] !== name || $[38] !== onChange || $[39] !== onImageUpload || $[40] !== readOnly || $[41] !== resolvedExtensions || $[42] !== resolvedFeatures || $[43] !== showCharacterCount || $[44] !== value) {
+		t9 = resolvedExtensions ? /* @__PURE__ */ jsx(RichTextEditorCore, {
+			name,
+			value,
+			onChange,
+			disabled,
+			readOnly,
+			error,
+			locale,
+			features: resolvedFeatures,
+			resolvedExtensions,
+			showCharacterCount,
+			maxCharacters,
+			enableImages,
+			onImageUpload,
+			imageCollection,
+			enableMediaLibrary
+		}) : /* @__PURE__ */ jsx("div", {
+			className: cn("qp-rich-text-editor bg-transparent border border-input", disabled || readOnly ? "opacity-60" : "", error ? "border-destructive" : "border-border"),
+			children: /* @__PURE__ */ jsx("div", {
+				className: "text-muted-foreground flex min-h-[120px] items-center justify-center text-sm",
+				children: "Loading editor..."
+			})
+		});
+		$[30] = disabled;
+		$[31] = enableImages;
+		$[32] = enableMediaLibrary;
+		$[33] = error;
+		$[34] = imageCollection;
+		$[35] = locale;
+		$[36] = maxCharacters;
+		$[37] = name;
+		$[38] = onChange;
+		$[39] = onImageUpload;
+		$[40] = readOnly;
+		$[41] = resolvedExtensions;
+		$[42] = resolvedFeatures;
+		$[43] = showCharacterCount;
+		$[44] = value;
+		$[45] = t9;
+	} else t9 = $[45];
+	let t10;
+	if ($[46] !== resolvedDescription) {
+		t10 = resolvedDescription && /* @__PURE__ */ jsx("p", {
+			className: "text-muted-foreground text-xs",
+			children: resolvedDescription
+		});
+		$[46] = resolvedDescription;
+		$[47] = t10;
+	} else t10 = $[47];
+	let t11;
+	if ($[48] !== error) {
+		t11 = error && /* @__PURE__ */ jsx("p", {
+			className: "text-destructive text-xs",
+			children: error
+		});
+		$[48] = error;
+		$[49] = t11;
+	} else t11 = $[49];
+	let t12;
+	if ($[50] !== t10 || $[51] !== t11 || $[52] !== t7 || $[53] !== t8 || $[54] !== t9) {
+		t12 = /* @__PURE__ */ jsxs("div", {
+			className: "space-y-2",
+			"data-disabled": t7,
+			children: [
+				t8,
+				t9,
+				t10,
+				t11
+			]
+		});
+		$[50] = t10;
+		$[51] = t11;
+		$[52] = t7;
+		$[53] = t8;
+		$[54] = t9;
+		$[55] = t12;
+	} else t12 = $[55];
+	return t12;
+}
+/**
+* Core editor — only mounts when extensions are ready.
+* `useEditor` always receives a complete extension list, so the ProseMirror
+* schema always has its `doc` node.
+*/
+function RichTextEditorCore(t0) {
+	const $ = c(73);
+	const { name, value, onChange, disabled, readOnly, error, locale, features, resolvedExtensions, showCharacterCount, maxCharacters, enableImages, onImageUpload, imageCollection, enableMediaLibrary } = t0;
+	const [linkOpen, setLinkOpen] = React.useState(false);
+	const [imageOpen, setImageOpen] = React.useState(false);
+	const lastEmittedValueRef = React.useRef(void 0);
+	const allowImages = features.image && (enableImages ?? true);
+	const allowLinks = features.link;
+	const allowBubbleMenu = features.bubbleMenu;
+	const allowToolbar = features.toolbar;
+	const allowCharacterCount = features.characterCount && (showCharacterCount || maxCharacters);
+	const isEditable = !disabled && !readOnly;
+	const t1 = value ?? "";
+	let t2;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = { attributes: { class: "qp-rich-text-editor__content" } };
+		$[0] = t2;
+	} else t2 = $[0];
+	let t3;
+	if ($[1] !== disabled || $[2] !== onChange || $[3] !== readOnly) {
+		t3 = (t4$1) => {
+			const { editor: currentEditor } = t4$1;
+			if (disabled || readOnly) return;
+			const nextValue = getOutput(currentEditor);
+			lastEmittedValueRef.current = nextValue;
+			onChange?.(nextValue);
+		};
+		$[1] = disabled;
+		$[2] = onChange;
+		$[3] = readOnly;
+		$[4] = t3;
+	} else t3 = $[4];
+	let t4;
+	if ($[5] !== isEditable || $[6] !== resolvedExtensions || $[7] !== t1 || $[8] !== t3) {
+		t4 = {
+			extensions: resolvedExtensions,
+			content: t1,
+			editorProps: t2,
+			editable: isEditable,
+			onUpdate: t3
+		};
+		$[5] = isEditable;
+		$[6] = resolvedExtensions;
+		$[7] = t1;
+		$[8] = t3;
+		$[9] = t4;
+	} else t4 = $[9];
+	const editor = useEditor(t4);
+	let t5;
+	if ($[10] !== editor) {
+		t5 = getHeadingLevel(editor);
+		$[10] = editor;
+		$[11] = t5;
+	} else t5 = $[11];
+	const headingValue = t5;
+	let t6;
+	if ($[12] !== editor) {
+		t6 = editor?.isActive("table") ?? false;
+		$[12] = editor;
+		$[13] = t6;
+	} else t6 = $[13];
+	const inTable = t6;
+	let t7;
+	let t8;
+	if ($[14] !== editor || $[15] !== isEditable) {
+		t7 = () => {
+			if (!editor) return;
+			editor.setEditable(isEditable);
+		};
+		t8 = [editor, isEditable];
+		$[14] = editor;
+		$[15] = isEditable;
+		$[16] = t7;
+		$[17] = t8;
+	} else {
+		t7 = $[16];
+		t8 = $[17];
+	}
+	React.useEffect(t7, t8);
+	const prevLocaleRef = React.useRef(locale);
+	let t10;
+	let t9;
+	if ($[18] !== locale) {
+		t9 = () => {
+			if (prevLocaleRef.current !== locale) {
+				prevLocaleRef.current = locale;
+				lastEmittedValueRef.current = void 0;
+			}
+		};
+		t10 = [locale];
+		$[18] = locale;
+		$[19] = t10;
+		$[20] = t9;
+	} else {
+		t10 = $[19];
+		t9 = $[20];
+	}
+	React.useEffect(t9, t10);
+	let t11;
+	let t12;
+	if ($[21] !== editor || $[22] !== value) {
+		t11 = () => {
+			if (!editor) return;
+			if (value === void 0) return;
+			if (isSameValue(value, lastEmittedValueRef.current)) return;
+			lastEmittedValueRef.current = value;
+			editor.commands.setContent(value ?? "", false);
+		};
+		t12 = [editor, value];
+		$[21] = editor;
+		$[22] = value;
+		$[23] = t11;
+		$[24] = t12;
+	} else {
+		t11 = $[23];
+		t12 = $[24];
+	}
+	React.useEffect(t11, t12);
+	let t13;
+	if ($[25] !== editor) {
+		t13 = getCharacterCount(editor);
+		$[25] = editor;
+		$[26] = t13;
+	} else t13 = $[26];
+	const characterCount = t13;
+	const t14 = disabled || readOnly ? "opacity-60" : "";
+	const t15 = error ? "border-destructive" : "border-border";
+	let t16;
+	if ($[27] !== t14 || $[28] !== t15) {
+		t16 = cn("qp-rich-text-editor bg-transparent border border-input", t14, t15);
+		$[27] = t14;
+		$[28] = t15;
+		$[29] = t16;
+	} else t16 = $[29];
+	let t17;
+	if ($[30] !== allowToolbar || $[31] !== editor || $[32] !== features || $[33] !== headingValue || $[34] !== inTable || $[35] !== isEditable) {
+		t17 = editor && allowToolbar && /* @__PURE__ */ jsx(RichTextToolbar, {
+			editor,
+			features,
+			disabled: !isEditable,
+			headingValue,
+			onHeadingChange: (value_0) => {
+				if (!editor) return;
+				if (value_0 === "paragraph") {
+					editor.chain().focus().setParagraph().run();
+					return;
+				}
+				editor.chain().focus().toggleHeading({ level: Number(value_0) }).run();
+			},
+			onLinkClick: () => setLinkOpen(true),
+			onImageClick: () => setImageOpen(true),
+			onTableClick: () => {
+				if (!inTable) editor.chain().focus().insertTable({
+					rows: 3,
+					cols: 3,
+					withHeaderRow: true
+				}).run();
+			},
+			inTable
+		});
+		$[30] = allowToolbar;
+		$[31] = editor;
+		$[32] = features;
+		$[33] = headingValue;
+		$[34] = inTable;
+		$[35] = isEditable;
+		$[36] = t17;
+	} else t17 = $[36];
+	let t18;
+	if ($[37] !== allowBubbleMenu || $[38] !== editor || $[39] !== features || $[40] !== isEditable) {
+		t18 = editor && allowBubbleMenu && /* @__PURE__ */ jsx(RichTextBubbleMenu, {
+			editor,
+			features,
+			disabled: !isEditable,
+			onLinkClick: () => setLinkOpen(true)
+		});
+		$[37] = allowBubbleMenu;
+		$[38] = editor;
+		$[39] = features;
+		$[40] = isEditable;
+		$[41] = t18;
+	} else t18 = $[41];
+	let t19;
+	if ($[42] !== editor || $[43] !== name) {
+		t19 = editor ? /* @__PURE__ */ jsx(EditorContent, {
+			editor,
+			id: name
+		}) : /* @__PURE__ */ jsx("div", {
+			className: "text-muted-foreground flex min-h-[120px] items-center justify-center text-sm",
+			children: "Loading editor..."
+		});
+		$[42] = editor;
+		$[43] = name;
+		$[44] = t19;
+	} else t19 = $[44];
+	let t20;
+	if ($[45] !== allowCharacterCount || $[46] !== characterCount || $[47] !== maxCharacters || $[48] !== showCharacterCount) {
+		t20 = allowCharacterCount && showCharacterCount && /* @__PURE__ */ jsxs("div", {
+			className: "bg-muted text-muted-foreground flex items-center justify-between border-t px-2 py-1 text-xs",
+			children: [/* @__PURE__ */ jsxs("span", { children: [
+				characterCount.words,
+				" word",
+				characterCount.words === 1 ? "" : "s"
+			] }), /* @__PURE__ */ jsxs("span", { children: [
+				characterCount.characters,
+				typeof maxCharacters === "number" ? ` / ${maxCharacters}` : "",
+				" ",
+				"characters"
+			] })]
+		});
+		$[45] = allowCharacterCount;
+		$[46] = characterCount;
+		$[47] = maxCharacters;
+		$[48] = showCharacterCount;
+		$[49] = t20;
+	} else t20 = $[49];
+	let t21;
+	if ($[50] !== t16 || $[51] !== t17 || $[52] !== t18 || $[53] !== t19 || $[54] !== t20) {
+		t21 = /* @__PURE__ */ jsxs("div", {
+			className: t16,
+			children: [
+				t17,
+				t18,
+				t19,
+				t20
+			]
+		});
+		$[50] = t16;
+		$[51] = t17;
+		$[52] = t18;
+		$[53] = t19;
+		$[54] = t20;
+		$[55] = t21;
+	} else t21 = $[55];
+	let t22;
+	if ($[56] !== allowLinks || $[57] !== editor || $[58] !== isEditable || $[59] !== linkOpen) {
+		t22 = allowLinks && /* @__PURE__ */ jsx(LinkPopover, {
+			editor,
+			open: linkOpen,
+			onOpenChange: setLinkOpen,
+			disabled: !isEditable
+		});
+		$[56] = allowLinks;
+		$[57] = editor;
+		$[58] = isEditable;
+		$[59] = linkOpen;
+		$[60] = t22;
+	} else t22 = $[60];
+	let t23;
+	if ($[61] !== allowImages || $[62] !== editor || $[63] !== enableMediaLibrary || $[64] !== imageCollection || $[65] !== imageOpen || $[66] !== isEditable || $[67] !== onImageUpload) {
+		t23 = allowImages && /* @__PURE__ */ jsx(ImagePopover, {
+			editor,
+			open: imageOpen,
+			onOpenChange: setImageOpen,
+			disabled: !isEditable,
+			onImageUpload,
+			imageCollection,
+			enableMediaLibrary
+		});
+		$[61] = allowImages;
+		$[62] = editor;
+		$[63] = enableMediaLibrary;
+		$[64] = imageCollection;
+		$[65] = imageOpen;
+		$[66] = isEditable;
+		$[67] = onImageUpload;
+		$[68] = t23;
+	} else t23 = $[68];
+	let t24;
+	if ($[69] !== t21 || $[70] !== t22 || $[71] !== t23) {
+		t24 = /* @__PURE__ */ jsxs(Fragment, { children: [
+			t21,
+			t22,
+			t23
+		] });
+		$[69] = t21;
+		$[70] = t22;
+		$[71] = t23;
+		$[72] = t24;
+	} else t24 = $[72];
+	return t24;
+}
+
+//#endregion
+export { RichTextEditor };

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

@@ -0,0 +1,85 @@
+import { useTranslation } from "../../../i18n/hooks.mjs";
+import { Button } from "../../ui/button.mjs";
+import { Input } from "../../ui/input.mjs";
+import { Popover, PopoverContent, PopoverHeader, PopoverTitle, PopoverTrigger } from "../../ui/popover.mjs";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/client/components/fields/rich-text-editor/link-popover.tsx
+/**
+* Link insertion/editing popover
+*/
+function LinkPopover({ editor, open, onOpenChange, disabled }) {
+	const { t } = useTranslation();
+	const [linkUrl, setLinkUrl] = React.useState("");
+	const prevOpenRef = React.useRef(false);
+	if (open && !prevOpenRef.current && editor) {
+		const currentLink = editor.getAttributes("link").href;
+		setLinkUrl(currentLink || "");
+	}
+	prevOpenRef.current = open;
+	const handleApplyLink = React.useCallback(() => {
+		if (!editor) return;
+		if (!linkUrl) {
+			editor.chain().focus().unsetLink().run();
+			onOpenChange(false);
+			return;
+		}
+		editor.chain().focus().setLink({
+			href: linkUrl,
+			target: "_blank",
+			rel: "noopener noreferrer"
+		}).run();
+		onOpenChange(false);
+	}, [
+		editor,
+		linkUrl,
+		onOpenChange
+	]);
+	const handleRemoveLink = React.useCallback(() => {
+		if (!editor) return;
+		editor.chain().focus().unsetLink().run();
+		onOpenChange(false);
+	}, [editor, onOpenChange]);
+	return /* @__PURE__ */ jsxs(Popover, {
+		open,
+		onOpenChange,
+		children: [/* @__PURE__ */ jsx(PopoverTrigger, { render: /* @__PURE__ */ jsx("div", { className: "sr-only" }) }), /* @__PURE__ */ jsxs(PopoverContent, {
+			className: "w-72",
+			children: [/* @__PURE__ */ jsx(PopoverHeader, { children: /* @__PURE__ */ jsx(PopoverTitle, { children: t("editor.link") }) }), /* @__PURE__ */ jsxs("div", {
+				className: "space-y-2",
+				children: [/* @__PURE__ */ jsx(Input, {
+					value: linkUrl,
+					placeholder: "https://example.com",
+					onChange: (event) => setLinkUrl(event.target.value),
+					onKeyDown: (event_0) => {
+						if (event_0.key === "Enter") {
+							event_0.preventDefault();
+							handleApplyLink();
+						}
+					},
+					disabled
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "flex justify-end gap-2",
+					children: [/* @__PURE__ */ jsx(Button, {
+						type: "button",
+						size: "xs",
+						variant: "outline",
+						onClick: handleRemoveLink,
+						disabled: disabled || !editor?.isActive("link"),
+						children: t("common.remove")
+					}), /* @__PURE__ */ jsx(Button, {
+						type: "button",
+						size: "xs",
+						onClick: handleApplyLink,
+						disabled,
+						children: t("common.apply")
+					})]
+				})]
+			})]
+		})]
+	});
+}
+
+//#endregion
+export { LinkPopover };