@haklex/rich-ext-gallery 0.13.0 → 0.14.0

package/dist/{GalleryRenderer-C8Tw6IkA.js → GalleryRenderer-qIFakkWM.js}

@@ -1,9 +1,7 @@
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { decodeThumbHash } from "@haklex/rich-editor/renderers";
-import "react-photo-view/dist/react-photo-view.css";
 import { useInView } from "react-intersection-observer";
-import { PhotoProvider, PhotoView } from "react-photo-view";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/styles.css.ts
 var gallery = "_10ydd1n0";
@@ -68,7 +66,7 @@ function useThumbhashStyle(image) {
 		};
 	}, [image.thumbhash]);
 }
-var GalleryRenderer = ({ images, layout }) => {
+var GalleryRenderer = ({ images, layout, onImageClick }) => {
 	const [containerRef, setContainerRef] = useState(null);
 	const [, setUpdated] = useState({});
 	const memoedChildContainerWidthRef = useRef(0);
@@ -130,11 +128,16 @@ var GalleryRenderer = ({ images, layout }) => {
 	}, []);
 	if (images.length === 0) return null;
 	const layoutClass = layout === "masonry" ? galleryMasonry : layout === "carousel" ? galleryCarousel : galleryGrid;
-	if (images.length === 1 || layout === "grid" || layout === "masonry") return /* @__PURE__ */ jsx(PhotoProvider, { children: /* @__PURE__ */ jsx("div", {
+	if (images.length === 1 || layout === "grid" || layout === "masonry") return /* @__PURE__ */ jsx("div", {
 		className: clsx(gallery, layoutClass),
-		children: images.map((image, index) => /* @__PURE__ */ jsx(GalleryFigure, { image }, index))
-	}) });
-	return /* @__PURE__ */ jsx(PhotoProvider, { children: /* @__PURE__ */ jsxs("div", {
+		children: images.map((image, index) => /* @__PURE__ */ jsx(GalleryFigure, {
+			image,
+			images,
+			index,
+			onImageClick
+		}, index))
+	});
+	return /* @__PURE__ */ jsxs("div", {
 		className: clsx(gallery, galleryCarousel),
 		ref,
 		onTouchMove: handleCancelAutoplay,
@@ -147,10 +150,13 @@ var GalleryRenderer = ({ images, layout }) => {
 				onTouchStart: handleCancelAutoplay,
 				children: images.map((image, index) => /* @__PURE__ */ jsx(GalleryFigure, {
 					image,
+					images,
+					index,
 					style: {
 						width: `calc(100% - ${IMAGE_CONTAINER_MARGIN_INSET}px)`,
 						marginRight: `${CHILD_GAP}px`
-					}
+					},
+					onImageClick
 				}, index))
 			}),
 			currentIndex > 0 && /* @__PURE__ */ jsx("button", {
@@ -171,29 +177,48 @@ var GalleryRenderer = ({ images, layout }) => {
 				}, i))
 			})
 		]
-	}) });
+	});
 };
-var GalleryFigure = memo(({ image, style }) => {
+var GalleryFigure = memo(({ image, images, index, onImageClick, style }) => {
 	const thumbStyle = useThumbhashStyle(image);
-	return /* @__PURE__ */ jsx(PhotoView, {
-		src: image.src,
-		children: /* @__PURE__ */ jsx("figure", {
-			className: galleryItem,
+	const imgRef = useRef(null);
+	const interactive = Boolean(onImageClick);
+	const activate = () => {
+		if (imgRef.current) onImageClick?.({
+			current: image,
+			images,
+			index,
+			target: imgRef.current
+		});
+	};
+	const handleKeyDown = (e) => {
+		if (e.key !== "Enter" && e.key !== " ") return;
+		e.preventDefault();
+		activate();
+	};
+	return /* @__PURE__ */ jsx("figure", {
+		"aria-label": interactive ? `Open image: ${image.alt || "image"}` : void 0,
+		className: galleryItem,
+		role: interactive ? "button" : void 0,
+		style: {
+			...thumbStyle,
+			...style,
+			...interactive ? null : { cursor: "default" }
+		},
+		tabIndex: interactive ? 0 : void 0,
+		onClick: interactive ? activate : void 0,
+		onKeyDown: interactive ? handleKeyDown : void 0,
+		children: /* @__PURE__ */ jsx("img", {
+			alt: image.alt || "",
+			height: image.height,
+			loading: "lazy",
+			ref: imgRef,
+			src: image.src,
 			style: {
-				...thumbStyle,
-				...style
+				maxWidth: "100%",
+				height: "auto"
 			},
-			children: /* @__PURE__ */ jsx("img", {
-				alt: image.alt || "",
-				height: image.height,
-				loading: "lazy",
-				src: image.src,
-				style: {
-					maxWidth: "100%",
-					height: "auto"
-				},
-				width: image.width
-			})
+			width: image.width
 		})
 	});
 });

package/dist/GalleryRenderer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GalleryRenderer.d.ts","sourceRoot":"","sources":["../src/GalleryRenderer.tsx"],"names":[],"mappings":"AAAA,OAAO,4CAA4C,CAAC;AAIpD,OAAO,KAAK,EAAE,aAAa,EAAkB,MAAM,OAAO,CAAC;AAM3D,OAAO,KAAK,EAAgB,oBAAoB,EAAE,MAAM,SAAS,CAAC;AA+BlE,eAAO,MAAM,eAAe,EAAE,aAAa,CAAC,oBAAoB,CAuL/D,CAAC;;AAuBF,wBAAqC"}
+{"version":3,"file":"GalleryRenderer.d.ts","sourceRoot":"","sources":["../src/GalleryRenderer.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAkB,MAAM,OAAO,CAAC;AAK3D,OAAO,KAAK,EAAqC,oBAAoB,EAAE,MAAM,SAAS,CAAC;AA+BvF,eAAO,MAAM,eAAe,EAAE,aAAa,CAAC,oBAAoB,CA6L/D,CAAC;;AAkDF,wBAAqC"}

package/dist/{edit-BdSbkxR4.js → edit-BCgxzZ0R.js}

@@ -1,4 +1,4 @@
-import { C as galleryImageDragHandle, D as galleryImageThumb, E as galleryImageList, O as galleryImageThumbPlaceholder, S as galleryImageDeleteBtn, T as galleryImageInput, _ as galleryFooterInfo, a as galleryDialogEmpty, b as galleryImageActions, c as galleryDialogPopup, d as galleryEditLabel, f as galleryEditOverlay, g as galleryFooterBtnSave, h as galleryFooterBtnCancel, i as galleryDialogBody, l as galleryDialogTitle, m as galleryFooterActions, o as galleryDialogFooter, p as galleryEmptyState, r as galleryAddBtn, s as galleryDialogHeader, t as GalleryRenderer, u as galleryEditContainer, v as galleryHeaderActions, w as galleryImageFields, x as galleryImageCard, y as galleryHeaderClose } from "./GalleryRenderer-C8Tw6IkA.js";
+import { C as galleryImageDragHandle, D as galleryImageThumb, E as galleryImageList, O as galleryImageThumbPlaceholder, S as galleryImageDeleteBtn, T as galleryImageInput, _ as galleryFooterInfo, a as galleryDialogEmpty, b as galleryImageActions, c as galleryDialogPopup, d as galleryEditLabel, f as galleryEditOverlay, g as galleryFooterBtnSave, h as galleryFooterBtnCancel, i as galleryDialogBody, l as galleryDialogTitle, m as galleryFooterActions, o as galleryDialogFooter, p as galleryEmptyState, r as galleryAddBtn, s as galleryDialogHeader, t as GalleryRenderer, u as galleryEditContainer, v as galleryHeaderActions, w as galleryImageFields, x as galleryImageCard, y as galleryHeaderClose } from "./GalleryRenderer-qIFakkWM.js";
 import { i as _defineProperty, r as GalleryNode } from "./GalleryNode-Ne_f5BJ3.js";
 import { $getNodeByKey, $insertNodes } from "lexical";
 import { GripVertical, ImageIcon, Images, Pencil, Plus, Trash2, X } from "lucide-react";

package/dist/edit.mjs

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

package/dist/index.mjs

@@ -1,7 +1,7 @@
 import { t as __augmentLoaded_gallery } from "./augment-BXUga8d3.js";
-import { t as GalleryRenderer } from "./GalleryRenderer-C8Tw6IkA.js";
+import { t as GalleryRenderer } from "./GalleryRenderer-qIFakkWM.js";
 import { a as GALLERY_NODE_KEY, n as $isGalleryNode, r as GalleryNode, t as $createGalleryNode } from "./GalleryNode-Ne_f5BJ3.js";
-import { a as GalleryEditNode, i as $isGalleryEditNode, n as GalleryEditRenderer, r as $createGalleryEditNode, t as galleryEditNodes } from "./edit-BdSbkxR4.js";
+import { a as GalleryEditNode, i as $isGalleryEditNode, n as GalleryEditRenderer, r as $createGalleryEditNode, t as galleryEditNodes } from "./edit-BCgxzZ0R.js";
 import { galleryNodes } from "./node.mjs";
 import "./renderer.mjs";
 export { $createGalleryEditNode, $createGalleryNode, $isGalleryEditNode, $isGalleryNode, GALLERY_NODE_KEY, GalleryEditNode, GalleryEditRenderer, GalleryNode, GalleryRenderer, __augmentLoaded_gallery, galleryEditNodes, galleryNodes };

package/dist/renderer.mjs

@@ -1,3 +1,3 @@
 import { t as __augmentLoaded_gallery } from "./augment-BXUga8d3.js";
-import { n as GalleryRenderer_default, t as GalleryRenderer } from "./GalleryRenderer-C8Tw6IkA.js";
+import { n as GalleryRenderer_default, t as GalleryRenderer } from "./GalleryRenderer-qIFakkWM.js";
 export { GalleryRenderer, __augmentLoaded_gallery, GalleryRenderer_default as default };

package/dist/static.mjs

@@ -1,5 +1,5 @@
 import { t as __augmentLoaded_gallery } from "./augment-BXUga8d3.js";
-import { n as GalleryRenderer_default, t as GalleryRenderer } from "./GalleryRenderer-C8Tw6IkA.js";
+import { n as GalleryRenderer_default, t as GalleryRenderer } from "./GalleryRenderer-qIFakkWM.js";
 import { a as GALLERY_NODE_KEY, n as $isGalleryNode, r as GalleryNode, t as $createGalleryNode } from "./GalleryNode-Ne_f5BJ3.js";
 import { galleryNodes } from "./node.mjs";
 import "./renderer.mjs";

package/dist/types.d.ts

@@ -5,9 +5,17 @@ export interface GalleryImage {
     thumbhash?: string;
     width?: number;
 }
+export interface GalleryImageClickPayload {
+    current: GalleryImage;
+    images: GalleryImage[];
+    index: number;
+    target: HTMLElement;
+}
+export type GalleryOnImageClick = (payload: GalleryImageClickPayload) => void;
 export interface GalleryRendererProps {
     images: GalleryImage[];
     layout: 'grid' | 'masonry' | 'carousel';
+    onImageClick?: GalleryOnImageClick;
     onImagesChange?: (images: GalleryImage[]) => void;
     onLayoutChange?: (layout: 'grid' | 'masonry' | 'carousel') => void;
 }

package/dist/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,YAAY;IAC3B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,GAAG,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,oBAAoB;IACnC,MAAM,EAAE,YAAY,EAAE,CAAC;IACvB,MAAM,EAAE,MAAM,GAAG,SAAS,GAAG,UAAU,CAAC;IACxC,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,YAAY,EAAE,KAAK,IAAI,CAAC;IAClD,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,GAAG,SAAS,GAAG,UAAU,KAAK,IAAI,CAAC;CACpE"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,YAAY;IAC3B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,GAAG,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,wBAAwB;IACvC,OAAO,EAAE,YAAY,CAAC;IACtB,MAAM,EAAE,YAAY,EAAE,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,WAAW,CAAC;CACrB;AAED,MAAM,MAAM,mBAAmB,GAAG,CAAC,OAAO,EAAE,wBAAwB,KAAK,IAAI,CAAC;AAE9E,MAAM,WAAW,oBAAoB;IACnC,MAAM,EAAE,YAAY,EAAE,CAAC;IACvB,MAAM,EAAE,MAAM,GAAG,SAAS,GAAG,UAAU,CAAC;IACxC,YAAY,CAAC,EAAE,mBAAmB,CAAC;IACnC,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,YAAY,EAAE,KAAK,IAAI,CAAC;IAClD,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,GAAG,SAAS,GAAG,UAAU,KAAK,IAAI,CAAC;CACpE"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@haklex/rich-ext-gallery",
-  "version": "0.13.0",
+  "version": "0.14.0",
   "description": "Image gallery extension with drag-and-drop",
   "repository": {
     "type": "git",
@@ -40,8 +40,7 @@
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
-    "react-intersection-observer": "^10.0.3",
-    "react-photo-view": "^1.2.7"
+    "react-intersection-observer": "^10.0.3"
   },
   "devDependencies": {
     "@types/react": "^19.2.14",
@@ -61,9 +60,9 @@
     "lucide-react": "^1.0.0",
     "react": ">=19",
     "react-dom": ">=19",
-    "@haklex/rich-editor": "0.13.0",
-    "@haklex/rich-style-token": "0.13.0",
-    "@haklex/rich-editor-ui": "0.13.0"
+    "@haklex/rich-editor-ui": "0.14.0",
+    "@haklex/rich-editor": "0.14.0",
+    "@haklex/rich-style-token": "0.14.0"
   },
   "publishConfig": {
     "access": "public"