@questpie/admin 2.0.0 → 3.0.1

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

@@ -1,6 +1,5 @@
 import { createSlashCommandExtension } from "./slash-commands.mjs";
 import CharacterCount from "@tiptap/extension-character-count";
-import CodeBlockLowlight from "@tiptap/extension-code-block-lowlight";
 import Image from "@tiptap/extension-image";
 import Link from "@tiptap/extension-link";
 import Placeholder from "@tiptap/extension-placeholder";
@@ -11,14 +10,43 @@ import TableRow from "@tiptap/extension-table-row";
 import TextAlign from "@tiptap/extension-text-align";
 import Underline from "@tiptap/extension-underline";
 import StarterKit from "@tiptap/starter-kit";
-import { common, createLowlight } from "lowlight";
 
 //#region src/client/components/fields/rich-text-editor/extensions.tsx
-const lowlight = createLowlight(common);
+let codeBlockExtension = null;
+let codeBlockLoadPromise = null;
 /**
-* Build Tiptap extensions based on feature configuration
+* Returns the cached CodeBlockLowlight extension synchronously if already
+* loaded, otherwise starts a single shared fetch and returns the promise.
+*/
+function getCodeBlockExtension() {
+	if (codeBlockExtension) return codeBlockExtension;
+	if (!codeBlockLoadPromise) codeBlockLoadPromise = Promise.all([import("@tiptap/extension-code-block-lowlight"), import("lowlight")]).then(([{ default: CodeBlockLowlight }, { common, createLowlight }]) => {
+		const lowlight = createLowlight(common);
+		codeBlockExtension = CodeBlockLowlight.configure({ lowlight });
+		return codeBlockExtension;
+	});
+	return codeBlockLoadPromise;
+}
+/**
+* Build Tiptap extensions based on feature configuration.
+*
+* Returns **synchronously** (`AnyExtension[]`) when no async deps are needed
+* (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 }) {
+	const base = buildBaseExtensions({
+		features,
+		placeholder,
+		maxCharacters,
+		customExtensions
+	});
+	if (!features.codeBlock) return base;
+	const codeBlock = getCodeBlockExtension();
+	if (!(codeBlock instanceof Promise)) return [...base, codeBlock];
+	return codeBlock.then((ext) => [...base, ext]);
+}
+function buildBaseExtensions({ features, placeholder, maxCharacters, customExtensions }) {
 	const starterKitConfig = { codeBlock: false };
 	if (!features.bold) starterKitConfig.bold = false;
 	if (!features.italic) starterKitConfig.italic = false;
@@ -41,7 +69,6 @@ function buildExtensions({ features, placeholder, maxCharacters, customExtension
 	if (features.align) extensions.push(TextAlign.configure({ types: ["heading", "paragraph"] }));
 	if (features.image) extensions.push(Image);
 	if (features.table) extensions.push(Table.configure({ resizable: true }), TableRow, TableHeader, TableCell);
-	if (features.codeBlock) extensions.push(CodeBlockLowlight.configure({ lowlight }));
 	if (features.characterCount && maxCharacters) extensions.push(CharacterCount.configure({ limit: maxCharacters }));
 	if (features.slashCommands) extensions.push(createSlashCommandExtension((editor) => {
 		const commands = [];
@@ -114,5 +141,4 @@ function buildExtensions({ features, placeholder, maxCharacters, customExtension
 }
 
 //#endregion
-export { buildExtensions };
-//# sourceMappingURL=extensions.mjs.map
+export { buildExtensions };

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

@@ -1,33 +1,34 @@
 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 { Input } from "../../ui/input.mjs";
-import { Popover, PopoverContent, PopoverHeader, PopoverTitle, PopoverTrigger } from "../../ui/popover.mjs";
 import { MediaPickerDialog } from "../../media/media-picker-dialog.mjs";
-import * as React$1 from "react";
-import { toast } from "sonner";
+import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { toast } from "sonner";
 
 //#region src/client/components/fields/rich-text-editor/image-popover.tsx
 /**
 * Image insertion popover
 */
 function ImagePopover({ editor, open, onOpenChange, disabled, onImageUpload, imageCollection, enableMediaLibrary }) {
+	"use no memo";
 	const { t } = useTranslation();
-	const [imageUrl, setImageUrl] = React$1.useState("");
-	const [imageAlt, setImageAlt] = React$1.useState("");
-	const [uploadingImage, setUploadingImage] = React$1.useState(false);
-	const fileInputRef = React$1.useRef(null);
-	const [isPickerOpen, setIsPickerOpen] = React$1.useState(false);
-	const [selectedAssetId, setSelectedAssetId] = React$1.useState(null);
+	const [imageUrl, setImageUrl] = React.useState("");
+	const [imageAlt, setImageAlt] = React.useState("");
+	const [uploadingImage, setUploadingImage] = React.useState(false);
+	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 showMediaLibrary = enableMediaLibrary ?? true;
 	const { data: selectedAsset } = useCollectionItem(collection || "", selectedAssetId || "", void 0, { enabled: !!collection && !!selectedAssetId });
-	const handleInsertImageUrl = React$1.useCallback(() => {
+	const handleInsertImageUrl = React.useCallback(() => {
 		if (!editor || !imageUrl) return;
 		editor.chain().focus().setImage({
 			src: imageUrl,
@@ -42,7 +43,7 @@ function ImagePopover({ editor, open, onOpenChange, disabled, onImageUpload, ima
 		imageUrl,
 		onOpenChange
 	]);
-	const handleImageUpload = React$1.useCallback(async (event) => {
+	const handleImageUpload = React.useCallback(async (event) => {
 		const file = event.target.files?.[0];
 		if (!file || !editor) return;
 		try {
@@ -50,24 +51,49 @@ function ImagePopover({ editor, open, onOpenChange, disabled, onImageUpload, ima
 			let url;
 			if (onImageUpload) url = await onImageUpload(file);
 			else {
-				if (!collection) throw new Error(availableUploadCollections.length > 1 ? `Multiple upload collections are available (${availableUploadCollections.join(", ")}). Configure rich-text imageCollection to choose one.` : "No upload collection is configured for rich-text image uploads.");
+				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);
-				url = (await upload(sanitizedName === file.name ? file : new File([file], sanitizedName, { type: file.type }), { to: collection }))?.url;
-				if (!url) throw new Error(t("upload.error"));
+				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: imageAlt || void 0
+					alt: altValue
 				}).run();
 				setImageUrl("");
 				setImageAlt("");
 				onOpenChange(false);
 			}
+			setUploadingImage(false);
+			event.target.value = "";
 		} catch (err) {
-			const uploadError = err instanceof Error ? err : new Error(t("upload.error"));
+			let uploadError;
+			if (err instanceof Error) uploadError = err;
+			else uploadError = new Error(t("upload.error"));
 			toast.error(uploadError.message);
-		} finally {
 			setUploadingImage(false);
 			event.target.value = "";
 		}
@@ -81,7 +107,7 @@ function ImagePopover({ editor, open, onOpenChange, disabled, onImageUpload, ima
 		t,
 		upload
 	]);
-	React$1.useEffect(() => {
+	React.useEffect(() => {
 		if (!selectedAssetId || !selectedAsset || !editor) return;
 		const assetUrl = selectedAsset?.url;
 		if (!assetUrl) {
@@ -124,13 +150,13 @@ function ImagePopover({ editor, open, onOpenChange, disabled, onImageUpload, ima
 						/* @__PURE__ */ jsx(Input, {
 							value: imageUrl,
 							placeholder: "https://example.com/image.jpg",
-							onChange: (event) => setImageUrl(event.target.value),
+							onChange: (event_0) => setImageUrl(event_0.target.value),
 							disabled
 						}),
 						/* @__PURE__ */ jsx(Input, {
 							value: imageAlt,
 							placeholder: t("editor.altText"),
-							onChange: (event) => setImageAlt(event.target.value),
+							onChange: (event_1) => setImageAlt(event_1.target.value),
 							disabled
 						}),
 						/* @__PURE__ */ jsx("div", {
@@ -192,5 +218,4 @@ function ImagePopover({ editor, open, onOpenChange, disabled, onImageUpload, ima
 }
 
 //#endregion
-export { ImagePopover };
-//# sourceMappingURL=image-popover.mjs.map
+export { ImagePopover };