@questpie/admin 3.0.2 → 3.0.4

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

@@ -27,6 +27,26 @@ function getCodeBlockExtension() {
 	});
 	return codeBlockLoadPromise;
 }
+const defaultLabels = {
+	bulletList: "Bullet list",
+	bulletListDescription: "Create a bulleted list",
+	codeBlock: "Code block",
+	codeBlockDescription: "Insert code snippet",
+	divider: "Divider",
+	dividerDescription: "Insert a horizontal rule",
+	heading: (level) => `Heading ${level}`,
+	heading1Description: "Large section heading",
+	heading2Description: "Medium section heading",
+	heading3Description: "Small section heading",
+	orderedList: "Numbered list",
+	orderedListDescription: "Create an ordered list",
+	paragraph: "Paragraph",
+	paragraphDescription: "Start with plain text",
+	quote: "Quote",
+	quoteDescription: "Capture a quote",
+	table: "Table",
+	tableDescription: "Insert a 3x3 table"
+};
 /**
 * Build Tiptap extensions based on feature configuration.
 *
@@ -34,9 +54,10 @@ function getCodeBlockExtension() {
 * (i.e. codeBlock disabled, or lowlight already cached). Only returns a
 * `Promise` on the first build that includes codeBlock.
 */
-function buildExtensions({ features, placeholder, maxCharacters, customExtensions }) {
+function buildExtensions({ features, labels, placeholder, maxCharacters, customExtensions }) {
 	const base = buildBaseExtensions({
 		features,
+		labels,
 		placeholder,
 		maxCharacters,
 		customExtensions
@@ -46,7 +67,7 @@ function buildExtensions({ features, placeholder, maxCharacters, customExtension
 	if (!(codeBlock instanceof Promise)) return [...base, codeBlock];
 	return codeBlock.then((ext) => [...base, ext]);
 }
-function buildBaseExtensions({ features, placeholder, maxCharacters, customExtensions }) {
+function buildBaseExtensions({ features, labels = defaultLabels, placeholder, maxCharacters, customExtensions }) {
 	const starterKitConfig = { codeBlock: false };
 	if (!features.bold) starterKitConfig.bold = false;
 	if (!features.italic) starterKitConfig.italic = false;
@@ -70,63 +91,73 @@ function buildBaseExtensions({ features, placeholder, maxCharacters, customExten
 	if (features.image) extensions.push(Image);
 	if (features.table) extensions.push(Table.configure({ resizable: true }), TableRow, TableHeader, TableCell);
 	if (features.characterCount && maxCharacters) extensions.push(CharacterCount.configure({ limit: maxCharacters }));
-	if (features.slashCommands) extensions.push(createSlashCommandExtension((editor) => {
+	if (features.slashCommands) extensions.push(createSlashCommandExtension((_editor) => {
 		const commands = [];
 		if (features.heading) commands.push({
-			title: "Heading 1",
-			description: "Large section heading",
+			title: labels.heading(1),
+			description: labels.heading1Description,
+			icon: "ph:text-h-one",
 			keywords: ["h1"],
 			command: (cmdEditor) => cmdEditor.chain().focus().toggleHeading({ level: 1 }).run()
 		}, {
-			title: "Heading 2",
-			description: "Medium section heading",
+			title: labels.heading(2),
+			description: labels.heading2Description,
+			icon: "ph:text-h-two",
 			keywords: ["h2"],
 			command: (cmdEditor) => cmdEditor.chain().focus().toggleHeading({ level: 2 }).run()
 		}, {
-			title: "Heading 3",
-			description: "Small section heading",
+			title: labels.heading(3),
+			description: labels.heading3Description,
+			icon: "ph:text-h-three",
 			keywords: ["h3"],
 			command: (cmdEditor) => cmdEditor.chain().focus().toggleHeading({ level: 3 }).run()
 		});
 		commands.push({
-			title: "Paragraph",
-			description: "Start with plain text",
+			title: labels.paragraph,
+			description: labels.paragraphDescription,
+			icon: "ph:text-align-left",
 			keywords: ["text"],
 			command: (cmdEditor) => cmdEditor.chain().focus().setParagraph().run()
 		});
 		if (features.bulletList) commands.push({
-			title: "Bullet list",
-			description: "Create a bulleted list",
+			title: labels.bulletList,
+			description: labels.bulletListDescription,
+			icon: "ph:list-bullets",
 			keywords: ["list", "ul"],
 			command: (cmdEditor) => cmdEditor.chain().focus().toggleBulletList().run()
 		});
 		if (features.orderedList) commands.push({
-			title: "Numbered list",
-			description: "Create an ordered list",
+			title: labels.orderedList,
+			description: labels.orderedListDescription,
+			icon: "ph:list-numbers",
 			keywords: ["list", "ol"],
 			command: (cmdEditor) => cmdEditor.chain().focus().toggleOrderedList().run()
 		});
 		if (features.blockquote) commands.push({
-			title: "Quote",
-			description: "Capture a quote",
+			title: labels.quote,
+			description: labels.quoteDescription,
+			icon: "ph:quotes",
 			keywords: ["blockquote"],
 			command: (cmdEditor) => cmdEditor.chain().focus().toggleBlockquote().run()
 		});
 		if (features.codeBlock) commands.push({
-			title: "Code block",
-			description: "Insert code snippet",
+			title: labels.codeBlock,
+			description: labels.codeBlockDescription,
+			icon: "ph:code-block",
 			keywords: ["code"],
 			command: (cmdEditor) => cmdEditor.chain().focus().toggleCodeBlock().run()
 		});
 		if (features.horizontalRule) commands.push({
-			title: "Divider",
-			description: "Insert a horizontal rule",
+			title: labels.divider,
+			description: labels.dividerDescription,
+			icon: "ph:minus",
 			keywords: ["hr"],
 			command: (cmdEditor) => cmdEditor.chain().focus().setHorizontalRule().run()
 		});
 		if (features.table) commands.push({
-			title: "Table",
-			description: "Insert a 3x3 table",
+			title: labels.table,
+			description: labels.tableDescription,
+			icon: "ph:table",
 			keywords: ["grid"],
 			command: (cmdEditor) => cmdEditor.chain().focus().insertTable({
 				rows: 3,

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

@@ -1,12 +1,10 @@
 import { useTranslation } from "../../../i18n/hooks.mjs";
 import { Button } from "../../ui/button.mjs";
 import { Input } from "../../ui/input.mjs";
-import { sanitizeFilename } from "../field-utils.mjs";
 import { Popover, PopoverContent, PopoverHeader, PopoverTitle, PopoverTrigger } from "../../ui/popover.mjs";
 import { useCollectionItem } from "../../../hooks/use-collection.mjs";
-import { useUploadCollection } from "../../../hooks/use-upload-collection.mjs";
-import { useUpload } from "../../../hooks/use-upload.mjs";
 import { MediaPickerDialog } from "../../media/media-picker-dialog.mjs";
+import { useRichTextImageUpload } from "./image-upload.mjs";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { toast } from "sonner";
@@ -24,8 +22,10 @@ function ImagePopover({ editor, open, onOpenChange, disabled, onImageUpload, ima
 	const fileInputRef = React.useRef(null);
 	const [isPickerOpen, setIsPickerOpen] = React.useState(false);
 	const [selectedAssetId, setSelectedAssetId] = React.useState(null);
-	const { upload } = useUpload();
-	const { collection, collections: availableUploadCollections } = useUploadCollection(imageCollection);
+	const { collection, uploadImageFile } = useRichTextImageUpload({
+		imageCollection,
+		onImageUpload
+	});
 	const showMediaLibrary = enableMediaLibrary ?? true;
 	const { data: selectedAsset } = useCollectionItem(collection || "", selectedAssetId || "", void 0, { enabled: !!collection && !!selectedAssetId });
 	const handleInsertImageUrl = React.useCallback(() => {
@@ -48,45 +48,14 @@ function ImagePopover({ editor, open, onOpenChange, disabled, onImageUpload, ima
 		if (!file || !editor) return;
 		try {
 			setUploadingImage(true);
-			let url;
-			if (onImageUpload) url = await onImageUpload(file);
-			else {
-				if (!collection) {
-					let errorMessage;
-					if (availableUploadCollections.length > 1) errorMessage = `Multiple upload collections are available (${availableUploadCollections.join(", ")}). Configure rich-text imageCollection to choose one.`;
-					else errorMessage = "No upload collection is configured for rich-text image uploads.";
-					toast.error(errorMessage);
-					setUploadingImage(false);
-					event.target.value = "";
-					return;
-				}
-				const sanitizedName = sanitizeFilename(file.name);
-				let uploadFile;
-				if (sanitizedName === file.name) uploadFile = file;
-				else uploadFile = new File([file], sanitizedName, { type: file.type });
-				const uploadedAsset = await upload(uploadFile, { to: collection });
-				if (uploadedAsset) {
-					if (uploadedAsset.url) url = uploadedAsset.url;
-				}
-				if (!url) {
-					toast.error(t("upload.error"));
-					setUploadingImage(false);
-					event.target.value = "";
-					return;
-				}
-			}
-			if (url) {
-				let altValue;
-				if (imageAlt) altValue = imageAlt;
-				else altValue = void 0;
-				editor.chain().focus().setImage({
-					src: url,
-					alt: altValue
-				}).run();
-				setImageUrl("");
-				setImageAlt("");
-				onOpenChange(false);
-			}
+			const url = await uploadImageFile(file);
+			editor.chain().focus().setImage({
+				src: url,
+				alt: imageAlt || void 0
+			}).run();
+			setImageUrl("");
+			setImageAlt("");
+			onOpenChange(false);
 			setUploadingImage(false);
 			event.target.value = "";
 		} catch (err) {
@@ -98,14 +67,11 @@ function ImagePopover({ editor, open, onOpenChange, disabled, onImageUpload, ima
 			event.target.value = "";
 		}
 	}, [
-		collection,
-		availableUploadCollections,
 		editor,
 		imageAlt,
-		onImageUpload,
 		onOpenChange,
 		t,
-		upload
+		uploadImageFile
 	]);
 	React.useEffect(() => {
 		if (!selectedAssetId || !selectedAsset || !editor) return;
@@ -148,14 +114,22 @@ function ImagePopover({ editor, open, onOpenChange, disabled, onImageUpload, ima
 					className: "space-y-2",
 					children: [
 						/* @__PURE__ */ jsx(Input, {
+							"aria-label": t("editor.image"),
+							autoComplete: "off",
+							inputMode: "url",
+							name: "rich-text-image-url",
+							type: "url",
 							value: imageUrl,
-							placeholder: "https://example.com/image.jpg",
+							placeholder: "https://example.com/image.jpg…",
 							onChange: (event_0) => setImageUrl(event_0.target.value),
 							disabled
 						}),
 						/* @__PURE__ */ jsx(Input, {
+							"aria-label": t("editor.altText"),
+							autoComplete: "off",
+							name: "rich-text-image-alt",
 							value: imageAlt,
-							placeholder: t("editor.altText"),
+							placeholder: `${t("editor.altText")}…`,
 							onChange: (event_1) => setImageAlt(event_1.target.value),
 							disabled
 						}),

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

@@ -0,0 +1,66 @@
+import { useTranslation } from "../../../i18n/hooks.mjs";
+import { sanitizeFilename } from "../field-utils.mjs";
+import { useUploadCollection } from "../../../hooks/use-upload-collection.mjs";
+import { useUpload } from "../../../hooks/use-upload.mjs";
+import { c } from "react/compiler-runtime";
+
+//#region src/client/components/fields/rich-text-editor/image-upload.ts
+function getImageFilesFromDataTransfer(dataTransfer) {
+	return Array.from(dataTransfer?.files ?? []).filter((file) => file.type.startsWith("image/"));
+}
+function getImageAltFromFile(file) {
+	const cleanName = file.name.trim();
+	if (!cleanName) return void 0;
+	return cleanName.replace(/\.[^.]+$/, "") || cleanName;
+}
+function useRichTextImageUpload(t0) {
+	const $ = c(11);
+	const { imageCollection, onImageUpload } = t0;
+	const { t } = useTranslation();
+	const { upload, isUploading } = useUpload();
+	const { collection, collections } = useUploadCollection(imageCollection);
+	let t1;
+	if ($[0] !== collection || $[1] !== collections || $[2] !== onImageUpload || $[3] !== t || $[4] !== upload) {
+		t1 = async (file) => {
+			if (!file.type.startsWith("image/")) throw new Error(`"${file.name}" is not an image file.`);
+			if (onImageUpload) {
+				const url = await onImageUpload(file);
+				if (!url) throw new Error(t("upload.error"));
+				return url;
+			}
+			if (!collection) {
+				if (collections.length > 1) throw new Error(`Multiple upload collections are available (${collections.join(", ")}). Configure rich-text imageCollection to choose one.`);
+				throw new Error("No upload collection is configured for rich-text image uploads.");
+			}
+			const sanitizedName = sanitizeFilename(file.name);
+			const uploadedAsset = await upload(sanitizedName === file.name ? file : new File([file], sanitizedName, { type: file.type }), { to: collection });
+			if (!uploadedAsset?.url) throw new Error(t("upload.error"));
+			return uploadedAsset.url;
+		};
+		$[0] = collection;
+		$[1] = collections;
+		$[2] = onImageUpload;
+		$[3] = t;
+		$[4] = upload;
+		$[5] = t1;
+	} else t1 = $[5];
+	const uploadImageFile = t1;
+	let t2;
+	if ($[6] !== collection || $[7] !== collections || $[8] !== isUploading || $[9] !== uploadImageFile) {
+		t2 = {
+			collection,
+			collections,
+			isUploading,
+			uploadImageFile
+		};
+		$[6] = collection;
+		$[7] = collections;
+		$[8] = isUploading;
+		$[9] = uploadImageFile;
+		$[10] = t2;
+	} else t2 = $[10];
+	return t2;
+}
+
+//#endregion
+export { getImageAltFromFile, getImageFilesFromDataTransfer, useRichTextImageUpload };

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

@@ -0,0 +1,38 @@
+import { RichTextEditorProps } from "./types.mjs";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/client/components/fields/rich-text-editor/index.d.ts
+
+/**
+ * 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.
+ */
+declare function RichTextEditor({
+  name,
+  value,
+  onChange,
+  disabled,
+  readOnly,
+  label,
+  description,
+  placeholder,
+  required,
+  error,
+  localized,
+  locale,
+  extensions,
+  preset,
+  features,
+  showCharacterCount,
+  maxCharacters,
+  enableImages,
+  onImageUpload,
+  imageCollection,
+  enableMediaLibrary
+}: RichTextEditorProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { RichTextEditor };