@haklex/rich-ext-gallery 0.0.82 → 0.0.83

package/dist/GalleryNode-CV8DRu_G.js

@@ -0,0 +1,349 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+import { decodeThumbHash, createRendererDecoration } from "@haklex/rich-editor/renderers";
+import { DecoratorNode } from "lexical";
+import { jsx, jsxs } from "react/jsx-runtime";
+import "react-photo-view/dist/react-photo-view.css";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { memo, useMemo, useState, useRef, useEffect, useCallback } from "react";
+import { useInView } from "react-intersection-observer";
+import { PhotoView, PhotoProvider } from "react-photo-view";
+var gallery = "_10ydd1n0";
+var galleryGrid = "_10ydd1n1";
+var galleryMasonry = "_10ydd1n2";
+var galleryCarousel = "_10ydd1n3";
+var galleryContainer = "_10ydd1n4";
+var galleryItem = "_10ydd1n5";
+var galleryNav = "_10ydd1n6";
+var galleryNavPrev = "_10ydd1n7";
+var galleryNavNext = "_10ydd1n8";
+var galleryIndicators = "_10ydd1n9";
+var galleryIndicator = "_10ydd1na";
+var galleryIndicatorActive = "_10ydd1nb";
+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";
+const IMAGE_CONTAINER_MARGIN_INSET = 60;
+const CHILD_GAP = 15;
+const 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]);
+}
+const 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(containerRef2) {
+      const $child = containerRef2.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;
+      const index = Math.floor(
+        ($.scrollLeft + IMAGE_CONTAINER_MARGIN_INSET + 15) / memoedChildContainerWidthRef.current
+      );
+      setCurrentIndex(index);
+    }, 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(galleryNav, galleryNavPrev),
+            onClick: () => handleScrollTo(currentIndex - 1),
+            children: /* @__PURE__ */ jsx(ChevronLeft, { size: 18 })
+          }
+        ),
+        currentIndex < images.length - 1 && /* @__PURE__ */ jsx(
+          "button",
+          {
+            className: clsx(galleryNav, galleryNavNext),
+            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 && galleryIndicatorActive
+            ),
+            onClick: () => handleScrollTo(i)
+          },
+          i
+        )) })
+      ]
+    }
+  ) });
+};
+const 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
+      }
+    ) }) });
+  }
+);
+const GalleryRenderer_default = memo(GalleryRenderer);
+class GalleryNode extends DecoratorNode {
+  constructor(payload, key) {
+    super(key);
+    __publicField(this, "__images");
+    __publicField(this, "__layout");
+    this.__images = payload.images;
+    this.__layout = payload.layout || "grid";
+  }
+  static getType() {
+    return "gallery";
+  }
+  static clone(node) {
+    return new GalleryNode(
+      {
+        images: node.__images.map((img) => ({ ...img })),
+        layout: node.__layout
+      },
+      node.__key
+    );
+  }
+  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) {
+    const props = {
+      images: this.__images,
+      layout: this.__layout
+    };
+    return createRendererDecoration("Gallery", GalleryRenderer, props);
+  }
+}
+function $createGalleryNode(payload) {
+  return new GalleryNode(payload);
+}
+function $isGalleryNode(node) {
+  return node instanceof GalleryNode;
+}
+export {
+  $createGalleryNode as $,
+  galleryImageDeleteBtn as A,
+  $isGalleryNode as B,
+  GalleryRenderer_default as C,
+  GalleryNode as G,
+  GalleryRenderer as a,
+  galleryEditContainer as b,
+  galleryEmptyState as c,
+  galleryEditOverlay as d,
+  galleryEditLabel as e,
+  galleryDialogHeader as f,
+  galleryDialogPopup as g,
+  galleryDialogTitle as h,
+  galleryHeaderActions as i,
+  galleryHeaderClose as j,
+  galleryDialogBody as k,
+  galleryDialogEmpty as l,
+  galleryAddBtn as m,
+  galleryImageList as n,
+  galleryDialogFooter as o,
+  galleryFooterInfo as p,
+  galleryFooterActions as q,
+  galleryFooterBtnCancel as r,
+  galleryFooterBtnSave as s,
+  galleryImageCard as t,
+  galleryImageDragHandle as u,
+  galleryImageThumb as v,
+  galleryImageThumbPlaceholder as w,
+  galleryImageFields as x,
+  galleryImageInput as y,
+  galleryImageActions as z
+};