@fuma-content/studio 0.1.0

package/dist/src/components/editor/ui/media-placeholder-node.mjs

@@ -0,0 +1,184 @@
+"use client";
+
+import { cn } from "../../../lib/utils.mjs";
+import { useUploadFile } from "../../../hooks/use-upload-file.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { PlateElement, useEditorPlugin, withHOC } from "platejs/react";
+import * as React$1 from "react";
+import { KEYS } from "platejs";
+import { AudioLines, FileUp, Film, ImageIcon, Loader2Icon } from "lucide-react";
+import { PlaceholderPlugin, PlaceholderProvider, updateUploadHistory } from "@platejs/media/react";
+
+//#region src/components/editor/ui/media-placeholder-node.tsx
+const CONTENT = {
+	[KEYS.audio]: {
+		accept: ["audio/*"],
+		content: "Add an audio file",
+		icon: /* @__PURE__ */ jsx(AudioLines, {})
+	},
+	[KEYS.file]: {
+		accept: ["*"],
+		content: "Add a file",
+		icon: /* @__PURE__ */ jsx(FileUp, {})
+	},
+	[KEYS.img]: {
+		accept: ["image/*"],
+		content: "Add an image",
+		icon: /* @__PURE__ */ jsx(ImageIcon, {})
+	},
+	[KEYS.video]: {
+		accept: ["video/*"],
+		content: "Add a video",
+		icon: /* @__PURE__ */ jsx(Film, {})
+	}
+};
+const PlaceholderElement = withHOC(PlaceholderProvider, function PlaceholderElement$1(props) {
+	const { editor, element } = props;
+	const { api } = useEditorPlugin(PlaceholderPlugin);
+	const { isUploading, progress, uploadedFile, uploadFile, uploadingFile } = useUploadFile();
+	const loading = isUploading && uploadingFile !== void 0;
+	const currentContent = CONTENT[element.mediaType];
+	const isImage = element.mediaType === KEYS.img;
+	const imageRef = React$1.useRef(null);
+	const inputId = React$1.useId();
+	const replaceCurrentPlaceholder = React$1.useCallback((file) => {
+		uploadFile(file);
+		api.placeholder.addUploadingFile(element.id, file);
+	}, [
+		api.placeholder,
+		element.id,
+		uploadFile
+	]);
+	React$1.useEffect(() => {
+		if (!uploadedFile) return;
+		const path = editor.api.findPath(element);
+		editor.tf.withoutSaving(() => {
+			editor.tf.removeNodes({ at: path });
+			const node = {
+				children: [{ text: "" }],
+				initialHeight: imageRef.current?.height,
+				initialWidth: imageRef.current?.width,
+				isUpload: true,
+				name: element.mediaType === KEYS.file ? uploadedFile.name : "",
+				placeholderId: element.id,
+				type: element.mediaType,
+				url: uploadedFile.url
+			};
+			editor.tf.insertNodes(node, { at: path });
+			updateUploadHistory(editor, node);
+		});
+		api.placeholder.removeUploadingFile(element.id);
+	}, [uploadedFile, element.id]);
+	const isReplaced = React$1.useRef(false);
+	/** Paste and drop */
+	React$1.useEffect(() => {
+		if (isReplaced.current) return;
+		isReplaced.current = true;
+		const currentFiles = api.placeholder.getUploadingFile(element.id);
+		if (!currentFiles) return;
+		replaceCurrentPlaceholder(currentFiles);
+	}, [isReplaced]);
+	return /* @__PURE__ */ jsxs(PlateElement, {
+		className: "my-1",
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("input", {
+				id: inputId,
+				type: "file",
+				hidden: true,
+				onChange: (e) => {
+					const updatedFiles = e.target.files;
+					if (!updatedFiles) return;
+					const [firstFile, ...restFiles] = Array.from(updatedFiles);
+					replaceCurrentPlaceholder(firstFile);
+					if (restFiles.length > 0) editor.getTransforms(PlaceholderPlugin).insert.media(restFiles);
+				},
+				accept: currentContent.accept.join(", "),
+				multiple: true,
+				disabled: loading
+			}),
+			(!loading || !isImage) && /* @__PURE__ */ jsxs("label", {
+				htmlFor: inputId,
+				className: "flex cursor-pointer select-none items-center rounded-sm bg-muted p-3 pr-9 hover:bg-primary/10",
+				contentEditable: false,
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "relative mr-3 flex text-muted-foreground/80 [&_svg]:size-6",
+					children: currentContent.icon
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "whitespace-nowrap text-muted-foreground text-sm",
+					children: [/* @__PURE__ */ jsx("div", { children: loading ? uploadingFile?.name : currentContent.content }), loading && !isImage && /* @__PURE__ */ jsxs("div", {
+						className: "mt-1 flex items-center gap-1.5",
+						children: [
+							/* @__PURE__ */ jsx("div", { children: formatBytes(uploadingFile?.size ?? 0) }),
+							/* @__PURE__ */ jsx("div", { children: "–" }),
+							/* @__PURE__ */ jsxs("div", {
+								className: "flex items-center",
+								children: [
+									/* @__PURE__ */ jsx(Loader2Icon, { className: "mr-1 size-3.5 animate-spin text-muted-foreground" }),
+									progress ?? 0,
+									"%"
+								]
+							})
+						]
+					})]
+				})]
+			}),
+			isImage && loading && /* @__PURE__ */ jsx(ImageProgress, {
+				file: uploadingFile,
+				imageRef,
+				progress
+			}),
+			props.children
+		]
+	});
+});
+function ImageProgress({ className, file, imageRef, progress = 0 }) {
+	const [objectUrl, setObjectUrl] = React$1.useState(null);
+	React$1.useEffect(() => {
+		const url = URL.createObjectURL(file);
+		setObjectUrl(url);
+		return () => {
+			URL.revokeObjectURL(url);
+		};
+	}, [file]);
+	if (!objectUrl) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("relative", className),
+		contentEditable: false,
+		children: [/* @__PURE__ */ jsx("img", {
+			ref: imageRef,
+			className: "h-auto w-full rounded-sm object-cover",
+			alt: file.name,
+			src: objectUrl
+		}), progress < 100 && /* @__PURE__ */ jsxs("div", {
+			className: "absolute right-1 bottom-1 flex items-center space-x-2 rounded-full bg-black/50 px-1 py-0.5",
+			children: [/* @__PURE__ */ jsx(Loader2Icon, { className: "size-3.5 animate-spin text-muted-foreground" }), /* @__PURE__ */ jsxs("span", {
+				className: "font-medium text-white text-xs",
+				children: [Math.round(progress), "%"]
+			})]
+		})]
+	});
+}
+function formatBytes(bytes, opts = {}) {
+	const { decimals = 0, sizeType = "normal" } = opts;
+	const sizes = [
+		"Bytes",
+		"KB",
+		"MB",
+		"GB",
+		"TB"
+	];
+	const accurateSizes = [
+		"Bytes",
+		"KiB",
+		"MiB",
+		"GiB",
+		"TiB"
+	];
+	if (bytes === 0) return "0 Byte";
+	const i = Math.floor(Math.log(bytes) / Math.log(1024));
+	return `${(bytes / 1024 ** i).toFixed(decimals)} ${sizeType === "accurate" ? accurateSizes[i] ?? "Bytest" : sizes[i] ?? "Bytes"}`;
+}
+
+//#endregion
+export { PlaceholderElement };

package/dist/src/components/editor/ui/media-preview-dialog.mjs

@@ -0,0 +1,113 @@
+"use client";
+
+import { cn } from "../../../lib/utils.mjs";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEditorRef } from "platejs/react";
+import { ArrowLeft, ArrowRight, Download, Minus, Plus, X } from "lucide-react";
+import { cva } from "class-variance-authority";
+import { PreviewImage, useImagePreview, useImagePreviewValue, useScaleInput } from "@platejs/media/react";
+
+//#region src/components/editor/ui/media-preview-dialog.tsx
+const buttonVariants = cva("rounded bg-[rgba(0,0,0,0.5)] px-1", {
+	defaultVariants: { variant: "default" },
+	variants: { variant: {
+		default: "text-white",
+		disabled: "cursor-not-allowed text-gray-400"
+	} }
+});
+const SCROLL_SPEED = 4;
+function MediaPreviewDialog() {
+	const isOpen = useImagePreviewValue("isOpen", useEditorRef().id);
+	const scale = useImagePreviewValue("scale");
+	const isEditingScale = useImagePreviewValue("isEditingScale");
+	const { closeProps, currentUrlIndex, maskLayerProps, nextDisabled, nextProps, prevDisabled, prevProps, scaleTextProps, zommOutProps, zoomInDisabled, zoomInProps, zoomOutDisabled } = useImagePreview({ scrollSpeed: SCROLL_SPEED });
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("fixed inset-0 z-50 select-none", !isOpen && "hidden"),
+		onContextMenu: (e) => e.stopPropagation(),
+		...maskLayerProps,
+		children: [
+			/* @__PURE__ */ jsx("div", { className: "absolute inset-0 size-full bg-black opacity-30" }),
+			/* @__PURE__ */ jsx("div", { className: "absolute inset-0 size-full bg-black opacity-30" }),
+			/* @__PURE__ */ jsx("div", {
+				className: "absolute inset-0 flex items-center justify-center",
+				children: /* @__PURE__ */ jsxs("div", {
+					className: "relative flex max-h-screen w-full items-center",
+					children: [/* @__PURE__ */ jsx(PreviewImage, { className: cn("mx-auto block max-h-[calc(100vh-4rem)] w-auto object-contain transition-transform") }), /* @__PURE__ */ jsxs("div", {
+						className: "-translate-x-1/2 absolute bottom-0 left-1/2 z-40 flex w-fit justify-center gap-4 p-2 text-center text-white",
+						onClick: (e) => e.stopPropagation(),
+						children: [
+							/* @__PURE__ */ jsxs("div", {
+								className: "flex gap-1",
+								children: [
+									/* @__PURE__ */ jsx("button", {
+										...prevProps,
+										className: cn(buttonVariants({ variant: prevDisabled ? "disabled" : "default" })),
+										type: "button",
+										children: /* @__PURE__ */ jsx(ArrowLeft, {})
+									}),
+									(currentUrlIndex ?? 0) + 1,
+									/* @__PURE__ */ jsx("button", {
+										...nextProps,
+										className: cn(buttonVariants({ variant: nextDisabled ? "disabled" : "default" })),
+										type: "button",
+										children: /* @__PURE__ */ jsx(ArrowRight, {})
+									})
+								]
+							}),
+							/* @__PURE__ */ jsxs("div", {
+								className: "flex",
+								children: [
+									/* @__PURE__ */ jsx("button", {
+										className: cn(buttonVariants({ variant: zoomOutDisabled ? "disabled" : "default" })),
+										...zommOutProps,
+										type: "button",
+										children: /* @__PURE__ */ jsx(Minus, { className: "size-4" })
+									}),
+									/* @__PURE__ */ jsx("div", {
+										className: "mx-px",
+										children: isEditingScale ? /* @__PURE__ */ jsxs(Fragment, { children: [
+											/* @__PURE__ */ jsx(ScaleInput, { className: "w-10 rounded px-1 text-slate-500 outline" }),
+											" ",
+											/* @__PURE__ */ jsx("span", { children: "%" })
+										] }) : /* @__PURE__ */ jsx("span", {
+											...scaleTextProps,
+											children: `${scale * 100}%`
+										})
+									}),
+									/* @__PURE__ */ jsx("button", {
+										className: cn(buttonVariants({ variant: zoomInDisabled ? "disabled" : "default" })),
+										...zoomInProps,
+										type: "button",
+										children: /* @__PURE__ */ jsx(Plus, { className: "size-4" })
+									})
+								]
+							}),
+							/* @__PURE__ */ jsx("button", {
+								className: cn(buttonVariants()),
+								type: "button",
+								children: /* @__PURE__ */ jsx(Download, { className: "size-4" })
+							}),
+							/* @__PURE__ */ jsx("button", {
+								...closeProps,
+								className: cn(buttonVariants()),
+								type: "button",
+								children: /* @__PURE__ */ jsx(X, { className: "size-4" })
+							})
+						]
+					})]
+				})
+			})
+		]
+	});
+}
+function ScaleInput(props) {
+	const { props: scaleInputProps, ref } = useScaleInput();
+	return /* @__PURE__ */ jsx("input", {
+		...scaleInputProps,
+		...props,
+		ref
+	});
+}
+
+//#endregion
+export { MediaPreviewDialog };

package/dist/src/components/editor/ui/media-toolbar-button.mjs

@@ -0,0 +1,156 @@
+"use client";
+
+import { Input } from "../../ui/input.mjs";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuTrigger } from "../../ui/dropdown-menu.mjs";
+import { ToolbarSplitButton, ToolbarSplitButtonPrimary, ToolbarSplitButtonSecondary } from "../../ui/toolbar.mjs";
+import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from "../../ui/alert-dialog.mjs";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEditorRef } from "platejs/react";
+import * as React$1 from "react";
+import { KEYS, isUrl } from "platejs";
+import { FilmIcon, ImageIcon, LinkIcon } from "lucide-react";
+import { PlaceholderPlugin } from "@platejs/media/react";
+import { toast } from "sonner";
+
+//#region src/components/editor/ui/media-toolbar-button.tsx
+const MEDIA_CONFIG = {
+	[KEYS.img]: {
+		accept: ["image/*"],
+		icon: /* @__PURE__ */ jsx(ImageIcon, { className: "size-4" }),
+		title: "Insert Image",
+		tooltip: "Image"
+	},
+	[KEYS.video]: {
+		accept: ["video/*"],
+		icon: /* @__PURE__ */ jsx(FilmIcon, { className: "size-4" }),
+		title: "Insert Video",
+		tooltip: "Video"
+	}
+};
+function MediaToolbarButton({ nodeType, ...props }) {
+	const currentConfig = MEDIA_CONFIG[nodeType];
+	const editor = useEditorRef();
+	const [open, setOpen] = React$1.useState(false);
+	const [dialogOpen, setDialogOpen] = React$1.useState(false);
+	const inputId = React$1.useId();
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsxs(ToolbarSplitButton, {
+			onKeyDown: (e) => {
+				if (e.key === "ArrowDown") {
+					e.preventDefault();
+					setOpen(true);
+				}
+			},
+			pressed: open,
+			children: [/* @__PURE__ */ jsx("label", {
+				htmlFor: inputId,
+				children: /* @__PURE__ */ jsx(ToolbarSplitButtonPrimary, { children: currentConfig.icon })
+			}), /* @__PURE__ */ jsxs(DropdownMenu, {
+				open,
+				onOpenChange: setOpen,
+				modal: false,
+				...props,
+				children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
+					asChild: true,
+					children: /* @__PURE__ */ jsx(ToolbarSplitButtonSecondary, {})
+				}), /* @__PURE__ */ jsx(DropdownMenuContent, {
+					onClick: (e) => e.stopPropagation(),
+					align: "start",
+					alignOffset: -32,
+					children: /* @__PURE__ */ jsxs(DropdownMenuGroup, { children: [/* @__PURE__ */ jsx(DropdownMenuItem, {
+						onSelect: (e) => e.preventDefault(),
+						asChild: true,
+						children: /* @__PURE__ */ jsxs("label", {
+							htmlFor: inputId,
+							children: [currentConfig.icon, "Upload from computer"]
+						})
+					}), /* @__PURE__ */ jsxs(DropdownMenuItem, {
+						onSelect: () => setDialogOpen(true),
+						children: [/* @__PURE__ */ jsx(LinkIcon, {}), "Insert via URL"]
+					})] })
+				})]
+			})]
+		}),
+		/* @__PURE__ */ jsx("input", {
+			id: inputId,
+			type: "file",
+			hidden: true,
+			multiple: true,
+			accept: currentConfig.accept.join(", "),
+			onChange: (e) => {
+				const files = e.target.files;
+				if (!files) return;
+				editor.getTransforms(PlaceholderPlugin).insert.media(files);
+				setOpen(false);
+			}
+		}),
+		/* @__PURE__ */ jsx(AlertDialog, {
+			open: dialogOpen,
+			onOpenChange: (value) => {
+				setDialogOpen(value);
+			},
+			children: /* @__PURE__ */ jsx(AlertDialogContent, {
+				className: "gap-6",
+				children: /* @__PURE__ */ jsx(MediaUrlDialogContent, {
+					currentConfig,
+					nodeType,
+					setOpen: setDialogOpen
+				})
+			})
+		})
+	] });
+}
+function MediaUrlDialogContent({ currentConfig, nodeType, setOpen }) {
+	const editor = useEditorRef();
+	const [url, setUrl] = React$1.useState("");
+	const embedMedia = React$1.useCallback(() => {
+		if (!isUrl(url)) return toast.error("Invalid URL");
+		setOpen(false);
+		editor.tf.insertNodes({
+			children: [{ text: "" }],
+			name: nodeType === KEYS.file ? url.split("/").pop() : void 0,
+			type: nodeType,
+			url
+		});
+	}, [
+		url,
+		editor,
+		nodeType,
+		setOpen
+	]);
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx(AlertDialogHeader, { children: /* @__PURE__ */ jsx(AlertDialogTitle, { children: currentConfig.title }) }),
+		/* @__PURE__ */ jsxs(AlertDialogDescription, {
+			className: "group relative w-full",
+			children: [/* @__PURE__ */ jsx("label", {
+				className: "-translate-y-1/2 absolute top-1/2 block cursor-text px-1 text-muted-foreground/70 text-sm transition-all group-focus-within:pointer-events-none group-focus-within:top-0 group-focus-within:cursor-default group-focus-within:font-medium group-focus-within:text-foreground group-focus-within:text-xs has-[+input:not(:placeholder-shown)]:pointer-events-none has-[+input:not(:placeholder-shown)]:top-0 has-[+input:not(:placeholder-shown)]:cursor-default has-[+input:not(:placeholder-shown)]:font-medium has-[+input:not(:placeholder-shown)]:text-foreground has-[+input:not(:placeholder-shown)]:text-xs",
+				htmlFor: "url",
+				children: /* @__PURE__ */ jsx("span", {
+					className: "inline-flex bg-background px-2",
+					children: "URL"
+				})
+			}), /* @__PURE__ */ jsx(Input, {
+				id: "url",
+				className: "w-full",
+				value: url,
+				onChange: (e) => setUrl(e.target.value),
+				onKeyDown: (e) => {
+					if (e.key === "Enter") embedMedia();
+				},
+				placeholder: "",
+				type: "url",
+				autoFocus: true
+			})]
+		}),
+		/* @__PURE__ */ jsxs(AlertDialogFooter, { children: [/* @__PURE__ */ jsx(AlertDialogCancel, { children: "Cancel" }), /* @__PURE__ */ jsx(AlertDialogAction, {
+			onClick: (e) => {
+				e.preventDefault();
+				embedMedia();
+			},
+			children: "Accept"
+		})] })
+	] });
+}
+
+//#endregion
+export { MEDIA_CONFIG, MediaToolbarButton };

package/dist/src/components/editor/ui/media-toolbar.mjs

@@ -0,0 +1,80 @@
+"use client";
+
+import { Button, buttonVariants } from "../../ui/button.mjs";
+import { Popover, PopoverAnchor, PopoverContent } from "../../ui/popover.mjs";
+import { Separator } from "../../ui/separator.mjs";
+import { CaptionButton } from "./caption.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEditorRef, useEditorSelector, useElement, useFocusedLast, useReadOnly, useRemoveNodeButton, useSelected } from "platejs/react";
+import * as React$1 from "react";
+import { Link, Trash2Icon } from "lucide-react";
+import { cva } from "class-variance-authority";
+import { FloatingMedia, FloatingMediaStore, useFloatingMediaValue, useImagePreviewValue } from "@platejs/media/react";
+
+//#region src/components/editor/ui/media-toolbar.tsx
+const inputVariants = cva("flex h-[28px] w-full rounded-md border-none bg-transparent px-1.5 py-1 text-base placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-transparent md:text-sm");
+function MediaToolbar({ children, plugin }) {
+	const editor = useEditorRef();
+	const readOnly = useReadOnly();
+	const selected = useSelected();
+	const isFocusedLast = useFocusedLast();
+	const selectionCollapsed = useEditorSelector((editor$1) => !editor$1.api.isExpanded(), []);
+	const isImagePreviewOpen = useImagePreviewValue("isOpen", editor.id);
+	const open = isFocusedLast && !readOnly && selected && selectionCollapsed && !isImagePreviewOpen;
+	const isEditing = useFloatingMediaValue("isEditing");
+	React$1.useEffect(() => {
+		if (!open && isEditing) FloatingMediaStore.set("isEditing", false);
+	}, [open]);
+	const { props: buttonProps } = useRemoveNodeButton({ element: useElement() });
+	return /* @__PURE__ */ jsxs(Popover, {
+		open,
+		modal: false,
+		children: [/* @__PURE__ */ jsx(PopoverAnchor, { children }), /* @__PURE__ */ jsx(PopoverContent, {
+			className: "w-auto p-1",
+			onOpenAutoFocus: (e) => e.preventDefault(),
+			children: isEditing ? /* @__PURE__ */ jsx("div", {
+				className: "flex w-[330px] flex-col",
+				children: /* @__PURE__ */ jsxs("div", {
+					className: "flex items-center",
+					children: [/* @__PURE__ */ jsx("div", {
+						className: "flex items-center pr-1 pl-2 text-muted-foreground",
+						children: /* @__PURE__ */ jsx(Link, { className: "size-4" })
+					}), /* @__PURE__ */ jsx(FloatingMedia.UrlInput, {
+						className: inputVariants(),
+						placeholder: "Paste the embed link...",
+						options: { plugin }
+					})]
+				})
+			}) : /* @__PURE__ */ jsxs("div", {
+				className: "box-content flex items-center",
+				children: [
+					/* @__PURE__ */ jsx(FloatingMedia.EditButton, {
+						className: buttonVariants({
+							size: "sm",
+							variant: "ghost"
+						}),
+						children: "Edit link"
+					}),
+					/* @__PURE__ */ jsx(CaptionButton, {
+						size: "sm",
+						variant: "ghost",
+						children: "Caption"
+					}),
+					/* @__PURE__ */ jsx(Separator, {
+						orientation: "vertical",
+						className: "mx-1 h-6"
+					}),
+					/* @__PURE__ */ jsx(Button, {
+						size: "sm",
+						variant: "ghost",
+						...buttonProps,
+						children: /* @__PURE__ */ jsx(Trash2Icon, {})
+					})
+				]
+			})
+		})]
+	});
+}
+
+//#endregion
+export { MediaToolbar };

package/dist/src/components/editor/ui/media-upload-toast.mjs

@@ -0,0 +1,39 @@
+"use client";
+
+import { usePluginOption } from "platejs/react";
+import * as React$1 from "react";
+import { PlaceholderPlugin, UploadErrorCode } from "@platejs/media/react";
+import { toast } from "sonner";
+
+//#region src/components/editor/ui/media-upload-toast.tsx
+function MediaUploadToast() {
+	useUploadErrorToast();
+	return null;
+}
+const useUploadErrorToast = () => {
+	const uploadError = usePluginOption(PlaceholderPlugin, "error");
+	React$1.useEffect(() => {
+		if (!uploadError) return;
+		const { code, data } = uploadError;
+		switch (code) {
+			case UploadErrorCode.INVALID_FILE_SIZE:
+				toast.error(`The size of files ${data.files.map((f) => f.name).join(", ")} is invalid`);
+				break;
+			case UploadErrorCode.INVALID_FILE_TYPE:
+				toast.error(`The type of files ${data.files.map((f) => f.name).join(", ")} is invalid`);
+				break;
+			case UploadErrorCode.TOO_LARGE:
+				toast.error(`The size of files ${data.files.map((f) => f.name).join(", ")} is too large than ${data.maxFileSize}`);
+				break;
+			case UploadErrorCode.TOO_LESS_FILES:
+				toast.error(`The mini um number of files is ${data.minFileCount} for ${data.fileType}`);
+				break;
+			case UploadErrorCode.TOO_MANY_FILES:
+				toast.error(`The maximum number of files is ${data.maxFileCount} ${data.fileType ? `for ${data.fileType}` : ""}`);
+				break;
+		}
+	}, [uploadError]);
+};
+
+//#endregion
+export { MediaUploadToast };

package/dist/src/components/editor/ui/media-video-node-static.mjs

@@ -0,0 +1,27 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { NodeApi } from "platejs";
+import { SlateElement } from "platejs/static";
+
+//#region src/components/editor/ui/media-video-node-static.tsx
+function VideoElementStatic(props) {
+	const { align = "center", caption, url, width } = props.element;
+	return /* @__PURE__ */ jsxs(SlateElement, {
+		className: "py-2.5",
+		...props,
+		children: [/* @__PURE__ */ jsx("div", {
+			style: { textAlign: align },
+			children: /* @__PURE__ */ jsxs("figure", {
+				className: "group relative m-0 inline-block cursor-default",
+				style: { width },
+				children: [/* @__PURE__ */ jsx("video", {
+					className: "w-full max-w-full rounded-sm object-cover px-0",
+					src: url,
+					controls: true
+				}), caption && /* @__PURE__ */ jsx("figcaption", { children: NodeApi.string(caption[0]) })]
+			})
+		}), props.children]
+	});
+}
+
+//#endregion
+export { VideoElementStatic };