@haklex/rich-ext-gallery 0.0.65 → 0.0.66

package/README.md

@@ -1,47 +1,89 @@
 # @haklex/rich-ext-gallery
 
-图片画廊扩展。
+Image gallery extension with grid and carousel layouts, drag-and-drop reordering.
 
-## 安装
+## Installation
 
 ```bash
-pnpm add @haklex/rich-ext-gallery @haklex/rich-editor
+pnpm add @haklex/rich-ext-gallery
 ```
 
-## 导出
+## Peer Dependencies
+
+| Package | Version |
+| --- | --- |
+| `lexical` | `^0.41.0` |
+| `lucide-react` | `^0.574.0` |
+| `react` | `>= 19` |
+| `react-dom` | `>= 19` |
+
+## Usage
+
+### Register nodes in your editor config
 
 ```ts
-// 节点
-export { GalleryNode } from './GalleryNode'
-export { $createGalleryNode, $isGalleryNode } from './GalleryNode'
-export type { GalleryNodePayload, SerializedGalleryNode } from './GalleryNode'
+import { galleryEditNodes } from '@haklex/rich-ext-gallery'
+
+const editorConfig = {
+  nodes: [...galleryEditNodes],
+}
+```
 
-// 渲染器
-export { GalleryRenderer } from './GalleryRenderer'
-export { GalleryEditRenderer } from './GalleryEditRenderer'
+For static/read-only rendering:
 
-// 节点集合
-export const galleryNodes: Array<Klass<LexicalNode>>
+```ts
+import { galleryNodes } from '@haklex/rich-ext-gallery/static'
+
+const staticConfig = {
+  nodes: [...galleryNodes],
+}
 ```
 
-## 使用
+### Use renderers
 
 ```tsx
-import { GalleryRenderer, galleryNodes } from '@haklex/rich-ext-gallery'
-import { RichRenderer } from '@haklex/rich-editor/renderer'
-import type { RendererConfig } from '@haklex/rich-editor'
+import { GalleryEditRenderer } from '@haklex/rich-ext-gallery'
+import { GalleryRenderer } from '@haklex/rich-ext-gallery/static'
+```
 
-const config: RendererConfig = {
-  Gallery: GalleryRenderer,
-}
+### Import styles
 
-<RichRenderer 
-  value={content} 
-  rendererConfig={config}
-  extraNodes={[...galleryNodes]}
-/>
+```ts
+import '@haklex/rich-ext-gallery/style.css'
 ```
 
+## Exports
+
+### Nodes
+
+- `GalleryNode` -- static (read-only) node
+- `GalleryEditNode` -- edit node with drag-and-drop image reordering
+- `$createGalleryNode()` / `$isGalleryNode()` -- Lexical helpers
+- `galleryNodes` -- array of static nodes for config registration
+- `galleryEditNodes` -- array of edit nodes for config registration
+
+### Renderers
+
+- `GalleryRenderer` -- static renderer (grid/carousel display)
+- `GalleryEditRenderer` -- edit renderer with drag-and-drop support
+
+### Types
+
+- `GalleryNodePayload` -- payload type for creating gallery nodes
+- `SerializedGalleryNode` -- serialized gallery node type
+
+### Sub-path Exports
+
+| Path | Description |
+| --- | --- |
+| `@haklex/rich-ext-gallery` | Full exports (edit + static) |
+| `@haklex/rich-ext-gallery/static` | Static-only (no drag-and-drop deps) |
+| `@haklex/rich-ext-gallery/style.css` | Stylesheet |
+
+## Part of Haklex
+
+This package is part of the [Haklex](../../README.md) rich editor ecosystem.
+
 ## License
 
 MIT

package/dist/GalleryEditNode.d.ts

@@ -1,4 +1,4 @@
-import { CommandItemConfig } from '@haklex/rich-editor';
+import { CommandItemConfig } from '@haklex/rich-editor/commands';
 import { EditorConfig, LexicalEditor, LexicalNode, NodeKey } from 'lexical';
 import { ReactElement } from 'react';
 import { GalleryNode, GalleryNodePayload, SerializedGalleryNode } from './GalleryNode';

package/dist/GalleryEditNode.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GalleryEditNode.d.ts","sourceRoot":"","sources":["../src/GalleryEditNode.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,iBAAiB,EAGlB,MAAM,qBAAqB,CAAA;AAE5B,OAAO,KAAK,EAAE,YAAY,EAAE,aAAa,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,SAAS,CAAA;AAGhF,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAA;AAGzC,OAAO,EACL,WAAW,EACX,KAAK,kBAAkB,EACvB,KAAK,qBAAqB,EAC3B,MAAM,eAAe,CAAA;AAGtB,qBAAa,eAAgB,SAAQ,WAAW;IAC9C,MAAM,CAAC,YAAY,EAAE,iBAAiB,EAAE,CAevC;IAED,MAAM,CAAC,KAAK,CAAC,IAAI,EAAE,eAAe,GAAG,eAAe;gBAUxC,OAAO,EAAE,kBAAkB,EAAE,GAAG,CAAC,EAAE,OAAO;IAItD,MAAM,CAAC,UAAU,CAAC,cAAc,EAAE,qBAAqB,GAAG,eAAe;IAOzE,QAAQ,CAAC,MAAM,EAAE,aAAa,EAAE,OAAO,EAAE,YAAY,GAAG,YAAY;CAoBrE;AAED,wBAAgB,sBAAsB,CACpC,OAAO,EAAE,kBAAkB,GAC1B,eAAe,CAEjB;AAED,wBAAgB,kBAAkB,CAChC,IAAI,EAAE,WAAW,GAAG,IAAI,GAAG,SAAS,GACnC,IAAI,IAAI,eAAe,CAEzB"}
+{"version":3,"file":"GalleryEditNode.d.ts","sourceRoot":"","sources":["../src/GalleryEditNode.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,8BAA8B,CAAC;AAGtE,OAAO,KAAK,EAAE,YAAY,EAAE,aAAa,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAGjF,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAG1C,OAAO,EAAE,WAAW,EAAE,KAAK,kBAAkB,EAAE,KAAK,qBAAqB,EAAE,MAAM,eAAe,CAAC;AAGjG,qBAAa,eAAgB,SAAQ,WAAW;IAC9C,MAAM,CAAC,YAAY,EAAE,iBAAiB,EAAE,CAetC;IAEF,MAAM,CAAC,KAAK,CAAC,IAAI,EAAE,eAAe,GAAG,eAAe;gBAUxC,OAAO,EAAE,kBAAkB,EAAE,GAAG,CAAC,EAAE,OAAO;IAItD,MAAM,CAAC,UAAU,CAAC,cAAc,EAAE,qBAAqB,GAAG,eAAe;IAOzE,QAAQ,CAAC,MAAM,EAAE,aAAa,EAAE,OAAO,EAAE,YAAY,GAAG,YAAY;CAoBrE;AAED,wBAAgB,sBAAsB,CAAC,OAAO,EAAE,kBAAkB,GAAG,eAAe,CAEnF;AAED,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI,GAAG,SAAS,GAAG,IAAI,IAAI,eAAe,CAEhG"}

package/dist/GalleryEditRenderer.d.ts

@@ -1,4 +1,4 @@
-import { GalleryRendererProps } from '@haklex/rich-editor';
+import { GalleryRendererProps } from '@haklex/rich-editor/renderers';
 import { FC } from 'react';
 export declare const GalleryEditRenderer: FC<GalleryRendererProps>;
 //# sourceMappingURL=GalleryEditRenderer.d.ts.map

package/dist/GalleryEditRenderer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GalleryEditRenderer.d.ts","sourceRoot":"","sources":["../src/GalleryEditRenderer.tsx"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAAgB,oBAAoB,EAAE,MAAM,qBAAqB,CAAA;AAa7E,OAAO,KAAK,EAAiB,EAAE,EAAE,MAAM,OAAO,CAAA;AAmV9C,eAAO,MAAM,mBAAmB,EAAE,EAAE,CAAC,oBAAoB,CAqExD,CAAA"}
+{"version":3,"file":"GalleryEditRenderer.d.ts","sourceRoot":"","sources":["../src/GalleryEditRenderer.tsx"],"names":[],"mappings":"AAiBA,OAAO,KAAK,EAAgB,oBAAoB,EAAE,MAAM,+BAA+B,CAAC;AAIxF,OAAO,KAAK,EAAiB,EAAE,EAAE,MAAM,OAAO,CAAC;AAkS/C,eAAO,MAAM,mBAAmB,EAAE,EAAE,CAAC,oBAAoB,CA6DxD,CAAC"}

package/dist/{GalleryNode-DUfg2dIP.js → GalleryNode-CV8DRu_G.js}

@@ -1,7 +1,7 @@
 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";
+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";
@@ -72,10 +72,7 @@ function useThumbhashStyle(image) {
     return { backgroundImage: `url(${url})`, backgroundSize: "cover" };
   }, [image.thumbhash]);
 }
-const GalleryRenderer = ({
-  images,
-  layout
-}) => {
+const GalleryRenderer = ({ images, layout }) => {
   const [containerRef, setContainerRef] = useState(null);
   const [, setUpdated] = useState({});
   const memoedChildContainerWidthRef = useRef(0);
@@ -179,9 +176,9 @@ const GalleryRenderer = ({
           "div",
           {
             className: galleryContainer,
-            onTouchStart: handleCancelAutoplay,
-            onScroll: handleOnScroll,
             ref: setContainerRef,
+            onScroll: handleOnScroll,
+            onTouchStart: handleCancelAutoplay,
             children: images.map((image, index) => /* @__PURE__ */ jsx(
               GalleryFigure,
               {
@@ -232,12 +229,12 @@ const GalleryFigure = memo(
     return /* @__PURE__ */ jsx(PhotoView, { src: image.src, children: /* @__PURE__ */ jsx("figure", { className: galleryItem, style: { ...thumbStyle, ...style }, children: /* @__PURE__ */ jsx(
       "img",
       {
-        src: image.src,
         alt: image.alt || "",
-        width: image.width,
         height: image.height,
         loading: "lazy",
-        style: { maxWidth: "100%", height: "auto" }
+        src: image.src,
+        style: { maxWidth: "100%", height: "auto" },
+        width: image.width
       }
     ) }) });
   }

package/dist/GalleryNode.d.ts

@@ -1,4 +1,4 @@
-import { GalleryImage } from '@haklex/rich-editor';
+import { GalleryImage } from '@haklex/rich-editor/renderers';
 import { EditorConfig, LexicalEditor, LexicalNode, NodeKey, SerializedLexicalNode, Spread, DecoratorNode } from 'lexical';
 import { ReactElement } from 'react';
 export type SerializedGalleryNode = Spread<{

package/dist/GalleryNode.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GalleryNode.d.ts","sourceRoot":"","sources":["../src/GalleryNode.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAwB,MAAM,qBAAqB,CAAA;AAE7E,OAAO,KAAK,EACV,YAAY,EACZ,aAAa,EACb,WAAW,EACX,OAAO,EACP,qBAAqB,EACrB,MAAM,EACP,MAAM,SAAS,CAAA;AAChB,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AACvC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAA;AAIzC,MAAM,MAAM,qBAAqB,GAAG,MAAM,CACxC;IACE,MAAM,EAAE,YAAY,EAAE,CAAA;IACtB,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,UAAU,CAAA;CACzC,EACD,qBAAqB,CACtB,CAAA;AAED,MAAM,WAAW,kBAAkB;IACjC,MAAM,EAAE,YAAY,EAAE,CAAA;IACtB,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,UAAU,CAAA;CACzC;AAED,qBAAa,WAAY,SAAQ,aAAa,CAAC,YAAY,CAAC;IAC1D,QAAQ,EAAE,YAAY,EAAE,CAAA;IACxB,QAAQ,EAAE,MAAM,GAAG,SAAS,GAAG,UAAU,CAAA;IAEzC,MAAM,CAAC,OAAO,IAAI,MAAM;IAIxB,MAAM,CAAC,KAAK,CAAC,IAAI,EAAE,WAAW,GAAG,WAAW;gBAUhC,OAAO,EAAE,kBAAkB,EAAE,GAAG,CAAC,EAAE,OAAO;IAMtD,SAAS,CAAC,OAAO,EAAE,YAAY,GAAG,WAAW;IAM7C,SAAS,IAAI,OAAO;IAIpB,QAAQ,IAAI,OAAO;IAInB,MAAM,CAAC,UAAU,CAAC,cAAc,EAAE,qBAAqB,GAAG,WAAW;IAOrE,UAAU,IAAI,qBAAqB;IAUnC,SAAS,IAAI,YAAY,EAAE;IAI3B,SAAS,CAAC,MAAM,EAAE,YAAY,EAAE,GAAG,IAAI;IAKvC,SAAS,IAAI,MAAM,GAAG,SAAS,GAAG,UAAU;IAI5C,SAAS,CAAC,MAAM,EAAE,MAAM,GAAG,SAAS,GAAG,UAAU,GAAG,IAAI;IAKxD,QAAQ,CAAC,OAAO,EAAE,aAAa,EAAE,OAAO,EAAE,YAAY,GAAG,YAAY;CAOtE;AAED,wBAAgB,kBAAkB,CAAC,OAAO,EAAE,kBAAkB,GAAG,WAAW,CAE3E;AAED,wBAAgB,cAAc,CAC5B,IAAI,EAAE,WAAW,GAAG,IAAI,GAAG,SAAS,GACnC,IAAI,IAAI,WAAW,CAErB"}
+{"version":3,"file":"GalleryNode.d.ts","sourceRoot":"","sources":["../src/GalleryNode.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAwB,MAAM,+BAA+B,CAAC;AAExF,OAAO,KAAK,EACV,YAAY,EACZ,aAAa,EACb,WAAW,EACX,OAAO,EACP,qBAAqB,EACrB,MAAM,EACP,MAAM,SAAS,CAAC;AACjB,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AACxC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAI1C,MAAM,MAAM,qBAAqB,GAAG,MAAM,CACxC;IACE,MAAM,EAAE,YAAY,EAAE,CAAC;IACvB,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,UAAU,CAAC;CAC1C,EACD,qBAAqB,CACtB,CAAC;AAEF,MAAM,WAAW,kBAAkB;IACjC,MAAM,EAAE,YAAY,EAAE,CAAC;IACvB,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,UAAU,CAAC;CAC1C;AAED,qBAAa,WAAY,SAAQ,aAAa,CAAC,YAAY,CAAC;IAC1D,QAAQ,EAAE,YAAY,EAAE,CAAC;IACzB,QAAQ,EAAE,MAAM,GAAG,SAAS,GAAG,UAAU,CAAC;IAE1C,MAAM,CAAC,OAAO,IAAI,MAAM;IAIxB,MAAM,CAAC,KAAK,CAAC,IAAI,EAAE,WAAW,GAAG,WAAW;gBAUhC,OAAO,EAAE,kBAAkB,EAAE,GAAG,CAAC,EAAE,OAAO;IAMtD,SAAS,CAAC,OAAO,EAAE,YAAY,GAAG,WAAW;IAM7C,SAAS,IAAI,OAAO;IAIpB,QAAQ,IAAI,OAAO;IAInB,MAAM,CAAC,UAAU,CAAC,cAAc,EAAE,qBAAqB,GAAG,WAAW;IAOrE,UAAU,IAAI,qBAAqB;IAUnC,SAAS,IAAI,YAAY,EAAE;IAI3B,SAAS,CAAC,MAAM,EAAE,YAAY,EAAE,GAAG,IAAI;IAKvC,SAAS,IAAI,MAAM,GAAG,SAAS,GAAG,UAAU;IAI5C,SAAS,CAAC,MAAM,EAAE,MAAM,GAAG,SAAS,GAAG,UAAU,GAAG,IAAI;IAKxD,QAAQ,CAAC,OAAO,EAAE,aAAa,EAAE,OAAO,EAAE,YAAY,GAAG,YAAY;CAOtE;AAED,wBAAgB,kBAAkB,CAAC,OAAO,EAAE,kBAAkB,GAAG,WAAW,CAE3E;AAED,wBAAgB,cAAc,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI,GAAG,SAAS,GAAG,IAAI,IAAI,WAAW,CAExF"}

package/dist/GalleryRenderer.d.ts

@@ -1,4 +1,4 @@
-import { GalleryRendererProps } from '@haklex/rich-editor';
+import { GalleryRendererProps } from '@haklex/rich-editor/renderers';
 import { ComponentType } from 'react';
 export declare const GalleryRenderer: ComponentType<GalleryRendererProps>;
 declare const _default: import('react').NamedExoticComponent<GalleryRendererProps>;

package/dist/GalleryRenderer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GalleryRenderer.d.ts","sourceRoot":"","sources":["../src/GalleryRenderer.tsx"],"names":[],"mappings":"AAAA,OAAO,4CAA4C,CAAA;AAEnD,OAAO,EAGL,KAAK,oBAAoB,EAC1B,MAAM,qBAAqB,CAAA;AAE5B,OAAO,KAAK,EAAE,aAAa,EAAkB,MAAM,OAAO,CAAA;AAyC1D,eAAO,MAAM,eAAe,EAAE,aAAa,CAAC,oBAAoB,CA2L/D,CAAA;;AAuBD,wBAAoC"}
+{"version":3,"file":"GalleryRenderer.d.ts","sourceRoot":"","sources":["../src/GalleryRenderer.tsx"],"names":[],"mappings":"AAAA,OAAO,4CAA4C,CAAC;AAEpD,OAAO,EAGL,KAAK,oBAAoB,EAC1B,MAAM,+BAA+B,CAAC;AAEvC,OAAO,KAAK,EAAE,aAAa,EAAkB,MAAM,OAAO,CAAC;AAoC3D,eAAO,MAAM,eAAe,EAAE,aAAa,CAAC,oBAAoB,CAuL/D,CAAC;;AAuBF,wBAAqC"}

package/dist/index.mjs

@@ -1,9 +1,9 @@
 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 { 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";
-import { $, B, C } from "./GalleryNode-DUfg2dIP.js";
-import { createRendererDecoration, useColorScheme } from "@haklex/rich-editor";
+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-CV8DRu_G.js";
+import { $, B, C } from "./GalleryNode-CV8DRu_G.js";
+import { createRendererDecoration } from "@haklex/rich-editor/renderers";
 import { $insertNodes, $getNodeByKey } from "lexical";
 import { Images, ImageIcon, Pencil, X, Plus, GripVertical, Trash2 } from "lucide-react";
 import { createElement, useCallback, useState, useRef } from "react";
@@ -11,6 +11,7 @@ import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { useSensors, useSensor, PointerSensor, DndContext, closestCenter, DragOverlay } from "@dnd-kit/core";
 import { arrayMove, SortableContext, verticalListSortingStrategy, useSortable } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
+import { useColorScheme } from "@haklex/rich-editor";
 import { presentDialog, SegmentedControl } from "@haklex/rich-editor-ui";
 import { usePortalTheme, vars } from "@haklex/rich-style-token";
 import { createPortal } from "react-dom";
@@ -87,38 +88,25 @@ function genId() {
   return `img-${++nextId}`;
 }
 const SortableImageCard = ({ id, image, index, isLast, lastInputRef, onUpdate, onRemove }) => {
-  const {
-    attributes,
-    listeners,
-    setNodeRef,
-    transform,
-    transition,
-    isDragging
-  } = useSortable({ id });
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
+    id
+  });
   const style = {
     transform: CSS.Transform.toString(transform),
     transition: isDragging ? void 0 : transition,
     opacity: isDragging ? 0.4 : 1
   };
-  return /* @__PURE__ */ jsxs("div", { ref: setNodeRef, style, className: galleryImageCard, 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", { src: image.src, alt: image.alt || "" }) : /* @__PURE__ */ jsx("span", { className: galleryImageThumbPlaceholder, children: /* @__PURE__ */ jsx(ImageIcon, { size: 20 }) }) }),
+  return /* @__PURE__ */ jsxs("div", { className: galleryImageCard, ref: setNodeRef, style, 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",
         {
-          ref: isLast ? lastInputRef : void 0,
           className: galleryImageInput,
-          type: "text",
           placeholder: "Image URL",
+          ref: isLast ? lastInputRef : void 0,
+          type: "text",
           value: image.src,
           onChange: (e) => onUpdate(index, "src", e.target.value)
         }
@@ -127,8 +115,8 @@ const SortableImageCard = ({ id, image, index, isLast, lastInputRef, onUpdate, o
         "input",
         {
           className: galleryImageInput,
-          type: "text",
           placeholder: "Alt text (optional)",
+          type: "text",
           value: image.alt || "",
           onChange: (e) => onUpdate(index, "alt", e.target.value)
         }
@@ -137,10 +125,10 @@ const SortableImageCard = ({ id, image, index, isLast, lastInputRef, onUpdate, o
     /* @__PURE__ */ jsx("div", { className: galleryImageActions, children: /* @__PURE__ */ jsx(
       "button",
       {
-        type: "button",
         className: galleryImageDeleteBtn,
-        onClick: () => onRemove(index),
         title: "Remove",
+        type: "button",
+        onClick: () => onRemove(index),
         children: /* @__PURE__ */ jsx(Trash2, { size: 14 })
       }
     ) })
@@ -148,7 +136,7 @@ const SortableImageCard = ({ id, image, index, isLast, lastInputRef, onUpdate, o
 };
 const DragOverlayCard = ({ image }) => /* @__PURE__ */ jsxs("div", { className: galleryImageCard, style: { opacity: 0.9 }, children: [
   /* @__PURE__ */ jsx("div", { className: galleryImageDragHandle, children: /* @__PURE__ */ jsx(GripVertical, { size: 14 }) }),
-  /* @__PURE__ */ jsx("div", { className: galleryImageThumb, children: image.src ? /* @__PURE__ */ jsx("img", { src: image.src, alt: image.alt || "" }) : /* @__PURE__ */ jsx("span", { className: galleryImageThumbPlaceholder, children: /* @__PURE__ */ jsx(ImageIcon, { size: 20 }) }) }),
+  /* @__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",
     {
@@ -162,13 +150,7 @@ const DragOverlayCard = ({ image }) => /* @__PURE__ */ jsxs("div", { className:
     }
   ) })
 ] });
-const GalleryEditorDialogContent = ({
-  dismiss,
-  initialImages,
-  initialLayout,
-  onImagesChange,
-  onLayoutChange
-}) => {
+const GalleryEditorDialogContent = ({ dismiss, initialImages, initialLayout, onImagesChange, onLayoutChange }) => {
   const { className: portalClassName } = usePortalTheme();
   const [entries, setEntries] = useState(
     () => initialImages.map((img) => ({ id: genId(), image: { ...img } }))
@@ -177,14 +159,9 @@ const GalleryEditorDialogContent = ({
   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 sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 5 } }));
   const handleAddImage = useCallback(() => {
-    setEntries((prev) => [
-      ...prev,
-      { id: genId(), image: { src: "", alt: "" } }
-    ]);
+    setEntries((prev) => [...prev, { id: genId(), image: { src: "", alt: "" } }]);
     requestAnimationFrame(() => {
       newInputRef.current?.focus();
     });
@@ -226,23 +203,8 @@ const GalleryEditorDialogContent = ({
         /* @__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",
-        {
-          type: "button",
-          className: galleryHeaderClose,
-          onClick: dismiss,
-          children: /* @__PURE__ */ jsx(X, { size: 18 })
-        }
-      )
+      /* @__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 }),
@@ -250,10 +212,10 @@ const GalleryEditorDialogContent = ({
       /* @__PURE__ */ jsxs(
         "button",
         {
-          type: "button",
           className: galleryAddBtn,
-          onClick: handleAddImage,
           style: { maxWidth: 200 },
+          type: "button",
+          onClick: handleAddImage,
           children: [
             /* @__PURE__ */ jsx(Plus, { size: 14 }),
             "Add Image"
@@ -264,34 +226,27 @@ const GalleryEditorDialogContent = ({
       /* @__PURE__ */ jsxs(
         DndContext,
         {
-          sensors,
           collisionDetection: closestCenter,
+          sensors,
+          onDragCancel: () => setDragActiveId(null),
+          onDragEnd: handleDragEnd,
           onDragStart: (event) => {
             setDragActiveId(String(event.active.id));
           },
-          onDragEnd: handleDragEnd,
-          onDragCancel: () => setDragActiveId(null),
           children: [
-            /* @__PURE__ */ jsx(
-              SortableContext,
+            /* @__PURE__ */ jsx(SortableContext, { items: itemIds, strategy: verticalListSortingStrategy, children: entries.map((entry, index) => /* @__PURE__ */ jsx(
+              SortableImageCard,
               {
-                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,
-                    onUpdate: handleUpdateImage,
-                    onRemove: handleRemoveImage
-                  },
-                  entry.id
-                ))
-              }
-            ),
+                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
@@ -299,40 +254,16 @@ const GalleryEditorDialogContent = ({
           ]
         }
       ),
-      /* @__PURE__ */ jsxs(
-        "button",
-        {
-          type: "button",
-          className: galleryAddBtn,
-          onClick: handleAddImage,
-          children: [
-            /* @__PURE__ */ jsx(Plus, { size: 14 }),
-            "Add Image"
-          ]
-        }
-      )
+      /* @__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",
-          {
-            type: "button",
-            className: galleryFooterBtnCancel,
-            onClick: dismiss,
-            children: "Cancel"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            className: galleryFooterBtnSave,
-            onClick: handleSave,
-            children: "Save"
-          }
-        )
+        /* @__PURE__ */ jsx("button", { className: galleryFooterBtnCancel, type: "button", onClick: dismiss, children: "Cancel" }),
+        /* @__PURE__ */ jsx("button", { className: galleryFooterBtnSave, type: "button", onClick: handleSave, children: "Save" })
       ] })
     ] })
   ] });
@@ -374,34 +305,18 @@ const GalleryEditRenderer = ({
         /* @__PURE__ */ jsx(ImageIcon, { size: 32 }),
         /* @__PURE__ */ jsx("span", { children: "Empty gallery" })
       ] }),
-      /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          className: galleryEditOverlay,
-          onClick: handleOpenEditor,
-          children: /* @__PURE__ */ jsxs("span", { className: galleryEditLabel, children: [
-            /* @__PURE__ */ jsx(Pencil, { size: 16 }),
-            "Edit 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",
-      {
-        type: "button",
-        className: galleryEditOverlay,
-        onClick: handleOpenEditor,
-        children: /* @__PURE__ */ jsxs("span", { className: galleryEditLabel, children: [
-          /* @__PURE__ */ jsx(Pencil, { size: 16 }),
-          "Edit Gallery"
-        ] })
-      }
-    )
+    /* @__PURE__ */ jsx("button", { className: galleryEditOverlay, type: "button", onClick: handleOpenEditor, children: /* @__PURE__ */ jsxs("span", { className: galleryEditLabel, children: [
+      /* @__PURE__ */ jsx(Pencil, { size: 16 }),
+      "Edit Gallery"
+    ] }) })
   ] });
 };
 const galleryNodes = [GalleryNode];

package/dist/static.mjs

@@ -1,5 +1,5 @@
-import { G as GalleryNode } from "./GalleryNode-DUfg2dIP.js";
-import { $, B, a, C } from "./GalleryNode-DUfg2dIP.js";
+import { G as GalleryNode } from "./GalleryNode-CV8DRu_G.js";
+import { $, B, a, C } from "./GalleryNode-CV8DRu_G.js";
 const galleryNodes = [GalleryNode];
 export {
   $ as $createGalleryNode,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@haklex/rich-ext-gallery",
   "type": "module",
-  "version": "0.0.65",
+  "version": "0.0.66",
   "description": "Image gallery extension with drag-and-drop",
   "license": "MIT",
   "exports": {
@@ -31,9 +31,9 @@
     "@dnd-kit/utilities": "^3.2.2",
     "react-intersection-observer": "^10.0.3",
     "react-photo-view": "^1.2.7",
-    "@haklex/rich-editor": "0.0.65",
-    "@haklex/rich-editor-ui": "0.0.65",
-    "@haklex/rich-style-token": "0.0.65"
+    "@haklex/rich-editor": "0.0.66",
+    "@haklex/rich-editor-ui": "0.0.66",
+    "@haklex/rich-style-token": "0.0.66"
   },
   "devDependencies": {
     "@types/react": "^19.2.14",
@@ -51,6 +51,11 @@
   "publishConfig": {
     "access": "public"
   },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Innei/haklex.git",
+    "directory": "packages/rich-ext-gallery"
+  },
   "scripts": {
     "build": "vite build",
     "dev:build": "vite build --watch"