@haklex/rich-ext-gallery 0.26.1 → 0.26.3

package/dist/GalleryEditRenderer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GalleryEditRenderer.d.ts","sourceRoot":"","sources":["../src/GalleryEditRenderer.tsx"],"names":[],"mappings":"AAoBA,OAAO,KAAK,EAAiB,EAAE,EAAE,MAAM,OAAO,CAAC;AAM/C,OAAO,KAAK,EAAgB,oBAAoB,EAAE,MAAM,SAAS,CAAC;AA6RlE,eAAO,MAAM,mBAAmB,EAAE,EAAE,CAAC,oBAAoB,CA6DxD,CAAC"}
+{"version":3,"file":"GalleryEditRenderer.d.ts","sourceRoot":"","sources":["../src/GalleryEditRenderer.tsx"],"names":[],"mappings":"AAqBA,OAAO,KAAK,EAA8C,EAAE,EAAE,MAAM,OAAO,CAAC;AAM5E,OAAO,KAAK,EAAgB,oBAAoB,EAAE,MAAM,SAAS,CAAC;AA0alE,eAAO,MAAM,mBAAmB,EAAE,EAAE,CAAC,oBAAoB,CA+DxD,CAAC"}

package/dist/{edit-U3YtpHCm.js → edit-C_0ARS8I.js}

@@ -6,6 +6,7 @@ import { createElement, useCallback, useRef, useState } from "react";
 import { DndContext, DragOverlay, PointerSensor, closestCenter, useSensor, useSensors } from "@dnd-kit/core";
 import { SortableContext, arrayMove, useSortable, verticalListSortingStrategy } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
+import { useImageUpload } from "@haklex/rich-editor/plugins";
 import { useColorScheme } from "@haklex/rich-editor/static";
 import { SegmentedControl, presentDialog } from "@haklex/rich-editor-ui";
 import { usePortalTheme, vars } from "@haklex/rich-style-token";
@@ -30,16 +31,71 @@ var nextId = 0;
 function genId() {
 	return `img-${++nextId}`;
 }
-var SortableImageCard = ({ id, image, index, isLast, lastInputRef, onUpdate, onRemove }) => {
+function readAsDataUrl(file) {
+	return new Promise((resolve, reject) => {
+		const reader = new FileReader();
+		reader.onload = () => resolve(String(reader.result));
+		reader.onerror = () => reject(reader.error ?? /* @__PURE__ */ new Error("File read failed"));
+		reader.readAsDataURL(file);
+	});
+}
+async function fileToGalleryImage(file, uploader) {
+	if (uploader) {
+		const result = await uploader(file);
+		return {
+			src: result.src,
+			alt: result.altText ?? file.name
+		};
+	}
+	return {
+		src: await readAsDataUrl(file),
+		alt: file.name
+	};
+}
+function extractImageFiles(list) {
+	if (!list) return [];
+	const files = [];
+	for (let i = 0; i < list.length; i++) {
+		const f = list[i];
+		if (f && f.type.startsWith("image/")) files.push(f);
+	}
+	return files;
+}
+var SortableImageCard = ({ id, image, index, isLast, lastInputRef, onUpdate, onRemove, onDropFile }) => {
 	const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id });
+	const [dropActive, setDropActive] = useState(false);
+	const style = {
+		transform: CSS.Transform.toString(transform),
+		transition: isDragging ? void 0 : transition,
+		opacity: isDragging ? .4 : 1,
+		outline: dropActive ? `2px dashed ${vars.color.accent}` : void 0,
+		outlineOffset: dropActive ? 2 : void 0
+	};
+	const handleDragOver = (e) => {
+		if (!e.dataTransfer?.types.includes("Files")) return;
+		e.preventDefault();
+		e.dataTransfer.dropEffect = "copy";
+		if (!dropActive) setDropActive(true);
+	};
+	const handleDragLeave = (e) => {
+		if (e.currentTarget.contains(e.relatedTarget)) return;
+		setDropActive(false);
+	};
+	const handleDrop = (e) => {
+		const files = extractImageFiles(e.dataTransfer?.files);
+		setDropActive(false);
+		if (!files.length) return;
+		e.preventDefault();
+		e.stopPropagation();
+		onDropFile(index, files[0]);
+	};
 	return /* @__PURE__ */ jsxs("div", {
 		className: galleryImageCard,
 		ref: setNodeRef,
-		style: {
-			transform: CSS.Transform.toString(transform),
-			transition: isDragging ? void 0 : transition,
-			opacity: isDragging ? .4 : 1
-		},
+		style,
+		onDragLeave: handleDragLeave,
+		onDragOver: handleDragOver,
+		onDrop: handleDrop,
 		children: [
 			/* @__PURE__ */ jsx("div", {
 				className: galleryImageDragHandle,
@@ -49,6 +105,7 @@ var SortableImageCard = ({ id, image, index, isLast, lastInputRef, onUpdate, onR
 			}),
 			/* @__PURE__ */ jsx("div", {
 				className: galleryImageThumb,
+				title: "Drop an image here to replace",
 				children: image.src ? /* @__PURE__ */ jsx("img", {
 					alt: image.alt || "",
 					src: image.src
@@ -119,7 +176,7 @@ var DragOverlayCard = ({ image }) => /* @__PURE__ */ jsxs("div", {
 		})
 	]
 });
-var GalleryEditorDialogContent = ({ dismiss, initialImages, initialLayout, onImagesChange, onLayoutChange }) => {
+var GalleryEditorDialogContent = ({ dismiss, initialImages, initialLayout, uploader, onImagesChange, onLayoutChange }) => {
 	const { className: portalClassName } = usePortalTheme();
 	const [entries, setEntries] = useState(() => initialImages.map((img) => ({
 		id: genId(),
@@ -128,6 +185,8 @@ var GalleryEditorDialogContent = ({ dismiss, initialImages, initialLayout, onIma
 	const [layout, setLayout] = useState(initialLayout);
 	const newInputRef = useRef(null);
 	const [dragActiveId, setDragActiveId] = useState(null);
+	const [bodyDropActive, setBodyDropActive] = useState(false);
+	const dragDepthRef = useRef(0);
 	const itemIds = entries.map((e) => e.id);
 	const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 5 } }));
 	const handleAddImage = useCallback(() => {
@@ -145,6 +204,32 @@ var GalleryEditorDialogContent = ({ dismiss, initialImages, initialLayout, onIma
 	const handleRemoveImage = useCallback((index) => {
 		setEntries((prev) => prev.filter((_, i) => i !== index));
 	}, []);
+	const appendFiles = useCallback(async (files) => {
+		if (!files.length) return;
+		const fresh = (await Promise.all(files.map(async (file) => {
+			try {
+				return await fileToGalleryImage(file, uploader);
+			} catch {
+				return null;
+			}
+		}))).filter((r) => !!r && !!r.src).map((image) => ({
+			id: genId(),
+			image
+		}));
+		if (fresh.length) setEntries((prev) => [...prev, ...fresh]);
+	}, [uploader]);
+	const replaceEntryFile = useCallback(async (index, file) => {
+		try {
+			const next = await fileToGalleryImage(file, uploader);
+			setEntries((prev) => prev.map((entry, i) => i === index ? {
+				...entry,
+				image: {
+					src: next.src,
+					alt: next.alt || entry.image.alt || ""
+				}
+			} : entry));
+		} catch {}
+	}, [uploader]);
 	const handleUpdateImage = useCallback((index, field, value) => {
 		setEntries((prev) => prev.map((entry, i) => i === index ? {
 			...entry,
@@ -177,6 +262,29 @@ var GalleryEditorDialogContent = ({ dismiss, initialImages, initialLayout, onIma
 		dismiss
 	]);
 	const dragActiveEntry = dragActiveId ? entries.find((e) => e.id === dragActiveId) : null;
+	const handleBodyDragEnter = (e) => {
+		if (!e.dataTransfer?.types.includes("Files")) return;
+		dragDepthRef.current += 1;
+		setBodyDropActive(true);
+	};
+	const handleBodyDragOver = (e) => {
+		if (!e.dataTransfer?.types.includes("Files")) return;
+		e.preventDefault();
+		e.dataTransfer.dropEffect = "copy";
+	};
+	const handleBodyDragLeave = (e) => {
+		if (!e.dataTransfer?.types.includes("Files")) return;
+		dragDepthRef.current = Math.max(0, dragDepthRef.current - 1);
+		if (dragDepthRef.current === 0) setBodyDropActive(false);
+	};
+	const handleBodyDrop = (e) => {
+		const files = extractImageFiles(e.dataTransfer?.files);
+		dragDepthRef.current = 0;
+		setBodyDropActive(false);
+		if (!files.length) return;
+		e.preventDefault();
+		appendFiles(files);
+	};
 	return /* @__PURE__ */ jsxs(Fragment, { children: [
 		/* @__PURE__ */ jsxs("div", {
 			className: galleryDialogHeader,
@@ -203,11 +311,20 @@ var GalleryEditorDialogContent = ({ dismiss, initialImages, initialLayout, onIma
 		}),
 		/* @__PURE__ */ jsx("div", {
 			className: galleryDialogBody,
+			style: bodyDropActive ? {
+				outline: `2px dashed ${vars.color.accent}`,
+				outlineOffset: -8,
+				borderRadius: 8
+			} : void 0,
+			onDragEnter: handleBodyDragEnter,
+			onDragLeave: handleBodyDragLeave,
+			onDragOver: handleBodyDragOver,
+			onDrop: handleBodyDrop,
 			children: entries.length === 0 ? /* @__PURE__ */ jsxs("div", {
 				className: galleryDialogEmpty,
 				children: [
 					/* @__PURE__ */ jsx(ImageIcon, { size: 32 }),
-					/* @__PURE__ */ jsx("span", { children: "Add your first image" }),
+					/* @__PURE__ */ jsx("span", { children: "Add your first image or drop files here" }),
 					/* @__PURE__ */ jsxs("button", {
 						className: galleryAddBtn,
 						style: { maxWidth: 200 },
@@ -235,6 +352,7 @@ var GalleryEditorDialogContent = ({ dismiss, initialImages, initialLayout, onIma
 							index,
 							isLast: index === entries.length - 1,
 							lastInputRef: newInputRef,
+							onDropFile: replaceEntryFile,
 							onRemove: handleRemoveImage,
 							onUpdate: handleUpdateImage
 						}, entry.id))
@@ -278,6 +396,7 @@ var GalleryEditorDialogContent = ({ dismiss, initialImages, initialLayout, onIma
 var GalleryEditRenderer = ({ images, layout, onImagesChange, onLayoutChange }) => {
 	const { className: portalClassName } = usePortalTheme();
 	const theme = useColorScheme();
+	const uploader = useImageUpload();
 	const handleOpenEditor = useCallback(() => {
 		if (!onImagesChange || !onLayoutChange) return;
 		presentDialog({
@@ -285,6 +404,7 @@ var GalleryEditRenderer = ({ images, layout, onImagesChange, onLayoutChange }) =
 				dismiss,
 				initialImages: images,
 				initialLayout: layout,
+				uploader,
 				onImagesChange,
 				onLayoutChange
 			}),
@@ -300,7 +420,8 @@ var GalleryEditRenderer = ({ images, layout, onImagesChange, onLayoutChange }) =
 		onImagesChange,
 		onLayoutChange,
 		portalClassName,
-		theme
+		theme,
+		uploader
 	]);
 	if (!onImagesChange) return /* @__PURE__ */ jsx(GalleryRenderer, {
 		images,

package/dist/edit.mjs

@@ -1,3 +1,3 @@
 import { t as __augmentLoaded_gallery } from "./augment-DgwFVGf9.js";
-import { a as GalleryEditRenderer, i as GalleryEditNode, n as $createGalleryEditNode, r as $isGalleryEditNode, t as galleryEditNodes } from "./edit-U3YtpHCm.js";
+import { a as GalleryEditRenderer, i as GalleryEditNode, n as $createGalleryEditNode, r as $isGalleryEditNode, t as galleryEditNodes } from "./edit-C_0ARS8I.js";
 export { $createGalleryEditNode, $isGalleryEditNode, GalleryEditNode, GalleryEditRenderer, __augmentLoaded_gallery, galleryEditNodes };

package/dist/index.mjs

@@ -1,6 +1,6 @@
 import { t as __augmentLoaded_gallery } from "./augment-DgwFVGf9.js";
 import { t as GalleryRenderer } from "./GalleryRenderer-CiHBgw2X.js";
-import { a as GalleryEditRenderer, i as GalleryEditNode, n as $createGalleryEditNode, r as $isGalleryEditNode, t as galleryEditNodes } from "./edit-U3YtpHCm.js";
+import { a as GalleryEditRenderer, i as GalleryEditNode, n as $createGalleryEditNode, r as $isGalleryEditNode, t as galleryEditNodes } from "./edit-C_0ARS8I.js";
 import { a as GALLERY_NODE_KEY, n as $isGalleryNode, r as GalleryNode, t as $createGalleryNode } from "./GalleryNode-CvAj_vjz.js";
 import { galleryNodes } from "./node.mjs";
 import "./renderer.mjs";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@haklex/rich-ext-gallery",
-  "version": "0.26.1",
+  "version": "0.26.3",
   "description": "Image gallery extension with drag-and-drop",
   "repository": {
     "type": "git",
@@ -60,9 +60,9 @@
     "lucide-react": "^1.0.0",
     "react": ">=19",
     "react-dom": ">=19",
-    "@haklex/rich-editor-ui": "0.26.1",
-    "@haklex/rich-editor": "0.26.1",
-    "@haklex/rich-style-token": "0.26.1"
+    "@haklex/rich-editor": "0.26.3",
+    "@haklex/rich-editor-ui": "0.26.3",
+    "@haklex/rich-style-token": "0.26.3"
   },
   "publishConfig": {
     "access": "public"