@haklex/rich-ext-gallery 0.0.80 → 0.0.82

package/dist/GalleryNode-CXLSG7vE.js

@@ -0,0 +1,313 @@
+import { createRendererDecoration, decodeThumbHash } from "@haklex/rich-editor/renderers";
+import { DecoratorNode } from "lexical";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
+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";
+var galleryGrid = "_10ydd1n1";
+var galleryMasonry = "_10ydd1n2";
+var galleryCarousel = "_10ydd1n3";
+var galleryContainer = "_10ydd1n4";
+var galleryItem = "_10ydd1n5";
+var galleryIndicators = "_10ydd1n9";
+var galleryIndicator = "_10ydd1na";
+var galleryEditContainer = "_10ydd1nc";
+var galleryEditOverlay = "_10ydd1nd";
+var galleryEditLabel = "_10ydd1ne";
+var galleryEmptyState = "_10ydd1nf";
+var galleryDialogPopup = "_10ydd1ng";
+var galleryDialogHeader = "_10ydd1nh";
+var galleryDialogTitle = "_10ydd1ni";
+var galleryHeaderActions = "_10ydd1nj";
+var galleryHeaderClose = "_10ydd1nk";
+var galleryDialogBody = "_10ydd1nl";
+var galleryImageList = "_10ydd1nm";
+var galleryImageCard = "_10ydd1nn";
+var galleryImageDragHandle = "_10ydd1no";
+var galleryImageThumb = "_10ydd1np";
+var galleryImageThumbPlaceholder = "_10ydd1nq";
+var galleryImageFields = "_10ydd1nr";
+var galleryImageInput = "_10ydd1ns";
+var galleryImageActions = "_10ydd1nt";
+var galleryImageDeleteBtn = "_10ydd1nu";
+var galleryAddBtn = "_10ydd1nv";
+var galleryDialogFooter = "_10ydd1nw";
+var galleryFooterInfo = "_10ydd1nx";
+var galleryFooterActions = "_10ydd1ny";
+var galleryFooterBtnCancel = "_10ydd1n10 _10ydd1nz";
+var galleryFooterBtnSave = "_10ydd1n11 _10ydd1nz";
+var galleryDialogEmpty = "_10ydd1n12";
+//#endregion
+//#region src/GalleryRenderer.tsx
+var IMAGE_CONTAINER_MARGIN_INSET = 60;
+var CHILD_GAP = 15;
+var AUTOPLAY_DURATION = 5e3;
+function throttle(func, wait) {
+	let timeout = null;
+	return ((...args) => {
+		if (!timeout) timeout = setTimeout(() => {
+			func(...args);
+			timeout = null;
+		}, wait);
+	});
+}
+function clsx(...classes) {
+	return classes.filter(Boolean).join(" ");
+}
+function useThumbhashStyle(image) {
+	return useMemo(() => {
+		if (!image.thumbhash) return;
+		const url = decodeThumbHash(image.thumbhash);
+		if (!url) return;
+		return {
+			backgroundImage: `url(${url})`,
+			backgroundSize: "cover"
+		};
+	}, [image.thumbhash]);
+}
+var GalleryRenderer = ({ images, layout }) => {
+	const [containerRef, setContainerRef] = useState(null);
+	const [, setUpdated] = useState({});
+	const memoedChildContainerWidthRef = useRef(0);
+	useEffect(() => {
+		if (!containerRef) return;
+		const ob = new ResizeObserver(() => {
+			setUpdated({});
+			calChild(containerRef);
+		});
+		function calChild(containerRef) {
+			const $child = containerRef.children.item(0);
+			if ($child) memoedChildContainerWidthRef.current = $child.clientWidth;
+		}
+		calChild(containerRef);
+		ob.observe(containerRef);
+		return () => {
+			ob.disconnect();
+		};
+	}, [containerRef]);
+	const [currentIndex, setCurrentIndex] = useState(0);
+	const handleOnScroll = useCallback(throttle((e) => {
+		const $ = e.target;
+		setCurrentIndex(Math.floor(($.scrollLeft + IMAGE_CONTAINER_MARGIN_INSET + 15) / memoedChildContainerWidthRef.current));
+	}, 60), []);
+	const handleScrollTo = useCallback((i) => {
+		if (!containerRef) return;
+		containerRef.scrollTo({
+			left: memoedChildContainerWidthRef.current * i,
+			behavior: "smooth"
+		});
+	}, [containerRef]);
+	const autoplayTimerRef = useRef(null);
+	const isForward = useRef(true);
+	const autoplayRef = useRef(true);
+	const handleCancelAutoplay = useCallback(() => {
+		if (!autoplayRef.current) return;
+		autoplayRef.current = false;
+		if (autoplayTimerRef.current) clearInterval(autoplayTimerRef.current);
+	}, []);
+	const { ref } = useInView({
+		initialInView: false,
+		triggerOnce: images.length < 2,
+		onChange(inView) {
+			if (images.length < 2 || !autoplayRef.current) return;
+			if (inView) autoplayTimerRef.current = setInterval(() => {
+				setCurrentIndex((prev) => {
+					if (prev + 1 > images.length - 1 && isForward.current) isForward.current = false;
+					if (prev - 1 < 0 && !isForward.current) isForward.current = true;
+					const index = prev + (isForward.current ? 1 : -1);
+					handleScrollTo(index);
+					return index;
+				});
+			}, AUTOPLAY_DURATION);
+			else if (autoplayTimerRef.current) clearInterval(autoplayTimerRef.current);
+		}
+	});
+	useEffect(() => () => {
+		if (autoplayTimerRef.current) clearInterval(autoplayTimerRef.current);
+	}, []);
+	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", {
+		className: clsx(gallery, layoutClass),
+		children: images.map((image, index) => /* @__PURE__ */ jsx(GalleryFigure, { image }, index))
+	}) });
+	return /* @__PURE__ */ jsx(PhotoProvider, { children: /* @__PURE__ */ jsxs("div", {
+		className: clsx(gallery, galleryCarousel),
+		ref,
+		onTouchMove: handleCancelAutoplay,
+		onWheel: handleCancelAutoplay,
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: galleryContainer,
+				ref: setContainerRef,
+				onScroll: handleOnScroll,
+				onTouchStart: handleCancelAutoplay,
+				children: images.map((image, index) => /* @__PURE__ */ jsx(GalleryFigure, {
+					image,
+					style: {
+						width: `calc(100% - ${IMAGE_CONTAINER_MARGIN_INSET}px)`,
+						marginRight: `${CHILD_GAP}px`
+					}
+				}, index))
+			}),
+			currentIndex > 0 && /* @__PURE__ */ jsx("button", {
+				className: clsx("_10ydd1n6", "_10ydd1n7"),
+				onClick: () => handleScrollTo(currentIndex - 1),
+				children: /* @__PURE__ */ jsx(ChevronLeft, { size: 18 })
+			}),
+			currentIndex < images.length - 1 && /* @__PURE__ */ jsx("button", {
+				className: clsx("_10ydd1n6", "_10ydd1n8"),
+				onClick: () => handleScrollTo(currentIndex + 1),
+				children: /* @__PURE__ */ jsx(ChevronRight, { size: 18 })
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: galleryIndicators,
+				children: images.map((_, i) => /* @__PURE__ */ jsx("div", {
+					className: clsx(galleryIndicator, currentIndex === i && "_10ydd1nb"),
+					onClick: () => handleScrollTo(i)
+				}, i))
+			})
+		]
+	}) });
+};
+var GalleryFigure = memo(({ image, style }) => {
+	const thumbStyle = useThumbhashStyle(image);
+	return /* @__PURE__ */ jsx(PhotoView, {
+		src: image.src,
+		children: /* @__PURE__ */ jsx("figure", {
+			className: galleryItem,
+			style: {
+				...thumbStyle,
+				...style
+			},
+			children: /* @__PURE__ */ jsx("img", {
+				alt: image.alt || "",
+				height: image.height,
+				loading: "lazy",
+				src: image.src,
+				style: {
+					maxWidth: "100%",
+					height: "auto"
+				},
+				width: image.width
+			})
+		})
+	});
+});
+var GalleryRenderer_default = memo(GalleryRenderer);
+//#endregion
+//#region \0@oxc-project+runtime@0.115.0/helpers/typeof.js
+function _typeof(o) {
+	"@babel/helpers - typeof";
+	return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(o) {
+		return typeof o;
+	} : function(o) {
+		return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
+	}, _typeof(o);
+}
+//#endregion
+//#region \0@oxc-project+runtime@0.115.0/helpers/toPrimitive.js
+function toPrimitive(t, r) {
+	if ("object" != _typeof(t) || !t) return t;
+	var e = t[Symbol.toPrimitive];
+	if (void 0 !== e) {
+		var i = e.call(t, r || "default");
+		if ("object" != _typeof(i)) return i;
+		throw new TypeError("@@toPrimitive must return a primitive value.");
+	}
+	return ("string" === r ? String : Number)(t);
+}
+//#endregion
+//#region \0@oxc-project+runtime@0.115.0/helpers/toPropertyKey.js
+function toPropertyKey(t) {
+	var i = toPrimitive(t, "string");
+	return "symbol" == _typeof(i) ? i : i + "";
+}
+//#endregion
+//#region \0@oxc-project+runtime@0.115.0/helpers/defineProperty.js
+function _defineProperty(e, r, t) {
+	return (r = toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
+		value: t,
+		enumerable: !0,
+		configurable: !0,
+		writable: !0
+	}) : e[r] = t, e;
+}
+//#endregion
+//#region src/GalleryNode.ts
+var GalleryNode = class GalleryNode extends DecoratorNode {
+	static getType() {
+		return "gallery";
+	}
+	static clone(node) {
+		return new GalleryNode({
+			images: node.__images.map((img) => ({ ...img })),
+			layout: node.__layout
+		}, node.__key);
+	}
+	constructor(payload, key) {
+		super(key);
+		_defineProperty(this, "__images", void 0);
+		_defineProperty(this, "__layout", void 0);
+		this.__images = payload.images;
+		this.__layout = payload.layout || "grid";
+	}
+	createDOM(_config) {
+		const div = document.createElement("div");
+		div.className = `rich-gallery rich-gallery-${this.__layout}`;
+		return div;
+	}
+	updateDOM() {
+		return false;
+	}
+	isInline() {
+		return false;
+	}
+	static importJSON(serializedNode) {
+		return $createGalleryNode({
+			images: serializedNode.images,
+			layout: serializedNode.layout
+		});
+	}
+	exportJSON() {
+		return {
+			...super.exportJSON(),
+			type: "gallery",
+			images: this.__images,
+			layout: this.__layout,
+			version: 1
+		};
+	}
+	getImages() {
+		return this.getLatest().__images;
+	}
+	setImages(images) {
+		const writable = this.getWritable();
+		writable.__images = images;
+	}
+	getLayout() {
+		return this.getLatest().__layout;
+	}
+	setLayout(layout) {
+		const writable = this.getWritable();
+		writable.__layout = layout;
+	}
+	decorate(_editor, _config) {
+		return createRendererDecoration("Gallery", GalleryRenderer, {
+			images: this.__images,
+			layout: this.__layout
+		});
+	}
+};
+function $createGalleryNode(payload) {
+	return new GalleryNode(payload);
+}
+function $isGalleryNode(node) {
+	return node instanceof GalleryNode;
+}
+//#endregion
+export { galleryImageList as A, galleryHeaderClose as C, galleryImageDragHandle as D, galleryImageDeleteBtn as E, galleryImageThumbPlaceholder as M, galleryImageFields as O, galleryHeaderActions as S, galleryImageCard as T, galleryEmptyState as _, GalleryRenderer as a, galleryFooterBtnSave as b, galleryDialogBody as c, galleryDialogHeader as d, galleryDialogPopup as f, galleryEditOverlay as g, galleryEditLabel as h, _defineProperty as i, galleryImageThumb as j, galleryImageInput as k, galleryDialogEmpty as l, galleryEditContainer as m, $isGalleryNode as n, GalleryRenderer_default as o, galleryDialogTitle as p, GalleryNode as r, galleryAddBtn as s, $createGalleryNode as t, galleryDialogFooter as u, galleryFooterActions as v, galleryImageActions as w, galleryFooterInfo as x, galleryFooterBtnCancel as y };