@haklex/rich-ext-gallery 0.4.0 → 0.5.0

package/dist/edit-BQnC2MpC.js

@@ -0,0 +1,406 @@
+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-CyyWUTT0.js";
+import { i as _defineProperty, r as GalleryNode } from "./GalleryNode-CKcqJG5T.js";
+import { $getNodeByKey, $insertNodes } from "lexical";
+import { GripVertical, ImageIcon, Images, Pencil, Plus, Trash2, X } from "lucide-react";
+import { createElement, useCallback, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+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 { useColorScheme } from "@haklex/rich-editor";
+import { SegmentedControl, presentDialog } from "@haklex/rich-editor-ui";
+import { usePortalTheme, vars } from "@haklex/rich-style-token";
+import { createPortal } from "react-dom";
+//#region src/GalleryEditNode.ts
+var GalleryEditNode = class GalleryEditNode extends GalleryNode {
+	static clone(node) {
+		return new GalleryEditNode({
+			images: node.__images.map((img) => ({ ...img })),
+			layout: node.__layout
+		}, node.__key);
+	}
+	constructor(payload, key) {
+		super(payload, key);
+	}
+	static importJSON(serializedNode) {
+		return new GalleryEditNode({
+			images: serializedNode.images,
+			layout: serializedNode.layout
+		});
+	}
+	decorate(editor, _config) {
+		const nodeKey = this.__key;
+		return createElement(GalleryRenderer, {
+			images: this.__images,
+			layout: this.__layout,
+			onImagesChange: (images) => {
+				editor.update(() => {
+					const node = $getNodeByKey(nodeKey);
+					if (node) node.setImages(images);
+				});
+			},
+			onLayoutChange: (layout) => {
+				editor.update(() => {
+					const node = $getNodeByKey(nodeKey);
+					if (node) node.setLayout(layout);
+				});
+			}
+		});
+	}
+};
+_defineProperty(GalleryEditNode, "commandItems", [{
+	title: "Gallery",
+	icon: createElement(Images, { size: 20 }),
+	description: "Image gallery grid",
+	keywords: [
+		"gallery",
+		"images",
+		"grid"
+	],
+	section: "MEDIA",
+	placement: ["slash", "toolbar"],
+	group: "insert",
+	onSelect: (editor) => {
+		editor.update(() => {
+			$insertNodes([$createGalleryEditNode({ images: [] })]);
+		});
+	}
+}]);
+function $createGalleryEditNode(payload) {
+	return new GalleryEditNode(payload);
+}
+function $isGalleryEditNode(node) {
+	return node instanceof GalleryEditNode;
+}
+//#endregion
+//#region src/GalleryEditRenderer.tsx
+var layoutItems = [
+	{
+		value: "grid",
+		label: "Grid"
+	},
+	{
+		value: "masonry",
+		label: "Masonry"
+	},
+	{
+		value: "carousel",
+		label: "Carousel"
+	}
+];
+var nextId = 0;
+function genId() {
+	return `img-${++nextId}`;
+}
+var SortableImageCard = ({ id, image, index, isLast, lastInputRef, onUpdate, onRemove }) => {
+	const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id });
+	return /* @__PURE__ */ jsxs("div", {
+		className: galleryImageCard,
+		ref: setNodeRef,
+		style: {
+			transform: CSS.Transform.toString(transform),
+			transition: isDragging ? void 0 : transition,
+			opacity: isDragging ? .4 : 1
+		},
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: galleryImageDragHandle,
+				...attributes,
+				...listeners,
+				children: /* @__PURE__ */ jsx(GripVertical, { size: 14 })
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: galleryImageThumb,
+				children: image.src ? /* @__PURE__ */ jsx("img", {
+					alt: image.alt || "",
+					src: image.src
+				}) : /* @__PURE__ */ jsx("span", {
+					className: galleryImageThumbPlaceholder,
+					children: /* @__PURE__ */ jsx(ImageIcon, { size: 20 })
+				})
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: galleryImageFields,
+				children: [/* @__PURE__ */ jsx("input", {
+					className: galleryImageInput,
+					placeholder: "Image URL",
+					ref: isLast ? lastInputRef : void 0,
+					type: "text",
+					value: image.src,
+					onChange: (e) => onUpdate(index, "src", e.target.value)
+				}), /* @__PURE__ */ jsx("input", {
+					className: galleryImageInput,
+					placeholder: "Alt text (optional)",
+					type: "text",
+					value: image.alt || "",
+					onChange: (e) => onUpdate(index, "alt", e.target.value)
+				})]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: galleryImageActions,
+				children: /* @__PURE__ */ jsx("button", {
+					className: galleryImageDeleteBtn,
+					title: "Remove",
+					type: "button",
+					onClick: () => onRemove(index),
+					children: /* @__PURE__ */ jsx(Trash2, { size: 14 })
+				})
+			})
+		]
+	});
+};
+var DragOverlayCard = ({ image }) => /* @__PURE__ */ jsxs("div", {
+	className: galleryImageCard,
+	style: { opacity: .9 },
+	children: [
+		/* @__PURE__ */ jsx("div", {
+			className: galleryImageDragHandle,
+			children: /* @__PURE__ */ jsx(GripVertical, { size: 14 })
+		}),
+		/* @__PURE__ */ jsx("div", {
+			className: galleryImageThumb,
+			children: image.src ? /* @__PURE__ */ jsx("img", {
+				alt: image.alt || "",
+				src: image.src
+			}) : /* @__PURE__ */ jsx("span", {
+				className: galleryImageThumbPlaceholder,
+				children: /* @__PURE__ */ jsx(ImageIcon, { size: 20 })
+			})
+		}),
+		/* @__PURE__ */ jsx("div", {
+			className: galleryImageFields,
+			children: /* @__PURE__ */ jsx("span", {
+				style: {
+					fontSize: vars.typography.fontSizeSm,
+					overflow: "hidden",
+					textOverflow: "ellipsis",
+					whiteSpace: "nowrap"
+				},
+				children: image.src || "No URL"
+			})
+		})
+	]
+});
+var GalleryEditorDialogContent = ({ dismiss, initialImages, initialLayout, onImagesChange, onLayoutChange }) => {
+	const { className: portalClassName } = usePortalTheme();
+	const [entries, setEntries] = useState(() => initialImages.map((img) => ({
+		id: genId(),
+		image: { ...img }
+	})));
+	const [layout, setLayout] = useState(initialLayout);
+	const newInputRef = useRef(null);
+	const [dragActiveId, setDragActiveId] = useState(null);
+	const itemIds = entries.map((e) => e.id);
+	const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 5 } }));
+	const handleAddImage = useCallback(() => {
+		setEntries((prev) => [...prev, {
+			id: genId(),
+			image: {
+				src: "",
+				alt: ""
+			}
+		}]);
+		requestAnimationFrame(() => {
+			newInputRef.current?.focus();
+		});
+	}, []);
+	const handleRemoveImage = useCallback((index) => {
+		setEntries((prev) => prev.filter((_, i) => i !== index));
+	}, []);
+	const handleUpdateImage = useCallback((index, field, value) => {
+		setEntries((prev) => prev.map((entry, i) => i === index ? {
+			...entry,
+			image: {
+				...entry.image,
+				[field]: value
+			}
+		} : entry));
+	}, []);
+	const handleDragEnd = useCallback((event) => {
+		const { active, over } = event;
+		setDragActiveId(null);
+		if (!over || active.id === over.id) return;
+		setEntries((prev) => {
+			const oldIndex = prev.findIndex((e) => e.id === String(active.id));
+			const newIndex = prev.findIndex((e) => e.id === String(over.id));
+			if (oldIndex === -1 || newIndex === -1) return prev;
+			return arrayMove(prev, oldIndex, newIndex);
+		});
+	}, []);
+	const handleSave = useCallback(() => {
+		onImagesChange(entries.map((e) => e.image).filter((img) => img.src.trim()));
+		onLayoutChange(layout);
+		dismiss();
+	}, [
+		entries,
+		layout,
+		onImagesChange,
+		onLayoutChange,
+		dismiss
+	]);
+	const dragActiveEntry = dragActiveId ? entries.find((e) => e.id === dragActiveId) : null;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsxs("div", {
+			className: galleryDialogHeader,
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: galleryDialogTitle,
+					children: [/* @__PURE__ */ jsx(Images, { size: 18 }), /* @__PURE__ */ jsx("span", { children: "Gallery Editor" })]
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: galleryHeaderActions,
+					children: /* @__PURE__ */ jsx(SegmentedControl, {
+						items: layoutItems,
+						value: layout,
+						onChange: setLayout
+					})
+				}),
+				/* @__PURE__ */ jsx("button", {
+					className: galleryHeaderClose,
+					type: "button",
+					onClick: dismiss,
+					children: /* @__PURE__ */ jsx(X, { size: 18 })
+				})
+			]
+		}),
+		/* @__PURE__ */ jsx("div", {
+			className: galleryDialogBody,
+			children: entries.length === 0 ? /* @__PURE__ */ jsxs("div", {
+				className: galleryDialogEmpty,
+				children: [
+					/* @__PURE__ */ jsx(ImageIcon, { size: 32 }),
+					/* @__PURE__ */ jsx("span", { children: "Add your first image" }),
+					/* @__PURE__ */ jsxs("button", {
+						className: galleryAddBtn,
+						style: { maxWidth: 200 },
+						type: "button",
+						onClick: handleAddImage,
+						children: [/* @__PURE__ */ jsx(Plus, { size: 14 }), "Add Image"]
+					})
+				]
+			}) : /* @__PURE__ */ jsxs("div", {
+				className: galleryImageList,
+				children: [/* @__PURE__ */ jsxs(DndContext, {
+					collisionDetection: closestCenter,
+					sensors,
+					onDragCancel: () => setDragActiveId(null),
+					onDragEnd: handleDragEnd,
+					onDragStart: (event) => {
+						setDragActiveId(String(event.active.id));
+					},
+					children: [/* @__PURE__ */ jsx(SortableContext, {
+						items: itemIds,
+						strategy: verticalListSortingStrategy,
+						children: entries.map((entry, index) => /* @__PURE__ */ jsx(SortableImageCard, {
+							id: entry.id,
+							image: entry.image,
+							index,
+							isLast: index === entries.length - 1,
+							lastInputRef: newInputRef,
+							onRemove: handleRemoveImage,
+							onUpdate: handleUpdateImage
+						}, entry.id))
+					}), typeof document !== "undefined" ? createPortal(/* @__PURE__ */ jsx("div", {
+						className: portalClassName,
+						children: /* @__PURE__ */ jsx(DragOverlay, {
+							dropAnimation: null,
+							children: dragActiveEntry ? /* @__PURE__ */ jsx(DragOverlayCard, { image: dragActiveEntry.image }) : null
+						})
+					}), document.body) : null]
+				}), /* @__PURE__ */ jsxs("button", {
+					className: galleryAddBtn,
+					type: "button",
+					onClick: handleAddImage,
+					children: [/* @__PURE__ */ jsx(Plus, { size: 14 }), "Add Image"]
+				})]
+			})
+		}),
+		/* @__PURE__ */ jsxs("div", {
+			className: galleryDialogFooter,
+			children: [/* @__PURE__ */ jsx("span", {
+				className: galleryFooterInfo,
+				children: `${entries.filter((e) => e.image.src.trim()).length} ${entries.filter((e) => e.image.src.trim()).length !== 1 ? "images" : "image"}`
+			}), /* @__PURE__ */ jsxs("div", {
+				className: galleryFooterActions,
+				children: [/* @__PURE__ */ jsx("button", {
+					className: galleryFooterBtnCancel,
+					type: "button",
+					onClick: dismiss,
+					children: "Cancel"
+				}), /* @__PURE__ */ jsx("button", {
+					className: galleryFooterBtnSave,
+					type: "button",
+					onClick: handleSave,
+					children: "Save"
+				})]
+			})]
+		})
+	] });
+};
+var GalleryEditRenderer = ({ images, layout, onImagesChange, onLayoutChange }) => {
+	const { className: portalClassName } = usePortalTheme();
+	const theme = useColorScheme();
+	const handleOpenEditor = useCallback(() => {
+		if (!onImagesChange || !onLayoutChange) return;
+		presentDialog({
+			content: ({ dismiss }) => /* @__PURE__ */ jsx(GalleryEditorDialogContent, {
+				dismiss,
+				initialImages: images,
+				initialLayout: layout,
+				onImagesChange,
+				onLayoutChange
+			}),
+			className: galleryDialogPopup,
+			portalClassName,
+			theme,
+			showCloseButton: false,
+			clickOutsideToDismiss: false
+		});
+	}, [
+		images,
+		layout,
+		onImagesChange,
+		onLayoutChange,
+		portalClassName,
+		theme
+	]);
+	if (!onImagesChange) return /* @__PURE__ */ jsx(GalleryRenderer, {
+		images,
+		layout
+	});
+	if (images.length === 0) return /* @__PURE__ */ jsxs("div", {
+		className: galleryEditContainer,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: galleryEmptyState,
+			children: [/* @__PURE__ */ jsx(ImageIcon, { size: 32 }), /* @__PURE__ */ jsx("span", { children: "Empty gallery" })]
+		}), /* @__PURE__ */ jsx("button", {
+			className: galleryEditOverlay,
+			type: "button",
+			onClick: handleOpenEditor,
+			children: /* @__PURE__ */ jsxs("span", {
+				className: galleryEditLabel,
+				children: [/* @__PURE__ */ jsx(Pencil, { size: 16 }), "Edit Gallery"]
+			})
+		})]
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: galleryEditContainer,
+		children: [/* @__PURE__ */ jsx(GalleryRenderer, {
+			images,
+			layout
+		}), /* @__PURE__ */ jsx("button", {
+			className: galleryEditOverlay,
+			type: "button",
+			onClick: handleOpenEditor,
+			children: /* @__PURE__ */ jsxs("span", {
+				className: galleryEditLabel,
+				children: [/* @__PURE__ */ jsx(Pencil, { size: 16 }), "Edit Gallery"]
+			})
+		})]
+	});
+};
+//#endregion
+//#region src/edit.ts
+var galleryEditNodes = [GalleryEditNode];
+//#endregion
+export { GalleryEditNode as a, $isGalleryEditNode as i, GalleryEditRenderer as n, $createGalleryEditNode as r, galleryEditNodes as t };

package/dist/edit.d.ts

@@ -0,0 +1,5 @@
+import { Klass, LexicalNode } from 'lexical';
+export { $createGalleryEditNode, $isGalleryEditNode, GalleryEditNode, } from './GalleryEditNode';
+export { GalleryEditRenderer } from './GalleryEditRenderer';
+export declare const galleryEditNodes: Array<Klass<LexicalNode>>;
+//# sourceMappingURL=edit.d.ts.map

package/dist/edit.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"edit.d.ts","sourceRoot":"","sources":["../src/edit.ts"],"names":[],"mappings":"AAAA,OAAO,cAAc,CAAA;AAErB,OAAO,KAAK,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAIjD,OAAO,EACL,sBAAsB,EACtB,kBAAkB,EAClB,eAAe,GAChB,MAAM,mBAAmB,CAAA;AAC1B,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAA;AAE3D,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,KAAK,CAAC,WAAW,CAAC,CAAqB,CAAA"}

package/dist/edit.mjs

@@ -0,0 +1,2 @@
+import { a as GalleryEditNode, i as $isGalleryEditNode, n as GalleryEditRenderer, r as $createGalleryEditNode, t as galleryEditNodes } from "./edit-BQnC2MpC.js";
+export { $createGalleryEditNode, $isGalleryEditNode, GalleryEditNode, GalleryEditRenderer, galleryEditNodes };

package/dist/index.d.ts

@@ -1,9 +1,4 @@
-import { Klass, LexicalNode } from 'lexical';
-export { $createGalleryEditNode, $isGalleryEditNode, GalleryEditNode, } from './GalleryEditNode';
-export { GalleryEditRenderer } from './GalleryEditRenderer';
-export type { GalleryNodePayload, SerializedGalleryNode } from './GalleryNode';
-export { $createGalleryNode, $isGalleryNode, GalleryNode } from './GalleryNode';
-export { default, GalleryRenderer } from './GalleryRenderer';
-export declare const galleryNodes: Array<Klass<LexicalNode>>;
-export declare const galleryEditNodes: Array<Klass<LexicalNode>>;
+export * from './edit';
+export * from './node';
+export * from './renderer';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,cAAc,CAAA;AAErB,OAAO,KAAK,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAKjD,OAAO,EACL,sBAAsB,EACtB,kBAAkB,EAClB,eAAe,GAChB,MAAM,mBAAmB,CAAA;AAC1B,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAA;AAC3D,YAAY,EAAE,kBAAkB,EAAE,qBAAqB,EAAE,MAAM,eAAe,CAAA;AAC9E,OAAO,EAAE,kBAAkB,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAC/E,OAAO,EAAE,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AAE5D,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,KAAK,CAAC,WAAW,CAAC,CAAiB,CAAA;AACpE,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,KAAK,CAAC,WAAW,CAAC,CAAqB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAA;AACtB,cAAc,QAAQ,CAAA;AACtB,cAAc,YAAY,CAAA"}