@haklex/rich-ext-gallery 0.0.40 → 0.0.42
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/GalleryNode-DUfg2dIP.js +352 -0
- package/dist/index.mjs +9 -318
- package/dist/static.mjs +11 -0
- package/package.json +4 -4
|
@@ -0,0 +1,352 @@
|
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
3
|
+
var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
|
|
4
|
+
import { decodeThumbHash, createRendererDecoration } from "@haklex/rich-editor";
|
|
5
|
+
import { DecoratorNode } from "lexical";
|
|
6
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
7
|
+
import "react-photo-view/dist/react-photo-view.css";
|
|
8
|
+
import { ChevronLeft, ChevronRight } from "lucide-react";
|
|
9
|
+
import { memo, useMemo, useState, useRef, useEffect, useCallback } from "react";
|
|
10
|
+
import { useInView } from "react-intersection-observer";
|
|
11
|
+
import { PhotoView, PhotoProvider } from "react-photo-view";
|
|
12
|
+
var gallery = "_10ydd1n0";
|
|
13
|
+
var galleryGrid = "_10ydd1n1";
|
|
14
|
+
var galleryMasonry = "_10ydd1n2";
|
|
15
|
+
var galleryCarousel = "_10ydd1n3";
|
|
16
|
+
var galleryContainer = "_10ydd1n4";
|
|
17
|
+
var galleryItem = "_10ydd1n5";
|
|
18
|
+
var galleryNav = "_10ydd1n6";
|
|
19
|
+
var galleryNavPrev = "_10ydd1n7";
|
|
20
|
+
var galleryNavNext = "_10ydd1n8";
|
|
21
|
+
var galleryIndicators = "_10ydd1n9";
|
|
22
|
+
var galleryIndicator = "_10ydd1na";
|
|
23
|
+
var galleryIndicatorActive = "_10ydd1nb";
|
|
24
|
+
var galleryEditContainer = "_10ydd1nc";
|
|
25
|
+
var galleryEditOverlay = "_10ydd1nd";
|
|
26
|
+
var galleryEditLabel = "_10ydd1ne";
|
|
27
|
+
var galleryEmptyState = "_10ydd1nf";
|
|
28
|
+
var galleryDialogPopup = "_10ydd1ng";
|
|
29
|
+
var galleryDialogHeader = "_10ydd1nh";
|
|
30
|
+
var galleryDialogTitle = "_10ydd1ni";
|
|
31
|
+
var galleryHeaderActions = "_10ydd1nj";
|
|
32
|
+
var galleryHeaderClose = "_10ydd1nk";
|
|
33
|
+
var galleryDialogBody = "_10ydd1nl";
|
|
34
|
+
var galleryImageList = "_10ydd1nm";
|
|
35
|
+
var galleryImageCard = "_10ydd1nn";
|
|
36
|
+
var galleryImageDragHandle = "_10ydd1no";
|
|
37
|
+
var galleryImageThumb = "_10ydd1np";
|
|
38
|
+
var galleryImageThumbPlaceholder = "_10ydd1nq";
|
|
39
|
+
var galleryImageFields = "_10ydd1nr";
|
|
40
|
+
var galleryImageInput = "_10ydd1ns";
|
|
41
|
+
var galleryImageActions = "_10ydd1nt";
|
|
42
|
+
var galleryImageDeleteBtn = "_10ydd1nu";
|
|
43
|
+
var galleryAddBtn = "_10ydd1nv";
|
|
44
|
+
var galleryDialogFooter = "_10ydd1nw";
|
|
45
|
+
var galleryFooterInfo = "_10ydd1nx";
|
|
46
|
+
var galleryFooterActions = "_10ydd1ny";
|
|
47
|
+
var galleryFooterBtnCancel = "_10ydd1n10 _10ydd1nz";
|
|
48
|
+
var galleryFooterBtnSave = "_10ydd1n11 _10ydd1nz";
|
|
49
|
+
var galleryDialogEmpty = "_10ydd1n12";
|
|
50
|
+
const IMAGE_CONTAINER_MARGIN_INSET = 60;
|
|
51
|
+
const CHILD_GAP = 15;
|
|
52
|
+
const AUTOPLAY_DURATION = 5e3;
|
|
53
|
+
function throttle(func, wait) {
|
|
54
|
+
let timeout = null;
|
|
55
|
+
return ((...args) => {
|
|
56
|
+
if (!timeout) {
|
|
57
|
+
timeout = setTimeout(() => {
|
|
58
|
+
func(...args);
|
|
59
|
+
timeout = null;
|
|
60
|
+
}, wait);
|
|
61
|
+
}
|
|
62
|
+
});
|
|
63
|
+
}
|
|
64
|
+
function clsx(...classes) {
|
|
65
|
+
return classes.filter(Boolean).join(" ");
|
|
66
|
+
}
|
|
67
|
+
function useThumbhashStyle(image) {
|
|
68
|
+
return useMemo(() => {
|
|
69
|
+
if (!image.thumbhash) return;
|
|
70
|
+
const url = decodeThumbHash(image.thumbhash);
|
|
71
|
+
if (!url) return;
|
|
72
|
+
return { backgroundImage: `url(${url})`, backgroundSize: "cover" };
|
|
73
|
+
}, [image.thumbhash]);
|
|
74
|
+
}
|
|
75
|
+
const GalleryRenderer = ({
|
|
76
|
+
images,
|
|
77
|
+
layout
|
|
78
|
+
}) => {
|
|
79
|
+
const [containerRef, setContainerRef] = useState(null);
|
|
80
|
+
const [, setUpdated] = useState({});
|
|
81
|
+
const memoedChildContainerWidthRef = useRef(0);
|
|
82
|
+
useEffect(() => {
|
|
83
|
+
if (!containerRef) return;
|
|
84
|
+
const ob = new ResizeObserver(() => {
|
|
85
|
+
setUpdated({});
|
|
86
|
+
calChild(containerRef);
|
|
87
|
+
});
|
|
88
|
+
function calChild(containerRef2) {
|
|
89
|
+
const $child = containerRef2.children.item(0);
|
|
90
|
+
if ($child) {
|
|
91
|
+
memoedChildContainerWidthRef.current = $child.clientWidth;
|
|
92
|
+
}
|
|
93
|
+
}
|
|
94
|
+
calChild(containerRef);
|
|
95
|
+
ob.observe(containerRef);
|
|
96
|
+
return () => {
|
|
97
|
+
ob.disconnect();
|
|
98
|
+
};
|
|
99
|
+
}, [containerRef]);
|
|
100
|
+
const [currentIndex, setCurrentIndex] = useState(0);
|
|
101
|
+
const handleOnScroll = useCallback(
|
|
102
|
+
throttle((e) => {
|
|
103
|
+
const $ = e.target;
|
|
104
|
+
const index = Math.floor(
|
|
105
|
+
($.scrollLeft + IMAGE_CONTAINER_MARGIN_INSET + 15) / memoedChildContainerWidthRef.current
|
|
106
|
+
);
|
|
107
|
+
setCurrentIndex(index);
|
|
108
|
+
}, 60),
|
|
109
|
+
[]
|
|
110
|
+
);
|
|
111
|
+
const handleScrollTo = useCallback(
|
|
112
|
+
(i) => {
|
|
113
|
+
if (!containerRef) return;
|
|
114
|
+
containerRef.scrollTo({
|
|
115
|
+
left: memoedChildContainerWidthRef.current * i,
|
|
116
|
+
behavior: "smooth"
|
|
117
|
+
});
|
|
118
|
+
},
|
|
119
|
+
[containerRef]
|
|
120
|
+
);
|
|
121
|
+
const autoplayTimerRef = useRef(null);
|
|
122
|
+
const isForward = useRef(true);
|
|
123
|
+
const autoplayRef = useRef(true);
|
|
124
|
+
const handleCancelAutoplay = useCallback(() => {
|
|
125
|
+
if (!autoplayRef.current) return;
|
|
126
|
+
autoplayRef.current = false;
|
|
127
|
+
if (autoplayTimerRef.current) {
|
|
128
|
+
clearInterval(autoplayTimerRef.current);
|
|
129
|
+
}
|
|
130
|
+
}, []);
|
|
131
|
+
const { ref } = useInView({
|
|
132
|
+
initialInView: false,
|
|
133
|
+
triggerOnce: images.length < 2,
|
|
134
|
+
onChange(inView) {
|
|
135
|
+
if (images.length < 2 || !autoplayRef.current) return;
|
|
136
|
+
if (inView) {
|
|
137
|
+
autoplayTimerRef.current = setInterval(() => {
|
|
138
|
+
setCurrentIndex((prev) => {
|
|
139
|
+
if (prev + 1 > images.length - 1 && isForward.current) {
|
|
140
|
+
isForward.current = false;
|
|
141
|
+
}
|
|
142
|
+
if (prev - 1 < 0 && !isForward.current) {
|
|
143
|
+
isForward.current = true;
|
|
144
|
+
}
|
|
145
|
+
const index = prev + (isForward.current ? 1 : -1);
|
|
146
|
+
handleScrollTo(index);
|
|
147
|
+
return index;
|
|
148
|
+
});
|
|
149
|
+
}, AUTOPLAY_DURATION);
|
|
150
|
+
} else {
|
|
151
|
+
if (autoplayTimerRef.current) {
|
|
152
|
+
clearInterval(autoplayTimerRef.current);
|
|
153
|
+
}
|
|
154
|
+
}
|
|
155
|
+
}
|
|
156
|
+
});
|
|
157
|
+
useEffect(
|
|
158
|
+
() => () => {
|
|
159
|
+
if (autoplayTimerRef.current) {
|
|
160
|
+
clearInterval(autoplayTimerRef.current);
|
|
161
|
+
}
|
|
162
|
+
},
|
|
163
|
+
[]
|
|
164
|
+
);
|
|
165
|
+
if (images.length === 0) return null;
|
|
166
|
+
const layoutClass = layout === "masonry" ? galleryMasonry : layout === "carousel" ? galleryCarousel : galleryGrid;
|
|
167
|
+
if (images.length === 1 || layout === "grid" || layout === "masonry") {
|
|
168
|
+
return /* @__PURE__ */ jsx(PhotoProvider, { children: /* @__PURE__ */ jsx("div", { className: clsx(gallery, layoutClass), children: images.map((image, index) => /* @__PURE__ */ jsx(GalleryFigure, { image }, index)) }) });
|
|
169
|
+
}
|
|
170
|
+
return /* @__PURE__ */ jsx(PhotoProvider, { children: /* @__PURE__ */ jsxs(
|
|
171
|
+
"div",
|
|
172
|
+
{
|
|
173
|
+
className: clsx(gallery, galleryCarousel),
|
|
174
|
+
ref,
|
|
175
|
+
onTouchMove: handleCancelAutoplay,
|
|
176
|
+
onWheel: handleCancelAutoplay,
|
|
177
|
+
children: [
|
|
178
|
+
/* @__PURE__ */ jsx(
|
|
179
|
+
"div",
|
|
180
|
+
{
|
|
181
|
+
className: galleryContainer,
|
|
182
|
+
onTouchStart: handleCancelAutoplay,
|
|
183
|
+
onScroll: handleOnScroll,
|
|
184
|
+
ref: setContainerRef,
|
|
185
|
+
children: images.map((image, index) => /* @__PURE__ */ jsx(
|
|
186
|
+
GalleryFigure,
|
|
187
|
+
{
|
|
188
|
+
image,
|
|
189
|
+
style: {
|
|
190
|
+
width: `calc(100% - ${IMAGE_CONTAINER_MARGIN_INSET}px)`,
|
|
191
|
+
marginRight: `${CHILD_GAP}px`
|
|
192
|
+
}
|
|
193
|
+
},
|
|
194
|
+
index
|
|
195
|
+
))
|
|
196
|
+
}
|
|
197
|
+
),
|
|
198
|
+
currentIndex > 0 && /* @__PURE__ */ jsx(
|
|
199
|
+
"button",
|
|
200
|
+
{
|
|
201
|
+
className: clsx(galleryNav, galleryNavPrev),
|
|
202
|
+
onClick: () => handleScrollTo(currentIndex - 1),
|
|
203
|
+
children: /* @__PURE__ */ jsx(ChevronLeft, { size: 18 })
|
|
204
|
+
}
|
|
205
|
+
),
|
|
206
|
+
currentIndex < images.length - 1 && /* @__PURE__ */ jsx(
|
|
207
|
+
"button",
|
|
208
|
+
{
|
|
209
|
+
className: clsx(galleryNav, galleryNavNext),
|
|
210
|
+
onClick: () => handleScrollTo(currentIndex + 1),
|
|
211
|
+
children: /* @__PURE__ */ jsx(ChevronRight, { size: 18 })
|
|
212
|
+
}
|
|
213
|
+
),
|
|
214
|
+
/* @__PURE__ */ jsx("div", { className: galleryIndicators, children: images.map((_, i) => /* @__PURE__ */ jsx(
|
|
215
|
+
"div",
|
|
216
|
+
{
|
|
217
|
+
className: clsx(
|
|
218
|
+
galleryIndicator,
|
|
219
|
+
currentIndex === i && galleryIndicatorActive
|
|
220
|
+
),
|
|
221
|
+
onClick: () => handleScrollTo(i)
|
|
222
|
+
},
|
|
223
|
+
i
|
|
224
|
+
)) })
|
|
225
|
+
]
|
|
226
|
+
}
|
|
227
|
+
) });
|
|
228
|
+
};
|
|
229
|
+
const GalleryFigure = memo(
|
|
230
|
+
({ image, style }) => {
|
|
231
|
+
const thumbStyle = useThumbhashStyle(image);
|
|
232
|
+
return /* @__PURE__ */ jsx(PhotoView, { src: image.src, children: /* @__PURE__ */ jsx("figure", { className: galleryItem, style: { ...thumbStyle, ...style }, children: /* @__PURE__ */ jsx(
|
|
233
|
+
"img",
|
|
234
|
+
{
|
|
235
|
+
src: image.src,
|
|
236
|
+
alt: image.alt || "",
|
|
237
|
+
width: image.width,
|
|
238
|
+
height: image.height,
|
|
239
|
+
loading: "lazy",
|
|
240
|
+
style: { maxWidth: "100%", height: "auto" }
|
|
241
|
+
}
|
|
242
|
+
) }) });
|
|
243
|
+
}
|
|
244
|
+
);
|
|
245
|
+
const GalleryRenderer_default = memo(GalleryRenderer);
|
|
246
|
+
class GalleryNode extends DecoratorNode {
|
|
247
|
+
constructor(payload, key) {
|
|
248
|
+
super(key);
|
|
249
|
+
__publicField(this, "__images");
|
|
250
|
+
__publicField(this, "__layout");
|
|
251
|
+
this.__images = payload.images;
|
|
252
|
+
this.__layout = payload.layout || "grid";
|
|
253
|
+
}
|
|
254
|
+
static getType() {
|
|
255
|
+
return "gallery";
|
|
256
|
+
}
|
|
257
|
+
static clone(node) {
|
|
258
|
+
return new GalleryNode(
|
|
259
|
+
{
|
|
260
|
+
images: node.__images.map((img) => ({ ...img })),
|
|
261
|
+
layout: node.__layout
|
|
262
|
+
},
|
|
263
|
+
node.__key
|
|
264
|
+
);
|
|
265
|
+
}
|
|
266
|
+
createDOM(_config) {
|
|
267
|
+
const div = document.createElement("div");
|
|
268
|
+
div.className = `rich-gallery rich-gallery-${this.__layout}`;
|
|
269
|
+
return div;
|
|
270
|
+
}
|
|
271
|
+
updateDOM() {
|
|
272
|
+
return false;
|
|
273
|
+
}
|
|
274
|
+
isInline() {
|
|
275
|
+
return false;
|
|
276
|
+
}
|
|
277
|
+
static importJSON(serializedNode) {
|
|
278
|
+
return $createGalleryNode({
|
|
279
|
+
images: serializedNode.images,
|
|
280
|
+
layout: serializedNode.layout
|
|
281
|
+
});
|
|
282
|
+
}
|
|
283
|
+
exportJSON() {
|
|
284
|
+
return {
|
|
285
|
+
...super.exportJSON(),
|
|
286
|
+
type: "gallery",
|
|
287
|
+
images: this.__images,
|
|
288
|
+
layout: this.__layout,
|
|
289
|
+
version: 1
|
|
290
|
+
};
|
|
291
|
+
}
|
|
292
|
+
getImages() {
|
|
293
|
+
return this.getLatest().__images;
|
|
294
|
+
}
|
|
295
|
+
setImages(images) {
|
|
296
|
+
const writable = this.getWritable();
|
|
297
|
+
writable.__images = images;
|
|
298
|
+
}
|
|
299
|
+
getLayout() {
|
|
300
|
+
return this.getLatest().__layout;
|
|
301
|
+
}
|
|
302
|
+
setLayout(layout) {
|
|
303
|
+
const writable = this.getWritable();
|
|
304
|
+
writable.__layout = layout;
|
|
305
|
+
}
|
|
306
|
+
decorate(_editor, _config) {
|
|
307
|
+
const props = {
|
|
308
|
+
images: this.__images,
|
|
309
|
+
layout: this.__layout
|
|
310
|
+
};
|
|
311
|
+
return createRendererDecoration("Gallery", GalleryRenderer, props);
|
|
312
|
+
}
|
|
313
|
+
}
|
|
314
|
+
function $createGalleryNode(payload) {
|
|
315
|
+
return new GalleryNode(payload);
|
|
316
|
+
}
|
|
317
|
+
function $isGalleryNode(node) {
|
|
318
|
+
return node instanceof GalleryNode;
|
|
319
|
+
}
|
|
320
|
+
export {
|
|
321
|
+
$createGalleryNode as $,
|
|
322
|
+
galleryImageDeleteBtn as A,
|
|
323
|
+
$isGalleryNode as B,
|
|
324
|
+
GalleryRenderer_default as C,
|
|
325
|
+
GalleryNode as G,
|
|
326
|
+
GalleryRenderer as a,
|
|
327
|
+
galleryEditContainer as b,
|
|
328
|
+
galleryEmptyState as c,
|
|
329
|
+
galleryEditOverlay as d,
|
|
330
|
+
galleryEditLabel as e,
|
|
331
|
+
galleryDialogHeader as f,
|
|
332
|
+
galleryDialogPopup as g,
|
|
333
|
+
galleryDialogTitle as h,
|
|
334
|
+
galleryHeaderActions as i,
|
|
335
|
+
galleryHeaderClose as j,
|
|
336
|
+
galleryDialogBody as k,
|
|
337
|
+
galleryDialogEmpty as l,
|
|
338
|
+
galleryAddBtn as m,
|
|
339
|
+
galleryImageList as n,
|
|
340
|
+
galleryDialogFooter as o,
|
|
341
|
+
galleryFooterInfo as p,
|
|
342
|
+
galleryFooterActions as q,
|
|
343
|
+
galleryFooterBtnCancel as r,
|
|
344
|
+
galleryFooterBtnSave as s,
|
|
345
|
+
galleryImageCard as t,
|
|
346
|
+
galleryImageDragHandle as u,
|
|
347
|
+
galleryImageThumb as v,
|
|
348
|
+
galleryImageThumbPlaceholder as w,
|
|
349
|
+
galleryImageFields as x,
|
|
350
|
+
galleryImageInput as y,
|
|
351
|
+
galleryImageActions as z
|
|
352
|
+
};
|
package/dist/index.mjs
CHANGED
|
@@ -1,328 +1,19 @@
|
|
|
1
1
|
var __defProp = Object.defineProperty;
|
|
2
2
|
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
3
3
|
var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
6
|
-
import {
|
|
7
|
-
import {
|
|
4
|
+
import { G as GalleryNode, a as GalleryRenderer, g as galleryDialogPopup, b as galleryEditContainer, c as galleryEmptyState, d as galleryEditOverlay, e as galleryEditLabel, f as galleryDialogHeader, h as galleryDialogTitle, i as galleryHeaderActions, j as galleryHeaderClose, k as galleryDialogBody, l as galleryDialogEmpty, m as galleryAddBtn, n as galleryImageList, o as galleryDialogFooter, p as galleryFooterInfo, q as galleryFooterActions, r as galleryFooterBtnCancel, s as galleryFooterBtnSave, t as galleryImageCard, u as galleryImageDragHandle, v as galleryImageThumb, w as galleryImageThumbPlaceholder, x as galleryImageFields, y as galleryImageInput, z as galleryImageActions, A as galleryImageDeleteBtn } from "./GalleryNode-DUfg2dIP.js";
|
|
5
|
+
import { $, B, C } from "./GalleryNode-DUfg2dIP.js";
|
|
6
|
+
import { createRendererDecoration, useColorScheme } from "@haklex/rich-editor";
|
|
7
|
+
import { $insertNodes, $getNodeByKey } from "lexical";
|
|
8
|
+
import { Images, ImageIcon, Pencil, X, Plus, GripVertical, Trash2 } from "lucide-react";
|
|
9
|
+
import { createElement, useCallback, useState, useRef } from "react";
|
|
8
10
|
import { jsx, jsxs, Fragment } from "react/jsx-runtime";
|
|
9
|
-
import "react-photo-view/dist/react-photo-view.css";
|
|
10
|
-
import { useInView } from "react-intersection-observer";
|
|
11
|
-
import { PhotoView, PhotoProvider } from "react-photo-view";
|
|
12
11
|
import { useSensors, useSensor, PointerSensor, DndContext, closestCenter, DragOverlay } from "@dnd-kit/core";
|
|
13
12
|
import { arrayMove, SortableContext, verticalListSortingStrategy, useSortable } from "@dnd-kit/sortable";
|
|
14
13
|
import { CSS } from "@dnd-kit/utilities";
|
|
15
14
|
import { presentDialog, SegmentedControl } from "@haklex/rich-editor-ui";
|
|
16
15
|
import { usePortalTheme, vars } from "@haklex/rich-style-token";
|
|
17
16
|
import { createPortal } from "react-dom";
|
|
18
|
-
var gallery = "_10ydd1n0";
|
|
19
|
-
var galleryGrid = "_10ydd1n1";
|
|
20
|
-
var galleryMasonry = "_10ydd1n2";
|
|
21
|
-
var galleryCarousel = "_10ydd1n3";
|
|
22
|
-
var galleryContainer = "_10ydd1n4";
|
|
23
|
-
var galleryItem = "_10ydd1n5";
|
|
24
|
-
var galleryNav = "_10ydd1n6";
|
|
25
|
-
var galleryNavPrev = "_10ydd1n7";
|
|
26
|
-
var galleryNavNext = "_10ydd1n8";
|
|
27
|
-
var galleryIndicators = "_10ydd1n9";
|
|
28
|
-
var galleryIndicator = "_10ydd1na";
|
|
29
|
-
var galleryIndicatorActive = "_10ydd1nb";
|
|
30
|
-
var galleryEditContainer = "_10ydd1nc";
|
|
31
|
-
var galleryEditOverlay = "_10ydd1nd";
|
|
32
|
-
var galleryEditLabel = "_10ydd1ne";
|
|
33
|
-
var galleryEmptyState = "_10ydd1nf";
|
|
34
|
-
var galleryDialogPopup = "_10ydd1ng";
|
|
35
|
-
var galleryDialogHeader = "_10ydd1nh";
|
|
36
|
-
var galleryDialogTitle = "_10ydd1ni";
|
|
37
|
-
var galleryHeaderActions = "_10ydd1nj";
|
|
38
|
-
var galleryHeaderClose = "_10ydd1nk";
|
|
39
|
-
var galleryDialogBody = "_10ydd1nl";
|
|
40
|
-
var galleryImageList = "_10ydd1nm";
|
|
41
|
-
var galleryImageCard = "_10ydd1nn";
|
|
42
|
-
var galleryImageDragHandle = "_10ydd1no";
|
|
43
|
-
var galleryImageThumb = "_10ydd1np";
|
|
44
|
-
var galleryImageThumbPlaceholder = "_10ydd1nq";
|
|
45
|
-
var galleryImageFields = "_10ydd1nr";
|
|
46
|
-
var galleryImageInput = "_10ydd1ns";
|
|
47
|
-
var galleryImageActions = "_10ydd1nt";
|
|
48
|
-
var galleryImageDeleteBtn = "_10ydd1nu";
|
|
49
|
-
var galleryAddBtn = "_10ydd1nv";
|
|
50
|
-
var galleryDialogFooter = "_10ydd1nw";
|
|
51
|
-
var galleryFooterInfo = "_10ydd1nx";
|
|
52
|
-
var galleryFooterActions = "_10ydd1ny";
|
|
53
|
-
var galleryFooterBtnCancel = "_10ydd1n10 _10ydd1nz";
|
|
54
|
-
var galleryFooterBtnSave = "_10ydd1n11 _10ydd1nz";
|
|
55
|
-
var galleryDialogEmpty = "_10ydd1n12";
|
|
56
|
-
const IMAGE_CONTAINER_MARGIN_INSET = 60;
|
|
57
|
-
const CHILD_GAP = 15;
|
|
58
|
-
const AUTOPLAY_DURATION = 5e3;
|
|
59
|
-
function throttle(func, wait) {
|
|
60
|
-
let timeout = null;
|
|
61
|
-
return ((...args) => {
|
|
62
|
-
if (!timeout) {
|
|
63
|
-
timeout = setTimeout(() => {
|
|
64
|
-
func(...args);
|
|
65
|
-
timeout = null;
|
|
66
|
-
}, wait);
|
|
67
|
-
}
|
|
68
|
-
});
|
|
69
|
-
}
|
|
70
|
-
function clsx(...classes) {
|
|
71
|
-
return classes.filter(Boolean).join(" ");
|
|
72
|
-
}
|
|
73
|
-
function useThumbhashStyle(image) {
|
|
74
|
-
return useMemo(() => {
|
|
75
|
-
if (!image.thumbhash) return;
|
|
76
|
-
const url = decodeThumbHash(image.thumbhash);
|
|
77
|
-
if (!url) return;
|
|
78
|
-
return { backgroundImage: `url(${url})`, backgroundSize: "cover" };
|
|
79
|
-
}, [image.thumbhash]);
|
|
80
|
-
}
|
|
81
|
-
const GalleryRenderer = ({
|
|
82
|
-
images,
|
|
83
|
-
layout
|
|
84
|
-
}) => {
|
|
85
|
-
const [containerRef, setContainerRef] = useState(null);
|
|
86
|
-
const [, setUpdated] = useState({});
|
|
87
|
-
const memoedChildContainerWidthRef = useRef(0);
|
|
88
|
-
useEffect(() => {
|
|
89
|
-
if (!containerRef) return;
|
|
90
|
-
const ob = new ResizeObserver(() => {
|
|
91
|
-
setUpdated({});
|
|
92
|
-
calChild(containerRef);
|
|
93
|
-
});
|
|
94
|
-
function calChild(containerRef2) {
|
|
95
|
-
const $child = containerRef2.children.item(0);
|
|
96
|
-
if ($child) {
|
|
97
|
-
memoedChildContainerWidthRef.current = $child.clientWidth;
|
|
98
|
-
}
|
|
99
|
-
}
|
|
100
|
-
calChild(containerRef);
|
|
101
|
-
ob.observe(containerRef);
|
|
102
|
-
return () => {
|
|
103
|
-
ob.disconnect();
|
|
104
|
-
};
|
|
105
|
-
}, [containerRef]);
|
|
106
|
-
const [currentIndex, setCurrentIndex] = useState(0);
|
|
107
|
-
const handleOnScroll = useCallback(
|
|
108
|
-
throttle((e) => {
|
|
109
|
-
const $ = e.target;
|
|
110
|
-
const index = Math.floor(
|
|
111
|
-
($.scrollLeft + IMAGE_CONTAINER_MARGIN_INSET + 15) / memoedChildContainerWidthRef.current
|
|
112
|
-
);
|
|
113
|
-
setCurrentIndex(index);
|
|
114
|
-
}, 60),
|
|
115
|
-
[]
|
|
116
|
-
);
|
|
117
|
-
const handleScrollTo = useCallback(
|
|
118
|
-
(i) => {
|
|
119
|
-
if (!containerRef) return;
|
|
120
|
-
containerRef.scrollTo({
|
|
121
|
-
left: memoedChildContainerWidthRef.current * i,
|
|
122
|
-
behavior: "smooth"
|
|
123
|
-
});
|
|
124
|
-
},
|
|
125
|
-
[containerRef]
|
|
126
|
-
);
|
|
127
|
-
const autoplayTimerRef = useRef(null);
|
|
128
|
-
const isForward = useRef(true);
|
|
129
|
-
const autoplayRef = useRef(true);
|
|
130
|
-
const handleCancelAutoplay = useCallback(() => {
|
|
131
|
-
if (!autoplayRef.current) return;
|
|
132
|
-
autoplayRef.current = false;
|
|
133
|
-
if (autoplayTimerRef.current) {
|
|
134
|
-
clearInterval(autoplayTimerRef.current);
|
|
135
|
-
}
|
|
136
|
-
}, []);
|
|
137
|
-
const { ref } = useInView({
|
|
138
|
-
initialInView: false,
|
|
139
|
-
triggerOnce: images.length < 2,
|
|
140
|
-
onChange(inView) {
|
|
141
|
-
if (images.length < 2 || !autoplayRef.current) return;
|
|
142
|
-
if (inView) {
|
|
143
|
-
autoplayTimerRef.current = setInterval(() => {
|
|
144
|
-
setCurrentIndex((prev) => {
|
|
145
|
-
if (prev + 1 > images.length - 1 && isForward.current) {
|
|
146
|
-
isForward.current = false;
|
|
147
|
-
}
|
|
148
|
-
if (prev - 1 < 0 && !isForward.current) {
|
|
149
|
-
isForward.current = true;
|
|
150
|
-
}
|
|
151
|
-
const index = prev + (isForward.current ? 1 : -1);
|
|
152
|
-
handleScrollTo(index);
|
|
153
|
-
return index;
|
|
154
|
-
});
|
|
155
|
-
}, AUTOPLAY_DURATION);
|
|
156
|
-
} else {
|
|
157
|
-
if (autoplayTimerRef.current) {
|
|
158
|
-
clearInterval(autoplayTimerRef.current);
|
|
159
|
-
}
|
|
160
|
-
}
|
|
161
|
-
}
|
|
162
|
-
});
|
|
163
|
-
useEffect(
|
|
164
|
-
() => () => {
|
|
165
|
-
if (autoplayTimerRef.current) {
|
|
166
|
-
clearInterval(autoplayTimerRef.current);
|
|
167
|
-
}
|
|
168
|
-
},
|
|
169
|
-
[]
|
|
170
|
-
);
|
|
171
|
-
if (images.length === 0) return null;
|
|
172
|
-
const layoutClass = layout === "masonry" ? galleryMasonry : layout === "carousel" ? galleryCarousel : galleryGrid;
|
|
173
|
-
if (images.length === 1 || layout === "grid" || layout === "masonry") {
|
|
174
|
-
return /* @__PURE__ */ jsx(PhotoProvider, { children: /* @__PURE__ */ jsx("div", { className: clsx(gallery, layoutClass), children: images.map((image, index) => /* @__PURE__ */ jsx(GalleryFigure, { image }, index)) }) });
|
|
175
|
-
}
|
|
176
|
-
return /* @__PURE__ */ jsx(PhotoProvider, { children: /* @__PURE__ */ jsxs(
|
|
177
|
-
"div",
|
|
178
|
-
{
|
|
179
|
-
className: clsx(gallery, galleryCarousel),
|
|
180
|
-
ref,
|
|
181
|
-
onTouchMove: handleCancelAutoplay,
|
|
182
|
-
onWheel: handleCancelAutoplay,
|
|
183
|
-
children: [
|
|
184
|
-
/* @__PURE__ */ jsx(
|
|
185
|
-
"div",
|
|
186
|
-
{
|
|
187
|
-
className: galleryContainer,
|
|
188
|
-
onTouchStart: handleCancelAutoplay,
|
|
189
|
-
onScroll: handleOnScroll,
|
|
190
|
-
ref: setContainerRef,
|
|
191
|
-
children: images.map((image, index) => /* @__PURE__ */ jsx(
|
|
192
|
-
GalleryFigure,
|
|
193
|
-
{
|
|
194
|
-
image,
|
|
195
|
-
style: {
|
|
196
|
-
width: `calc(100% - ${IMAGE_CONTAINER_MARGIN_INSET}px)`,
|
|
197
|
-
marginRight: `${CHILD_GAP}px`
|
|
198
|
-
}
|
|
199
|
-
},
|
|
200
|
-
index
|
|
201
|
-
))
|
|
202
|
-
}
|
|
203
|
-
),
|
|
204
|
-
currentIndex > 0 && /* @__PURE__ */ jsx(
|
|
205
|
-
"button",
|
|
206
|
-
{
|
|
207
|
-
className: clsx(galleryNav, galleryNavPrev),
|
|
208
|
-
onClick: () => handleScrollTo(currentIndex - 1),
|
|
209
|
-
children: /* @__PURE__ */ jsx(ChevronLeft, { size: 18 })
|
|
210
|
-
}
|
|
211
|
-
),
|
|
212
|
-
currentIndex < images.length - 1 && /* @__PURE__ */ jsx(
|
|
213
|
-
"button",
|
|
214
|
-
{
|
|
215
|
-
className: clsx(galleryNav, galleryNavNext),
|
|
216
|
-
onClick: () => handleScrollTo(currentIndex + 1),
|
|
217
|
-
children: /* @__PURE__ */ jsx(ChevronRight, { size: 18 })
|
|
218
|
-
}
|
|
219
|
-
),
|
|
220
|
-
/* @__PURE__ */ jsx("div", { className: galleryIndicators, children: images.map((_, i) => /* @__PURE__ */ jsx(
|
|
221
|
-
"div",
|
|
222
|
-
{
|
|
223
|
-
className: clsx(
|
|
224
|
-
galleryIndicator,
|
|
225
|
-
currentIndex === i && galleryIndicatorActive
|
|
226
|
-
),
|
|
227
|
-
onClick: () => handleScrollTo(i)
|
|
228
|
-
},
|
|
229
|
-
i
|
|
230
|
-
)) })
|
|
231
|
-
]
|
|
232
|
-
}
|
|
233
|
-
) });
|
|
234
|
-
};
|
|
235
|
-
const GalleryFigure = memo(
|
|
236
|
-
({ image, style }) => {
|
|
237
|
-
const thumbStyle = useThumbhashStyle(image);
|
|
238
|
-
return /* @__PURE__ */ jsx(PhotoView, { src: image.src, children: /* @__PURE__ */ jsx("figure", { className: galleryItem, style: { ...thumbStyle, ...style }, children: /* @__PURE__ */ jsx(
|
|
239
|
-
"img",
|
|
240
|
-
{
|
|
241
|
-
src: image.src,
|
|
242
|
-
alt: image.alt || "",
|
|
243
|
-
width: image.width,
|
|
244
|
-
height: image.height,
|
|
245
|
-
loading: "lazy",
|
|
246
|
-
style: { maxWidth: "100%", height: "auto" }
|
|
247
|
-
}
|
|
248
|
-
) }) });
|
|
249
|
-
}
|
|
250
|
-
);
|
|
251
|
-
const GalleryRenderer_default = memo(GalleryRenderer);
|
|
252
|
-
class GalleryNode extends DecoratorNode {
|
|
253
|
-
constructor(payload, key) {
|
|
254
|
-
super(key);
|
|
255
|
-
__publicField(this, "__images");
|
|
256
|
-
__publicField(this, "__layout");
|
|
257
|
-
this.__images = payload.images;
|
|
258
|
-
this.__layout = payload.layout || "grid";
|
|
259
|
-
}
|
|
260
|
-
static getType() {
|
|
261
|
-
return "gallery";
|
|
262
|
-
}
|
|
263
|
-
static clone(node) {
|
|
264
|
-
return new GalleryNode(
|
|
265
|
-
{
|
|
266
|
-
images: node.__images.map((img) => ({ ...img })),
|
|
267
|
-
layout: node.__layout
|
|
268
|
-
},
|
|
269
|
-
node.__key
|
|
270
|
-
);
|
|
271
|
-
}
|
|
272
|
-
createDOM(_config) {
|
|
273
|
-
const div = document.createElement("div");
|
|
274
|
-
div.className = `rich-gallery rich-gallery-${this.__layout}`;
|
|
275
|
-
return div;
|
|
276
|
-
}
|
|
277
|
-
updateDOM() {
|
|
278
|
-
return false;
|
|
279
|
-
}
|
|
280
|
-
isInline() {
|
|
281
|
-
return false;
|
|
282
|
-
}
|
|
283
|
-
static importJSON(serializedNode) {
|
|
284
|
-
return $createGalleryNode({
|
|
285
|
-
images: serializedNode.images,
|
|
286
|
-
layout: serializedNode.layout
|
|
287
|
-
});
|
|
288
|
-
}
|
|
289
|
-
exportJSON() {
|
|
290
|
-
return {
|
|
291
|
-
...super.exportJSON(),
|
|
292
|
-
type: "gallery",
|
|
293
|
-
images: this.__images,
|
|
294
|
-
layout: this.__layout,
|
|
295
|
-
version: 1
|
|
296
|
-
};
|
|
297
|
-
}
|
|
298
|
-
getImages() {
|
|
299
|
-
return this.getLatest().__images;
|
|
300
|
-
}
|
|
301
|
-
setImages(images) {
|
|
302
|
-
const writable = this.getWritable();
|
|
303
|
-
writable.__images = images;
|
|
304
|
-
}
|
|
305
|
-
getLayout() {
|
|
306
|
-
return this.getLatest().__layout;
|
|
307
|
-
}
|
|
308
|
-
setLayout(layout) {
|
|
309
|
-
const writable = this.getWritable();
|
|
310
|
-
writable.__layout = layout;
|
|
311
|
-
}
|
|
312
|
-
decorate(_editor, _config) {
|
|
313
|
-
const props = {
|
|
314
|
-
images: this.__images,
|
|
315
|
-
layout: this.__layout
|
|
316
|
-
};
|
|
317
|
-
return createRendererDecoration("Gallery", GalleryRenderer, props);
|
|
318
|
-
}
|
|
319
|
-
}
|
|
320
|
-
function $createGalleryNode(payload) {
|
|
321
|
-
return new GalleryNode(payload);
|
|
322
|
-
}
|
|
323
|
-
function $isGalleryNode(node) {
|
|
324
|
-
return node instanceof GalleryNode;
|
|
325
|
-
}
|
|
326
17
|
const _GalleryEditNode = class _GalleryEditNode extends GalleryNode {
|
|
327
18
|
static clone(node) {
|
|
328
19
|
return new _GalleryEditNode(
|
|
@@ -715,14 +406,14 @@ const galleryNodes = [GalleryNode];
|
|
|
715
406
|
const galleryEditNodes = [GalleryEditNode];
|
|
716
407
|
export {
|
|
717
408
|
$createGalleryEditNode,
|
|
718
|
-
$createGalleryNode,
|
|
409
|
+
$ as $createGalleryNode,
|
|
719
410
|
$isGalleryEditNode,
|
|
720
|
-
$isGalleryNode,
|
|
411
|
+
B as $isGalleryNode,
|
|
721
412
|
GalleryEditNode,
|
|
722
413
|
GalleryEditRenderer,
|
|
723
414
|
GalleryNode,
|
|
724
415
|
GalleryRenderer,
|
|
725
|
-
|
|
416
|
+
C as default,
|
|
726
417
|
galleryEditNodes,
|
|
727
418
|
galleryNodes
|
|
728
419
|
};
|
package/dist/static.mjs
ADDED
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { G as GalleryNode } from "./GalleryNode-DUfg2dIP.js";
|
|
2
|
+
import { $, B, a, C } from "./GalleryNode-DUfg2dIP.js";
|
|
3
|
+
const galleryNodes = [GalleryNode];
|
|
4
|
+
export {
|
|
5
|
+
$ as $createGalleryNode,
|
|
6
|
+
B as $isGalleryNode,
|
|
7
|
+
GalleryNode,
|
|
8
|
+
a as GalleryRenderer,
|
|
9
|
+
C as default,
|
|
10
|
+
galleryNodes
|
|
11
|
+
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@haklex/rich-ext-gallery",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.42",
|
|
4
4
|
"description": "Image gallery extension with drag-and-drop",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"type": "module",
|
|
@@ -26,9 +26,9 @@
|
|
|
26
26
|
"react-intersection-observer": "^9.16.0",
|
|
27
27
|
"react-photo-view": "^1.2.7",
|
|
28
28
|
"thumbhash": "^0.1.1",
|
|
29
|
-
"@haklex/rich-editor": "0.0.
|
|
30
|
-
"@haklex/rich-style-token": "0.0.
|
|
31
|
-
"@haklex/rich-editor-ui": "0.0.
|
|
29
|
+
"@haklex/rich-editor": "0.0.42",
|
|
30
|
+
"@haklex/rich-style-token": "0.0.42",
|
|
31
|
+
"@haklex/rich-editor-ui": "0.0.42"
|
|
32
32
|
},
|
|
33
33
|
"devDependencies": {
|
|
34
34
|
"@types/react": "^19.2.14",
|